Pemrograman Web (B) - Membuat Halaman Web dengan Bootstrap

Tampilan Halaman Latihan Bootstrap

Deskripsi Tugas

Tugas membuat halaman website dengan menggunakan Bootstrap 5.

Link Repository dan Link Hasil

Link repository : https://github.com/masnurrm/pweb-website-bootstrap

Link hasil: https://masnurrm.github.io/pweb-website-bootstrap

Tampilan Source Code

Code index.html

	<!DOCTYPE html>
	<html lang = "en">
	<head>
	<!-- Metadata -->
	<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 -->
	<title>Latihan Bootstrap</title>

	<!-- Dependencies -->
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
	</head>

	<body>
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">

	<!-- Navbar -->
	<div class="container-fluid ">
	<img src="./img/kelas-programmer2-1.png" height="25" alt="">
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
	<div class="navbar-nav">
	<a class="nav-link active" aria-current="page" href="#">Pemrograman</a>
	<a class="nav-link" href="#">Database</a>
	<a class="nav-link" href="#">Framework</a>
	<a class="nav-link" href="#">Lainnya</a>
	</div>
	</div>
	</div>
	</nav>

	</nav>
	<!-- Jumbotron -->
	<div class="jumbotron text-center col-12 px-5 py-5 text-center">
	<h1>Belajar Programming Itu Mudah</h1>
	<p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>
	</div>

	<!-- Post Section -->
	<div class="container post-section">
	<div class="row">

	<!-- Post 1 -->
	<div class="col-sm-3">
	<div class="thumbnail">
	<a href="https://masnm.blogspot.com/">
	<img src="img/post-1.png" width="100%" height="200px" alt="Cinque Terre" style="object-fit: cover">
	</a>
	<div class="caption">
	<h3>Belajar HTML & CSS</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris</p>
	<p><a href="https://masnm.blogspot.com/" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
	</div>
	</div>
	</div>

	<!-- Post 2 -->
	<div class="col-sm-3">
	<div class="thumbnail">
	<a href="https://masnm.blogspot.com/">
	<img src="img/post-2.png" width="100%" height="200px" alt="Cinque Terre" style="object-fit: cover">
	</a>
	<div class="caption">
	<h3><a href="https://masnm.blogspot.com/" style="text-decoration:none;color: black;">Web Programming</a> </h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris</p>
	<p><a href="https://masnm.blogspot.com/" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
	</div>
	</div>
	</div>

	<!-- Post 3 -->
	<div class="col-sm-3">
	<div class="thumbnail">
	<a href="https://masnm.blogspot.com/">
	<img src="img/post-3.jpg" width="100%" height="200px" alt="Cinque Terre" style="object-fit: cover">
	</a>
	<div class="caption">
	<h3>Belajar Python</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris</p>
	<p><a href="https://masnm.blogspot.com/" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
	</div>
	</div>
	</div>

	<!-- Post 4 -->
	<div class="col-sm-3">
	<div class="thumbnail">
	<a href="https://masnm.blogspot.com/">
	<img src="img/post-4.png" width="100%" height="200px" alt="Cinque Terre" style="object-fit: cover">
	</a>
	<div class="caption">
	<h3>Desain UI & UX</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris</p>
	<p><a href="https://masnm.blogspot.com/" class="btn btn-light btn-block " role="button">Selengkapnya</a></p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Footer -->
	<div class="footer text-center fixed-bottom">
	<p>Copyright 2022 \| <a class="footer" href="https://masnm.blogspot.com">Mas NM</a></p>
	</div>

	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

Code style.css

	.jumbotron {
	background-color: #E9ECEF;
	}

	.post-section {
	margin-top: 40px;
	}

	.caption {
	margin: 20px 0px;
	}

	.footer {
	color: black;
	text-decoration: none;
	}

view raw style.css hosted with ❤ by GitHub

Code script.js