
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<style>
    *{
        margin: 0;
        padding: 0;
    }

    body{
        overflow-x: hidden;
        font-family: "微軟正黑體";
        font-family: 25px;
        background-color: #33fffc;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon fill='%232de0ee' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120 '/%3E%3C/svg%3E");
    }
  hr {
    margin-top: 0px;
    margin-bottom: 0px;
    border: 0;
    border-top: 0px solid #eee;
}
h2{
    color:white;
}
.navbar-default{
    border-color:brown;
}
.navbar-default .navbar-nav>li>a {
    color: white;
    
}
.navbar-fixed-top{
    border-radius: 0;
    background: brown;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: white;
    background:brown;
    }

      .intro{
        width: 100%;
        height: 100vh;
        background:linear-gradient(
      rgba(0,0,0,0.6),
      rgba(0,0,0,0.6)),
      url(/userUpload/images/10512106/guavatree.jpg);
      background-attachment: fixed; 
      background-repeat:no-repeat;
      background-position: center; 
      background-size: cover;
      position: relative;;

 
      }
      .bgw{
          background-color: rgba(225, 225, 225, 0.0) ;
      }

      
     .content{
         background: rgba(146, 139, 139, 0.7);
         border: 1px solid rgba(146, 139, 139, 0.7);
         border-radius: 25px;
          font-family: "標楷體";
          font-size: 40px;
          text-align: center;
          color: white;
          margin: 0px;
          padding: 0px;
          position: relative;
          top: 250px;
          left: 0%;
           }
   .container-fluid{
       padding-right: 0px;
      padding-left: 0px;
     margin-left: 0px; 
    margin-right: 0px;

    }

    footer{
        font-size: 18px;
        color: white;
        background: #a15749;


    }
.container {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}



 
  #section1 {
     width:100%;
     height:100%;
     color: black; 
     background-color: white;
     }

  #section1 div{

      padding: 5rem;
      margin: 30px 0px;
      font-family: "微軟正黑體";
      font-size: 20px;
      height: 900px;

  }
  @media (max-width: 768px) {
    #section1 div {
        height: 100%;
        margin: 0px 0px;
  }}
 
  
  #section1 div h3{
      font-family: "微軟正黑體";
      font-size: 30px;
      color: brown;
      font-weight: 400;

  }
  

  #section2{
     width:100%;
     height:100%;
     color: #fff;
     font-size: 20px;
     background-color: brown;}

     @media (max-width: 768px) {
    #section2  {
        height: 100%;
       
  }}
  
  #section3 {
    width:100%;
     height:100vh;
     color: #fff; 
     background-color: blueviolet;
     font-size: 20px;
    }

     @media (max-width: 768px) {
    #section3 {
        height: 100%;
  }}
  
  #section4 {
     width:100%;
     height:100vh;
     color: #fff; 
     background-color: #a15749;
     font-size: 20px; 
    }
     @media (max-width: 768px) {
    #section4 {
        height: 100%;
  
  }}
 .button{
     list-style-type: none;
     margin: 0;
     padding: 0;
     border: 1px solid blanchedalmond;
     background: #ff9800;
     color: white;
     width: 220px;
     height: 50px;
 }
 .button:hover a{
     text-decoration: none;
     color: white;
 }

 /* Back to top button */
.back-to-top {
  position: fixed;

  background: #71c55d;
  line-height: 1;
  color: #fff;
  padding: 7px 12px 13px 12px;
  font-size: 16px;
  border-radius: 2px;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 15px;
  }
}

.back-to-top:focus {
  background: #71c55d;
  color: #fff;
  outline: none;
}

.back-to-top:hover {
  background: #55b03f;
  color: #fff;
}

.btn-default{
    background:none;
    color:white ;
    font-family: "微軟正黑體";
    font-size: 25px;
    
}
.btn-default:hover {
    background: #a15749;
    color: #ff9800;
}

.position{
   display: flex;
   align-items: center;

}
.fa-cannabis{
    font-size: 100px;
}
.fa-smile-wink{
    font-size: 100px;
}
.fa-qrcode{
    font-size: 100px;
}
.fa-leaf{
    font-size: 100px;
    color: #71c55d;
}
.col-md-12{
    padding-right: 0px;
    padding-left: 0px;
}

</style>
    <title>關於芳林</title>
</head>
<body>
    <div class="intro">
    <div class="container">
    <p class="content animated fadeInDown">
            <i class="fas fa-leaf"></i><br>
    "用優質的保證，加上對大自然的呵護，產出香甜的芭樂是我們芳林的信念"<br>
    <a href="#section1" class="btn btn-default btn-sm ">芳林優勢</a>
    <a href="#section2" class="btn btn-default btn-sm">農園介紹</a>
            <a href="#section3" class="btn btn-default btn-sm">農場起源</a>
            <a href="#section4" class="btn btn-default btn-sm">農場主人經歷</a>
</p>

    </div></div>
    <div class="position">
          
    </div>
    
            
            
      
<div id="section1" class="container-fluid text-center ">
    <br><br><br>
        <h1>芳林芭樂對您做的保證</h1>
        <div class="col-lg-4 col-xs-12 col-sm-12 bg-success   ">
                <i class="fas fa-cannabis"></i>
        <h3>草生栽培農法 </h3>
        <p></p>
                <p>
                <br>     
                 <h4 style="font-size:25px">什麼是草生栽培？</h4><br>   
                草生栽培是一種愛護土地的栽植法，土壤有機成分高，而且保水、保濕、保肥。<br><br>
               

草生栽培最廣義而言就是「不使用化學除草劑除草，讓草生長」<br><br>
例如<br><br>

(1) 把有害或是太高的雜草清除，保留不妨礙作物的草<br><br>

(2) 種「非原生草類」或是「綠肥作物」並且加以管理。<br><br>


               </p></div>
                
                <div class="col-lg-4 col-xs-12 col-sm-12 bg-warning ">
                        <i class="far fa-smile-wink"></i>  
               <h3>優質的保證 </h3> <br>
               <p>鄭宗林隸屬大社區農會的果樹產銷第7班，<br><br>
                已通過產銷履歷認證，種植總面積2公頃，<br><br>
                年產量約50公噸。芭樂的銷售管道60%經由產銷班送往拍賣市場，40%自行宅配販售。<br><br>
                芳林農園珍珠芭樂特色：<br><br>
                <p style="color:red; font-weight:700;">1.通過屏科大產銷履歷認證<br><br>
                2.通過311項無農藥殘留檢測<br><br>
                3.採草生栽培、友善耕作</p></p></div>
              
                <div class="col-lg-4 col-xs-12 col-sm-12 bg-danger ">
                <i class="fas fa-qrcode"></i>
                    <h3>產銷履歷</h3>
                    <p>產銷QR code</p>
                    <img src="/userUpload/images/10512106/QRcode.png" alt="">
                    <div>
                  
        <p>產銷履歷</p>
         <p>水質檢測認證</p>
             <p>無農藥檢測認證</p>
                
       



</div>
    
        
    </div>
     
      </div>
    
      <div id="section2" class="container-fluid text-center">
            <br>
      <br><br>
        <h1>農園介紹</h1>
        <h3>天然無毒的珍珠芭樂農園</h3>
        <br>
        <br>
        <div class="col-lg-5 col-xs-12 col-sm-12   "></div>
        
        <div class="col-lg-6 col-xs-12 col-sm-12  ">
                <br>
        <p>高鐵橋下有一座翠綠的芭樂園，別人的芭樂園幾乎寸草不生，但這裡的芭樂樹卻長在草地上，
            是農夫不勤勞，不好好照顧，任由雜草亂竄嗎？<br>
                答案當然是否定的，這叫草生栽培，也是愛護大地的表現，
                一眼望去，樹是綠的、地也是綠的，煞是好看，長成的珍珠芭樂更是清脆多汁。<br>
                大多數農二代是因為長輩務農而務農，但鄭宗林卻是從無到有，靠著自己的興趣，
                加上要照料中風的阿公，不得不辭去鋼鐵廠工作，在自家附近租地種荔枝，以便隨時看顧阿公的生活起居，<br>
                然而，鄭宗林的務農人生並不如想像中那般美好，<br><br>除了時間比上班族來得有彈性外，舉凡種植技術、蟲害防治、水果收成、行銷通路等，完全都靠自己慢慢摸索，<br>
                一路跌跌撞撞，也花了不少冤枉錢，但他並未被這些挫折擊倒。</p></div>
               
      </div>
      <div id="section3" class="container-fluid text-center ">
            <br>
      <br><br>
        <h1>  故事的起源</h1>
        <h2>The story of FANGLIN ORCHARD</h2>
        <br><br>
        <div class="col-lg-5 col-xs-12 col-sm-12  "></div>
        <div class="col-lg-6 col-xs-12 col-sm-12  ">
      <p>喜歡接觸大自然，登過不少座百岳，也愛在家裡栽種有機蔬菜的鄭宗林，經常思忖如何能在工作與興趣之間取得平衡。
        畢業後在煉鋼廠工作的他，因為過著需要輪班又作息不定的日子，無法安心照 料生病中的阿公，二○○九年決心去職，返鄉務農，
        希望能夠彈性安排時間的農作生活，讓他兼顧生計並能善盡孝道....
        對鄭宗林來說，作為一名新手果農，這一路以來是不斷從挫折中學習。
        像一開始選擇種植玉荷包， 然而荔枝產收期較短，需要大量人力，是經驗不足且人單力薄的他所無法負荷，
        經過重新評估以及專家的建議，改為種植一年多產又可以自行調整產期的芭樂。 
        一個人可以種出芭樂，但品質要讓市場能夠接受，需要投注更多時間與功夫。
        <br><br>
       鄭宗林積極學習參加農民學院的熱帶果樹班，研習相關農業知識與技術，
       2010年跟同期幾位同學分租兩公頃土地，開始種植珍珠芭樂。
        2014年承租到位於高雄市岡山區阿公店水庫水源保護區下方的一塊2.5公頃環境優美生態自然豐富的農地，成立了（芳林農園）。

    返鄉九年來，做中學、學中做，除了持續參加專業課程，精進土壤合理化施肥、田間用藥管理等知識外，
    也積極參與農業舉辦的農產品所行銷、包裝、設計等相關課程。
    除了取得產銷履歷及吉園圃驗證，更拓展品牌逐漸打開知名度與銷售管道，
    證明只要願意努力，新手也可以闖出一片天。
      </p></div>
      </div>
      <div id="section4" class="container text-center">
            <br>
      <br><br>
        <h1>過程經驗</h1>
        <div class="col-lg-5 col-xs-12 col-sm-12  "></div>
        <div class="col-lg-6 col-xs-12 col-sm-12  ">
 經歷：<br>

。行政院農委會 第一屆 百大青年農民<br>

。高雄市農業局 高雄型農<br>

。培訓班 高雄型農精英班<br>

。高雄市青年農民聯誼會會長<br><br>
        善用政府資源讓新手變老手<br>  
        後來他發現，芭樂不但可以一年多產，還可以透過整枝、修剪技術調整芭樂的產期，時間安排更具彈性。<br>
        從荔枝到芭樂，鄭宗林不斷從挫折中學習成長，「我想要給有心轉行務農的年輕人一個建議，那就是善用政府資源。」<br>
        鄭宗林說，當初他從農試所與農改場兩個單位學習農業相關知識與技術，這些單位安排的專業課程主要重於果樹栽植、土壤施肥、用藥管理的範疇，比較欠缺產品行銷方面，然而高雄市農業局舉辦的型農培訓班，正好可以補足這一塊。<br>
        「我的芭樂原本和大多數果農一樣，是透過果菜批發市場整批販售，因為價錢被市場端控制，利潤所得有限，如果能另闢一條由自己決定售價的通路，情況勢必會有所改善。」<br>
        鄭宗林是第一代型農，型農培訓班裡產品行銷和包裝設計課程，讓他學會網路行銷的訣竅，首先他自創「芳林」的品牌，不但自行架設網站，設立部落格和臉書粉絲專頁、並與通路商談契作，價格受到保障，收益自然也隨之增加。<br>
    </div>      
      </div>
    
</body>

<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
</html>