design-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>Design Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
html {
background: #000d0d;
}
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #000;
width: 100%;
display: table;
background: #000d0d;
}
a {
color: #902200;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #cf3607;
font-weight: bold;
text-decoration: none;
}
#background_top {
width: 100%;
background: url(design-gallery-images/bg_top.jpg) center top no-repeat;
margin: 10px 0 0 0;
}
#background_middle {
width: 100%;
background: url(design-gallery-images/bg_middle.jpg) center top no-repeat;
}
.container {
width: 820px;
margin: auto;
}
#header {
width: 820px;
height: 150px;
background: url(design-gallery-images/header.jpg) center no-repeat;
}
.content {
width: 820px;
}
#content_white_top {
width: 820px;
height: 100px;
background:url(design-gallery-images/white_content_top.jpg) no-repeat;
}
/*------------- Menu ------------------*/
#content_white_top #menu {
float: left;
width: 370px;
height: 35px;
margin: 15px 0 0 225px;
}
#menu ul {
float: left;
width: 370px;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
padding: 0 10px;
font-family: Tahoma;
font-size: 10px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #0ff;
border-right: 1px solid #FFFFFF;
}
#menu ul li .lastmenu{
border-right: none;
}
#menu li a:hover, #menu li .current{
text-decoration: underline;
}
/* ---- ----- End OF Menu ---- ------*/
#content_white_middle {
width: 820px;
background:url(design-gallery-images/white_content_middle.jpg) repeat-y;
}
#content_white_middle .post_area {
margin: 0 25px 0 25px;
padding: 0;
}
#content_white_middle .post_area h1{
font-family:"Monotype Corsiva", Arial;
font-size: 30px;
font-weight: normal;
text-decoration: underline;
color: #007b78;
margin: 0 0 20px 0;
padding: 0;
}
#content_white_middle .post_area p{
font-family: Arial;
font-size: 12px;
color: #000;
text-align: justify;
margin: 0 0 10px 0;
padding: 0;
}
#content_white_middle .post_area img{
float: left;
margin: 0 20px 20px 0;
padding: 0;
}
#content_white_blue_joint {
width: 820px;
height: 48px;
background: url(design-gallery-images/white_blue_joint.jpg) no-repeat;
}
#content_blue_middle {
width: 820px;
background:url(design-gallery-images/blue_content_bg.jpg) repeat-y;
}
#content_blue_middle .post_area {
margin: 0 25px 0 25px;
padding: 15px 0 0 0;
}
#content_blue_middle .post_area h1{
font-family:"Monotype Corsiva", Arial;
font-size: 30px;
font-weight: normal;
text-decoration: underline;
color: #007b78;
margin: 0 0 20px 0;
padding: 0;
}
#content_blue_middle .post_area p{
font-family: Arial;
font-size: 12px;
color: #000;
text-align: justify;
margin: 0 0 10px 0;
padding: 0;
}
#content_blue_middle .post_area img{
float: right;
margin: 0 0 20px 20px;
padding: 0;
}
#content_blue_two_col_joint {
width: 820px;
height: 71px;
background: url(design-gallery-images/blue_2_col_joint.jpg) no-repeat;
}
#content_two_col_middle {
width: 820px;
min-height: 76px;
background: url(design-gallery-images/blue_2_col_bg.jpg) repeat-y;
}
#content_two_col_middle .post_area_left {
float: left;
width: 350px;
margin: 0 0 0 25px;
padding: 0;
display: inline;
}
.post_area_left h1{
font-family:"Monotype Corsiva", Arial;
font-size: 18px;
font-weight: normal;
text-decoration: underline;
color: #000;
margin: 0 0 20px 0;
padding: 0;
}
.post_area_left img{
float: left;
margin: 0 20px 20px 0;
padding: 0;
clear: both;
}
.post_area_left ul{
list-style: none;
float: left;
margin: 0;
padding: 0;
}
.post_area_left li{
background: url(design-gallery-images/bullet.jpg) left center no-repeat;
padding: 0 0 3px 15px;
font-size: 11px;
}
.post_area_left li a{ color: #000; text-decoration: underline; }
.post_area_left li a:hover{ color: #000; text-decoration: none; }
#content_two_col_middle .post_area_right {
float: right;
width: 350px;
margin: 0 25px -0 0;
padding: 0;
display: inline;
}
.post_area_right h1{
font-family: "Monotype Corsiva", Arial;
font-size: 20px;
font-weight: normal;
text-decoration: underline;
color: #000;
margin: 0 0 20px 0;
padding: 0;
}
.post_area_right h2 {
font-family: Arial;
font-size: 12px;
color: #af1b03;
font-weight: bold;
margin: 0 0 0 0;
padding: 0;
}
.post_area {
margin: 0;
padding: 0;
}
.post_area_right p{
font-family: Arial;
font-size: 12px;
color: #000;
text-align: justify;
margin: 0 0 10px 0;
padding: 0;
}
.post_area_right img{
float: right;
margin: 0 0px 20px 20px;
padding: 0;
clear: both;
}
#content_two_col_bottom {
width: 820px;
height: 45px;
background: url(design-gallery-images/blue_2_col_bottom.jpg) bottom no-repeat;
}
.copyright{
float: left;
width: 100%;
margin: 10px 0 10px 0;
padding: 0 0 0 25px;
color: #fff;
text-align: center;
}
.copyright a{ color: #fff; text-decoration: none; }
.copyright a:hover{ color: #fff; text-decoration: underline; }
.cleaner_with_height {
clear:both;
height: 1px;
}
</style>
</head>
<body>
<div id="background_top">
<div class="container">
<div id="header"> </div>
<div class="content">
<div id="content_white_top">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">HOME</a></li>
<li><a href="http://www.free-css.com/">PROJECTS</a></li>
<li><a href="http://www.free-css.com/">CLIENTS</a></li>
<li><a href="http://www.free-css.com/">ABOUT US</a></li>
<li><a href="http://www.free-css.com/" class="lastmenu">CONTACT</a></li>
</ul>
</div>
</div>
<div id="content_white_middle">
<div class="post_area">
<h1>Welcome to Design Gallery</h1>
<p><img alt="" src="design-gallery-images/thumb_1.jpg" />This layout is a FREE CSS template provided by TemplateMo.com. You may use this template for any of your websites. Credit goes to SmashingMagazine.com for icons used in this template. </p>
<p>Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Proin consec tetuer. </p>
<p>Donec vene natis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. <a href="http://www.free-css.com/">Read More</a></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/design-gallery-images/vcss-blue" vspace="8" border="0" /></a> </p>
<div class="cleaner_with_height"></div>
</div>
<!-- End Of Post Area -->
</div>
<!-- End Of Content Middle -->
</div>
<!-- End Of Content -->
</div>
<!-- End Of Container -->
</div>
<!-- End Of Background Top -->
<div id="background_middle">
<div class="container">
<div class="content">
<div id="content_white_blue_joint"> </div>
<div id="content_blue_middle">
<div class="post_area">
<h1>Gallery Collections</h1>
<p><a href="http://www.free-css.com/"><img src="design-gallery-images/thumbs.jpg" alt="" border="0" /></a>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>Aenean eget tortor eget ipsum aliquet porta. Vestibulum quis pede non urna venenatis vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="http://www.free-css.com/">Read Details</a></p>
<div class="cleaner_with_height"></div>
</div>
</div>
<!-- End Of Content Middle -->
<div id="content_blue_two_col_joint"> </div>
<div id="content_two_col_middle">
<div class="post_area_left">
<h1>Who We Are</h1>
<img alt="" src="design-gallery-images/thumb_2.jpg" />
<ul>
<li><a href="http://www.free-css.com/">Nulla enim nibh, consectetuer sed</a></li>
<li><a href="http://www.free-css.com/">Vestibulum elementum, sagittis nec</a></li>
<li><a href="http://www.free-css.com/">Diam. Mauris blandit vehicula neque</a></li>
<li><a href="http://www.free-css.com/">Proin consectetuer. Donec venenatis</a></li>
<li><a href="http://www.free-css.com/">Cras urna metus, feugiat non</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Nulla et nunc commodo ante ornare</a></li>
</ul>
</div>
<!-- End Of Post Area left -->
<div class="post_area_right">
<h1>Testimonials</h1>
<div class="post_area"> <img alt="" src="design-gallery-images/thumb_3.jpg" />
<h2>Praesent vel diam </h2>
<p>Nunc ante erat, varius eu, luctus ac, tristique nec, justo. Fusce dignissim eros ac massa.</p>
<h2>Curabitur nec odio</h2>
<p>Mae cenas vulps utate, arcue idm ferm entum elei fend, tortor enim tinc idunt mau ris, frin gilla tincidunt purus urna vel risus.</p>
</div>
<!-- End Of Post Area t -->
</div>
<!-- End Of Post Area Right -->
<div class="cleaner_with_height"></div>
</div>
<div id="content_two_col_bottom"> </div>
<div class="copyright"> Copyright © 2024 Your Company Name | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a> </div>
</div>
</div>
<!-- End Of Container -->
</div>
<!-- End Of Background Middle -->
</body>
</html>
Related examples in the same category