Published on October 18, 2021
Tugas Laman Login & Contact Pemrograman Web
Nama: Putu Ananda Satria Adi
NRP: 05111940000113
Kelas: Pemrograman Web B
Pada pertemuan ke-7 Pemrograman Web, kami diberikan tugas untuk membuat halaman login dan contact untuk pengguna. Tampilan web yang telah saya buat dapat diakses di Github Pages. Berikut merupakan screenshot dari halaman login dan contact yang telah saya buat.
Potongan kode dari laman diatas adalah sebagai berikut:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap"
rel="stylesheet"
/>
<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="./css/style.css" />
<link
rel="shortcut icon"
href="https://blog-ananda.vercel.app/favicon/apple-icon.png"
type="image/x-icon"
/>
</head>
<body class="gradient">
<div
class="
container
min-h-100vh
d-flex
flex-column
align-items-center
justify-content-center
"
style="max-width: 36rem"
>
<div class="shadow border-0 card rounded-3" style="width: 100%">
<div class="row flex-row justify-content-center">
<div class="col-12 align-items-center">
<div
class="d-flex align-items-center rounded-3 gradient-invert p-4"
>
<h4 class="m-0 fw-bolder">Login</h4>
</div>
<div class="d-flex flex-row justify-content-center">
<div class="col-12">
<form class="p-4">
<div class="form-group">
<label for="username">Username</label>
<input
name="username"
type="text"
class="form-control"
placeholder="Username"
required=""
/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
name="password"
type="password"
class="form-control"
placeholder="Password"
required=""
/>
</div>
<button
type="submit"
class="
form-button
gradient-invert
border-0
mt-4
py-2
fw-bold
px-4
rounded-3
"
>
Sign In
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex mt-4">
<p>Need help or have feedback? </p>
<a href="./contact" class="text-reset fw-bold fst-italic">
Contact Us
</a>
</div>
</div>
</body>
</html>Selain itu terdapat halaman contact untuk memberikan masukan atau bagi pengguna yang ingin meminta bantuan. Tampilan halaman tersebut adalah sebagai berikut:
/contact/index.js
<!DOCTYPE html>
<html lang="en">
<head>
<title>Help/Feedback</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap"
rel="stylesheet"
/>
<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="../css/style.css" />
<link
rel="shortcut icon"
href="https://blog-ananda.vercel.app/favicon/apple-icon.png"
type="image/x-icon"
/>
</head>
<body class="gradient">
<div
class="
container
min-h-100vh
d-flex
flex-column
align-items-center
justify-content-center
"
style="max-width: 54rem"
>
<div class="shadow border-0 card rounded-3" style="width: 100%">
<div class="row flex-row justify-content-center">
<div class="col-12 align-items-center">
<div
class="
d-flex d-flex
align-items-center
justify-content-center
rounded-3
gradient-invert
p-4
"
>
<h4 class="m-0 fw-bolder">Contact Us</h4>
<a href=".." class="ms-auto text-reset">
<h6 class="m-0 fw-bolder">< Login</h6>
</a>
</div>
<div class="d-flex flex-row justify-content-center">
<div class="col-12">
<form class="p-4 row justify-content-center">
<div class="col-6">
<div class="form-group">
<label for="name">Your Name</label>
<input
name="name"
type="text"
class="form-control"
placeholder="Name"
required=""
/>
</div>
<div class="form-group">
<label for="email">Your Email</label>
<input
name="email"
type="email"
class="form-control"
placeholder="Email"
required=""
/>
</div>
</div>
<div class="col-6">
<label for="password">Your Message</label>
<textarea
class="form-control"
placeholder="Leave your message here!"
style="height: 100px"
></textarea>
</div>
<button
type="submit"
class="
col-4
form-button
gradient-invert
border-0
mt-4
py-2
fw-bold
px-4
rounded-3
"
>
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Pada kedua halaman diatas, saya menambah sedikit CSS untuk membuat background halaman berganti warna. Berikut adalah potongan kodenya:
style.css
.gradient {
background: linear-gradient(-45deg, #c6ffdd, #fbd786, #f7797d);
background-size: 400% 400%;
animation: gradient 8s ease-in-out infinite;
}
.gradient-invert {
background: linear-gradient(-45deg, #f7797d, #fbd786, #c6ffdd);
background-size: 400% 400%;
animation: gradient 8s ease-in-out infinite;
}
.min-h-100vh {
min-height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}