Implementasi Bootstrap
Tugas : Membuat Halam Web Dengan Mengimplementasikan Bootstrap
Nama: Muhammad Yunus
NRP: 5025021171
Kelas: PWEB B
Materi: Bootstrap
Pada materi ini, kita dikenalkan dengan framework styling yaitu Bootstrap.
Di tugas kini saya melakukan slicing halaman page dengan memanfaat styling menggunakan bootstrap.
Terdapat 3 bagian utama pada page ini, yaitu navbar, header (jumbotron), dan main.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 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 "> | |
| <div class="container-fluid "> | |
| <img src="./image/image-removebg-preview.png" height="70" 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="#">Home</a> | |
| <a class="nav-link" 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> | |
| <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> | |
| <main class="container row mx-auto gap-3 my-4"> | |
| <div class="card col px-0" style=""> | |
| <img src="./image/design-html-web-design-template-concept_53876-120438.jpg" class="card-img-top object-cover px-0" alt="..."> | |
| <div class="card-body"> | |
| <h5 class="card-title">HTML & CSS</h5> | |
| <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
| </div> | |
| </div> | |
| <div class="card col px-0" style="width: 18rem;"> | |
| <img src="./image/coding-man_1098-18084.jpg" class="card-img-top" alt="..."> | |
| <div class="card-body"> | |
| <h5 class="card-title">Web Programming</h5> | |
| <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
| </div> | |
| </div> | |
| <div class="card col px-0 " style="width: 18rem;"> | |
| <img src="./image/untitled-design-12-62ff877a125df-sej-1520x800.png" class="card-img-top" alt="..."> | |
| <div class="card-body"> | |
| <h5 class="card-title">Python</h5> | |
| <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
| </div> | |
| </div> | |
| <div class="card col px-0" style="width: 18rem;"> | |
| <img src="./image/240_F_370868833_JOyME2fcL7U4Gr2XaQob1qLIjzEQmFlw.jpg" class="card-img-top" alt="..."> | |
| <div class="card-body"> | |
| <h5 class="card-title">UI UX</h5> | |
| <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
| </div> | |
| </div> | |
| </main> | |
| </body> | |
| </html> |
Link:
Comments
Post a Comment