1. Pertama-tama kita siapkan bahannya/software yaitu: xampp dan sublime text
2. Setelah diinstal softwarenya, kita pertama membuka xampp
3. Selanjutnya kita buka software sublime text. seperti gambar dibawah ini
<html>
<head>
<title> Form Login</title>
<link rel="stylesheet" type"text/css" href="css/style.css">
<body>
<div class="container">
<form>
<div class="input">
<table id="header">
<table colspan="0"><h2>Login Disini</h2></table>
<input type="text" name="username"
placeholder="Username">
</div>
<div class="input">
<input type"password" name="password"
placeholder="Password">
</div>
<input type="submit" name="submit"
value="LOGIN" class="btn-login"><br>
<a href="#">Lupa Password?</a><br>
<a href="#">Buat Akun!</a>
</form>
</div>
</body>
</head>
</html>
dan scriptnya
body{
margin: 0 auto;
background-image: url("../Kanade.Jpg");
background-repeat: no-repeat;
background-size: 100% 720px;
}
.container{
width: 500px;
height: 400px;
text-align: left-side;
background-color: rgba (52, 73, 94,0.7);
border-radius: 4px;
margin: 0 auto;
margin-top: 150px;
}
.container img{
width: 220px;
height: 220px;
margin-top: -60px;
margin-bottom: 30px;
}
input [type="text"],input[type="password"]{
height: 546px;
width: 200px;
font-size: 16px;
border: none;
margin-bottom: 20px;
margin.radius: 4px;
background-color: #fff;
}
.btn-login{
padding: 10px 30px;
color: #fff;
font-size: 16px;
border-radius: 4px;
border: none;
background-color: #B22222;
}
a{
font-size: 18px;
color: #000000;
}
Dan hasilnya Seperti gambar dibawah ini
0 komentar:
Posting Komentar