<!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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>


    <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;
        }


        #owl-demo .item {
            margin: 3px;
        }

        #owl-demo .item img {
            display: block;
            width: 100%;
            height: auto;
        }

        .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: 800px;

        }

        @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: 100vh;
            color: #fff;
            font-size: 20px;
            background-color: rgb(197, 133, 14);
        }

        @media (max-width: 768px) {
            #section2 {
                height: 100%;

            }
        }

        #section3 {
            width: 100%;
            height: 100vh;
            color: #fff;
            background-color: rgb(20, 173, 211);
            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;
        }

        #ourcarousel {
            width: 450px;
        }

        @media (max-width: 768px) {
            #ourcarousel {
                width: 100%;
            }
        }
    </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班，
                已通過產銷履歷認證，種植總面積2公頃，
                年產量約50公噸。芭樂的銷售管道60%經由產銷班送往拍賣市場，40%自行宅配販售。<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>
                <p>下面有附件請自行下載</p>





            </div>


        </div>

    </div>

    <div id="section2" class="container-fluid text-center">
        <br>
        <br><br>
        <h1>農園介紹</h1>
        <h2>天然無毒的珍珠芭樂農園</h2>
        <br>
        <br>

        <div class="col-lg-5 col-xs-12 col-sm-12   ">
            <div class="container">
                <div id="ourcarousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#ourcarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#ourcarousel" data-slide-to="1"></li>
                        <li data-target="#ourcarousel" data-slide-to="2"></li>
                        <li data-target="#ourcarousel" data-slide-to="3"></li>
                        <li data-target="#ourcarousel" data-slide-to="4"></li>
                        <li data-target="#ourcarousel" data-slide-to="5"></li>
                        <li data-target="#ourcarousel" data-slide-to="6"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">

                        <div class="item active">
                            <img src="/userUpload/images/10512106/%E8%8D%89%E5%9C%B0.jpg" alt="" style="width:100%;">
                            <div class="carousel-caption">
                                <h3>綠意盎然的草地</h3>
                                
                            </div>
                        </div>

                        <div class="item">
                            <img src="/userUpload/images/10512106/flower.jpg" alt="" style="width:100%;">
                            <div class="carousel-caption">
                                <h3>flower</h3>
                               
                            </div>
                        </div>

                        <div class="item">
                            <img src="/userUpload/images/10512106/%E9%99%A4%E8%8D%89%E5%B0%8F%E9%B4%A8.png" alt=""
                                style="width:100%;">
                            <div class="carousel-caption">
                                <h3>除草小鴨</h3>
                                
                            </div>
                        </div>
                        <div class="item">
                            <img src="/userUpload/images/10512106/%E9%99%A4%E8%8D%89%E6%A9%9F.jpg" alt=""
                                style="width:100%;">
                            <div class="carousel-caption">
                                <h3>除草機</h3>
                               
                            </div>
                        </div>
                        <div class="item">
                            <img src="/userUpload/images/10512106/%E8%8D%89%E7%94%9F%E6%A0%BD%E5%9F%B9.png" alt=""
                                style="width:100%;">
                            <div class="carousel-caption">
                                <h3>草生栽培</h3>
                               
                            </div>
                        </div>
                        <div class="item">
                            <img src="/userUpload/images/10512106/%E8%8A%AD%E6%A8%82%E5%9C%92.jpg" alt=""
                                style="width:100%;">
                            <div class="carousel-caption">
                                <h3>芭樂園</h3>
                                
                            </div>
                        </div>
                        <div class="item">
                                <img src="/userUpload/images/10512106/%E5%B2%A1%E5%B1%B1%E8%B6%85%E5%B3%B0%E5%AF%BA.png" alt=""
                                    style="width:100%;">
                                <div class="carousel-caption">
                                    <h3>岡山超峰寺</h3>
                                    
                                </div>
                            </div>

                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#ourcarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#ourcarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

        </div>

        <div class="col-lg-6 col-xs-12 col-sm-12  ">
            <br>
            <p>高鐵橋下有一座翠綠的芭樂園，別人的芭樂園幾乎寸草不生，但這裡的芭樂樹卻長在草地上，
                是農夫不勤勞，不好好照顧，任由雜草亂竄嗎？答案當然是否定的，這叫草生栽培，也是愛護大地的表現，
                大多數農二代是因為長輩務農而務農，但鄭宗林卻是從無到有，靠著自己的興趣，
                加上要照料中風的阿公，不得不辭去鋼鐵廠工作，在自家附近租地種荔枝，以便隨時看顧阿公的生活起居，
                然而，鄭宗林的務農人生並不如想像中那般美好，除了時間比上班族來得有彈性外，舉凡種植技術、蟲害防治、水果收成、行銷通路等，完全都靠自己慢慢摸索，
                一路跌跌撞撞，也花了不少冤枉錢，但他並未被這些挫折擊倒。</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  ">
            <p>
                經歷：<br>

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

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

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

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



</body>

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

</html>