Membuat Website Bootstrap 100% Responsive – Part 4 / 10

173

Setelah membuat bagian header, About Me dan bagian My Skills di part-part sebelumnya, kali ini kita akan membuat bagian lagi yang tidak berbeda jauh dengan sebelumnya misalnya membuat bagian My Projects. Tapi tentu didalam bagian ini kita gunakan elemen-elemen berbeda dari sebelumnya supaya sekalian mempelajari elemen baru.

Buka kembali file HTML nya dan salin kode berikut tepat dibawah tag /div penutup bagian My Skills:

<div class="container-fluid myprojects">
  <div class="container">
    <div class="col-sm-12 judul-myprojects text-center">
      <h1>My Projects</h1>
    </div>
    <div class="row">
      <div class="col-md-4 item-project"></div>
      <div class="col-md-4 item-project"></div>
      <div class="col-md-4 item-project"></div>
    </div>
  </div>
</div>

Kali ini kita bungkus semuanya menggunakan container-fluid karena supaya berbeda aja dengan yang bagian atasnya dan container-fluid ini ketika dikasih latar belakang gambar akan terlihat lebih keren. Seperti biasanya juga didalam elemen-elemen ini kita terapkan nama class baru supaya nanti bagian dari elemen-elemen tersebut bisa di kustom style nya di style.css.

Kita terapkan gambar terlebih dahulu di dalam masing-masing col-md-4 dan dibungkus a href supaya berisi link dan dapat di klik, silahkan siapkan gambar yang ingin digunakan di root direktori kemudian panggil gambarnya disini:

<div class="container-fluid myprojects">
  <div class="container">
    <div class="col-sm-12 judul-myprojects text-center">
      <h1>My Projects</h1>
    </div>
    <div class="row">
      <div class="col-md-4 item-project">
        <a href="portfolio/portfolio1.html"><img src="media/image/test1.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
      </div>
    </div>
    </div>
  </div>
</div>

Jangan lupa untuk memberikan class img-responsive supaya gambar menjadi rapih dan pastikan gambar yang digunakan juga ukurannya memadai dengan ukuran kolom pada situs yang dibuat, jika menurut kalian gambarnya kurang banyak silahkan tambahkan dengan membuat row baru dan design col-md yang sama seperti pada penjelasan di part 3.

Misalnya saya akan tambahkan 2 row lagi dengan design col-md yang sama maka akan menjadi seperti ini:

<div class="container-fluid myprojects">
  <div class="container">
    <div class="col-sm-12 judul-myprojects text-center">
      <h1>My Projects</h1>
    </div>
    <div class="row">
      <div class="col-md-4 item-project">
        <a href="portfolio/portfolio1.html"><img src="media/image/test1.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test1.jpg" class="img-responsive"></a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test1.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
      </div>
    </div>
  </div>
</div>

Sekarang menjadi 3 row dan masing-masing memiliki 3 kotak col-md, silahkan tentukan jumlah yang kalian butuhkan. Tapi seperti masih ada yang kurang, kita tambahkan tombol dengan tulisan Lihat Semua Project yang tujuannya supaya pengunjung dapat diarahkan ke halaman yang menampilkan semua project karena di bagian ini mungkin tidak menampilkan semua project.

Tambahkan code berikut tepat setelah /div penutup row yang terakhir jika ingin menggunakan tombol:

<div class="col-sm-12 text-center">
    <button class="btn btn-lg btn-default tombol-projects"><a href="pages/portfolio.html">Lihat Semua Projects</a></button>
</div>

Perhatikan pada bagian a href=, itu merupakan URL kemana akan diarahkan jika mengklik tombol tersebut. Silahkan kosongkan jika belum ada halamannya atau biarkan seperti itu karena nanti pada part-part berikutnya kita akan membuat halaman yang menampilkan semua My Projects.

Saat ini pasti belum terlihat rapih karena belum kita atur di CSS style.css nya, silahkan atur sesuai keinginan atau ikuti style yang saya gunakan seperti ini:

.judul-myprojects {
   margin: 3% 0;
   color: #fff;
}
.myprojects {
   background: url(../media/image/bg/bg-myprojects.jpg);
   background-size: cover;
}
.item-project img {
   margin: 2% 0;
   box-shadow: 2px 5px 3px #000;
}
.tombol-projects {
   margin: 3% 0;
}
.tombol-projects a {
   color: #c41617;
}
.tombol-projects a:hover {
   text-decoration: none;
}

Inilah style yang saya gunakan, jika sesuai dengan keinginan kalian ya tinggal di Save aja. Pada bagian ini kita menggunakan latar belakang gambar yang mana gambar ini bisa kalian temukan di .myproject background: url(), silahkan panggil gambar yang ingin digunakan sebagai background.

Harap diperhatikan, ketika menggunakan latar belakang gambar pada bagian pastikan gambar latar belakang tidak bertambrakan warnanya dengan gambar-gambar yang ditampilkan dibagian ini supaya terlihat bagus. Silahkan pergelap gambar yang digunakan menjadi background jika gambar diatasnya terang dan begitu sebaliknya.

Bisa berikan shadow / bayangan pada gambar yang ditampilkan di gambar ini supaya terlihat jelas jika warna kontras dengan latar belakang, dan jika ingin mengatur gaya tombol silahkan sesuaikan di bagian class tombolprojects serta :hover nya.

Kalo masih bingung, lihat video tutorialnya disini.

Setelah menyelesaikan part 4 ini, silahkan lanjut ke part berikutnya (part 5) atau lihat kembali part sebelumnya.

Lihat Post Lainnya:
Komentar