Cara Membuat Galeri Portofolio

Di bawah kita akan mempelajari cara membuat kisi galeri portofolio yang responsif dengan CSS.

Galeri Portofolio

Kita akan mempelajari cara membuat galeri website portofolio responsif yang bervariasi antara 4 kolom, 2 kolom dan kolom lebar penuh bergantung pada lebar layar:

<!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;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

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

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

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

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

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

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

<h1>List Anime Recommended</h1>
<hr>

<h2>PORTFOLIO</h2>
<p>Ubah ukuran jendela browser untuk melihat efek responsif.</p>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column">
    <div class="content">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/259631.jpg" alt="Sao" style="width:100%">
      <h3>SAO Arc Alicization</h3>
      <p>Arc Alicization Ini menceritakan tentang Kirigaya Kazuto yang di tawari pekerjaan oleh perusahaan swasta bernama Rath. Orang yang menawarinya adalah Anggota penganan korban SAO, Kikuoka Seijirou. Pekerjaan Kirito di perusahaan tersebut adalah untuk melakukan eksperimen dengan generasi keempat mesin Full Dive.Kirito yang saat itu menerimanya berpikir bahwa ini pasti pekerjaan yang sangat sederhana, cukup login dalam Full Dive sampai akhir pekan. Dan memori dari pengujian tersebut akan diblokir demi tujuan keamanan. Lagi-lagi Kirito harus menghadapi kenyatan pahit dunia orang dewasa, yang selalu mencari cara mendapatkan keuntungan dan memanfaatkan orang lain. Hasil eksperimen ini akan di gunakan untuk menciptakan jenis khusus bottom-up dari Artificial Intelligence (AI) demi tujuan militer.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Anime" style="width:100%">
      <h3>Kimi No Nawa</h3>
      <p>Kimi no Nawa menceritakan tentang dua remaja yang bernama Mitsuha Miyamizu dan Taki Tachibana yang saling bertukar tubuh satu sama lain. Awalnya mereka tidak menyadari pertukaran tubuh itu, mereka menganggapnya hanya mimpi semata.Tetapi orang-orang sekitar mengatakan kepada keduanya mengenai keanehan di diri mereka, belum lagi kejadiannya terjadi lebih dari 3 kali. Sehingga mau tidak mau mereka pun percaya.Setelah saling menyadari keadaan satu sama lain, Taki dan Mitsuha sepakat untuk mencatat keseharian mereka dan menyampaikan hal-hal apa saja yang tidak boleh dilakukan satu sama lain agar tidak dicurigai oleh orang-orang sekitar.Selama bertukar tubuh itu, mereka merasa terikat satu sama lain, bahkan tanpa sadar Mitsuha jatuh cinta kepada Taki. Mitsuha pun dengan penuh keyakinan menyusul Taki. Melakukan perjalanan menggunakan kereta dari Desa Itomori ke Tokyo.Tetapi apa yang Mitsuha dapatkan di sana membuat ia sakit hati. Taki tidak mengenali nya sama sekali. Hingga akhirnya dengan nekad ia memberikan ikat rambut berwarna merah miliknya kepada Taki yang kemudian dipakai menjadi gelang azimat oleh lelaki itu.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Nature" style="width:100%">
      <h3>Detective Conan</h3>
      <p>Shinichi Kudo, seorang detektif SMA berusia 17 tahun yang biasanya membantu polisi memecahkan kasus, diserang oleh 2 anggota sindikat misterius ketika mengawasi sebuah pemerasan. Ia kemudian diberi minum racun misterius yang baru selesai dikembangkan untuk membunuhnya. Namun, karena sebuah efek samping yang jarang terjadi yang tidak diketahui anggota sindikat tersebut, racun tersebut mengakibatkan tubuhnya mengecil seperti anak kecil berusia tujuh tahun setelah mereka meninggalkannya.Untuk menyembunyikan identitasnya dan untuk menginvestigasi keadaan sindikat tersebut, yang selanjutnya dikenal dengan nama Organisasi Berbaju Hitam atau Organisasi Hitam, dia menyamarkan namanya menjadi Conan Edogawa.[4] Untuk mencari jejak sindikat tersebut, dia tinggal bersama dengan teman sejak kecilnya, Ran Mouri, yang ayahnya, Kogoro Mouri, merupakan seorang detektif swasta.[4] Dia bersekolah di SD Teitan dan membentuk Grup Detektif Cilik dengan 3 teman sekelasnya, yaitu: Ayumi Yoshida, Mitsuhiko Tsuburaya, dan Genta Kojima.[5] Meskipun tubuhnya mengecil, ia tetap memecahkan kasus. Biasanya, ia menyelesaikan kasus-kasus tersebut dengan meniru suara Kogoro Mouri dengan alat yang diciptakan oleh tetangganya, Profesor Agasa. Kogoro Mouri, seorang detektif yang agak bodoh, awalnya bingung pada kemampuan memecahkan kasusnya meningkat secara mendadak. Tetapi, kemudian ia tidak heran karena ia senang karena ketenarannya yang meningkat. Ran Mouri pernah beberapa kali mencurigai bahwa Conan adalah Shinichi, namun karena kecerdikan Conan, maka Ran pun percaya bahwa Conan bukanlah Shinichi.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2021/01/oregairu.jpg" alt="Mountains" style="width:100%">
      <h3>Oregairu(My Youth Romantic Comedy)</h3>
      <p>Oregairu bercerita tentang Hikigaya Hachiman yang menjadi seorang pemuda anti-sosial. Baginya hidup sendiri adalah sesuatu yang terbaik. Ya, itu semua karena dirinya sejak kecil selalu di bully dan di jauhi teman-temannya. Sehingga dia memutuskan untuk hidup sendiri tanpa seorang teman pun.Beranjak SMP, Hikigaya jatuh cinta pada seorang cewek. Namun karena dirinya benar-benar suram dan selalu menyendiri, itu menyebabkan dirinya tidak pernah di terima oleh para gadis yang dia sukai.Namun, kehidupannya yang selalu sendiri berubah ketika masuk SMA. Dia di suruh bergabung pada sebuah klub di sekolahnya. Yaitu klub "relawan". Klub yang bertugas membantu para siswa yang membutuhkan bantuan. Tentu saja, ini adalah hal yang bertolak belakang dengan kepribadian Hikigaya.Dalam klub tersebut, Hikigaya bertemu dengan Yukino Yukinoshita, yang merupakan satu-satunya anggota di klub tersebut. Awalnya mereka sangat canggung, namun nampaknya mereka sedikit nyambung. Hingga akhirnya, gadis manis yang selalu mencoba ceria, Yuigahama ikut bergabung dalam klub tersebut. Itu membuat Hikigaya semakin merasakan suasana yang berbeda. Namun ternyata tetap saja! Hikigaya lebih merasa senang hidup sendiri.</p>
    </div>
  </div>
<!-- END GRID -->
</div>

<div class="content">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg" alt="Bear" style="width:100%">
  <h3>Pesan Moral Curious George</h3>
  <p>Kesalahan adalah awal dari pengetahuan yang baru.</p>
  <p>Kreatifitas meski berantakan, tapi akhirnya selalu berharga.</p>
  <p>Rasa Ingin Tahu Adalah Petualangan Baru</p>
  <p>Menghargai apapun yang orang lain lakukan</p>
  <p>Selalu berterima kasih dengan siapa pun</p>

</div>

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

</body>
</html>

Cara Membuat Website Portofolio

Langkah 1) Tambahkan HTML:
Contoh

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

<h1>List Anime Recommended</h1>
<hr>

<h2>PORTFOLIO</h2>
<p>Ubah ukuran jendela browser untuk melihat efek responsif.</p>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column">
    <div class="content">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/259631.jpg" alt="Sao" style="width:100%">
      <h3>SAO Arc Alicization</h3>
      <p>Arc Alicization Ini menceritakan tentang Kirigaya Kazuto yang di tawari pekerjaan oleh perusahaan swasta bernama Rath. Orang yang menawarinya adalah Anggota penganan korban SAO, Kikuoka Seijirou. Pekerjaan Kirito di perusahaan tersebut adalah untuk melakukan eksperimen dengan generasi keempat mesin Full Dive.Kirito yang saat itu menerimanya berpikir bahwa ini pasti pekerjaan yang sangat sederhana, cukup login dalam Full Dive sampai akhir pekan. Dan memori dari pengujian tersebut akan diblokir demi tujuan keamanan. Lagi-lagi Kirito harus menghadapi kenyatan pahit dunia orang dewasa, yang selalu mencari cara mendapatkan keuntungan dan memanfaatkan orang lain. Hasil eksperimen ini akan di gunakan untuk menciptakan jenis khusus bottom-up dari Artificial Intelligence (AI) demi tujuan militer.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Anime" style="width:100%">
      <h3>Kimi No Nawa</h3>
      <p>Kimi no Nawa menceritakan tentang dua remaja yang bernama Mitsuha Miyamizu dan Taki Tachibana yang saling bertukar tubuh satu sama lain. Awalnya mereka tidak menyadari pertukaran tubuh itu, mereka menganggapnya hanya mimpi semata.Tetapi orang-orang sekitar mengatakan kepada keduanya mengenai keanehan di diri mereka, belum lagi kejadiannya terjadi lebih dari 3 kali. Sehingga mau tidak mau mereka pun percaya.Setelah saling menyadari keadaan satu sama lain, Taki dan Mitsuha sepakat untuk mencatat keseharian mereka dan menyampaikan hal-hal apa saja yang tidak boleh dilakukan satu sama lain agar tidak dicurigai oleh orang-orang sekitar.Selama bertukar tubuh itu, mereka merasa terikat satu sama lain, bahkan tanpa sadar Mitsuha jatuh cinta kepada Taki. Mitsuha pun dengan penuh keyakinan menyusul Taki. Melakukan perjalanan menggunakan kereta dari Desa Itomori ke Tokyo.Tetapi apa yang Mitsuha dapatkan di sana membuat ia sakit hati. Taki tidak mengenali nya sama sekali. Hingga akhirnya dengan nekad ia memberikan ikat rambut berwarna merah miliknya kepada Taki yang kemudian dipakai menjadi gelang azimat oleh lelaki itu.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Nature" style="width:100%">
      <h3>Detective Conan</h3>
      <p>Shinichi Kudo, seorang detektif SMA berusia 17 tahun yang biasanya membantu polisi memecahkan kasus, diserang oleh 2 anggota sindikat misterius ketika mengawasi sebuah pemerasan. Ia kemudian diberi minum racun misterius yang baru selesai dikembangkan untuk membunuhnya. Namun, karena sebuah efek samping yang jarang terjadi yang tidak diketahui anggota sindikat tersebut, racun tersebut mengakibatkan tubuhnya mengecil seperti anak kecil berusia tujuh tahun setelah mereka meninggalkannya.Untuk menyembunyikan identitasnya dan untuk menginvestigasi keadaan sindikat tersebut, yang selanjutnya dikenal dengan nama Organisasi Berbaju Hitam atau Organisasi Hitam, dia menyamarkan namanya menjadi Conan Edogawa.[4] Untuk mencari jejak sindikat tersebut, dia tinggal bersama dengan teman sejak kecilnya, Ran Mouri, yang ayahnya, Kogoro Mouri, merupakan seorang detektif swasta.[4] Dia bersekolah di SD Teitan dan membentuk Grup Detektif Cilik dengan 3 teman sekelasnya, yaitu: Ayumi Yoshida, Mitsuhiko Tsuburaya, dan Genta Kojima.[5] Meskipun tubuhnya mengecil, ia tetap memecahkan kasus. Biasanya, ia menyelesaikan kasus-kasus tersebut dengan meniru suara Kogoro Mouri dengan alat yang diciptakan oleh tetangganya, Profesor Agasa. Kogoro Mouri, seorang detektif yang agak bodoh, awalnya bingung pada kemampuan memecahkan kasusnya meningkat secara mendadak. Tetapi, kemudian ia tidak heran karena ia senang karena ketenarannya yang meningkat. Ran Mouri pernah beberapa kali mencurigai bahwa Conan adalah Shinichi, namun karena kecerdikan Conan, maka Ran pun percaya bahwa Conan bukanlah Shinichi.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
    <img src="https://dosenit.com/wp-content/uploads/2021/01/oregairu.jpg" alt="Mountains" style="width:100%">
      <h3>Oregairu(My Youth Romantic Comedy)</h3>
      <p>Oregairu bercerita tentang Hikigaya Hachiman yang menjadi seorang pemuda anti-sosial. Baginya hidup sendiri adalah sesuatu yang terbaik. Ya, itu semua karena dirinya sejak kecil selalu di bully dan di jauhi teman-temannya. Sehingga dia memutuskan untuk hidup sendiri tanpa seorang teman pun.Beranjak SMP, Hikigaya jatuh cinta pada seorang cewek. Namun karena dirinya benar-benar suram dan selalu menyendiri, itu menyebabkan dirinya tidak pernah di terima oleh para gadis yang dia sukai.Namun, kehidupannya yang selalu sendiri berubah ketika masuk SMA. Dia di suruh bergabung pada sebuah klub di sekolahnya. Yaitu klub "relawan". Klub yang bertugas membantu para siswa yang membutuhkan bantuan. Tentu saja, ini adalah hal yang bertolak belakang dengan kepribadian Hikigaya.Dalam klub tersebut, Hikigaya bertemu dengan Yukino Yukinoshita, yang merupakan satu-satunya anggota di klub tersebut. Awalnya mereka sangat canggung, namun nampaknya mereka sedikit nyambung. Hingga akhirnya, gadis manis yang selalu mencoba ceria, Yuigahama ikut bergabung dalam klub tersebut. Itu membuat Hikigaya semakin merasakan suasana yang berbeda. Namun ternyata tetap saja! Hikigaya lebih merasa senang hidup sendiri.</p>
    </div>
  </div>
<!-- END GRID -->
</div>

<div class="content">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg" alt="Bear" style="width:100%">
  <h3>Pesan Moral Curious George</h3>
  <p>Kesalahan adalah awal dari pengetahuan yang baru.</p>
  <p>Kreatifitas meski berantakan, tapi akhirnya selalu berharga.</p>
  <p>Rasa Ingin Tahu Adalah Petualangan Baru</p>
  <p>Menghargai apapun yang orang lain lakukan</p>
  <p>Selalu berterima kasih dengan siapa pun</p>

</div>

<!-- END MAIN -->
</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: 8px -16px;
}

/* Tambahkan padding BETWEEN setiap kolom (jika Anda mau) */
.row,
.row > .column {
  padding: 8px;
}

/* Buat empat kolom yang sama yang mengapung di samping satu sama lain */
.column {
  float: left;
  width: 25%;
}

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

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

/* Tata letak responsif - membuat tata letak dua kolom, bukan empat kolom */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}

/* Tata letak responsif - membuat dua kolom bertumpuk, bukan bersebelahan */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

How To html dan css

Cara Membuat Galeri Portofolio

Galeri Portofolio

Cara Membuat Website Portofolio

Cara Membuat Gambar Bergoyang(Shake an Image)

Cara Membuat Galeri Web Portofolio Dengan Filter

You may also like