Halo teman-teman apa kabar ? Semoga hari ini semuanya sehat-sehat ya, amiinnn 🙂
Dalam artikel kali ini, saya akan sharing Studi Kasus Membuat Website Portfolio menggunakan HTML CSS, serta librari / framework W3.CSS.
Sebelum kita mulai, saya akan jelaskan sedikit mengenai W3 CSS. W3 CSS adalah sebuah Framework CSS untuk membuat User Interface atau desain Website, buatan W3Schools.
Ini mirip seperti Framework yang sudah ada sebelumnya yaitu Bootstrap. Dimana memiliki banyak komponen-komponen HTML dengan desain siap pakai. Jadi bagi yang sudah biasa pakai Boostrap, sangat mudah untuk mempelajarinya. Atau bagi yang baru belajar, membuat Website bisa menjadi lebih cepat.
Langsung saja kita tulis kodenya.
Buat File HTML5 (index.html)
Pertama buat 1 file HTML dengan nama file index.html, lalu tulis kode dasar HTML5 berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Portfolio</title>
</head>
<body>
</body>
</html>
Panggil Library CSS
Tambahkan kode berikut setelah title, yang berfungsi untuk memanggil library CSS
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {
font-family: "Raleway", sans-serif
}
</style>
Buat Menu Sidebar
Lalu tambahkan kode berikut didalam body. Pada tag body, tambahkan juga class seperti kode dibawah.
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
<div class="w3-container">
<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey"
title="close menu">
<i class="fa fa-remove"></i>
</a>
<img src="img/avatar_g2.jpg" style="width:45%;" class="w3-round"><br><br>
<h4><b>MY PORTFOLIO</b></h4>
</div>
<div class="w3-bar-block">
<a href="#portfolio" onclick="w3_close()" class="w3-bar-item w3-button w3-padding w3-text-teal"><i
class="fa fa-th-large fa-fw w3-margin-right"></i>PORTFOLIO</a>
<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i
class="fa fa-user fa-fw w3-margin-right"></i>ABOUT</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i
class="fa fa-envelope fa-fw w3-margin-right"></i>CONTACT</a>
</div>
<div class="w3-panel w3-large">
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
</div>
</nav>
</body>
Lihat Hasilnya
Jangan lupa di-save. Lalu jalankan di browser kamu, maka hasilnya akan seperti dibawah ini :
Membuat Efek Overlay
Tambahkan kode berikut setelah kode penutup nav </nav>. Kode ini berfungsi untuk membuat efek overlay ketika dibuka di screen kecil, misalnya smartphone
<!-- Overlay effect when opening sidebar on small screens --> <div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
Bagian Konten
Tambahkan kode berikut untuk membuat layout content Website
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
</div>
Membuat Header
Tambahkan kode berikut untuk didalam div page content membuat bagian Header. Kode ini akan menghasilkan 2 desain yang berbeda di screen desktop dan mobile.
<!-- Header -->
<header id="portfolio">
<a href="#"><img src="img/avatar_g2.jpg" style="width:65px;"
class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>
<span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i
class="fa fa-bars"></i></span>
<div class="w3-container">
<h1><b>My Portfolio</b></h1>
<div class="w3-section w3-bottombar w3-padding-16">
<span class="w3-margin-right">Filter:</span>
<button class="w3-button w3-black">ALL</button>
<button class="w3-button w3-white"><i class="fa fa-diamond w3-margin-right"></i>Design</button>
<button class="w3-button w3-white w3-hide-small"><i class="fa fa-photo w3-margin-right"></i>Photos</button>
<button class="w3-button w3-white w3-hide-small"><i class="fa fa-map-pin w3-margin-right"></i>Art</button>
</div>
</div>
</header>
Preview Header
Membuat Display Portfolio
Berikutnya kita akan membuat desain porftolio menggunakan teknik grid. Grid adalah layout yang membentuk kolom-kolom.
Tambahkan kode berikut setelah header, dan cek hasilnya.
<!-- First Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="img/mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies
congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="img/mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies
congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="img/mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies
congue gravida diam non fringilla.</p>
</div>
</div>
</div>
Berikut hasilnya
