metal-feel
<!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>
<title>Metal Feel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background: #000000 url(metal-feel-images/main_bg.jpg) repeat-x;
}
a:link, a:visited { color: #000000; text-decoration: underline; font-weight: normal; }
a:active, a:hover { text-decoration: none; }
p { margin: 0px; padding: 0px; }
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; }
.horizontal_divider {
height: 15px;
background: url(metal-feel-images/content_divider_01.png) no-repeat bottom center;
}
.fl { float: left; }
.fr { float: right; }
.margin_r50 { margin-right: 50px; }
.button_01 a {
display: block;
width: 76px;
height: 26px;
padding: 5px 5px 0 5px;
background: url(metal-feel-images/button_hover.png) no-repeat;
text-align: center;
color: #999;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}
.button_01 a:hover {
background: url(metal-feel-images/button.png) no-repeat;
}
h1 {
margin: 0px;
padding: 0px;;
font-size: 30px;
font-weight: bold;
color: #ffffff;
}
h2 {
margin: 0 0 15px 0;
padding: 3px 0;
font-size: 24px;
font-weight: bold;
color: #000000;
}
h3 {
margin: 0 0 5px 0;
padding: 5px 0;
font-size: 16px;
font-weight: bold;
font-weight: bold;
color: #000000;
}
.image_wrapper {
border: 1px solid #000;
padding: 5px;
margin-top: 3px;
margin-bottom: 5px;
background: #333;
}
.fl_image {
float: left;
margin-right: 15px
}
.fr_image {
float: right;
margin-left: 15px
}
.image_wrapper img {
border: 1px solid #000000;
}
/* site title bar */
/* site title */
#site_title_bar_wrapper {
position: relative;
width: 100%;
height: 80px;
margin: 0 auto;
background: url(metal-feel-images/header_bg.jpg) center top no-repeat;
}
#site_title_bar {
width: 800px;
height: 80px;
margin: 0 auto;
padding: 0 10px;
background: url(metal-feel-images/header_bg.jpg) center top no-repeat;
}
#site_title_bar #site_title {
float: left;
width: 180px;
padding: 5px 0;
margin: 20px 0 0 40px;
background: url(metal-feel-images/site_title_bg.jpg) top left no-repeat;
}
#site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 24px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title h1 a span {
display: block;
margin-top: 5px;
font-size: 12px;
color: #999;
font-weight: normal;
}
#site_title h1 a:hover span {
font-weight: normal;
}
#site_title_bar #twitter a {
float: right;
display: block;
height: 30px;
padding: 30px 60px 0 0;
margin: 20px 40px 0 0;
color: #999;
text-decoration: none;
background: url(metal-feel-images/twitter_icon.png) right bottom no-repeat;
}
#site_title_bar #twitter a:hover {
color: #CCC;
background: url(metal-feel-images/twitter_icon_hover.png) right bottom no-repeat;
text-decoration: none;
}
/* end of site title bar */
/* content */
#content_wrapper {
clear:both;
width: 100%;
height: 560px;
margin: 0 auto;
background: url(metal-feel-images/content_bg.jpg) top center no-repeat;
}
#content {
width: 800px;
height: 560px;
margin: 0 auto;
padding: 0 10px;
background: url(metal-feel-images/content_bg.jpg) top center no-repeat;
}
#content p {
text-align: justify;
}
.section_w320 {
width: 320px;
}
.section_w320 .w320_content {
float: right;
width: 180px;
}
#content p {
margin-bottom: 10px;
}
.service_list {
margin: 0 0 20px 0;
padding: 0px;
list-style: none;
}
.service_list li {
margin: 0px;
padding: 0 0 15px 30px;
background: url(metal-feel-images/list.png) no-repeat left top;
}
.portfolio_box {
float: left;
width: 200px;
margin-bottom: 20px;
}
.port_img {
width: 182px;
margin: 0 0 10px 0;
border: 1px solid #000;
}
.port_img img {
border: 1px solid #666;
}
.port_content {
clear: both;
width: 200px;
}
.portfolio_box .port_content p {
margin-bottom: 0;
padding-bottom: 0px;
}
#contact_form {
float: left;
width: 400px;
padding: 20px 0 0 0;
}
#contact_form form {
margin: 0px;
padding: 0px;
/*border:1px solid #e2d1be;
padding: 20px 20px 10px 20px; */
}
#contact_form form .input_field {
height: 18px;
width: 230px;
}
#contact_form form label {
float: left;
display: inline-block;
width: 100px;
text-align: right;
margin-right: 10px;
font-size: 14px;
}
#contact_form form textarea {
width: 230px;
height: 100px;
}
#contact_form form .submit_btn {
margin-left: 108px;
}
.em_text {
color: #ffffff;
}
.address_info {
float: right;
padding: 10px 0 0 0;
width: 300px;
line-height: 30px;
}
.address_info h3 {
border-bottom: 1px solid #000;
}
/* end of content */
/* content */
#footer_wrapper {
clear: both;
width: 100%;
height: 230px;
margin: 0 auto;
background: url(metal-feel-images/footer_bg.jpg) top center no-repeat;
}
#footer {
width: 720px;
height: 210px;
margin: 0 auto;
padding: 10px 40px;
color: #666;
text-align: center;
background: url(metal-feel-images/footer_bg.jpg) top center no-repeat;
}
#footer a {
font-weight: bold;
color: #999;
text-decoration: none;
}
/* end of content */
.stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
padding: 0;
}
.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
margin: 0;
position: relative;
width: 800px;
}
/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 500px; background: none; overflow: hidden;}
.csw .loading { margin: 200px 0 0 0; text-align: center; width: 800px; height: 500px;}
.stripViewer { /* This is the viewing window */
position: relative;
overflow: hidden;
margin: auto;
width: 800px; /* Also specified in .stripViewer .panelContainer .panel below */
height: 460px;
clear: both;
}
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
float:left;
height: 100%;
position: relative;
width: 800px; /* Also specified in .stripViewer above */
}
.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
overflow: hidden;
padding: 40px 40px 20px 40px;
height: 480px;
width: 720px;
}
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
float: left;
}
.stripNav ul { /* The auto-generated set of links */
height: 50px;
width: 760px;
padding: 0 0 0 30px;
margin: 10px 0 0 0;
list-style: none;
}
.stripNav ul li {
float: left;
margin-right: 10px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}
.stripNav a { /* The nav links */
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 36px;
background: #c6e3ff;
color: #666;
text-decoration: none;
display: block;
height: 38px;
width: 128px;
outline: none;
}
.stripNav li a { background: none; }
/*
.stripNav li.tab2 a { background: #60c }
.stripNav li.tab3 a { background: #63f }
.stripNav li.tab4 a { background: #63c }
.stripNav li.tab5 a { background: #00e } */
.stripNav li a:hover {
color: #CCC;
background: url(metal-feel-images/menu_bg.png) no-repeat;
}
.stripNav li a.current {
color: #CCC;
background: url(metal-feel-images/menu_bg.png) no-repeat;
}
.stripNavL, .stripNavR { /* The left and right arrows */
position: absolute;
top: 230px;
text-indent: -9000em;
}
.stripNavL a, .stripNavR a {
display: block;
height: 0px;
width: 0px;
}
.stripNavL {
left: 0;
}
.stripNavR {
right: 0;
}
.stripNavL {
background: url("metal-feel-images/arrow-left.gif") no-repeat center;
}
.stripNavR {
background: url("metal-feel-images/arrow-right.gif") no-repeat center;
}
</style>
<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
<script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).bind("load", function () {
jQuery("div#slider1").codaSlider()
});
</script>
</head>
<body>
<div id="site_title_bar_wrapper">
<div id="site_title_bar">
<div id="site_title">
<h1><a href="#"> <img src="metal-feel-images/logo.png" alt="" /> <span>free css templates for everyone</span> </a></h1>
</div>
<div id="twitter"><a href="#">follow me</a></div>
</div>
<!-- end of site_title_bar -->
</div>
<!-- end of site_title_bar_wrapper -->
<div id="content_wrapper">
<div id="content">
<!-- start of slider -->
<div class="slider-wrap">
<div id="slider1" class="csw">
<div class="panelContainer">
<div class="panel">
<div class="wrapper">
<h2>Welcome to our Website!</h2>
<div class="image_wrapper fl_image"> <img src="metal-feel-images/image_01.jpg" alt=""/> </div>
<p class="em_text">Free CSS template is provided by TemplateMo.com for everyone. You may use this template for your websites. Credits go to <a href="#">Free Photos</a> for photos and <a href="#">ndoherty.com</a> for Coda-Slider.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim metus, convallis id semper vel, posuere ac dui. Integer vestibulum, elit non lobortis sodales, dui nibh imperdiet turpis, id lobortis enim turpis eget ante. Donec non magna nunc. Donec ultricies fermentum sapien in facilisis.</p>
<div class="cleaner_h30"></div>
<div class="horizontal_divider"></div>
<div class="cleaner_h30"></div>
<div class="section_w320 fl"> <img class="fl" src="metal-feel-images/portfolio.png" alt="" />
<div class="w320_content">
<h3>Portfolio</h3>
<p>Sed cur sus risus in justo sodales imperdiet.</p>
<div class="cleaner"></div>
<div class="button_01"><a href="#">More</a></div>
</div>
</div>
<div class="section_w320 fr"> <img class="fl" src="metal-feel-images/aboutme.png" alt="" />
<div class="w320_content">
<h3>Portfolio</h3>
<p>Donec ultricies fermentum sapien in facilisis.</p>
<div class="cleaner"></div>
<div class="button_01"><a href="#">More</a></div>
</div>
</div>
<div class="cleaner_h20"></div>
<p><a href="#" class="cross-link">Next »</a></p>
</div>
</div>
<div class="panel">
<div class="wrapper">
<h2>Services</h2>
<p class="em_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis tortor ut velit suscipit lobortis. Quisque nec massa sapien, nec semper mi. Cras tincidunt posuere tortor vitae blandit.</p>
<div class="cleaner_h20"></div>
<ul class="service_list">
<li>Fusce vitae neque purus, at malesuada elit. Integer nec odio ac massa iaculis ornare. Integer fringilla vestibulum sapien eget porttitor. Suspendisse mauris elit, laoreet quis lacinia quis.</li>
<li>Ut et sapien dolor, at ultrices nisi. Proin sit amet nunc enim. Etiam bibendum, mi a luctus porttitor, magna est commodo diam, in tincidunt lorem mi et elit.</li>
<li>Nulla fermentum sodales scelerisque. Phasellus bibendum, leo sit amet rutrum faucibus, tellus lectus vulputate magna, in mollis ante massa vitae ante. Aliquam erat volutpat.</li>
<li>Donec pretium dapibus nibh, ac ultrices neque pretium sed. Maecenas non felis vitae nulla ultrices convallis sed eget quam.</li>
<li>Sed vulputate libero et tellus lacinia pulvinar. Atiam cursus velit nec eros aliquet aliquet. Etiam porttitor posuere dui, et imperdiet erat mollis sed. </li>
</ul>
<div class="cleaner_h20"></div>
<p><a href="#" class="cross-link">« Previous</a> | <a href="#" class="cross-link">Next »</a></p>
</div>
</div>
<div class="panel">
<div class="wrapper">
<h2>Protfolio</h2>
<div class="portfolio_box margin_r50">
<h3>Project 1</h3>
<div class="port_img"> <a href="#"><img src="metal-feel-images/image_02.jpg" alt="" /></a> </div>
<p>Lorem ipsum dolor sit amet. </p>
<div class="cleaner"></div>
</div>
<div class="portfolio_box margin_r50">
<h3>Project 2</h3>
<div class="port_img"> <a href="#"><img src="metal-feel-images/image_03.jpg" alt="" /></a> </div>
<p>Sed sed tellus a lorem porta.</p>
<div class="cleaner"></div>
</div>
<div class="portfolio_box">
<h3>Project 3</h3>
<div class="port_img"> <a href="#"><img src="metal-feel-images/image_04.jpg" alt="" /></a> </div>
<p>Integer nec orci at eros sollicitudin.</p>
<div class="cleaner"></div>
</div>
<div class="portfolio_box margin_r50">
<h3>Project 4</h3>
<div class="port_img"> <a href="#"><img src="metal-feel-images/image_03.jpg" alt="" /></a> </div>
<p>Lorem ipsum dolor sit amet.</p>
<div class="cleaner"></div>
</div>
<div class="portfolio_box margin_r50">
<h3>Project 5</h3>
<div class="port_img"> <a href="#"><img src="metal-feel-images/image_04.jpg" alt="" /></a> </div>
<p>Sed sed tellus a lorem porta.</p>
<div class="cleaner"></div>
</div>
<div class="portfolio_box">
<h3>Project 6</h3>
<div class="port_img"> <a href="#"><img src="metal-feel-images/image_02.jpg" alt="" /></a> </div>
<p>Integer nec orci at eros sollicitudin.</p>
<div class="cleaner"></div>
</div>
<div class="cleaner_h10"></div>
<p><a href="#" class="cross-link">« Previous</a> | <a href="#" class="cross-link">Next »</a></p>
</div>
</div>
<div class="panel">
<div class="wrapper">
<h2>About Us</h2>
<div class="image_wrapper fl_image"> <img src="metal-feel-images/image_05.jpg" alt=""/> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dictum tortor. Etiam ultrices neque id augue rhoncus in gravida eros dictum. Integer interdum sapien id diam tempor dapibus. Aliquam lobortis nunc risus. Suspendisse <a href="#">sodales</a> massa velit. Quisque odio quam, pulvinar sit amet convallis eget, venenatis ut turpis. Donec ultricies eros et magna viverra venenatis et at arcu. Suspendisse quis tincidunt orci. Nam lobortis varius porttitor. Quisque ut ipsum non tortor laoreet tristique. Sed auctor mollis massa vel aliquet. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim metus, convallis id semper vel, posuere ac dui. Integer <a href="#">vestibulum</a>, elit non lobortis sodales, dui nibh imperdiet turpis, id lobortis enim turpis eget ante. Donec non magna nunc. Donec ultricies fermentum sapien in facilisis.</p>
<div class="image_wrapper fr_image"> <img src="metal-feel-images/image_06.jpg" alt=""/> </div>
<p>Etiam vulputate mattis neque in egestas. Donec porta augue a justo consectetur nec fringilla sem feugiat. Vivamus non lacus elit. Duis tortor orci, consequat ac <a href="#">ullamcorper</a> ac, pulvinar et nunc. Curabitur sed massa nulla, quis pellentesque neque. Phasellus euismod congue felis eget lacinia. Ut suscipit, nunc a rhoncus rhoncus, risus nibh cursus velit. </p>
<p><a href="#" class="cross-link">« Previous</a> | <a href="#" class="cross-link">Next »</a></p>
</div>
</div>
<div class="panel">
<div class="wrapper">
<h2>Contact Us</h2>
<div id="contact_form">
<form method="post" name="contact" action="#">
<label for="author">Name:</label>
<input type="text" id="author" name="author" class="required input_field" />
<div class="cleaner_h10"></div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" class="validate-email required input_field" />
<div class="cleaner_h10"></div>
<label for="url">URL:</label>
<input type="text" name="url" id="url" class="input_field" />
<div class="cleaner_h10"></div>
<label for="text">Message:</label>
<textarea id="text" name="text" rows="0" cols="0" class="required"></textarea>
<div class="cleaner_h10"></div>
<input style="font-weight: bold;" type="submit" class="submit_btn" name="submitbutton" id="submitbutton" value=" Send " />
<input type="reset" name="reset" id="reset" value=" Reset " />
</form>
</div>
<div class="address_info">
<h3>Mailing Address</h3>
111/222 Fusce quis diam sit amet tortor<br />
Vivamus vestibulum 10110, Mauris congue<br />
<br />
<strong>Email:</strong> info [ at ] yourcompany [ dot ] com<br />
<strong>Website:</strong> www.templatemo.com </div>
<div class="cleaner_h20"></div>
<p><a href="#" class="cross-link">« Previous</a></p>
</div>
</div>
</div>
<!-- .panelContainer -->
</div>
<!-- #slider1 -->
</div>
<!-- .slider-wrap -->
<p id="cross-links" style="width:0px; height: 0px; font-size:0; overflow: hidden;"> Same-page cross-link controls:<br />
<a href="#" class="cross-link">Page 1</a> | <a href="#" class="cross-link">Page 2</a> | <a href="#" class="cross-link">Page 3</a> | <a href="#" class="cross-link">Page 4</a> | <a href="#" class="cross-link">Page 5</a> </p>
<!-- end of slider -->
</div>
<!-- end of content -->
</div>
<!-- end of content_wrapper -->
<div id="footer_wrapper">
<div id="footer"> Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a></div>
<!-- end of footer -->
</div>
<!-- end of footer_wrapper -->
</body>
</html>
Related examples in the same category