Tugas 4
Tugas Bootstrap pweb C
Muhammad Zufarrifqi Prakoso - 5025201276
Link Repo
index.html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.bundle.min.js"></script>
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<!-- make image to the right-->
<img src="https://kelasprogrammer.com/wp-content/uploads/2020/03/kelas-programmer2-1.png" width="250" height="50" class="d-lg-block align-center p-2" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Pemrograman <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Database</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Framework</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lainnya</a>
</li>
</ul>
</div>
</nav>
<header class="bg-light col-12 px-5 py-5 text-center">
<h1>Belajar Programming Itu Mudah</h1>
<p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>
</header>
<!--make card with bootstrap in main class-->
<main class = "container row mx-auto gap-3 my-3">
<div class="card col px-0" style="width: 18rem;">
<img src="https://lsik.unisba.ac.id/wp-content/uploads/2021/09/term1-1.png" class="card-img-top" alt="...">
<div class="card-body">
<h3>Belajar HTML & CSS</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor purus non enim praesent elementum facilisis leo. Interdum varius sit amet mattis vulputate enim. Velit dignissim sodales ut eu sem. Ut ornare lectus sit amet est. Lectus quam id leo in vitae turpis massa.</p>
</div>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
<div class="card col px-0" style="width: 18rem;">
<img src="https://ilmunesia.com/wp-content/uploads/2016/11/Ilmunesia-Ingin-Belajar-Web-Programming-Harus-Mulai-Dari-Mana.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h3>Web Programming</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor purus non enim praesent elementum facilisis leo. Interdum varius sit amet mattis vulputate enim. Velit dignissim sodales ut eu sem. Ut ornare lectus sit amet est. Lectus quam id leo in vitae turpis massa.</p>
</div>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
<div class="card col px-0" style="width: 18rem;">
<img src="https://www.freecodecamp.org/news/content/images/2021/08/chris-ried-ieic5Tq8YMk-unsplash.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h3>Belajar Python</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor purus non enim praesent elementum facilisis leo. Interdum varius sit amet mattis vulputate enim. Velit dignissim sodales ut eu sem. Ut ornare lectus sit amet est. Lectus quam id leo in vitae turpis massa.</p>
</div>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
<div class="card col px-0" style="width: 18rem;">
<img src="https://rencanamu.id/assets/file_uploaded/blog/1544666963-uiux-01.png" class="card-img-top" alt="...">
<div class="card-body">
<h3>Desain UI & UX</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor purus non enim praesent elementum facilisis leo. Interdum varius sit amet mattis vulputate enim. Velit dignissim sodales ut eu sem. Ut ornare lectus sit amet est. Lectus quam id leo in vitae turpis massa.</p>
</div>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
</main>
</body>
Comments
Post a Comment