Membuat Gallery di HTML dan CSS

Publish Date : 03-11-2017 , dibaca 25444 kali, Hari ini dibaca : 1 kali ,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.

Output :

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.

Membuat Link di Dalam Frame
Previous Post

Simple Elegan Form Komentar Website HTML CSS3
Next Post