Frontend : CSS Bagian 12 – Membuat Form Login

Pada materi Frontend HTML sebelumnya kita telah membuat form login tanpa CSS, kali ini kita akan membuat form login dengan CSS. Mengetahui margin, padding, border akan membuat kalian mudah untuk mengatur posisi dari suatu elemen. Berikut contoh codingan untuk membuat form login dengan css.

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 12 - Membuat Form Login</title>
	<style>
		body {
	       background-color: #110c54;
	       background-repeat: no-repeat;
		}
	    #card {
	        background: #fbfbfb;
	        border-radius: 8px;
	        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
	        height: 410px;
	        margin: 6rem auto 8.1rem auto;
	        width: 329px;
	        height: 450px;
		}
		img {
			width: 150px;
		}
		#card-content {
		    padding: 12px 44px;
		}
		#card-title {
	        font-family: "Raleway Thin", sans-serif;
	        letter-spacing: 4px;
	        padding-bottom: 23px;
	        padding-top: 10px;
	        text-align: center;
		}
		.underline-title {
	        background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
	        height: 2px;
	        margin: -1.1rem auto 0 auto;
	        width: 89px;
		}
		.form {
		    align-items: left;
		    display: flex;
		    flex-direction: column;
		}
		.form-border {
		    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
		    height: 1px;
		    width: 100%;
		}
		.form-content {
		    background: #fbfbfb;
		    border: none;
		    outline: none;
		    padding-top: 50px;
		}		
		input {
			text-align: center;
			font-size: 15px;
		}
		#submit-btn {
		    background-color: green;
		    border: none;
		    border-radius: 21px;
		    box-shadow: 0px 1px 8px #24c64f;
		    cursor: pointer;
		    color: white;
		    font-family: "Raleway SemiBold", sans-serif;
		    height: 42.3px;
		    margin: 0 auto;
		    margin-top: 50px;
		    transition: 0.25s;
		    width: 153px;
		}
		#submit-btn:hover {
		    box-shadow: 0px 1px 18px #24c64f;
		}
	</style>
</head>
<body>
	<div id="card">
		<div id="card-content">
		  <div id="card-title">
		    <img src="smkbisa.png">
		    <h2>LOGIN</h2>
		    <div class="underline-title"></div>
		    <form action="index.php" method="POST">
			    <input type="email" class="form-content" name="email" placeholder="Masukkan Email" required>
			    <div class="form-border"></div>
			    <input type="password" class="form-content" name="password" placeholder="Masukkan Password" required>
			    <div class="form-border"></div>
				<button id="submit-btn" type="submit">LOGIN</button>
			</form>
		  </div>
		</div>
	</div>
</body>
</html>


Penjelasan :

1. Baris 6 – 9, menetapkan warna background menjadi biru tua

2. Baris 10 – 18, menetapkan background dengan warna yang diinginkan. Mensetting card dengan lebar 329 pixel dan tinggi 450 pixel, border radius(garis lengkung) 8 pixel, box shadow(bayangan box) dengan gradien, dan margin sesuai keinginan

3. Baris 19 – 21, menetapkan lebar logo smk bisa

4. Selebihnya silahkan di eksplor sendiri ya teman-teman


Hasil :


Silahkan di eksplor ya teman-teman. Jika ada yang tidak dimengerti monggo ditanya di kolom komentar…

Leave a Reply

Your email address will not be published. Required fields are marked *