Membuat Form Login seperti Google dengan HTML & CSS

Halo teman teman, kali ini kita akan belajar cara Membuat Form Login seperti Google dengan HTML & CSS, oke langsung saja kita praktekan yah teman teman,

pertama tama buka text editor kalian lalu ketikan kode HTML berikut dan beri nama dengan nama index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Google Form</title>
	<link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet"> 
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<table>
			<form action="">
				<tr>
					<td><img src="google.png" width="100" alt=""></td>
				</tr>
				<tr>
					<td><p class="login">Masuk</p></td>
				</tr>
				<tr>
					<td><p class="google">Gunakan Akun Google</p></td>
				</tr>
				<tr>
					<td>
						<input type="text" placeholder="Email atau ponsel">		
					</td>
				</tr>
				<tr>
					<td><p class="email"><a href="" >Lupa email?</a></p></td>
				</tr>
				<tr>
					<td>
						<div class="kiri"><a href="">Opsi lainnya</a></div> 
						<div class="kanan"><input type="submit" value="BERIKUTNYA"></div>
					</td>
				</tr>				
			</form>
		</table>
		<div class="foot">
			<div class="left">
				<a href="">Indonesia</a><span class="triangle demo-arrow-down"></span>
			</div>
			<div class="right">
				<ul>
					<li>Bantuan</li>
					<li style="padding: 0 30px;">Privasi</li>
					<li>Persyaratan</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

lalu setelah itu kita hias dengan CSS berikut, beri nama dengan nama style.css yah teman teman.

style.css

*{padding: 0; margin: 0;}
body{
	background: #FBFBFC;
	font-family: arial;
}
.container{
	margin-top: 150px;
}
table{
	width: 500px;
	margin: auto;
	padding: 40px 40px 160px 40px;
	background: #fff;
	box-shadow: 0px 3px 8px grey;
	margin-top: 20px;
}
p.google{
	margin-bottom: 70px;
}
.login, .google{
	color:#212121;
}
.login{
	margin-bottom: 5px;
	font-family: arial;
	font-size: 23px;
}
input[type=text]{
	width: 100%;
	border:none;
	border-bottom: 1px solid #E2E2E2;
	padding-bottom: 10px;
	color:  #666;
	font-size: 17px;
}
img{
	width: 70px;
	margin-bottom: 20px;
}
p.email{
	padding: 30px 0 40px 0;
}
a{
	color: #4285F4;
	text-decoration: none;
}
.kiri{
	float: left;
}
.kanan{
	float: right;
}
.kanan input[type=submit]{
	background: #4285F4;
	padding: 10px 20px;
	color: #fff;
	border: none;
	border-radius: 5px;
	box-shadow: 0px 1px 5px #666;
}
input[type=submit]:hover{
	cursor: pointer;
	background: #666;
	transition: background 1s;
}
.foot{
	width: 500px;
	margin: auto;
	overflow: hidden;
	margin-top: 20px;
	color: #666;
}
.left{
	float: left;
}
.left a{
	color:#212121;
}
.right{
	float: right;
}
ul{
	list-style: none;
}
ul li{
	float: left;

}
/*segitiga*/
.triangle{
	margin:8px;
	float: right;
	cursor: pointer;
}
.demo-arrow-down{
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;	
	border-top: 5px solid #333;
}

hasilnya akan seperti gambar berikut, mirip sekali dengan form login Google.

oke sekian tutorial Membuat Form Login seperti Google dengan HTML & CSS, semoga bermanfaat yah… 😀