Friday, 20 October 2017

How to Make FaceBook login Page using Bootstrap (part 2/2)




<!doctype html>

<html>

<head>



<title>Facebook.com</title>

<meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">

    <meta name="author" content="">



<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>

<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>

<link type="text/css" rel="stylesheet" href="css/bootstrap-grid.css"/>

<link type="text/css" rel="stylesheet" href="css/bootstrap-reboot.css"/>

<link type="text/css" rel="stylesheet" href="css/bootstrap-reboot.min.css"/>

<link type="text/css" rel="stylesheet" href="css/bootstrap-grid.min.css"/>





<link rel="shortcut icon" href="img/icon.png">





<style>



td{

padding:8px;

}



</style>





</head>



<body>









<div class="row" style="background-color:#000;height:100px;">



<div class="col-md-6" style="height:100px; background-color:rgb(47,69,117)">



<img src="img/logo.png" style="width:200px; height:60px;margin-left:100px; margin-top:20px;"/>



 </div>



<div class="col-md-6" style="height:100px;  background-color:rgb(47,69,117">



<div class="row">

<div class="col-4">



<p style="color:white;">Email</p>

<input type="text"/><br>

<span style="color:white;"><input type="checkbox"/>Keep Me log In </span>



</div>







<div class="col-4" style="margin-left:20px;">



<p style="color:white;">Password</p>

<input type="password"/><br>

<span style="color:white;">Forgotten Password? </span>





</div>





</div>



 </div>

















</div>







<div class="row" style="background-color:blue;height:900px;">



<div class="col-md-7" style="background-color:rgb(226,230,241);height:900px">



<img src="img/facebook-connecting-people.jpg" style="width:100%; height:400px; margin-top:50px"/>





 </div>



<div class="col-md-5" style="height:900px;background-color:rgb(227,229,241)">



<h1> Create an Account</h1>

<br>

<h3> It's Free and always will be</h3>

<form style="margin:0 auto;width:90%;"> 



<table>



<tr>



<td style="width:50%"> <input type="text" placeholder="First Name" class="form-control"/ ></td>

<td style="width:50%"> <input type="text" placeholder="last Name" class="form-control"/ ></td>



 </tr>





 <tr> <td colspan="2"> <input type="text" placeholder="Email" class="form-control"/ ></td>

</tr>





 <tr> <td colspan="2"> <input type="text" placeholder="Re-Enter Email" class="form-control"/ ></td>

</tr>



 <tr> <td colspan="2"> <input type="password" placeholder="Password" class="form-control"/ ></td>

</tr>



 <tr> <td > <input type="password" placeholder="yy-mm-dd" class="form-control"/ ></td>

</tr>



<tr>

<td>

<span style="font-size:24px;color:#06F"> <input type="radio" >Male </span>



<span style="font-size:24px;color:#06F"><input type="radio">Female</span>

</td>

 </tr>





 <tr> <td><p>To make your document look professionally produced, Word provides header, footer, cover  </p> </td> </tr>





 <tr> <td> <button class="btn btn-lg btn-success" > Create An Account</button> </td> </tr>



</table>







</form>





</div>







</div>















































<script src="js/bootstrap.js">



</script>



<script src="js/bootstrap.min.js">



</script>





</body>



</html>
-

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Pass Dynamically Added Html Table Records List To Controller In Asp.net MVC

Controller Code: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ...