CSS FLEXBOX 2

1. Menambahkan elemen div dengan kelas “gallery” untuk membungkus semua konten

• Langkah pertama adalah mengelompokkan semua konten gambar dan informasi ramen di dalam satu div dengan kelas gallery.
• Ini akan membuatnya lebih mudah untuk mengatur tata letak menggunakan CSS.
• Tujuan: Mengelompokkan seluruh galeri ramen untuk tujuan styling dan pengaturan visual yang lebih baik.

htmlCopy code<div class="gallery">
  <!-- Semua konten gambar ramen akan diletakkan di dalam div ini -->
</div>

2. Menambahkan div dengan kelas “ramen-card” di sekitar setiap set gambar, judul (h3), dan deskripsi (p)

• Untuk setiap jenis ramen (misalnya Tonkotsu, Miso, dll), Anda membungkus gambar, judul, dan deskripsi di dalam div yang memiliki kelas ramen-card. Ini membuat setiap ramen terlihat seperti “kartu” atau “kotak” terpisah.
• Tujuan: Mengorganisir setiap ramen dalam “kartu” individual yang lebih mudah dikelola dan diberi styling.

htmlCopy code<div class="ramen-card">
  <img src="Tonkotsu_Ramen.jpg" alt="Tonkotsu Ramen">
  <div class="content">
    <h3>Tonkotsu Ramen</h3>
    <p>Originating from modern-day Fukuoka and lending its mouthwatering fragrance...</p>
  </div>
</div>

3. Menambahkan div dengan kelas “content” di sekitar elemen h3 dan p

• Di dalam setiap ramen-card, Anda menambahkan div dengan kelas content untuk membungkus elemen judul (h3) dan deskripsi (p). Ini bertujuan untuk memisahkan konten teks dan memberikan struktur yang lebih jelas.
• Tujuan: Memudahkan pengaturan dan pengaturan teks dengan CSS. Misalnya, memberi jarak antar elemen atau menambahkan padding di dalam kartu.

htmlCopy code<div class="content">
  <h3>Tonkotsu Ramen</h3>
  <p>Originating from modern-day Fukuoka and lending its mouthwatering fragrance...</p>
</div>

4. Menambahkan gambar dan teks deskripsi untuk setiap jenis ramen

• Anda sudah menambahkan gambar dan teks deskripsi untuk setiap jenis ramen di dalam setiap ramen-card. Setiap gambar diberi tag <img> dengan atribut alt untuk teks alternatif.
• Tujuan: Memberikan informasi visual tentang jenis ramen dan deskripsi singkat untuk masing-masing.

Contoh untuk Tonkotsu Ramen:

htmlCopy code<img src="Tonkotsu_Ramen.jpg" alt="Tonkotsu Ramen">
<h3>Tonkotsu Ramen</h3>
<p>Originating from modern-day Fukuoka and lending its mouthwatering fragrance...</p>

5. Memberikan struktur dan pengelompokan yang jelas

• Setelah semua langkah ini, Anda telah mengelompokkan konten secara terstruktur dan siap untuk ditata menggunakan CSS. Ini membuat website Anda lebih mudah dibaca dan rapi.
• Tujuan: Membantu mengelola tampilan dan tata letak dengan lebih baik, serta memungkinkan pengubahan desain yang lebih mudah.

1. Styling untuk Body (body)

• Tujuan: Menetapkan gaya umum untuk tubuh halaman.
• Penjelasan:
  • font-family: Verdana, sans-serif; akan menggunakan font Verdana yang mudah dibaca.
  • background-color: #f9f9f9; memberikan warna latar belakang cerah yang tidak terlalu mencolok.
  • margin: 0; padding: 0; menghilangkan margin dan padding default yang ada di browser.

cssCopy codebody {
  font-family: Verdana, sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
}

2. Styling untuk Galeri (.gallery)

• Tujuan: Mengatur tampilan galeri ramen secara keseluruhan.
• Penjelasan:
  • display: flex; menggunakan flexbox untuk pengaturan layout elemen dalam satu baris.
  • flex-wrap: wrap; memungkinkan elemen untuk membungkus ke baris baru jika ruang terbatas.
  • justify-content: space-around; menempatkan elemen dengan jarak yang merata di antara elemen dalam satu baris.
  • gap: 20px; memberikan jarak antar elemen dalam galeri.
  • padding: 20px; memberi jarak di dalam galeri dari tepi kontainer.
  • margin-top: 20px; memberikan ruang di atas galeri agar tidak menempel dengan elemen sebelumnya.
  • background-color: #ffffff; memberi latar belakang putih pada galeri.

cssCopy code.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  padding: 20px;
  margin-top: 20px;
  background-color: #ffffff;
}

3. Styling untuk Kartu Ramen (.ramen-card)

• Tujuan: Memberikan desain untuk setiap kartu ramen agar terlihat menarik dan responsif.
• Penjelasan:
  • background-color: #ffffff; memberi latar belakang putih pada setiap kartu ramen.
  • border-radius: 8px; memberi sudut melengkung pada setiap kartu ramen.
  • box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); memberi efek bayangan lembut di sekitar kartu.
  • width: 300px; menetapkan lebar tetap untuk setiap kartu ramen.
  • overflow: hidden; memastikan bahwa konten yang melampaui batas kartu tidak terlihat.
  • text-align: center; menata teks agar terpusat di dalam kartu.
  • margin-bottom: 20px; memberikan jarak antara setiap kartu ramen.
  • transition: transform 0.3s ease, box-shadow 0.3s ease; menambahkan efek transisi yang halus saat kartu ramen dihover.
• Efek Hover:
  • transform: scale(1.05); sedikit memperbesar kartu ramen ketika dihover.
  • box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); menambah bayangan yang lebih tajam saat dihover.

cssCopy code.ramen-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 300px;
  overflow: hidden;
  text-align: center;
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ramen-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

4. Styling untuk Konten Kartu (.content)

• Tujuan: Menambahkan padding dan latar belakang untuk setiap bagian konten (judul dan deskripsi) dalam kartu ramen.
• Penjelasan:
  • padding: 15px; memberi ruang di dalam kontainer untuk teks agar tidak terlalu rapat dengan tepi kartu.
  • background-color: #f9f9f9; memberi latar belakang abu-abu muda untuk setiap konten dalam kartu ramen.

cssCopy code.content {
  padding: 15px;
  background-color: #f9f9f9;
}

5. Styling untuk Paragraf dalam Kartu Ramen (.ramen-card p)

• Tujuan: Memperbaiki tampilan paragraf di dalam kartu ramen.
• Penjelasan:
  • font-size: 1rem; memberi ukuran font yang nyaman dibaca.
  • color: #666; memberi warna teks abu-abu untuk mengurangi kontras yang keras.
  • line-height: 1.5; memberi jarak antar baris teks agar lebih mudah dibaca.
  • margin-bottom: 15px; memberi ruang di bawah paragraf agar tidak terlalu rapat dengan elemen berikutnya.

cssCopy code.ramen-card p {
  font-size: 1rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
}

6. Styling untuk Heading dalam Kartu Ramen (.ramen-card h3)

• Tujuan: Menata tampilan judul ramen agar lebih menarik.
• Penjelasan:
  • font-size: 1.5rem; memberikan ukuran font yang lebih besar untuk judul.
  • color: #333; memberikan warna teks gelap yang lebih tegas dan jelas.
  • margin-bottom: 10px; memberikan jarak antara judul dan paragraf.
  • font-weight: bold; membuat teks judul menjadi tebal.

cssCopy code.ramen-card h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
}

7. Styling untuk Gambar dalam Kartu Ramen (.ramen-card img)

• Tujuan: Mengatur tampilan gambar ramen agar responsif dan rapi.
• Penjelasan:
  • width: 100%; memastikan gambar mengisi lebar penuh kartu.
  • height: auto; menjaga rasio aspek gambar agar tidak terdistorsi.
  • border-bottom: 2px solid #ddd; memberi garis pembatas halus di bawah gambar.
  • padding: 10px; memberi jarak di sekitar gambar agar tidak terlalu rapat dengan tepi kartu.
  • box-sizing: border-box; memastikan padding dan border dihitung dalam lebar total elemen.

cssCopy code.ramen-card img {
  width: 100%;
  height: auto;
  border-bottom: 2px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
}

Kesimpulan:

CSS yang Anda berikan akan memberikan desain yang bersih dan modern untuk galeri ramen di website Anda. Setiap kartu ramen akan memiliki efek hover, konten yang terstruktur rapi, gambar yang responsif, dan desain yang menarik dengan bayangan dan border halus.