city-night
<!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>City Night</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #686f76;
background: #121b24;
}
a:link, a:visited { color: #aabdd0; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #aabdd0; text-decoration: underline}
h1 {
margin: 0px;
padding: 0px 0px 15px 0px;
font-size: 1.4em;
font-weight: bold;
color: #aabdd0;
}
h4 {
margin: 0px;
padding: 0px;
font-size: 12px;
color:#FFFFFF;
font-weight: normal;
}
p{
margin: 0px;
padding: 0 0 10px 0;
text-align: justify;
}
.spacetobottom {
clear: both;
height: 50px;
}
.spacetoright {
float: left;
width: 10px;
height: 10px;;
}
/* ----- Form ----- */
.form_row{
padding: 3px 0px;
}
form{
margin: 0px 10px 0px 0px;
padding: 0px;
text-align: right;
}
label {
margin-right: 10px;
}
input{
width: 150px;
height: 15px;
color: #aabdd0;
border: 1px solid #686f76;
background: #070707;
}
.button{
width: 60px;
height: 25px;
}
/* End of Form */
.more_button a{
clear: both;
display: block;
width: 80px;
height: 20px;
margin: 10px 0 0 0;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #aabdd0;
background: #0b1016;
border: 1px solid #05070a;
}
#wrapper1 {
background: url(city-night-images/maintopBG.gif) top repeat-x;
}
#wrapper2 {
background: url(city-night-images/mainbuttomBG.gif) bottom repeat-x;
}
#container {
margin: auto;
width: 960px;
}
/*------------- Menu ------------------*/
#menu {
float: left;
width: 930px;
height: 40px;
margin: 18px 0 0 0;
padding: 0 0 0 30px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
width: 140px;
height: 30px;
padding: 10px 0 0 0;
font-size: 1.1em;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #aabdd0;
border-left: 1px solid #34373b;
}
#menu ul li .lastmenu{
border-right: 1px solid #34373b;
}
#menu li a:hover, #menu li .current{
color: #aabdd0;
background: url(city-night-images/menuhoverBG.gif) no-repeat;
}
/* ----------------- end of menu----------------*/
/* header and banner */
#header_banner {
float: left;
width: 900px;
height: 268px;
padding: 0 30px;
margin-top: 2px;
}
#header {
float: left;
width: 310px;
height: 268px;
background: url(city-night-images/header.jpg) no-repeat;
}
#sitetitle {
padding: 180px 0 10px 40px;
font-size: 3.0em;
font-weight: bold;
color:#ff6000;
}
#sitetitle span{
font-weight: normal;
color: #FFFFFF;
}
#tagline{
padding: 0 0 0 43px;
font-size: 1.0em;
color:#FFFFFF;
}
#banner {
float: left;
width: 590px;
height: 268px;
background: url(city-night-images/banner.jpg) no-repeat;
}
#bannertext{
text-align: right;
padding: 190px 20px 0 0;
font-size: 14px;
color: #FFFFFF;
}
#bannertext span{
font-size: 24px;
font-weight: bold;
color: #ff6000;
}
/* end of header and banner */
/* ----------------- Content ----------------------- */
#content {
float: left;
width: 900px;
padding:0 30px;
}
#leftcolumn {
float: left;
width: 280px;
padding: 50px 20px 0 10px;
background: url(city-night-images/leftcolumnBG.gif) top center no-repeat;
}
.login_form{
background: #06080a;
width: 240px;
padding: 15px;
border: 5px solid #070707;
}
.newssection {
padding: 0 0 5px 0;
}
#rightcolumn {
float: left;
width: 530px;
padding: 50px 20px 0 40px;
}
.onecolumn {
width: 530px;
}
.onecolumn img {
float: right;
clear: both;
margin: 0 0 5px 10px;
border: 3px solid #0e121d;
}
.twocolumn {
width: 530px;
}
.twocolumn_box {
float: left;
width: 230px;
padding: 10px;
background: #0c1117 url(city-night-images/boxBG.gif) top right no-repeat;
border: 5px solid #0f1721;
}
.twocolumn_box img {
float: left;
margin: 2px 10px 0 0;
border: 3px solid #0e121d;
}
.twocolumn_box p {
text-align: left;
}
.twocolumn_box ul {
margin: 0 0 0 10px;
padding: 0px;
}
.twocolumn_box li {
list-style: none;
padding: 10px 0 10px 20px;
background: url(city-night-images/listicon.gif) center left no-repeat;
}
#gallery {
width: 530px;
}
.gallery_column {
float: left;
width: 165px;
}
.gallery_column img{
border: 5px solid #000000;
margin: 0 0 10px 0;
}
.gallery_column p{
text-align: left;
}
/* end of content */
/* ----- Footer ----- */
#footer {
clear: both;
padding: 20px 0px 0px 0px;
width: 960px;
height: 60px;
text-align: center;
background: url(city-night-images/footerBG.gif) repeat-x;
text-align: center;
}
#footer a{
font-weight: normal;
}
/* ----- End of Footer ----- */
</style>
</head>
<body>
<div id="wrapper1">
<div id="wrapper2">
<div id="container">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="subpage.html">Services</a></li>
<li><a href="http://www.free-css.com/">Solutions</a></li>
<li><a href="http://www.free-css.com/">Partners</a></li>
<li><a href="http://www.free-css.com/">News</a></li>
<li><a href="http://www.free-css.com/" class="lastmenu">Contact Us</a></li>
</ul>
</div>
<div id="header_banner">
<div id="header">
<div id="sitetitle"> City<span> Night</span> </div>
<div id="tagline">Building online businesses for success</div>
</div>
<div id="banner">
<div id="bannertext"> Let's build<br />
<span>SUCCESSFUL BUSINESS</span><br />
together </div>
</div>
</div>
<div id="content">
<div id="leftcolumn">
<div class="login_form">
<h1>Client Login</h1>
<form method="get" action="http://www.free-css.com/">
<div class="form_row">
<label>Email</label>
<input name="email_address" type="text" class="inputfield" id="email_addremss" maxlength="60"/>
</div>
<div class="form_row">
<label>Password</label>
<input name="password" type="password" class="inputfield" id="password" maxlength="60"/>
</div>
<input class="button" type="submit" name="Submit" value="Login" />
</form>
</div>
<div class="spacetobottom"></div>
<h1>Latest News</h1>
<div class="newssection">
<h4>Mauris blandit vehicula neque</h4>
<p>Quisque in diam a justo condimentum molestie. Vivamus a velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <a href="http://www.free-css.com/">more...</a></p>
</div>
<div class="newssection">
<h4>Curabitur velit tellus</h4>
<p>Duis vitae velit sed dui males uada digni ssim. Donec mollis aliquet ligula. Maec enas adipiscing elementum ipsum. <a href="http://www.free-css.com/">more...</a></p>
</div>
<div class="more_button"><a href="http://www.free-css.com/">Read All</a></div>
<a target="_blank" href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/city-night-images/vcss-blue" alt="" vspace="8" border="0" /></a> </div>
<div id="rightcolumn">
<div class="onecolumn">
<h1>Welcome to our website</h1>
<p> <img src="city-night-images/image(130x130).jpg" alt="" /> This city night web template is provided by TemplateMo.com for free of charge. You may modify and apply this layout for your websites.</p>
<p>Credit goes to PDPhoto.org for header image.</p>
<p> Lorem ipsum nunc quis sem dolor sit amet, consectetuer adipiscing elit. Duis mollis aliquet ligula. Maecenas adipiscing elementum vitae velit sed dui malesuada dignissim.</p>
</div>
<div class="spacetobottom"></div>
<div class="twocolumn">
<div class="twocolumn_box">
<h1>Who We Are</h1>
<p> <img src="city-night-images/image(70x70).jpg" alt="" /> Proin vel libero id erat venenatis accumsan. Nunc blandit orci sit amet risus. </p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Praesent varius egestas velit</li>
<li>Donec iaculis felis id neque</li>
</ul>
<div class="more_button"><a href="http://www.free-css.com/">View All</a></div>
</div>
<div class="spacetoright"></div>
<div class="twocolumn_box">
<h1>What We Do</h1>
<p> <img src="city-night-images/image(70x70).jpg" alt="" /> Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. </p>
<ul>
<li>Praesent varius egestas velit</li>
<li>Donec iaculis felis id neque</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<div class="more_button"><a href="http://www.free-css.com/">View All</a></div>
</div>
</div>
<div class="spacetobottom"></div>
<div id="gallery">
<h1>Quality Services</h1>
<div class="gallery_column"> <img src="city-night-images/image(160x60).jpg" alt="" />
<p>Mauris blandit vehicula neque. Proin consectetuer. Donec venenatis. <a href="http://www.free-css.com/">more...</a></p>
</div>
<div class="spacetoright"></div>
<div class="gallery_column"> <img src="city-night-images/image(160x60).jpg" alt="" />
<p>Duis vitae velit sed dui males uada digni ssim. Donec mollis aliquet ligula. <a href="http://www.free-css.com/">more...</a></p>
</div>
<div class="spacetoright"></div>
<div class="gallery_column"> <img src="city-night-images/image(160x60).jpg" alt="" />
<p>Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. <a href="http://www.free-css.com/">more...</a></p>
</div>
<div class="more_button"><a href="http://www.free-css.com/">Read All</a></div>
</div>
<div class="spacetobottom"></div>
</div>
</div>
<div id="footer"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Services</a> | <a href="http://www.free-css.com/">Solutions</a> | <a href="http://www.free-css.com/">Partners</a> | <a href="http://www.free-css.com/">News</a> | <a href="http://www.free-css.com/">Contact Us</a><br />
Copyright 2008 <a href="http://www.free-css.com/"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com">TemplateMo.com</a> </div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category