iPhoneSite
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type='text/css'>
/* CSS RESET */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}
body {font:13px/1.231 arial,helvetica,clean,sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
/* CSS RESET */
body {
text-align:center;
color:#FFFFFF
}
a {
text-decoration:none;
color:#8B9980;
}
a:hover {
text-decoration: underline;
color:#006600;
}
#wrap {
width:800px;
text-align:left;
margin:0 auto;
}
.fl{ float:left}
.fr{ float:right}
.clearfix{ clear:both}
/* header */
#header { background:url(iPhoneSite-images/hd.jpg); height:167px; color:#FFFFFF; position:relative}
#header a {color:#FFFFFF; line-height:30px; font-size:11px}
#header .fl {margin-left:20px}
#header h1 {font-size:70px; position:absolute; right:130px; top:30px}
#q,#submit {border:#899A7B 1px solid; background:#4C5446; }
#header .fr {margin-right: 20px;line-height:30px;}
.iphone { position:absolute; left:0px; top:37px}
/* content */
#content { background:url(iPhoneSite-images/ct_bg.jpg)}
.side {width:183px; background:url(iPhoneSite-images/sbg.jpg)}
.main {width:570px}
.side, .main_i {margin-top:90px}
.main ul#nav {background: url(iPhoneSite-images/nav.gif) 0% -1px; width:449px; height:32px;float:right}
.main ul#nav li{float:left; width:89px; text-align:center; line-height:26px }
.main h2 {background:url(iPhoneSite-images/ct_t.gif); height:33px; width:527px; text-align:right; color:#FFFFFF; font-weight:700; font-size:18px; padding:5px 20px 0 0 }
.main ul#nav a { color:#fff}
.main ul#nav a:hover { color:#006600; text-decoration:none; font-weight:700}
.main p {width:520px; margin:20px 25px}
#col div {width:226px; padding:20px 15px 0 25px}
#col h3{background:url(iPhoneSite-images/apple.gif) no-repeat; line-height:39px; padding-left:40px; font-size:16px}
.side_i { margin:10px 0 0 20px}
.side_i li {list-style:inside disc; padding:0 10px; line-height:1.98em}
.side_i h2 {font-weight:700}
/* footer */
#footer { background:url(iPhoneSite-images/ft.jpg); height:220px; position:relative}
#ftinner {font-size:11px; position:absolute; bottom:2px; left:100px}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<img src="iPhoneSite-images/iphone.gif" alt="" class="iphone" />
<h1>iPhoneSite</h1>
<div class="fl"><a href="#">iPhones</a> | <a href="#">iPhone accessories </a> | <a href="#">iPhone reviews </a> | <a href="#">iPhones news</a> | <a href="#">iPhone gallery</a> </div>
<div class="fr">
<form action="/" method="post" id="sc">
<input type="text" name="q" id="q" value="" class="q"/>
<input type="submit" name="submit" id="submit" value="Go" class="submit"/>
</form>
</div>
</div>
<!-- /header -->
<div id="content">
<div class="side fl"> <img src="iPhoneSite-images/st.jpg" alt="" />
<div class="side_i"> <h2>Categories</h2>
<ul>
<li><a href="#">Latin literature </a></li>
<li><a href="#">making over years </a></li>
<li><a href="#">Richard Clintock </a></li>
<li><a href="#">Virginia looked one</a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </a></li>
</ul>
<h2>Archives</h2>
<ul>
<li><a href="#">Latin literature </a></li>
<li><a href="#">making over years </a></li>
<li><a href="#">Richard Clintock </a></li>
<li><a href="#">Virginia looked one</a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </a></li>
</ul>
<h2>Advertisements</h2>
<img src="iPhoneSite-images/ads.png" alt="" />
</div>
<img src="iPhoneSite-images/sf.jpg" alt="" /> </div>
<div class="main fr">
<ul id="nav">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Production</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">blog</a></li>
</ul>
<div class="clearfix"></div>
<div class="main_i">
<h2>Free CSS Templates</h2>
<p>iPhoneSite is a CSS template that is free and fully standards compliant. <a href="http://www.free-css-templates.com/">Free CSS Templates</a> designed this template. </p>
<p> This template is allowed for all uses, including commercial use, as it is released under the Creative Commons Attributions 2.5 license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pretium commodo lorem. Cras gravida, mauris pellentesque aliquet posuere, sapien eros interdum orci, et velit tincidunt dapibus. Maecenas iaculis, orci eu hendrerit vehicula, turpis nunc vestibulum velit, quis tristique pede mauris eu arcu. Morbi fr </p>
<h2>Free CSS Templates</h2>
<p> spiderCity is a CSS template that is free and fully standards compliant. <a href="http://www.free-css-templates.com/">Free CSS Templates</a> designed this template. </p>
<p> This template is allowed for all uses, including commercial use, as it is released under the Creative Commons Attributions 2.5 license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pretium commodo lorem. Cras gravida, mauris pellentesque aliquet posuere, sapien eros interdum orci, et sagittis sem dolor eu est. Curabitur et urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris laoreet egestas tortor. Donec sit amet ante sit amet velit bibendum interdum. Curabitur vitae enim. Curabitur sapien. Nullam sit amet urna ac velit tincidunt dapibus. Maecenas iaculis, orci eu hendrerit vehicula, turpis nunc vestibulum velit, quis tristique pede mauris eu arcu. Morbi fringilla, orci malesuada lobortis sollicitudin, magna odio interdum sem, sit amet ultricies metus dolor non nunc. In odio tortor, suscipit sit amet, placerat vel, vulputate nec, turpis. Morbi dictum nibh in est. Proin luctus malesuada odio. Praesent ut ipsum a nibh lobortis semper. </p>
</div></div>
<div class="clearfix"></div>
</div>
<!-- /content -->
<div id="footer">
<div id="col">
<div class="first fl">
<h3>Recent Entries</h3>
Lorem ipsum dolor sit amet, consectetuer a
dipiscing elit. Praesent vestie
lacus. Aenean nonummy hendrerit mauris.
Phasellus porta. mi. Cum
sociis natoque penatibus et magnis dis parturi
Lorem ipsum dolor sit amt vestibulum molestiel.
Aenean nonummy t, consectetuer </div>
<div class=" fl ">
<h3>Most Discussed Articles</h3>
Lorem ipsum dolor sit amet, consectetuer a
dipiscing elit. Praesent vestibulum molestie
lacus. Aenean nonummy hendrerit mauris.
Phasellus porta. Fusce suscipit varius mi. Cum
sociis natoque penatibus et magnis dis parturi
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetuer </div>
<div class=" fl ">
<h3>Latest Forum Buzz</h3>
Lorem ipsum dolor sit amet, consectetuer a
dipiscing elit. Praesent vestibulum molestie
lacus. Aenean nonummy hendrerit mauris.
Phasellus porta. Fusce suscipit varius mi. Cum
sociis natoque penatibus et magnis dis parturi
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praese
</div>
</div>
<div class="clearfix"></div>
<div id="ftinner">
<p id="copyright"> 2008. All Rights Reserved.
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p>
</div>
</div>
<!-- /footer -->
</div>
</body>
</html>
Related examples in the same category