Pemrograman Web B Latihan Pertemuan 5 : Membuat Tampilan Web dengan Bootstrap
Membuat Web dengan Bootstrap
Andhika Ditya Bagaskara D.
5025201096
Pada pertemuan ke-5 ini, kami diberikan latihan untuk membuat tampilan web menggunakan bootstrap.
Tampilan:
.png)
Berikut ini potongan source code nya:
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> | |
| <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-fluid"> | |
| <div class="row sticky-top d-flex flex-row align-items-center bg-dark"> | |
| <img src="images/hiden.png" height = "30px" alt="..." class="ml-3 my-3"> | |
| <ul class="nav"> | |
| <li class="nav-item"> | |
| <a class="nav-link text-light active" href="#">Pemrograman</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link text-secondary" href="#">Database</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link text-secondary" href="#">Framework</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link text-secondary" href="#">Lainnya</a> | |
| </li> | |
| </div> | |
| <div class="row bg-light jumbotron"> | |
| <div class="bg-light mx-auto text-center"> | |
| <h1>Belajar Programming Itu Mudah</h1> | |
| <p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col"> | |
| <div class="card"> | |
| <img src="images/img01.jpg" height="100px" class="card-img-top img-fluid" alt=""> | |
| <div class="card-body"> | |
| <h5 class="text-center">Belajar HTML & CSS</h5> | |
| <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | |
| Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card"> | |
| <img src="images/img02.jpg" height="100px" class="card-img-top img-fluid" alt=""> | |
| <div class="card-body"> | |
| <h5 class="text-center">Web Programming</h5> | |
| <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | |
| Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card"> | |
| <img src="images/img03.jpg" height="100px" class="card-img-top img-fluid" alt=""> | |
| <div class="card-body"> | |
| <h5 class="text-center">Belajar Python</h5> | |
| <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | |
| Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card"> | |
| <img src="images/img04.jpg" height="100px" class="card-img-top img-fluid" alt=""> | |
| <div class="card-body"> | |
| <h5 class="text-center">UI/UX Design</h5> | |
| <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | |
| Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
.png)
.png)
Komentar
Posting Komentar