Assignment #: Task: Write A Program of Facebook (FB) "Login Page" Using Web Languages "HTML" and

Assignment # 01
Task: Write a program of Facebook (FB) “Login Page” using web languages “HTML” and
“CSS”.
19-Arid-3554
Student ID:
Sana Mehmood
Name:
BSCS 4th
Class:
Modern Programming Languages
Course Title:
CS-432
Course Code:
Miss Tayyaba Tariq
Submitted To:
22-05-2021
Submission Date:
Q#1:
Write a program of Facebook (FB) “Login Page” using web languages “HTML” and
“CSS”.
<html>
<head>

<link rel="icon" href="download.png">
<title>Facebook</title>
<style>
.i{
padding-left: 5px;
}
body{
margin: 0%;
padding: 0%;
}
.header{
height: 90px;
background-color: #3b5998;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
}
.facebook{
font-size: 42px;
font-family: Calibri;
color: white;
font-weight: bold;
position: relative;
margin-left: 280px;
top: 32px;
}
.T1{
position: relative;
float: right;
right: 120px;
top: -34px;

}
.T1 td{ color: white;
}
.T1 .c{
color: #9cb4d8;
cursor: pointer;
}
.yo{
background-color: #4267B2;
color: white;
width: 50px;
height: 25px;
transition: 0.2s all ease;
border: 1px solid #3B5998;
}
.yo:hover{
background-color: #49659F;
color: white;

}
.f1{
position: relative;
float:right;
right: 89px;
top: -335px;
}
.fn1{
border-radius: 5px;
border: 1px solid #BDC7D8;
color: black;
padding: 0px;
height: 40px;
width: 210px;
position: relative;
top: -15px;
}
.fn2{
border-radius: 5px;
color: black;
padding: 0px;
height: 40px;
width: 200px;
position: relative;
top: -15px;
}
.fn3{
border-radius: 5px;
color: black;
padding: 0px;
height: 40px;
width: 425px;
margin-top: 10px;
position: relative;
top: -15px;
}
.fn4{
border-radius: 5px;
color: black;
padding: 0px;
height: 40px;
width: 425px;
margin-top: 10px;
position: relative;
top: -15px;
}
.fn5{
border-radius: 5px;
color: black;
padding: 0px;
height: 40px;
width: 425px;
margin-top: 10px;
position: relative;
top: -15px;
}
select{
height:35px;
display: inline;
float:left;
position: relative;

}
.ac1{
width: 230px;
height: 40px;
font-weight: 0px;
background: #498838;
border-radius: 5px;
color: white;
font-size: 20px;
border-radius: 5px;
border-color: #5BAD45;

</style>
</head>
<body style=" background-color: #dfe3ee;">
<div>
<div class="header">
<div class="facebook">
facebook
</div>
<div>
<form class="T1">
<table>
<tr>
<td >
E-mail or phone Number
</td>
<td>
Password
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td><input type="password">
</td>
<td>
<input type="submit" class="yo" value="login" >
</td>
</tr>
<tr>
<td></td>
<td class="c">Forgotten account?</td>
</tr>
</table>
</form>
</div>
</div>
<div class="main2">
<p style="font-size: 25px; position:relative; left:270px; ">Facebook helps you connect and share
with the
<br>people in your life.
</p>
</div>
<div>
<img src="pic1.png" style="position: relative;
left:250px;">
</div>
<div>
<form class="f1" >
<table>
<tr>
<td>
<p style="font-size: 35px; position: relative;
top: -40px; font-family: Lucida Grande/Tahoma; line-height: 20px; font-weight: b
old;">Create an account</p>
</td>
</tr>
<tr>
<td style="font-size:20px; position: relative;
top: -20px;">
It's quick and easy.

</td>
</tr>
<tr>
<td>
<input type="text" placeholder="First Name" class="i fn1">

<input type="text" placeholder="Surname" class="i fn2">
</td></tr><br>
<tr> <td>
<input type="email" placeholder="Enter Your E-mail" class="i fn3">
</td></tr><br>
<tr> <td>
<input type="email" placeholder="Re-enter Your E-mail" class="i fn4">

</td></tr><br>
<tr> <td>
<input type="password" placeholder="Enter Your Password" class="i fn5">

</td></tr><br>
<td style="color: #90949c; font-size: 20px;">
<strong>
Birthday
</strong>
</td><br>
<tr><td><select>
<option> Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select>
<option >Month</option>
<option >Jan</option>
<option >Feb</option>
<option >Mar</option>
<option >Apr</option>
<option >May</option>
<option >June</option>
<option >July </option>
<option >Aug</option>
<option >Sep </option>
<option >Oct</option>
<option > Nov </option>
<option > Dec</option>
</select>
<select>
<option > Year</option>
<option > 2019</option>
<option > 2017 </option>
</select></td>
</tr>

<td style="color: #90949c; font-size: 20px;">
<br>
<strong>
Gender
</strong>
</td><br>
<tr> <td>
<input type="radio" value="Male" name="click-me"> <span style="font-size: 20px
;">Male</span>
<input type="radio" value="Female" name="click-me"> <span style="font-size: 20
px;">Female</span>
<input type="radio" value="Custom" name="click-me"> <span style="font-size: 20
px;">Custom</span>
</td></tr>
<tr>

<td>
<div>
<p style="font-size: 10px;">
By clicking Sign Up, you agree to our<a style="font-size: 10px;" href="
#">Terms, Data Policy</a> and<p style="font-size: 10px;"> <a href="#" style="font-size: 10px;
">Cookie Policy. </a>You may receive SMS notifications from us and<p style="font-size: 10px;
">can opt out at any time.</p> </p></p>
<br> </div>
<button class="ac1">Sign Up</button><br><br>
<a href="#" style="float: left;"><p>Create a Page</p></a><p>for a celebrity, b
rand or business.</p>
</td>
</tr>
</table>
</form>
</div>

</div>
</body></html>
Output:

Assignment #: Task: Write A Program of Facebook (FB) "Login Page" Using Web Languages "HTML" and

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Assignment #: Task: Write A Program of Facebook (FB) "Login Page" Using Web Languages "HTML" and

Uploaded by

Copyright:

Available Formats

Assignment # 01

You might also like