index

mail@pastecode.io avatar
unknown
plain_text
a year ago
13 kB
1
Indexable
Never
<%-- 
    Document   : index
    Created on : Aug 13, 2023, 8:03:56 PM
    Author     : MSI GTX
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />
        <script src="https://kit.fontawesome.com/e6d66f1665.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    </head>
    <body>
        <style>
            body{
                background-image: url(https://i.pinimg.com/236x/25/85/51/258551fec542dea27fcb24dbedbd60ee.jpg);
                background-size: cover;
                background-repeat: no-repeat;
                background-attachment: fixed;
                width: 100%;
            }

            .menu {
                display: flex;
                background-color: #000077;

            }
            .icon-menu h5 {
                color: white;
            }
            .icon-menu {
                text-align: center;
                padding-left: 60px;
            }
            .btn-group{
                padding-left: 50px;
                padding-right: 650px;
            }
            .material-symbols-rounded {
                float: right;
                padding: 20px;
            }
            .collapse{
                background-color: white;
                color: aqua;
            }
            .search{
                text-align: center;
                display: flex;
            }
            /* phần nội dung*/
            .shop-container {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 10px;
            }

            .col-inner {
                position: relative;
                background-color: #fafafa;
                margin: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                float: right;
                -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .3);
                box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .3);
                overflow: hidden;
                width: 85%;
                text-align: center;
                padding: 10px;
            }

            .image_fade_in_back img {
                max-width: 100%;
                margin: 0 auto;
                display: inline-block;
                vertical-align: middle;
            }

            .product-title a {
                font-size: 20px;
                color: #000;
                text-decoration: none;
                margin-bottom: 10px;
            }

            .price {
                color: red;
                font-size: 20px;
            }

            .add-to-cart-button {
                margin-top: 20px;
            }

            .add-to-cart-button a {
                font-size: 20px;
                text-decoration: none;
                color: white;
                border: 4px solid red;
                background-color: red;
            }
        </style>


        <div class="menu">
            <div class="icon-menu">
                <img src="https://i.pinimg.com/236x/66/b0/1b/66b01b05d0f8b75c6fb242b237ad5357.jpg" width="50px">
                <h5>Shop Flower</h5>
            </div>
            <div class="btn-group">
                <button id="dropdownButton" class="btn btn-secondary btn-lg dropdown-toggle" style="background-color: blue;"
                        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="material-symbols-rounded" style="width: 50px; color: aquamarine;">
                        yard
                    </span>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Rose</a>
                    <a class="dropdown-item" href="#">Tulips</a>
                    <a class="dropdown-item" href="#">Sunflower</a>
                    <a class="dropdown-item" href="#">Wax flower</a>
                    <a class="dropdown-item" href="#">Flower basket</a>
                    <a class="dropdown-item" href="#">Hydrangea</a>
                    <a class="dropdown-item" href="#">Loss of form</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" style="color: white; background-color: red;" href="#">Sale</a>
                </div>
            </div>
            <div class="search">
                <form method="post" action="">
                    <input type="text" name="keyword" placeholder="Enter Flower...">
                    <button type="submit">Search</button>
                </form>
            </div>
            <span class="material-symbols-rounded">
                <a href="#">favorite</a>
            </span>
            <span class="material-symbols-rounded">
                <a href="login.jsp">passkey</a>
            </span>
            <span class="material-symbols-rounded">
                <a href="#">shopping_cart</a>
            </span>
        </div>

        <div  class="shop-container">
            <div class="products row row-small large-columns-6 medium-columns-3 small-columns-2 equalize-box center-align">
                <div class="flower">
                    <div class="col-inner">
                        <div class="box-image">
                            <div class="image_fade_in_back">   
                                <img src="https://i.pinimg.com/236x/a3/42/e6/a342e641dba35c2145166fb5f95b9c9a.jpg" width="250" height="250" alt="image product">
                            </div>
                            <div class="box-text">
                                <div class="title-wrapper">
                                    <p class="product-title" style="height: 31px;"><a href="">Hoa Hồng</a></p>
                                </div>

                                <div class="price-wrapper" style="height: 19px;">
                                    <span class="price">100.000₫</span>
                                </div>
                                <div type="button" class="add-to-cart-button" style="height: 49px;" ><a href="">Mua hàng</a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flower">
                    <div class="col-inner">
                        <div class="box-image">
                            <div class="image_fade_in_back">   
                                <img src="https://i.pinimg.com/564x/1a/41/32/1a4132e2bf30c8ba2063c18f7bfcd9ef.jpg" width="250" height="250" alt="image product">
                            </div>
                            <div class="box-text">
                                <div class="title-wrapper">
                                    <p class="product-title" style="height: 31px;"><a href="">Hoa Hồng</a></p>
                                </div>

                                <div class="price-wrapper" style="height: 19px;">
                                    <span class="price">100.000₫</span>
                                </div>
                                <div type="button" class="add-to-cart-button" style="height: 49px;" ><a href="">Mua hàng</a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flower">
                    <div class="col-inner">
                        <div class="box-image">
                            <div class="image_fade_in_back">   
                                <img src="https://i.pinimg.com/236x/62/2c/a5/622ca558aadf7a5a3cca84dff9580e02.jpg" width="250" height="250" alt="image product">
                            </div>
                            <div class="box-text">
                                <div class="title-wrapper">
                                    <p class="product-title" style="height: 31px;"><a href="">Hoa Hồng</a></p>
                                </div>

                                <div class="price-wrapper" style="height: 19px;">
                                    <span class="price">100.000₫</span>
                                </div>
                                <div type="button" class="add-to-cart-button" style="height: 49px;" ><a href="">Mua hàng</a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flower">
                    <div class="col-inner">
                        <div class="box-image">
                            <div class="image_fade_in_back">   
                                <img src="https://i.pinimg.com/236x/f9/38/93/f93893e7161e397dddd1b7e0dd1ae6f6.jpg" width="250" height="250" alt="image product">
                            </div>
                            <div class="box-text">
                                <div class="title-wrapper">
                                    <p class="product-title" style="height: 31px;"><a href="">Hoa Hồng</a></p>
                                </div>

                                <div class="price-wrapper" style="height: 19px;">
                                    <span class="price">100.000₫</span>
                                </div>
                                <div type="button" class="add-to-cart-button" style="height: 49px;" ><a href="">Mua hàng</a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flower">
                    <div class="col-inner">
                        <div class="box-image">
                            <div class="image_fade_in_back">   
                                <img src="https://i.pinimg.com/236x/37/7d/ac/377dacc88d99cd843b39ebf14191aa77.jpg" width="250" height="250" alt="image product">
                            </div>
                            <div class="box-text">
                                <div class="title-wrapper">
                                    <p class="product-title" style="height: 31px;"><a href="">Hoa Hồng</a></p>
                                </div>

                                <div class="price-wrapper" style="height: 19px;">
                                    <span class="price">100.000₫</span>
                                </div>
                                <div type="button" class="add-to-cart-button" style="height: 49px;" ><a href="">Mua hàng</a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flower">
                    <div class="col-inner">
                        <div class="box-image">
                            <div class="image_fade_in_back">   
                                <img src="https://i.pinimg.com/236x/77/dc/f7/77dcf76ac8826f69adc9dc92d6033e0a.jpg" width="250" height="250" alt="image product">
                            </div>
                            <div class="box-text">
                                <div class="title-wrapper">
                                    <p class="product-title" style="height: 31px;"><a href="">Hoa Hồng</a></p>
                                </div>

                                <div class="price-wrapper" style="height: 19px;">
                                    <span class="price">100.000₫</span>
                                </div>
                                <div type="button" class="add-to-cart-button" style="height: 49px;" ><a href="">Mua hàng</a></div>
                            </div>
                        </div>
                    </div>
                </div>










            </div>
        </div>




        <script>
            const dropdownButton = document.getElementById("dropdownButton");
            const dropdownMenu = document.querySelector(".dropdown-menu");

            dropdownButton.addEventListener("click", function () {
                dropdownMenu.classList.toggle("show");
            });

            document.addEventListener("click", function (event) {
                if (!dropdownButton.contains(event.target)) {
                    dropdownMenu.classList.remove("show");
                }
            });

        </script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </body>
</html>