TUGAS PWEB-D MINGGU KE-6 (MEMBUAT LOGIN PAGE DAN CONTACT US PAGE DENGAN BOOTSTRAP)
TUGAS PWEB-D MINGGU KE-6 (MEMBUAT LOGIN PAGE DAN CONTACT US PAGE DENGAN BOOTSTRAP)
Pada minggu keenam pemrograman web kelas D ditugaskan membuat login page dan contact us page dengan memanfaatkan css framework bootstrap. Disini saya memiliki 3 file dan 1 folder.
Link Repository : https://github.com/bagusistighfar86/bagusistighfar86.github.io/tree/main/pweb-d/pertemuan6
Link Web : https://bagusistighfar86.github.io/pweb-d/pertemuan6/
1. index.html
Menyimpan code main dari website ini
<!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>Login</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark shadow-sm fixed-top p-3">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="" width="80px" class="d-inline-block align-text-top" />
Sports Cars
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-us.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- end navbar -->
<!-- main -->
<div class="main d-flex justify-content-center align-items-center" style="height: 100vh">
<section id="login">
<div class="container" style="width: 400px">
<div class="row">
<div class="col text-center mb-2 text-light">
<p class="fs-2 fw-lighter">LOGIN</p>
</div>
</div>
<div class="row justify-content-center align-items-center pt-3 pb-3 mb-4" style="background: rgba(255, 255, 255, 0.6)">
<div class="row pb-3">
<div class="col-md-2">
<label for="name" class="form-label"><img src="img/profile.png" alt="" /></label>
</div>
<div class="col-md-10">
<input type="text" placeholder="Username" class="form-control bg-opacity-50 text-dark border-0 rounded-0" id="name" aria-describedby="name" style="background: transparent; outline: none" />
</div>
</div>
<hr style="width: 85%" />
<div class="row">
<div class="col-md-2">
<label for="password" class="form-label"><img src="img/password.png" alt="" /></label>
</div>
<div class="col-md-10">
<input type="password" placeholder="Password" class="form-control bg-opacity-50 text-dark border-0" id="password" aria-describedby="password" style="background: transparent; outline: none" />
</div>
</div>
</div>
<div class="row justify-content-center">
<a href="index.html" class="ps-0 pe-0">
<button class="btn btn-primary border-0 rounded-0 bg-gradient" type="button" style="width: 100%">Login</button>
</a>
</div>
<div class="row justify-content-center mt-2">
<div class="col-md-8 align-self-center">
<p class="fs-6"><a class="text-decoration-none" href="contact-us.html">Contact Us</a></p>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- end main -->
</body>
</html>
2. contact-us.html
Menyimpan code javascript yang berfungsi untuk mengecek atau memvalidasi isi dari form apakah sudah valid atau tidak.
<!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>Contact Us</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark shadow-sm fixed p-3">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="" width="80px" class="d-inline-block align-text-top" />
Sports Cars
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- end navbar -->
<div class="container" style="margin-top: 50px">
<!-- main -->
<div class="container text-white" style="height: 100vh">
<div class="row">
<div class="col-md-6">
<div class="container">
<div class="row text-start">
<div class="col">
<h3 class="fw-normal">Contact Information</h3>
</div>
</div>
</div>
<div class="container">
<div class="row text-start">
<div class="col">
<hr class="mt-4" />
</div>
</div>
</div>
<div class="container opacity-50">
<div class="row text-start">
<div class="col">
<p class="mt-4">Get in touch today. I'd love to hear from you</p>
</div>
</div>
</div>
<div class="container opacity-50">
<div class="row mt-4">
<div class="col-md-6">
<div class="row">
<div class="col-3 overflow-hidden"><img src="img/phone-01.png" alt="" /></div>
<div class="col-9 text-start">
<div class="row">Phone</div>
<div class="row">08123456789</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-3 overflow-hidden"><img src="img/email-01.png" alt="" /></div>
<div class="col-9 text-start">
<div class="row">Email</div>
<div class="row">emailku@gmail.com</div>
</div>
</div>
</div>
</div>
<div class="row text-start mt-4">
<div class="col-md-6">
<div class="row">
<div class="col-3 overflow-hidden"><img src="img/address-01.png" alt="" /></div>
<div class="col-9 text-start">
<div class="row">Address</div>
<div class="row">Jl. Yang Tak Kunjung</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row text-start">
<div class="col">
<h2 class="fs-5 fw-normal mt-5">Let's be Sociable</h2>
</div>
</div>
</div>
<div class="container">
<div class="row text-start">
<div class="col">
<hr class="mt-4" />
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="row text-start">
<div class="col">
<h3 class="fw-normal">Send Me a Message</h3>
</div>
</div>
</div>
<div class="container">
<div class="row text-start">
<div class="col">
<hr class="mt-4" />
</div>
</div>
</div>
<div class="container opacity-50">
<div class="row text-start">
<div class="col">
<p class="mt-4">Your email will not be published.</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-md-6 align-items-center">
<input class="bg-dark text-white contactus ps-3 pe-3" type="text" placeholder="Home" style="width: 100%" />
</div>
<div class="col-md-6">
<input class="bg-dark text-white contactus ps-3 pe-3" type="text" placeholder="Email" style="width: 100%" />
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<input class="bg-dark text-white contactus ps-3 pe-3" type="text" placeholder="Phone" style="width: 100%" />
</div>
<div class="col-md-6">
<input class="bg-dark text-white contactus ps-3 pe-3" type="text" placeholder="Subject" style="width: 100%" />
</div>
</div>
<div class="row text-start mt-4">
<div class="col">
<textarea class="bg-dark text-white contactus ps-3 pe-3" name="message" id="message" placeholder="Message" style="width: 100%; height: 150px"></textarea>
</div>
</div>
<div class="row text-start mt-4">
<div class="col">
<a href="contact-us.html" class="ps-0 pe-0">
<button type="submit" class="btn btn-primary border-0 rounded-0" type="button" style="width: 100%; background-color: rgb(70, 70, 70)">SEND ME A MESSAGE</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end main -->
</div>
</body>
</html>
3. style.css
Menyimpan code style berupa css untuk menambah hiasan pada tampilan HTML
html,
body,
header {
height: 100%;
}
body {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(img/bg.jpg);
background-repeat: no-repeat fixed;
-webkit-backgorund-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#login {
width: 500px;
/* background-color: salmon; */
}
.row {
/* background: salmon; */
text-align: center;
}
::placeholder {
color: black;
font-weight: bold;
padding-left: 10px;
}
label img {
height: 20px;
}
a {
color: rgba(255, 255, 255, 0.7);
}
a:hover {
color: rgba(255, 255, 255, 1);
}
input,
textarea,
button {
border: none;
border-radius: none;
}
.contactus::placeholder {
color: rgba(255, 255, 255, 0.5);
font-weight: lighter;
font-size: small;
padding: 0;
}
4. Folder img untuk menyimpan resource gambar
Komentar
Posting Komentar