Project #2 (Final Exam) Facebook home page
Project #2 (Final Exam)
HTML Code:-
<html>
<title>facebook</title>
<head>
<link href="C:\Users\Administrator\Desktop\Project2\home.css" rel="stylesheet"/>
<meta name="Description" content="facebook"/>
</head>
<body>
<div class="fb-header-base">
<div class="fb-header">
<div id="img1" class="fb-header"><img src="C:\Users\Administrator\Desktop\Project2\FB.png" /></div>
<div id="form1" class="fb-header">Email or Phone<br>
<input placeholder="Email" type="mail" name="name" /><br>
<p><input type="checkbox" />keep me logged in</div></p>
<div id="form2" class="fb-header">Password<br>
<input placeholder="Password" type="password" name="password" /><br>
<p><a href ="https://www.pirple.com/">Forgotten your password?</a>
</p><input type="submit" class="submit1" value="login"/>
</div>
</div>
</div>
</div>
<input type="submit" class="submit1" value="login"/>
<div class="fb-body">
<div id="intro1" class="fb-body">Facebook helps you connect and share with the <br>
people in your life.
</div>
<div id="intro2" class="fb-body">Create an account</div>
<div id="img2" class="fb-body"><img src="C:\Users\Administrator\Desktop\Project2\fb2.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="E-mail" type="text" id="mailbox" /><br>
<input placeholder="Contect number" type="text" id="mailbox" /><br>
<input placeholder="Password" type="password" id="mailbox" /><br>
<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><hr>
<p id="intro5">Create a Page for a celebrity, band or business.</p>
</div>
</div>
<div class="fb-body-footer">
<div id="fb-body-footer-base" class="fb-body-footer">English (UK)<br><hr>
facebook © 2020 Design by Pirple <a href ="https://www.pirple.com/">www.pirple.com</a>
</div>
</div>
</body>
</html>
CSS Code:-
.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);
}
.fb-header{
width:100%;
height:90px;
position:absolute;
background:#3d5b99;
top:0;
left:0;
color:white;
z-index:7;
font-family:verdana;
}
#img1{
height:50px;
width:100px;
top:20px;
}
#form1{
left:750px;
height:60px;
width:180px;
top:20px;
font-family:verdana;
font-size:12px;
}
#form2{
left:940px;
height:60px;
width:250px;
top:20px;
font-family:verdana;
font-size:12px;
}
.submit1{
left:1130px;
top:35px;
background:#5b7bc0;
color:white;
position:absolute;
z-index:20;
height:22px;
width:50px;
cursor:pointer;
}
.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;
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:200px;
height:40px;
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:408px;
height:40px;
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;
}
HTML Code:-
<html>
<title>facebook</title>
<head>
<link href="C:\Users\Administrator\Desktop\Project2\home.css" rel="stylesheet"/>
<meta name="Description" content="facebook"/>
</head>
<body>
<div class="fb-header-base">
<div class="fb-header">
<div id="img1" class="fb-header"><img src="C:\Users\Administrator\Desktop\Project2\FB.png" /></div>
<div id="form1" class="fb-header">Email or Phone<br>
<input placeholder="Email" type="mail" name="name" /><br>
<p><input type="checkbox" />keep me logged in</div></p>
<div id="form2" class="fb-header">Password<br>
<input placeholder="Password" type="password" name="password" /><br>
<p><a href ="https://www.pirple.com/">Forgotten your password?</a>
</p><input type="submit" class="submit1" value="login"/>
</div>
</div>
</div>
</div>
<input type="submit" class="submit1" value="login"/>
<div class="fb-body">
<div id="intro1" class="fb-body">Facebook helps you connect and share with the <br>
people in your life.
</div>
<div id="intro2" class="fb-body">Create an account</div>
<div id="img2" class="fb-body"><img src="C:\Users\Administrator\Desktop\Project2\fb2.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="E-mail" type="text" id="mailbox" /><br>
<input placeholder="Contect number" type="text" id="mailbox" /><br>
<input placeholder="Password" type="password" id="mailbox" /><br>
<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><hr>
<p id="intro5">Create a Page for a celebrity, band or business.</p>
</div>
</div>
<div class="fb-body-footer">
<div id="fb-body-footer-base" class="fb-body-footer">English (UK)<br><hr>
facebook © 2020 Design by Pirple <a href ="https://www.pirple.com/">www.pirple.com</a>
</div>
</div>
</body>
</html>
CSS Code:-
.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);
}
.fb-header{
width:100%;
height:90px;
position:absolute;
background:#3d5b99;
top:0;
left:0;
color:white;
z-index:7;
font-family:verdana;
}
#img1{
height:50px;
width:100px;
top:20px;
}
#form1{
left:750px;
height:60px;
width:180px;
top:20px;
font-family:verdana;
font-size:12px;
}
#form2{
left:940px;
height:60px;
width:250px;
top:20px;
font-family:verdana;
font-size:12px;
}
.submit1{
left:1130px;
top:35px;
background:#5b7bc0;
color:white;
position:absolute;
z-index:20;
height:22px;
width:50px;
cursor:pointer;
}
.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;
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:200px;
height:40px;
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:408px;
height:40px;
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;
}
Comments
Post a Comment