CSS - Membuat Galeri Foto Sederhana Dengan CSS Internal

byKomodo Liar •
1
Dalam sebuah Website perlu adanya galeri foto baik karena website pribadi untuk menampilkan foto-foto, atau mungkin website kalian menampilkan sebuah produk sehingga perlu adanya galeri supaya menarik para pembeli.

Disini kita akan menggunakan CSS pada HTML untuk membuat Foto pada galeri menjadi lebih bagus dan menarik untuk dilihat.
Misalkan saya memiliki sebuah produk menjual tanaman hias untuk meja, maka saya harus menyiapkan sebuah galeri dimana produk-produk dan deskripsi seperti nama, jenis, harga, ukuran dll. Jika kita membuat galeri yang bagus setidaknya meningkatkan kemungkinan calon pembeli membeli produk saya.

Saya akan membagikan Kode HTML+CSS bisa kalian buat sesuai tutorial, dan akan saya bagikan link download untuk yang ingin langsung jadi. CSS yang saya gunakan dalam postingan ini adalah CSS Internal, CSS Internal berarti CSS berada 1 file dengan HTML terletak didalam .

Galeri Foto Sederhana HTML, CSS

Kode HTML+CSS Internal
<html>
<head>
    <title>Galeri Sederhana</title>
 <style>
  body{
  background-color: rgba(250, 236, 228, 0.938);
}

div.gallery {
  border: 3px solid #ccc;
  border-radius: 5%;
  background-color: rgb(39, 155, 68);
}

div.gallery:hover {
  border: 3px solid rgb(39, 155, 68);
  background-color: rgb(39, 155, 68);
}

div.gallery img {
  width: 100%;
  border-radius: 5% 5% 0% 0%;
  height: auto;
}
h2{
  font-size: 40px;
  font-family: 'Segoe UI';
  text-shadow: 2px 2px rgba(55, 148, 60, 0.61);
}

div.desc {
  padding: 20px;
  font-family: 'Segoe UI';
  font-weight: bold;
  color: white;
  text-align: center;
}
div.desc:hover {
  color: paleturquoise;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
 </style>
</head>
<body>

<h2 align="center">Galeri Vas Bunga Responsive</h2>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="1.jpg">
      <img src="1.jpg" alt="Tangga" width="600" height="400">
    </a>
    <div class="desc">Model Anak Tangga</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="2.jpg">
      <img src="2.jpg" alt="Telur" width="600" height="400">
    </a>
    <div class="desc">Model Bulat Telur</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="3.jpg">
      <img src="3.jpg" alt="Hexa Miring" width="600" height="400">
    </a>
    <div class="desc">Model Hexa Miring</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="4.jpg">
      <img src="4.jpg" alt="Hexa Tegak" width="600" height="400">
    </a>
    <div class="desc">Model Hexa Tegak</div>
  </div>
</div>

<div class="clearfix"></div>
</body>
</html>



  1. Siapkan 4 gambar, beri nama 1.jpg, 2.jpg, 3.jpg, 4.jpg (usahakan ukurannya tidak berbeda jauh).
  2. Copy Kode diatas simpan dengan nama index.html, juga harus 1 folder bersama gambar.
  3. Selesai
Hasilnya


Link Download Yang sudah Jadi

Bagaimana Mudah sekali bukan? kalian bisa mengedit menjadi lebih bagus dari yang saya berikan, juga dapat menambahkan banyak gambar sesuai dengan keinginan kalian.
Untuk mengetes apakah responsive, kalian cukup Minimize layar dan jika gambar tidak rusak alias dapat mengikuti ukuran layar berarti galri ini responsive. Semoga artikel ini bermanfaat bagi kalian semua. Terimaksih.
Tags:

1 Comments

Berkomentarlah yang baik dan Lucu, jangan Spam!

  1. rikoJune 25, 2021 at 2:36 PM

    makasih buat tutornya sangat memnbantu, maaf mo tny kalo utk membuat galeri tambahan misal jumlah foto ada 12 bagaimana utk baris ke-2nya krn setelah sy coba utk baris ke-2 cm ada 1 foto sementara yg 3 foto lainnya masuk kebaris 3

    ReplyDelete
Post a Comment
Previous Post Next Post