flightandfight
<?xml version="1.0" encoding="utf-8"?>
<!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-US" lang="en-US">
<head>
<title>Flight and Fight</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Page */
/* Developed by Mike Weiss of mjmediateam.com*/
/*-------- Elements --------*/
* {
margin:0;
padding:0
}
body {
background:#262424;
height:100%;
text-align:center
}
#container {
margin:0 auto;
min-height:100%;
position:relative;
text-align:left;
width:730px
}
#header h1 {
color:#445971;
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
padding:10px 0 0;
text-transform:uppercase
}
#header h2 {
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
margin:-13px 0 0 13px;
padding-bottom:30px
}
#focus {
background:url(flightandfight-images/man.jpg) center center no-repeat #50647B;
height:240px;
overflow:hidden;
width:730px
}
#navigation {
background:url(flightandfight-images/left.gif) no-repeat top left #50647B;
float:left;
height:240px
}
#navigation h3 {
display:none
}
#navigation ul {
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
list-style-type:none;
margin:20px auto auto 20px;
text-transform:uppercase
}
#navigation ul li {
overflow:hidden;
width:150px
}
#navigation a {
border-bottom:1px solid #7E9CC1;
color:#FFF;
display:block;
font-size:14px;
padding:10px 0 10px 8px;
text-decoration:none;
width:150px
}
#navigation a:hover {
padding:10px 0 10px 20px
}
#navigation a.active,#navigation a.active:hover {
border-bottom:3px solid #7E9CC1;
cursor:default;
font-weight:700;
padding:10px 0 10px 8px
}
#quicksearch {
background:url(flightandfight-images/right.gif) top right no-repeat #50647B;
float:right;
height:240px;
width:200px
}
#quicksearch form {
padding:10px
}
#quicksearch input,#quicksearch label {
clear:left;
float:left
}
#quicksearch input {
margin:0 0 0 15px;
width:140px
}
#quicksearch label {
color:#fff;
font-size:12px;
margin:10px 0 0 15px
}
#quicksearch .date {
background:url(flightandfight-images/date.gif) center right no-repeat #FFF
}
#quicksearch fieldset {
border:1px solid #7E9CC1
}
#quicksearch legend {
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-left:7px;
padding:5px
}
#quicksearch .submit {
clear:both;
float:left;
margin:20px 0 10px 15px;
padding:1px 10px
}
#middle {
padding:0 0 60px
}
/* Content Elements */
#content {
background:url(flightandfight-images/top.gif) top center no-repeat #fff;
margin:10px 0 0
}
#content hr {
clear:both;
visibility:hidden
}
#content p.top {
background:url(flightandfight-images/bottom.gif) bottom center no-repeat;
margin:0;
padding:30px 0 0;
text-align:right
}
#content p.top a {
background:url(flightandfight-images/arrow_up.gif) center left no-repeat;
margin:0 30px;
padding:0 0 0 15px
}
#content h3 {
border-bottom:1px solid #7E9CC1;
color:#445971;
font-family:"Times New Roman", Times, serif;
font-size:18px;
font-style:italic;
margin:5px 10px
}
#content p {
margin:3px 15px 10px;
text-align:left
}
#content h4 {
font-size:11px;
line-height:15px;
margin:2px 10px
}
#content .date {
background:url(flightandfight-images/date.gif) center left no-repeat #FFF;
color:#445971;
padding:0 0 0 20px
}
#content a {
color:#7E9CC1;
text-decoration:none
}
#content img {
border:1px solid #7E9CC1;
margin:5px 15px
}
html,* html #container {
height:100%
}
/* Footer */
* html #footer {
margin-top:-50px
}
#footer {
background:url(flightandfight-images/footer.gif) top center no-repeat #7e9CC1;
height:50px;
margin:-50px auto 0;
position:relative;
text-align:center;
width:730px
}
#footer a:hover,#content a:hover {
text-decoration:underline
}
#footer p {
color:#fff;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:10px;
padding:15px 0 0
}
#footer a {
color:#fff;
text-decoration:none
}
/* Classes */
.left {
float:left
}
.right {
float:right
}
.gray {
background-color:#F2F3F4
}
/* Content Controllers */
/* Use this to make a new row of columns */
#content .row {
margin:5px auto;
overflow:hidden;
width:98%
}
/* Combine columns to form a layout */
.fullcolumn {
float:left;
width:99%
}
.threequartercolumn {
float:left;
width:73.5%
}
.halfcolumn {
float:left;
width:49%
}
.onethirdcolumn {
float:left;
width:33%
}
.twothirdcolumn {
float:left;
width:65%
}
.onequartercolumn {
float:left;
width:24.5%
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Company Name</h1>
<h2>nifty slogan here</h2>
</div>
<div id="middle">
<div id="focus">
<div id="navigation">
<h3>Navigation</h3>
<ul>
<li><a href="http://www.free-css.com/" class="active">Home</a></li>
<li><a href="http://www.free-css.com/">Columns</a></li>
<li><a href="http://www.free-css.com/">Extras</a></li>
<li><a href="http://www.free-css.com/">Examples</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="quicksearch">
<form action="#">
<fieldset>
<legend>Flight Search</legend>
<label for="depart">Departure Date</label>
<input type="text" id="depart" name="depart" class="date" />
<label for="return">Return Date</label>
<input type="text" id="return" name="return" class="date" />
<button type="submit" id="submit-go" class="submit">Search</button>
</fieldset>
</form>
</div>
</div>
<div id="content">
<div class="row">
<div class="onequartercolumn">
<h3>Client Spotlight</h3>
<p>This is a design I made for a design test to freelance. I declined the job, but I decided to release the template to the Open Source community.</p>
</div>
<div class="threequartercolumn gray">
<h3>Learning Is Important</h3>
<img src="flightandfight-images/34007.jpg" width="150" height="105" alt="Business Image" class="right" />
<p>I have included many customizable features into the content section. But I haven't really put a whole lot of effort into this layout. Everything is fixed height and width, which means that the font sizes do not adjust in most browsers. If this design takes off, I'll probably do a liquid version and update as requested. I hope you like this design. I am releasing it to the community with no ties. If you feel like you would like to contribute something to me, you can visit my site and request my paypal address, but I'd just be happy if all you did was leave my adddress in the footer. Feel free to contact me if you use this template and would like more features. I will update this as the requests come in. Thank you, and I hope you enjoy the template.</p>
</div>
</div>
<p class="top"> <a href="http://www.free-css.com/">Return to Top</a></p>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2007 <a href="http://www.free-css.com/">Company Name</a> | Design by: <a href="http://www.weissmike.com">Mike Weiss</a></p>
</div>
</body>
</html>
Related examples in the same category