- what is CSS?
Ans: CSS is one type of animation. Which is used in html for preparing web pages.
“CODING IS GIVEN BELOW”
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>FACEBOOK</title>
<style>
*{box-sizing: border-box;}
body{margin: 0px;background-color:rgb(231,228,228);font-family: Arial;}
.one{width: 100%;height: 80px;background-color: #3b5993;}
.head{color: white;margin-left: 485px;margin-top: 10px;position: absolute;}
.head1{color: white;margin-left: 670px;margin-top: 10px;position: absolute;}
.h{margin-left: 450px;margin-top: 30px;position: absolute;}
.h1{margin-left: 636px;margin-top: 30px;position: absolute;}
.frgt{margin-left: 636px;margin-top: 60px;position: absolute;color: white;}
.b1{margin-left: 845px;margin-top: 28px;position: absolute;padding: 2px;background-color: #072561;}
.img1{margin-left: 200px;margin-top: -30px;margin-bottom:30px ;}
.img{color: rgb(4,4,131); margin-left: 100px;float: left;}
.btn{background-color: rgb(12,128,12);color: white;border: none;border-radius: 1px;padding: 12px;width: 100px;}
.tx{width: 300px;padding: 12px;border-radius: 6px;font-size: 16px;border: 2px solid rgb(207,204,204)}
.txt{width: 300px;padding: 12px;border-radius: 6px;font-size: 16px;border: 2px solid rgb(207,204,204)}
.li{background-color: #3b5993;color: white;}
.tb1{color: white;}
.a{text-decoration: none;color: rgb(139,134,134);}
.button{background-color: #3b5993;color: white;border: 1px solid black;}
.o{width 300px;padding: 12PX;border-radius: 6px;}
.l{font-size: 13px;}
</style>
</head>
<body>
<div class=”one”>
<span><img src=”fac.png” width=”150px” height=”150px” class=”img1"></span>
<span class=”head”>Email or phone</span>
<span> </span>
<span class=”head1">Password</span>
<span class=”h”><input type=”text”></span>
<span> </span>
<span class=”h1"><input type=”password”></span>
<span class=”b1"><input type=”button” value=”Login” class=”button”></span>
<span class=”frgt” ><a href=”” class=”a”>Forget Password</a></span>
</div>
<div class=”img”>
<h2>Facebook helps to connect and share with the </br> people in your life.</h2>
<img src=”po.png” width=”600px” height=”220px”>
</div>
<div class=”left”>
<form>
<table>
<tr>
<td>
<h1>Create an account</h1>
<h3>It’s quick and easy.</h3>
</td>
</tr>
<tr>
<td><span><input type=”text” placeholder=”First name” class=”txt”></span></td>
<td><span class=”td2"><input type=”text” placeholder=”Surname” class=”txt”></span></td>
</tr>
<tr>
<td>
<input type=”text” placeholder=”Mobile number or Email address” class=”tx”>
</td>
</tr>
<tr>
<td><input type=”text” placeholder=”New password” class=”tx”></td>
</tr>
<tr>
<td style=”color: grey;”>
<b>Birthday</b>
</td>
</tr>
<tr>
<td class=”t”>
<select>
<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>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>April</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>2000</option>
<option>2001</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>
</select>
</td>
</tr>
<tr>
<td style=”color: grey;”><b>Gender</b></td>
</tr>
<tr>
<td class=”o”>
<input type=”radio”>Male
<input type=”radio”>Female
<input type=”radio”>Custom
</td>
</tr>
<tr>
<td style=”color: grey;” class=”l”>
By clicking Sign Up, you agree to our Terms,</br>
Data Policy and Cookie Policy you may </br>receive SMS notification from us </br>and can opt at any time </td>
</td>
</tr>
<tr>
<td>
<button class=”btn”>Sign Up</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
If any doub you want to ask please write in comment so i can clear your doubt.
NOTE: It is also created by java script and j query.
NEXT COVER TOPIC: “Netflix” login page using “Java Script”.