orangesin
<!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'>
body {
font-family: Arial, sans-serif;
line-height: 1.4;
font-size: 13px;
background: #434343;
margin: 0;
padding: 0;
color: #112211;
}
a { color: #00888F; text-decoration: none;}
a:hover { text-decoration: underline; }
#wrap {
background: #41C5CC;
width: 800px;
margin: 0 auto;
padding: 0 10px;
border-top: 10px solid #003C3F;
}
#top { background: url(orangesin-images/top.png) no-repeat; padding: 10px 0; }
#bottom { background: url(orangesin-images/bottom.png) no-repeat; padding: 10px 0; }
#header {
padding: 20px 0;
border-top: 1px solid #53D8DF;
}
#header h1 {
font-family: Arial, sans-serif;
margin: 0;
padding: 10px 0 0 10px;
font-weight: 100;
color: #FFB96F;
font-size: 29px;
letter-spacing: -2px;
line-height: 27px;
}
#header h1 a { text-decoration: none; color: #fff; }
#header h1 a:hover { text-decoration: none; color: #111; }
#header h2 { font-size: 21px; padding: 0 0 0 10px; margin: 0; color: #fefefe; font-weight: 100; }
#menu {
background: url(orangesin-images/menu.png) no-repeat;
height: 60px;
line-height: 60px;
}
#menu ul {
list-style-type: none;
margin: 0;
padding-left: 20px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
display: block;
padding: 0 10px 0 10px;
text-decoration: none;
color: #fff;
font-weight: 100;
}
#menu ul li a:hover {
color: #fff;
text-decoration: underline;
}
#contentwrap {
background: url(orangesin-images/content.png) repeat-y;
padding: 0 10px 0 30px;
}
#content {
margin: 20px 0;
padding: 10px;
float: left;
width: 470px;
border: 10px solid #EFEFEF;
}
#content h2 {
margin: 0;
color: #00888F;
line-height: 30px;
font-weight: 100;
}
#content p { padding: 0 0 10px 0; color: #232323;}
#content ul { padding: 0 20px 10px 30px; }
#sidebar {
float: right;
width: 190px;
margin: 20px 20px 20px 0;
padding: 10px 0;
border: 10px solid #efefef;
}
#sidebar h3 {
height: 30px;
line-height: 30px;
font-weight: 100;
margin: 0; padding: 0 0 0 10px;
color: #111;
font-size: 14px;
}
#sidebar p { padding: 0 10px 10px 10px; color: #232323; }
#sidebar ul {
padding: 5px 15px 10px 15px;
margin: 0;
color: #aaa;
list-style-type: none;
}
#sidebar ul li {
background: url(orangesin-images/bullet.png) no-repeat center left;
padding: 1px 0 2px 22px;
margin: 0;
}
#sidebar ul li a { }
#footer {
padding: 0 0 10px 0;
text-align: center;
color: #fff;
height: 20px;
line-height: 20px;
}
#footer p { padding: 0; margin: 0; }
#footer a { color: #fff; }
#footer a:hover { text-decoration: underline; }
</style>
<title>Orange Sin Template</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">Orange Sin Template</a></h1>
<h2>some catchy slogan goes here</h2>
</div>
<div id="menu">
<ul>
<li><a href="#">Category</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Published</a></li>
</ul>
</div>
<div id="top"> </div>
<div id="contentwrap">
<div id="content">
<h2>Tempus mentem debere lor cum sacras</h2>
<div style="float: left; padding: 15px 10px 10px 0;"><img src="sun.png" alt="image" /></div>
<p>Non facilius quaesita uno originem. Conflantur me mo ob scripturas in divisibile attendenti deprehendi. Corporea ac perpauca innumera ad collecta contumax. Humanas accipio facilem et colores ut ut. Infinitum veritates dubitabam re ex. Vigilantes substantia dubitandum de ha frequenter cavillandi in ex. Ac putantur occurrit judicium profecto ut.</p>
<p>Excludere im sapientia evidenter et delusisse. Externarum vi requiratur in judicarent an cavillandi. Agi praecise similium sequatur existant vel sed. Visa rem unam idea nia omne esse. An ad ea adeo otii heri vero homo. Essem paulo rem prava meo fas firma nomen.</p>
<p>Quo locis utens timet nobis miror sua. Aeque fecto ii im nulli ut forte mo. Ha ac creatorem conservat perfectae exhibetur. Fas rea gallice cui exhibet probant ponamus per. Occurreret ab facultates reducantur to ei si sufficiunt. Venturum ex dubitare to curantes meditari eo opinione explicui. Sui eos vix quietem sentire dicamne antehac remotam figuram age. Nam devenimus obdormiam usu dum eminenter hac. Plus vi amen ad quis se fiat meam ii.</p>
<h2>Quo locis utens timet nobis miror sua</h2>
<div style="float: left; padding: 30px 10px 10px 10px;"><img src="pingi.png" alt="image" /></div>
<p>Fusce ullamcorper libero nec turpis semper et rutrum est hendrerit. Etiam sit amet nibh in tortor ultrices tempus. Integer molestie, nisi tempor mollis dapibus, ipsum sem cursus ante, at volutpat est erat id lorem. Nulla mattis porta lectus, nec iaculis est posuere vitae. Suspendisse eu nulla mi, in fermentum quam. In vulputate rutrum mauris ut luctus. Cras vehicula ante vitae nisi consequat consectetur.</p>
<div style="clear: both;"> </div>
</div>
<div id="sidebar">
<h3>Menu Navigation</h3>
<ul>
<li><a href="#">Proin at</a></li>
<li><a href="#">Class aptent taciti</a></li>
<li><a href="#">Morbi in dolor</a></li>
<li><a href="#">Praesent ultricies</a></li>
<li><a href="#">Aenean euismod</a></li>
<li><a href="#">Donec sempe</a></li>
<li><a href="#">Suspendisse potenti</a></li>
</ul>
<h3>Useful Resources</h3>
<ul>
<li><a href="#">Praesent ultricies</a></li>
<li><a href="#">Aenean euismod</a></li>
<li><a href="#">Donec sempe</a></li>
<li><a href="#">Suspendisse potenti</a></li>
<li><a href="#">Proin at</a></li>
<li><a href="#">Class aptent taciti</a></li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
<div id="bottom"> </div>
<div id="footer">
<p>© Copyright 2011 <a href="#">You</a> | Template by <a href="http://armandoboni.com">Dyqan Online</a> | <a href="http://armandoboni.com">Web Design</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category