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>