Membuat Website Wlijo Home Menggunakan HTML dan CSS
Cara Membuat Home dengan HTML & CSS - Setiap halaman website tentunya kita sering menjumpai tampilan design berupa teks pada menunya dan juga yang dikombinasikan dengan icon pada setiap menunya. Berfungsi agar terlihat menarik dan mempunyai ciri khas pada websitnya. Nah, kali ini saya akan bagikan tutorial bagaimana Cara Membuat Home dengan HTML & CSS.
Sebelum membuat kita harus mempunyai patokan design prototypenya terlebih dahulu untuk mempermudah. disini saya sudah mempunyai design prototype wlijo halaman home, seperti dibawah ini:
Kode HTML
Jika sudah memiliki design prototype, langkah pertama tentunya kita siapkan folder css, image dalam satu directory. Dimana dalam folder css kita buat file baru dengan nama home.css dan dalam folder pages buat file baru juga dengan nama home.html, Selanjutnya kita buat menu kerangka home terlebih dahulu dengan kode HTML.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wlijo</title>
<link rel="stylesheet" href="assets/css/home.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<link rel="shortcut icon" href="image/logo.png">
</head>
<body>
<!-- Awal Navbar -->
<div class="sticky-top">
<nav class="nav nav-pm1 nav-atas">
<div class="right">
<a class="nav1 brg" href="#">About</a>
<a class="nav1 brg" href="#">Jadi Mitra</a>
<a class="nav1 brg" href="#">Cara Kerja Wlijo</a>
</div>
<div class="left">
<a class="nav1" href="#">Blog</a>
<a class="nav1 bold" href="#">Masuk</a>
<a class="nav1 boldbrg" href="#">Daftar</a>
</div>
</nav>
<nav class="nav nav-pm2 nav-bawah">
<div class="satu left">
<a href="" class="nav2">
<img src="image/logo.png" style="width:18%;">
</a>
</div>
<div class="pencarian nav-atas">
<div class="dua left search-margin">
<div class="search2">
<i class="fas fa-search" aria-hidden="true"></i>
<input type="text" name="" class="in" placeholder="Cari Produk">
</div>
</div>
<div class="dua left">
<div class="search">
<i class="fas fa-search-location"></i>
<input type="text" name="" class="in" placeholder="Lokasi Anda">
</div>
</div>
</div>
<div class="tiga kanan nav-atas">
<div class="keranjang icon-margin">
<div class="nav2">
<i class="fas fa-shopping-cart icon"></i>
</div>
</div>
<div class="user">
<a href="" class="nav2 user">
<i class="far fa-user-circle inline icon"></i>
<p class="inline icon" >User</p>
</a>
</div>
</div>
</nav>
</div>
<!-- Akhir Navbar -->
<!-- Awal slider -->
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="image/1.jpg" style="width:100%; border-radius: 10px;">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="image/2.jpg" style="width:100%; border-radius: 10px;">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="image/3.jpg" style="width:100%; border-radius: 10px;">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="image/4.jpg" style="width:100%; border-radius: 10px;">
<div class="text"></div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<!-- Akhir slider -->
<!-- Awal Kategori Icon -->
<div class="container mt-5 text-center">
<div class="row text-center row-container mt-5">
<div class="col-lg-1 col-md-1 col-sm-1 col-9">
<div class="menu-kategori">
<i class="fas fa-border-all fa-4x"></i>
</div>
<p class="ket">Semua Produk</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-9">
<div class="menu-kategori">
<i class="fas fa-store fa-4x"></i>
</div>
<p class="ket">Pedagang Sayur</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-9">
<div class="menu-kategori">
<i class="fas fa-percent fa-4x"></i>
</div>
<p class="ket">Promo</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-9">
<div class="menu-kategori">
<i class="fas fa-certificate fa-4x"></i>
</div>
<p class="ket">Terlaris</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-9">
<div class="menu-kategori">
<i class="fas fa-heart fa-4x"></i>
</div>
<p class="ket">Favorit</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-9">
<div class="menu-kategori">
<i class="fas fa-carrot fa-4x"></i>
</div>
<p class="ket">Sayur</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-9">
<div class="menu-kategori">
<i class="fas fa-apple-alt fa-4x"></i>
</div>
<p class="ket">Buah</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-9">
<div class="menu-kategori">
<i class="fas fa-fish fa-4x"></i>
</div>
<p class="ket">Ikan</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-9">
<div class="menu-kategori">
<i class="fas fa-drumstick-bite fa-4x" ></i>
</div>
<p class="ket">Daging</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-9">
<div class="menu-kategori">
<i class="fas fa-mortar-pestle fa-4x"></i>
</div>
<p class="ket">Bumbu Dapur</p>
</div>
</div>
</div>
<!-- Akhir Kategori -->
<!-- Awal Card Bakul -->
<div class="d-flex justify-content-between align-items-center">
<h2 style="color:#1E7A1B; margin-left:100px">Promo</h2>
<small type="button" style="margin-left:1150px; color:#1E7A1B;">Lebih Banyak<i class="fas fa-arrow-right" width="15%" height="15%"></i></small>
</div>
<div class="row text-center row-container2 mt-5">
<div class="row row-cols-1 row-cols-md-6 g-4 box1">
<div class="col">
<div class="card h-100">
<img src="image/user-icon-vector-free-4.png" class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Mlijo A</h5>
<small class="text-conten1">Lokasi Terkini: </br>Sobo</small></br>
<span class="text-conten2">Transaksi 10</span></br></br>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<i class="love fas fa-heart" type="button" width="15%" height="15%"></i>
<span type="button" class="button-conten">Lihat</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-6 g-4 box2">
<div class="col">
<div class="card h-100">
<img src="image/user-icon-vector-free-4.png" class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Mlijo B</h5>
<small class="text-conten1">Lokasi Terkini: </br>Kertosari</small></br>
<span class="text-conten2">Transaksi 10</span></br></br>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<i class="love fas fa-heart" type="button" width="15%" height="15%"></i>
<span type="button" class="button-conten">Lihat</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-6 g-4 box3">
<div class="col">
<div class="card h-100">
<img src="image/user-icon-vector-free-4.png" class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Mlijo C</h5>
<small class="text-conten1">Lokasi Terkini: </br>Mendut</small></br>
<span class="text-conten2">Transaksi 10</span></br></br>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<i class="love fas fa-heart" type="button" width="15%" height="15%"></i>
<span type="button" class="button-conten">Lihat</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-6 g-4 box4">
<div class="col">
<div class="card h-100">
<img src="image/user-icon-vector-free-4.png" class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Mlijo D</h5>
<small class="text-conten1">Lokasi Terkini: </br>Mandar</small></br>
<span class="text-conten2">Transaksi 10</span></br></br>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<i class="love fas fa-heart" type="button" width="15%" height="15%"></i>
<span type="button" class="button-conten">Lihat</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-6 g-4 box5">
<div class="col">
<div class="card h-100">
<img src="image/user-icon-vector-free-4.png" class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Mlijo E</h5>
<small class="text-conten1">Lokasi Terkini: </br>Karangrejo</small></br>
<span class="text-conten2">Transaksi 10</span></br></br>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<i class="love fas fa-heart" type="button" width="15%" height="15%"></i>
<span type="button" class="button-conten">Lihat</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-6 g-4 box6">
<div class="col">
<div class="card h-100">
<img src="image/user-icon-vector-free-4.png" class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Mlijo F</h5>
<small class="text-conten1">Lokasi Terkini: </br>Kalipuro</small></br>
<span class="text-conten2">Transaksi 10</span></br></br>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<i class="love fas fa-heart" type="button" width="15%" height="15%"></i>
<span type="button" class="button-conten">Lihat</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Akhir Card bakul -->
</body>
<script src="assets/css/home.js" type="text/JavaScript"></script>
</html>
Kode CSS
Setelah membuat kerangka menu seperti diatas, langkah selanjutnya untuk membuat menu home terlihat lebih menarik kita akan desain menunya dengan kode CSS berikut.
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
/* Awal Navbar */
.nav1{
color: #1E7A1B;
padding: 0 3px;
text-decoration: none;
font-size: small;
font-weight:bold;
}
.nav2{
color: white;
}
.bold {
font-weight:bold;
background-color: #1E7A1B;
border-radius: 8px;
color: white;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 2px;
cursor: pointer;
}
.boldbrg {
font-weight:bold;
background-color: white;
border: 1.5px solid #1E7A1B;
border-radius: 8px;
color: #1E7A1B;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 2px;
cursor: pointer;
}
.nav{
padding-left:100px;
padding-right: 100px;
border-radius: 6px;
}
.nav-pm1{
margin:10px 0;
}
.nav-pm2{
padding-top:10px;
padding-bottom:10px;
}
.nav-atas{
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-bawah{
display: flex;
justify-content:space-between;
align-items: center;
background-color: #1E7A1B;
}
.inline{
text-decoration:none;
}
.nav2 h1 {
font-size: 2.5em;
}
.in{
padding:10px;
padding-left: 40px;
width: 100%;
border: none;
border-radius: 10px;
}
.search{
width: 300px;
position: relative;
}
.user{
display: flex;
flex-direction: row;
}
.tiga{
margin-left : 10px;
}
.search2{
width: 300px;
position: relative;
}
.search i, .search2 i {
position: absolute;
left: 15px;
top: 10px;
color: gray;
}
::placeholder {
color: gray;
font-size: medium;
}
.search-margin{
margin-right: 30px;
}
.icon{
color:white;
font-size: 20px;
}
.icon-margin{
margin-right: 20px;
}
/* Slideshow container */
.slideshow-container {
max-width: 1200px;
max-height: 500px;
position: relative;
margin: auto;
padding-top: 15px;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/*Style Kategori*/
.menu-kategori {
color:#fff;
padding-top: 17px;
padding-left: 18%;
position:static;
display: flex;
}
.ket {
color:#fff;
padding-top: 10px;
padding-bottom: 20px;
padding-right: 10%;
padding-left: 10%;
text-align: center;
display: flex;
}
.menu-kategori:hover {
color:#fff;
cursor: pointer;
transform: scale(1.2);
}
.row-container {
padding-left:100px;
padding-right: 100px;
display: flex;
background-color: #1E7A1B;
justify-content: space-between;
margin: 0px;
margin-top: 7px;
border-radius: 15px;
}
/*Style Kategori*/
/*Style card bakul*/
.box1 {
background-color: #fff;
width: 100px;
}
.love:hover {
color: red;
}
.conten {
width: 16%;
height: 15%;
background-color: #fff;
border: 1px solid #C0C0C0;
}
.isi-conten {
margin-left: -20px;
padding-left: 30px;
}
.text-conten1{
color: #000;
font-size: 14px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.text-conten2{
background-color: #fff;
border-radius: 12px;
border: 1px solid #1E7A1B;
color: #1E7A1B;
padding: 2px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.button-conten {
background-color: #1E7A1B;
border-radius: 12px;
border: none;
color: white;
width: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
margin-left:60px;
margin-top: 0px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.row-container2 {
padding-left:100px;
padding-right: 100px;
display: flex;
background-color: white;
justify-content: space-between;
margin: 0px;
margin-top: 7px;
border-radius: 15px;
}
.box1 {
padding-left:20px;
padding-right: 100px;
display: flex;
background-color: #fff;
justify-content: space-between;
margin: 0px;
margin-top: 7px;
border-radius: 15px;
width: 13%;
border: 1px solid rgb(148, 140, 140);
}
.box2 {
padding-left:20px;
padding-right: 100px;
display: flex;
background-color: #fff;
justify-content: space-between;
margin: 0px;
margin-top: 7px;
border-radius: 15px;
width: 13%;
margin-left: 10px;
border: 1px solid rgb(148, 140, 140);
}
.box3 {
padding-left:20px;
padding-right: 100px;
display: flex;
background-color: #fff;
justify-content: space-between;
margin: 0px;
margin-top: 7px;
border-radius: 15px;
width: 13%;
margin-left: 10px;
border: 1px solid rgb(148, 140, 140);
}
.box4 {
padding-left:20px;
padding-right: 100px;
display: flex;
background-color: #fff;
justify-content: space-between;
margin: 0px;
margin-top: 7px;
border-radius: 15px;
width: 13%;
margin-left: 10px;
border: 1px solid rgb(148, 140, 140);
}
.box5 {
padding-left:20px;
padding-right: 100px;
display: flex;
background-color: #fff;
justify-content: space-between;
margin: 0px;
margin-top: 7px;
border-radius: 15px;
width: 13%;
margin-left: 10px;
border: 1px solid rgb(148, 140, 140);
}
.box6 {
padding-left:20px;
padding-right: 100px;
display: flex;
background-color: #fff;
justify-content: space-between;
margin: 0px;
margin-top: 7px;
border-radius: 15px;
width: 13%;
margin-left: 10px;
border: 1px solid rgb(148, 140, 140);
}
/*Style card bakul*/
Output
Gambar diatas merupakan output dari codingan HTML dan CSS yang telah kita buat. dimana outputnya sesuai dengan design prototype yang telah kita design di figma sebelumnya. Next, kita lanjutkan pada halaman selanjutnya ya teman-teman...see you!!
Komentar
Posting Komentar