1 Star 0 Fork 0

wangnbx/Figurebed

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 19.59 KB
一键复制 编辑 原始数据 按行查看 历史
naibin 提交于 2020-05-14 13:48 . create Figurebed
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sedulous</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link href='http://fonts.useso.com/css?family=Raleway:400,700,200,100,300,500,600,800,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Source+Sans+Pro:200,300,400,600,700,700italic,900,400italic,300italic' rel='stylesheet' type='text/css'>
<script src="http://ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sticky.js"></script>
<script>
$(window).load(function(){
$("#menu").sticky({ topSpacing: 0 });
});
</script>
</head>
<body>
<div class="container-fluid banner text-center" id="banner">
<div class="row">
<div class="col-md-12 line">
<div class="tablebox">
<div class="banner-text" id="bannertext">
<h1 class="hostyle" id="heads">Sedulous</h1>
<p class="pstyle">We are Creative</p>
<a href="#features" class="page-scroll arrow"><i class="fa fa-angle-down"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="navbar menubar" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle menu-button" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<a class="navbar-brand logo" href="#">Sedulous</a>
</div>
<div>
<nav class="collapse navbar-collapse" id="myNavbar" role="navigation">
<ul class="nav navbar-nav navbar-right navstyle">
<li><a href="#banner" class="page-scroll active">Home</a></li>
<li><a href="#features" class="page-scroll">Features</a></li>
<li><a href="#gallery" class="page-scroll">Gallery</a></li>
<li><a href="#about" class="page-scroll">About</a></li>
<li><a href="#testimonials" class="page-scroll">Testimonials</a></li>
<li><a href="#contact" class="page-scroll">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="features" id="features">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="alldesc">
<div class="col-md-6 col-sm-6 col-xs-12 centertext">
<p class="all-td">What's Coming New</p>
<h2>Features</h2>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a suscipit nisl. Etiam a facilisis ante. Sed turpis felis, sagittis at risus ut, luctus feugiat ipsum. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 featurebox">
<div class="feature-icons"> <img src="images/idea.png"/></div>
<div class="fh-desc">
<h3>Creative Ideas</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a suscipit nisl. Etiam a facilisis ante. Sed turpis felis, sagittis at risus ut, luctus feugiat ipsum.</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 featurebox">
<div class="feature-icons"> <img src="images/time.png"/> </div>
<div class="fh-desc">
<h3>Save Time</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a suscipit nisl. Etiam a facilisis ante. Sed turpis felis, sagittis at risus ut, luctus feugiat ipsum.</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 featurebox">
<div class="feature-icons"> <img src="images/money.png"/> </div>
<div class="fh-desc">
<h3>Save Money</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a suscipit nisl. Etiam a facilisis ante. Sed turpis felis, sagittis at risus ut, luctus feugiat ipsum.</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 featurebox">
<div class="feature-icons"> <img src="images/support.png"/> </div>
<div class="fh-desc">
<h3>Great Support</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a suscipit nisl. Etiam a facilisis ante. Sed turpis felis, sagittis at risus ut, luctus feugiat ipsum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="gallery" id="gallery">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="alldesc">
<div class="col-md-6 col-sm-6 col-xs-12 centertext">
<p class="all-td">Our preciously done works</p>
<h2>Gallery</h2>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a suscipit nisl. Etiam a facilisis ante. Sed turpis felis, sagittis at risus ut, luctus feugiat ipsum. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="sorting pull-left">
<div class="filter pull-left filimg" data-filter="all">Show All</div>
<div class="filter pull-left filimg" data-filter=".category-1">Beautiful</div>
<div class="filter pull-left filimg" data-filter=".category-2">Amazing</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="galleryimg" id="galleryimg">
<div class="grid mix category-2 col-md-4 col-sm-6 col-xs-6" data-myorder="1">
<figure class="effect-Beauty">
<img src="images/unsplash004.jpg" alt="img13"/>
<figcaption>
<h2>Glowing <span>Sun<span></h2>
<p>Beauty did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
<div class="grid mix category-1 col-md-4 col-sm-6 col-xs-6" data-myorder="2">
<figure class="effect-Beauty">
<img src="images/unsplash009.jpg" alt="img13"/>
<figcaption>
<h2>High <span>Sky</span></h2>
<p>Beauty did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
<div class="grid mix category-1 col-md-4 col-sm-6 col-xs-6" data-myorder="3">
<figure class="effect-Beauty">
<img src="images/unsplash0010.jpg" alt="img13"/>
<figcaption>
<h2>Darkest <span>Rain</span></h2>
<p>Beauty did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
<div class="grid mix category-2 col-md-4 col-sm-6 col-xs-6" data-myorder="4">
<figure class="effect-Beauty">
<img src="images/unsplash002.jpg" alt="img13"/>
<figcaption>
<h2>Beautiful <span>Heart</span></h2>
<p>Beauty did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
<div class="grid mix category-2 col-md-4 col-sm-6 col-xs-6" data-myorder="5">
<figure class="effect-Beauty">
<img src="images/unsplash006.jpg" alt="img13"/>
<figcaption>
<h2>Cute <span>Imagine</span></h2>
<p>Beauty did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
<div class="grid mix category-1 col-md-4 col-sm-6 col-xs-6" data-myorder="6">
<figure class="effect-Beauty">
<img src="images/unsplash004.jpg" alt="img13"/>
<figcaption>
<h2>Glowing <span>Sun</span></h2>
<p>Beauty did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
<div class="grid mix category-2 col-md-4 col-sm-6 col-xs-6" data-myorder="7">
<figure class="effect-Beauty">
<img src="images/unsplash0010.jpg" alt="img13"/>
<figcaption>
<h2>Darkest <span>Rain</span></h2>
<p>Beauty did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
<div class="grid mix category-1 col-md-4 col-sm-6 col-xs-6" data-myorder="8">
<figure class="effect-Beauty">
<img src="images/unsplash002.jpg" alt="img13"/>
<figcaption>
<h2>Beautiful <span>Heart</span></h2>
<p>Beauty did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
<div class="grid mix category-1 col-md-4 col-sm-6 col-xs-6" data-myorder="9">
<figure class="effect-Beauty">
<img src="images/unsplash004.jpg" alt="img13"/>
<figcaption>
<h2>Glowing <span>Sun</span></h2>
<p>Beauty did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="notes">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-10 col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a suscipit nisl. Etiam a facilisis ante. Sed turpis felis, sagittis at risus ut, luctus feugiat ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a suscipit nisl. Etiam a facilisis ante.</p>
</div>
<div class="col-md-3 col-sm-2 col-xs-12 text-center">
<button>Click Me</button>
</div>
</div>
</div>
</div>
<div class="about" id="about">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="alldesc">
<div class="col-md-6 col-sm-6 col-xs-12 centertext">
<p class="all-td">What You Want To Know</p>
<h2>About Us</h2>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a suscipit nisl. Etiam a facilisis ante. Sed turpis felis, sagittis at risus ut, luctus feugiat ipsum. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="progresscount">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-6 col-sm-6 col-xs-6 block">
<div class="counter-item">
<h5>Our Clients</h5>
<div class="timer" data-from="0" data-to="55" data-speed="5000" data-refresh-interval="50"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="counter-item">
<h5>Projects completed</h5>
<div class="timer" data-from="0" data-to="88" data-speed="5000" data-refresh-interval="50"></div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="progresstitle">
<h5>HTML5</h5>
<div class="progress progress-style">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> 80% </div>
</div>
</div>
<div class="progresstitle">
<h5>CSS3</h5>
<div class="progress progress-style">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width:74%"> 74% </div>
</div>
</div>
<div class="progresstitle">
<h5>JQuery</h5>
<div class="progress progress-style">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width:65%"> 65% </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="testimonials" id="testimonials">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="alldesc">
<div class="col-md-6 col-sm-6 col-xs-12 centertext">
<p class="all-td">What Client Say About Us</p>
<h2>Testimonials</h2>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="quotes">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum augue sodales tellus molestie eleifend. Morbi felis sem, fermentum quis tincidunt eu, sollicitudin ut metus</p>
<p class="name">Yogesh Singh (Gujarat, India)</p>
</blockquote>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum augue sodales tellus molestie eleifend.</p>
<p class="name">Michal Jordan (New York, USA)</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<div class="subscribe-social">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12 col-xs-12">
<div class="subscibe">
<form role="form">
<div class="col-md-8 col-sm-10 col-xs-12">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Enter Your Email address">
</div>
</div>
<div class="col-md-4 col-sm-2 col-xs-12 centertext">
<button type="submit" class="btn btn-or">Subscibe</button>
</div>
</form>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 text-center">
<ul class="social">
<li><a href="#"><i class="fa fa-twitter-square"></i></a></li>
<li><a href="#"><i class="fa fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus-square"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
</div>
</div>
</div>
</div>
</div>
<div class="address" id="contact">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="alldesc">
<div class="col-md-6 col-sm-6 col-xs-12 centertext">
<p class="all-td">How To Get In Touch</p>
<h2>Contact</h2>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 info centertext">
<p>10/B/195 Barcolomy Real Estate</p>
<p>Keep Walking, America</p>
<p>Tel No : +12345678</p>
<p>Email : Yogeshpix@gmail.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="foot">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="foot-logo">Scedulous</h4>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 text-center">
<p class="foot-text">Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
</div>
</div>
</div>
</footer>
<script src="js/bootstrap.min.js"></script>
<script src="js/typed.js" type="text/javascript"></script>
<script src="js/jquery.mixitup.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.countTo.js"></script>
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.quovolver.js"></script>
<script>
$(function(){
var windowH = $(window).height();
var bannerH = $('#banner').height();
if(windowH > bannerH) {
$('#banner').css({'height':($(window).height() - 68)+'px'});
$('#bannertext').css({'height':($(window).height() - 68)+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var bannerH = $('#banner').height();
var differenceH = windowH - bannerH;
var newH = bannerH + differenceH;
var truecontentH = $('#bannertext').height();
if(windowH < truecontentH) {
$('#banner').css({'height': (newH - 68)+'px'});
$('#bannertext').css({'height': (newH - 68)+'px'});
}
if(windowH > truecontentH) {
$('#banner').css({'height': (newH - 68)+'px'});
$('#bannertext').css({'height': (newH - 68)+'px'});
}
})
});
$(function(){
$('#galleryimg').mixItUp();
});
/*$('.timer').each(count);*/
jQuery(function ($) {
// custom formatting example
$('.timer').data('countToOptions', {
formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('#gallery').waypoint(function() {
$('.timer').each(count);
});
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
$('.quotes').quovolver({
equalHeight : true
});
</script>
<script>
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('.nav li a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.nav li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/wangnbx/Figurebed.git
git@gitee.com:wangnbx/Figurebed.git
wangnbx
Figurebed
Figurebed
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385