<!--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>Free Blueasy Bootstrap Website Template | Home :: w3layouts</title>
<link href="./css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="./css/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,800' rel='stylesheet' type='text/css'>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="./js/jquery-1.9.1.min.js"></script>
<!--hover-effect-->
<script src="./js/hover_pack.js"></script>
<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="header-top">
<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><a href="#home" class="scroll">Home</a></li>
<li><a href="#services" class="scroll">Services</a></li>
<li><a href="#features" class="scroll">Features</a></li>
<li><a href="#portfolio" class="scroll">Portfolio</a></li>
<li><a href="#contact" class="scroll">Contact</a></li>
<div class="clear"></div>
</ul>
</div>
<div class="clear"></div>
<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},1200);
});
});
</script>
</div>
</div>
<div class="header-bottom" id="home">
<h1>"I'm Looking for the unexpected.</h1>
<h2>I'm Looking for things I've never seen before."</h2>
</div>
</div>
<!--end header-->
<!--start services-->
<div class="services" id="services">
<div class="container">
<div class="row">
<h3 class="m_3">Services</h3>
<div class="m_4"><span class="bottom_line"> </span></div>
<div class="col-md-3 top_grid">
<i class="coffee"> </i>
<h3 class="m_1">Coffee</h3>
<p class="m_2">Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..</p>
</div>
<div class="col-md-3 top_grid">
<i class="instant"> </i>
<h3 class="m_1">Instant</h3>
<p class="m_2">Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..</p>
</div>
<div class="col-md-3 top_grid">
<i class="advisor"> </i>
<h3 class="m_1">Serious</h3>
<p class="m_2">Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..</p>
</div>
<div class="col-md-3 top_grid1">
<i class="frame"> </i>
<h3 class="m_1">Frame</h3>
<p class="m_2">Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..</p>
</div>
</div>
</div>
</div>
<!--end services-->
<!--start portfolio-->
<div class="Portfolio1" id="portfolio">
<div class="container">
<div class="portfolio_top">
<div class="portfolio_left">
<h3 class="m_5">Portfolio</h3>
<div class="m_6"><span class="portfolio_line"> </span></div>
</div>
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
<li><span class="filter" data-filter="app">Panoramas</span></li>
<li><span class="filter" data-filter="card">Portraits</span></li>
<li><span class="filter" data-filter="icon">Macro</span></li>
<li><span class="filter" data-filter="logo">Journal</span></li>
</ul>
<div class="clear"></div>
</div>
<div id="portfoliolist">
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="./images/p1.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="./images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="./images/p2.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="./images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="./images/p3.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="./images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="./images/p4.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="./images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="./images/p5.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="./images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
<d
原始视野动态网页模板_html5 bootstrap 响应式模板UI前端源码.rar
169 浏览量
2023-08-01
14:02:01
上传
评论
收藏 914KB RAR 举报
原始视野动态网页模板_html5 bootstrap 响应式模板UI前端源码.rar （88个子文件） 
html mobile css 
style.css 14KB
index.html 10KB single.html 5KB images 
join_bg.jpg 7KB banner_bg.jpg 11KB
b1.png 3KB img-sprite.psd 241KB b2.png 3KB b3.png 3KB border.png 3KB logo.png 4KB p8.jpg 4KB p4.jpg 3KB p6.jpg 4KB top-move.png 3KB footer_bg.jpg 5KB logo.psd 151KB img-sprite.png 12KB b4.png 3KB p7.jpg 5KB p2.jpg 2KB p3.jpg 2KB p5.jpg 4KB avatar.jpg 6KB b5.png 3KB single.jpg 8KB p1.jpg 3KB smartphone js mobile.js 2KB jquery-1.9.1.min.js 90KB hover_pack.js 12KB easing.js 5KB move-top.js 1KB jquery.mixitup.min.js 14KB css style.css 18KB index.html 14KB single.html 6KB images join_bg.jpg 15KB plus.png 3KB banner_bg.jpg 23KB img-sprite.psd 241KB logo.png 5KB p8.jpg 7KB p4.jpg 5KB p6.jpg 6KB top-move.png 3KB footer_bg.jpg 11KB logo.psd 151KB img-sprite.png 13KB p7.jpg 9KB p2.jpg 4KB p3.jpg 3KB nav_icon.png 3KB p5.jpg 9KB avatar.jpg 18KB single.jpg 22KB p1.jpg 6KB fonts CaviarDreams-webfont.ttf 42KB web js jquery-1.9.1.min.js 90KB hover_pack.js 12KB responsive-nav.js 1KB easing.js 5KB move-top.js 1KB jquery.mixitup.min.js 14KB css style.css 22KB bootstrap.css 118KB index.html 16KB single.html 7KB images join_bg.jpg 15KB plus.png 3KB banner_bg.jpg 71KB img-sprite.psd 250KB logo.png 4KB p8.jpg 21KB p4.jpg 13KB p6.jpg 18KB top-move.png 3KB footer_bg.jpg 11KB logo.psd 151KB img-sprite.png 13KB p7.jpg 27KB p2.jpg 10KB p3.jpg 9KB nav_icon.png 3KB p5.jpg 29KB avatar.jpg 18KB single.jpg 105KB p1.jpg 16KB fonts CaviarDreams-webfont.ttf 42KB资源评论
