Langsung saja kita mulai, pertama - tama masuk ke code editor anda, lalu bikin file bernama index.html(bebas penamaannya yang penting .html).
index.html
masukan code berikut:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Desain Form Login Dengan HTML & CSS with RizalIhwan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak_login">
<p class="tulisan_login">Silahkan login</p>
<form>
<label>Username</label>
<input type="text" name="username" class="form_login" placeholder="Username atau email ..">
<label>Password</label>
<input type="text" name="password" class="form_login" placeholder="Password ..">
<input type="submit" class="tombol_login" value="LOGIN">
<br/>
<br/>
<center>
</center>
</form>
</div>
</body>
</html>
Jika Teman - teman sudah sampai step pertama, kita masuk ke step ke dua, bikin file namanya style.css(bebas seperti nama html tadi namun ini harus .css ekstensinya).
style.css
masukan code berikut:
body{
font-family: sans-serif;
background: #d5f0f3;
}
h1{
text-align: center;
/*ketebalan font*/
font-weight: 300;
}
.tulisan_login{
text-align: center;
/*membuat semua huruf menjadi kapital*/
text-transform: uppercase;
}
.kotak_login{
width: 350px;
background: white;
/*meletakkan form ke tengah*/
margin: 80px auto;
padding: 30px 20px;
}
label{
font-size: 11pt;
}
.form_login{
/*membuat lebar form penuh*/
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}
.tombol_login{
background: #46de4b;
color: white;
font-size: 11pt;
width: 100%;
border: none;
border-radius: 3px;
padding: 10px 20px;
}
.link{
color: #232323;
text-decoration: none;
font-size: 10pt;
}
nahhhh jika sudah semua step di lakukan maka hasilnya akan seperti berikut :
cukup sekian dan terima kasih, wasallamualaikum Wr,Wb.
Komentar
Posting Komentar