Thursday, 21 September 2017

How to make layout of facebook page part 1 header

HTML CODE:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Facebook-Login or SignUp</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="wrapper">

<header>
<div class="cheader" > 
<div style="width:20%;height:100px;float:left"> </div>
<div style="width:80%;height:100px;float:left "> 
<img src="img/Facebooklogo.png" style="width:50%;height:100px"/>
</div>
</div>

<div class="cheader" > 

<div class="cheader2">
<p>Email or Phone 
<br/>
<input type="text"/>

</p>
 </div>
<div class="cheader2"> 
<p>Password
<br/>
<input type="password"/>

</p>
</div>
<div class="cheader2"> 
<button style="background-color:rgb(59,89,152);color:white;margin-top:35px;"> Login</button>
</div>
<div class="cheader2"> </div>

</div>

 </header>

<div id="maincontent"> </div>

<div id="footer"> </div>


</div>


</body>
</html>

CSS CODE:

@charset "utf-8";
/* CSS Document */

body
{ margin:0 auto;
padding:0px;
}
#wrapper
{
width:100%;
height:auto;
background-color:#999; 
}
header
{
width:100%;
height:100px;
background-color:rgb(59,89,152); 
}
#maincontent
{
width:100%;
height:800px;
background-color:#fff; 
}
#footer

{
width:100%;
height:200px;
background-color:#903; 
}
.cheader
{
width:50%;
height:100px;
float:left;
}
.cheader2
{
width:25%;
height:100px;
float:left;
color:white;
}

1 comment:

  1. Thank you so much man. Really saved my assignment. More power to you and I hope you will still continue to teach and help people. God bless you!

    ReplyDelete

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 ...