Cara membuat tampilan login sederhana tapi keren menggunakan Html dan CSS ~ Kang Ilham

disini saya menggunakan Internal Css / css yang disimpan satu file dengan file html
beritut ini skrip html dan css nya :

Tinggal klik ajj Gan, otomatis ke blok

<html>
<head>
 <title>Iham@Hotspot | Login</title>
    <style type="text/css">
/*ilham*/
body {
 margin-top:100px;
}
#lebeut{
 max-width:340px;;
 box-shadow:0 0 10px black;
}
#lebeut h3{
 padding:20px;
 background-color:black;
 color:white;
}
form{
 margin:0 20px;
}
input[type="text"],
input[type="password"]{
 width:100%;
 padding:10px;
 margin-top:9px;
 border:none;
 border-bottom:2px solid;
 text-align:center;
}
input[type="text"] {
 border-color:blue;
}
input[type="password"] {
 border-color:purple;
}
input[type="submit"]{
 width:100%;
 padding:14px;
 margin:20px 0;
 background-color:#09f;
 color:white;
 border:none;
 border-bottom:4px solid transparent;
}
input[type="submit"]:hover{
 opacity:0.8;
 border-color:blue;
}
    </style>
</head>
<body>
<center>
<h1>
Wilujeung Sumping di Hotspot SMK Plus Qurrota A'yun</h1>
<p>
pami hoyong internetan, akang atanapi teteh kedah login heula !</p>
<div id="lebeut">
<h3>
Bade Login Moal ?</h3>
<form>
<input type="text" placeholder="lebeutkeun nami akang / teteh !" name="username">
<input type="password" placeholder="nah, ayena lebeutkeun passwordna !" name="password" >
<input type="submit" value="LOGIN !">
</form>
</div>
<p>
tegaduh akun?, matakna daftar heula ka adminna!</p>
</center>
</body>
</html>

simpan dengan format .html

Ini tampilannya gan

Tentang Admin

Admin adalah salah seorang siswa di SMK Plus Qurrota A'yun didaerah Jawa Barat dengan mengambil Jurusan Teknik Komputer Jaringan yang banyak dikenal dengan sebutan TKJ