activity-road
Version:
303 lines (284 loc) • 11.7 kB
HTML
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollzer.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<link rel="stylesheet" href="css/skel.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style-xlarge.css">
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Header -->
<section id="header" class="skel-layers-fixed">
<header>
<span class="image avatar"><img src="https://avatars2.githubusercontent.com/u/11666120?v=3&s=200" alt=""></span>
</header>
<nav id="nav">
<ul>
<li>
<a class="page-scroll" href="#about">特色及細節</a>
</li>
<li>
<a class="page-scroll" href="#detail">活動細節</a>
</li>
<li>
<a class="page-scroll" href="#register">報名</a>
</li>
<li>
<a class="page-scroll" href="#member">活動成員</a>
</li>
<li>
<a class="page-scroll" href="#unit">主辦單位</a>
</li>
<li>
<a class="page-scroll" href="#sponser">贊助商</a>
</li>
<li>
<a class="page-scroll" href="#contact">聯絡</a>
</li>
</ul>
</nav>
<footer>
<ul class="icons">
<li>
<a href="http://twitter.com/cannerio" class="icon fa-twitter"><span class="label">Twitter</span></a>
</li>
<li>
<a href="http://facebook.com/cannerweb" class="icon fa-facebook"><span class="label">Facebook</span></a>
</li>
<li>
<a href="mailto:hihihi@myemail.com" class="icon fa-envelope"><span class="label"></span></a>
</li>
</ul>
</footer>
</section>
<!-- Main -->
<div id="main">
<!-- One -->
<section id="about" style="background: url('./images/bg.jpg') 100% no-repeat #46B6AC;">
<div class="container">
<header class="major">
<h2>Canner BETA</h2>
<p>大家快找朋友一起來製作自己獨一無二的網站吧！
可以快速的創造自己的履歷、商家、社團、活動網站
人人都能擁有自己的網站，你還在等什麼呢？</p>
</header>
</div>
</section>
<section id="service">
<div class="container">
<h3><i class="fa fa-info-circle"></i>活動特色及細節</h3>
<hr>
<div class="features">
<article>
<a href="#" class="image"><img src="./images/pic01.jpg" alt="">
</a>
<div class="inner">
<h2>華麗專業的主題</h2>
<p>Canner 提供無數漂亮有設計感的主題來套用至你的網站，再也無須擔心如何設計網站。</p>
</div>
</article>
<article>
<a href="#" class="image"><img src="./images/pic02.jpg" alt="">
</a>
<div class="inner">
<h2>相容任何螢幕</h2>
<p>Canner 所提供的主題皆支援響應式設計，因此在任何裝置下皆可擁有一致的體驗。</p>
</div>
</article>
<article>
<a href="#" class="image"><img src="./images/pic03.jpg" alt="">
</a>
<div class="inner">
<h2>快速發佈網站</h2>
<p>當你完成自己的網站後，只需一鍵發佈，Canner 會提供你專屬的網址，讓你分享給全世界。</p>
</div>
</article>
<article>
<a href="#" class="image"><img src="./images/pic03.jpg" alt="">
</a>
<div class="inner">
<h2>免費的伺服器</h2>
<p>Canner 會將你的網站放在我們的伺服器，你無須擔心任何技術上的問題，在一定使用額度下完全免費。</p>
</div>
</article>
<article>
<a href="#" class="image"><img src="./images/pic02.jpg" alt="">
</a>
<div class="inner">
<h2>流暢的合作介面</h2>
<p>一目了然的合作介面讓隊員之間的合作天衣無縫。 </p>
</div>
</article>
<article>
<a href="#" class="image"><img src="./images/pic01.jpg" alt="">
</a>
<div class="inner">
<h2>記錄你的每一步</h2>
<p>Canner 有完善的版本控制系統，我們會幫你記錄所有編輯過程，即使你不小心編輯錯了可以返回。</p>
</div>
</article>
</div>
</div>
</section>
<section id="detail">
<div class="container">
<h3><i class="fa fa-info-circle"></i>活動資訊</h3>
<hr>
<div class="feature row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<div class="col-lg-12 text-center">
<div class="row">
<h3 class="section-heading"><i class="fa fa-map-marker"></i>活動地點</h3>
</div>
</div>
<h4 class="section-heading">你的電腦前面！</h4>
<hr class="divider">
<div class="col-lg-12 text-center">
<div class="row">
<h3 class="section-heading"><i class="fa fa-calendar-o"></i>活動時間</h3>
</div>
</div>
<h4 class="section-heading">NOW!</h4>
<hr class="divider">
<div class="col-lg-12 text-center">
<div class="row">
<h3 class="section-heading"><i class="fa fa-money"></i>活動費用</h3>
</div>
</div>
<h4 class="section-heading">$ 0</h4>
<hr class="divider">
<div class="col-lg-12 text-center">
<div class="row" id="register">
<h3 class="section-heading"><i class="fa fa-map-marker"></i>報名資訊</h3>
</div>
</div>
<h4>
<a href="http://www.canner.io/demoform" class="btn btn-primary btn-xl ">前往報名</a>
</h4>
<p>
點擊下面的連結即可試用喔！
</p>
</div>
</div>
</div>
</section>
<section id="member">
<div class="container">
<h3><i class="fa fa-user"></i>活動成員</h3>
<hr>
<div class="features container row">
<article>
<div class="col-md-6 item">
<img src="https://cdn3.iconfinder.com/data/icons/flat-color-icons/504/businessman-128.png" alt="img" width="100%">
<h4>canner</h4>
<p>This is canner</p>
</div>
<div class="col-md-6 item">
<img src="https://cdn3.iconfinder.com/data/icons/flat-color-icons/504/businessman-128.png" alt="img" width="100%">
<h4>canner</h4>
<p>This is canner</p>
</div>
<div class="col-md-6 item">
<img src="https://cdn3.iconfinder.com/data/icons/flat-color-icons/504/businessman-128.png" alt="img" width="100%">
<h4>canner</h4>
<p>This is canner</p>
</div>
</article>
</div>
</div>
</section>
<section id="unit">
<div class="container">
<h3><i class="fa fa-users"></i>活動主辦單位</h3>
<hr>
<div class="features container row">
<article>
<div class="col-md-6 item">
<img src="https://cdn0.iconfinder.com/data/icons/superhero-2/256/Batman-128.png" alt="img" width="100%">
<h4>蝙蝠</h4>
<a href="//canner.io">
<button class="btn">網路連結</button>
</a>
</div>
<div class="col-md-6 item">
<img src="https://cdn0.iconfinder.com/data/icons/superhero-2/256/Captain_America-128.png" alt="img" width="100%">
<h4>隊長</h4>
<a href="//canner.io">
<button class="btn">網路連結</button>
</a>
</div>
</article>
</div>
</div>
</section>
<section id="sponser">
<div class="container">
<h3><i class="fa fa-users"></i>活動贊助單位</h3>
<hr>
<div class="features container row">
<article>
<div class="col-md-6 item">
<img src="https://s-media-cache-ak0.pinimg.com/236x/f0/5b/62/f05b623e1b43380d7f7df86fbd805e75.jpg" alt="img" width="100%">
<h4>李歪斯</h4>
<p>have fun</p>
<a href="canner.io">
<button class="btn">網路連結</button>
</a>
</div>
</article>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<h3 class="section-heading"><i class="fa fa-info"></i>聯絡我們</h3>
<hr>
<div class="features container row">
<article>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x wow bounceIn"></i>
<p>09xxxxx09xx</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
<p><a href="mailto:hihihi@myemail.com">hihihi@myemail.com</a></p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<ul class="list-inline banner-social-buttons">
<li>
<a href="http://twitter.com/cannerio" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i><span class="network-name">Twitter<span></span></span></a>
</li>
<li>
<a href="http://facebook.com/cannerweb" class="btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i><span class="network-name">Facebook<span></span></span></a>
</li>
</ul>
</div></article>
</div>
</div>
</section>
</div>
<!-- Footer -->
<section id="footer">
<div class="container">
<ul class="copyright">
<li>
chilijung | <a href="http://canner.io/">http://canner.io</a>
</li>
</ul>
</div>
</section>
</div>
<script>
$('#skel-layers-hiddenWrapper').remove();
</script>
</body></html>