Popular Posts
-
PEMODELAN PERANGKAT LUNAK Apa itu Pemodelan Perangkat Lunak?. Pemodelan Perangkat Lunak adalah proses pembuatan representasi a... -
SOFTWARE DEVELOPMENT LIFE CYCLE ( SDLC ) SDLC (Software Development Life Cycle) , atau Siklus Hidup Pengembangan Perangkat Lunak , a... -
USE CASE DIAGRAM 1. Pengertian dan Fungsi Diagram use case merupakan gambaran atau representasi dari interaksi yang terjadi antara ...
Kamis, 07 Maret 2024
BOOTSTSRAP CARD dan NAVBAR
Card adalah komponen yang fleksibel dan dapat diperluas untuk menampung konten dengan berbagai varian dan opsi. Card menggantikan panel, well, dan thumbnail dari Bootstrap 3. Card dapat berisi gambar, teks, daftar grup, link, dan banyak lagi. Mereka dibangun dengan flexbox, yang memudahkan penyesuaian dan penyelarasan, serta berintegrasi dengan baik dengan komponen Bootstrap lainnya.
Berikut adalah contoh dari hasil coding Bootstrap Card dan navigasi bar :
.png)
Codingan dari hasil diatas sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="nanami.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</a>
</div>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/hfzzamr_?igsh=MXNseXFoZHZ4MjNycQ==">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/profile.php?id=61557152730336&mibextid=ZbWKwL">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.tiktok.com/@piss.xd?_t=8kUf4A3YK5i&_r=1">Tiktok</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lainnya</a>
</li>
</ul><nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</nav>
<div class="container-fluid p-5 bg-success text-white text-center">
<h1>WELCOME TO MY STORE</h1>
<p>PRODUK KAMI BERKUALITAS,MURAH DAN ORI TENTUNYA</p>
</div>
<body>
<div class="container text-center">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="contohbaju.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">KAOS BIRU BAGUS </h5>
<p class="card-text">Kaos impor dari belanda ini sangat nyaman dipakai. bahan dingin .</p>
<a href="#" class="btn btn-success">KUNJUNGI PRODUK</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="contohbaju.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">KAOS BIRU</h5>
<p class="card-text">Kaos impor dari belanda ini sangat nyaman dipakai. bahan dingin .</p>
<a href="#" class="btn btn-success">KUNJUNGI PRODUK</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="contohbaju.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">JAKET HOLISHAY ORI</h5>
<p class="card-text">Kaos impor dari belanda ini sangat nyaman dipakai. bahan dingin .</p>
<a href="#" class="btn btn-success">KUNJUNGI PRODUK</a>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="container text-center">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="contohbaju.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">JAKET VIRAL ADINDAS</h5>
<p class="card-text">Kaos impor dari belanda ini sangat nyaman dipakai. bahan dingin .</p>
<a href="#" class="btn btn-success">KUNJUNGI PRODUK</a>
</div>
</div>
</div>
Langganan:
Komentar (Atom)