index
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>