Cara Membuat Kategori Icon dengan Bootstrap

-

 

Cara Membuat Kategori Icon 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. Beerfungsi agar terlihat menarik dan mempunyai ciri khas pada websitnya. Nah, kali ini saya akan bagikan tutorial bagaimana Cara Membuat Kategori Icon dengan HTML & CSS.

Sebelum membuat kita harus mempunyai patokan design prototypenya terlebih dahulu untuk mempermudah. disini saya sudah mempunyai design prototype wlijo halaman wlijo pada bagian kategori icon, seperti dibawah ini:


Kode HTML

Jika sudah memiliki design prototype, langkah pertama tentunya kita siapkan folder css, js dan pages dalam satu directory. Dimana dalam folder css kita buat file baru dengan nama style.css dan dalam folder pages buat file baru juga dengan nama kategori.html seperti gambar dibawah ini

Kemudian download compile dan jss. dimana nantinya isi compile css di copy pastekan dalam folder css dan compile js di copy pastekan dalam folder js. Seperti gambar dibawah ini tempat mendownload

Selanjutnya kita buat menu kerangka kategori icon 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">

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/
    ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">

<title>Icon</title>
</head>
<body>
<!-- Awal Kategori -->
<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>
<p>Semua Produk</p>
</div>
</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>
<p>Promo</p>
</div>
</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>
<p>Terlaris</p>
</div>
</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>
<p>Favorit</p>
</div>
</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>
<p>Sayur</p>
</div>
</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>
<p>Buah</p>
</div>
</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>
<p>Ikan</p>
</div>
</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>
<p>Daging</p>
</div>
</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>
<p>Bumbu Dapur</p>
</div>
</div>
</div>
</div>
<!-- Akhir Kategori -->

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="../js/bootstrap.js"></script>
<script src="../js/popper.min.js"></script>
</body>
</html>

Kode CSS

Setelah membuat kerangka menu seperti diatas, langkah selanjutnya untuk membuat menu icon terlihat lebih menarik kita akan desain menunya dengan kode CSS berikut.
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;
            0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;
            1,500;1,600;1,700;1,800;1,900&display=swap');

body {
background-color: #F0EDED;
}

/*Style Kategori*/
i {
color:#fff;
padding-top: 17px;
padding-left: 134px;
position:static;
}

p {
color:#fff;
margin-top: 8px;
text-align: center;
padding-left: 139px;
}

.row-container {
background-color: #1E7A1B;
margin: 0px;
border-radius: 15px;
}
/*Style Kategori*/

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

Postingan populer dari blog ini

Design Prototype Checkout Wlijo di Figma

-
Gambar
  Pengertian Prototype      Definisi umum dari  prototype  adalah sebuah skema rancangan sistem yang membentuk model dan standar ukuran atau skalabilitas yang akan dikerjakan nantinya. Setiap pengembang maupun pengguna dapat berinteraksi langsung dengan model tersebut tanpa harus membuat produk nyatanya.   Sistem prototipe yang dibangun, menyesuaikan dengan kebutuhan awal  development software  untuk mengetahui beberapa fitur dan fungsi yang telah didefinisikan sebelumnya. Sehingga mampu mengetahui kesalahan lebih awal sebelum mengimplementasikan dan merilis produk secara keseluruhan. Tujuan Penggunaan Prototype      Lantas, apa tujuan sebenarnya dari pembuatan sebuah  prototype ? Tujuan utamanya adalah supaya produk yang akan dirilis sesuai dengan permintaan  user  atau pasar. Sehingga, peran dari prototipe sendiri adalah menjadi penghubung antara produsen dan konsumen untuk dapat mewujudkan produk berupa perang...
Baca selengkapnya

Cara Membuat Web Server Statis dengan Python

-
Gambar
  Gambar diatas merupakan ilustrasi yang dapat membantu pemahaman kalian bagaimana model komunikasi antara server dengan client dan protokol RFC yang terkait dengan komunikasi data tersebut.  Nah RFC atau kepanjangan dari Request For Comments itu serial dokumen protokol standar yang diterbitkan oleh lembaga-lembaga internasional dibawah naungan Intenet Society (ISOC). Sampai saat ini, ISOC itu sendiri masih dibawah koordinasi World Wide Web Consortium (W3C). Dimana W3C itu sendiri, sampai artikel ini saya tulis masih dikepalai oleh Tim Berners-Lee, sang penemu www itu sendiri. Dokumen pertama kali yang ditulis oleh tim penyunting RFC tercatat mulai tahun 1968. Dan dari tahun 1968 itu dokumen RFC terus bertambah sampai sekarang. Jumlah dokumen RFC sejak tahun 1968 sampai tahun 2020 tercatat sudah mencapai angka 8.715 dokumen. Delapan ribu dokumen protokol standar inilah yang akhirnya dipatuhi oleh berbagai macam kalangan, terutama pengembang aplikasi world wide web dan aplikasi...
Baca selengkapnya

Belajar Cara Kerja Komputer dan Assembler Menggunanakan NASM

-
Gambar
    Komputer merupakan perangkat listrik dimana kosakata bahasanya hanya ON yang dilambangkan angka 1 dan OFF yang dilambangkan angka 0. Dimana angka biner 0 artinya arus listrik diputus, sedangkan 1 artinya arus listrik tersambung.     Jaman dahulu, pada saat komputer generasi awal dibuat, teknologinya yang ada masih menggunakan tabung vakum. Sehingga 1 unit komputer merk Electronic Numerical Integrator and Computer (ENIAC), dibuat dari 18.000 tabung vakum, 70.000 resistor dan 5 juta titik solder. Komputer ENIAC ini setidaknya butuh ruang 500 meter persegi atau hampir seluas lapangan sepak bola. berbeda dengan saat ini yang ukurannya sudah sangat kecil. Bagaimana Cara Kerja Komputer? Komputer tidak menyimpan karakter sebagai karakternya sendiri, juga tidak ada gambar dan huruf yang tersimpan di harddisk komputer kita. Sebaliknya, setiap karakter dikodekan sebagai rangkaian bit biner : 1 dan 0 Misalnya kode huruf "A" adalah 01000001. Tapi bagaimana komputer mengetahu...
Baca selengkapnya