CorporateRedGrey
<!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>
<!--
Design by Orice Media
http://www.oricemedia.ro
Released under a Creative Commons Attribution 2.5 License
Free to use as long as the links in the footer remain intact !
Name : Corporate Red Grey
Description: A two-column, fixed-width design with light color scheme.
Version : 1.0
= If you need help customizing this template =
= or want a great website built at an affordable price =
= contact us at > bitpublimedia@gmail.com < ! =
Check out http://web-design-tuts.blogspot.com/ for
more free templates and web design tips.
-->
<title> ... Add page title ... :: CorporateRedGrey by Orice Media</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" add page description... " />
<meta name="keywords" content=" add keywords... " />
<!-- links to stylesheets and scripts -->
<style type='text/css'>
/*
Table Of Contents
1. =GENERAL
2. =HEADER
2.1 =LOGO
2.2 =NAVIGATION
3. =CONTENT
3.1 =MAIN CONTENT
3.2 =SIDEBAR
3.2.1 =SIDEBAR NAVIGATION
3.2.2 =CONTACT INFO
4. =FOOTER
5. =MISC
5.1 =ROUNDED CORNERS
5.2 =CONTACT FORM
-----------------------------------------------------------------------------------*/
/* =GENERAL
------------------ */
body { margin:0; padding:0;
background:#114E7B url(images/bg.gif) repeat-x top left;
color:#666;
font:normal 13px Arial, Helvetica, sans-serif; position:relative; }
a { color:#005EB3; }
a:hover { }
img{ border:none; }
table{ width:100%; margin-bottom:15px; line-height:24px; }
th{ border-top:3px solid #970205; padding:7px 10px; color:#fff; background-color:#CA0308; text-align:left; }
td{ border-bottom:1px solid #f4f4f4; padding:10px; }
code{ display:block; margin-bottom:15px; padding:10px; border-left:5px solid #ddd; }
blockquote{ display:block; margin:15px; padding-left:50px; background:#fff url(images/blockquote-quotemark.gif) no-repeat top left; }
blockquote p{ font-style:italic; font-family:Georgia,"Times New Roman",Times,serif; margin:0; height:1%; }
/* align images + text */
.img-left{ float:left; margin:10px 15px 15px 5px; } /* Add this to any image you want to left align */
.img-right{ float:right; margin:10px 5px 15px 15px; } /* Add this to any image you want to right align */
.text-right{ text-align:right; }
.text-center{ text-align:center; }
/* Clear Fix Hack - add class="fixed" to div's that have floated elements in them */
.fixed:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.fixed{display:block;}
/* \*/
.fixed{min-height:1%;}
* html .fixed{height:1%;}
/* =HEADER
------------------ */
#header { margin:60px auto 0px auto; width:900px; background-color:#FFFFFF; }
/* =LOGO
------------------*/
.logo { padding:31px 0 20px 30px; margin:0; float:left; color:#FFFFFF; }
.logo a{ outline:none; }
/* =NAVIGATION
------------------*/
.nav { padding: 0 20px; margin:0px 30px 0 0; float:right; border-bottom:1px solid #efefef; }
.nav ul { padding:0; margin:0; list-style:none; border:0;}
.nav ul li { float:left; margin:0; padding:0 2px 0 0; border:0;}
.nav ul li a { float:left; margin:0; padding:75px 11px 11px 11px; color:#111; font-size: 14px; font-weight:bold; text-decoration:none; outline:none; }
.nav ul li a:hover{ color:#CC0000; }
.nav ul li a.active { background-color:#CC0000; color:#fff; }
.nav ul li a.active:hover{ color:#fff; }
h2.pagetitle{ color:#fff; font-size:30px; width:865px; margin:0 auto; padding:35px 0 35px 35px; border-left:1px solid #ccc; border-right:1px solid #ccc; }
/* =CONTENT
-------------------*/
#content { width:840px; margin:0 auto; background-color:#FFF; padding:25px 30px; }
#content h2 { margin:0; padding:10px 5px; font-size: 28px; color:#000; }
#content h3 { margin:0; padding:15px 5px; font-size:20px; color:#000; }
#content h4 { margin:0; padding:15px 5px; font-size:16px; font-weight:bold; color:#000; }
#content ul { margin:0 40px 0 0; padding:0 10px 15px 20px; list-style:inside; }
#content li { margin:0; padding:0;}
#content ul li ul{ padding-bottom: 0px; }
#content p, #content li { line-height:24px; }
#content p { padding:5px; margin:0;}
/* =MAIN CONTENT
------------------*/
#maincontent { float:left; width:550px; padding:0px 30px 30px 0; margin:0; }
#maincontent h2 { margin-bottom:15px; color:#000; }
/* =SIDEBAR
------------------*/
#sidebar { float:right; width:240px; padding:12px 0 0 0px; }
#sidebar h3{ padding:7px 10px; margin-bottom:10px; font-size:17px; border-bottom:3px solid #e3e3e3; }
#sidebar .title { background:url(images/news_title.gif) no-repeat left center; padding:5px 0 5px 20px; font-weight:bold;}
/* =SIDEBAR NAVIGATION
---------------------*/
#sidebar ul.sidebar_nav { padding:0; margin:0; list-style:none;}
#sidebar ul.sidebar_nav li { padding:5px 10px; border-bottom:1px solid #e5e5e5;}
#sidebar ul.sidebar_nav li a { background:none; color:#6e6e6e; font-weight:normal; padding:0 0 0 15px; text-decoration:none; }
#sidebar ul.sidebar_nav li a.active { color:#0000FF;}
#sidebar ul.sidebar_nav li a:hover { text-decoration:underline;}
/* =CONTACT INFO
-------------------*/
#sidebar ul.contact_info { padding:0; margin:0; list-style:none;}
#sidebar ul.contact_info li { width:210px; float:left; background:url(images/cont_bg.gif) no-repeat left center; padding:0 0 0 15px; margin:0 0 0 5px;}
#sidebar ul.contact_info li a { padding:0; margin:0; background:none;}
/* =FOOTER
-------------------*/
#footer { padding:0; margin:0 auto; padding:5px 40px; width:820px; }
#footer p { font-size: 12px; color:#fff;}
#footer a { color:#fff; text-decoration:underline;}
.copyright{ float:left;}
.credits{ float:right;}
/* =MISC
-------------------*/
/* =CONTACT FORM
-------------------*/
form { margin:0; padding:5px 10px;}
form ol { margin:0; padding:0; list-style:none;}
form li { margin:0; padding:0; background:none; border:none; display:block;}
form li.buttons { margin:5px 0 5px 110px;}
form label { margin:2px 10px 2px 0; width:170px; display:block; padding:3px 0;
text-transform:capitalize; float:left; text-align:right;}
form label span { color:#2c2c2c;}
form input.text { width:320px; border:1px solid #dcdcdc; margin:5px 0; padding:5px; height:16px; background:#FFF; float:left;}
form textarea { width:320px; border:1px solid #dcdcdc; margin:5px 0; padding:5px; background:#FFF; float:left;}
</style>
</head>
<body>
<div id="header" class="fixed">
<div class="logo">
<a href="index.html">
<img src="_content/temp/logo.png" border="0" width="220" height="75" alt="logo" />
</a>
</div><!-- end .logo -->
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="examples.html" class="active">Typography Examples</a></li>
<li><a href="">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- end .nav -->
</div><!-- end #header -->
<div id="content" class="fixed">
<div id="maincontent">
<!-- ************** V MAIN CONTENT HERE V ********************************************************************************** -->
<h2>Typography Examples <h2></h2>
<img src="CorporateRedGrey-_layout/images/blank.jpg" width="75" height="75" alt="" class="img-left" />
<p>This is paragraph text. The rest of this paragraph is filler text to maintain balance.
Quisque libero nulla, porttitor eu, <a href="#">linked text</a>, gravida ac, nulla.
Ut <del>deleted text</del>, tellussed <strong>bold text</strong>,
<em>emphasised text</em> leo, id varius massa lectus ultrices diam.</p>
<h3>Heading Three <h3></h3>
<img src="CorporateRedGrey-_layout/images/blank.jpg" width="75" height="75" alt="" class="img-right" />
<p>This is paragraph text. The rest of this paragraph is filler text to maintain balance.
Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus
sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam.</p>
<h4>Heading Four <h4></h4>
<p>This is paragraph text. The rest of this paragraph is filler text to maintain balance.
Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus
sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam.</p>
<h3>Unordered List:</h3>
<ul>
<li>List Item One
<ul>
<li>Sublevel List Item A</li>
<li>Sublevel List Item B</li>
<li>Sublevel List Item C</li>
</ul>
</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
<h3>Ordered List:</h3>
<ol>
<li>List Item One
<ol>
<li>Sublevel List Item A</li>
<li>Sublevel List Item B</li>
<li>Sublevel List Item C</li>
</ol>
</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ol>
<h3><code> example</h3>
<code><? echo('Hello world'); ?></code>
<h3><blockquote> example</h3>
<blockquote><p>Mauris sit amet tortor in urna tincidunt aliquam.
Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas</p>
</blockquote>
<h3>table example</h3>
<table cellspacing="0">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John Smith</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>John Smith</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>John Smith</td>
<td>20</td>
</tr>
</table>
<h3>Form example</h3>
<form action="" method="post" >
<ol>
<li>
<label for="name">Your Name *</label>
<input id="name" name="name" class="text" />
</li>
<li>
<label for="email">Your Email *</label>
<input id="email" name="email" class="text" />
</li>
<li>
<label for="company">Company Name</label>
<input id="company" name="company" class="text" />
</li>
<li>
<label for="subject">Subject</label>
<input id="subject" name="subject" class="text" />
</li>
<li>
<label for="message">Message *</label>
<textarea id="message" name="message" rows="6" cols="50"></textarea>
</li>
<li>
<label> </label>
<input type="submit" value="Send!" />
</li>
</ol>
</form>
<!-- ************** V END MAIN CONTENT HERE V ********************************************************************************** -->
</div><!-- end #maincontent -->
<div id="sidebar">
<!-- *************** V SIDEBAR CONTENT HERE V ********************************************************************************** -->
<h3>Sub Navigation</h3>
<ul class="sidebar_nav">
<li><a href="#">Quisque libero nulla</a></li>
<li><a href="#" class="active">Porttitor eu</a></li>
<li><a href="#">Facilisis tincidunt</a></li>
<li><a href="#">Orci erat lobortis</a></li>
</ul><!-- end .sub_nav -->
<p> </p><!-- paragraph with non breaking white space; makes space between different elements of the sidebar -->
<h3>Testimonials</h3>
<p><em>Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla.
Ut malesuada, tellus sed facilisis tincidunt, orci erat lobortis leo, id
varius massa lectus ultrices diam.</em></p>
<p class="text-right"><strong>- Long John Silver</strong></p>
<p> </p><!-- paragraph with non breaking white space; makes space between different elements of the sidebar -->
<h3>Adress</h3>
<ul class="contact_info">
<li>1234 Some Adress</li>
<li>Nashville, TN 305</li>
<li>United States of America</li>
<li>Tel: +1 234 567 8910</li>
<li>E-mail: <a href="mailto:mail@yoursitename.com">mail@yoursitename.com</a></li>
</ul>
<img src="_content/temp/maps_1.gif" alt="picture" width="230" height="210" />
<!-- *************** ^ SIDEBAR CONTENT ENDS HERE ^ ****************************************************************************** -->
</div><!-- end #sidebar -->
</div><!-- end #content -->
<div id="footer" class="fixed">
<p class="copyright">Copyright © 2009 - 2010 Sitename.com. All Rights Reserved.</p>
<!-- in order to use this template legally the following links must remain intact. -->
<p class="credits">
<strong>Credits:</strong> Initial
<a href="http://www.oricemedia.ro/servicii/design-siteuri-web.html"
title="web design, realizare site-uri, pagini web">web design</a> by
<a href="http://www.oricemedia.ro/" title="agentie web design mures">Orice Media</a>.
</p>
</div><!-- end #footer -->
</body>
</html>
Related examples in the same category