art-gallery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Art Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.5em;
color: #241c1a;
background: url(art-gallery-images/bg.jpg) repeat;
}
a:link, a:visited { color: #7e3200; text-decoration: none; font-weight: bold; }
a:active, a:hover { color: #975900; text-decoration: none;font-weight: bold; }
.style1 { color: #99FFCC }
h1{
font-family: "Courier New", Courier, monospace, Century;
font-size: 20px;
font-weight: bold;
color: #61754e;
margin: 0px;
padding-top: 20px;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
float: left;
font-size: 14px;
font-weight: bold;
color: #3c4826;
width: 200px;
padding: 10px 0px 10px 120px;
text-decoration: underline;
}
#container {
width: 1000px;
margin: auto;
background: url(art-gallery-images/container_bg.jpg) repeat-y;
}
#topsection {
float: left;
width: 1000px;
height: 93px;
background: url(art-gallery-images/top.jpg) no-repeat;
}
.topmenu{
float: right;
width: 400px;
margin: 0px;
padding: 55px 100px 0px 0px;
}
.topmenu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.topmenu li{
display: inline;
}
.topmenu li a{
font-size: 12px;
color: #dceb9f;
font-weight: bold;
width: 100px;
height: 30px;
margin-left:15px;
padding: 0px 0px 0px 15px;
background: url(art-gallery-images/bullet.png) no-repeat;
background-position: left;
}
#middlesection {
float: left;
width: 1000px;
}
#left_content {
float: left;
width: 346px;
}
#left_top {
float: right;
width: 254px;
height: 298px;
}
.leftmenu {
float: left;
width: 346px;
margin: 0px;
}
.leftmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 100px;
}
.leftmenu li a {
display: block;
height: 25px;
font-size: 11px;
color: #3c4826;
background: url(art-gallery-images/bullet.png) no-repeat;
padding-left: 20px;
background-position: left;
}
.leftmenu li a:hover ,.leftmenu li .current{
background: url(art-gallery-images/current.png) no-repeat;
background-position: left;
color:#000;
}
#right_content {
margin: 0px;
float: left;
width: 654px;
background: url(art-gallery-images/right_photo.jpg) no-repeat;
}
#right_text {
float: left;
width: 500px;
text-align: justify;
margin: 0px;
padding: 0px 0px 0px 20px;
}
#right_text img {
float: left;
}
#footersection {
clear: both;
width: 1000px;
height: 50px;
color: #dde7ab;
font-weight: bold;
text-align: center;
padding-top: 80px;
background: url(art-gallery-images/footer.jpg) no-repeat;
}
#footersection a{
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topsection">
<div class="topmenu">
<ul>
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">PORTFOLIO</a></li>
<li><a href="http://www.free-css.com/">COMPANY</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
</div>
<div id="middlesection">
<div id="left_content">
<div id="left_top"><img src="art-gallery-images/left_photo.jpg" alt="" /></div>
<h2>CATEGORIES</h2>
<div class="leftmenu">
<ul>
<li> <a href="http://www.free-css.com/">» Web Design</a></li>
<li> <a href="http://www.free-css.com/">» Photo Gallery</a></li>
<li> <a href="http://www.free-css.com/">» Flash Templates</a></li>
<li> <a href="http://www.free-css.com/">» CSS Templates</a></li>
</ul>
</div>
<h2>PORTFOLIO</h2>
<div class="leftmenu">
<ul>
<li> <a href="http://www.free-css.com/">» Quisque rhoncus nulla</a></li>
<li> <a href="http://www.free-css.com/">» Suspendisse a nibh</a></li>
<li> <a href="http://www.free-css.com/">» Maecenas adipiscing</a></li>
</ul>
</div>
<h2>QUICK LINKS</h2>
<div class="leftmenu">
<ul>
<li> <a href="http://www.free-css.com/">» Duis scelerisque</a></li>
<li> <a href="http://www.free-css.com/">» Maecenas aliquam</a></li>
<li> <a href="http://www.free-css.com/">» Vestibulum quis pede</a></li>
</ul>
</div>
</div>
<div id="right_content">
<div id="right_text">
<h1>Art Gallery</h1>
<p>This is a FREE CSS web template provided by TemplateMo.com. You may apply this layout for any of your websites. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt.</p>
<p>Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum.</p>
<p>Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. Mauris convallis. Proin vel libero id erat venenatis accumsan. Nunc blandit orci sit amet risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut iaculis lacinia purus. Duis pulvinar scelerisque ante.</p>
<h1>OUR LATEST WORK</h1>
<p><img src="art-gallery-images/photo.jpg" alt="" width="249" height="162" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet. Vivamus leo velit, convallis id, ultrices sit amet, tempor a, libero. Quisque rhoncus nulla quis sem.</p>
<p>In sed risus ac felis varius bibendum. Vestibulum dapibus tortor vel orci. Maecenas vulputate, arcu id fermentum eleifend, tortor enim tincidunt mauris, fringilla tincidunt purus urna vel risus. Fusce vulputate tellus ac felis. Praesent mauris. Quisque gravida faucibus ligula. Aliquam magna. Phasellus id felis.</p>
<h1>Aliquam tristique lacus in sapien</h1>
<p>Nulla enim nibh, consectetuer sed, vestibulum elementum, sagittis nec, diam. Mauris blandit vehicula neque. Proin consectetuer. Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc.</p>
<p>Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. In hac habitasse platea dictumst. Aenean cursus. Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque.</p>
<p><a href="http://validator.w3.org/check?uri=referer"><img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a><a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="http://jigsaw.w3.org/css-validator/art-gallery-images/vcss-blue" vspace="8" border="0" /></a></p>
</div>
</div>
</div>
<div id="footersection">Copyright Your Company Name Designed by <a href="http://www.templatemo.com" class="style1">TemplateMo.com</a></div>
</div>
</body>
</html>
Related examples in the same category