Tugas 6 PWEB B

Membuat Form Login dan Contact Us Menggunakan Bootstrap

Nama : Andika Nugrahanto
NRP : 05111940000031
Kelas : PWEB - B

Link deployment: https://anran31.github.io/PWEB-LatihanBootstrap/

 Link source code:  https://github.com/Anran31/PWEB-LatihanBootstrap

Tampilan

 

 

  Source Code

<!DOCTYPE html>
<html lang="en" class="h-100">
<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>Audah</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="p-3 bg-dark text-white mb-auto">
<div class="container-fluid">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="./index.html"
class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<img src="img/logo.png" class="bi me-2" width="50" height="32" role="img"
aria-label="Bootstrap"></img>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="./index.html" class="nav-link px-2 text-secondary">Home</a></li>
<li><a href="#" class="nav-link px-2 text-white">Products</a></li>
<li><a href="./contact.html" class="nav-link px-2 text-white">Contact Us</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control form-control-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button onclick="window.location.href='./login.html';" type="button"
class="btn btn-outline-light me-2">Login</button>
<button type="button" onclick="window.location.href='./register.html';"
class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<main class="px-3 mx-auto" style="max-width:42em">
<h1>Lorem Ipsum</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint omnis aliquam similique
obcaecati quisquam veritatis veniam sunt harum! Iure vitae in minima natus dolore voluptas aliquid vel,
non obcaecati repellat.
Quibusdam assumenda, enim et ipsum aliquid rem distinctio reiciendis minus exercitationem ullam harum
voluptatibus inventore velit, dolores vero. Qui ipsum doloribus, esse impedit dignissimos id est
quisquam dolores vitae libero.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white text-dark">Learn more</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>powered by <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
view raw 1 index.html hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en" class="h-100">
<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>Audah</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="p-3 bg-dark text-white mb-auto">
<div class="container-fluid">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="./index.html"
class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<img src="img/logo.png" class="bi me-2" width="50" height="32" role="img"
aria-label="Bootstrap"></img>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="./index.html" class="nav-link px-2 text-white">Home</a></li>
<li><a href="#" class="nav-link px-2 text-white">Products</a></li>
<li><a href="./contact.html" class="nav-link px-2 text-white">Contact Us</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control form-control-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button onclick="window.location.href='./login.html';" type="button"
class="btn btn-outline-light me-2">Login</button>
<button type="button" onclick="window.location.href='./register.html';"
class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<main class="p-3 mx-auto h-50 w-100" style="max-width: 330px;">
<form>
<h1 class="h3 mb-3 fw-normal">Login</h1>
<div class="form-floating text-dark my-1">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating text-dark my-1">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Login</button>
</form>
<p class="text-secondary mt-3">Don't have an account? <a class="text-white" href="./register.html">Sign
Up</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>powered by <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
view raw 2 login.html hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en" class="h-100">
<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>Audah</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="p-3 bg-dark text-white mb-auto">
<div class="container-fluid">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="./index.html"
class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<img src="img/logo.png" class="bi me-2" width="50" height="32" role="img"
aria-label="Bootstrap"></img>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="./index.html" class="nav-link px-2 text-white">Home</a></li>
<li><a href="#" class="nav-link px-2 text-white">Products</a></li>
<li><a href="./contact.html" class="nav-link px-2 text-white">Contact Us</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control form-control-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button onclick="window.location.href='./login.html';" type="button"
class="btn btn-outline-light me-2">Login</button>
<button type="button" onclick="window.location.href='./register.html';"
class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<main class="p-3 mx-auto h-70 w-100" style="max-width: 330px;">
<form>
<h1 class="h3 mb-3 fw-normal">Sign Up</h1>
<div class="form-floating text-dark my-1">
<input type="text" class="form-control" id="floatingName" placeholder="John Doe">
<label for="floatingName">Full Name</label>
</div>
<div class="form-floating text-dark my-1">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating text-dark my-1">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<button class="w-100 btn btn-lg btn-primary mt-3" type="submit">Sign Up</button>
</form>
<p class="text-secondary mt-3">Already have an account? <a class="text-white" href="./login.html">Login</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>powered by <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
view raw 3 register.html hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en" class="h-100">
<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>Audah</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="p-3 bg-dark text-white mb-auto">
<div class="container-fluid">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="./index.html"
class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<img src="img/logo.png" class="bi me-2" width="50" height="32" role="img"
aria-label="Bootstrap"></img>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="./index.html" class="nav-link px-2 text-white">Home</a></li>
<li><a href="#" class="nav-link px-2 text-white">Products</a></li>
<li><a href="./contact.html" class="nav-link px-2 text-secondary">Contact Us</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control form-control-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button onclick="window.location.href='./login.html';" type="button"
class="btn btn-outline-light me-2">Login</button>
<button type="button" onclick="window.location.href='./register.html';"
class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<main class="p-3 mx-auto h-70 w-100" style="max-width: 330px;">
<form id="contactForm">
<h1 class="h3 mb-3 fw-normal">Contact Us</h1>
<p>Got any questions? We're ready to help.</p>
<div class="form-floating text-dark mb-3">
<input class="form-control" id="name" type="text" placeholder="Name" />
<label class="form-label" for="name">Name</label>
</div>
<div class="form-floating text-dark mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating text-dark mb-3">
<input class="form-control" id="subject" type="text" placeholder="Subject" />
<label class="form-label" for="subject">Subject</label>
</div>
<div class="form-floating text-dark mb-3">
<textarea class="form-control" id="message" type="text" placeholder="Message"
style="height: 10rem;"></textarea>
<label class="form-label" for="message">Message</label>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-lg" type="submit">Submit</button>
</div>
</form>
</main>
<footer class="mt-auto text-white-50">
<p>powered by <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
view raw 4 contact.html hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 MPPL A 2021

Gambar
Nama : Andika Nugrahanto NRP : 05111940000031 Kelas : MPPL A 2021 1. Bergabung ke Situs Freelance Berdasarkan rekomendasi yang saya dapat dari kelas, saya memutuskan untuk mendaftar di salah satu web freelance yaitu  https://projects.co.id/ . Pada web tersebut saya terdaftar dengan username Anran31. 2. Memilih Project Dalam Situs Tersebut Karena saya tertarik pada bidang web development, maka saya menyari project yang berhubungan dengan web development. Setelah mencari, saya menemukan satu project yang sesuai dengan minat saya.  Berdasarkan Skill Requirement diatas, kurang lebih hal yang saya bisa dan tidak bisa adalah sebagai berikut: HTML, CSS, JS (Sedang belajar) PHP & Laravel (Sedang belajar) Codeigniter (Belum bisa) MySQL (Bisa) Github (Bisa) Sekian pemaparan saya untuk tugas kali ini. Terima kasih.
Baca selengkapnya

Tugas 3 Rekayasa Kebutuhan D

MCAS(Maneuvering Characteristics Augmentation System) Posisi dan ukuran mesin yang lebih besar pada Boeing 737 MAX dibanding Boeing 737 NG maka peletakan mesin ini terletak lebih maju dan sedikit naik daripada seri sebelumnya, sehingga menyebabkan cenderungnya mendorong hidung pesawat ke atas pada manuver tertentu. Keputusan desain ini mengakibatkan munculnya kemungkinan stalling pada pesawat ini. MCAS ini membuat sistem otomatis yang mengkompensasi gerakan pitch (dongakan hidung pesawat), agar dapat membantu pilot menurunkan hidung pesawat, apabila angle of attack terlalu besar saat terbang manual. Angle of attack yang terlalu besar inilah yang berisiko membuat pesawat stall. Fitur otomatis ini (MCAS), tetap aktif meski pesawat terbang dalam kondisi manual (Autopilot Off). Sistem MCAS akan menurunkan hidung pesawat dengan cara mengatur roda penyesuaian (trim) agar horizontal stabilizer (sayap kecil di ekor pesawat) berputar, membuat hidung pesawat turun. MCAS akan menggerakkan horizon...
Baca selengkapnya

Tugas 2 Rekayasa Kebutuhan D

Gambar
 Nama   : Andika Nugrahanto NRP         : 05111940000031 Kelas      : RK - D SKPL yang akan saya analisis untuk tugas ini adalah SKPL pembuatan perangkat lunak untuk Mizan Store. Perangkat lunak tersebut dibuat dengan tujuan untuk mempermudah melakukan pencarian dan pembelian buku secara online. Berikut adalah SKPL yang akan saya analisis untuk tugas kali ini: Berdasarakan gambar di atas, input yang dibutuhkan untuk proses rekayasa kebutuhan ada 5, yaitu sebagai berikut: 1. Existing Systems Information Mizan store merupakan salah satu toko buku dan perangkat lunak yang dikembangkan bertujuan untuk mempermudah pembeli dalam melakukan pencarian dan pembelian buku secara online. Pembeli sekarang tidak perlu pergi ke Mizan store dan mencari buku yang diinginkan secara manual, tetapi hanya perlu pergi ke web Mizan Store, lalu memilih buku yang ingin dibeli, kemudian pembeli dapat melakukan pembayaran melalui berbagai macam cara seperti o...
Baca selengkapnya