Cara Membuat Galeri Web Portofolio Dengan Filter

Di bawah ini kita mempejari cara membuat galeri portofolio dengan pemfilteran.

Galeri Web Portofolio Dengan Filter

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Bagian Tengah Website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Tambahkan padding BETWEEN untuk setiap kolom */
.row,
.row > .column {
  padding: 8px;
}

/* Buat tiga kolom yang sama yang mengapung di samping satu sama lain*/
.column {
  float: left;
  width: 33.33%;
  display: none; /* Sembunyikan Kolom secara default */
}

/* Hapus floats setelah baris  */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Konten */
.content {
  background-color: white;
  padding: 10px;
}

/* class "show" ditambahkan ke elemen yang difilter */
.show {
  display: block;
}

/* Atur gaya untuk button */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

/* Tambahkan warna latar belakang abu-abu saat mengarahkan mouse */
.btn:hover {
  background-color: #ddd;
}

/* Tambahkan warna latar belakang gelap ke tombol aktif */
.btn.active {
  background-color: #666;
   color: white;
}
</style>
</head>
<body>

<!-- MAIN (Center website) -->
<div class="main">

<h1>Recommended</h1>
<hr>

<h2>PORTFOLIO</h2>

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Tampilkan semua</button>
  <button class="btn" onclick="filterSelection('nature')"> Pemandangan Alam</button>
  <button class="btn" onclick="filterSelection('cars')"> Anime Movie </button>
  <button class="btn" onclick="filterSelection('people')"> Beberapa anggota Avengers</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column nature">
    <div class="content">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Mountains" style="width:100%">
      <h4>Gunung</h4>
      <p>Gunung Fuji Jepang</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" alt="Rawa" style="width:100%">
      <h4>Rawa</h4>
      <p>Rawa Dengan Pemandangan Indah</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" alt="Pagoda" style="width:100%">
      <h4>Pagoda</h4>
      <p>Pagoda Chureito</p>
    </div>
  </div>
  
  <div class="column cars">
    <div class="content">
      <img src="https://dosenit.com/wp-content/uploads/2021/01/anime-hello-world.jpg" alt="Anime" style="width:100%">
      <h4>Hello World</h4>
      <p>Mengangkat tema time travel, Hello World mengikuti kisah seorang pria remaja bernama Naomi Katagaki (Takumi Kitamura). Naomi hidup di kota Kyoto, Jepang pada 2027 ketika teknologi sudah semakin maju. Ia adalah remaja yang pendiam dan sangat menyukai buku</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2021/01/SpiritedAway.jpg" alt="Anime" style="width:100%">
      <h4>Sprited Away</h4>
      <p>Bercerita tentang kisah seorang gadis berumur 10 tahun bernama Chihiro dan kedua orangtuanya yang masuk ke sebuah tempat yang terlihat sebagai sebuah taman hiburan yang terabaikan. Setelah kedua orangtuanya berubah menjadi babi raksasa, Chihiro bertemu dengan sosok misterius Haku yang menjelaskan kepadanya bahwa tempat mereka berada adalah sebuah resort di mana makhluk supernatural berisitrahat dari alam duniawi. Untuk dapat membebaskan kedua orangtuanya, Chihiro harus bekerja di sebuah bath house yang dikepalai oleh penyihir bernama Yubaba.</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Anime" style="width:100%">
      <h4>Kimi No Nawa</h4>
      <p>Kimi no Na Wa adalah sebuah Kisah "Keajaiban dan cinta" yang terus membahas tentang dua orang remaja berbeda.  Taki adalah seorang Mahasiswa SMA yang tinggal di pusat kota Tokyo. Dia menghabiskan Waktunya dengan bekerja di restoran Italia, bermain bersama teman, dan juga tertarik dengan seni arsitektur.Mitsuha adalah Seorang Siswi SMA yang tinggal di sebuah desa dalam pegunungan. Ayahnya adalah kepala desa di tempat tinggalnya, Beliau jarang berada di rumah. Mitsuha tinggal bersama adiknya yang masih SD ditemani dengan neneknya. Mitsuha ini orangnya jujur, Namun dia sangat tidak suka dengan tradisi keluarganya di kuil Shinto atau Fakta bahwa ayahnya ikut pilkada setiap tahunnya. Ia ingin sekali merasakan bagaimana gaya hidup di kota besar seperti Tokyo.</p>
    </div>
  </div>

  <div class="column people">
    <div class="content">
      <img src="https://dosenit.com/wp-content/uploads/2021/01/captain-amerika.jpg" alt="Avengers" style="width:100%">
      <h4>Captain America</h4>
      <p>Captain America adalah sosok pahlawan super fiktif dari Marvel Comics. Memiliki musuh besar bernama Red Skull dan Baron Zemo, Rogers adalah tentara AS yang tidak memiliki kemampuan sama sekali. Berkat bantuan Dr. Joshef Reinstein dengan serum super soldiernya</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2021/01/Thor_soundtrack_cover.jpg" alt="Avengers" style="width:100%">
      <h4>Thor Putra Odin</h4>
      <p>Putra mahkota Asgard, berdasarkan keilahian mitologi Norse dengan nama yang sama. Sutradara Kenneth Branagh dan kepala Marvel Studios Kevin Feige memilih Hemsworth setelah proses back-and-forth di mana aktor berusia 27 tahun itu awalnya turun dari pertimbangan dan kemudian diberi kesempatan kedua untuk membaca bagian tersebut.</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2021/01/1392485796_red-iron-man-on-black-background_facebk.jpg" alt="Avengers" style="width:100%">
      <h4>Iron Man</h4>
      <p>Iron Man memiliki armor bertenaga yang memberinya kekuatan dan daya tahan super, terbang, dan sederet senjata. Armor diciptakan dan dipakai oleh Stark (dengan pengecualian jangka pendek sesekali). Orang lain yang telah mengasumsikan identitas Iron Man termasuk teman lama Stark dan sahabat baiknya James Rhodes rekan dekat Harold "Happy" Hogan,Eddie March(sebentar) Michael O'Brien dan Riri Williams.Selain model tujuan umum yang dimilikinya, Stark telah mengembangkan beberapa setelan khusus untuk perjalanan luar angkasa, menyelam dalam laut, teknologi siluman,dan tujuan khusus lainnya. Stark telah memodifikasi jas, seperti baju besi berat Hulkbuster. Armor Hulkbuster terdiri dari add-ons ke yang disebut modular armor, yang dirancang untuk meningkatkan kekuatan dan daya tahannya cukup untuk melibatkan Incredible Hulk dalam sebuah pertarungan. Model selanjutnya, yang dirancang untuk digunakan melawan Thor, dimodelkan pada Destroyer dan menggunakan sumber kekuatan mistis. Stark mengembangkan sebuah paket elektronik selama Perang Armor, jika dilekatkan pada armor yang menggunakan teknologi Stark, akan membakar komponen-komponen tersebut, sehingga membuat setelan itu tidak berguna. Paket ini tidak efektif pada model selanjutnya. Sementara itu biasanya terkait dengan James Rhodes, armor War-Machine dimulai sebagai salah satu armor khusus Stark.</p>
    </div>
  </div>
<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

<script>
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}


// Tambahkan kelas aktif ke tombol saat ini (sorot)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

</body>
</html>

Cara Membuat Website Portofolio

Langkah 1) Tambahkan HTML:
Contoh

<h2>PORTFOLIO</h2>

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('nature')"> Nature</button>
  <button class="btn" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn" onclick="filterSelection('people')"> People</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column nature">
    <div class="content">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Mountains" style="width:100%">
      <h4>Gunung</h4>
      <p>Gunung Fuji Jepang</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" alt="Rawa" style="width:100%">
      <h4>Rawa</h4>
      <p>Rawa Dengan Pemandangan Indah</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" alt="Pagoda" style="width:100%">
      <h4>Pagoda</h4>
      <p>Pagoda Chureito</p>
    </div>
  </div>
  
  <div class="column cars">
    <div class="content">
      <img src="https://dosenit.com/wp-content/uploads/2021/01/anime-hello-world.jpg" alt="Anime" style="width:100%">
      <h4>Hello World</h4>
      <p>Mengangkat tema time travel, Hello World mengikuti kisah seorang pria remaja bernama Naomi Katagaki (Takumi Kitamura). Naomi hidup di kota Kyoto, Jepang pada 2027 ketika teknologi sudah semakin maju. Ia adalah remaja yang pendiam dan sangat menyukai buku</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2021/01/SpiritedAway.jpg" alt="Anime" style="width:100%">
      <h4>Sprited Away</h4>
      <p>Bercerita tentang kisah seorang gadis berumur 10 tahun bernama Chihiro dan kedua orangtuanya yang masuk ke sebuah tempat yang terlihat sebagai sebuah taman hiburan yang terabaikan. Setelah kedua orangtuanya berubah menjadi babi raksasa, Chihiro bertemu dengan sosok misterius Haku yang menjelaskan kepadanya bahwa tempat mereka berada adalah sebuah resort di mana makhluk supernatural berisitrahat dari alam duniawi. Untuk dapat membebaskan kedua orangtuanya, Chihiro harus bekerja di sebuah bath house yang dikepalai oleh penyihir bernama Yubaba.</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Anime" style="width:100%">
      <h4>Kimi No Nawa</h4>
      <p>Kimi no Na Wa adalah sebuah Kisah "Keajaiban dan cinta" yang terus membahas tentang dua orang remaja berbeda.  Taki adalah seorang Mahasiswa SMA yang tinggal di pusat kota Tokyo. Dia menghabiskan Waktunya dengan bekerja di restoran Italia, bermain bersama teman, dan juga tertarik dengan seni arsitektur.Mitsuha adalah Seorang Siswi SMA yang tinggal di sebuah desa dalam pegunungan. Ayahnya adalah kepala desa di tempat tinggalnya, Beliau jarang berada di rumah. Mitsuha tinggal bersama adiknya yang masih SD ditemani dengan neneknya. Mitsuha ini orangnya jujur, Namun dia sangat tidak suka dengan tradisi keluarganya di kuil Shinto atau Fakta bahwa ayahnya ikut pilkada setiap tahunnya. Ia ingin sekali merasakan bagaimana gaya hidup di kota besar seperti Tokyo.</p>
    </div>
  </div>

  <div class="column people">
    <div class="content">
      <img src="https://dosenit.com/wp-content/uploads/2021/01/captain-amerika.jpg" alt="Avengers" style="width:100%">
      <h4>Captain America</h4>
      <p>Captain America adalah sosok pahlawan super fiktif dari Marvel Comics. Memiliki musuh besar bernama Red Skull dan Baron Zemo, Rogers adalah tentara AS yang tidak memiliki kemampuan sama sekali. Berkat bantuan Dr. Joshef Reinstein dengan serum super soldiernya</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2021/01/Thor_soundtrack_cover.jpg" alt="Avengers" style="width:100%">
      <h4>Thor Putra Odin</h4>
      <p>Putra mahkota Asgard, berdasarkan keilahian mitologi Norse dengan nama yang sama. Sutradara Kenneth Branagh dan kepala Marvel Studios Kevin Feige memilih Hemsworth setelah proses back-and-forth di mana aktor berusia 27 tahun itu awalnya turun dari pertimbangan dan kemudian diberi kesempatan kedua untuk membaca bagian tersebut.</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2021/01/1392485796_red-iron-man-on-black-background_facebk.jpg" alt="Avengers" style="width:100%">
      <h4>Iron Man</h4>
      <p>Iron Man memiliki armor bertenaga yang memberinya kekuatan dan daya tahan super, terbang, dan sederet senjata. Armor diciptakan dan dipakai oleh Stark (dengan pengecualian jangka pendek sesekali). Orang lain yang telah mengasumsikan identitas Iron Man termasuk teman lama Stark dan sahabat baiknya James Rhodes rekan dekat Harold "Happy" Hogan,Eddie March(sebentar) Michael O'Brien dan Riri Williams.Selain model tujuan umum yang dimilikinya, Stark telah mengembangkan beberapa setelan khusus untuk perjalanan luar angkasa, menyelam dalam laut, teknologi siluman,dan tujuan khusus lainnya. Stark telah memodifikasi jas, seperti baju besi berat Hulkbuster. Armor Hulkbuster terdiri dari add-ons ke yang disebut modular armor, yang dirancang untuk meningkatkan kekuatan dan daya tahannya cukup untuk melibatkan Incredible Hulk dalam sebuah pertarungan. Model selanjutnya, yang dirancang untuk digunakan melawan Thor, dimodelkan pada Destroyer dan menggunakan sumber kekuatan mistis. Stark mengembangkan sebuah paket elektronik selama Perang Armor, jika dilekatkan pada armor yang menggunakan teknologi Stark, akan membakar komponen-komponen tersebut, sehingga membuat setelan itu tidak berguna. Paket ini tidak efektif pada model selanjutnya. Sementara itu biasanya terkait dengan James Rhodes, armor War-Machine dimulai sebagai salah satu armor khusus Stark.</p>
    </div>
  </div>
<!-- END GRID -->
</div>

Langkah 2) Tambahkan CSS:
Contoh

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Bagian Tengah Website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Tambahkan padding BETWEEN untuk setiap kolom */
.row,
.row > .column {
  padding: 8px;
}

/* Buat tiga kolom yang sama yang mengapung di samping satu sama lain*/
.column {
  float: left;
  width: 33.33%;
  display: none; /* Sembunyikan Kolom secara default */
}

/* Hapus floats setelah baris  */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Konten */
.content {
  background-color: white;
  padding: 10px;
}

/* class "show" ditambahkan ke elemen yang difilter */
.show {
  display: block;
}

/* Atur gaya untuk button */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

/* Tambahkan warna latar belakang abu-abu saat mengarahkan mouse */
.btn:hover {
  background-color: #ddd;
}

/* Tambahkan warna latar belakang gelap ke tombol aktif */
.btn.active {
  background-color: #666;
   color: white;
}

Langkah 3) Tambahkan JavaScript:
Contoh

filterSelection("all") // Eksekusi fungsi dan tunjukkan semua kolom
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Tambahkan kelas "show" (display: block) ke elemen yang difilter dan hapus kelas "show" dari elemen yang tidak dipilih
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Tampilkan elemen yang difilter
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Sembunyikan elemen yang tidak dipilih
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Tambahkan kelas aktif ke tombol saat ini (sorot)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

How To html dan css

Cara Membuat Galeri Web Portofolio Dengan Filter

Galeri Web Portofolio Dengan Filter

Cara Membuat Website Portofolio

Cara Membuat Galeri Portofolio

Cara Membuat Zoom Image

You may also like