<!doctype html>
<html>
<head>
<title>Sample page</title>
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--web-font-->
<link href='http://fonts.useso.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<!--//web-font-->
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Wedo Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="http://ajax.useso.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- //Custom Theme files -->
<!-- js -->
<script src="js/jquery.min.js"></script>
<!-- //js -->
<!-- start-smoth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/modernizr.custom.53451.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!--//end-smoth-scrolling-->
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true // 100% fit in a container
});
});
</script>
</head>
<body>
<!--header-->
<div class="header">
<div class="social-icons">
<ul>
<li><a href="#"> </a></li>
<li><a href="#" class="fb"> </a></li>
<li><a href="#" class="in"> </a></li>
<li><a href="#" class="dott"> </a></li>
</ul>
</div>
<div class="container">
<div class="col-md-9 top-nav">
<span class="menu"><img src="images/menu-icon.png" alt=""/></span>
<ul class="nav1">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="samplepage.html" class="active">SAMPLE PAGE</a></li>
<li><a href="contact.html" >CONTACT</a></li>
</ul>
<!-- script-for-menu -->
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- /script-for-menu -->
</div>
<div class="col-md-3 header-logo">
<a href="index.html"><img src="images/logo.png" alt="logo"/></a>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!--header-->
<!--single-page-->
<div class="sample-page">
<div class="container">
<div class="services">
<h3>SAMPLE PAGE</h3>
</div>
<div class="col-md-8 sample-page-left" >
<h4>FRINGILLA CONDIMENTUM</h4>
<div class="sample-page-info">
<a href="samplepage.html"> <img src="images/img17.jpg" class="img-responsive zoom-img" alt=""/></a>
<h5>CONDIMENTUM FRINGILLA, FRINGILLA CONDIMENTUM,FINIBUS BONORUM MALORUM, DONEC UT QUAM LIGULA, SED NISI LOBORTIS.</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,
consectetur adipisicing elit.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
<h5>TINCIDUNT NEC, PRETIUM MALESUADA, AUCTOR LIBERO RUTRUM,</h5>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
<div class="comment-icons">
<ul>
<li><span></span><a href="#">Lorem ipsum dolor sit consectetur</a> </li>
<li><span class="clndr"></span>MARCH 5, 2015</li>
<li><span class="admin"></span> <a href="#">Admin</a></li>
<li><span class="cmnts"></span> <a href="#">5 comments</a></li>
<li><span class="like"></span> 15 </li>
</ul>
</div>
<div class="admin-text">
<h5>Written By Admin</h5>
<div class="admin-text-left">
<a href="#"><img src="images/icon3.png" alt=""/></a>
</div>
<div class="admin-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span>View all posts by:<a href="#"> Admin </a></span>
</div>
<div class="clearfix"> </div>
</div>
<div class="response">
<h4>RESPONSES</h4>
<div class="response-info">
<div class="response-text-left">
<a href="#"><img src="images/icon3.png" alt=""/></a>
<h5><a href="#">Admin</a></h5>
</div>
<div class="response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>MARCH 1, 2015</li>
<li><a href="#">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="response-info">
<div class="response-text-left">
<a href="#"><img src="images/icon3.png" alt=""/></a>
<h5><a href="#">Admin</a></h5>
</div>
<div class="response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>MARCH 1, 2015</li>
<li><a href="#">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="coment-form">
<h4>LEAVE YOUR COMMENT</h4>
<form>
<input type="text" value="Name :" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name :';}" required="">
<input type="email" value="Email (will not be published)* :" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email (will not be published)* :';}" required="">
<input type="text" value="Website :" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Website :';}" required="">
<textarea type="text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Comment...';}" required>Your Comm
220国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip （51个子文件） 
220 
portfolio.html 10KB js 
jquery.swipebox.min.js 7KB responsiveslides.min.js 3KB easyResponsiveTabs.js 6KB main.js 7KB modernizr.custom.53451.js 9KB easing.js 5KB classie.js 2KB move-top.js 1KB modernizr.custom.js 7KB jquery.mixitup.min.js 14KB jquery.min.js 92KB css style.css 36KB component.css 2KB bootstrap.css 118KB swipebox.css 5KB index.html 9KB contact.html 6KB about.html 10KB images 
img18.jpg 88KB img6.jpg 14KB img20.jpg 36KB img22.jpg 64KB
logo.png 5KB img2.jpg 36KB img21.jpg 124KB img5.jpg 15KB social-icons.png 5KB img13.jpg 66KB img10.jpg 64KB move-up.png 3KB img11.jpg 40KB img4.jpg 15KB img23.jpg 113KB img15.jpg 74KB icons-sprite.png 4KB img1.jpg 92KB
icons.svg 1KB img16.jpg 68KB menu-icon.png 3KB img7.jpg 40KB img3.jpg 52KB img8.jpg 54KB icon3.png 789B img17.jpg 52KB img14.jpg 74KB services.png 5KB img19.jpg 72KB img12.jpg 73KB img9.jpg 37KB samplepage.html 12KB资源评论
