"19412442Monica"
Bootstrap 4.1.1 Snippet by 19412442Monica

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> <head> <meta charset="UTF-8"> <title>Ngoding Itu Ga sulit</title> </head> <style> *{ box-sizing: border-box; } body{ font-family: "Century Gothic"; margin: 0px; padding: 0px; } nav{ text-align: center; position: fixed; top: 0px; background-color: rgba(255,255,255,0.8); width: 100%; z-index: 3; text-decoration : none; color : #ff5800; } nav ul{ list-style: none; margin : 0; padding : 0; } nav ul li{ display: inline-block; list-style : none; padding-top : 8px; padding-right : 16px; padding-left : 16px; padding-bottom : 8px; text-decoration: none; color: #ff5800; } nav ul li a{ text-decoration: none; color: #ff5800; } .container{ max-width: 840px; margin-left : auto; margin-right : auto; } div #hello{ background-color: deepskyblue; height: 480px; } .banner{ overflow: hidden; height: 100%; position: relative; } small{ position: relative; left: 16px; bottom: 16px; color : ghostwhite; z-index: 3; } .banner h1{ color : white; background-color: rgba(0,0,0,0.7); padding-top: 16px; padding-bottom : 16px; padding-left : 32px; padding-right : 32px; display: inline-block; position: absolute; bottom: 60px; z-index: 3; } #wrapper h2{ text-align: center; } #course article{ width: 33.33%; padding-top: 16px; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; display: table-cell; } #about{ text-align: center; } .identitas{ color: tomato; font-size: 18px; } #about span{ display: block; } #course,#about,#contact{ padding-top : 40px; padding-bottom: 40px; padding-left : 0px; padding-right: 0px; } button{ background-color: #e7e7e7; color: black; width: 100%; padding: 10px 40px; border-radius: 5px; } footer{ background-color: royalblue; height: 120px; text-align: center; padding-top : 32px; padding-bottom : 32px; padding-left : 0px; padding-right : 0px; color: azure; } </style> <body> <header> <nav> <ul> <li><a href="#hello"> Hello </a></li> <li><a href="#course"> Course </a></li> <li><a href="#about"> About </a></li> <li><a href="#contact"> Contact </a></li> </ul> </nav> </header> <div class="container" id="wrapper"> <div id="hello"> <div class="banner"> <h1>Ngoding Itu Ga sulit</h1> <img src="assets/banner.jpg" alt="Gambar Latar"> <small>*perlu dibiasakan aja</small> </div> </div> <div id="course"> <h2>Course yang telah diselesaikan</h2> <article> <h3>Machine Learning</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis facere aut, at, distinctio nesciunt sequi delectus, quas molestiae nisi accusamus asperiores praesentium aperiam sint qui iusto facilis! Possimus, consectetur earum!</p> </article> <article> <h3>Predictive Analysis</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus impedit quam eveniet. At reprehenderit animi vero, debitis consequatur in quam veritatis, ipsam praesentium, minus perferendis obcaecati? Ratione dolores fugit nam.</p> </article> <article> <h3>Inclusive Design Pattern</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, eos veritatis recusandae, vitae mollitia aspernatur quis nesciunt incidunt culpa explicabo accusamus asperiores reprehenderit, officiis quos deleniti unde illum aut suscipit?</p> </article> </div> <div id="about"> <h2>Tentang Saya</h2> <span class="identitas"><strong>Monica, 1912442</strong></span> <p>Nama panggilan saya adalah Monica, saya lahir di Pontianak pada tanggal 3 November 2001. Sekarang saya bekerja di sentral yamaha di bagian kasir. Sekian dan terima kasih, 19412442_Monica@widyadharma.ac.id, mobile : 0896-9378-1517</p> <h2>Hubungi Saya</h2> <span>19412442_Monica@widyadharma.ac.id</span> <span><span>0896-9378-1517</span></span> <span>Jalan H. Rais A Rahman No.101</span> </div> <div id="contact"> <h2>Kirim Pesan ke Saya</h2> <form method="POST" action="#"> <label for="nama"> Nama <input type="Text" name="nama" id="nama" placeholder="Nama" required> </label> <label for="email"> Email <input type="Email" name="email" id="email" placeholder="Email" required> </label> <label for="message"> Message <textarea name="message" id="message" placeholder="Message" required></textarea> </label> <button type="submit">Kirim</button> </form> </div> </div> <footer> <p>copyright hari ini, sebuah pencapaian kecil</p> </footer> </body> </html>

Related: See More

Material Dashboard Dark Edition

Questions / Comments: