SOURCE

<!-- Page Wrapper -->
<div id="page-wrapper">

    <!-- Header -->
    <header id="header" class="alt">
        <strong> <p style="font-family:FangSong">&nbsp;&nbsp;&nbsp;<a href="${pageContext.request.contextPath}/newProducts">A&P</a></p></strong>
        <nav id="nav">

            <a href="${pageContext.request.contextPath}/client/productHome.jsp">产品汇集中心</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="${pageContext.request.contextPath}/client/registration.jsp">推广登记处</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="${pageContext.request.contextPath}/myAccount">个人中心</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="${pageContext.request.contextPath}/client/carts.jsp">购物车</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a>    <%
                User user = (User) request.getSession().getAttribute("user");
                if(null == user){
            %>
                <a href="${pageContext.request.contextPath}/client/registerLogin.jsp">注册/登录</a>
                <%
                }else{
                %>
                欢迎您， ${user.username}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="${pageContext.request.contextPath}/logout" onclick="javascript:return confirm_logout()">用户退出</a>
                <%
                    }
                %>
            </a>
        </nav>
    </header>

    <!-- Banner -->
    <section id="banner">
        <div class="inner">
            <h2 style="font-family:FangSong;">A&P</h2>
            <p>绿色 天然 健康<br />
                DE 农产品<br />
            </p>
            <ul class="actions">
                <li><a href="#" class="button special">你值得品尝！</a></li>
            </ul>
        </div>
        <a href="#one" class="more scrolly">了解更多</br>⬇</a>
    </section>
</div>



</br >
<!-- one -->
<section id="one" class="wrapper alt style2">
    <center><h2>产品分类</h2></center>
    <section class="spotlight">
        <div class="image"><a href="#"><img src="https://images.pexels.com/photos/4199170/pexels-photo-4199170.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" /></a></div><div class="content">
        <h2>水果<br />
            Fruit</h2>
        <!--<p>水果简介</p>-->

    </div>
    </section>
    <section class="spotlight">
        <div class="image"><a href="#"><img src="https://images.pexels.com/photos/1367243/pexels-photo-1367243.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" /></a></div><div class="content">
        <h2>蔬菜<br />
            Vegetables</h2>
        <!--<p>蔬菜简介</p>-->
    </div>
    </section>
    <section class="spotlight">
        <div class="image"><a href="#"><img src="https://images.pexels.com/photos/2031994/pexels-photo-2031994.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" /></a></div><div class="content">
        <h2>水产品<br />
            aquatic product</h2>
        <!--<p>水产品简介</p>-->
    </div>
    </section>
</section>
</br>
<!-- two-->
<div class="container mt-5" >
    <center><h2>最新产品</h2></center>
    <c:forEach items="${newProductList}" var="newPro">
        <div class="card-columns" style="margin-top:45px;margin-right:48px;padding: 0.75vw;border-radius: 4px;box-shadow:0 10px 40px -10px rgba(0, 0, 0, 1);height:320px;width:320px;margin-left:50px;float:left;text-align:center;" >
            <a class="card card-reveal" href="${pageContext.request.contextPath}/findProductById?id=${newPro.id}" >
                <img class="card-img-top" src="${pageContext.request.contextPath}${newPro.imgurl}"  style="height:265px;width:285px;" />
                <p style="font-size:18px;">${newPro.name}</p>
            </a>

        </div>

    </c:forEach>
</div>


<div class="defilee__outer" style="height:555px;">
    <center><h2>热销产品</h2></center>
    <section id="defilee" class="defilee__ctnr">
        <c:forEach items="${pList }" var="pArray">
            <div class="defilee__div" style="margin-left:120px; width:280px;height:290px;text-align:center;font-family:KaiTi">
                <a href="${pageContext.request.contextPath}/findProductById?id=${pArray[0]}">
                    <img src="${pageContext.request.contextPath }${pArray[2]}" style="width:250px;height:245px;"  border="0" />
                    <p style="font-size:16px;">${pArray[1]}</p>
                </a>

            </div>
        </c:forEach>
    </section>
</div>






</br>
<!-- End of Hire me Area -->
<!-- CTA -->
<section id="cta" class="wrapper style4">
    <!--<div class="inner">-->
    <div>
        <header>
            <center>	<h2>低头或便利</h2>
                <p>没有专属ID 点击注册账号开启新视野！</br>若已登录  点击产品汇集大本营查看更多！</p>
            </center>
        </header>

    </div>
    <div>	<ul class="actions vertical">
        <li><a href="${pageContext.request.contextPath}/client/registerLogin.jsp" class="button fit special">注册账号</a></li>
        <li><a href="${pageContext.request.contextPath}/client/productHome.jsp" class="button fit">产品汇集大本营</a></li>
    </ul></div>
</section>

<!-- Footer -->
</br>
<center>
    <strong> <p style="font-family:FangSong">&nbsp;&nbsp;&nbsp;<a href="${pageContext.request.contextPath}/newProducts">A&P</a></p></strong>

</center>

        body{
            font-family:KaiTi;
            background:white;
        }
        a{
            color:black;
            text-decoration:none;

        }
        a:hover{
            color:black;
            text-decoration:none;
        }

        a:link{
            color:black;
            text-decoration:none;

        }
        a:visited{
            color:black;
            text-decoration:none;
        }

        a:active{
            color:black;
            text-decoration:none;
        }

        /* Reset */

        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }

        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            display: block;
        }

        body {
            line-height: 1;

        }
        ol, ul {
            list-style: none;
        }

        blockquote, q {
            quotes: none;
        }

        blockquote:before, blockquote:after, q:before, q:after {
            content: '';
            content: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        body {
            -webkit-text-size-adjust: none;
        }
        /* Box Model */

        *, *:before, *:after {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        /* Basic */
        body.is-loading *, body.is-loading *:before, body.is-loading *:after {
            -moz-animation: none !important;
            -webkit-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
            -moz-transition: none !important;
            -webkit-transition: none !important;
            -ms-transition: none !important;
            transition: none !important;
        }
        body, input, select, textarea {
            /*color: #fff;*/
            /* font-family: "Open Sans", Helvetica, sans-serif;*/
            font-family: KaiTi;

            font-size: 20px;
            font-weight: 400;
            letter-spacing: 0.075em;
            line-height: 1.65em;
        }
        a {
            -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
            -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
            -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
            transition: color 0.2s ease, border-bottom-color 0.2s ease;
            /* border-bottom: dotted 1px;*/
            color: inherit;
            text-decoration: none;
        }

        a:hover {
            border-bottom-color: transparent;
        }

        strong, b {
            /*	color: #fff;*/
            font-weight: 600;
        }

        em, i {
            font-style: italic;
        }

        p {
            margin: 0 0 2em 0;
        }

        h1, h2, h3, h4, h5, h6 {
            /*color: #fff;*/
            font-weight: 800;
            letter-spacing: 0.225em;
            line-height: 1em;
            margin: 0 0 1em 0;
            text-transform: uppercase;
        }

        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
            color: inherit;
            text-decoration: none;
        }

        h2 {
            font-size: 1.35em;
            line-height: 1.75em;
        }

        h3 {
            font-size: 1.15em;
            line-height: 1.75em;
        }



        h4 {
            font-size: 1em;
            line-height: 1.5em;
        }

        h5 {
            font-size: 0.8em;
            line-height: 1.5em;
        }

        h6 {
            font-size: 0.7em;
            line-height: 1.5em;
        }

        sub {
            font-size: 0.8em;
            position: relative;
            top: 0.5em;
        }

        sup {
            font-size: 0.8em;
            position: relative;
            top: -0.5em;
        }

        hr {
            border: 0;
            border-bottom: solid 2px #fff;
            margin: 3em 0;
        }


        blockquote {
            border-left: solid 4px #fff;
            font-style: italic;
            margin: 0 0 2em 0;
            padding: 0.5em 0 0.5em 2em;
        }

        code {
            /*	background: rgba(144, 144, 144, 0.25);*/
            border-radius: 3px;
            font-family: "Courier New", monospace;
            font-size: 0.9em;
            letter-spacing: 0;
            margin: 0 0.25em;
            padding: 0.25em 0.65em;
        }

        pre {
            -webkit-overflow-scrolling: touch;
            font-family: "Courier New", monospace;
            font-size: 0.9em;
            margin: 0 0 2em 0;
        }

        pre code {
            display: block;
            line-height: 1.75em;
            padding: 1em 1.5em;
            overflow-x: auto;
        }

        /* Box */

        .box > :last-child,
        .box > :last-child > :last-child,
        .box > :last-child > :last-child > :last-child {
            margin-bottom: 0;
        }

        /* Image */

        .image {
            border-radius: 3px;
            border: 0;
            display: inline-block;
            position: relative;
        }

        .image img {
            border-radius: 3px;
            display: block;
        }


        .image.left img, .image.right img {
            width: 100%;
        }

        .image.fit {
            display: block;
            margin: 0 0 2em 0;
            width: 100%;
        }

        .image.fit img {
            width: 100%;
        }

        /* Button */

        input[type="submit"],
        input[type="reset"],
        input[type="button"],
        button,
        .button {
            -moz-appearance: none;
            -webkit-appearance: none;
            -ms-appearance: none;
            appearance: none;
            -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            background-color: transparent;
            border-radius: 3px;
            border: 0;
            /*box-shadow: inset 0 0 0 2px #fff;*/
            box-shadow: inset 0 0 0 2px black;
            /*	color: #fff;*/
            cursor: pointer;
            display: inline-block;
            font-size: 0.8em;
            font-weight: 600;
            height: 3.125em;
            letter-spacing: 0.225em;
            line-height: 3.125em;
            padding: 0 2.75em;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }




        input[type="submit"].fit,
        input[type="reset"].fit,
        input[type="button"].fit,
        button.fit,
        .button.fit {
            display: block;
            margin: 0 0 1em 0;
            width: 100%;
        }

            /* Spotlight */

        .spotlight {
            -moz-align-items: center;
            -webkit-align-items: center;
            -ms-align-items: center;
            align-items: center;
            display: -moz-flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
        }

        .spotlight .image {
            -moz-order: 1;
            -webkit-order: 1;
            -ms-order: 1;
            order: 1;
            border-radius: 0;
            width: 40%;
        }

        .spotlight .image img {
            border-radius: 0;
            width: 100%;
        }

        .spotlight .content {
            padding: 2em 4em 0.1em 4em ;
            -moz-order: 2;
            -webkit-order: 2;
            -ms-order: 2;
            order: 2;
            max-width: 48em;
            width: 60%;
        }

        .spotlight:nth-child(2n) {
            -moz-flex-direction: row-reverse;
            -webkit-flex-direction: row-reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
        }

        .spotlight .content {
            width: 55%;
        }

        .spotlight br {
            display: none;
        }

        .spotlight .image {
            width: 100%;
        }

        .spotlight .content {
            padding: 4em 3em 2em 3em ;
            max-width: none;
            text-align: center;
            width: 100%;
        }

        /* Header */

        #header {
            -moz-transition: background-color 0.2s ease;
            -webkit-transition: background-color 0.2s ease;
            -ms-transition: background-color 0.2s ease;
            transition: background-color 0.2s ease;
            /*	background: #2e3842;*/
            height: 3em;
            left: 0;
            line-height: 3em;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 10000;
            background:white;
        }

        #header h1 {
            -moz-transition: opacity 0.2s ease;
            -webkit-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
            transition: opacity 0.2s ease;
            height: inherit;
            left: 1.25em;
            line-height: inherit;
            position: absolute;
            top: 0;
        }

        #header h1 a {
            border: 0;
            display: block;
            height: inherit;
            line-height: inherit;
        }

        #header nav {
            height: inherit;
            line-height: inherit;
            position: absolute;
            right: 0;
            top: 0;
        }

        #header.alt {
            background: transparent;
        }

        #header.alt p {
            font-family: KaiTi;
            -moz-pointer-events: none;
            -webkit-pointer-events: none;
            -ms-pointer-events: none;
            pointer-events: none;
            opacity: 0;
        }

        /* Banner */

        #banner {
            display: -moz-flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            -moz-flex-direction: column;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -moz-justify-content: center;
            -webkit-justify-content: center;
            -ms-justify-content: center;
            justify-content: center;
            cursor: default;
            /* height: 100vh;
             min-height: 35em;*/
            height:100vh;
            min-height:25em;
            overflow: hidden;
            position: relative;
            text-align: center;
            /* background-image:url("https://images.pexels.com/photos/912413/pexels-photo-912413.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500");*/

        }

        #banner h2 {
            -moz-transform: scale(1);
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
            display: inline-block;
            font-size: 1.75em;
            opacity: 1;
            /* padding: 0.35em 1em;*/
            position: relative;
            z-index: 1;
        }

        #banner h2:before, #banner h2:after {
            -moz-transition: width 0.85s ease;
            -webkit-transition: width 0.85s ease;
            -ms-transition: width 0.85s ease;
            transition: width 0.85s ease;
            -moz-transition-delay: 0.25s;
            -webkit-transition-delay: 0.25s;
            -ms-transition-delay: 0.25s;
            transition-delay: 0.25s;
            /*background: #fff;*/
            background:black;
            content: '';
            display: block;
            height: 2px;
            position: absolute;
            width: 100%;
        }

        #banner h2:before {
            top: 0;
            left: 0;
        }

        #banner h2:after {
            bottom: 0;
            right: 0;
        }

        #banner p {
            letter-spacing: 0.225em;
            text-transform: uppercase;
        }

        #banner p a {
            color: inherit;

        }

        #banner .more {
            -moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
            -webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
            -ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
            transition: transform 0.75s ease, opacity 0.75s ease;
            -moz-transition-delay: 3.5s;
            -webkit-transition-delay: 3.5s;
            -ms-transition-delay: 3.5s;
            transition-delay: 3.5s;
            -moz-transform: translateY(0);
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
            border: none;
            bottom: 0;
            color: inherit;
            font-size: 0.8em;
            height: 8.5em;
            left: 50%;
            letter-spacing: 0.225em;
            margin-left: -8.5em;
            opacity: 1;
            outline: 0;
            padding-left: 0.225em;
            position: absolute;
            text-align: center;
            text-transform: uppercase;
            width: 16em;
            z-index: 1;
        }

        #banner .more:after {

            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            bottom: 4em;
            content: '';
            display: block;
            height: 1.5em;
            left: 50%;
            margin: 0 0 0 -0.75em;
            position: absolute;
            width: 1.5em;
        }

        #banner:after {
            -moz-pointer-events: none;
            -webkit-pointer-events: none;
            -ms-pointer-events: none;
            pointer-events: none;
            -moz-transition: opacity 3s ease-in-out;
            -webkit-transition: opacity 3s ease-in-out;
            -ms-transition: opacity 3s ease-in-out;
            transition: opacity 3s ease-in-out;
            -moz-transition-delay: 1.25s;
            -webkit-transition-delay: 1.25s;
            -ms-transition-delay: 1.25s;
            transition-delay: 1.25s;
            content: '';
            /*background: #2e3842;*/
            background:white;
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        body.is-loading #banner h2 {
            -moz-transform: scale(0.95);
            -webkit-transform: scale(0.95);
            -ms-transform: scale(0.95);
            transform: scale(0.95);
            opacity: 0;
        }

        body.is-loading #banner h2:before, body.is-loading #banner h2:after {
            width: 0;
        }

        body.is-loading #banner .more {
            -moz-transform: translateY(8.5em);
            -webkit-transform: translateY(8.5em);
            -ms-transform: translateY(8.5em);
            transform: translateY(8.5em);
            opacity: 0;
        }

        body.is-loading #banner:after {
            opacity: 1;
        }

        /* Footer */

        #footer .copyright li {
            border-left: solid 1px rgba(255, 255, 255, 0.5);
            display: inline-block;
            line-height: 1em;
            margin-left: 1em;
            padding-left: 1em;
        }

        #footer .copyright li:first-child {
            border-left: 0;
            margin-left: 0;
            padding-left: 0;
        }


        .defilee__outer {
            height:88vh;
            width: 100%;
            /*height: 100vh;
            max-height: 100vh;*/
            display: -webkit-box;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-perspective: 0.5px;
            perspective: 0.5px;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            overflow: hidden;
        }

        .defilee__ctnr {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            display: -webkit-inline-box;
            display: inline-flex;
            -webkit-box-align: center;
            align-items: center;
            margin: 0 auto;
        }

        .defilee__div {
            position: relative;
            -webkit-transform: translateZ(-0.1px) scale(1.4) translateX(30px) translateY(5vh);
            transform: translateZ(-0.1px) scale(1.4) translateX(30px) translateY(5vh);
        }
        .defilee__div:not(.defilee__div--text) {
            width: 25vw;
            margin: 0 5vw;
            background: white;
            padding: 0.75vw;
            border-radius: 4px;
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 1);

        }
        .defilee__div--text {
            margin: 0 0 0 10vw;
            -webkit-transform: translateZ(-0.25px) scale(1.4) translateX(60px) translateY(-5vh);
            transform: translateZ(-0.25px) scale(1.4) translateX(60px) translateY(-5vh);
            -webkit-animation: zoom infinite 1s;
            animation: zoom infinite 1s;
        }

        .defilee__ctnr {
            -webkit-transform: translate3d(-10%, 0, 0);
            transform: translate3d(-10%, 0, 0);
            will-change: transform;
            -webkit-animation: slide 25s 0.7s linear infinite;
            animation: slide 25s 0.7s linear infinite;
        }
        @-webkit-keyframes slide {
            100% {
                -webkit-transform: translate3d(-60%, 0, 0);
                transform: translate3d(-60%, 0, 0);
            }
        }
        @keyframes slide {
            100% {
                -webkit-transform: translate3d(-60%, 0, 0);
                transform: translate3d(-60%, 0, 0);
            }
        }

        @-webkit-keyframes vertical {
            50% {
                -webkit-transform: translateZ(-0.25px) scale(1.6) translateX(-0.3vw)
                translateY(-5vh);
                transform: translateZ(-0.25px) scale(1.6) translateX(-0.3vw)
                translateY(-5vh);
            }
        }
        @keyframes vertical {
            50% {
                -webkit-transform: translateZ(-0.25px) scale(1.6) translateX(-0.3vw)
                translateY(-5vh);
                transform: translateZ(-0.25px) scale(1.6) translateX(-0.3vw)
                translateY(-5vh);
            }
        }

        @-webkit-keyframes zoom {
            50% {
                -webkit-transform: translateZ(-0.25px) scale(1.5) translateX(60px) translateY(-5vh);
                transform: translateZ(-0.25px) scale(1.5) translateX(60px) translateY(-5vh);
            }
        }

        @keyframes zoom {
            50% {
                -webkit-transform: translateZ(-0.25px) scale(1.5) translateX(60px) translateY(-5vh);
                transform: translateZ(-0.25px) scale(1.5) translateX(60px) translateY(-5vh);
            }
        }

        img {
            width: 100%;
            margin-bottom: 0.75vw;

        }

        /*最新产品*/

        .card{
            overflow:hidden;
        }

        @media (min-width: 992px) {

            .card-reveal .card-img-top {
                -webkit-transition: -webkit-transform .5s ease-in-out;
                transition: -webkit-transform .5s ease-in-out;
                transition: transform .5s ease-in-out;
                transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
            }

            .card-reveal:hover .card-img-top {
                -webkit-transform: scale(1.3);
                transform: scale(1.3);
            }
        }

        @media (min-width: 576px) and (max-width: 1199.98px) {
            .card-columns {
                -webkit-column-count: 2;
                -moz-column-count: 2;
                column-count: 2;
            }
        }