<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>芳林</title>
    <meta name="author" content="Matthew Howell" />
    <meta name="description" content="fullPage continuous scrolling demo." />
    <meta name="keywords"  content="fullpage,jquery,demo,scroll,loop,continuous" />
    <meta name="Resource-type" content="Document" />


    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.0/pace.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">


  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <!--[if IE]>
        <script type="text/javascript">
             var console = { log: function() {} };
        </script>
    <![endif]-->
</head>

<style>
   

/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}



body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 6em;
}
p{
	font-size: 2em;
}

.section{
   font-family: "微軟正黑體"；
}
#menu li {
    font-family: "微軟正黑體";
    font-size: 18px;
	display:inline-block;
	margin: 10px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
	background:#666;
	background: rgba(0,0,0, 0.5);
	color: #fff;
}
#menu li a {
    text-decoration: none;
    color: blueviolet;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu {
    position: fixed;
    bottom: 0;
    text-align: center;
    height: 10%;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin: 0;
}


/* ===================================================================
 * # home
 *
 * ------------------------------------------------------------------- */
 .s-home {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: relative;
  display: table;
}

.s-home::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.65;
  background-color: #000000;
}



/* ------------------------------------------------------------------- 
 * ## home content
 * ------------------------------------------------------------------- */
.home-content {
    background:linear-gradient(
    rgba(0,0,0,0.01),
    rgba(0,0,0,0.3)
  ),
   url(/userUpload/images/10512106/guavabgw.jpg);
   background-attachment: fixed; 
   background-repeat:no-repeat;
   background-position: center top; 
  background-size: cover;
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
}
.home-content h1 {
    padding-left: 18%;
    font-family: "微軟正黑體";
    font-weight: 700;
    font-size: 4.2rem;
    line-height: 2.1;
    margin-top: 0;
    color: #ffffff;
}
.home-content h1 + p {
  font-family: "微軟正黑體";
  font-size: 2rem;
  line-height: 1.421;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 1.2rem;
  padding-left: 12rem;
  position: relative;
}
.home-content h1 + p::before {
    content: "";
    display: block;
    width: 10rem;
    height: 4px;
    background-color: #cc4e14;
    position: absolute;
    left: 25px;
    top: 1.2rem;
}

/* ------------------------------------------------------------------- 
 * ## home scroll
 * ------------------------------------------------------------------- */
 .home-scroll {
  height: 4.8rem;
  position: absolute;
  right: 110px;
  bottom: 6.6rem;
}
.home-scroll__text {
  display: inline-block;
  font-family: "微軟正黑體";
  font-size: 11px;
  line-height: 2.8rem;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  color: #ffffff;
  border-bottom: 1px solid transparent;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: relative;
  right: 7.5rem;
}
.home-scroll__icon {
  display: block;
  height: 3rem;
  width: 3rem;
  background-image: url(http://www.shejiye.com/uploadfile/icon/2017/0203/shejiyeiconzypo432cfcz.png);
  background-color: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  right: 0;
}
.home-scroll:hover .home-scroll__text {
  border-bottom: 1px solid #ffffff;
}

/******scroll************/
#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: yellow;
    font-size: 18px;
    font-family: "微軟正黑體";
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer;
}

#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {
  width: 10px;
  height: 10px;
  background: aqua;
  margin: -5px 0px 0px -5px;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 4px;
  width: 4px;
  border: 0;
  background: blue;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.container {
    padding-left: -15px;
  padding-right: -15px;
  }

  /* ourlife Section
--------------------------------*/

#ourlife {
  width: 100%;
  height: 100vh;
  font-family: "微軟正黑體";
  background: linear-gradient(
    rgba(0,0,0,0.3),
    rgba(0,0,0,0.3)
  ),
  url(/userUpload/images/10512106/environment.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  background-size: cover;
  
}

@media (max-width: 992px) {

#ourlife {
height: 100%;}
}
.owl-dot.active > span {
  height: 10px !important;
  width: 10px !important;
}

.owl-theme .owl-dots .owl-dot span {
  height: 10px !important;
  width: 10px !important;
}

.owl-item img {
  cursor: pointer;
}

.owl-stage-outer {
  margin-bottom: 30px;
}

.owl-theme .owl-nav {
  display: none;
  margin-top: 10px;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #71c55d;
}

.owl-theme .owl-dots .owl-dot span {
  background: #ddd;
}

.img-fluid {
  height: 100%;
  margin-bottom: 30px;
  width: 100%;
}

.separator {
  color: #ddd;
  font-family: "微軟正黑體";
  font-size: 25px;
  font-weight: 300;
  margin-bottom: 30px;
  text-transform: capitalize;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

h2 {
    color: white;
    font-weight: 600;
    font-size: 48px;
    font-family: 微軟正黑體;
}

/* Contact Section
--------------------------------*/
#section4 {

width: 100%;
height: 100vh;
background: linear-gradient(
  rgba(0,0,0,0.3),
  rgba(0,0,0,0.3)
),
url(/userUpload/images/10512106/contact.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-size: cover;
z-index: -5;
}

@media (max-width: 992px) {

  #section4 {
height: 100%;}
}
 

#section4 .info {
color: #222;
}

#section4 .info i {
font-size: 40px;
color: white;
float: left;
}


#section4 .info p {
padding: 0 0 13px 60px;
margin-bottom: 20px;
line-height: 27px;
font-size: 25px;
font-family: 微軟正黑體;
color: #ddd;
}


#section4 .info .email p {
padding-top: 5px;
}

#section4 .social-links {
padding-bottom: 50px;
text-align: center;
}

#section4 .social-links a {
font-size: 18px;
display: inline-block;
background: blue;
color: #fff;
line-height: 1;
padding: 8px 0 8px 0;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}

#section4 .social-links a:hover {
background: rgb(85, 161, 212);
color: #fff;
}

.iframe-rwd {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;

      }
      
.iframe-rwd iframe {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 50px;
      }


</style>
<body>
<div id="fullpage">
    <div class="section" id="section0">
         
<!-- home ================================================== -->
    <section id="home" class="s-home " >


        <div class="home-content">

            <div class="row home-content__main " data-aos="fade-right" >
                <h1 >
               歡迎來到芳林芭樂農園
                </h1>

                <p>
                    一生懸命，自慢的芭樂 <br>
                    芳林
                </p>
            </div> <!-- end home-content__main -->
            <ul id="menu">
                <li data-menuanchor="product"><a href="#product">產品介紹</a></li>
                <li data-menuanchor="ourlife"><a href="#ourlife">芳林生態</a></li>
                <li data-menuanchor="contact"><a href="#contact">聯絡我們</a></li>
                <li><a href="https://www.facebook.com/%E8%8A%B3%E6%9E%97-%E8%8A%AD%E6%A8%82%E8%BE%B2%E5%9C%92-297327576945814/">
              <i class="fab fa-facebook-f"></i>
                <span class="home-social-text">Facebook</span>
            </a></li>
            <li><a href="javascript: void(window.open(&apos;https://lineit.line.me/share/ui?url=&apos; .concat(encodeURIComponent(location.href)) ));" title="分享給 LINE 好友">
                <i class="fab fa-line"></i>
                  <span class="home-social-text">line</span>
              </a></li>
              <li><a href="https://blog.xuite.net/kenny335a/twblog">
                <i class="fab fa-blogger"></i>
                  <span class="home-social-text">blog</span>
              </a></li>
            </ul>
            <a href="#about" class="home-scroll smoothscroll"><span class="home-scroll__text">Scroll Down</span><i class=" home-scroll__icon"></i></a>
        </div> <!-- end home-content -->
        
 
        
    </section> <!-- end s-home -->


    </div>
    <div class="section" id="section1">
        <h1>Section 2</h1>
    </div>
    <div class="section" id="section2">
        <h1>Section 3</h1>
    </div>
     <!--==========================ourlife Section============================-->
	<div class="section" id="section3" class="padd-section text-center wow fadeInUp">
        
  
    <br> <br> <br>
  <div class="container">
    <div class="section-title text-center">
      <h2>芳林生態</h2>
      <br>
      <p class="separator"> 大地的滋潤，讓芭樂香甜美味</p>
    </div>
  </div>
  <br>
  <div class="container">
    <div class="owl-carousel owl-theme">

      <div><img src="/userUpload/images/10512106/%E8%8D%89%E7%94%9F%E6%A0%BD%E5%9F%B9.png" alt="img"></div>
      <div><img src="/userUpload/images/10512106/%E9%99%A4%E8%8D%89%E5%B0%8F%E9%B4%A8.png" alt="img"></div>
      <div><img src="/userUpload/images/10512106/%E8%8A%AD%E6%A8%82%E5%9C%922.png" alt="img"></div>
      <div><img src="/userUpload/images/10512106/%E5%B2%A1%E5%B1%B1%E8%B6%85%E5%B3%B0%E5%AF%BA.png" alt="img"></div>

    </div>
  </div>
  <br> <br> <br> <br>
    </div>
    <!--==========================
    Contact Section
  ============================-->
	<div class="section" id="section4" class="padd-section wow fadeInUp" >
       

        <br>   <br>   <br>
        <div class="container">
          <div class="section-title text-center">
            <h2>聯絡我們</h2>
            <br>
            <p class="separator">聯絡資訊</p>
            <br> <br>
          </div>
        </div>
    
        <div class="container">
                <div class="row justify-content-center">
          
                  <div class="col-lg-6 col-md-4">
          
                    <div class="info">
                        <div>
                            <i class="fa fa-user" ></i>
                            <p>鄭宗林</p>
                          </div>
          
                          <div>
                              <i class="fa fa-mobile" ></i>
                              <p>0910-326-822</p>
                            </div>
                            <div>
                                <i class="fab fa-line"></i>
                                <p>kenny335a</p>
                              </div>
          
                      <div>
                        <i class="fa fa-map-marker"> </i>
                        <p>820高雄市岡山區嘉峰路600巷高鐵 橋下</p>
                      </div>
          
                      <div class="email">
                        <i class="fa fa-envelope"></i>
                        <p>kenny335a@
                            yahoo.com.tw</p>
                      </div>
          
                      <div>
                        <i class="fa fa-phone"></i>
                        <p>07-371-2376</p>
                      </div>
                      <div>
                          <i class="fa fa-car"></i>
                          <p>可前往岡山火車站轉乘計程車($200)或由農場主人接送</p>
                        </div>
          
          
                    </div>
          
                   
          
                    <div class="social-links">
                      <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>&nbsp;&nbsp;
                      <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>&nbsp;&nbsp;
                      <a href="#" class="instagram"><i class="fab fa-instagram"></i></a>&nbsp;&nbsp;
                      <a href="#" class="google-plus"><i class="fab fa-google-plus-g"></i></a>&nbsp;&nbsp;
                      <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
                    </div>
          
                  </div>
          
                  <div class="col-lg-6 col-md-8">
                    <div class="iframe-rwd">
                      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7354.3677329882885!2d120.316526!3d22.832686!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x51e50555d5e38def!2z6Iqz5p6X6Iqt5qiC5p6c5ZyS!5e0!3m2!1szh-TW!2stw!4v1554895992005!5m2!1szh-TW!2stw" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
                    </div>
                    </div>
                </div>
              </div>
            
    
      <!-- #contact -->
    </div>
</div>
<!-- Java Script
    ================================================== -->
    
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://www.ruan-jian.com/ajax/libs/jquery-placeholder/2.1.2/jquery.placeholder.js"></script>
    <script src="https://www.ruan-jian.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
    <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@3.2.0/imagesloaded.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
    <script src="https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe.min.js"></script>
    <script src="https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe-ui-default.min.js"></script>   
     <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

    <script src="https://briancherne.github.io/jquery-hoverIntent/jquery.hoverIntent.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
  
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/3.0.5/fullpage.js"></script>
<script type="text/javascript">
    var myFullpage = new fullpage('#fullpage', {
        sectionsColor: ['white', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
        anchors: ['page', 'about', 'product','ourlife','contact'],
        navigation:true,
        navigationTooltips: ['回頂頁', '關於我們', '產品介紹','芳林生態','聯絡我們'],
        showActiveTooltip: true,
        menu: '#menu'
    });
</script>

// Init Owl Carousel
<script>
$('.owl-carousel').owlCarousel({
  items: 4,
  autoplay: true,
  loop: true,
  margin: 30,
  dots: true,
  responsiveClass: true,
  responsive: {

    320: { items: 1},
    480: { items: 2},
    600: { items: 2},
    767: { items: 3},
    768: { items: 3},
    992: { items: 4}
  }
});

</script>
<script>
        AOS.init({
  duration: 1000,
})
      </script>

</body>
</html>