city 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* city - an open source xhtml/css website layout by Studio-plume.org kty
(aug 6, 2008)
*/
body {
margin: 0 auto;
padding: 0;
font: 0.7em "trebuchet ms",arial,sans-serif;
background: #000}
#wrap {
background: #000 url(city-images/deg_wrap.jpg) repeat-x center bottom ;
color: #aaa9a9;
border: none;
margin: 0 auto;
width: 920px;
border-left: 1px #000 solid;
border-right: 1px #000 solid;}
/* header */
#header {
clear: both;
padding: 0;
height: 260px;background-image: url(city-images/920.jpg);
background-repeat: no-repeat;}
#header h3 {
width: 350px;
margin: 0px 0px 0px 25px;
float: left;
font-family: "trebuchet ms",arial,sans-serif;font-size: 0.9em;}
#header p {
width: 400px;
float: left;
text-align: left;
color: #fff;
margin: 70px 0px 0px 350px;
font-size: 0.9em;
line-height: 1.2em;height: 35px;background-color: inherit;}
/* navigation */
#nav {
font-size: 1.2em;font-weight: bold;margin-top: -42px;width: 600px;height: 25px;margin-left: 180px;}
#nav ul {
margin : 0;
padding : 0;
list-style : none;
text-align: center;font-variant: small-caps;
font-weight: bold;}
#nav li {
float : left;
font-family: "trebuchet ms",arial,sans-serif;
}
#nav a {
display : block;
padding : 10px;
color : #FFF;
text-decoration : none;width: 75px;background-color: inherit;color: #000;
padding: 0px 10px 0px 10px;}
#nav a:hover {
color : #8E8E6A;background-color: inherit;color: #fff;}
/* content */
#content {
padding: 0 10px 0 10px;
line-height: 1.4em;
text-align: left;background-color: #161616;width: 470px;margin-top: 7px;float: left;background-image: url(city-images/ht_center2.jpg);background-repeat: no-repeat;background-position: center top;
margin-left: 15px;}
#content h2 {
font-size: 1.2em;
margin: 20px 0em 0em 0em;
font-family: "trebuchet ms",arial,sans-serif;
height: 21px;}
#content img {
padding: 0px;
display:inline;
padding-right: 3px;
margin-left: 8px;}
.left_articles {
margin: 15px 15px 0px 0em;
color: #fff;
padding: 15px 0px 10px;text-align: justify;background-color: inherit;}.comment { padding: 0 0 0 12px;
line-height: 1.4em;}
.bigimage {
float: left;
clear: left;
margin: 8px;border: none;}
h3 {
font-size: 1.1em;
margin: 0em 0em 25px;
font-family: "trebuchet ms",arial,sans-serif;text-transform: uppercase;width: 196px;
color: #fff;}
a {
text-decoration: none;
color: #657536;background-color: inherit;}
a:hover {
text-decoration: underline;
color: #819545;background-color: inherit;}
/* left side */
#left {
float: left;
margin: 12px 0em 20px 10px;
list-style: none;background-position: left top;background-color: #161616;background-image: url(city-images/ht_menu2.jpg);background-repeat: no-repeat;height: auto;
width: 185px;}
.text_left{margin: 35px 0em 10px;width: 175px;
color: #aaa9a9;line-height: 1.2em;padding-left: 2px;background-repeat: no-repeat;background-position: top center;background-color: #232325;border: 1px #2e2e2e dashed;}
.news {
margin: 35px 0em 10px 0px;width: 175px;
color: #fff;line-height: 1.2em;background-repeat: no-repeat;background-position: top center;background-color: #232325;border: 1px #2e2e2e dashed;}
/* right side */
#right {
float: right;
width: 206px;
margin: 10px 0em;
padding: 0;
font-size: 1em;list-style: none;background-position: left top;background-color: #161616;background-image: url(city-images/ht_right2.jpg);background-repeat: no-repeat;}
.right_titre{
margin: 0em 0em 0em 30px;
text-align: center;width: 150px;}
.right_texte{
margin: 0em 0em 0em 5px;
text-align: left;width: 150px;
}
#info {
float: right;
width: 170px;
margin: 18px 15px 10px 5px;
padding: 3px;
line-height: 1.5em;
text-align: left;background-color: #667731;}
#info p {
margin: 0em 0em 0em 2px;
font-style: italic;
color: #fff;
background-color: #566529;
padding: 3px;}
#info h3 {
margin: 0em 0em 0em 5px;
text-align: center;width: 150px;
font-size: 0.9em;
font-style: italic;
color: #fff;}
/* footer part */
#footer {
clear: both;
margin: auto 0em auto;
padding: 0;
width: 920px;
text-align: center;
color: #a5a5a5;
font-size: 0.9em;background: #000 url(city-images/bg_footer.jpg) no-repeat left center ;border: none;height: 36px;
}
#footer a {
color: #ccc;
text-decoration: none;background-color: inherit;}
#footer a:hover {
text-decoration: underline;
}
.text_footer {
font-size: 0.9em;
padding-top: 10px;}
/* others */
.title_left {
font-size: 0.9em;
margin: 15px 0em 25px 10px;
font-family: "trebuchet ms",arial,sans-serif;text-transform: uppercase;color: #7e9144;padding-left: 30px;}
.title_right {
font-size: 0.8em;
margin: 24px 0em 25px 10px;
font-family: "trebuchet ms",arial,sans-serif;text-transform: uppercase;color: #7e9144;padding-left: 30px;}
.left {
margin: 0px 7px 0px;
float: left;
}
.right {
margin: 0px 7px 0px 5px;
float: right;
}
.small {
font-size: 0.85em;
padding-top: 10px;
color: #4f4f53;
text-align: center;}
.small2 {
font-size: 0.85em;
padding-top: 10px;
color: #aaa9a9;
text-align: left;}
.bold {
font-weight: bold;
}
.img {border: none;}
</style>
<title>city</title>
</head>
<body><div id="wrap">
<div id="header"><br />
<h3>www.your site.com</h3>
<p><strong>"your slogan can be here "</strong><br />
(or anything else )</p>
</div>
<div id="nav">
<ul>
<li><a href="index.html">.: index :. </a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Gallery</a></li>
<li><a href="index.html">Forum</a></li>
<li><a href="index.html">New</a></li>
<li class="last"><a href="index.html">contact</a></li>
</ul>
</div>
<div id="left">
<p class="title_left"><img src="city-images/arrow_g2.gif" alt="arrow" width="9" height="5" /> information</p>
<div class="news">
<h3><img src="city-images/titre2.jpg" alt="arrow" width="12" height="9" /> Gallery </h3>
<ul>
<li><a href="http://css4free.com/">Gallery 1</a></li>
<li><a href="http://curiouscat.com/travels/">Gallery 2</a></li>
<li><a href="http://css4free.com/tag/gallery/">Gallery 3</a></li>
<li><a href="index.html">Gallery 4</a></li>
<li><a href="index.html">Gallery 5</a></li>
<li class="last"><a href="index.html">Gallery 6</a></li>
</ul>
<p class="comment"><img src="city-images/arrow_or.gif" alt="arrow" width="9" height="5" /> Selection of march ... </p>
<p class="comment"><img src="city-images/arrow_or.gif" alt="arrow" width="9" height="5" /> Selection of april ... </p>
<p class="comment"><img src="city-images/arrow_or.gif" alt="arrow" width="9" height="5" /> Selection of may ... </p>
<p class="comment">Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="index.html">More Info...</a><br />
<br />
</div>
<p class="text_left">Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p><a href="index.html"><img class="img" src="city-images/mail.jpg" alt="mail" width="64" height="52" /><br />
</a><a href="http://validator.w3.org/check/referer"> Validate XHTML 1.0 Strict</a><br />
and Css <br />
</p>
</div>
<div id="right">
<p class="title_right"><img src="city-images/arrow_g2.gif" alt="arrow" width="9" height="5" /> Some news</p>
<h3 class="right_titre"> <img src="city-images/titre2.jpg" alt="arrow" width="12" height="9" /> About</h3>
<div id="info">
<h3> Minim veniam:</h3>
<p> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br />
</p>
<h3> Archives:</h3>
<p><img src="city-images/arrow_or.gif" alt="arrow" width="9" height="5" /> last news ( juin 2007)<br />
<img src="city-images/arrow_or.gif" alt="arrow" width="9" height="5" /> last news ( juillet 2007)<br />
<img src="city-images/arrow_or.gif" alt="arrow" width="9" height="5" /> last news (aout 2007)<br />
</p>
</div>
<p > </p>
<h3 class="right_titre"> <img src="city-images/titre2.jpg" alt="arrow" width="12" height="9" /> Minim veniam:</h3>
<p > </p>
<p class="right_texte" >"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br />
<a href="index.html">More Info...</a></p>
<p > </p>
<p class="right_texte" ><img src="city-images/feed.png" alt="feed" width="16" height="16" /> Rss </p>
<p class="small2" >"Lorem ipsum<a href="index.html"> dolor sit amet</a>, consectetur " <br />
quis nostrud exerci tation ullamcorper suscipit lobortis
</p>
</div>
<div id="content">
<p > </p>
<h2>Lorem Ipsum </h2>
<p >Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<img src="city-images/pict2.jpg" alt="ill" width="81" height="64" /><img src="city-images/pict2.jpg" alt="ill" width="81" height="64" /><img src="city-images/pict2.jpg" alt="ill" width="81" height="64" /><img src="city-images/pict2.jpg" alt="ill" width="81" height="64" /><img src="city-images/pict2.jpg" alt="ill" width="81" height="64" />
<p class="left_articles">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
<p >Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p class="left_articles">
<img src="city-images/info.jpg" alt="Big Image" width="136" height="141" class="bigimage" />
<a href="#">Lorem ipsum dolor sit amet</a>, erat volutpat. <a href="#">Ut wisi enim ad minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. </p>
<p class="left_articles" ><a href="#">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Ut wisi enim ad minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
<p class="small" >"Lorem ipsum<a href="index.html"> dolor sit amet</a>, consectetur " <br />
quis nostrud exerci tation ullamcorper suscipit lobortis
</p>
</div>
<div id="footer">
<p class="text_footer">Copyright © 2008 ("your sitename"). Design by kty <a href="http://www.studio-plume.org">studio-plume.org</a> <a href="http://css4free.com/" title="nearly 1,000 free CSS web site designs">downloaded from CSS4Free</a>.</p></div>
</div>
</body>
</html>
Related examples in the same category