"Untitled"
Bootstrap 4.1.1 Snippet by Anandito28

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title My Portofolio</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <div class="container"> <h1 Anandito Kusuma</h1> <p>Deskripsi Singkat tentang Anda</p> </div> </header> <section class="profile"> <div class="container"> <img src="foto-profil.jpg" alt="Foto Profil" class="profile-pic"> <h2>Tentang Saya</h2> <p>Ini adalah deskripsi tentang diri Anda, keahlian, dan pengalaman.</p> </div> </section> <section class="projects"> <div class="container"> <h2>Proyek Saya</h2> <div class="project"> <h3>Judul Proyek 1</h3> <p>Deskripsi singkat tentang proyek ini.</p> </div> <div class="project"> <h3>Judul Proyek 2</h3> <p>Deskripsi singkat tentang proyek ini.</p> </div> <!-- Tambahkan lebih banyak proyek jika perlu --> </div> </section> <footer> <div class="container"> <p>© 2024 Anandit Kusuma. Semua hak dilindungi.</p> </div> </footer> </body> </html>
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; } .container { width: 80%; margin: auto; overflow: hidden; } header { background: #35424a; color: #ffffff; padding: 20px 0; text-align: center; } .profile { background: #ffffff; padding: 20px; margin: 20px 0; text-align: center; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .profile-pic { width: 150px; height: 150px; border-radius: 50%; margin-bottom: 20px; } .projects { background: #ffffff; padding: 20px; margin: 20px 0; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .project { margin: 10px 0; padding: 10px; border-left: 5px solid #35424a; } footer { background: #35424a; color: #ffffff; text-align: center; padding: 10px 0; position: relative; bottom: 0; width: 100%; }

Related: See More

Material Bootstrap Wizard

Questions / Comments: