How To Run Code:-
Copy The Code
Paste On Your Editor
Run It
Code:-
login:-
<!doctype html>
<html>
<head>
<center>
<div class="box">
<h1 class="Facebook">
</h1>
<input type="text" class="name" placeholder="Username Or Email Address"><br><br>
<input type="password" class="password" placeholder="Password"><br>
<br><br><a href="#">
<input type="button" class="login" value="Login"><br></a>
<a href="#"><p>Forgotten Password</p></a><hr class="line"><br><a href="create-account.html">
<input type="button" class="new" value="Create An Account">
</a>
</div>
</center><br><br><br><br><br>
<div class="downline"><center><h1 class="downtext">This Is Created By <a href="www.webdesignerpriyanshukumar.blogspot.com">Web Designer Priyanshu Kumar</a></h1></center></div>
</head>
<style>
.downtext{
color:white;
}
.downline{
width:100%;
height:40px;
nav-down:200px;
background-color:black;
}
.Facebook{
color: rgb(25, 149, 250);
font-size:50px;
}
.new{
width:300px;
height:45px;
background-color: rgb(6, 136, 12);
border: 1px;
font-size:30px;
color:cornsilk;
border-radius: 7px;
}
.line{
width:350px;
}
.login{
width:250px;
height:45px;
background-color: rgb(4, 0, 255);
border: 1px;
font-size:30px;
color:cornsilk;
border-radius: 8px;
}
.name{
Width:300px;
height:35px;
margin: 8px 0;
display: inline-block;
border: 1px solid black;
border-radius: 5px;
box-sizing: border-box;
}
.password{
Width:300px;
height:35px;
margin: 8px 0;
display: inline-block;
border: 1px solid black;
border-radius: 5px;
box-sizing: border-box;
}
</style>
</html>
create-account:-
<!doctype html>
<html>
<title>Facebook Style | priyanshu kumar</title>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div class="fb-header-base">
</div>
<div class="fb-header">
<div id="img1" class="fb-header"><h1>Facebook</h1></div>
<div id="form1" class="fb-header">Email or Phone<br>
<input placeholder="Email" type="mail" name="name" /><br>
<input type="checkbox" />keep me logged in</div>
<div id="form2" class="fb-header">Password<br>
<input placeholder="Password" type="password" name="password" /><br>
Forgotten your password?
</div>
</div>
</div>
<input type="button" class="submit1" value="login" />
<div class="fb-body">
<div id="intro1" class="fb-body">This Is Created By Priyanshu Kumar <br>
</div>
<div id="intro2" class="fb-body">Create an account</div>
<div id="img2" class="fb-body"><img src="E:\my all tools\app coding items\174834-social-media-logos\174834-social-media-logos\png\036-facebook.png" /></div>
<div id="intro3" class="fb-body">It's free and always will be.</div>
<div id="form3" class="fb-body">
<input placeholder="First Name" type="text" id="namebox" name="name1"/>
<input placeholder="Last Name" type="text" id="namebox"/> <br>
<input placeholder="Email" type="text" id="mailbox" /><br>
<input placeholder="Mobile No" type="text" id="mailbox" /><br>
<input placeholder="Password" type="password" id="mailbox" /><br>
<input placeholder="Re- enter password" type="password" id="mailbox"/>
<input type="date" id="namebox" /><br><br>
<input type="radio" id="r-b" name="sex" value="male" />Male
<input type="radio" id="r-b" name="sex" value="female" />Female<br><br>
<p id="intro4">By clicking Create an account, you agree to
our Terms and that you have read our Data Policy,
including our Cookie Use.</p>
<input type="submit" class="button2" value="Create an account" />
<br>
<p id="intro5">Create a Page for a celebrity, band or business.</p>
<hr><a href="login.html">
<input type="button" class="login" value="login"></a>
</div>
</div>
<style>
body{
background-image: url("grid.png");
height:750px;
}
.fb-header-base{
width:100%;
height:90px;
position:absolute;
top:0;
left:0;
color:white;
z-index:7;
font-family:verdana;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.login{
width:50%;
height:45px;
background-color: blue;
border-radius:7px;
border:1px;
font-size:40px;
color:white;
}
.fb-header{
width:100%;
height:90px;
position:absolute;
background:#3d5b99;
top:0;
left:0;
color:white;
z-index:7;
font-family:verdana;
}
#img1{
left:178px;
height:50px;
width:100px;
top:25px;
}
#form1{
left:750px;
height:60px;
width:180px;
top:20px;
font-family:verdana;
font-size:12px;
}
#form2{
left:940px;
height:60px;
width:25px;
top:20px;
font-family:verdana;
font-size:12px;
}
.submit1{
left:1130px;
top:35px;
background:#5b7bc0;
color:white;
position:fixed;
z-index:20;
height:22px;
width:50px;
cursor:pointer;
border:1px;
}
.fb-body{
position:absolute;
left:0px;
top:90px;
width:100%;
height:645px;
}
#intro1{
left:178px;
top:20px;
font-family:verdana;
font-size:20px;
color:#142170;
height:75px;
width:550px;
}
#intro2{
left:750px;
top:20px;
font-family:verdana;
font-size:30px;
color:#000;
font-weight:bold;
height:75px;
width:500px;
}
#img2{
top:130px;
left:178px;
width:537px;
height:195px;
}
#intro3{
left:750px;
top:70px;
font-family:verdana;
font-size:18px;
color:#000;
height:50px;
width:300px;
}
#form3{
top:120px;
left:750px;
font-family:verdana;
font-size:20px;
color:#142170;
width:450px;
height:495px;
}
#namebox{
width:150px;
height:30px;
border-radius:5px 5px 5px 5px;
background:white;
padding:10px;
font-size:18px;
margin-top:8px;
border-width: 1px;
border-style:solid;
border-color: gray;
}
#mailbox{
width:330px;
height:30px;
border-radius:5px 5px 5px 5px;
background:white;
padding:10px;
font-size:18px;
margin-top:8px;
border-width: 1px;
border-style:solid;
border-color: gray;
}
#r-b{
font-size:12px;
height:15px;
width:15px;
}
.button2{
width:250px;
height:40px;
left:750px;
top:625px;
background:green;
font-family:verdana;
font-size:18px;
color:white;
border-radius:5px 5px 5px 5px;
border-width: 1px;
border-style:solid;
border-color: gray;
cursor:pointer;
outline:none;
}
#intro4{
font-family:verdana;
font-size:12px;
color:gray;
}
#intro5{
font-family:verdana;
font-size:14px;
color:gray;
}
.fb-body-footer{
width:100%;
position:absolute;
left:0px;
height:80px;
background:white;
top:700px;
}
#fb-body-footer-base{
width:900px;
top:15px;
left:200px;
color:blue;
height:60px;
}
</style>
</body>
</html>
0 Comments