SIMPLE DESIGN OF FACEBOOK LOGIN PAGE USING HTML AND CSS PART:-3

-
HOW TO CREATE FACEBOOK LOGIN PAGE USING HTML AND CSS

Hello guys,
Today i gonna show u how to create facebook login page using css and html. Before we get started read its part1 and part2 by the link given below. Hope u gonna enjoy it. Let's Get started.


The Program begins:-

<!doctype html>
<html>
<title> Log In To Facebook </title>
<style>
*{
margin:0;
}
#upper{
height:80px;
background-color:#376092;
padding:10px;
color:#fff;
}




#d1{
margin-top:-30px;

width:750px;
background-color:#376092;
flex-direction:column;
justify-content:center;
align-items:center;
float:right;
color:#fff;
}
#d2{
padding:50px;
float:right;
}
.in{
margin-top:25px;
margin-right:15px;
height:30px;
height:40px;
}
#s1{
background-color:rgb(0,255,0);
color:#fff
}

#img{
float:left;
margin-left:50px;
padding:50px;
width:500px;
height:500px;
}



</style>
<head>



</head>
<body>
<div id="upper">
<h1>Facebook</h1>



<div id="d1" style=""> 
<div style="border:1px solid;height:40px;"> 
<div style="float:left">Email Or Phone<br> <input></div>
<div style="float:left;margin-left:40px;">Password<br><input></div><br>
<div style="float:left;margin-left:40px;"><input type="submit" value="Log in"></div>
</div><br>
<div style="margin-left:40px;">Forgotten account</div>
</div>
</div>

<div><img src="file:///C:/Users/Lenovo/Desktop/fb.png" id="img"/></div>

<div id="d2">
<div><h1>Create an account<h1></div>
<div><p>It's quick and easy</p>
</div>
<form>
<input  class="in" placeholder="Firstname">
<input  class="in" placeholder="Surname"><br>
<input  class="in" placeholder="Mobile No Or Email Address"><br>
<input  class="in" placeholder="New Password"><br><br>
<label>Birthday</label><br><br>
<select name="date">
<option>Date</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 name="Months">
<option>Months</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select name="Year">
<option>Year</option>
<option>1950</option>
<option>1951</option>
<option>1952</option>
<option>1953</option>
<option>1954</option>
<option>1955</option>
<option>1956</option>
<option>1957</option>
<option>1958</option>
<option>1959</option>
<option>1960</option>
<option>1961</option>
<option>1962</option>
<option>1963</option>
<option>1964</option>
<option>1965</option>
<option>1966</option>
<option>1967</option>
<option>1968</option>
<option>1969</option>
<option>1970</option>
<option>1971</option>
<option>1972</option>
<option>1973</option>
<option>1974</option>
<option>1975</option>
<option>1976</option>
<option>1977</option>
<option>1978</option>
<option>1979</option>
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
</select><br><br>
<label>Gender<label><br>
<input class="in" type="radio">Male
<input class="in" type="radio">Female
<input class="in" type="radio">Custome<br><br>

<p>Clicking Sign Up, you agree to our Term, Data Policy and Cookie Policy.<br>
 You may receive SMS notifications from us and can opt out at any time.</p><br><br>

<input id="s1" type="submit" value="Sign Up">








</div>
</form>




</body>
</html>

OUTPUT :-
Pic at :- https://drive.google.com/open?id=1Vsoo6NmBETE8OEWYKfjZoFm042U-xymv



more blogs at:- https://darkwriter17.blogspot.com


Comments

Post a Comment

Popular posts from this blog

DATABASE ::: TREE TRAVERSAL

-
Image
Binary Tree Traversal | Inorder, Preorder and                                     Postorder Binary tree traversal can be done in the following ways. Inorder traversal Preorder traversal postorder traversal Consider the given binary tree, Inorder Traversal: 7 9 4 2 5 1 3 6 8 Preorder Traversal: 1 2 4 7 9 5 3 6 8 Postorder Traversal: 9 7 4 5 2 8 6 3 1 1/5 Inorder Traversal: For binary search trees (BST), Inorder Traversal specifies the nodes in non-descending order. In order to obtain nodes from BST in non-increasing order, a variation of inorder traversal may be used where inorder traversal is reversed. Preorder Traversal: Preorder traversal will create a copy of the tree. Preorder Traversal is also used to get the prefix expression of an expression. Postorder Traversal: Postorder traversal is used to get the postfix expression of an expression giv Algorithm for binary tree traversal Inorder(root) Traverse the left sub-tree, (recursi
Read more

Simple Degin Using HTML And CSS Part-2

-
Image
A Home Page Using HTML And CSS Today We are going to Make a beautiful home page by using HTML and CSS. In the given program i used two picture one for background aand one for logo. I gonna give the link of that pictures. We gonna write this program in "notepad++ or Sublime" or any other programming coder:-  And We will save it with ((anyname of u want).html). And run it in any Browser. So let's Start :- Let's See what we are going to make It's Look Beautiful. For the above Home We need to write some program in HTML and give Some Effect from CSS. <!DOCTYPE html> <html> <head> <title>DarkWriter Creations</title> <style> *{ margin: 0; padding: 0; font-family:century gothic; } header{ background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("file:///C:/Users/Karan/Desktop/New%20folder/42469-assassins-creed-syndicate-1920x1080-game-wallpaper.jpg"); height: 100vh;
Read more

Front End Processor

-
Image
Front End Processor (FEP) A  front end processor  (FEP), or a  communications processor , is a small-sized  computer  which interfaces to the  host computer  a number of  networks , such as  SNA , or a number of  peripheral devices , such as  terminals ,  disk units ,  printers  and  tape units . Data is transferred between the host computer and the front end processor using a high-speed  parallel interface . The front end processor communicates with peripheral devices using slower  serial interfaces , usually also through communication networks. The purpose is to off-load from the host computer the work of managing the peripheral devices, transmitting and receiving messages, packet assembly and disassembly, error detection, and error correction. [1]  Two examples are the  IBM 3705 Communications Controller  and the  Burroughs  Data Communications Processor. MORE BLOGS AT:-  https://darkwriter17.blogspot.com Sometimes FEP is synonymous with a  communications controller , alt
Read more