<!DOCTYPE html>
<html>
<head>
<title>Sonic Template</title>
<meta name="keywords" content="sonic, responsive, free template, fluid layout, bootstrap, templatemo" />
<meta name="description" content="Sonic is one-page responsive free template using Bootstrap. This layout is suitable for creative portfolio showcase." />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/templatemo_misc.css">
<link rel="stylesheet" href="css/templatemo_style.css">
</head>
<body>
<!-- This one in here is responsive menu for tablet and mobiles -->
<div class="responsive-navigation visible-sm visible-xs">
<a href="#" class="menu-toggle-btn">
<i class="fa fa-bars fa-2x"></i>
</a>
<div class="navigation responsive-menu">
<ul>
<li class="home"><a href="#templatemo">Home</a></li>
<li class="about"><a href="#about">About Us</a></li>
<li class="services"><a href="#services">Services</a></li>
<li class="portfolio"><a href="#portfolio">Portfolio</a></li>
<li class="contact"><a href="#contact">Contact</a></li>
</ul> <!-- /.main_menu -->
</div> <!-- /.responsive_menu -->
</div> <!-- /responsive_navigation -->
<div id="main-sidebar" class="hidden-xs hidden-sm">
<div class="logo">
<a href="http://sc.chinaz.com/" ><h1>站长素材</h1></a>
<span>Creative Portfolio Template</span>
</div> <!-- /.logo -->
<div class="navigation">
<ul class="main-menu">
<li class="home"><a href="#templatemo">Home</a></li>
<li class="about"><a href="#about">About Us</a></li>
<li class="services"><a href="#services">Services</a></li>
<li class="portfolio"><a href="#portfolio">Portfolio</a></li>
<li class="contact"><a href="#contact">Contact</a></li>
</ul>
</div> <!-- /.navigation -->
</div> <!-- /#main-sidebar -->
<div id="main-content">
<div id="templatemo">
<div class="main-slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="slider-caption">
<h2>Responsive Layout</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>
<a href="http://sc.chinaz.com/" class="largeButton homeBgColor">Read More</a>
</div>
<img src="images/slide1.jpg" alt="Slide 1">
</li>
<li>
<div class="slider-caption">
<h2>Portfolio Website</h2>
<p>Fusce convallis enim vitae sagittis mollis. Sed bibendum ultricies dignissim.</p>
<a href="http://sc.chinaz.com/" class="largeButton homeBgColor">Details</a>
</div>
<img src="images/slide2.jpg" alt="Slide 2">
</li>
<li>
<div class="slider-caption">
<h2>Free Templates</h2>
<p>All templates are free to download and use for your personal or commercial websites.</p>
<a href="http://sc.chinaz.com" class="largeButton homeBgColor">Downloads</a>
</div>
<img src="images/slide3.jpg" alt="Slide 3">
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="welcome-text">
<h2>Welcome to Sonic Template</h2>
<p>Sonic is provided by templatemo website for everyone. Credit goes to <a href="http://flexslider.woothemes.com" >FlexSlider</a>. Maecenas adipiscing pellentesque elit eu volutpat. Integer vitae <a href="#">pulvinar magna</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi metus, nec sagittis purus ultrices id.</p>
</div>
</div>
</div>
</div>
</div> <!-- /#sTop -->
<div class="container-fluid">
<div id="about" class="section-content">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>About Us</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="member-item">
<div class="member-thumb">
<img src="images/team1.jpg" alt="girl 1">
<div class="overlay">
<ul class="social-member">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
</div>
<div class="member-content">
<h4>Christina Welldone</h4>
<p>Marketing Director</p>
</div>
</div>
</div> <!-- /.col-md-4 -->
<div class="col-md-4">
<div class="member-item">
<div class="member-thumb">
<img src="images/team2.jpg" alt="girl 2">
<div class="overlay">
<ul class="social-member">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
</div>
<div class="member-content">
<h4>Teri Belle</h4>
<p>Creative Executive</p>
</div>
</div>
</div> <!-- /.col-md-4 -->
<div class="col-md-4">
<div class="member-item">
<div class="member-thumb">
<img src="images/team3.jpg" alt="girl 3">
<div class="overlay">
<ul class="social-member">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
</div>
<div class="member-content">
<h4>Tawana Cherry</h4>
<p>Company President</p>
</div>
</div>
</div> <!-- /.col-md-4 -->
</div> <!-- /.row -->
<div class="row our-story">
<div class="col-md-8">
<h3>Our Management Team</h3>
Quisque in metus tristique, gravida dolor ut, varius neque. Maecenas ac risus aliquam, facilisis massa id, vulputate elit. Curabitur pretium arcu dictum, faucibus diam quis, commodo turpis. Proin viverra, risus eget egestas sodales, felis ante scelerisque ligula, eget condimentum diam ligula eu tellus.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, exercitationem, laboriosam, modi non quisquam voluptas accusamus numquam ipsum reiciendis saepe veniam cupiditate explicabo autem. Repudiandae tempore dolore deserunt nemo voluptatum consectetur aspernatur expedita aliquid iste illo enim molestias vel animi quod.
</div>
<div class="col-md-4">
<div class="story-image">
<img src="images/responsive-design.jpg" alt="">
</div>
</div>
</div> <!-- /.row -->
</div> <!-- /#about -->
<div id="services" class="section-content">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>Services</h2>
</div> <!-- /.section-title -->
</div> <!-- /.col-md-12 -->
</div> <!-- /.row -->
<div class="row">
<div class="col-md-4">
<div class="service-item clearfix">
<div class="service-icon">
<i class="fa fa-bolt fa-2x"></i>
</div>
<div class="service-content">
<h3>The <a href="http://cn.onlyimage.com" class="service_links" target="_blank">Best</a><br>Support Ever</h3>
</div>
</div> <!-- /.service-item -->
</div> <!-- /.col-md-4 -->
<div class="col-md-4">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop fa-2x"></i>
</div>
<div class="service-content">
<h3>Fu
扁平化设计摄影企业模板是一款全屏大气扁平化设计商业摄影CSS企业模板。.rar （70个子文件） 
扁平化设计摄影企业模板是一款全屏大气扁平化设计商业摄影CSS企业模板。 chahua3501 css 
bootstrap.min.css 98KB templatemo_style.css 9KB font-awesome.min.css 17KB templatemo_misc.css 26KB images 
slide1.jpg 536KB portfolio 2.jpg 64KB 1.jpg 60KB 6.jpg 53KB 3.jpg 77KB 5.jpg 42KB 4.jpg 57KB team2.jpg 138KB slide3.jpg 490KB responsive-design.jpg 17KB slide2.jpg 224KB prettyPhoto facebook 
contentPatternLeft.png 137B
loader.gif 2KB default_thumbnail.gif 227B contentPatternTop.png 142B contentPatternBottom.png 142B contentPatternRight.png 136B btnPrevious.png 828B sprite.png 4KB btnNext.png 845B dark_square loader.gif 2KB default_thumbnail.gif 227B contentPattern.png 121B btnPrevious.png 1KB sprite.png 3KB btnNext.png 1KB light_rounded loader.gif 2KB default_thumbnail.gif 227B btnPrevious.png 1KB sprite.png 4KB btnNext.png 1KB light_square loader.gif 2KB default_thumbnail.gif 227B btnPrevious.png 1KB sprite.png 3KB btnNext.png 1KB dark_rounded loader.gif 2KB default_thumbnail.gif 227B contentPattern.png 130B btnPrevious.png 1KB sprite.png 4KB btnNext.png 1KB default sprite_x.png 1KB default_thumb.png 2KB loader.gif 6KB sprite_next.png 1KB sprite_y.png 1KB sprite_prev.png 1KB sprite.png 7KB team1.jpg 71KB team3.jpg 66KB fonts fontawesome-webfont.eot 37KB fontawesome-webfont.woff 43KB FontAwesome.otf 61KB
flexslider-icon.svg 2KB fontawesome-webfont.svg 197KB flexslider-icon.ttf 2KB flexslider-icon.eot 2KB fontawesome-webfont.ttf 79KB flexslider-icon.woff 1KB
index.html 17KB js jquery-1.10.2.min.js 91KB jquery.flexslider.js 53KB jquery.prettyPhoto.js 22KB custom.js 525B jquery.singlePageNav.js 6KB资源评论
