Siapa yang tidak tahu facebook pada sekarang ini ? yah media sosial yang cukup populer di zaman sekarang ini. Pada tutorial kali ini kita akan membuat halaman login mirip facebook.
Source codenya seperti berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style type="text/css">
@font-face {
font-family: font;
src: url(FACEBOLF.OTF);
}
body{
background-color: #165ABF;
font-family: fong;
}
h1{
color:white;
text-align: center;
margin-top: 100px;
}
.username{
background-color: white;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
margin: auto;
height: 40px;
}
input{
outline: none;
margin-left: 10px;
background: none;
border: none;
width: 100%;
height: 100%;
}
.password{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: white;:10px;
border-top: solid #ddd 1px;
width:100%;
margin:auto;
height:40px;
}
.btn-login{
margin-top: 10px;
background: none;
border:none;
border-radius 5px;
background-color: white;10px;
width:100%;
height:50px;
color:black;
background-color:#f4f4f4;
opacity:0.6;
}
a{
color:white;
text-decoration:none;
}
.back{
text-align: center;
}
.footer{
position:fixed;
margin-top:130px;
color:white;
text-align: center;
width:100%
}
</style>
</head>
<body>
<h1> Facebook </h1>
<div class="username">
<input type="text" placeholder="Email or phune Number">
</div>
<div class="password">
<input type="password" placeholder="Password">
</div>
<button class="btn-login">Log In</button><br>
<p class="back"><a href="#">Back</a></p>
<div class="footer"><a href="#">Sign Up For Facebook</a></div>
</body>
</html>
Cukup simpel bukan, Berikut adalah penjelasannya :
<meta name='viewport' content='width=device-width, initial-scale=1'>
Source Code HTMLnya adalah :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h1> Facebook </h1>
<div class="username">
<input type="text" placeholder="Email or phune Number">
</div>
<div class="password">
<input type="password" placeholder="Password">
</div>
<button class="btn-login">Log In</button><br>
<p class="back"><a href="#">Back</a></p>
<div class="footer"><a href="#">Sign Up For Facebook</a></div>
</body>
</html>
<style type="text/css">
@font-face {
font-family: font;
src: url(FACEBOLF.OTF);
}
body{
background-color: #165ABF;
font-family: fong;
}
h1{
color:white;
text-align: center;
margin-top: 100px;
}
.username{
background-color: white;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
margin: auto;
height: 40px;
}
input{
outline: none;
margin-left: 10px;
background: none;
border: none;
width: 100%;
height: 100%;
}
.password{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: white;:10px;
border-top: solid #ddd 1px;
width:100%;
margin:auto;
height:40px;
}
.btn-login{
margin-top: 10px;
background: none;
border:none;
border-radius 5px;
background-color: white;10px;
width:100%;
height:50px;
color:black;
background-color:#f4f4f4;
opacity:0.6;
}
a{
color:white;
text-decoration:none;
}
.back{
text-align: center;
}
.footer{
position:fixed;
margin-top:130px;
color:white;
text-align: center;
width:100%
}
</style>
Pada code css saya menambahkan sebuah font facebolf.otf yang mana dapat didownload di sini : Download
Untuk Semua file dapat didownload di sini : DOWNLOAD
Untuk Tampilan seperti berikut ini :
VIDEO