CSS GRID PADA HTML

SCRIPT HTML dengan CSS

Membuat website Kegiatan Ekstrakulikuler di Sekolah

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ekstrakurikuler SMP Gemanurani</title>
<style>
/* RESET CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f1f5f9;
color: #1e293b;
line-height: 1.6;
}
/* NAVBAR */
.navbar {
background: #1d4ed8;
color: white;
padding: 18px 8%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.logo {
font-size: 22px;
font-weight: bold;
}
.navbar ul {
display: flex;
list-style: none;
gap: 22px;
flex-wrap: wrap;
}
.navbar a {
color: white;
text-decoration: none;
transition: color 0.3s;
}
.navbar a:hover {
color: #facc15;
}
/* HEADER */
.hero {
background: linear-gradient(135deg, #1d4ed8, #60a5fa);
color: white;
text-align: center;
padding: 65px 20px;
}
.hero h1 {
font-size: clamp(28px, 5vw, 44px);
margin-bottom: 12px;
}
.hero p {
max-width: 650px;
margin: auto;
font-size: 17px;
}
/* KONTEN UTAMA */
.container {
width: min(1100px, 90%);
margin: 45px auto;
}
.section-title {
text-align: center;
margin-bottom: 30px;
}
.section-title h2 {
color: #1d4ed8;
font-size: 30px;
margin-bottom: 8px;
}
/* CSS GRID RESPONSIVE */
.grid-container {
display: grid;
/* Kolom otomatis menyesuaikan lebar layar */
grid-template-columns:
repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
/* KARTU KEGIATAN */
.card {
background: white;
border-radius: 16px;
overflow: hidden;
border: 1px solid #dbeafe;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.card-image {
height: 150px;
display: grid;
place-items: center;
font-size: 60px;
}
.coding {
background: #dbeafe;
}
.basket {
background: #ffedd5;
}
.musik {
background: #f3e8ff;
}
.robotik {
background: #dcfce7;
}
.card-content {
padding: 22px;
}
.card h3 {
color: #1d4ed8;
margin-bottom: 10px;
font-size: 21px;
}
.card p {
color: #64748b;
margin-bottom: 18px;
}
.button {
display: inline-block;
padding: 10px 16px;
background: #2563eb;
color: white;
text-decoration: none;
border-radius: 8px;
transition: background 0.3s;
}
.button:hover {
background: #1e40af;
}
/* FOOTER */
footer {
background: #0f172a;
color: white;
text-align: center;
padding: 25px 15px;
margin-top: 50px;
}
/* TABLET */
@media (max-width: 768px) {
.navbar {
flex-direction: column;
text-align: center;
}
.navbar ul {
justify-content: center;
}
.hero {
padding: 45px 20px;
}
.container {
width: 92%;
}
.grid-container {
gap: 16px;
}
}
/* SMARTPHONE */
@media (max-width: 480px) {
.navbar ul {
gap: 12px;
font-size: 14px;
}
.logo {
font-size: 19px;
}
.hero p {
font-size: 15px;
}
.section-title h2 {
font-size: 25px;
}
.grid-container {
grid-template-columns: 1fr;
}
.card-content {
padding: 18px;
}
}
</style>
</head>
<body>

<nav class="navbar">
<div class="logo">SMP Gemanurani</div>
<ul>
<li><a href="#beranda">Beranda</a></li>
<li><a href="#kegiatan">Kegiatan</a></li>
<li><a href="#kontak">Kontak</a></li>
</ul>
</nav>

<header class="hero" id="beranda">
<h1>Jelajahi Bakat dan Kreativitasmu!</h1>
<p>
Temukan kegiatan ekstrakurikuler yang kamu sukai.
Belajar, berkreasi, dan berkembang bersama SMP Gemanurani.
</p>
</header>

<main class="container" id="kegiatan">
<div class="section-title">
<h2>Ekstrakurikuler Kami</h2>
<p>Pilih kegiatan yang sesuai dengan minatmu.</p>
</div>
<div class="grid-container">
<article class="card">
<div class="card-image coding">💻</div>
<div class="card-content">
<h3>Klub Coding</h3>
<p>
Belajar membuat website, animasi,
dan game dengan teknologi digital.
</p>
<a href="#kontak" class="button">Pelajari</a>
</div>
</article>
<article class="card">
<div class="card-image basket">🏀</div>
<div class="card-content">
<h3>Bola Basket</h3>
<p>
Tingkatkan kebugaran, sportivitas,
dan kemampuan bekerja sama.
</p>
<a href="#kontak" class="button">Pelajari</a>
</div>
</article>
<article class="card">
<div class="card-image musik">🎸</div>
<div class="card-content">
<h3>Seni Musik</h3>
<p>
Kembangkan kreativitas dan kemampuan
bermusik bersama teman-teman.
</p>
<a href="#kontak" class="button">Pelajari</a>
</div>
</article>
<article class="card">
<div class="card-image robotik">🤖</div>
<div class="card-content">
<h3>Robotik</h3>
<p>
Kenali teknologi, logika pemrograman,
dan dasar-dasar robotika.
</p>
<a href="#kontak" class="button">Pelajari</a>
</div>
</article>
</div>
</main>

<footer id="kontak">
<p>© 2026 SMP Gemanurani.</p>
<p>Belajar, Berkarya, dan Berprestasi.</p>
</footer>
</body>
</html>

Jika ingin menggati tampilan Grid ganti Script pada bagian CSS Grid dan HTML Grid

CSS

/* GRID CARD */

.grid-container {

display: grid;

grid-template-columns: repeat(

auto-fit,

minmax(min(100%, 240px), 1fr)

);

gap: 26px;

align-items: stretch;

}

/* CARD UTAMA */

.card {

--accent: #2563eb;

--soft: #dbeafe;

--deep: #1e3a8a;

position: relative;

isolation: isolate;

display: flex;

flex-direction: column;

min-width: 0;

overflow: hidden;

background: linear-gradient(

145deg, var(--soft), #ffffff 85%

);

border: 1px solid var(--soft);

border-radius: 28px 8px 28px 8px;

box-shadow: 0 8px 22px rgba(30, 41, 59, 0.08);

transition:

transform 0.3s ease,

box-shadow 0.3s ease,

border-radius 0.3s ease;

}

/* ORNAMEN BULAT */

.card::before {

content: "";

position: absolute;

z-index: -1;

width: 150px;

height: 150px;

border-radius: 50%;

background: var(--soft);

opacity: 0.8;

top: -65px;

right: -45px;

}

/* EFEK HOVER */

.card:hover {

transform: translateY(-8px);

border-radius: 8px 28px 8px 28px;

box-shadow: 0 18px 35px rgba(30, 41, 59, 0.16);

}

/* WARNA SETIAP CARD */

.card:nth-child(4n + 1) {

--accent: #2563eb;

--soft: #dbeafe;

--deep: #1e3a8a;

}

.card:nth-child(4n + 2) {

--accent: #ea580c;

--soft: #ffedd5;

--deep: #7c2d12;

}

.card:nth-child(4n + 3) {

--accent: #9333ea;

--soft: #f3e8ff;

--deep: #581c87;

}

.card:nth-child(4n + 4) {

--accent: #16a34a;

--soft: #dcfce7;

--deep: #14532d;

}

/* AREA IKON */

.card-image {

position: relative;

display: grid;

place-items: center;

align-self: flex-start;

width: 82px;

height: 82px;

margin: 24px 24px 10px;

background: white;

border: 1px solid var(--soft);

border-radius: 24px 8px 24px 8px;

font-size: 42px;

box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);

transition: transform 0.3s ease;

}

.card:hover .card-image {

transform: rotate(-6deg) scale(1.06);

}

/* ISI CARD */

.card-content {

display: flex;

flex: 1;

flex-direction: column;

align-items: flex-start;

padding: 12px 24px 24px;

}

.card-content h3 {

color: var(--deep);

font-size: 23px;

line-height: 1.3;

margin-bottom: 10px;

}

.card-content p {

color: #475569;

font-size: 15px;

line-height: 1.7;

margin-bottom: 22px;

}

/* TOMBOL */

.button {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

margin-top: auto;

padding: 11px 17px;

background: var(--accent);

color: white;

border-radius: 12px 5px 12px 5px;

text-decoration: none;

font-weight: bold;

transition:

background 0.25s ease,

transform 0.25s ease;

}

.button::after {

content: "↗";

font-size: 18px;

}

.button:hover {

background: var(--deep);

transform: translateX(3px);

}

/* RESPONSIVE */

@media (max-width: 600px) {

.grid-container {

grid-template-columns: 1fr;

gap: 18px;

}

.card {

border-radius: 22px 8px 22px 8px;

}

.card-image {

width: 70px;

height: 70px;

font-size: 36px;

margin: 20px 20px 8px;

}

.card-content {

padding: 10px 20px 22px;

}

/* AKSESIBILITAS ANIMASI */

@media (prefers-reduced-motion: reduce) {

.card,

.card-image,

.button {

transition: none;

}

HTML

<h3>Klub Coding</h3>

<p>

Belajar membuat website, animasi,

dan game dengan teknologi digital.

</p>

Jelajahi

</a>

</div>

</article>

Cari Blog Ini

Teknik Informatika

CSS GRID PADA HTML

Komentar

Posting Komentar

Postingan populer dari blog ini

Materi Roblox Permainan Harvest