Liat ini dia :
beri nama file ini dengan nama login.html
<html>
<head>
<title> Form Login </title>
<link href="style1.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div id="masuk">
<div class="header">
<div class="header_isi">
<div class="gambar">
<form action="login.php" method="POST">
<img src="anim.jpg" width="1000" height="120">
<input type="text" name="username" placeholder="Username" class="login_regis"> <br />
<input type="password" name="password" placeholder="Password" class="login_regis"> <br />
<div class="chexbox">
<input type="checkbox" name="chek" > Remember me <br />
</div>
<input type="Submit" name="login" value="LOGIN" class="tombol_login">
</form>
</div>
</div>
<div class="copyright"> Design By: <a href="fikakurdinia.blogspot.com"> YUUKI KOJIMA </a> |
</div>
</div>
</body>
</html>
Selanutnya kita akan membuat tampilan atau style pada website. buat file dengan nama style1.css.
Berikut Scriptnya :
#masuk {
background-image: url("anim.jpg");
background-size: cover;
height: 680px;
}
.header_isi {
width: 335px;
height: 230px;
padding: 180px 0px 90px 480px;
}
.gambar {
background-color: rgba(170, 114, 123 ,0.6);
height: 330px;
border: 2px solid rgba(170, 114, 123 ,1);
}
img {
width: 250px;
height: 100px;
margin-left: 45px;
margin-top: 15px;
}
.login_regis {
height: 40px;
width: 260px;
text-align: center;
color: white;
font-size: 17px;
border-radius: 8px;
background-color: rgba(225, 255, 255, 0.4);
border: 3px solid #0288D1;
margin-left: 42px;
margin-top: 10px;
}
.tombol_login {
width: 260px;
height: 30px;
text-align: center;
background-color: #0288D1;
color: white;
font-size: 17px;
border: 2px solid #0288D1;
border-radius: 8px;
margin-top: 20px;
margin-left: 42px;
}
.chexbox {
font-size: 15px;
color: white;
margin-left: 45px;
margin-top: 10px;
}
.login_regis:hover {
border: 3px solid #fff;
}
.tombol_login:hover {
background-color: white;
color: #0288D1;
border: 2px solid white;
}
.copyright {
margin-top: 150px;
color: #0288D1;
font-size: 17px;
margin-left: 10px;
}
a {
text-decoration: none;
color: black;
}
.copyright a {
color: #0288D1;
}
Yuppp gtu gitu deh sedikit informasi tentang desain web... Oh iya hampir lupa jangan lupa untuk diSave dengan nama style.css
Wassalamu'alaikum warahmatullahi wabarakatuh.... 😊🙏
