creative
<!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>Creative Studio - XHTML CSS template</title>
<meta name="keywords" content="Creative Studio, XHTML CSS template, free download, web design" />
<meta name="description" content="Creative Studio is a standard compliant XHTML CSS template from templatemo.com" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #494234;
background: url(creative-images/templatemo_body_bg.png);
}
a:link, a:visited { color: #191815; text-decoration: none; font-weight: normal; font-style: italic;}
a:active, a:hover { color: #191815; text-decoration: underline;}
p { margin: 0px; padding: 0px; text-align: justify; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }
.divider {
clear: both;
padding-bottom: 15px;
margin-bottom: 30px;
background: url(creative-images/templatemo_horizontal_divider.jpg) bottom repeat-x;
}
.fl { float: left; }
.fr { float: right; }
.m_right { margin-right: 30px; }
.button_01 a {
display: block;
width: 120px;
height: 22px;
padding: 4px 0 0 0;
background: url(creative-images/templatemo_button_01.jpg) no-repeat;
color: #dcc673;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
h1 {
margin: 0px;
padding: 2px 0;
font-size: 30px;
font-weight: bold;
}
h2 {
margin: 0 0 15px 0;
padding: 2px 0 10px 0;
font-size: 26px;
font-weight: normal;
color: #494234;
font-style: italic;
border-bottom: 2px solid #494234;
}
h3 {
margin: 0 0 10px 0;
padding: 2px 0 15px 0;
font-size: 26px;
font-weight: normal;
color: #f5d96c;
}
h4 {
margin: 0px;
padding: 0px;
font-size: 14px;
font-weight: bold;
}
h5 {
display: block;
margin: 0;
padding: 10px 0px;
width: 280px;
height: 45px;
font-size: 18px;
font-weight: normal;
text-align: center;
letter-spacing: 2px;
background: url(creative-images/templatemo_footer_box_top.jpg) no-repeat;
}
.image_wrapper {
margin-top: 3px;
margin-bottom: 5px;
}
.fl_image {
float: left;
margin-right: 20px
}
.fr_image {
float: right;
margin-left: 20px
}
.list_01 {
margin: 0 0 20px 40px;
padding: 0px;
}
.list_01 li {
margin: 0;
padding: 0 0 15px 0;
list-style-image: url(creative-images/templatemo_list_icon.png);
text-decoration: underline;
}
.list_01 li a {
font-style: normal;
text-decoration: underline;
}
#templatemo_container {
position: relative;
width: 900px;
margin: 0 auto;
background: url(creative-images/templatemo_container_top.jpg) top left no-repeat;
}
#templatemo_container #container_bottom {
position: absolute;
width: 900px;
height: 460px;
bottom: 0px;
left: 0px;
background: url(creative-images/templatemo_container_bottom.jpg) no-repeat;
}
#templatemo_container #bulb {
position: absolute;
right: 0px;
top: 0px;
width: 337px;
height: 273px;
background: url(creative-images/templatemo_light_off.png) no-repeat;
}
#templatemo_container #bulb:hover {
background: url(creative-images/templatemo_light_on.png) no-repeat;
}
/* site title bar */
#templatemo_site_title_bar {
width: 960px;
height: 150px;
padding: 0 10px;
background: url(creative-images/templatemo_top_bar.jpg) no-repeat;
}
#templatemo_site_title_bar #site_title {
float: left;
width: 400px;
margin-left: 150px;
padding: 50px 0 0 0;
text-align: left;
}
#site_title h1 a {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
font-size: 30px;
color: #947c58;
font-weight: bold;
text-decoration: none;
font-style: normal;
}
#site_title h1 a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title h1 span {
display: block;
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ada393;
line-height: 15px;
font-weight: normal;
}
/* end of site title bar */
/* menu */
#templatemo_menu {
clear: both;
width: 750px;
height: 128px;
padding: 0 65px 0 85px;
background: url(creative-images/templatemo_menu_bg.png) no-repeat;
}
#templatemo_menu ul {
margin: 0px;
padding: 30px 0 0 20px;
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
padding: 0 20px;
font-size: 14px;
font-style: italic;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #4f483a;
outline: none;
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #2f291d;
}
/* end of menu */
/* content */
#templatemo_content {
clear: both;
position: relative;
width: 670px;
padding: 0 105px 0 125px;
background: url(creative-images/templatemo_content_bg.png) repeat-y;
}
#content_bottom {
clear: both;
width: 900px;
height: 105px;
background: url(creative-images/templatemo_content_bottom.png) no-repeat;
}
#templatemo_content .section_w670 {
clear: both;
width: 670px;
}
.section_w670 p {
margin-bottom: 15px;
}
.section_w330 {
width: 330px;
}
.section_w330_content {
margin-right: 30px;
}
.contact_section {
width: 230px;
height: 150px;
padding: 60px 50px 0 50px;
background: url(creative-images/templatemo_contact_bg.png) no-repeat;
}
/* end of content */
/* footer */
#templatemo_footer {
clear: both;
width: 750px;
height: 41px;
padding: 15px 65px 15px 85px;
text-align: center;
background: url(creative-images/templatemo_footer_bg.png) no-repeat;
color: #ac9058;
}
#templatemo_footer a {
font-weight: normal;
color: #ac9058;
text-decoration: underline;
font-style: normal;
}
#templatemo_footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
#templatemo_footer .footer_menu {
margin: 0 0 5px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #ac9058;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
</style>
</head>
<body>
<div id="templatemo_container">
<div id="bulb"></div>
<div id="templatemo_site_title_bar">
<div id="site_title">
<h1>
<a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw" target="_parent">CREATIVE STUDIO</a>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim.</span>
</h1>
</div>
</div> <!-- templatemo_site_title_bar -->
<div id="templatemo_menu">
<ul>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw" class="current fast">Home</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">About</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Blog</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw" target="_parent">Gallery</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Contact</a></li>
</ul>
</div> <!-- end of menu -->
<div id="templatemo_content">
<div class="section_w670">
<h2>Welcome to our studio!</h2>
<p>This is a free CSS template provided by <a href="http://www.templatemo.com/page/1" target="_parent">TemplateMo.com</a>. You may download, modify and apply this layout for your websites. Credit goes to <a href="http://www.brusheezy.com" target="_blank">Brusheezy</a> for Photoshop Brushes. Nulla enim nibh, consectetuer sed, vestibulum elementum, sagittis nec, diam. Mauris blandit vehicula neque. </p>
<p>Proin consectetuer. Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. In hac habitasse platea dictumst.</p>
</div>
<div class="cleaner_h40"></div>
<div class="section_w670">
<h2>Latest Projects</h2>
<a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw"><img class="image_wrapper fl_image" src="creative-images/templatemo_image_01.png" alt="Image One" /></a>
<p>Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. In hac habitasse platea dictumst. <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Maecenas aliquam</a>, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque. Aenean eget tortor eget ipsum aliquet porta.</p>
<p>Vestibulum quis pede non urna venenatis vehicula. Donec venenatis. <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Cras urna metus</a>, feugiat non, consectetuer quis, pretium quis, nunc. </p>
<p>Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. In hac habitasse platea dictumst. </p>
<div class="cleaner"></div>
</div>
<div class="cleaner_h40"></div>
<div class="section_w670">
<div class="section_w330 fl">
<div class="section_w330_content">
<h2>Web Design Services</h2>
<ul class="list_01">
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Proin nec molestie ipsum</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Curabitur ut mattis urna</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Etiam luctus arcu at leo</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Integer sit amet tortor vel diam </a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Mauris lobortis nisl id lorem</a></li>
</ul>
</div>
</div>
<div class="section_w330 contact_section fr">
<h2>Contact Info.</h2>
<p>
Tel: 010-100-1000<br />
Fax: 020-200-2000<br />
Email: info {at} yourcompany.com<br />
Website: <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">www.yourcompany.com</a>
</p>
</div>
</div>
<div class="cleaner"></div>
</div> <!-- end of templatemo_content -->
<div id="content_bottom"></div>
<div id="templatemo_footer">
<ul class="footer_menu">
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Home</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">About</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Gallery</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Blog</a></li>
<li class="last_menu"><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Contact</a></li>
</ul>
Copyright 2024 <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw" target="_parent">Your Company Name</a> |
Design downloaded from <a href="http://www.webhostingservices.us/">Web Hosting Services</a> | <a href="http://www.templatemo.com/page/1" target="_parent">Free CSS Templates</a> |
Validate <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">XHTML</a> & <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">CSS</a>
</div> <!-- end of footer -->
<div class="cleaner"></div>
</div> <!-- end of container -->
</body>
</html>
Related examples in the same category