Membuat Halaman Web Menggunakan Bootstrap
Nama : Bimantara Tito Wahyudi
NRP : 5025021227
Kelas : PWEB B
NRP : 5025021227
Kelas : PWEB B
Pada materi kali ini, kami mempelajari tentang slicing page bootstrap. Berikut adalah halaman web yang telah saya buat:
Berikut adalah source codenya:
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="bootstrap/css/bootstrap.min.css"> | |
| <script src="js/jquery-3.4.1.min.js"></script> | |
| <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> | |
| <div class="row"> | |
| <div class="col-md-12 px-4 py-3" style="background-color:#333A40 ;"> | |
| <img class="mx-2" src="img/logo.png" height="30px"/> | |
| <span class="mx-2" style="color:#838480">Pemrograman</span> | |
| <span class="mx-2" style="color:#838480">Database</span> | |
| <span class="mx-2" style="color:#838480">Framework</span> | |
| <span class="mx-2" style="color:#838480">Lainnya</span> | |
| </div> | |
| </div> | |
| <div class="col-md-12 py-5 mb-3" style="background-color:#E9EBEE ;"> | |
| <h1 style="color:#333A40"><center>Belajar Programming Itu Mudah</center></h1> | |
| <h6 style="color:#333A40"><center>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</center></h6> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-3 p-3"> | |
| <img src="img/HTML_&_CSS.png" width="100%"> | |
| <h3>Belajar HTML & CSS</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum esse dolore accusantium similique, expedita earum asperiores dolorum a nulla, inventore tenetur nesciunt possimus officia. Rerum optio eos repellendus minima labore.</p> | |
| </div> | |
| <div class="col-md-3 p-3"> | |
| <img src="img/Programming.png" width="100%"> | |
| <h3>Web Programming</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum esse dolore accusantium similique, expedita earum asperiores dolorum a nulla, inventore tenetur nesciunt possimus officia. Rerum optio eos repellendus minima labore.</p> | |
| </div> | |
| <div class="col-md-3 p-3"> | |
| <img src="img/Python.png" width="100%"> | |
| <h3>Belajar Python</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum esse dolore accusantium similique, expedita earum asperiores dolorum a nulla, inventore tenetur nesciunt possimus officia. Rerum optio eos repellendus minima labore.</p> | |
| </div> | |
| <div class="col-md-3 p-3"> | |
| <img src="img/Desain_UI_&_UX.png" width="100%"> | |
| <h3>Desain UI & UX</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum esse dolore accusantium similique, expedita earum asperiores dolorum a nulla, inventore tenetur nesciunt possimus officia. Rerum optio eos repellendus minima labore.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Link:
Comments
Post a Comment