HTML--
<html>
<head>
<title>
Facebook.com/yash
</title>
<link type="text/css" rel=stylesheet href="DESIGN.css"/>
</head>
<body style="height:815px">
<div class="headLine"></div>
<div class="header"></div>
<div id="form1" class="header">
Email or Username <br>
<input placeholder="Email" type="email" name="name"/><br>
<input type="checkbox"/> Keep me logged in
</div>
<div id="form2" class="header">
Password <br>
<input placeholder="Password" type="password" name="password" /><br>
Forgotten my password!</div>
<div><input type="submit" class="submit" value="login"/>
</div>
<div class="bodyx">
<div id="intro1" class="bodyx">Facebook helps you connect and share<br>
with people and universities.</div>
<div id="intro2" class="bodyx"> Create an accont </div>
<div id="img2" class="bodyx"><img src="connect%20world.png"/></div>
<div id="form3" class="bodyx">
<input placeholder="Firstname" type="text" id="namebox" name="name1"/><input placeholder="Lastname" type="text" id="namebox" />
<input placeholder="Email" type="text" id="mailbox"/>
<input placeholder="Password" type="password" id="mailbox" />
<input type="date" placeholder="mm/dd/yyyy" id="namebox" /> <br><br>
<input type="radio" name="sex" value="male"/>Male
<input type="radio" name="sex" value="female"/>Female<br><br>
By clicking Create an account, you agree to our Terms.<br><br>
<br>
<br>
<hr>
CEO - Mark Zuckerberg.<br>
CFO - Eduardo Saverin.
</div>
<input type="submit" class="button2" value="Signup"/>
<div class="body1">
<div id="conclu1" class="body1"> English UK....<br><hr>Learn more......</div>
</div>
</body>
</html>
CSS ---
body{
background: linear-gradient(to bottom right,white, #bcbdc4 );
height:4000px;
}
#connect{
background-color: whitesmoke;
}
.headLine{
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
color: white;
z-index: 7;
-webkit-box-shadow:0 3px 8px rgba(0,0,0, .25);
}
.header{
position: fixed;
width: 100%;
height: 100px;
background: #142170;
top: 0;
left: 0;
color: white;
z-index: 7;
}
#connect{
position: absolute;
top: 250px;
left: 500px;
}
#form1{
left: 700px;
height: 60px;
width: 180px;
top:20px;
}
#form2{
left: 895px;
top: 20px;
height: 60px;
width: 200px;
}
.submit{
top: 40px;
left: 1080px;
background: white;
color: #142170;
position: fixed;
z-index: 20;
height: 22px;
width: 50px;
cursor: pointer;
}
.bodyx{
left: 0;
top: 100px;
width: 100%;
height:560px;
position:absolute;
}
#intro1{
top: 40px;
left: 100px;
font-family: verdana;
font-size: 28px;
color: #142170;
height: 75px;
width: 550px;
}
#intro2{
top: 40px;
left: 700px;
font-family: verdana;
font-size: 50px;
color: #142170;
height: 60px;
width: 500px;
}
#img2{
top: 130px;
left: 100px;
height: 250px;
widows: 550px;
}
#form3{
top: 150px;
left: 700px;
font-family: verdana;
font-size: 20px;
color: #142170;
width: 450px;
height:495px;
}
#namebox{
width: 200px;
height: 50px;
border-radius:10px/10px;
background: white;
padding:10px;
font-size: 20px;
}
#mailbox{
width: 400px;
height: 50px;
border-radius:10px/10px;
background: white;
padding:10px;
font-size: 20px;
}
.button2{
top:650px;
left:700px;
background:green;
color: white;
font-size: 20px;
position:absolute;
height: 50px;
width: 100px;
border-radius: 15px/15px;
outline:#bcbdc4 ;
cursor: pointer;
}
.body1{
position:absolute;
left: 0px;
top: 750px;
widows: 100%;
height: 80px;
background: white;
}
#conclu1{
width: 930px;
top: 15px;
left: 200px;
color: #bcbdc4;
height: 60px;
}
Comments
Post a Comment