Assalamualaikum wr.wb,
Hai guys apa kabar hari ini? semoga selalu dalam keadaan baik, insaallah.
kali ini saya akan membahas tentang pembuatan login dari html.
B.LATAR BELAKANG
Penggunaan HTML untk pembuatan login, halaman web dan yang lainnya yang digunakan untuk menstranfer data ke server browser.
C.MANFAAT DAN TUJUAN
-Dapat menggunakan HTML dan menstranfer ke server browser
-Dapat membuat login dari HTML
D.PEMBAHASAN
Berikut penjelasan mengenai skrip coding login menggunakan HTML:
Coding format html:
<html>
<head>
<title>Desain Form Login Dengan Css</title>
<link rel="stylesheet" href="lanjutan.css">
</head>
<body>
<div class="konten">
<div class="kepala">
<div class="lock"></div>
<h2 class="judul">Sign In</h2>
</div>
<div class="artikel">
<form action="#" method="post">
<div class="grup">
<label for="email">E-mail Address</label>
<input type="text" placeholder="Masukkan Email">
</div>
<div class="grup">
<label for="password">Password</label>
<input type="password" placeholder="password">
</div>
<div class="grup">
<input type="submit" value="Sign In">
</div>
</form>
</div>
</div>
</body>
</html>
coding dengan format CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background: #4682B4;
}
div.konten{
background: #ffffff;
width: 350px;
margin: 222px auto 0;
border-radius: 16px;
min-height: 256px;
overflow: hidden;
}
div.kepala{
background: #f85252;
padding: 10px 22px;
height: 60px;
}
div.kepala h2.judul{
color: #fff;
font-weight: normal;
line-height: 40px;
display: inline-block;
}
div.lock{
background-image: url("lock.png");
background-position: center;
background-size: 38px;
display: inline-block;
width: 25px;
height: 25px;
margin-top: 8px;
float: left;
margin-right: 10px;
}
div.artikel{
padding:10px 22px 0;
color: #808080;
}
div.artikel div.grup{
margin: 16px 0;
}
div.artikel div.grup label,
div.artikel div.grup input{
display: block;
}
div.artikel div.grup label{
font-size: 13px;
margin-bottom: 10px;
}
div.artikel div.grup input[type="text"],
div.artikel div.grup input[type="password"]{
width: 100%;
height: 30px;
padding: 0 10px;
background: #eeeeee;
border:none;
color: #808080;
}
div.artikel div.grup input[type="submit"]{
background: #33cd77;
padding: 4px 16px;
margin: 0 auto;
border: 1px solid #33cd77;
border-radius: 2px;
color: #fff;
cursor: pointer;
}
div.artikel div.grup input[type="submit"]:hover{
background: #28a45e;
}
Dan berikut merupakan hasil dari codingan diatas:
E.ALAT DAN BAHAN
-laptop
-sublim text
sampai disini post kali ini, semoga bermanfaat.
Sampai jumpa...
Wassalamualaikum wr.wb
0 komentar:
Posting Komentar