Home » BOOTSTRAP » CSS » HTML » Membuat tampilan WEB Bootstrap 4. Ayo Belajar Bootstrap..!!!

Membuat tampilan WEB Bootstrap 4. Ayo Belajar Bootstrap..!!!

Ditulis Komentar
Asalamualaikum Wr Wb..
Salam Sejahterah untuk kita semua. Semoga Allah SWT senantiasa memberi Rahmad dan Hidayahnya Kepada kita dalam menjalankan aktifitas sehari-hari Amin.. :)

Selamat malam buat Sahabat K0deTani dimanapun kalian berada.. :)

Okayyy.. langsung aja langkah awal buat file bernama Index.html, lalu pastekan code berikut di dalamnya:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <!-- Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <title>Mencoba Bootstrap4 Beta</title>
  8.     <link rel="icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw9Gj8ouLyDAbgYqW9ug9JN00vZ0RboIyvRp7HU6SffqLlW9tWBTHgW73sSz0Pg9IE4SmK_6C2WVGe0vHMOASU0GcVnlq8gp4iDSE8KFhEoMnibsB-VLdkdKf4G264vpKGgzNGqtuJ-0xr/s120-pf/png.jpg" type="image/png" sizes="144x144">
  9.     <!-- Bootstrap CSS -->
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
  11.         crossorigin="anonymous">
  12.     <link rel="stylesheet" href="css/k0detani.css">
  13. </head>
  14. <body>
  15.     <nav class="navbar navbar-expand-lg navbar-light bg-light">
  16.         <div class="container">
  17.         
  18.         <a class="navbar-brand" href="index.html"><img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top rounded-circle"
  19.             alt=""> K0de Tani</a>
  20.         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
  21.             aria-expanded="false" aria-label="Toggle navigation">
  22.         <span class="navbar-toggler-icon"></span>
  23.         </button>
  24.         <div class="collapse navbar-collapse" id="navbarSupportedContent">
  25.             <ul class="navbar-nav mr-auto">
  26.                 <li class="nav-item active">
  27.                     <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
  28.                 </li>
  29.                 <li class="nav-item">
  30.                     <a class="nav-link" href="about.html">About</a>
  31.                 </li>
  32.                 <li class="nav-item">
  33.                     <a class="nav-link" href="contact.html">Contact</a>
  34.                 </li>
  35.             </ul>
  36.             <form class="form-inline my-2 my-lg-0">
  37.                 <input class="form-control mr-sm-2" type="text" placeholder="Kata Kunci" aria-label="Search">
  38.                 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cari</button>
  39.             </form>
  40.         </div>
  41.         </div>
  42.     </nav>
  43.     <header>
  44.         <div class="jumbotron jumbotron-fluid bg-k0detani text-white">
  45.             <div class="container">
  46.                 <div class="row">
  47.                     <div class="col">
  48.                         <h1>Berbagi Itu Indah</h1>
  49.                         <p class="lead">Belajar Pemrograman Juga Belajar Berbagi</p>
  50.                     </div>
  51.                 </div>
  52.            </div>
  53.         </div>
  54.     </header>
  55.     <div class="container">
  56.         <div class="row">
  57.             <div class="col">
  58.                 
  59.                 <div class="alert alert-info" role="alert">
  60.                     <h4 class="alert-heading">Mencoba Belajar Bootstrap4!</h4>
  61.                     <p>Ini adalah contoh percobaan penggunaan Bootstrap4. Saat ini bootstrap masih versi 4.0.0-beta. Saya tidak menyarankan menggunakan versi ini pada website production,
  62.                         karena mungkin masih terdapat banyak bugs. Jadi, kita tunggu saja yang versi stabil.
  63.                     </p>
  64.                     <hr>
  65.                     <p class="mb-0">Selamat belajar bootstrap...</p>
  66.                 </div>
  67.                 
  68.             </div>
  69.         </div>
  70.     </div>
  71.     <br>
  72.     <article class="card-post">
  73.         <div class="container">
  74.             <div class="row">
  75.                 <div class="col">
  76.                     <div class="card-post card-deck">
  77.                     <div class="card">
  78.                         <a class="card-post-link text-dark" href="https://k0detani.blogspot.com/2018/10/source-code-animasi-loading-menggunakan.html">
  79.                         <img class="card-img-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPWUvBP7mBVDAg9UwR5ZgcUhD3ytur-gqJeL0BJaTT8TWmxeAAjRaSoqWFENLOWgJs8B8JEW5Vfzwa6Z7hI7p2KpRwTfxpyli7GKKhlDLaydWU_A6BswwdEZUvW50ceifAMUJyaQnfzDU/s1600/loading.png" alt="Card image cap">
  80.                         <div class="card-body">
  81.                             <h4 class="card-title">Source Code Animasi Loading Menggunakan HTML dan CSS</h4>
  82.                         </div>
  83.                         </a>
  84.                     </div>
  85.                     <div class="card">
  86.                         <a class="card-post-link text-dark" href="https://k0detani.blogspot.com/2018/10/tutorial-cara-membuat-web-statis.html">
  87.                         <img class="card-img-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzr38oEp-RIce_RSMU5017mAQrN_lIteNUypj98IGTPeFWXwEAGD5XoFRVO8194SVXYlncCCiMjcnYAZ4JeZY79RBPeBa1-ZyqK0Vw5aTmfeVGc9ipVg6XV2pAzkL7U1OuKNXt7zXhOQ4/s1600/kode+tani.jpg" alt="Card image cap">
  88.                         <div class="card-body">
  89.                             <h4 class="card-title">Tutorial Cara Membuat Web Statis Sederhana Dengan HTML</h4>
  90.                         </div>
  91.                         </a>
  92.                     </div>
  93.                     <div class="card">
  94.                         <a class="card-post-link text-dark" href="https://k0detani.blogspot.com/2018/10/tutorial-php-mysql-membuat-login-dan.html">
  95.                         <img class="card-img-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmFsWfLjpPAWbyAfGc_3R2YlOoTt2ql0ghG_zVwjm-AuV-WwE6NVwQG7JfDa-VR7kJalty32YsExiGKc8V5ofkX7VLsY9BknALTderwcew1H9zqwGaztHLQTSvmGrsUzpPw9bQS-b34wU/s640/php-login-register.jpg" alt="Card image cap">
  96.                         <div class="card-body">
  97.                             <h4 class="card-title">Tutorial PHP & MySQL: Membuat Login dan Register (dengan Bootstrap 4)</h4>
  98.                         </div>
  99.                         </a>
  100.                     </div>
  101.                     </div>
  102.                     <div class="w-100"></div>
  103.                     <div class="card-post card-deck">
  104.                     <div class="card">
  105.                         <a class="card-post-link text-dark" href="https://k0detani.blogspot.com/2018/10/pada-tutorial-sebelumnya-kita-sudah.html">
  106.                         <img class="card-img-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikMtlR8d4PQ8nKzoeFOeKX8O4BYZVLcr0EtnzdlGO6ZpIibS1_YbguBzUsLyuoe4mvFz55bgE7chqLHN7GU-_nCriFufwp4bxdOJgfgK45SjoCqjO063E7CO-bAxTwcZk1do1r21VAq9gg/s640/lokasi.png" alt="Card image cap">
  107.                         <div class="card-body">
  108.                             <h4 class="card-title">Aplikasi GIS Pemetaan Wisata Menggunakan PHP dean MYSQL Berbasis WEB</h4>
  109.                         </div>
  110.                         </a>
  111.                     </div>
  112.                     <div class="card">
  113.                         <a class="card-post-link text-dark" href="https://k0detani.blogspot.com/2018/10/membuat-tombol-button-3D-menarik.html">
  114.                         <img class="card-img-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUA9zSgMYk9DKEnRapWCtVpTPYcRpLrYftBK1aEEj2SCmFfx6lEixlCm4wk-CgIqWj1g5avmmjrZdhrpFwuY_UjQEnlbixwrmBvfdS6M-1ypFjXDGH4RQmYIQyxIr9DR-cEccRjtF-YxA/s640/A.png" alt="Card image cap">
  115.                         <div class="card-body">
  116.                             <h4 class="card-title">Membuat Tombol BUTTON 3D Menarik Menggunakan HTML dan CSS</h4>
  117.                         </div>
  118.                         </a>
  119.                     </div>
  120.                     <div class="card">
  121.                         <a class="card-post-link text-dark" href="https://k0detani.blogspot.com/2018/10/membuat-animasi-menggunakan-html-dan-css.html">
  122.                         <img class="card-img-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB1m2E8f0kq9EWXApIaezGSYyuqmdN13_HOT0ywL1w4Qo0lsdo0gpLYK-Gy3a2DC70mpQqocsyd_yq0wkX37H6R5Bcec8L1B6lgdYHkHV0NrJOTcFKjr7RWLXVzQPHUqGLXAC01CgkU1E/s640/a.gif.mp4" alt="Card image cap">
  123.                         <div class="card-body">
  124.                             <h4 class="card-title">Membuat Animasi Menggunakan HTML dan CSS</h4>
  125.                         </div>
  126.                         </a>
  127.                     </div>
  128.                 </div>
  129.                 </div>
  130.             </div>
  131.             </div>
  132.         </div>
  133.     </article>
  134.     <br>
  135.     <div class="container">
  136.         <nav aria-label="Page navigation example">
  137.             <ul class="pagination">
  138.                 <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  139.                 <li class="page-item"><a class="page-link" href="#">1</a></li>
  140.                 <li class="page-item"><a class="page-link" href="#">2</a></li>
  141.                 <li class="page-item"><a class="page-link" href="#">3</a></li>
  142.                 <li class="page-item"><a class="page-link" href="#">Next</a></li>
  143.             </ul>
  144.         </nav>
  145.     </div>
  146.     <br>
  147.     <footer class="border border-bottom-0 border-left-0 border-right-0">
  148.         <div class="container pt-3 pb-3 pt-md-5 pb-md-5">
  149.             <div class="row">
  150.                 <div class="col">
  151.                     <ul class="nav">
  152.                         <li class="nav-item">
  153.                             <a class="nav-link" href="index.html">Home</a>
  154.                         </li>
  155.                         <li class="nav-item">
  156.                             <a class="nav-link" href="https://member.idwebhost.com/aff.php?aff=7137">Hosting</a>
  157.                         </li>
  158.                         <li class="nav-item">
  159.                             <a class="nav-link" href="https://zm4.bz/3M8RbOlW">Email</a>
  160.                         </li>
  161.                         <li class="nav-item">
  162.                             <a class="nav-link" href="about.html">About</a>
  163.                         </li>
  164.                         <li class="nav-item">
  165.                             <a class="nav-link" href="contact.html">Contact</a>
  166.                         </li>
  167.                     </ul>
  168.                 </div>
  169.             </div>
  170.         </div>
  171.     </footer>
  172.     <!-- Optional JavaScript -->
  173.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  174.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
  175.         crossorigin="anonymous"></script>
  176.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
  177.         crossorigin="anonymous"></script>
  178.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
  179.         crossorigin="anonymous"></script>
  180. </body>
  181. </html>

Selanjuatnya adalah membuat membuat form about.
buat file bernama about.html. lalu paste kan kode berikut didalamnya :

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <!-- Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <title>Mencoba Bootstrap4 Beta</title>
  8.     <link rel="icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw9Gj8ouLyDAbgYqW9ug9JN00vZ0RboIyvRp7HU6SffqLlW9tWBTHgW73sSz0Pg9IE4SmK_6C2WVGe0vHMOASU0GcVnlq8gp4iDSE8KFhEoMnibsB-VLdkdKf4G264vpKGgzNGqtuJ-0xr/s120-pf/png.jpg" type="image/png" sizes="144x144">
  9.     <!-- Bootstrap CSS -->
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
  11.         crossorigin="anonymous">
  12.     <link rel="stylesheet" href="css/k0detani.css">
  13. </head>
  14. <body>
  15.     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  16.         <div class="container">
  17.             <a class="navbar-brand" href="index.html"><img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top rounded-circle"
  18.             alt=""> K0de Tani</a>
  19.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
  20.                 aria-expanded="false" aria-label="Toggle navigation">
  21.         <span class="navbar-toggler-icon"></span>
  22.         </button>
  23.             <div class="collapse navbar-collapse" id="navbarSupportedContent">
  24.                 <ul class="navbar-nav mr-auto">
  25.                     <li class="nav-item">
  26.                         <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
  27.                     </li>
  28.                     <li class="nav-item">
  29.                         <a class="nav-link active" href="about.html">About</a>
  30.                     </li>
  31.                     <li class="nav-item">
  32.                         <a class="nav-link" href="contact.html">Contact</a>
  33.                     </li>
  34.                 </ul>
  35.                 <form class="form-inline my-2 my-lg-0">
  36.                     <input class="form-control mr-sm-2" type="text" placeholder="Kata Kunci" aria-label="Search">
  37.                     <button class="btn btn-primary my-2 my-sm-0" type="submit">Cari</button>
  38.                 </form>
  39.             </div>
  40.         </div>
  41.     </nav>
  42.     <header>
  43.         <div class="jumbotron jumbotron-fluid bg-success text-white">
  44.             <div class="container">
  45.                 <div class="row">
  46.                     <div class="col">
  47.                         <h1>Berbagi Itu Indah</h1>
  48.                         <p class="lead">Belajar Pemrograman Juga Belajar Berbagi</p>
  49.                     </div>
  50.                 </div>
  51.             </div>
  52.         </div>
  53.     </header>
  54.     <article>
  55.         <div class="container">
  56.             <div class="row">
  57.                 <div class="col-sm-12 col-lg-8 mb-5">
  58.                      <div class="card">
  59.                         <div class="card-body">
  60.                             <h2>K0de Tani</h2>
  61.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec mollis lacus, id ornare lacus. Donec diam tellus,
  62.                             feugiat ut consequat sit amet, pellentesque vitae ipsum. In semper sollicitudin erat in vehicula. Nullam
  63.                             eleifend justo ac ipsum posuere, eget sodales ex pharetra. Etiam ut neque sit amet ex tincidunt aliquet id
  64.                             ut sapien. Aenean quis tincidunt diam. In quis velit in tellus vehicula dapibus in aliquam ipsum. Maecenas
  65.                             id lorem ac augue imperdiet mattis nec ut nibh. Suspendisse potenti. Duis felis massa, sodales vitae suscipit
  66.                             quis, gravida sit amet risus. Ut dictum molestie venenatis.</p>
  67.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec mollis lacus, id ornare lacus. Donec diam tellus,
  68.                             feugiat ut consequat sit amet, pellentesque vitae ipsum. In semper sollicitudin erat in vehicula. Nullam
  69.                             eleifend justo ac ipsum posuere, eget sodales ex pharetra. Etiam ut neque sit amet ex tincidunt aliquet id
  70.                             ut sapien. Aenean quis tincidunt diam. In quis velit in tellus vehicula dapibus in aliquam ipsum. Maecenas
  71.                             id lorem ac augue imperdiet mattis nec ut nibh. Suspendisse potenti. Duis felis massa, sodales vitae suscipit
  72.                             quis, gravida sit amet risus. Ut dictum molestie venenatis.</p>
  73.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec mollis lacus, id ornare lacus. Donec diam tellus,
  74.                             feugiat ut consequat sit amet, pellentesque vitae ipsum. In semper sollicitudin erat in vehicula. Nullam
  75.                             eleifend justo ac ipsum posuere, eget sodales ex pharetra. Etiam ut neque sit amet ex tincidunt aliquet id
  76.                             ut sapien. Aenean quis tincidunt diam. In quis velit in tellus vehicula dapibus in aliquam ipsum. Maecenas
  77.                             id lorem ac augue imperdiet mattis nec ut nibh. Suspendisse potenti. Duis felis massa, sodales vitae suscipit
  78.                             quis, gravida sit amet risus. Ut dictum molestie venenatis.</p>
  79.                         </div>
  80.                     </div>
  81.                 </div>
  82.                 <div class="col-sm-12 col-lg-4">
  83.                     
  84.                     <div class="widget">
  85.                         <!-- <h4 class="widget-title">Newsletter (Beta)</h4> -->
  86.                         <div class="widget-content">
  87.                             <!-- <script type="text/javascript" src="https://static.mailerlite.com/data/webforms/385614/c8d3m1.js?v4"></script> -->
  88.                             <script type="text/javascript">
  89. var script_tag = document.createElement('script');
  90.                                 script_tag.setAttribute("type", "text/javascript");
  91.                                 script_tag.setAttribute("src", "//static.mailerlite.com/js/w/webforms.min.js?v3772b61f1ec61c541c401d4eadfdd02f");
  92.                                 document.getElementsByTagName("head")[0].appendChild(script_tag);
  93.                             </script>
  94.                         </div>
  95.                     </div>
  96.                     <div class="widget text-center">
  97.                         <a href="https://k0detani.blogspot.com/" target="blank">
  98.                             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw9Gj8ouLyDAbgYqW9ug9JN00vZ0RboIyvRp7HU6SffqLlW9tWBTHgW73sSz0Pg9IE4SmK_6C2WVGe0vHMOASU0GcVnlq8gp4iDSE8KFhEoMnibsB-VLdkdKf4G264vpKGgzNGqtuJ-0xr/s120-pf/png.jpg" />
  99.                         </a>
  100.                     </div>
  101.                 </div>
  102.             </div>
  103.         </div>
  104.     </article>
  105.     <br>
  106.     <br>
  107.     <footer class="border border-bottom-0 border-left-0 border-right-0">
  108.         <div class="container pt-3 pb-3 pt-md-5 pb-md-5">
  109.             <div class="row">
  110.                 <div class="col">
  111.                     <ul class="nav">
  112.                         <li class="nav-item">
  113.                             <a class="nav-link" href="index.html">Home</a>
  114.                         </li>
  115.                         <li class="nav-item">
  116.                             <a class="nav-link" href="https://member.idwebhost.com/aff.php?aff=7137">Hosting</a>
  117.                         </li>
  118.                         <li class="nav-item">
  119.                             <a class="nav-link" href="https://zm4.bz/3M8RbOlW">Email</a>
  120.                         </li>
  121.                         <li class="nav-item">
  122.                             <a class="nav-link" href="about.html">About</a>
  123.                         </li>
  124.                         <li class="nav-item">
  125.                             <a class="nav-link" href="contact.html">Contact</a>
  126.                         </li>
  127.                     </ul>
  128.                 </div>
  129.             </div>
  130.         </div>
  131.     </footer>
  132.     <!-- Optional JavaScript -->
  133.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  134.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
  135.         crossorigin="anonymous"></script>
  136.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
  137.         crossorigin="anonymous"></script>
  138.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
  139.         crossorigin="anonymous"></script>
  140. </body>
  141. </html>

Selanjutnya Membuat Form contact.
buat file baru dengan nama contact.html. lalu pastekan code berikut didalamnya :

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <!-- Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <title>Mencoba Bootstrap4 Beta</title>
  8.     <link rel="icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw9Gj8ouLyDAbgYqW9ug9JN00vZ0RboIyvRp7HU6SffqLlW9tWBTHgW73sSz0Pg9IE4SmK_6C2WVGe0vHMOASU0GcVnlq8gp4iDSE8KFhEoMnibsB-VLdkdKf4G264vpKGgzNGqtuJ-0xr/s120-pf/png.jpg" type="image/png" sizes="144x144">
  9.     <!-- Bootstrap CSS -->
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
  11.         crossorigin="anonymous">
  12.     <link rel="stylesheet" href="css/k0detani.css">
  13. </head>
  14. <body>
  15.     <nav class="navbar navbar-expand-lg navbar-dark bg-warning">
  16.         <div class="container">
  17.             <a class="navbar-brand" href="index.html"><img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top rounded-circle"
  18.             alt=""> K0de Tani</a>
  19.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
  20.                 aria-expanded="false" aria-label="Toggle navigation">
  21.         <span class="navbar-toggler-icon"></span>
  22.         </button>
  23.             <div class="collapse navbar-collapse" id="navbarSupportedContent">
  24.                 <ul class="navbar-nav mr-auto">
  25.                     <li class="nav-item">
  26.                         <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
  27.                     </li>
  28.                     <li class="nav-item">
  29.                         <a class="nav-link" href="about.html">About</a>
  30.                     </li>
  31.                     <li class="nav-item active">
  32.                         <a class="nav-link" href="contact.html">Contact</a>
  33.                     </li>
  34.                 </ul>
  35.                 <form class="form-inline my-2 my-lg-0">
  36.                     <input class="form-control mr-sm-2" type="text" placeholder="Kata Kunci" aria-label="Search">
  37.                     <button class="btn btn-success my-2 my-sm-0" type="submit">Cari</button>
  38.                 </form>
  39.             </div>
  40.         </div>
  41.     </nav>
  42.     <header>
  43.         <div class="jumbotron jumbotron-fluid bg-danger text-white">
  44.             <div class="container">
  45.                 <div class="row">
  46.                     <div class="col">
  47.                         <h1>Berbagi Itu Indah</h1>
  48.                         <p class="lead">Belajar Pemrograman Juga Belajar Berbagi</p>
  49.                     </div>
  50.                 </div>
  51.             </div>
  52.         </div>
  53.     </header>
  54.     <article>
  55.         <div class="container">
  56.             <div class="row">
  57.                 <div class="col-sm-12 col-lg-8 mb-5">
  58.                     <div class="card">
  59.                         <div class="card-body">
  60.                             <div class="alert alert-info" role="alert">
  61.                                 Punya saran, pertanyaan, masukan, kritik, atau menemukan bugs di website ini?
  62.                             </div>
  63.                             
  64.                             <form>
  65.                                 <div class="form-group">
  66.                                     <label for="email">Email address</label>
  67.                                     <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
  68.                                     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  69.                                 </div>
  70.                                 <div class="form-group">
  71.                                     <label for="nama">Nama</label>
  72.                                     <input type="text" class="form-control" id="nama" placeholder="Nama Kamu">
  73.                                 </div>
  74.                                 
  75.                                 <div class="form-check">
  76.                                     <label class="form-check-label">
  77.                                     <input type="checkbox" class="form-check-input">
  78.                                     Berlangganan Newsletter
  79.                                     </label>
  80.                                 </div>
  81.                                 <div class="form-group">
  82.                                     <label for="exampleInputPassword1">Pesan</label>
  83.                                     <textarea class="form-control" rows="5" id="exampleInputPassword1"></textarea>
  84.                                 </div>
  85.                                 <button type="submit" class="btn btn-primary">Kirim</button>
  86.                             </form>
  87.                         
  88.                         </div>
  89.                     </div>
  90.                 </div>
  91.                 <div class="col-sm-12 col-lg-4">
  92.                     <div class="widget text-center">
  93.                         <a href="https://k0detani.blogspot.com/" target="blank">
  94.                             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw9Gj8ouLyDAbgYqW9ug9JN00vZ0RboIyvRp7HU6SffqLlW9tWBTHgW73sSz0Pg9IE4SmK_6C2WVGe0vHMOASU0GcVnlq8gp4iDSE8KFhEoMnibsB-VLdkdKf4G264vpKGgzNGqtuJ-0xr/s120-pf/png.jpg" />
  95.                         </a>
  96.                     </div>
  97.                     <div class="widget text-center">
  98.                         <a href="https://k0detani.blogspot.com/" target="blank">
  99.                             <img src="img/unixstickers-animated.gif" />
  100.                         </a>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.         </div>
  105.     </article>
  106.     <br>
  107.     <br>
  108.     
  109.     <footer class="border border-bottom-0 border-left-0 border-right-0">
  110.         <div class="container pt-3 pb-3 pt-md-5 pb-md-5">
  111.             <div class="row">
  112.                 <div class="col">
  113.                     <ul class="nav">
  114.                         <li class="nav-item">
  115.                             <a class="nav-link" href="index.html">Home</a>
  116.                         </li>
  117.                         <li class="nav-item">
  118.                             <a class="nav-link" href="https://member.idwebhost.com/aff.php?aff=7137">Hosting</a>
  119.                         </li>
  120.                         <li class="nav-item">
  121.                             <a class="nav-link" href="https://zm4.bz/3M8RbOlW">Email</a>
  122.                         </li>
  123.                         <li class="nav-item">
  124.                             <a class="nav-link" href="about.html">About</a>
  125.                         </li>
  126.                         <li class="nav-item">
  127.                             <a class="nav-link" href="contact.html">Contact</a>
  128.                         </li>
  129.                     </ul>
  130.                 </div>
  131.             </div>
  132.         </div>
  133.     </footer>
  134.     <!-- Optional JavaScript -->
  135.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  136.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
  137.         crossorigin="anonymous"></script>
  138.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
  139.         crossorigin="anonymous"></script>
  140.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
  141.         crossorigin="anonymous"></script>
  142. </body>
  143. </html>


selanjutnya adalah memmbuat file css untuk mempercantik tampilan web nya.
buat file baru beri nama k0detani.css. tergantung kalian sih mau kasih nama ap, lalu pastekan code berikut didalamnya :

  1. .bg-k0detani {
  2.     background: #008080;
  3. }
  4. .card-post.card-deck .card {
  5.     margin-bottom: 1.5em !important;
  6. }
  7. .card-post-link, .card-post-link:hover {
  8.     text-decoration: none;
  9. }
  10. .widget {
  11.     margin-bottom: 1.5em !important;
  12. }

setelah itu simpan, lalu jalankan, maka hasilnya menjadi seperti ini :

















Untuk source code lengkap silahkan Download Disini

Bebas Dikembangin sesuka mu :)

More posts

Belum Ada Komentar

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>