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 seketika saja kita praktekan yah teman teman,
pertama-tama 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= Merancang Form Login seperti Google dengan HTML Merancang Form Login seperti Google dengan HTML CSS></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 demikianlah panduan Membuat Form Login seperti Google dengan HTML CSS, semoga bermanfaat yah… 😀
Sumber https://kursuswebsite.org
