359 lines
15 KiB
HTML
359 lines
15 KiB
HTML
|
<!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>
|