This is my
first post about HTML. Today I'm going to give you html + css code for a single page.
I won’t give you any images. You've to add them in right way. If you can, then
you will be able to use this code.
Features: *
Header banner
* Primary menu
* Slider image
* Secondary menu
* Two sidebars
* Main content area
* Footer
HTML Code
<html>
<head>
<title>This
is my practice session</title>
<link
href="style.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div
class="main">
<div
class="header">
<img
src="images/logo.jpg"/>
</div>
<div
class="primarymenu">
<ul>
<li><a
href="">Primary Menu</a></li>
<li><a
href="">Primary Menu</a></li>
<li><a
href="">Primary Menu</a></li>
<li><a
href="">Primary Menu</a></li>
<li><a
href="">Primary Menu</a></li>
<li><a
href="">Primary Menu</a></li>
<li><a
href="">Primary Menu</a></li>
<li><a
href="">Primary Menu</a></li>
</ul>
</div>
<div
class="slider">
<img
src="images/slider.jpg"/>
</div>
<div
class="secondarymenu">
<ul>
<li><a
href="">Secondary Menu</a></li>
<li><a
href="">Secondary Menu</a></li>
<li><a
href="">Secondary Menu</a></li>
<li><a
href="">Secondary Menu</a></li>
<li><a
href="">Secondary Menu</a></li>
<li><a
href="">Secondary Menu</a></li>
<li><a
href="">Secondary Menu</a></li>
</ul>
</div>
<div
class="maincontent">
<div
class="leftsidebar">
<ul>
<li><a
href="">Left Item</a></li>
<li><a
href="">Left Item</a></li>
<li><a
href="">Left Item</a></li>
<li><a
href="">Left Item</a></li>
<li><a
href="">Left Item</a></li>
<li><a
href="">Left Item</a></li>
<li><a
href="">Left Item</a></li>
<li><a
href="">Left Item</a></li>
<li><a
href="">Left Item</a></li>
</ul>
</div>
<div
class="content">
<h2>This
is Content Title</h2>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil
imperdiet doming</p>
</div>
<div
class="rightsidebar">
<ul>
<li><a
href="">Right Item</a></li>
<li><a
href="">Right Item</a></li>
<li><a
href="">Right Item</a></li>
<li><a
href="">Right Item</a></li>
<li><a
href="">Right Item</a></li>
<li><a
href="">Right Item</a></li>
<li><a
href="">Right Item</a></li>
<li><a
href="">Right Item</a></li>
<li><a
href="">Right Item</a></li>
</ul>
</div>
</div>
<div
class="footer">
<p>©
Plans in Action 2014</p>
</div>
</div>
</body>
</html>
CSS Code
.{margin:0;padding:0}
body{font-family:Arial;font-size:14px;line-height:20px;color:#000}
.main{width:960px;margin:20px
auto;display:block;overflow:hidden}
.header{}
.header img,
.slider img{width:960px}
.primarymenu{background:#D8DFF0;overflow:hidden}
.primarymenu
ul{margin:0;padding:0;list-style:none}
.primarymenu
ul li{float:left;border-right:1px solid #C7E455}
.primarymenu
ul li a{display:block;text-decoration:none;color:#000;padding:10px}
.primarymenu
ul li a:hover{background:#F2F3F4}
.slider{}
.secondarymenu{background:#CAB7AA;overflow:hidden}
.secondarymenu
ul{margin:0;padding:0;list-style:none}
.secondarymenu
ul li{float:left;border-right:1px solid #E4E4E4}
.secondarymenu
ul li a{display:block;text-decoration:none;color:#000;padding:10px}
.secondarymenu
ul li a:hover{background:#E8E8FF}
.maincontent{overflow:hidden;margin-top:30px}
.maincontent
h2{margin-bottom:15px}
.leftsidebar{float:left;width:180px}
.leftsidebar
ul{list-style:none}
.leftsidebar
ul li{padding:5px;border-bottom:1px solid #E9E9E9}
.leftsidebar
ul li a{text-decoration:none;color:#000}
.leftsidebar
ul li a:hover{}
.content{float:left;width:580px;margin-right:10px;margin-left:10px}
.rightsidebar{float:left;width:180px}
.rightsidebar
ul{list-style:none}
.rightsidebar
ul li{padding:5px;border-bottom:1px solid #E9E9E9}
.rightsidebar
ul li a{text-decoration:none;color:#000}
.rightsidebar
ul li a:hover{}
.footer{background:#333;color:#fff;margin-top:25px;padding:20px}
[NB: This
code is only for practice. Please don’t use it commercially. ]
0 comments:
Post a Comment