slider
<!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>Slider</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
color: #333;
background: #FFF url(slider-images/bg.jpg) repeat-x;
}
a:link, a:visited { color: #e18814; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #ffffff; }
h3 {
font-size: 14px;
color: #1f2947;
padding: 3px 0 5px 0;
margin: 0 0 10px 0;
}
p {
margin: 0px;
padding: 0px;
}
img {
margin: 0px;
padding: 0px;
border: none;
}
.cleaner {
clear: both;
width: 100%;
height: 1px;
font-size: 1px;
}
.rc_btn a {
float: right;
clear: both;
text-align: center;
display: block;
width: 103px;
padding: 4px 0 5px 0;
background: #333 url(slider-images/btn.jpg) no-repeat;
color: #333;
font-weight: bold;
text-decoration: none;
}
.rc_btn a:hover {
color: #fff;
}
#container {
width: 980px;
margin: 0 auto;
}
#title {
width: 980px;
height: 100px;
background: url(slider-images/title_bg.jpg) no-repeat;
}
#title #title {
color: #FFF;
width: 270px;
font-size: 32px;
margin: 0 0 0 100px;
padding: 60px 0 5px 0px;
font-weight: bold;
text-align: center;
}
/* menu */
#menu {
clear: both;
width: 960px;
height: 90px;
padding: 0px 10px;
background: url(slider-images/menu_bg.jpg) no-repeat;
}
#menu ul {
padding: 13px 0 0 0;
margin: 0;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
width: 160px;
padding: 10px 0;
text-align: center;
font-size: 20px;
font-weight: normal;
text-align: center;
text-decoration: none;
background: url(slider-images/menu_divider.jpg) right no-repeat;
color: #c0790b;
outline: none;
}
#menu li a:hover, #menu li .current {
color: #FFF;
}
#menu li .last {
background: none;
}
#menu li span {
display: block;
margin-top: 10px;
color: #666;
font-size: 12px;
font-weight: normal;
}
/* end of menu*/
/* banner */
#banner {
clear: both;
width: 960px;
height: 320px;
padding: 0 10px;
background: url(slider-images/banner_bg.jpg) no-repeat;
}
/* end of banner */
/* content */
#content {
clear: both;
width: 960px;
padding: 0 10px;
position: relative;
background: url(slider-images/content_bg.jpg) repeat-y;
}
#content .title {
font-size: 18px;
color: #ee9116;
padding: 3 0 10px 0;
margin: 0 0 10px 0;
}
#content #bottom_bg {
clear: both;
width: 980px;
height: 30px;
margin-left: -10px;
left: 0px;
bottom: 0px;
background: url(slider-images/content_bottom_bg.jpg) no-repeat;
}
#content #content_left {
float: left;
width: 520px;
margin: 40px 0 0 40px;
}
#content #content_left p {
text-align: justify;
padding-bottom: 8px;
}
#content_left .testimonial_section {
text-align: center;
}
#content_left .testimonial_section p {
font-size: 14px;
font-style: italic;
text-align:center
}
#content #content_right {
float: right;
width: 280px;
margin: 40px 40px 0 0;
}
#content_right .content_right_box {
width: 240px;
height: 129px;
padding: 10px 20px;
background: url(slider-images/newsletter_box.jpg) no-repeat;
}
.content_right_box .box_title {
font-size: 18px;
color: #333;
padding: 3px 0 5px 0;
margin: 0 0 5px 0;
}
.content_right_box p {
line-height: 16px;
text-align: justify;
padding-bottom: 5px;
color: #FFF;
}
.content_right_box input {
margin-bottom: 10px;
}
/* end of content */
/* content */
#bottom_panel {
clear: both;
width: 930px;
padding: 40px 0 50px 40px;
background: #FFF url(slider-images/bottom_section_bg.jpg) right bottom no-repeat;
}
#bottom_panel .bottom_section {
float: left;
margin-right: 40px;
width: 190px;
}
.bottom_section ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.bottom_section li {
margin: 0px;
padding: 0 0 3px 0;
}
.bottom_section li a, a:hover, a:visited {
color: #333;
text-decoration: none;
font-weight: normal;
}
/* footer */
#footer {
clear: both;
width: 980px;
padding: 5px 0 20px 0;
text-align: center;
color: #333;
background-color: #FFF;
}
#footer a {
font-weight: normal;
}
/* end of footer */
</style>
<link href="css/jquery.ennui.contentslider.css" rel="stylesheet" type="text/css" media="screen,projection" />
</head>
<body>
<div id="container">
<div id="title">
<div id="title">Slider</div>
</div>
<!-- end of title -->
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home<br />
<span>a place to start</span></a></li>
<li><a href="http://www.free-css.com/">Portfolio<br />
<span>what we have done</span></a></li>
<li><a href="http://www.free-css.com/">Services<br />
<span>what we do</span></a></li>
<li><a href="http://www.free-css.com/">Blog<br />
<span>what we are doing</span></a></li>
<li><a href="http://www.free-css.com/">About Us<br />
<span>who we are</span></a></li>
<li><a href="http://www.free-css.com/" class="last">Contact Us<br />
<span>get to us</span></a></li>
</ul>
</div>
<!-- end of menu -->
<div id="banner">
<div id="one" class="contentslider">
<div class="cs_wrapper">
<div class="cs_slider">
<div class="cs_article"> <a href="http://www.free-css.com/"> <img src="slider-images/article01.jpg" alt="" /> </a>
<div class="text">
<h2> <a href="http://www.free-css.com/">Project One</a> </h2>
<p> Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi. Vel dolore soluta qui odio non. Sollemnes minim eorum feugiat nihil nobis. Gothica dolor in legentis nihil quinta. </p>
<a href="http://www.free-css.com/">Read More</a> </div>
</div>
<!-- End cs_article -->
<div class="cs_article"> <a href="http://www.free-css.com/"> <img src="slider-images/article02.jpg" alt="" /> </a>
<div class="text">
<h2> <a href="http://www.free-css.com/">Project Two</a> </h2>
<p> Lorem ipsum dolor sit ame, consectetur adipiscing elit. In tincidunt, nulla id accumsan ultrices, justo turpis adipiscing nunc, ac pellentesque ipsum massa id dui. Vivamus ut dui ut mi lobortis sodales. Nullam sollicitudin justo ut lorem. </p>
<a href="http://www.free-css.com/">Read More</a> </div>
</div>
<!-- End cs_article -->
<div class="cs_article"> <a href="http://www.free-css.com/"> <img src="slider-images/article03.jpg" alt="" /> </a>
<div class="text">
<h2> <a href="http://www.free-css.com/">Project Three</a> </h2>
<p> Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi. Vel dolore soluta qui odio non. Sollemnes minim eorum feugiat nihil nobis. Gothica dolor in legentis nihil quinta. </p>
<a href="http://www.free-css.com/">Read More</a> </div>
</div>
<!-- End cs_article -->
<div class="cs_article"> <a href="http://www.free-css.com/"> <img src="slider-images/article04.jpg" alt="" /> </a>
<div class="text">
<h2> <a href="http://www.free-css.com/">Project Four</a> </h2>
<p> Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. In hac habitasse platea dictumst. Aenean cursus. Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque. </p>
<a href="http://www.free-css.com/">Read More</a> </div>
</div>
<!-- End cs_article -->
</div>
<!-- End cs_slider -->
</div>
<!-- End cs_wrapper -->
</div>
<!-- End contentslider -->
<!-- Site JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.ennui.contentslider.js"></script>
<script type="text/javascript">
$(function() {
$('#one').ContentSlider({
width : '940px',
height : '300px',
speed : 800,
easing : 'easeInOutBack'
});
});
</script>
<script src="js/jquery.chili-2.2.js" type="text/javascript"></script>
<script src="js/chili/recipes.js" type="text/javascript"></script>
</div>
<!-- end ob banner -->
<div id="content">
<div id="content_left">
<div class="title">Welcome to our website</div>
<p>This layout is a free CSS template brought to you by TemplateMo.com website. You may use this template for any of your websites. Credit goes to SmashingMagazine.com for icons used in this template.</p>
<p>Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Proin consec tetuer.</p>
<p>Donec vene natis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. <a href="http://www.free-css.com/">Read more...</a> </p>
<div class="cleaner" style="height: 40px"> </div>
<div class="testimonial_section">
<p style="text-align:center">"Aliquam pretium porta odio. Fusce quis diam sit amet tortor luctus pellentesque. Donec accumsan urna non elit tristique mattis." </p>
TemplateMo.com</div>
</div>
<!-- end of content left -->
<div id="content_right">
<div class="title">Latest Updates</div>
<p>"ves tib ulum ele men tum, sag ittis nec, diam. Mau ris bla ndit vehicula neque. Proin consectetuer. Donec venenatis. <a href="http://www.free-css.com/">Read More</a></p>
<div class="cleaner" style="height: 40px;"> </div>
<div class="content_right_box">
<div class="box_title">Newsletter</div>
<p>Enter your email address to subscribe our newsletter.</p>
<input style="width:230px;" type="text" value="" />
<div class="rc_btn"><a href="http://www.free-css.com/">Subscribe</a></div>
</div>
</div>
<!-- end of content right -->
<div id="bottom_bg"></div>
</div>
<!-- end of content -->
<div id="bottom_panel">
<div class="bottom_section">
<h3>Affiliate programs</h3>
<p>Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Proin consec tetuer.<a href="http://www.free-css.com/">Read More</a></p>
<div class="cleaner"> </div>
</div>
<div class="bottom_section">
<h3>Our Partners</h3>
<ul>
<li><a href="http://www.free-css.com/">TemplateMo.com</a></li>
<li><a href="http://www.free-css.com/">FlashMo.com</a></li>
<li><a href="http://www.free-css.com/">WebDesignMo.com</a></li>
<li><a href="http://www.free-css.com/">PhotoVaco.com</a></li>
</ul>
<div class="cleaner"> </div>
</div>
<div class="bottom_section">
<h3>CSS Templates</h3>
<ul>
<li><a href="http://www.free-css.com/">The Solution</a></li>
<li><a href="http://www.free-css.com/">Software Co.</a></li>
<li><a href="http://www.free-css.com/">Dating Site</a></li>
<li><a href="http://www.free-css.com/">Book Store</a></li>
</ul>
</div>
<div class="bottom_section">
<h3>XHTML/CSS validation</h3>
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/slider-images/vcss-blue" alt="" vspace="8" border="0" /></a>
<div class="cleaner"> </div>
</div>
<div class="cleaner"> </div>
</div>
<!-- end of bottom panel -->
<div id="footer"> Copyright © 2024 <a href="http://www.free-css.com/"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a> </div>
<!-- end of footer -->
</div>
<!-- end of container -->
</body>
</html>
Related examples in the same category