<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Celestial Bootstarp Website Template | Home :: w3layouts</title>
<link href="./css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link href="./css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='http://fonts.googleapis.com/css?family=Economica:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="./js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function () {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function () {
$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
},
function () {
$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
</head>
<body>
<!----start-header---->
<div class="header">
<div class="container">
<div class="logo">
<a href="index.html"><img src="./images/logo.png" alt=""></a>
</div>
<div class="menu">
<a class="toggleMenu" href="#"><img src="./images/nav_icon.png" alt="" /> </a>
<ul class="nav" id="nav">
<li class="current"><a href="#home" class="scroll">Home</a></li>
<li><a href="#about" class="scroll">About</a></li>
<li><a href="#services" class="scroll">Services</a></li>
<li><a href="#work" class="scroll">Work</a></li>
<li><a href="#contact" class="scroll">Contact</a></li>
</ul>
<script type="text/javascript" src="./js/responsive-nav.js"></script>
<script type="text/javascript" src="./js/move-top.js"></script>
<script type="text/javascript" src="./js/easing.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>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!----//End-header---->
<!----- start-banner---->
<div class="banner text-center" id="home">
<div class="container">
<div class="banner-info">
<a class="banner-btn" href="#"><span> </span></a>
<h1>Morbi Ringilla Risus</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <br>euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<a href="#" class="banner_btn">Lorem Ipsum</a>
</div>
</div>
</div>
<!----- //End-banner---->
<div class="main">
<div class="content_top" id="about">
<div class='container'>
<h2 class="head">About Us</h2>
<p class="m_1">soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius</p>
<div class="row top_box">
<div class="col-md-6 contentleft_grid">
<h3 class="m_2"><i class="pen"></i>parum anteposuerit</h3>
<p class="m_3">Aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero</p>
<a href="#" class="content_btn">More Info</a>
</div>
<div class="col-md-6">
<h3 class="m_2"><i class="tick"></i>augue duis dolore feugait</h3>
<p class="m_3">Aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero</p>
<a href="#" class="content_btn">More Info</a>
</div>
</div>
</div>
</div>
<div class="content_middle" id="services">
<div class='container'>
<h2 class="head">Services</h2>
<p class="service_desc">soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</p>
<div class="row service_top">
<div class="col-md-4 service_grid">
<i class="icon1"></i>
<h3><a href="#">suscipit lobortis</a></h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros</p>
</div>
<div class="col-md-4 service_grid">
<i class="icon2"></i>
<h3><a href="#">feugait nulla</a></h3>
<p>Nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div class="col-md-4 service_grid">
<i class="icon3"></i>
<h3><a href="#">littera gothica</a></h3>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem</p>
</div>
</div>
<div class="row">
<div class="col-md-4 service_grid">
<i class="icon4"></i>
<h3><a href="#">Eodem modo</a></h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros</p>
</div>
<div class="col-md-4 service_grid">
<i class="icon5"></i>
<h3><a href="#">videntur parum</a></h3>
<p>Nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div class="col-md-4 service_grid">
<i class="icon6"></i>
<h3><a href="#"> fiant sollemnes</a></h3>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem</p>
</div>
</div>
</div>
</div>
<div class="content_bottom" id="work">
<div class="con
【web课设】个性产品服务信息网页-HTML源码.7z （86个子文件） 
【web课设】个性产品服务信息网页-HTML源码 html mobile css 
style.css 10KB
index.html 10KB single.html 6KB images 
banner_icon.png 4KB list_arrow.png 3KB
c1.jpg 2KB Thumbs.db 275KB 3.png 4KB c2.jpg 2KB arrow.png 3KB top_move.png 4KB banner.jpg 5KB logo.png 5KB p4.jpg 4KB p6.jpg 4KB 1.png 4KB 6.png 4KB img-sprite.png 13KB tick.png 3KB likes.png 3KB 5.png 4KB 4.png 4KB p2.jpg 4KB pen.png 3KB p3.jpg 5KB p5.jpg 4KB 2.png 4KB single.jpg 4KB p1.jpg 4KB smartphone js mobile.js 2KB easing.js 5KB move-top.js 1KB jquery.mixitup.min.js 14KB jquery.min.js 92KB css style.css 15KB index.html 14KB single.html 7KB images banner_icon.png 5KB list_arrow.png 3KB c1.jpg 2KB Thumbs.db 275KB c2.jpg 2KB arrow.png 3KB top_move.png 4KB banner.jpg 8KB logo.png 5KB p4.jpg 10KB p6.jpg 9KB img-sprite.png 13KB likes.png 3KB p2.jpg 9KB p3.jpg 12KB nav_icon.png 790B p5.jpg 10KB single.jpg 8KB p1.jpg 11KB web js responsive-nav.js 1KB easing.js 5KB move-top.js 1KB jquery.mixitup.min.js 14KB jquery.min.js 92KB css style.css 18KB bootstrap.css 118KB index.html 15KB single.html 8KB images img-sprite.psd 228KB banner_icon.png 7KB list_arrow.png 3KB c1.jpg 2KB Thumbs.db 275KB c2.jpg 2KB arrow.png 3KB top_move.png 4KB banner.jpg 80KB logo.png 4KB p4.jpg 14KB p6.jpg 13KB logo.psd 158KB img-sprite.png 13KB likes.png 3KB p2.jpg 12KB p3.jpg 16KB nav_icon.png 790B p5.jpg 13KB single.jpg 37KB p1.jpg 15KB资源评论
