<html lang="zh-TW">

<head>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">


    <!-- Scroll-reaveal -->
    <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>    

    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather" rel="stylesheet" type="text/css">

    <script src="https://www.google.com/recaptcha/api.js"></script>

    <!-- Google web fonts, https://design.google.com/icons/ -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Google web fonts, https://design.google.com/icons/ -->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <style type="text/css">
        body {
            background-size: cover;
        }

        .bgw{
            background-color: rgba(255,255,255,0);
        }

        .title1{
            background-color: rgba(0,0,0,.7);
            color: white;
            font-weight: bold;
            padding-left: 0em;
            width: 18em;
            padding: 5px 0 7px 0;
            border-radius: 6px;
            text-align: center;
            letter-spacing: 0.4pc;
            font-family: 標楷體;
        }

        a[ id=link-drop ]:target ~ #link-drop {
            transform: translateY( -200px );
        }

        .navbar{
            transition: all 0.6s ease-out;
        }

        .navbar.AtTop{
            background: rgba(0,0,0,.1);
        }

        .navbar-default .navbar-brand {
            color: saddlebrown;
            font-weight: bold;
        }

        .navbar-default .navbar-brand:hover {
            color: brown;
            font-weight: bold;
        }

        section {
            margin: 0;
            padding: 0;
            position: relative;
        }

        .dropdown-menu{
            background: rgba(0, 0, 0, .1);
            position: absolute;
            top: 100%;
        }

        .dropdown-menu>li>a:hover{
            background: rgba(0,0,0,.1);
        }

        /* 在你輸入文字時，他會有提示效果幫我們貼上空白，而空白會變黃色，因此這可以讓空白從黃色改成白色*/
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-animation: autofill 0s forwards;
            animation: autofill 0s forwards;
        }

        @keyframes autofill {
            100% {
                background: #fff;
                color: inherit;
            }
        }

        @-webkit-keyframes autofill {
            100% {
                background: #fff;
                color: inherit;
            }
        }

        .title1-area {
            padding: 50px
        }

        .title1-area {
            height: auto;
            text-align: center;
            padding: 60px 0 0 0;
            overflow: hidden;
            box-sizing: border-box;
            background-color: rgba(0, 0, 0, .7);
        }

        .title1-area .small-title {
            color: #e7b623;
            margin-bottom: 5px;
            font-weight: 100;
            letter-spacing: .06em;
            font-size: 22px;
        }

        .title1-area .big-title {
            position: relative;
            font-weight: 100;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #ffa100 !important;
            font-size: 2em;
            margin-bottom: 50px;
        }

        .title1-area .big-title::before,
        .title1-area .big-title::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: calc((100% - 300px) / 2);
            height: 2px;
            background: rgba(255, 255, 255, .9);
        }

        .title1-area .big-title::before {
            left: 0;
        }

        .title1-area .big-title::after {
            right: 0;
        }

        .title1-area p {
            color: #fff;
            font-size: 1.5em;
            font-family: 標楷體;
            padding: 0 61px;
            text-align: left;
        }

        .block2 {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;

            min-height: 300px;
            background-color: #fff;
        }

        footer{
            background-color: rgba(255, 255, 255, .8);
        }

        .back-to-top {
            background: none;            
            margin: 0;            
            position: fixed;            
            bottom: 0;          
            right: 0;            
            width: 70px;           
            height: 70px;          
            z-index: 100;           
            display: none;           
            text-decoration: none;            
            color: #fff;            
            background-color: transparent;    
        }

        .back-to-top i {
            font-size: 60px;
        }

        .back-to-top:hover , .back-to-top:focus{
            color: #ff4a4a;
        }

        #toTop{
            position: fixed;
            bottom: 10px;
            right: 10px;
            cursor: pointer;
            display: none;
        }

        #toTop{
            font-family: 標楷體;
            font-size: 15px;
            opacity: 0.9;
            background-color: #ff4a4a !important;
            border: none;
            letter-spacing: 0.09em;
        }

        .btn-default{background-color: transparent}
        .btn-default:hover, .btn-default:focus{background-color: transparent}
        .move-btn{
            position: relative;
            left: -15em;
            top: 3px;
            height: 32px;
            background-color: transparent !important;
            padding: 4px 10px 1px 12px !important;
        }

        .form-inline-add{
            position: relative;
            left: -52px;
            top: -1.7em;
            float: right;
        }

        .i-search{
            color: #919191;
            top: 2px;
            left: -8px;
            font-size: 16px;
        }

        .btn1{
            position: absolute;
            left: 72em;
            top: 8.5em;
        }

        .btn1:hover, .btn1:focus{
            padding: 6px 12px;
            background-color: rgba(0,0,0,.8);
        }


        .btn2{
            position: absolute;
            left: 5.3em;
            top: 26.5em;
        }

        .btn2:hover, .btn2:focus{
            padding: 6px 12px;
            background-color: rgba(0,0,0,.8);
        }

        .btn3{
            position: absolute;
            top: -2.5em;
            left: 3em;
        }

        .btn3:hover, .btn3:focus{
            padding: 6px 12px;
            background-color: rgba(0,0,0,.8);
        }

        .img-1{
            position: relative;
            top: -17em;
            left: 23em;
            border-radius: 2%;
            width: 23em;
        }

        .img-1:hover{
            transform: translateY(-10px);
            -webkit-transform: translateY(-10px);
        }

        .img-2{
            width: 33em;
            border-radius: 5%;
            margin-bottom: 2em;
        }

        .search-word{
            position: relative;
            top: -2px;
            padding-left: 2px;
            letter-spacing: 0.06em;
        }

        .btn-4{
            position: relative;
            float: right;
            top: -2.1em;
            left: -3.54em;
        }

    </style>

</head>

<body>


    <button type="button" class="btn btn-4 btn-danger btn-rounded" data-toggle="collapse" data-target="#hidden-search">
        <i class="glyphicon glyphicon-search">
            <span class="search-word">
                搜尋
            </span>
        </i>
    </button>

    <!--Hidden Search-->
    <div id="hidden-search" class="collapse">
        <form class="form-inline form-inline-add" method="GET" action="#">
            <div class="form-group row" id="search">
                <input type="search" name="search" id="search-product" class="form-control" 
                placeholder="搜尋我們的資料與產品" style="width: 15.3em; padding-left: 40px;">
                <a href="#" class="move-btn">
                    <i class="glyphicon glyphicon-search i-search"></i>
                </a>
            </div>
        </form>
    </div>

    <section style="padding-bottom: 30em;">
        <div class="container-fluid bgw load" style="margin-left: 10px; margin-right: 10px;">
            <div class="row">
                <div class="col-md-12" style="padding-top: 9em;">
                    <center>
                        <img id="img-moving" src="userUpload/20180513logo.png" class="center-logo hoverable">
                        <h1 class="title1">
                            茶，每天而更新我們的娛樂
                        </h1>

                        <a class="scroll" href="#link-drop">
                            <img height="28" width="28" src="https://www.thrivingparish.org/wp-content/uploads/2018/01/white-down-arrow-png-2.png">
                        </a>
                    </center>
                </div>
            </div>
    </section>

    <section id="link-drop" class="scroll-1" style="padding-bottom: 15px;">
        <div class="container bgw">
            <div class="row">
                <div class="col-md-12">
                    <div class="title1-area">
                        <h4 class="big-title">
                            品牌介紹
                        </h4>

                        <p class="animated zoomIn" data-animation="zoomIn" style="font-size: 15px;color: #fff">
                            <b style="font-size: 20px; margin-bottom: 10px;letter-spacing: 0.5em">栽種有機茶，突破困境</b>，<br><br>
                            <p class="content-in-block">
                                建國百年女神農 佳芳茶園 『陳麗雪』
                            
                            陳麗雪帶著堅毅的表情說「不改變，就是被淘汰」。身為媳婦，卻毅然將家族茶園轉型有機栽種，面臨親友的質?與經濟壓力，
                            不是一般人所能承受，
                            但陳麗雪卻是硬生生的挺了過來。當別人還不認識有機，對有機不能認可時，她卻堅持做到底，為的是「家」，還有...
                            </p>
                        </p>
                        <a href="#readmore" class="btn btn1 btn-outline-danger btn-rounded waves-effect">閱讀全文</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="link-drop" class="scroll-2" style="padding-bottom: 15px;">
        <div class="container bgw">
            <div class="row">
                <div class="col-md-12">
                    <div class="title1-area" style="overflow: hidden;">
                        <!--我的故事-->
                        <div style="display: block; height: 32em">
                            <h4 class="big-title">
                                主人故事
                            </h4>

                            <div style="display: block; width: 54em">
                                <p class="animated zoomIn" data-animation="zoomIn" style="font-size: 15px;color: #fff">
                                    <p class="content-in-block">
                                            臺東縣卑南鄉陳麗雪女士為專業茶農，
                                            具有學習與創新的精神，積極參與各項合作研發，並配合政府政策推行廠農合作、
                                            落實產銷履歷及安全用藥，推展優質安全茶業，開發茶葉新產品。經營有機茶園，
                                            作為推廣有機農業的示範，進而帶動明峰村朝向有機生態村發展。
                                            參加各種茶葉展示及有機農夫市集活動，行銷臺東茶葉，提高知名度，
                                            開拓茶葉多元行銷通路。推廣休閒農業，結合初鹿休閒農業區，朝向觀光茶園發展。                         
                                    </p>
                                </p>
                            </div>

                            <a href="#">
                                <img class="img-1" class="img-1" src="https://i1.wp.com/taiwan-tea.polomi.taipei/wp-content/uploads/2018/03/about-3.jpg?w=2000">
                            </a>

                            <a href="#readmore" class="btn btn2 btn-outline-danger btn-rounded waves-effect">閱讀全文</a>                    
                        </div>

                        <!--我得獎金-->
                        <div class="row" style="display: block">
                            <div class="col-md-6 col-sm-6">
                                <img id="img-2" class="img-2" src="http://www.taiwan-tea.net/wp-content/uploads/2018/02/brand-1.jpg">
                            </div>

                            <div class="title1-area col-md-6 col-sm-6" style="border-radius: 2%;width: 40em; left: -.5em">
                                <div class="col-sm-12">
                                    <b class="small-title" style="letter-spacing: 0.5em">獲獎事蹟</b>
                                    <p class="content-in-block" style="width: 32em">
                                        <p>膺選89年優秀茶葉產製技術改良農戶</p>
                                        <p>膺選90年模範勞工</p>
                                        <p>榮獲99年台東縣農會優秀有機農業經營農戶</p>
                                        <p>台東縣農會99年度創新農業經營管理獎</p>
                                        <p>榮獲民國99年國家品質保證 金牌獎...</p>
                                    </p>

                                    <a class="btn btn3 btn-outline-danger waves-effect">
                                        Read more...
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--Turns Navbar to transparent background if user scrolled.-->
    <script type="text/javascript">
        //Turns Navbar to transparent background if user scrolled.
        function checkNavPosition() {
            var startYp = $('.navbar').height() * 0.2;
            if ($(window).scrollTop() > startYp) {
                $('.navbar').removeClass("AtTop");
            }
            else {
                $('.navbar').addClass("AtTop");
            }
        }
        //scroll smooth
        var anchor = document.querySelector('a[href="#link-drop"]')
        var target = document.getElementById('link-drop')
        anchor.addEventListener('click', function (e) {
        if (window.scrollTo) {
            e.preventDefault()
            window.scrollTo({'behavior': 'smooth', 'top': target.offsetTop})
        }
        })
        //Only activate function after rendering.
        if ($('.navbar').length > 0) {
            $(window).on("scroll load resize", function () { checkNavPosition(); });
        }

        // jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('.scroll').bind('click', function (event) {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        $('html,body').animate({
                            scrollTop: target.offset().top
                        }, 800);
                        return false;
                    }
                }
            });
        });
    </script>

    <!--back to top-->
    <script type="text/javascript">
        $(document).ready(function(){
            $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span>回到最上頁</div>');
                $(window).scroll(function () {
                    if ($(this).scrollTop() != 0) {
                        $('#toTop').fadeIn();
                    } else {
                        $('#toTop').fadeOut();
                    }
                }); 
            $('#toTop').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 600);
                return false;
            });
        });
    </script>

    <!--scroll-->
    <script type="text/javascript">
        window.sr = ScrollReveal();
        sr.reveal('.nav',{
            duration: 2000,
            origin:'left',
            mobile: true,
        });

        sr.reveal('img',{
            duration: 2500,
            origin:'bottom',
            mobile: true,
            useDelay: 'always'
        });

        sr.reveal('#img-moving',{
            duration: 2500,
            origin:'bottom',
            mobile: true,
            useDelay: 'always'
        });

        sr.reveal('.title1',{
            duration: 3000,
            origin:'bottom',
            mobile: true,
            useDelay: 'always',
            reset: true
        });

        sr.reveal('.scroll-1',{
            duration: 2000,
            origin:'left',
            mobile: true,
            useDelay: 'always',
            reset: true
        });

        sr.reveal('button',{
            duration: 1500,
            origin:'bottom',
            mobile: true,
            useDelay: 'always',
            reset: true
        });

        sr.reveal('.scroll-2',{
            duration: 2000,
            origin:'right',
            mobile: true,
            useDelay: 'always',
            reset: true
        });
    </script>

</body>

</html>