Seiring berkembangnya teknologi, internet mempunyai nilai-nilai krusial dari sebuah media yang oleh karena itu, bermunculan website tiap detiknya pada seluruh dunia.
Disinilah web desain berperan untuk membentuk website yang bagus, kita perlu mengerti bagaimana cara menciptakan web desain. Web desain terdiri berdasarkan grafis, ataupun animasi digital dan mampu berbentuk apa saja yang bisa mendukung atau memperindah website anda. Tentu saja web desain pula wajib user friendly. Karena anda tentu tidak ingin pengguna dipusingkan dengan desain yang rumit dan tidak memahami dimana wajib mencari informasinya. Membuat web desain dalam prinsipnya hampir sama dengan membentuk sebuah tempat tinggal Anda sendiri.
Sebelum membuat desain website terlebih dahulu kita memiliki patokan membuat desain melalui prototype di figma sebagai berikut:
Setelah membuat prototype, langkah pertama kita siapkan folder assets dan pages di dalam folder assets ada folder css dan js, di folder pages ada file cardProduk.html sebagai berikut:
Lalu download compile css dan js, dimana nantinya isi compile css di copy lalu di paste dalam folder css dan js di copy lalu paste dalam folder js. Seperti gambar dibawah ini tempat mendownload:
Selanjutnya kita buat menu kerangka code kategori produk terlebih dahulu dengan kode HTML.
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">
<!-- Bootstrap CSS -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/style.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/
6.0.0-beta2/css/all.min.css" rel="stylesheet">
<title>Wlijo</title>
</head>
<body>
<div class="container">
<!-- Content here -->
<div class="d-flex justify-content-between align-items-center">
<h2 style="color:#1E7A1B">Promo</h2>
<small style="margin-left:100px; color:#1E7A1B;">Lebih Banyak
<i class="fas fa-arrow-right" width="15%" height="15%"></i></small>
</div>
<div class="row row-cols-1 row-cols-md-6 g-4">
<div class="col">
<div class="card h-100">
<img src="../assets/img/Cara-Tepat-Memasak-Sayur-Pakcoy-Agar
-Kandungan-Gizinya-Tidak-Hilang.png"
class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Pakcoy</h5>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<span class="badge rounded-pill bg-danger text-light">5%</span>
<small class="text-muted"><del>Rp. 5.000</del></small>
</div>
</div>
<small class="text-muted">Rp. 4.500 / 200 gram</small>
<span class="badge rounded-pill bg-success text-light">
Stok 10</span></br>
<i class="fas fa-star" style="color: rgb(240, 240, 35);
width:8%; height:8%"></i>
<small class="text-muted">4.6(10)</small></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="badge rounded-pill bg-success
text-light" style="margin-left:70px;">Beli</span>
</div>
</div>
</div>
</div>
</div>
<div class="col" >
<div class="card h-100">
<img src="../assets/img/_200807114130_selada keriting_full.jpg"
class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Selada</h5>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<span class="badge rounded-pill bg-danger text-light">5%</span>
<small class="text-muted"><del>Rp. 5.000</del></small>
</div>
</div>
<small class="text-muted">Rp. 4.500 / 200 gram</small>
<span class="badge rounded-pill bg-success text-light">
Stok 10</span></br>
<i class="fas fa-star" style="color: rgb(240, 240, 35);
width:8%; height:8%"></i>
<small class="text-muted">4.6(10)</small></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="badge rounded-pill bg-success
text-light" style="margin-left:70px;">Beli</span>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="../assets/img/bokchoy-2494763_960_720.png"
class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Sawi Putih</h5>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<span class="badge rounded-pill bg-danger text-light">5%</span>
<small class="text-muted"><del>Rp. 5.000</del></small>
</div>
</div>
<small class="text-muted">Rp. 4.500 / 200 gram</small>
<span class="badge rounded-pill bg-success text-light">
Stok 10</span></br>
<i class="fas fa-star" style="color: rgb(240, 240, 35);
width:8%; height:8%"></i>
<small class="text-muted">4.6(10)</small></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="badge rounded-pill bg-success
text-light" style="margin-left:70px;">Beli</span>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="../assets/img/Featured_Manfaat-Kangkung-Sayur
-Pelengkap-Kaya-Guna.jpg" class="card-img-top" width="40%"
height="40%">
<div class="card-body">
<h5 class="card-title">Kangkung</h5>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<span class="badge rounded-pill bg-danger text-light">5%</span>
<small class="text-muted"><del>Rp. 5.000</del></small>
</div>
</div>
<small class="text-muted">Rp. 4.500 / 200 gram</small>
<span class="badge rounded-pill bg-success text-light">
Stok 10</span></br>
<i class="fas fa-star" style="color: rgb(240, 240, 35);
width:8%; height:8%"></i>
<small class="text-muted">4.6(10)</small></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="badge rounded-pill bg-success
text-light" style="margin-left:70px;">Beli</span>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="../assets/img/8315_tomat-buah-ata-sayur.jpeg"
class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Tomat</h5>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<span class="badge rounded-pill bg-danger text-light">5%</span>
<small class="text-muted"><del>Rp. 5.000</del></small>
</div>
</div>
<small class="text-muted">Rp. 4.500 / 200 gram</small>
<span class="badge rounded-pill bg-success text-light">
Stok 10</span></br>
<i class="fas fa-star" style="color: rgb(240, 240, 35);
width:8%; height:8%"></i>
<small class="text-muted">4.6(10)</small></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="badge rounded-pill bg-success
text-light" style="margin-left:70px;">Beli</span>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="../assets/img/6ffd35e4eda51c32fbb4d239828ea522.jpeg"
class="card-img-top" width="40%" height="40%">
<div class="card-body">
<h5 class="card-title">Buncis</h5>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<span class="badge rounded-pill bg-danger text-light">5%</span>
<small class="text-muted"><del>Rp. 5.000</del></small>
</div>
</div>
<small class="text-muted">Rp. 4.500 / 200 gram</small>
<span class="badge rounded-pill bg-success text-light">
Stok 10</span></br>
<i class="fas fa-star" style="color: rgb(240, 240, 35);
width:8%; height:8%"></i>
<small class="text-muted">4.6(10)</small></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="badge rounded-pill bg-success
text-light" style="margin-left:70px;">Beli</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="../assets/js/bootstrap.js"></script>
<script src="../assets/js/popper.min.js"></script>
</body>
</html>
KODE CSS
Setelah
membuat kerangka produk seperti diatas, langkah selanjutnya untuk membuat produk yang terlihat lebih menarik kita akan desain produknya dengan kode
CSS dengan bootstrap berikut ini:
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. Sekian blog dari saya, semoga bermanfaat..
Komentar
Posting Komentar