Hai, teman tukan koding, berikut ini saya akan membagikan script login instagram yang dibuat dari html dan css. Bisa dijadika referensi sebagai bahan pembelajaran kalian.
Bahan yang dibutuhkan hanya teks editor ( sublime/notepad++/vscode ) dan folder baru yang isinya file index.html dan index.css.
Pertama-tama, buat terlebih dahulu file index.html dan ketikkan kode di bawah ini.
<html><head>
<meta charset="UTF-8">
<title>Instagram Login Page</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<div class="get">
<p id="p1"> <b>Instagram</b><br>Find it for free on Google Play.</p>
<p id="p2">GET</p>
</div>
<div class="header">
<div class="top">
<div class="logo">
<p>Instagram</p>
<!-- <img src="instagram.png" alt="instagram" style="width: 175px;"> -->
</div>
<div class="fb">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<p> Log in with Facebook</p>
</div>
<div class="or">
<div class="line"></div>
<p>OR</p>
<div class="line"></div>
</div>
<div class="form">
<div class="input_field">
<input type="text" placeholder="Phone number, username, or email" class="input">
</div>
<div class="input_field">
<input type="password" placeholder="Password" class="input">
</div>
<div class="forgot">
<a href="#">Forgot password?</a>
</div>
<div class="btn"><a href="#">Log In</a></div>
</div>
<div class="dif">
</div>
</div>
<div class="signup">
<p>Don't have an account? <a href="#">Sign up</a></p>
</div>
</div>
<div class="foot">
<span>
<p class="p3">From</p>
<p class="p5">Candra
</p>
</span>
</div>
</div>
</body></html>Kemudian save file tersebut.
Lalu buat file baru lagi dengan nama index.css dan ketikkan kode css dibawah ini.
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
list-style: none;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}
body{
background: #fafafa;
font-size: 14px;
}
.wrapper .header{
max-width: 350px;
width: 100%;
height: auto;
margin: 50px auto;
}
.wrapper .header .top,
.wrapper .signup{
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 1px;
padding: 40px 40px 20px;
}
.wrapper .header .logo img{
display: block;
margin: 0 auto 35px;
}
.wrapper .header .logo p{
font-family: 'Parisienne', cursive;
font-size: 3.5em;
font-weight: bold;
display: block;
margin: 0 auto 35px;
text-align: center;
}
.wrapper .header .form .input_field{
margin-bottom: 5px;
}
.wrapper .header .form .input_field .input{
width: 100%;
background: #fafafa;
border: 1px solid #efefef;
font-size: 12px;
border-radius: 3px;
color: #262626;
padding: 10px;
}
.wrapper .header .form .input_field .input:focus{
border: 1px solid #b2b2b2;
}
.wrapper .header .form .btn{
margin: 10px 0;
background-color: #3897f0;
border: 1px solid #3897f0;
border-radius: 4px;
text-align: center;
padding: 5px;
}
.wrapper .header .form .btn a{
color: #fff;
display: block;
}
.wrapper .header .or{
display: flex;
justify-content: space-between;
align-items: center;
height: 15px;
margin: 15px 0 20px;
}
.wrapper .header .or .line{
width: 105px;
height: 2px;
background: #efefef;
}
.wrapper .header .or p{
color: #999;
font-size: 12px;
}
.fb{
display: flex;
justify-content: center;
align-items: center;
background: rgb(0,150,255);
padding: 6px;
}
.fb .fa{
Font-size: 1.4em;
Color: #fff;
}
.fb p{
color: #fff;
font-weight: bold;
margin-left: 10px;
}
.wrapper .forgot{
font-size: 12px;
text-align: right;
margin-top: 20px;
}
.wrapper .forgot a{
color: rgb(0,150,255);
font-size: 1.2em;
}
.wrapper .signup{
margin: 10px 0 20px;
padding: 25px 40px;
text-align: center;
color: #262626;
}
.wrapper .signup p{
color: #999999;
}
.wrapper .signup a{
color: #3897f0;
}
.foot{
position: sticky;
bottom: -10px;
width: 100%;
padding: 20px 40px;
text-align: center;
background: #f2f2f2;
border-top: 1px solid #cccccc;
}
.p3{
font-family: 'Montserrat', sans-serif;
font-size: 0.9em;
}
.p5{
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}
.get{
background: linear-gradient(45deg,#aa076b ,#f45c43) ! important;
position: absolute;
top: 0;
width: 100%;
padding: 10px 1em;
}
.get p{
color: #fff;
}
.get #p1{
font-size: 0.9em;
color: #fff;
float: left;
width: 70%;
}
.get #p2{
float: right;
text-align: center;
border: 1px solid #fff;
border-radius: 2px;
padding: 5px 1em;
}
Kemudian save lagi.
Untuk masing-masing kode diatas tidak dijelaskan disini ya, karena hanya bersifat sharing dan kalau dijelaskan akan sangat panjang.
Untuk menjalankannya kalian bisa drag file index.html ke browser kesayangan kalian. Jika code berhasil akan muncul tampilan seperti pada gambar dibawah ini.
Untuk kalian yang ingin bertanya tentang script code diatas, silahkan tinggalkan di komentar ya. Semoga informasi tentang script code login instagram ini dapat bermanfaat untuk kalian, terima kasih sudah berkunjung.
1 Comment