ARTI HIDUP. Facebook kita sering berintraksi dengan media sosial satu ini, di sini saya tidak akan membahasa trik atau bagaimana bersosial media dengan facebook ini. Yang saya akan bagikan di artikel ini yaitu sebuah source code form login dari facebook itu sendiri.
Di sini saya menggunakan tabs editor dari Visual studio code, jika kalian belum punya tabs editor dari Visual studio code bisa download bisa buka link di bawah ini.
Langsung saja untuk kodingan HTML bisa lihat di bawah ini.
by ig:creative coder
< !DOCTYPE html >
< html lang="en">
<head>
< meta charset ="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width-device-widht", initial-scale=0.1">
<link rel="stylesheet" href="style.css">
<title >LOGIN</title>
</head>
<body>
<div class="container">
<div class="logo">
<img src="fb.png" alt="190" width="198">
</div>
<div class="input-box"
<p>Login in to Facebook </p>
<form>
<input type="text" placeholder="Email address or phone number" class="input">
<input type="password" placeholder="password" class=" input">
<input type="submit" value="Login">
</form>
<div class="link">
<a href="#">Forgotten account?</a>
<a href="#">Sign up for facebook</a>
</div>
</div>
</div>
</body>
Kodingan untuk CSSnya.
body{
Background-color: #f0f2f5;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
*{
padding: 0;
margin: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}
.container{
width: 380px;
height: 400px;
}
.container, .input-box{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.input-box{
widht; 380px;
height: 300px;
background-color: #fff;
border-radius: 10px;
padding: 10px 0;
box-shadow: 0 10px 20px rgba(95, 95, 95, .2);
}
form{
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 200px;
}
input form{
widht: 350px;
height: 50px;
border-radius; 5px;
outline: none;
border: none;
padding: 0 15px;
}
.input{
border: 1px solid #dddfe2;
}
form input[type="submit"]{
background-color: #1877f2;
color: fff;
font-wieght: 500;
font -size: 19px;
cursor: pointer;
}
.links a{
text-decoration: none;
font-size: 14px;
color: #1877f2;
margin: 5px;
}
Untuk hasil dari code di atas bisa dilihat di vidio di bawah ini .
Terima kasih,semoga bermanfaat. Jika ada yang ditanyakan bisa tinggalkan komentar di bawah atau bisa hubungj kontak saya😇
selamat mencoba ...
Salam hangat dari saya ...
Ijin copas mind
BalasHapusBoleh bang silahkan, dengan senang hati. Bila butuh respon cepat silahkah pergi ke contact
HapusCSS nya tidak work gan tolong dong upload file yang udah jadi
BalasHapusItu hanya kodingan untuk html5 dan css bang, agar work tambahin link login, bisa ambil di facebook.
BalasHapusPosting Komentar