PWEB C Tugas 4 (Bootstrap)
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template Web Responsive dengan Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="index.html">
<img src="https://cdn-images-1.medium.com/max/2600/1*UGT1Rh9xLww3JeIDR1F0RQ.png" alt="logo" style="width:200px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Pemrograman</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>
<div class="jumbotron text-center">
<h1>Belajar Programming Itu Mudah Bukan ?</h1>
<p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="thumbnail">
<img src="https://www.freecodecamp.org/news/content/images/size/w2000/2022/03/pexels-pixabay-270404.jpg" width="100%" alt="images"></a>
<div class="caption">
<h3>Belajar HTML & CSS</h3>
<p>The HyperText Markup Language or HTML is the standard markup language
for documents designed to be displayed in a web browser. </p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="https://lsik.unisba.ac.id/wp-content/uploads/2021/09/term1-1.png" width="100%" alt="images"></a>
<div class="caption">
<h3><a href="artikel.html" style="text-decoration:none;color: black;">Web Programming</a> </h3>
<p>Web programming refers to the writing, markup and coding involved in Web development,
which includes Web content, Web client and server scripting and network security.</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="https://w0.peakpx.com/wallpaper/832/433/HD-wallpaper-technology-code-python-programming-language-coding.jpg" width="100%" alt="images"></a>
<div class="caption">
<h3>Belajar Python</h3>
<p>Python is a high-level, general-purpose programming language.
Its design philosophy emphasizes code readability with the use of significant indentation.</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="https://wallpaperaccess.com/full/6000167.jpg" width="100%" alt="images"></a>
<div class="caption">
<h3>Desain UI & UX</h3>
<p>Python is a high-level, general-purpose programming language.
Its design philosophy emphasizes code readability with the use of significant indentation.</p>
</div>
</div>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Copyright 2022 PWEB-C</p>
</div>
</body>
</html>
Comments
Post a Comment