Setelah selesai membuat Navbar dan Content yang berisi gambar Slider Responsive, sekarang kalian bisa menambahkan Card dan Menampilkan Modal dibawah Slider Responsive kalian.
Jika kalian belum mengetahui cara membuat Navbar dan Slider Responsive kalian bisa copy dan cari dengan judul sebagai berikut :
- Navbar ( Cara Membuat Navbar dengan menggunakan Bootstrap dan HTML )
- Slider Responsive ( Cara Membuat Gambar Slider Responsive dengan CSS dan HTML )
Jadi pada kali ini kita akan membuat website lengkap yang sederhana dengan menambahkan card dibawah nya Slider Responsive.
Sebelumnya jangan lupa untuk download Bootstrap karena untuk CSS kita perlu bantuan dari Bootstrap, atau kalian bisa lihat cara install Bootstrap pada judul no.1 di atas.
Jangan lupa untuk memasukkan gambar di folder assets .Untuk isi gambar kalian tinggal mengganti gambar pada <img src="assets/gambarkalian" class="card-img-top" alt="gambar">. Untuk Source Code Card + Modal sendiri kalian bisa lihat dibawah ini :
<div class="row"> <div class="col-sm-12"> <div class="card-deck"> <div class="card"> <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" class="card-img-top" alt="gambar"> <div class="card-body"> <h5 class="center">Belajar HTML Di Pramedia</h5> <!-- button --> <button type="button" class="btn btn-primary" class="left" data-toggle="modal" data-target="#html"> Tampil </button> <!-- endbutton --> <!-- Modal --> <div class="modal fade" id="html" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">From HTML</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Belajar HTML <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum hasbeen the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- end modal --> <h7 class="right"> 30 part </h7> </div> </div> </div> </div>
Source Code diatas adalah Code untuk membuat sebuah Card dengan menambahkan tombol Button yang bisa menampilkan sebuah modal, sehingga ketika kita klik Button tersebut nantinya akan muncul sebuah kalimat yang berasal dari <div class="modal-body">, berikut contoh source Code di dalam Button (Tampil):
<div class="modal-body">
Belajar JQUERY <br>
"if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text."
</div>Dan untuk keseluruhan Source Code untuk Navbar, Slider Responsive, dan Card + Modal tersebut sebagai berikut :
index.html
<!DOCTYPE html> <html> <head> <title>Beli Paketnya kakak</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <style type="text/css"> .left { text-align: left;} .right { text-align: right;} .center { text-align: center;} .justify { text-align: justify;} </style> </head> <body> <!-- navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="assets/pramedia.png" class="image" border="0" width="30" height="30"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="paketbeli.html">beli paket</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">CSS</a> <a class="dropdown-item" href="#">PHP</a> <a class="dropdown-item" href="#">MYSQL</a> <a class="dropdown-item" href="#">JAVASCRIPT</a> <a class="dropdown-item" href="#">JQUERY</a> </div> </li> </ul> </div> </nav> <!-- navbar --> <!-- Menu --> <body> <div class="paul-slider"> <div class="isi-slider"> <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gambar 1"> <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Gambar 2"> <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" alt="Gambar 3"> </div> </div> <!-- Menu --> <!-- card --> <div class="row"> <div class="col-sm-12"> <div class="card-deck"> <div class="card"> <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" class="card-img-top" alt="gambar"> <div class="card-body"> <h5 class="center">Belajar HTML Di Pramedia</h5> <!-- button --> <button type="button" class="btn btn-primary" class="left" data-toggle="modal" data-target="#html"> Tampil </button> <!-- endbutton --> <!-- Modal --> <div class="modal fade" id="html" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">From HTML</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Belajar HTML <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum hasbeen the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- end modal --> <h7 class="right"> 30 part </h7> </div> </div> <!-- card 2 --> <div class="card"> <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" class="card-img-top" alt="gambar"> <div class="card-body"> <h5 class="center">Belajar CSS di Pramedia</h5> <!-- button --> <button type="button" class="btn btn-primary" class="left" data-toggle="modal" data-target="#css"> Tampil </button> <!-- endbutton --> <!-- Modal --> <div class="modal fade" id="css" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">From CSS</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Belajar CSS <br> "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed tousing 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)." </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- end modal --> <h7 class="right"> 30 part </h7> </div> </div> <!-- end card --> <!-- Card 3 --> <div class="card"> <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" class="card-img-top" alt="gambar"> <div class="card-body"> <h5 class="center">Belajar PHP di Pramedia</h5> <!-- button --> <button type="button" class="btn btn-primary" class="left" data-toggle="modal" data-target="#php"> Tampil </button> <!-- endbutton --> <!-- Modal --> <div class="modal fade" id="php" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">From PHP</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Belajar PHP <br> "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source." </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- end modal --> <h7 class="right"> 30 part </h7> </div> </div> <!-- end card 3 --> </div> </div> </div> <!-- end card 1 --> <!-- card 2 --> <br> <div class="row"> <div class="col-sm-12"> <div class="card-deck"> <!-- card 1 --> <div class="card"> <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" class="card-img-top" alt="gambar"> <div class="card-body"> <h5 class="center">Belajar MYSQL di Pramedia</h5> <!-- button --> <button type="button" class="btn btn-primary" class="left" data-toggle="modal" data-target="#sql"> Tampil </button> <!-- endbutton --> <!-- Modal --> <div class="modal fade" id="sql" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">From MYSQL</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Belajar MYSQL <br> "Lorem Ipsum comes from sections 1.10.32 and1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance." </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- end modal --> <h7 class="right"> 30 part </h7> </div> </div> <!-- end card 3 --> <!-- Card 4 --> <div class="card"> <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" class="card-img-top" alt="gambar"> <div class="card-body"> <h5 class="center">Belajar javascript di Pramedia</h5> <!-- button --> <button type="button" class="btn btn-primary" class="left" data-toggle="modal" data-target="#java"> Tampil </button> <!-- endbutton --> <!-- Modal --> <div class="modal fade" id="java" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">From JAVASCRIPT</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Belajar JAVASCRIPT <br> "here are many variations of passagesof Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable." </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- end modal --> <h7 class="right"> 30 part </h7> </div> </div> <!-- end card 4 --> <!-- card 5 --> <div class="card"> <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" class="card-img-top" alt="gambar"> <div class="card-body"> <h5 class="center">Belajar Jquery di Pramedia</h5> <!-- button --> <button type="button" class="btn btn-primary" class="left" data-toggle="modal" data-target="#query"> Tampil </button> <!-- endbutton --> <!-- Modal --> <div class="modal fade" id="query" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">From JQUERY</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Belajar JQUERY <br> "if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text." </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- end modal --> <h7 class="right"> 30 part </h7> </div> </div> <!-- end card 5 --> </div> </div> </div> <!-- end card 2 --> </div> </body> </html>
Jadi pada kali ini kalian sudah membuat sebuah website yang sederhana namun keren. Untuk gambar Card kalian bisa ganti dengan gambar informasi atau promo untuk website kalian agar lebih menarik
