News Website Using Bootstrap
Nama : Jonathan Leonardo Hasiholan Simanjuntak
NRP : 05111940000150
Kelas : Pemrograman Web A 2021
NRP : 05111940000150
Kelas : Pemrograman Web A 2021
Pada pertemuan ketujuh kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website redaksi berita dengan memanfaatkan penggunaan Bootstrap. Setelah website berhasil di susun secara lokal, website yang kita susun tersebut juga akan di hosting-kan. Pada tugas ini, hosting website dilakukan menggunakan Github Pages. Websitenya sendiri dapat diakses lewat link ini.
Berikut adalah tampilan dari hasil websitenya :
- Tampilan Halaman Utama Website
- Tampilan Halaman Contact Us
- Tampilan Pop Up Login Form
Source Code
Untuk source code dari webnya, terdapat empat file source code yang saya gunakan untuk menyusun website tersebut. Dua diantaranya adalah index.html dan contact.html. Pada halaman index.html terdapat list berita yang tersusun kedalam 2 buah image carousel, serta diterapkan juga form login yang dapat diakses dengan mengklik tombol login. Pada halaman contact.html, berisikan form yang dapat digunakan untuk menghubungi admin website dan juga form login yang sudah dijelaskan sebelumnya. Lebih lengkapnya, list file source code yang saya gunakan adalah :
- index.htmlThis 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>News Site</title> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <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> <link rel="stylesheet" href="./src/style.css"> <script src="./src/main.js"></script> <!--head--> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" target="_blank" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine"> <img id="logo" class="img-fluid" src="./img/logo.png"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="ml-auto navbar-nav text-uppercase"> <li class="nav-item active"> <a class="nav-link p-3" href="./index.html">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link p-3" href="./contents/contact.html">Contact us</a> </li> <li class="nav-item" style="padding-top: 5px; margin-left: 50px;"> <button type="button" class="btn btn-info btn-round" data-toggle="modal" data-target="#loginModal"> Login </button> </li> </ul> </div> </div> </nav> </header> <div id="loginModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header border-bottom-0"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <h4 class="text-center text-info">Login User</h4> <div class="form-group"> <label for="username" class="text-info">Username:</label><br> <input type="text" name="username" id="username" class="form-control"> </div> <div class="form-group"> <label for="password" class="text-info">Password:</label><br> <input type="password" name="password" id="password" class="form-control"> </div> <div class="form-group"> <label for="remember-me" class="text-info"><span>Remember Me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br> <input type="submit" name="submit" class="btn btn-info btn-md" value="Submit"> </div> <div id="register-link" class="text-right"> <a href="#" class="text-info">Register Here</a> </div> </div> </div> </div> </div> <!--Container--> <div class="container" style="margin-bottom: -20px;"> <div class="sub-title"> <hr> <h3 class="sub-title-text">Berita Pilihan</h3> <hr> </div> <!--Start code--> <div class="row"> <div class="col-12 pb-5"> <div id="featured" class="carousel slide carousel" data-ride="carousel"> <!--dots navigate--> <ol class="carousel-indicators top-indicator"> <li data-target="#featured" data-slide-to="0" class="active"></li> <li data-target="#featured" data-slide-to="1"></li> <li data-target="#featured" data-slide-to="2"></li> <li data-target="#featured" data-slide-to="3"></li> </ol> <!--carousel inner--> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <!--Start slider news--> <div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1"> <div class="card border-0 rounded-0 text-light overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_left-cover-1 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid w-100" src="https://bootstrap.news/source/img3.jpg" alt="Bootstrap news"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h3 post-title text-white my-1">Premium bootstrap 4 news portal magazine template perfect for news site</h2> </a> <!-- meta title --> <div class="news-meta"> <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Ardo</a></span> <span class="news-date">Oct 18, 2021</span> </div> </div> </div> </div> </div> <!--End slider news--> <!--Start box news--> <div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4"> <div class="row"> <!--news box--> <div class="col-6 pb-1 pt-0 pr-1"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img8.jpg" alt="Bootstrap blog theme"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Lifestyle</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Should you see the Fantastic Beasts sequel?</h2> </a> </div> </div> </div> </div> <!--news box--> <div class="col-6 pb-1 pl-1 pt-0"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img7.jpg" alt="Bootstrap 4 blog template"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Motocross</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Three myths about Florida elections recount</h2> </a> </div> </div> </div> </div> <!--news box--> <div class="col-6 pb-1 pr-1 pt-1"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img6.jpg" alt="Bootstrap 4 news theme"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Fitness</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2> </a> </div> </div> </div> </div> <!--news box--> <div class="col-6 pb-1 pl-1 pt-1"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img5.jpg" alt="Bootstrap 4 news template"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Adventure</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Ditch receipts and four other tips to be a shopper</h2> </a> </div> </div> </div> </div> <!--end news box--> </div> </div> <!--End box news--> </div> </div> <div class="carousel-item"> <div class="row"> <!--Start slider news--> <div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1"> <div class="card border-0 rounded-0 text-light overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_left-cover-1 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid w-100" src="https://bootstrap.news/source/img4.jpg" alt="Bootstrap news wordpress"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h3 post-title text-white my-1">Premium bootstrap 4 news portal magazine template perfect for news site</h2> </a> <!-- meta title --> <div class="news-meta"> <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Ardo</a></span> <span class="news-date">Oct 18, 2021</span> </div> </div> </div> </div> </div> <!--End slider news--> <!--Start box news--> <div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4"> <div class="row"> <!--news box--> <div class="col-6 pb-1 pt-0 pr-1"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img5.jpg" alt="bootstrap 4 wordpress theme"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Lifestyle</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Should you see the Fantastic Beasts sequel?</h2> </a> </div> </div> </div> </div> <!--news box--> <div class="col-6 pb-1 pl-1 pt-0"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img6.jpg" alt="bootstrap news template magazine"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Motocross</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Three myths about Florida elections recount</h2> </a> </div> </div> </div> </div> <!--news box--> <div class="col-6 pb-1 pr-1 pt-1"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img7.jpg" alt="Bootstrap personal blog"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Fitness</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2> </a> </div> </div> </div> </div> <!--news box--> <div class="col-6 pb-1 pl-1 pt-1"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img8.jpg" alt="simple blog bootstrap"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Adventure</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Ditch receipts and four other tips to be a shopper</h2> </a> </div> </div> </div> </div> <!--end news box--> </div> </div> <!--End box news--> </div> </div> </div> <!--end carousel inner--> <!--navigation--> <a class="carousel-control-prev" href="#featured" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#featured" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> <!--end code--> </div> <div class="container" style="margin-bottom: 60px;"> <div class="sub-title"> <hr> <h3 class="sub-title-text">Berita Terbaru</h3> <hr> </div> <!-- Start Code --> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-6 py-0 pl-3 pr-1 featcard"> <div id="featured" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i0.wp.com/makro.id/wp-content/uploads/2021/10/BP-Batam-infrstruktur.jpg?w=650&ssl=1" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="https://makro.id/2021/10/15/bp-batam-paparkan-pengembangan-infrastruktur-di-berbagai-sektor/" class="align-self-end"> <span class="badge">BP Batam</span> <h4 class="card-title">BP Batam Paparkan Pengembangan Infrastruktur di Berbagai Sektor</h4> <p class="textfeat" style="display: none;">MAKRO.ID, BATAM – Badan Pengusahaan Batam (BP) Batam melalui Bagian Hubungan antar Lembaga dan Promosi menggelar kegiatan sosialisasi dengan tema “Pengembangan Infrastruktur Kawasan dan Destinasi Wisata di Batam” di Hotel Neo Green Savana, Bogor,Jawa Barat, Kamis, (14/10/2021).</p> </a> </div> </div> </div> <div class="carousel-item"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i2.wp.com/makro.id/wp-content/uploads/2021/10/ACT-Kepri-Sembako.jpg?w=650&ssl=1" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="https://makro.id/2021/10/15/aksi-cepat-tanggap-salurkan-bahan-pokok-untuk-warga-tpa-punggur/" class="align-self-end"> <span class="badge">Batam</span> <h4 class="card-title">Aksi Cepat Tanggap Salurkan Bahan Pokok untuk Warga TPA Punggur</h4> <p class="textfeat" style="display: none;">MAKRO.ID, BATAM – Aksi Cepat Tanggap (ACT) Kepri menyalurkan bantuan bahan pokok untuk warga di TPA Telaga Punggur, Nongsa, Jumat (15/10/2021).</p> </a> </div> </div> </div> <div class="carousel-item"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i0.wp.com/makro.id/wp-content/uploads/2021/09/WhatsApp-Image-2021-09-13-at-21.58.42.jpeg?resize=768%2C513&ssl=1" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="https://makro.id/2021/10/16/masyarakat-batam-ayo-lawan-covid-19/" class="align-self-end"> <span class="badge">Batam</span> <h4 class="card-title">Masyarakat Batam, Ayo Lawan Covid-19</h4> <p class="textfeat" style="display: none;">MAKRO.ID, BATAM – Wali Kota Batam, Muhammad Rudi, mengajak semua masyarakat Batam terus melawan Covid-19, salah satu caranya yakni dengan tetap menerapkan protokol kesehatan.</p> </a> </div> </div> </div> <div class="carousel-item"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i0.wp.com/makro.id/wp-content/uploads/2021/07/Pemko-Batam-vaksin.jpg?w=650&ssl=1" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="https://makro.id/2021/10/14/vaksinasi-bagi-pelajar-di-batam-dipercepat/" class="align-self-end"> <span class="badge">Batam</span> <h4 class="card-title">Vaksinasi Bagi Pelajar di Batam Dipercepat</h4> <p class="textfeat" style="display: none;">MAKRO.ID, BATAM – Guna menekan laju pertumbuhan Covid-19 serta mendukung proses belajar tatap muka, Pemko Batam akan mempercepat vaksinasi bagi pelajar.</p> </a> </div> </div> </div> <div class="carousel-item"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i2.wp.com/makro.id/wp-content/uploads/2021/10/Pemko-Batam-Pedagang-Batu-Besar.jpg?w=650&ssl=1" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="https://makro.id/2021/10/13/kaveling-untuk-pedagang-batu-besar/" class="align-self-end"> <span class="badge">Batam</span> <h4 class="card-title">Kaveling untuk Pedagang Batu Besar</h4> <p class="textfeat" style="display: none;">MAKRO.ID, BATAM – Pedagang di sepanjang jalan Batu Besar akan segera direlokasi oleh Pemko Batamuntuk melanjutkan proyek pelebaran jalan di Kawasan Nongsa.</p> </a> </div> </div> </div> <div class="carousel-item"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i1.wp.com/makro.id/wp-content/uploads/2021/10/BP-Batam-izin-online.jpg?w=650&ssl=1" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="https://makro.id/2021/10/13/bp-batam-sosialisasikan-perizinan-sektor-transportasi-kepelabuhanan/" class="align-self-end"> <span class="badge">BP Batam</span> <h4 class="card-title">BP Batam Sosialisasikan Perizinan Sektor Transportasi Kepelabuhanan</h4> <p class="textfeat" style="display: none;">MAKRO.ID, BATAM – Badan Pengusahaan (BP) Batam telah resmi meluncurkan Sistem Perizinan Online Terpadu pada akhir September lalu.</p> </a> </div> </div> </div> </div> </div> </div> <div class="col-6 py-0 px-1 d-none d-lg-block"> <div class="row"> <div class="col-6 pb-2 mg-1 "> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i1.wp.com/makro.id/wp-content/uploads/2021/10/BP-Batam-Visa-Wisata.jpg?w=650&ssl=1" alt=""> <div class="card-img-overlay d-flex"> <a href="https://makro.id/2021/10/14/bp-batam-sambut-baik-keputusan-pemerintah-terkait-hal-ini/" class="align-self-end"> <span class="badge">BP Batam</span> <h6 class="card-title">BP Batam Sambut Baik Keputusan Pemerintah Terkait Hal Ini</h6> </a> </div> </div> </div> <div class="col-6 pb-2 mg-2 "> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i0.wp.com/makro.id/wp-content/uploads/2021/10/WhatsApp-Image-2021-10-13-at-13.01.24.jpeg?resize=768%2C512&ssl=1" alt=""> <div class="card-img-overlay d-flex"> <a href="https://makro.id/2021/10/13/kepala-bp-batam-wujudkan-pelabuhan-batu-ampar-berdaya-saing-internasional/" class="align-self-end"> <span class="badge">BP Batam</span> <h6 class="card-title">Kepala BP Batam : Wujudkan Pelabuhan Batu Ampar Berdaya Saing Internasional</h6> </a> </div> </div> </div> <div class="col-6 pb-2 mg-3 "> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i1.wp.com/makro.id/wp-content/uploads/2021/10/BP-Batam-Bimtek.jpg?w=650&ssl=1" alt=""> <div class="card-img-overlay d-flex"> <a href="https://makro.id/2021/10/14/bp-batam-gelar-bimtek-penyusunan-dan-pengukuran-skp/" class="align-self-end"> <span class="badge">BP Batam</span> <h6 class="card-title">BP Batam Gelar Bimtek Penyusunan dan Pengukuran SKP</h6> </a> </div> </div> </div> <div class="col-6 pb-2 mg-4 "> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i2.wp.com/makro.id/wp-content/uploads/2021/10/Pemko-Batam-BPJamsostek.jpg?resize=768%2C512&ssl=1" alt=""> <div class="card-img-overlay d-flex"> <a href="https://makro.id/2021/10/12/pemko-batam-lindungi-pegawai-non-asn/" class="align-self-end"> <span class="badge">Metro</span> <h6 class="card-title">Pemko Batam Lindungi Pegawai Non ASN</h6> </a> </div> </div> </div> </div> </div> </div> </div> <!-- Footer --> <footer> <p>© <span>2021</span> Jonathan Leonardo. All rights reserved.</p> </footer> </body> </html> - contact.htmlThis 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>News Site</title> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <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> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,400,700'> <link rel="stylesheet" href="../src/style.css"> <script src="../src/main.js"></script> <!--head--> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" target="_blank" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine"> <img id="logo" class="img-fluid" src="../img/logo.png"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="ml-auto navbar-nav text-uppercase"> <li class="nav-item"> <a class="nav-link p-3" href="../index.html">Home</a> </li> <li class="nav-item active"> <a class="nav-link p-3" href="./contact.html"><span class="sr-only">(current)</span>Contact us</a> </li> <li class="nav-item" style="padding-top: 5px; margin-left: 50px;"> <button type="button" class="btn btn-info btn-round" data-toggle="modal" data-target="#loginModal"> Login </button> </li> </ul> </div> </div> </nav> </header> <div id="loginModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header border-bottom-0"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <h4 class="text-center text-info">Login User</h4> <div class="form-group"> <label for="username" class="text-info">Username:</label><br> <input type="text" name="username" id="username" class="form-control"> </div> <div class="form-group"> <label for="password" class="text-info">Password:</label><br> <input type="password" name="password" id="password" class="form-control"> </div> <div class="form-group"> <label for="remember-me" class="text-info"><span>Remember Me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br> <input type="submit" name="submit" class="btn btn-info btn-md" value="Submit"> </div> <div id="register-link" class="text-right"> <a href="#" class="text-info">Register Here</a> </div> </div> </div> </div> </div> <div class="container" style="margin-top: 40px; margin-bottom: 60px;"> <div class="row justify-content-md-center"> <div class="col col-md-6"> <h3 style="text-align: center; margin-bottom: 20px;">Contact Us</h3> <p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please feel free to contact us.</p> <form action="" method="clear"> <div class="form-group"> <label for="subject">Your Name</label> <input type="text" class="form-control" id="subject" name="subject" placeholder="Enter your name"> </div> <div class="form-group"> <label for="email">Your email address</label> <input type="text" class="form-control" id="email" name="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="subject">Subject</label> <input type="text" class="form-control" id="subject" name="subject" placeholder="Enter the message subject"> </div> <div class="form-group"> <label for="message">Your message</label> <textarea class="form-control" id="message" name="message" rows="5"></textarea> </div> <button action="" class="btn btn-primary btn-lg btn-block" onclick="alert(`Message Succesfullt Sent`)">Send message!</button> </form> </div> </div> </div> <footer> <p>© <span>2021</span> Jonathan Leonardo. All rights reserved.</p> </footer> </body> </html> - style.cssThis 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
body { width: 1200px; margin-left: auto; margin-right: auto; } .sub-title-text { font-family: Georgia, "Times New Roman", Times, serif; font-weight: bolder; margin-top: 10px; margin-bottom: 10px; } #logo { width: 70px; } .b-0 { bottom: 0; } .bg-shadow { background: rgba(76, 76, 76, 0); background: -webkit-gradient( left top, left bottom, color-stop(0%, rgba(179, 171, 171, 0)), color-stop(49%, rgba(48, 48, 48, 0.37)), color-stop(100%, rgba(19, 19, 19, 0.8)) ); background: linear-gradient( to bottom, rgba(179, 171, 171, 0) 0%, rgba(48, 48, 48, 0.71) 49%, rgba(19, 19, 19, 0.8) 100% ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 ); } .top-indicator { right: 0; top: 1rem; bottom: inherit; left: inherit; margin-right: 1rem; } .overflow { position: relative; overflow: hidden; } .zoom img { transition: all 0.2s linear; } .zoom:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } /* Batas Carousel */ /*HYPER LINK*/ * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } a, a:focus, a:hover { text-decoration: none; color: inherit; } a:hover, .btn { outline: none !important; } /*ROUNDED CORNER*/ /*CATEGORIES BADGE*/ .badge { font-weight: 600; font-size: 13px; color: white; background-color: #289dcc; } /*FEATURED*/ .mg-2, .mg-4 { margin-left: -20px; } .linkfeat { background: rgba(76, 76, 76, 0); background: -moz-linear-gradient( top, rgba(76, 76, 76, 0) 0%, rgba(48, 48, 48, 0) 49%, rgba(19, 19, 19, 1) 100% ); background: -webkit-gradient( left top, left bottom, color-stop(0%, rgba(76, 76, 76, 0)), color-stop(49%, rgba(48, 48, 48, 0)), color-stop(100%, rgba(19, 19, 19, 1)) ); background: -webkit-linear-gradient( top, rgba(76, 76, 76, 0) 0%, rgba(48, 48, 48, 0) 49%, rgba(19, 19, 19, 1) 100% ); background: -o-linear-gradient( top, rgba(76, 76, 76, 0) 0%, rgba(48, 48, 48, 0) 49%, rgba(19, 19, 19, 1) 100% ); background: -ms-linear-gradient( top, rgba(76, 76, 76, 0) 0%, rgba(48, 48, 48, 0) 49%, rgba(19, 19, 19, 1) 100% ); background: linear-gradient( to bottom, rgba(76, 76, 76, 0) 0%, rgba(48, 48, 48, 0) 49%, rgba(19, 19, 19, 1) 100% ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 ); } footer { text-align: center; margin-top: 40px; margin-bottom: 40px; height: 20px; bottom: 0ch; } - main.jsThis 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
$(document).ready(function(){ var clickEvent = false; $('#myCarousel').carousel({ interval: 4000 }).on('click', '.list-group li', function() { clickEvent = true; $('.list-group li').removeClass('active'); $(this).addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.list-group').children().length -1; var current = $('.list-group li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.list-group li').first().addClass('active'); } } clickEvent = false; }); }); $(window).load(function() { var boxheight = $('#myCarousel .carousel-inner').innerHeight(); var itemlength = $('#myCarousel .item').length; var triggerheight = Math.round(boxheight/itemlength+1); $('#myCarousel .list-group-item').outerHeight(triggerheight); });
Sekian pengerjaan tugas yang telah saya lakukan. Mohon maaf apabila terdapat kesalahan atau kekurangan pada pekerjaan saya. Terima kasih atas perhatiannya.
Komentar
Posting Komentar