PWEB B - Tugas 4 - Latihan Bootstrap
Di tugas ini akan dilakukan pembuatan website responsive dengan menggunakan salah satu framework CSS yaitu Bootstrap. Website pada latihan ini dibuat menggunakan file HTML yang terhubung dengan CDN Bootstrap.
Berikut tampilan dari website :
Source Code :
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Latihan Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous" />
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand text-info" href="#">Sneaker<span class="text-white">Dominator</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid py-5 d-flex justify-content-center" style="background-color: #ddd">
<div class="text-center">
<h1>Top 4 Kicks of the Week</h1>
<p>Add these to your collection!</p>
</div>
</section>
<section class="mt-4 container">
<div class="row">
<div class="col-lg-3 col-sm-6 col-12 d-flex justify-content-center mb-3">
<div class="card" style="width: 20rem">
<img src="img/jordan.jpeg" class="card-img-top" alt="..." style="height: 11rem" />
<div class="card-body">
<h5 class="card-title">Air Jordan 1 Series</h5>
<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, ratione, maxime repellat voluptatum nihil possimus deleniti eius, voluptate sapiente fuga non! Quibusdam.</p>
<div class="d-flex justify-content-center">
<a href="#" class="btn btn-dark">Buy</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-12 d-flex justify-content-center mb-3">
<div class="card" style="width: 20rem">
<img src="img/foam.jpg" class="card-img-top" alt="..." style="height: 11rem" />
<div class="card-body">
<h5 class="card-title">Adidas YZY Foam RNR</h5>
<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, ratione, maxime repellat voluptatum nihil possimus deleniti eius, voluptate sapiente fuga non! Quibusdam.</p>
<div class="d-flex justify-content-center">
<a href="#" class="btn btn-dark">Buy</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-12 d-flex justify-content-center mb-3">
<div class="card" style="width: 20rem">
<img src="img/dunk.jpeg" class="card-img-top" alt="..." style="height: 11rem" />
<div class="card-body">
<h5 class="card-title">Nike Dunks Series</h5>
<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, ratione, maxime repellat voluptatum nihil possimus deleniti eius, voluptate sapiente fuga non! Quibusdam.</p>
<div class="d-flex justify-content-center">
<a href="#" class="btn btn-dark">Buy</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-12 d-flex justify-content-center mb-3">
<div class="card" style="width: 20rem">
<img src="img/slide.jpg" class="card-img-top" alt="..." style="height: 11rem" />
<div class="card-body">
<h5 class="card-title">Adidas YZY Slides</h5>
<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, ratione, maxime repellat voluptatum nihil possimus deleniti eius, voluptate sapiente fuga non! Quibusdam.</p>
<div class="d-flex justify-content-center">
<a href="#" class="btn btn-dark">Buy</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="py-3 bg-dark text-center text-white">Pemrograman Web B © 2022</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
Source code diatas sudah saya lampirkan pada repo GitHub saya :
Comments
Post a Comment