Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
ini punya saya ada putih putih di dekat headernya knp ya itu dan lagi kenapa punya saya jadi begini
saya ngikutin tutorial membuat homepage facebook tapi situasinya gk sama kaya tutorial sekolah koding
[html]
<!DOCTYPE html>
<html>
<head>
<title>facebook - Log in or Sign in</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<head>
<body>
<!-- 1. Header -->
<div class="content content-header clearfix">
<div class="wrapper">
<h1>facebook</h1>
<form action="">
<div class="group-form">
<label for="email">Email or Phone</label>
<input type="email" name="email" id="email">
<input type="checkbox" name="remember">
<a href="">Keep me logged in</a>
</div>
<div class="group-form">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<a href="">Forgot account?</a>
</div>
<div class="group-form">
<input type="submit" value="Log In">
</div>
</form>
</div>
</div>
<!-- 2. Content -->
<div class="content content-middle clearfix">
<div class="wrapper">
<!-- 2.1 info -->
<div class="middle-left">
<h2>Content with friends and the<br>world around you on facebook.</h2>
<ul>
<li>See photos and update<span> from friends in News Feed.</span></li>
<li>Share what's new<span> in your life on your Timeline.</span></li>
<li>Find more<span> of what you're looking for with Facebook Search.</span></li>
</ul>
</div>
<!-- 2.1 form pendaftaran -->
<div class="middle-right">
<h3>Sign Up</h3>
<p>It's free and always will be. </p>
<form action="">
<input type="text" placeholder="First name" class="inline">
<input type="text" placeholder="Last name" class="inline inline_last">
<input type="email" placeholder="Email or mobile number">
<input type="email" placeholder="Re-enter Email or mobile number">
<input type="password" placeholder="New Password">
<p>Birthday</p>
<select name="Month" id="">
<option value="">Month</option>
<option value="">Jan</option>
<option value="">Feb</option>
</select>
<select name="Day" id="">
<option value="">Day</option>
<option value="">1</option>
<option value="">2</option>
</select>
<select name="Year" id="">
<option value="">Year</option>
<option value="">1998</option>
<option value="">1999</option>
</select>
<a href="" id="birthday_info">Why do I need to provide my birthday?</a>
<input type="radio" name="gender" id="gender_f">
<label for="gender_f">Female</label>
<input type="radio" name="gender" id="gender_m">
<label for="gender_m">Male</label>
<p id="register_info">
By clicking Sign Up, you agree to our
<a href="">Terms</a> and that you have read our
<a href="">Data Policy</a>
, including our <a href="">Cookie Use.</a>
</p>
<input type="submit" value="Sign Up">
</form>
<p><a href="">Create a Page</a> for a celebrity, band or business</p>
</div>
</div>
</div>
<!-- 3. Footer -->
</body>
</html>
[/html]
[CSS]
*{
padding:0px;margin:0px;
font-family:sans-serif;
box-sizing:border-box;
}
.wrapper{
width:900px;
margin:0 auto;
}
h1{
float:left;
font-size:40px;
padding-top:10px;
}
.content-header{
background:#3a5795;
color:white;
padding:10px 0;
}
.clearfix:after{
content:"";
display: table;
clear:both;
}
.content-header form{
float:right;
}
.content-header label{
font-size:12px;
padding-bottom:2px;
border-bottom:1px solid black;
}
.content-header label,
.content-header input{
display:block;
}
.content-header input[type="checkbox"]{
display:inline-block;
}
.group-form{
float:left;
margin-left:10px;
}
.group-form a{
color: #9daccb;
font-size:12px;
text-decoration:none;
}
.content-header input[type="submit"]{
background-color:#5972a8;
color:white;
font-weight:bold;
padding: 5px;
border:1px solid black;
font-size:12px;
margin-top:10px;
}
/*-- Content Middle --*/
.content-middle{
background:#edf0f5;
}
.content-middle .middle-left,
.content-middle .content-right{
float:left;
width:50%;
}
h2{
margin-top:50px;
margin-bottom:40px;
}
.content-middle ul li{
list-style:none;
font-weight:bold;
margin-bottom:30px;
}
.content-middle ul li span{
font-weight:normal;
margin-left:10px;
color:grey;
}
h3{
margin-top:10px;
font-size:30px;
}
.middle-right p:nth-child(2){
color:grey;
margin-bottom:10px;
font-size:15px;
}
.middle-right input{
border-radius : 5px;
border: 1px solid grey;
padding : 10px;
width:100%;
margin-bottom:10px;
}
.middle-right input.inline{
float:left;
width:49%;
margin-right:2%;
}
.middle-right input.inline_last{
margin-right:0%;
}
#birthday_info{
font-size:10px;
color:grey;
}
.input[type=radio]{
display:inline-block;
width:20px;
margin-top:15px;
}
[/CSS]
0
