Membuat Halaman Login Responsive dengan HTML & CSS

Thursday, 12 January 2017

Setelah lama tidak membula blog akhirnya mimin kembali dengan tutorial lagi, kali ini mimin akan membahas tentang

Cara Membuat Halaman Login Responsive dengan HTML & CSS

Apa itu Responsive?? Responsive Web Design adalah suatu keadaan sebuah halaman web dimana tampilannya akan cocok, rapi dan tetap enak dilihat jika diakses dari perangkat apapun dengan resolusi layar yang berbeda.

Bahan bahan :

Font Awesome (Download)

Script HTML nya :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/login.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<title>Belajar Web</title>
</head>
<body>
<div class="container">
<img src="img/user/login.png">
 <div class="input_rez">
  <input type="text" name="username" placeholder="username">
 </div>
</br>
 <div class="input_rez">
  <input type="password" name="password" placeholder="Password">
 </div>
<input type="submit" name="login" value="Login" class="btn"></br>
<a href="#">Lupa Password?</a>
</div>
</body>
</html>

Script CSS nya :

body{
 background-image: url("../img/test.png");
 background-size: auto;
 background-repeat: no-repeat;
}
.container{
 margin: 0 auto;
 border-radius: 10px;
 height: 325px;
 max-width: 400px;
 width: 100%;
 text-align: center;
 background-color: rgba(236, 240, 241,0.8);
 border:2px solid rgba(236, 240, 241,0.8);
 margin-top:150px;
 text-align: center;
}
.container img{
 height: auto;
 max-width: 190px;
 margin-top: -80px;
 margin-bottom: 10px;
}
input[type="text"] , input[type="password"]{
 height: 25px;
 max-width: 200px;
 width: 100%;
 border:none;
 border-radius: 5px;
 font-size: 15px;
 padding-bottom: 5px;
 padding-left: 25px;
}
.input_rez:before{
 font-family:"FontAwesome";
 content:"\f007";
 position: absolute;
 border-radius: 5px;
 padding-left: 5px;
 padding-top: 6px;
}
.rez-input:last-child:before{
 content: "\f023";
}
.btn{
 padding: 9px 20px;
 border:none;
 margin-top: 10px;
 border-radius: 5px;
 margin-bottom: 10px;
}
a{
 color: #47476b;
 text-decoration: none;
}

Hasilnya :