activity-blue

<html><head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="//fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css"> <link href="//fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet" type="text/css"> <link href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic" rel="stylesheet" type="text/css">  <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/prettyPhoto.css"> <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <script src="js/vendor/modernizr-2.6.2.min.js"></script> </head> <body id="top">  <header>  <nav class="navbar navbar-default navbar-fixed-top"> <div class="container">  <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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 page-scroll" href="#page-top"> <img src="http://www.canner.io/images/dist/logo-word_beta.png" alt="" style="height: 50px;"> </a>  </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <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="#unit">主辦單位</a> </li> <li> <a class="page-scroll" href="#sponser">贊助商</a> </li> <li> <a class="page-scroll" href="#contact">聯絡</a> </li> </ul> </div>  </div>  </nav>  </header>  <div id="home-area" style="background: url(https://upload.wikimedia.org/wikipedia/commons/e/e0/Nanwan_(South_Bay).jpg) no-repeat;"> <div class="overlay"> <div class="container"> <div class="row" id="about">  <div class="col-md-6 col-sm-6 col-xs-12"> <div class="home-content wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0s"> <h1>Canner海洋音樂季</h1> <p>大家快來找朋友一起享受陽光沙攤上的音樂吧！</p> </div> </div>   <div class="col-md-6 col-sm-6 col-xs-12"> <div class="home-feature pull-right center-block wow bounceIn" data-wow-duration="1s" data-wow-delay="1s"> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Nanwan_(South_Bay).jpg" alt=""> </div> </div>  </div> </div> </div> </div>   <section id="description" class="section text-center"> <div class="container"> <h2 class="section-title wow fadeIn">活動特色</h2> <div class="row">  <div class="col-md-4 col-sm-6"> <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s"> <div class="row" style="margin-bottom:20px"> <div class="col-md-12"> <div class="service-content"> <img src="./img/client.png" alt="" class="img-responsive center-block"> <h3>華麗專業的主題</h3> <p>Canner 提供無數漂亮有設計感的主題來套用至你的網站，再也無須擔心如何設計網站。</p> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s"> <div class="row" style="margin-bottom:20px"> <div class="col-md-12"> <div class="service-content"> <img src="./img/client2.png" alt="" class="img-responsive center-block"> <h3>相容任何螢幕</h3> <p>Canner 所提供的主題皆支援響應式設計，因此在任何裝置下皆可擁有一致的體驗。</p> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s"> <div class="row" style="margin-bottom:20px"> <div class="col-md-12"> <div class="service-content"> <img src="./img/client3.png" alt="" class="img-responsive center-block"> <h3>快速發佈網站</h3> <p>當你完成自己的網站後，只需一鍵發佈，Canner 會提供你專屬的網址，讓你分享給全世界。</p> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s"> <div class="row" style="margin-bottom:20px"> <div class="col-md-12"> <div class="service-content"> <img src="./img/client3.png" alt="" class="img-responsive center-block"> <h3>免費的伺服器</h3> <p>Canner 會將你的網站放在我們的伺服器，你無須擔心任何技術上的問題，在一定使用額度下完全免費。</p> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s"> <div class="row" style="margin-bottom:20px"> <div class="col-md-12"> <div class="service-content"> <img src="./img/client2.png" alt="" class="img-responsive center-block"> <h3>流暢的合作介面</h3> <p>一目了然的合作介面讓隊員之間的合作天衣無縫。 </p> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s"> <div class="row" style="margin-bottom:20px"> <div class="col-md-12"> <div class="service-content"> <img src="./img/client.png" alt="" class="img-responsive center-block"> <h3>記錄你的每一步</h3> <p>Canner 有完善的版本控制系統，我們會幫你記錄所有編輯過程，即使你不小心編輯錯了可以返回。</p> </div> </div> </div> </div> </div>  </div>  </div>  </section> <section id="detail" class="section text-center"> <div class="container"> <h2 class="section-title wow fadeIn">活動資訊</h2> <div class="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="unit" class="section text-center"> <h2 class="section-title">活動主辦單位</h2> <div class="container">  <div id="unit-demo" class="owl-carousel owl-theme">  <div class="item"> <div class="single-testimonial"> <img class="center-block wow fadeInDown" data-wow-duration="1s" src="./img/app.png" alt="Testimoinial"> <h3>chilijung</h3> <p class="wow fadeInDown" data-wow-duration="1s"> Hi, my name is chilijung </p> <div class="social-networks wow fadeInDown" data-wow-duration="1s"> <a href="http://chilijung.me"><i class="fa fa-link"></i></a> </div> </div> </div> <div class="item"> <div class="single-testimonial"> <img class="center-block wow fadeInDown" data-wow-duration="1s" src="./img/app.png" alt="Testimoinial"> <h3>chilijung</h3> <p class="wow fadeInDown" data-wow-duration="1s"> Hi, my name is chilijung </p> <div class="social-networks wow fadeInDown" data-wow-duration="1s"> <a href="http://chilijung.me"><i class="fa fa-link"></i></a> </div> </div> </div> <div class="item"> <div class="single-testimonial"> <img class="center-block wow fadeInDown" data-wow-duration="1s" src="./img/app.png" alt="Testimoinial"> <h3>chilijung</h3> <p class="wow fadeInDown" data-wow-duration="1s"> Hi, my name is chilijung </p> <div class="social-networks wow fadeInDown" data-wow-duration="1s"> <a href="http://chilijung.me"><i class="fa fa-link"></i></a> </div> </div> </div>  </div>  </div>  </section> <section id="sponser" class="section text-center"> <h2 class="section-title"> 活動贊助商</h2> <div class="container">  <div id="sponser-demo" class="owl-carousel owl-theme">  <div class="item"> <div class="single-testimonial"> <img class="center-block wow fadeInDown" data-wow-duration="1s" src="./img/app.png" alt="Testimoinial"> <h3>chilijung</h3> <p class="wow fadeInDown" data-wow-duration="1s"> Hi, my name is chilijung </p> <div class="social-networks wow fadeInDown" data-wow-duration="1s"> <a href="http://chilijung.me"><i class="fa fa-link"></i></a> </div> </div> </div>  </div>  </div>  </section>  <section id="contact" class="section text-center"> <div class="container"> <h2 class="section-title">聯絡方式</h2> <div class="row">  <div class="col-md-offset-5"> <div class="contact-info text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s"> <h3>保持聯繫</h3> <p><span><i class="fa fa-map-marker"></i></span>如有問題可以聯絡我們喔！</p> <p><span><i class="fa fa-phone"></i></span> 09xxxxx09xx</p> <p><span><i class="fa fa-envelope-o"></i></span>hihihi@myemail.com</p> <div class="social-networks wow fadeInDown" data-wow-duration="1s"> <a href="//twitter.com/chilijung"><i class="fa fa-twitter"></i></a> <a href="//facebook.com/test"><i class="fa fa-facebook"></i></a> </div> </div> </div>  </div> </div> </section>   <footer> <div class="container"> <div class="row">  <div class="col-md-6"> </div>   <div class="col-md-6"> <div class="footer-content text-right"> <p>© 2015 All Rights Reserved, <a href="/"></a> </p> </div> </div>  </div>  </div>  </footer>  <script src="js/vendor/jquery-1.10.2.min.js"></script> <script src="js/plugins.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/wow.min.js"></script> <script src="js/prettyPhoto.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/main.js"></script> </body></html>