Use this inside head tag
<style type="text/css">
body {
width: 940px;
margin: 0 auto;
font: 10pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
background-color: #fafafa;
}
/*html5 semantics tags */
article, aside, figure, footer, header, hgroup, menu, nav, section
{ display: block; }
/* light css reset */
* { margin : 0; padding : 0; }
h2, h3, h4, h5, p, ul, ol { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}
/* =page level container */
#pageContainer {
margin: 0px auto 0px auto;
width: 960px;
}
#pageHeader {
width:960px;
height:120px;
color:#0099CC;
background-color: #000;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #ba3051;
}
.logo {
font-family: Arial, Helvetica, sans-serif;
font-size: 52px;
color: #FFF;
padding-top: 20px;
font-weight: 700;
padding-left: 20px;
}
#pageNav {
width: 960px;
height: 50px;
background-color: #999;
background-color:#eaeaea;
}
#pageNav ul {
margin: 0px;
padding: 0px;
}
#pageNav ul li {
float: left;
list-style-type: none;
display: inline;
padding-top: 10px;
padding-right: 50px;
padding-left: 10px;
}
#pageNav ul li a {
color: #000;
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
}
#pageSection {
background-color: #f2f2f2;
height: 300px;
width: 660px;
float: right;
}
#pageAside {
width: 300px;
height: 300px;
background-color: #eaeaea;
float: left;
}
#contentContainer {
margin: 0px;
padding-top: 10px;
padding-bottom: 20px;
min-height: 500px;
}
#pageFooter {
width: 960px;
background-color: #c33754;
height: 100px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.clearfix {clear:both; }
</style>
use this code inside body tag
<body>
<div id="pageContainer">
<header id="pageHeader"><div class="logo">Justeffects.com</div></header>
<div class="clearfix"></div>
<nav id="pageNav">
<ul>
<li><a href="">Home </a></li>
<li><a href="">About</a></li>
<li><a href="">Our blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<section id="pageSection">
<header class="sectionHeader" style="padding:10px 0 0 10px;"><h3>Lorem ipsum dolor met</h3></header>
<article class="sectionArticle" style="padding:10px 0 0 28px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</article>
<footer class="sectionFooter" style="padding:10px 0 0 28px;">Integer et urna ut</footer>
</section>
<aside id="pageAside"><article>
<hgroup>
<h3>sidebar title</h3>
</hgroup>
<p>
Some Text Here
</p>
</article></aside>
</div>
<div class="clearfix"></div>
<footer id="pageFooter"><div style="padding: 20px 0px 0px 50px; font-size:12px;">© 2013 All Rights Reserved </div></footer>
</div>
</body>
No comments:
Post a Comment