<!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>Sound Box - a complete website template</title>
<meta name="keywords" content="Sound Box, 网站模板, complete site, mini site" />
<meta name="description" content="Sound Box is a full website template provided from moobnn.com for free of charge" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<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>
<!--
The CSS. You can of course have this in an external .css file if you like.
Please note that not all these styles may be necessary for your use of Coda-Slider, so feel free to take out what you don't need.
-->
<!-- Initialize each slider on the page. Each slider must have a unique id -->
<script type="text/javascript">
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider()
// jQuery("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
});
</script>
</head>
<body>
<div id="templatemo_site_title_bar_wrapper">
<div id="templatemo_site_title_bar">
<div id="site_title">
<h1><a href="http://www.moobnn.com/" target="_parent">
<img src="images/templatemo_logo.png" alt="logo" width="200" height="40" />
<span>网站模板</span>
</a></h1>
</div>
<div id="twitter"><a href="#"></a></div>
</div> <!-- end of templatemo_site_title_bar -->
</div> <!-- end of templatemo_site_title_bar_wrapper -->
<div id="templatemo_content_wrapper">
<div id="templatemo_content">
<!-- start of slider -->
<div class="slider-wrap">
<div id="slider1" class="csw">
<div class="panelContainer">
<div class="panel" title="Home">
<div class="wrapper">
<h2>Welcome to Sound Box</h2>
<div class="image_wrapper fl_image">
<a href="http://www.moobnn.com/" target="_parent"><img src="images/templatemo_image_01.jpg" alt="image 1" /></a>
</div>
<p class="em_text">Sound Box Template is a <a href="http://www.moobnn.com" target="_parent">free CSS template</a> for everyone provided from moobnn.com website. Feel free to download, edit and apply this layout for your websites. Credit goes to <a href="http://www.ndoherty.com" target="_blank">Niall Doherty</a> for Coda-Slider.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc urna arcu, facilisis nec pretium quis, ullamcorper quis mauris. Aliquam nunc enim, tincidunt eu imperdiet lacinia, ornare non felis. Donec varius tempor hendrerit. Nam convallis est ut lacus ullamcorper vitae scelerisque enim lobortis.</p>
<div class="image_wrapper fr_image">
<img src="images/templatemo_image_09.jpg" alt="image 9"/>
</div>
<p><a href="#">Etiam nec risus</a> sit amet diam malesuada dictum non vitae est. Vivamus ac odio eros. Curabitur a ante erat, nec suscipit diam. Etiam euismod rutrum venenatis. Praesent imperdiet accumsan arcu nec scelerisque. Vivamus sed dui dignissim neque laoreet cursus et at magna. Praesent commodo vehicula sapien, et pretium velit viverra sed. Aliquam eu ante vel tortor auctor mollis.</p>
<div class="cleaner_h20"></div>
<p><a href="#5" class="cross-link" title="Go to Page 5">« Previous</a> | <a href="#2" class="cross-link" title="Go to Page 2">Next »</a></p>
</div>
</div>
<div class="panel" title="Services">
<div class="wrapper">
<h2>Services</h2>
<p class="em_text">Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit. In quis tortor ut velit suscipit lobortis. Quisque nec massa sapien, nec semper mi. Cras tincidunt posuere tortor vitae blandit. Sed in libero risus, eu pulvinar elit. Nunc tempor mauris ut turpis fringilla vestibulum. Nullam sit amet enim in velit volutpat hendrerit at vitae urna. </p>
<div class="cleaner_h20"></div>
<ul class="service_list">
<li><a href="#">Fusce vitae neque purus</a>, 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. <a href="#">Proin sit amet nunc enim</a>. Etiam bibendum, mi a luctus porttitor, magna est commodo diam, in tincidunt lorem mi et elit. Donec pretium dapibus nibh, ac ultrices neque pretium sed.</li>
<li>Nulla fermentum sodales scelerisque. Phasellus bibendum, leo sit amet rutrum faucibus, <a href="#">tellus lectus vulputate</a> magna, in mollis ante massa vitae ante. Aliquam erat volutpat.</li>
</ul>
<div class="cleaner_h20"></div>
<p><a href="#1" class="cross-link" title="Go to Page 1">« Previous</a> | <a href="#3" class="cross-link" title="Go to Page 3">Next »</a></p>
</div>
</div>
<div class="panel" title="Portfolio">
<div class="wrapper">
<h2>Portfolio</h2>
<div class="portfolio_box margin_r50">
<h3>Project One</h3>
<div class="port_img">
<a href="http://www.moobnn.com/" target="_parent"><img src="images/templatemo_image_02.jpg" alt="project 1" /></a>
</div>
<p>Cras purus libero, dapibus nec rutrum in, dapibus nec risus. Ut interdum mi sit amet magna feugiat auctor.</p>
<div class="button_01"><a href="http://www.moobnn.com/" target="_parent">Visit</a></div>
<div class="cleaner"></div>
</div>
<div class="portfolio_box margin_r50">
<h3>Project Two</h3>
<div class="port_img">
<a href="http://www.moobnn.com/page/2" target="_parent"><img src="images/templatemo_image_03.jpg" alt="project 2" /></a>
</div>
<p>In ac libero urna. Suspendisse sed odio ut mi auctor blandit. Duis luctus nulla metus, a vulputate mauris.</p>
<div class="button_01"><a href="http://www.moobnn.com/page/2" target="_parent">Visit</a></div>
<div class="cleaner"></div>
</div>
<div class="portfolio_box">
<h3>Project Three</h3>
<div class="port_img">
<a href="http://www.moobnn.com/page/3" target="_parent"><img src="images/templatemo_image_04.jpg" alt="p