Tugas 4
Pada tugas kali ini, diminta untuk membuat halaman login dan contact us dengan bootstrap. Berikut adalah tampilan yang dibuat.
Untuk preview live nya bisa dilihat pada tautan berikut.
Untuk kodenya sendiri adalah sebagai berikut.
login.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">
<title>Login</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.bitdark {
opacity:0.5;
transition: all 0.25s;
max-height:500px;
}
.bitdark:hover {
opacity:1;
cursor: pointer;
}
</style>
</head>
<body>
<div class="h-screen w-screen gray-dark grid grid-cols-8">
<div class="col-span-6">
<img src="https://getdiskon.com/blog/wp-content/uploads/2019/03/playbuzz.com_.jpg"
class="h-screen w-screen">
</img>
</div>
<div class="flex items-center justify-center col-span-2">
<div>
<div class="text-center text-2xl">Admin System<p class="text-sm text-gray-500">login</p></div>
<div class="mt-4">
<input type="text" placeholder="email" class="p-2 rounded border border-gray-300"></input><br><br>
<input type="password" placeholder="password" class="p-2 rounded border border-gray-300"></input><br><br>
<div class="text-center bg-blue-500 text-white rounded px-4 py-2 cursor-pointer">Login</div><br>
<p class="text-sm">Having difficulities? contact <a class="font-bold" href="contact_us.html">admin</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
contact_us.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">
<title>Contact Us</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.bitdark {
opacity:0.5;
transition: all 0.25s;
max-height:500px;
}
.bitdark:hover {
opacity:1;
cursor: pointer;
}
</style>
</head>
<body>
<div class="h-screen w-screen gray-dark grid grid-cols-8">
<div class="col-span-6">
<img src="https://getdiskon.com/blog/wp-content/uploads/2019/03/playbuzz.com_.jpg"
class="h-screen w-screen">
</img>
</div>
<div class="flex items-center justify-center col-span-2">
<div>
<div class="text-center text-2xl">Admin System<p class="text-sm text-gray-500">contact us</p></div>
<div class="mt-4">
<input type="text" placeholder="your name" class="p-2 rounded border border-gray-300"></input><br><br>
<input type="text" placeholder="your email" class="p-2 rounded border border-gray-300"></input><br><br>
<input type="text" placeholder="type your complain here..." class="p-2 rounded border border-gray-300"></input><br><br>
<div class="text-center bg-blue-500 text-white rounded px-4 py-2 cursor-pointer">Submit</div><br>
</div>
</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment