Add files via upload
v0.0.1修复css文件错误
6
css/bootstrap.min.css
vendored
Normal file
4
css/font-awesome.min.css
vendored
Normal file
1264
css/style.css
Normal file
BIN
favicon.ico
Normal file
After Width: | Height: | Size: 3.5 KiB |
BIN
fonts/fontawesome-webfont.ttf
Normal file
BIN
fonts/glyphicons-halflings-regular.ttf
Normal file
BIN
images/about-img.png
Normal file
After Width: | Height: | Size: 1.5 MiB |
BIN
images/banner1.jpg
Normal file
After Width: | Height: | Size: 591 KiB |
BIN
images/banner2.png
Normal file
After Width: | Height: | Size: 2.5 MiB |
BIN
images/banner3.png
Normal file
After Width: | Height: | Size: 1.9 MiB |
7
images/cd-top-arrow.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||||
|
<polygon fill="#FFFFFF" points="8,2.8 16,10.7 13.6,13.1 8.1,7.6 2.5,13.2 0,10.7 "/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 562 B |
BIN
images/contact.jpg
Normal file
After Width: | Height: | Size: 144 KiB |
BIN
images/event.jpg
Normal file
After Width: | Height: | Size: 87 KiB |
BIN
images/gallery-img1-1.png
Normal file
After Width: | Height: | Size: 354 KiB |
BIN
images/gallery-img1.png
Normal file
After Width: | Height: | Size: 81 KiB |
BIN
images/gallery-img2-2.png
Normal file
After Width: | Height: | Size: 344 KiB |
BIN
images/gallery-img2.png
Normal file
After Width: | Height: | Size: 129 KiB |
BIN
images/gallery-img3-3.png
Normal file
After Width: | Height: | Size: 224 KiB |
BIN
images/gallery-img3.png
Normal file
After Width: | Height: | Size: 92 KiB |
BIN
images/gallery-img4-4.png
Normal file
After Width: | Height: | Size: 318 KiB |
BIN
images/gallery-img4.png
Normal file
After Width: | Height: | Size: 129 KiB |
BIN
images/qq1.png
Normal file
After Width: | Height: | Size: 347 KiB |
BIN
images/qq2.png
Normal file
After Width: | Height: | Size: 269 KiB |
BIN
images/qq3.png
Normal file
After Width: | Height: | Size: 339 KiB |
BIN
images/qq4.png
Normal file
After Width: | Height: | Size: 339 KiB |
BIN
images/service.png
Normal file
After Width: | Height: | Size: 177 KiB |
BIN
images/test1.jpg
Normal file
After Width: | Height: | Size: 91 KiB |
358
index.html
Normal file
@ -0,0 +1,358 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>绿叶服务器 - 绿叶服务器官方网站</title>
|
||||||
|
<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="" />
|
||||||
|
<link rel="shortcut icon" href="favicon.ico" />
|
||||||
|
<!-- css files -->
|
||||||
|
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
|
||||||
|
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
|
||||||
|
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
|
||||||
|
<!-- /css files -->
|
||||||
|
<!-- font files -->
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
|
||||||
|
<!-- /font files -->
|
||||||
|
<!-- js files -->
|
||||||
|
<script src="js/modernizr.custom.js"></script>
|
||||||
|
<!-- /js files -->
|
||||||
|
</head>
|
||||||
|
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
|
||||||
|
<div class="navbar-wrapper">
|
||||||
|
<div class="container">
|
||||||
|
<nav class="navbar navbar-inverse navbar-static-top cl-effect-20">
|
||||||
|
<div class="container">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="index.html">Green</a>
|
||||||
|
</div>
|
||||||
|
<div id="navbar" class="navbar-collapse collapse navbar-right">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li><a href="#"><span data-hover="Home">Home</span></a></li>
|
||||||
|
<li><a href="#about"><span data-hover="About">About</span></a></li>
|
||||||
|
<li><a href="#service"><span data-hover="Services">Services</span></a></li>
|
||||||
|
<li><a href="#events"><span data-hover="Events">Events</span></a></li>
|
||||||
|
<li><a href="#gallery"><span data-hover="Gallery">Gallery</span></a></li>
|
||||||
|
<li><a href="#testimonials"><span data-hover="Testimonials">Testimonials</span></a></li>
|
||||||
|
<li><a href="#contact"><span data-hover="Contact">Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Banner Section -->
|
||||||
|
<!-- Carousel
|
||||||
|
================================================== -->
|
||||||
|
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
||||||
|
<!-- Indicators -->
|
||||||
|
<ol class="carousel-indicators">
|
||||||
|
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||||
|
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||||
|
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||||
|
</ol>
|
||||||
|
<div class="carousel-inner" role="listbox">
|
||||||
|
<div class="item active">
|
||||||
|
<img class="first-slide" src="images/banner1.jpg" alt="First slide">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img class="second-slide" src="images/banner2.png" alt="Second slide">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img class="third-slide" src="images/banner3.png" alt="Third slide">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
||||||
|
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
|
||||||
|
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Next</span>
|
||||||
|
</a>
|
||||||
|
</div><!-- /.carousel -->
|
||||||
|
<!-- /Banner Section -->
|
||||||
|
<!-- About Section -->
|
||||||
|
<section class="about-us" id="about">
|
||||||
|
<h3 class="text-center slideanim">About Us</h3>
|
||||||
|
<p class="text-center slideanim">我们只是热爱M C的一群人</p>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-md-6 col-sm-6">
|
||||||
|
<img src="images/about-img.png" alt="about" class="img-responsive slideanim">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-md-6 col-sm-6">
|
||||||
|
<div class="about-info">
|
||||||
|
<h4 class="slideanim">我们不是最棒的</h4>
|
||||||
|
<p class="abt slideanim">世界上有很多我们不知道的人,正所谓"人外有人天外有天" 但是我们一定会竭尽全力去做.正因为我们的付出,才有了现在的繁荣</p>
|
||||||
|
<p class="abt slideanim">我们热爱M C.正因为热爱,所以可爱</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- /About Section -->
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section class="our-services slideanim" id="service">
|
||||||
|
<h3 class="text-center slideanim">Our Services</h3>
|
||||||
|
<p class="text-center slideanim">好的体验,需要好的主机.</p>
|
||||||
|
<div id="features">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 centered">
|
||||||
|
<!-- ACCORDION -->
|
||||||
|
<div class="accordion ac" id="accordion2">
|
||||||
|
<div class="accordion-group">
|
||||||
|
<div class="accordion-heading">
|
||||||
|
<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">多线网络</a>
|
||||||
|
</div><!-- /accordion-heading -->
|
||||||
|
<div id="collapseOne" class="accordion-body collapse in">
|
||||||
|
<div class="accordion-inner slideanim">
|
||||||
|
<p>客户端内置4条线路,DNSPOD提供解析服务.</p>
|
||||||
|
</div><!-- /accordion-inner -->
|
||||||
|
</div><!-- /collapse -->
|
||||||
|
</div><!-- /accordion-group -->
|
||||||
|
<div class="accordion-group">
|
||||||
|
<div class="accordion-heading">
|
||||||
|
<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">开服时间</a>
|
||||||
|
</div>
|
||||||
|
<div id="collapseTwo" class="accordion-body collapse">
|
||||||
|
<div class="accordion-inner slideanim">
|
||||||
|
<p>服务器 7x24 小时支持链接,何时何地都可以开心游戏.</p>
|
||||||
|
</div><!-- /accordion-inner -->
|
||||||
|
</div><!-- /collapse -->
|
||||||
|
</div><!-- /accordion-group -->
|
||||||
|
<div class="accordion-group">
|
||||||
|
<div class="accordion-heading">
|
||||||
|
<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">安全高效</a>
|
||||||
|
</div>
|
||||||
|
<div id="collapseThree" class="accordion-body collapse">
|
||||||
|
<div class="accordion-inner slideanim">
|
||||||
|
<p>服务器内置备份,凌晨3点备份一次,确保服务器安全运行。抵御DDoS、CC攻击</p>
|
||||||
|
</div><!-- /accordion-inner -->
|
||||||
|
</div><!-- /collapse -->
|
||||||
|
</div><!-- /accordion-group -->
|
||||||
|
<div class="accordion-group">
|
||||||
|
<div class="accordion-heading">
|
||||||
|
<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">运行流畅</a>
|
||||||
|
</div>
|
||||||
|
<div id="collapseFour" class="accordion-body collapse">
|
||||||
|
<div class="accordion-inner slideanim">
|
||||||
|
<p>客户端内置优化模组,服务端内置优化插件,我们全力保障每位玩家的流畅高效运行.</p>
|
||||||
|
</div><!-- /accordion-inner -->
|
||||||
|
</div><!-- /collapse -->
|
||||||
|
</div><!-- /accordion-group -->
|
||||||
|
</div><!-- Accordion -->
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><!--/ .container -->
|
||||||
|
</div><!--/ #features -->
|
||||||
|
</section>
|
||||||
|
<!-- /Services Section -->
|
||||||
|
<!-- Events -->
|
||||||
|
<section class="our-events slideanim" id="events">
|
||||||
|
<h3 class="text-center slideanim">Our Events</h3>
|
||||||
|
<p class="text-center slideanim">服务器经历了漫长的旅程.</p>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-md-4">
|
||||||
|
<div class="event-info">
|
||||||
|
<h4 class="text-center slideanim">2018.7.19</h4>
|
||||||
|
<p class="eve slideanim">服务器管理组成员决定.开启内测服务器,更换模组和优化,确保公测玩家的游戏体验</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-4">
|
||||||
|
<div class="event-info">
|
||||||
|
<h4 class="text-center slideanim">2018.7.22</h4>
|
||||||
|
<p class="eve slideanim">服务器删档,内测进入下一阶段,模组更换完毕.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-4">
|
||||||
|
<div class="event-info">
|
||||||
|
<h4 class="text-center slideanim">2018.7.28</h4>
|
||||||
|
<p class="eve slideanim">分服务器准备,星系战争服确认注册 招收管理组成员.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- /Events -->
|
||||||
|
<!-- Gallery Section -->
|
||||||
|
<section class="our-gallery" id="gallery">
|
||||||
|
<h3 class="text-center slideanim">Our Gallery</h3>
|
||||||
|
<p class="text-center slideanim">服务器游戏图片.</p>
|
||||||
|
<div class="container">
|
||||||
|
<img src="images/gallery-img1.png" data-darkbox="images/gallery-img1-1.png" data-darkbox-description="<b>Xtao_dada</b><br>Xtao_dada dolor sit amet" class="img-responsive slideanim">
|
||||||
|
<img src="images/gallery-img2.png" data-darkbox="images/gallery-img2-2.png" data-darkbox-description="<b>Xtao_dada</b><br>Xtao_dada dolor sit amet" class="img-responsive slideanim">
|
||||||
|
<img src="images/gallery-img3.png" data-darkbox="images/gallery-img3-3.png" data-darkbox-description="<b>Xtao_dada</b><br>Xtao_dada dolor sit amet" class="img-responsive slideanim">
|
||||||
|
<img src="images/gallery-img4.png" data-darkbox="images/gallery-img4-4.png" data-darkbox-description="<b>Xtao_dada</b><br>Xtao_dada dolor sit amet" class="img-responsive slideanim">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- /Gallery Section -->
|
||||||
|
<!-- Testimonials -->
|
||||||
|
<section class="our-testimonials slideanim" id="testimonials">
|
||||||
|
<h3 class="text-center slideanim">What Our Clients Say</h3>
|
||||||
|
<p class="text-center slideanim">服务器管理组人员.</p>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-md-4">
|
||||||
|
<div class="test">
|
||||||
|
<img src="images/qq1.png" class="img-responsive slideanim" alt="">
|
||||||
|
<h4 class="text-center slideanim">陨</h4>
|
||||||
|
<p class="t1 slideanim">服主,管理服务器收费,VIP,赞助等问题.</br>Service owners, management server charges, VIP, sponsorship and other issues.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-4">
|
||||||
|
<div class="test">
|
||||||
|
<img src="images/qq2.png" class="img-responsive slideanim" alt="">
|
||||||
|
<h4 class="text-center slideanim">_Orange_kun_</h4>
|
||||||
|
<p class="t1 slideanim">_Orange_kun_</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-4">
|
||||||
|
<div class="test">
|
||||||
|
<img src="images/qq3.png" class="img-responsive slideanim" alt="">
|
||||||
|
<h4 class="text-center slideanim">Xtao_dada</h4>
|
||||||
|
<p class="t1 slideanim">Xtao_dada 是一只萌萌哒的技术,管理模组服务器插件、汉化、崩溃等问题.</br>Xtao_dada is a cute technology, managing module server plug-ins, localization, crashes and other issues. </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-4">
|
||||||
|
<div class="test">
|
||||||
|
<img src="images/qq4.png" class="img-responsive slideanim" alt="">
|
||||||
|
<h4 class="text-center slideanim">聆听^回惘</h4>
|
||||||
|
<p class="t1 slideanim">聆听^回惘 是一个宣传大大.(灰常棒哦)</br>Listening ^^回惘 is a big publicity. (Gray is always good)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Testimonials -->
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section class="our-contacts slideanim" id="contact">
|
||||||
|
<h3 class="text-center slideanim">Contact Us</h3>
|
||||||
|
<p class="text-center slideanim">Xtao_dada is simply dummy text of the printing and typesetting industry.</p>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<form role="form">
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-lg-4 slideanim">
|
||||||
|
<input type="text" class="form-control user-name" placeholder="Your Name" required/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-lg-4 slideanim">
|
||||||
|
<input type="email" class="form-control mail" placeholder="Your Email" required/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-lg-4 slideanim">
|
||||||
|
<input type="tel" class="form-control pno" placeholder="Your Phone Number" required/>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
<div class="form-group col-lg-12 slideanim">
|
||||||
|
<textarea class="form-control" rows="6" placeholder="Your Message" required/></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-lg-12 slideanim">
|
||||||
|
<button type="submit" href="#" class="btn-outline1">Submit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- /Contact Section -->
|
||||||
|
<!-- Footer Section -->
|
||||||
|
<section class="footer">
|
||||||
|
<h2 class="text-center">THANKS FOR VISITING US</h2>
|
||||||
|
<hr>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4 footer-left">
|
||||||
|
<h4>Contact Information</h4>
|
||||||
|
<div class="contact-info">
|
||||||
|
<div class="email-info">
|
||||||
|
<i class="glyphicon glyphicon-envelope"></i>
|
||||||
|
<p class="p3"><a href="mailto:play@xtaolink.cn">play@xtaolink.cn</a></p>
|
||||||
|
<p class="p4"><a href="mailto:play@greenleafs.cn">play@greenleafs.cn</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><!-- col -->
|
||||||
|
<div class="col-md-4 footer-right">
|
||||||
|
<h4>Support Us</h4>
|
||||||
|
<p>Xtao_dada is simply dummy text of the printing and typesetting industry. Xtao_dada has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
|
||||||
|
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=52 src="//music.163.com/outchain/player?type=2&id=4010220&auto=1&height=32"></iframe>
|
||||||
|
<ul class="social-icons2">
|
||||||
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
||||||
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
||||||
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
||||||
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- col -->
|
||||||
|
</div><!-- row -->
|
||||||
|
</div><!-- container -->
|
||||||
|
<hr>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Copyright © 2018.GreenLeafs</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- /Footer Section -->
|
||||||
|
<!-- Back To Top -->
|
||||||
|
<a href="#0" class="cd-top">Top</a>
|
||||||
|
<!-- /Back To Top -->
|
||||||
|
|
||||||
|
<!-- js files -->
|
||||||
|
<script src="js/jquery.min.js"></script>
|
||||||
|
<script src="js/bootstrap.min.js"></script>
|
||||||
|
<script src="js/SmoothScroll.min.js"></script>
|
||||||
|
<!-- js for gallery -->
|
||||||
|
<script src="js/darkbox.js"></script>
|
||||||
|
<!-- /js for gallery -->
|
||||||
|
<!-- js for back to top -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
<!-- /js for back to top -->
|
||||||
|
<!-- js for nav-smooth scroll -->
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
// Add smooth scrolling to all links in navbar + footer link
|
||||||
|
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
|
||||||
|
|
||||||
|
// Store hash
|
||||||
|
var hash = this.hash;
|
||||||
|
|
||||||
|
// Using jQuery's animate() method to add smooth page scroll
|
||||||
|
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
|
||||||
|
$('html, body').animate({
|
||||||
|
scrollTop: $(hash).offset().top
|
||||||
|
}, 900, function(){
|
||||||
|
|
||||||
|
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||||
|
window.location.hash = hash;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<!-- /js for nav-smooth scroll -->
|
||||||
|
<!-- js for slide animations -->
|
||||||
|
<script>
|
||||||
|
$(window).scroll(function() {
|
||||||
|
$(".slideanim").each(function(){
|
||||||
|
var pos = $(this).offset().top;
|
||||||
|
|
||||||
|
var winTop = $(window).scrollTop();
|
||||||
|
if (pos < winTop + 600) {
|
||||||
|
$(this).addClass("slide");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- /js for slide animations -->
|
||||||
|
<!-- /js files -->
|
||||||
|
</body>
|
||||||
|
</html>
|
1
js/SmoothScroll.min.js
vendored
Normal file
7
js/bootstrap.min.js
vendored
Normal file
74
js/darkbox.js
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
// /////
|
||||||
|
// Darkbox by Roko.CB
|
||||||
|
(function () {
|
||||||
|
|
||||||
|
var c = 0; // counter
|
||||||
|
var $images = {};
|
||||||
|
var n = 0;
|
||||||
|
var $prevNext = $("<div id='darkbox_prev'/><div id='darkbox_next'/>").on("click", function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
var isNext = this.id === "darkbox_next";
|
||||||
|
c = (isNext ? c++ : --c) < 0 ? n - 1 : c % n;
|
||||||
|
$images.eq(c).click();
|
||||||
|
});
|
||||||
|
var $darkboxDescription = $("<div/>", {
|
||||||
|
"id": "darkbox-description"
|
||||||
|
});
|
||||||
|
var $darkbox = $("<div/>", {
|
||||||
|
"id": "darkbox",
|
||||||
|
html: $prevNext
|
||||||
|
}).on("click", function () {
|
||||||
|
$(this).removeClass("on");
|
||||||
|
}).append($darkboxDescription).appendTo("body");
|
||||||
|
|
||||||
|
$(document).on("click", "[data-darkbox]", function (e) {
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
$images = $('[data-darkbox!=""][data-darkbox]');
|
||||||
|
n = $images.length;
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
var docW = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||||
|
var docH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||||
|
var o = this.getBoundingClientRect();
|
||||||
|
var imgSRC = this.dataset.darkbox ? this.dataset.darkbox : this.src;
|
||||||
|
if (!imgSRC)
|
||||||
|
imgSRC = $("[data-darkbox!=''][data-darkbox]").attr("data-darkbox");
|
||||||
|
var newImg = new Image();
|
||||||
|
newImg.onload = function () {
|
||||||
|
c = $images.index(that);
|
||||||
|
var bigger = (newImg.height > docH || newImg.width > docW);
|
||||||
|
$darkbox.css({// Init darkbox to image position
|
||||||
|
backfaceVisibility: "hidden",
|
||||||
|
transition: "0s",
|
||||||
|
backgroundImage: "url('" + newImg.src + "')",
|
||||||
|
backgroundSize: bigger ? "contain" : "auto",
|
||||||
|
left: o.left,
|
||||||
|
top: o.top,
|
||||||
|
height: that.height,
|
||||||
|
width: that.width
|
||||||
|
});
|
||||||
|
$darkboxDescription.html($(that).attr("data-darkbox-description"));
|
||||||
|
setTimeout(function () {
|
||||||
|
if (!$darkbox.hasClass("on")) {
|
||||||
|
$darkbox.css({transition: "0.8s"}).addClass("on");
|
||||||
|
}
|
||||||
|
}, 35);
|
||||||
|
};
|
||||||
|
newImg.src = imgSRC;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on("keyup", function (e) {
|
||||||
|
var k = e.which;
|
||||||
|
if (k === 27) /*ESC */
|
||||||
|
$("#darkbox").click(); // close Darkbox
|
||||||
|
if (k === 37) /*LEFT*/
|
||||||
|
$("#darkbox_prev").click();
|
||||||
|
if (k === 39) /*RIGHT*/
|
||||||
|
$("#darkbox_next").click();
|
||||||
|
});
|
||||||
|
|
||||||
|
}());
|
6
js/jquery.min.js
vendored
Normal file
28
js/main.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
jQuery(document).ready(function($){
|
||||||
|
// browser window scroll (in pixels) after which the "back to top" link is shown
|
||||||
|
var offset = 300,
|
||||||
|
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
|
||||||
|
offset_opacity = 1200,
|
||||||
|
//duration of the top scrolling animation (in ms)
|
||||||
|
scroll_top_duration = 700,
|
||||||
|
//grab the "back to top" link
|
||||||
|
$back_to_top = $('.cd-top');
|
||||||
|
|
||||||
|
//hide or show the "back to top" link
|
||||||
|
$(window).scroll(function(){
|
||||||
|
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
|
||||||
|
if( $(this).scrollTop() > offset_opacity ) {
|
||||||
|
$back_to_top.addClass('cd-fade-out');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//smooth scroll to top
|
||||||
|
$back_to_top.on('click', function(event){
|
||||||
|
event.preventDefault();
|
||||||
|
$('body,html').animate({
|
||||||
|
scrollTop: 0 ,
|
||||||
|
}, scroll_top_duration
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|