contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Gallery di HTML dan CSS

Posted in HTML & CSS Life at 03 November 2017 With 0 Comments

Artikel kali ini suckittrees akan menjelaskan Cara mudah Untuk Membuat Gallery dengan HTML dan CSS , Gallery merupakan gambar / foto yang di pasang di website sebagai data atau informasi kegiatan.

Belajar membuat Galeri Foto dengan HTML dan CSS tidaklah sulit, hal yang pertama kita harus mengetahui cara menampilkan gambar dengan HTML, kemudian kita design tampilannya dengan CSS agar lebih menarik.

▼ Download Source Code Dibawah Ini ▼


Output :

membuat gallery di HTML dan CSS

CODE :

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    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>Responsive Image Gallery</h2>
<h4>Suckittrees.com</h4>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg"  width="600" height="400">
    </a>
    <div class="desc">Foto 1</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg"  width="600" height="400">
    </a>
    <div class="desc">foto 2</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_lights.jpg">
      <img src="img_lights.jpg"  width="600" height="400">
    </a>
    <div class="desc">Foto 3</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_mountains.jpg">
      <img src="img_mountains.jpg"  width="600" height="400">
    </a>
    <div class="desc">Foto 4</div>
  </div>
</div>

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

</body>
</html>

Silahkan anda sesuaikan tiap-tiap gambar pada komputer kalian, dan jangan lupa gambar harus terdapat pada folder yang sama, untuk nama gambar juga harus sama, karna huruf besar dan kecil sangan berpengaruh, serta jangan gunakan nama gambar dengan spasi.

Simpan dengan nama index.html bersama gambar2 nya.dan jalankan di browser kalian.. Demikian artikel Membuat Galeri Foto dengan HTML dan css semoga bermanfaat untuk kita semua.

Artikel Rekomendasi



Artikel Terkait

Diskusi