Tugas 4 - Bootstrap
Latihan Bootstrap
Nama : Agnesfia Anggraeni
NRP : 5025201059
Tahun : 2022/2023
Kelas : Pemrograman Web C
Hasil Latihan 1
index.html
<!DOCTYPE html> <html> <head> <!-- Load file CSS Bootstrap offline --> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.4.1.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12" style="background-color:AntiqueWhite ;"> <h1><center>Judul Halaman</center></h1> </div> </div> <div class="row"> <div class="col-md-3" style="background-color:GreenYellow;"> <h2>Silebar</h2> <p>Link 1</p> <p>Link 2</p> <p>Link 3</p> <p>Link 4</p> </div> <div class="col-md-9" style="background-color:LightCyan;"> <h2>Konten</h2> <p>Konten website dapat diisi pada bagian ini</p> </div> </div> <div class="row"style="background-color:MediumPurple;" > <div class="col-md-12"> <h2><center>Footer</center></h2> </div> </div> </div> </body> </html> |
Hasil Latihan 2
latihan_bootstrap.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">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Latihan Bootstrap</title>
</head>
<body class="mx-0">
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand text-white" href="#">kelas_programmer</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">
<a class="nav-link text-secondary" href="#">Pemrograman<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="#">Database<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="#">Framework<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="#">Lainnya<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<!-- CONTAINER -->
<div class="row">
<div class="col-md-12 bg-light py-5">
<h1><center>Belajar Programming Itu Mudah</center></h1>
<p><center>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</center></p>
</div>
</div>
<!-- CARD DECK -->
<div class="row py-4" style="padding-left: 15%; padding-right: 15%;">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="/image/htmlcss-.png" alt="HTML & CSS">
<div class="card-body">
<h5 class="card-title">BELAJAR HTML & CSS</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quibusdam voluptas impedit eos architecto laborum.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="/image/pemrograman.png" alt="Web Programming">
<div class="card-body">
<h5 class="card-title">Web Programming</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quibusdam voluptas impedit eos architecto laborum.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="/image/python-.jpg" alt="Python">
<div class="card-body">
<h5 class="card-title">Belajar Python</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quibusdam voluptas impedit eos architecto laborum.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="/image/ui.jpg" alt="UI UX">
<div class="card-body">
<h5 class="card-title">Desain UI & UX</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quibusdam voluptas impedit eos architecto laborum.</p>
</div>
</div>
</div>
</div>
</body>
</html>
.png)
Komentar
Posting Komentar