Latihan Bootstrap Pemrograman Web
Latihan Bootstrap Pemrograman Web
latihan membuat website menggunakan bootstrap
source code:
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>Kelas Programmer</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"> | |
| <style> | |
| .blog{ | |
| width: 300px; | |
| height: 500px; | |
| } | |
| .blog img{ | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-6 d-flex align-items-center"> | |
| <a href="#" class="text-decoration-none text-secondary d-inline-block m-2"><img src="logo.png" alt="Logo" height="25px"></a> | |
| <a href="#" class="text-decoration-none text-secondary d-inline-block m-2">Pemrograman</a> | |
| <a href="#" class="text-decoration-none text-secondary d-inline-block m-2">Database</a> | |
| <a href="#" class="text-decoration-none text-secondary d-inline-block m-2">Framework</a> | |
| <a href="#" class="text-decoration-none text-secondary d-inline-block m-2">Lainnya</a> | |
| </div> | |
| </div> | |
| <div class="row header mt-5 mb-5 p-5 bg-secondary"> | |
| <h1 class="text-center align-bottom">Belajar Programming Itu Mudah</h1> | |
| <p class="text-center">Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p> | |
| </div> | |
| <div class="row d-flex justify-content-center"> | |
| <div class="blog"> | |
| <img src="1.jpg" alt="Belajar HTML & CSS"> | |
| <h3>Belajar HTML & CSS</h3> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit ratione, rem eveniet tempore blanditiis perspiciatis quidem ipsam ipsum vel facilis delectus! Officiis velit architecto rem omnis incidunt soluta quas voluptatem.</p> | |
| </div> | |
| <div class="blog"> | |
| <img src="2.jpg" alt="Web Programming"> | |
| <h3>Web Programming</h3> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit ratione, rem eveniet tempore blanditiis perspiciatis quidem ipsam ipsum vel facilis delectus! Officiis velit architecto rem omnis incidunt soluta quas voluptatem.</p> | |
| </div> | |
| <div class="blog"> | |
| <img src="3.jpg" alt="Belajar Python"> | |
| <h3>Belajar Python</h3> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit ratione, rem eveniet tempore blanditiis perspiciatis quidem ipsam ipsum vel facilis delectus! Officiis velit architecto rem omnis incidunt soluta quas voluptatem.</p> | |
| </div> | |
| <div class="blog"> | |
| <img src="4.jpg" alt="Desain UI & UX"> | |
| <h3>Desain UI & UX</h3> | |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit ratione, rem eveniet tempore blanditiis perspiciatis quidem ipsam ipsum vel facilis delectus! Officiis velit architecto rem omnis incidunt soluta quas voluptatem.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Comments
Post a Comment