Login Page
Contact Us Page
https://github.com/ishaqadhel/pweb-homework-6
Pada tugas ke-6, saya ditugaskan untuk membuat login form dan contact us form. Disini saya membuat menjadi dua halaman yang berbeda agar form terlihat jelas. Untuk menyelesaikan tugas ini saya menggunakan HTML, CSS, Bootstrap, dan MDBootstrap.
Login Page
Contact Us Page
index.html
<!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">
<link rel="stylesheet" href="main.css">
<!-- Font Awesome -->
<link
href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css>"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="<https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap>"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="<https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.css>"
rel="stylesheet"
/>
<!-- MDB -->
<script
type="text/javascript"
src="<https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.js>"
></script>
<title>Login Using Bootstrap</title>
</head>
<body>
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card bg-dark text-white" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<div class="mb-md-5 mt-md-4 pb-5">
<h2 class="fw-bold mb-2 text-uppercase">Login</h2>
<p class="text-white-50 mb-5">Masukan Email dan Password untuk akses akun</p>
<div class="form-outline form-white mb-4">
<input type="email" id="typeEmailX" class="form-control form-control-lg" />
<label class="form-label" for="typeEmailX">Email</label>
</div>
<div class="form-outline form-white mb-4">
<input type="password" id="typePasswordX" class="form-control form-control-lg" />
<label class="form-label" for="typePasswordX">Password</label>
</div>
<p class="small mb-5 pb-lg-2"><a class="text-white-50" href="/contact.html">Ada masalah? Kontak kami disini</a></p>
<button class="btn btn-outline-light btn-lg px-5" type="submit">Login</button>
<div class="d-flex justify-content-center text-center mt-4 pt-1">
<a href="#!" class="text-white"><i class="fab fa-facebook-f fa-lg"></i></a>
<a href="#!" class="text-white"><i class="fab fa-twitter fa-lg mx-4 px-2"></i></a>
<a href="#!" class="text-white"><i class="fab fa-google fa-lg"></i></a>
</div>
</div>
<div>
<p class="mb-0">Belum punya akun? <a href="#!" class="text-white-50 fw-bold">Sign Up</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
contact.html
<!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">
<link rel="stylesheet" href="main.css">
<!-- Font Awesome -->
<link
href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css>"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="<https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap>"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="<https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.css>"
rel="stylesheet"
/>
<!-- MDB -->
<script
type="text/javascript"
src="<https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.js>"
></script>
<title>Contact Using Bootstrap</title>
</head>
<body>
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card bg-dark text-white" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<div class="mb-md-5 mt-md-4 pb-5">
<h2 class="fw-bold mb-2 text-uppercase">Contact Us</h2>
<p class="text-white-50 mb-5">Masukan data dibawah untuk mengontak kami</p>
<div class="form-outline form-white mb-4">
<input type="text" id="name" class="form-control form-control-lg" />
<label class="form-label" for="name">Nama</label>
</div>
<div class="form-outline form-white mb-4">
<input type="email" id="email" class="form-control form-control-lg" />
<label class="form-label" for="email">Email</label>
</div>
<div class="form-outline form-white mb-4">
<textarea class="form-control" id="message" rows="4"></textarea>
<label class="form-label" for="message">Pesan</label>
</div>
<p class="small mb-5 pb-lg-2"><a class="text-white-50" href="/">Ingin masuk akun? Klik disini</a></p>
<button class="btn btn-outline-light btn-lg px-5" type="submit">Submit</button>
<div class="d-flex justify-content-center text-center mt-4 pt-1">
<a href="#!" class="text-white"><i class="fab fa-facebook-f fa-lg"></i></a>
<a href="#!" class="text-white"><i class="fab fa-twitter fa-lg mx-4 px-2"></i></a>
<a href="#!" class="text-white"><i class="fab fa-google fa-lg"></i></a>
</div>
</div>
<div>
<p class="mb-0">Belum punya akun? <a href="#!" class="text-white-50 fw-bold">Sign Up</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
main.css
.gradient-custom {
/* fallback for old browsers */
background: #6a11cb;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
}