Proyek Akhir CSS

Proyek 1: Kartu Profil Modern

Tujuan: Menggunakan Box Model, Shadow, Gradient, dan Border Radius untuk membuat kartu profil yang menarik secara visual.

Tampilan Hasil

Nama Siswa

Web Developer

Kode Lengkap

<!-- HTML -->
<div class="kartu-profil">
  <img src="foto.jpg" alt="Foto">
  <h3>Nama Siswa</h3>
  <p>Web Developer</p>
</div>

/* CSS */
.kartu-profil {
  width: 300px;
  background-image: linear-gradient(to top right, #1e3a8a, #3b82f6);
  color: white;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}
.kartu-profil img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid white;
  margin: auto auto 1rem auto;
}

Proyek 2: Galeri Gambar Responsif

Tujuan: Menggunakan Flexbox untuk membuat layout galeri yang rapi dan Media Query untuk membuatnya responsif di perangkat mobile.

Tampilan Hasil

Kode Lengkap

<!-- HTML -->
<div class="galeri-container">
  <img src="..."> <img src="..."> <img src="..."> <img src="...">
</div>

/* CSS */
.galeri-container {
  display: flex;
  flex-wrap: wrap; /* Izinkan item pindah ke baris baru */
  gap: 1rem;
}
.galeri-container img {
  flex-grow: 1; /* Biarkan gambar tumbuh mengisi ruang */
  width: 200px; /* Beri lebar dasar */
}

Proyek 3: Layout Halaman Artikel

Tujuan: Menggunakan CSS Grid untuk membuat layout halaman utama yang terstruktur, terdiri dari header, main content, sidebar, dan footer.

Tampilan Hasil

Header

Main Content

Sidebar

Footer

Kode Lengkap

<!-- HTML -->
<div class="page-container">
  <header>Header</header>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

/* CSS */
.page-container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: 
    'header header'
     'main sidebar'
     'footer footer';
  gap: 1rem;
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }