Compare commits
10 commits
df6cb6a236
...
dd39f6fa38
| Author | SHA1 | Date | |
|---|---|---|---|
| dd39f6fa38 | |||
| de35800228 | |||
| a8dc2ffbba | |||
| 7fdb1633d6 | |||
|
2ae67844fd | ||
|
|
40ee1218bf | ||
|
|
1c9381d70e | ||
|
|
355e4db147 | ||
|
|
f68466c429 | ||
|
|
e8db22c696 |
78 changed files with 7393 additions and 15400 deletions
9
.gitignore
vendored
9
.gitignore
vendored
|
|
@ -1,9 +0,0 @@
|
|||
movie_app/images/*
|
||||
movie_app/play_*/*
|
||||
ecommerce/gym_items_website/images/*
|
||||
ecommerce/flora_website/images/*
|
||||
restaurant_website/images/*
|
||||
ecommerce/furniture_website/images/*
|
||||
ecommerce/fashion_website/images/*
|
||||
ecommerce/fashion_website/pages/images*
|
||||
donation_website/images*
|
||||
4
bakery_website/.gitignore
vendored
Normal file
4
bakery_website/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.env
|
||||
node_modules/*
|
||||
public/images/*
|
||||
public/video/*
|
||||
1881
bakery_website/package-lock.json
generated
Executable file
1881
bakery_website/package-lock.json
generated
Executable file
File diff suppressed because it is too large
Load diff
21
bakery_website/package.json
Executable file
21
bakery_website/package.json
Executable file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "bakery_website",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "nodemon server.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"dotenv": "^16.3.1",
|
||||
"express.js": "^1.0.0",
|
||||
"stripe": "^14.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.4"
|
||||
}
|
||||
}
|
||||
60
bakery_website/public/about.html
Executable file
60
bakery_website/public/about.html
Executable file
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>About | Sweet Bake - European style Bakery</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/home-logo.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="brand" id="brand-1">Sweet Bake</a>
|
||||
<div class="menu-btn"></div>
|
||||
<div class="nav">
|
||||
<div class="nav-items" id="nav-items-1">
|
||||
<a href="menu.html">Order online</a>
|
||||
<a href="gallery.html">Gallery</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!------------ about page ------------>
|
||||
<div class="about">
|
||||
<div class="main-about">
|
||||
<img src="images/about.png" alt="">
|
||||
<div class="all-text">
|
||||
<h4>About</h4>
|
||||
<h2>Sweet Bake</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-4">
|
||||
<h3>Sweet Bake</h3>
|
||||
<div class="con-4-social">
|
||||
<a href="#"><i class='bx bxl-facebook'></i></a>
|
||||
<a href="#"><i class='bx bxl-instagram' ></i></a>
|
||||
<a href="#"><i class='bx bx-mail-send'></i></a>
|
||||
<a href="#"><i class='bx bx-phone' ></i></a>
|
||||
</div>
|
||||
<div class="con-text-4">
|
||||
<a href="#">Policy</a>
|
||||
<a href="#">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
<!------------ footer ------------>
|
||||
<footer>
|
||||
<p>© 2023 All Right Reserved</p>
|
||||
</footer>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
17
bakery_website/public/cart.js
Executable file
17
bakery_website/public/cart.js
Executable file
|
|
@ -0,0 +1,17 @@
|
|||
const payBtn = document.querySelector('.btn-buy');
|
||||
|
||||
payBtn.addEventListener('click',() => {
|
||||
fetch('/stripe-checkout', {
|
||||
method: 'post',
|
||||
headers: new Headers({'Content-Type': 'application/Json'}),
|
||||
body: JSON.stringify({
|
||||
items: JSON.parse(localStorage.getItem('cartItems')),
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((url) => {
|
||||
location.href = url;
|
||||
clearCart();
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
});
|
||||
111
bakery_website/public/contact.html
Executable file
111
bakery_website/public/contact.html
Executable file
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact Us | Sweet Bake - European style Bakery</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/home-logo.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="brand" id="brand-1">Sweet Bake</a>
|
||||
<div class="menu-btn"></div>
|
||||
<div class="nav">
|
||||
<div class="nav-items" id="nav-items-1">
|
||||
<a href="menu.html">Order online</a>
|
||||
<a href="gallery.html">Gallery</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!------------ contact page ------------>
|
||||
<div class="contact-form">
|
||||
<div class="contact-title">
|
||||
<h2>Contact Us</h2>
|
||||
</div>
|
||||
<div class="contact-box">
|
||||
<div class="contact form">
|
||||
<p>Delivery: <span>We do not deliver, all order are in-house pickup.</span></p>
|
||||
<p>Cake Design: <span>We can do color changes and topping changes for cakes, but we do not stray from our original cake designs</span></p>
|
||||
<form>
|
||||
<div class="formbox">
|
||||
<div class="row">
|
||||
<div class="inputbox">
|
||||
<span>First Name</span>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="inputbox">
|
||||
<span>Last Name</span>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="inputbox">
|
||||
<span>Email</span>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="inputbox">
|
||||
<span>Phone Number</span>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row1">
|
||||
<div class="inputbox">
|
||||
<span>Message</span>
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row1">
|
||||
<div class="inputbox">
|
||||
<input type="submit" value="Send">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="contact info">
|
||||
<h3>Hours/Location/Number </h3>
|
||||
<div class="infobox">
|
||||
<div>
|
||||
<p>Monday - Saturday 10:00am - 4:00pm</p>
|
||||
<p>Sundays 11:00am - 4:00pm</p>
|
||||
<p>1234 N Lincoln Park W <br>Chicago, IL 606060</p>
|
||||
<p>(123) 456-7890</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact map">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2968.658151457756!2d-87.63621522350827!3d41.921706962682066!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880fd36b093a9a07%3A0x940cc06f90294db!2sLincoln%20Park%20Zoo!5e0!3m2!1sth!2sus!4v1703708663155!5m2!1sth!2sus" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-4">
|
||||
<h3>Sweet Bake</h3>
|
||||
<div class="con-4-social">
|
||||
<a href="#"><i class='bx bxl-facebook'></i></a>
|
||||
<a href="#"><i class='bx bxl-instagram' ></i></a>
|
||||
<a href="#"><i class='bx bx-mail-send'></i></a>
|
||||
<a href="#"><i class='bx bx-phone' ></i></a>
|
||||
</div>
|
||||
<div class="con-text-4">
|
||||
<a href="#">Policy</a>
|
||||
<a href="#">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
<!------------ footer ------------>
|
||||
<footer>
|
||||
<p>© 2023 All Right Reserved</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
177
bakery_website/public/extension.js
Executable file
177
bakery_website/public/extension.js
Executable file
|
|
@ -0,0 +1,177 @@
|
|||
//shopping-cart
|
||||
let cartIcon = document.querySelector('#cart-icon');
|
||||
let cart = document.querySelector('.cart');
|
||||
let closeCart = document.querySelector('#close-cart');
|
||||
|
||||
cartIcon.onclick = () =>{
|
||||
cart.classList.add("active");
|
||||
};
|
||||
closeCart.onclick = () =>{
|
||||
cart.classList.remove("active");
|
||||
};
|
||||
|
||||
//-------------------- add/remove items from the cart --------------------
|
||||
if (document.readyState == 'loading'){
|
||||
document.addEventListener('DOMContentLoaded', ready);
|
||||
}
|
||||
else{
|
||||
ready();
|
||||
}
|
||||
function ready(){
|
||||
//remove item from the cart
|
||||
var removeCartBtn = document.getElementsByClassName('cart-remove');
|
||||
for(var i = 0; i < removeCartBtn.length; i++){
|
||||
var button = removeCartBtn[i];
|
||||
button.addEventListener('click', removeCartItem);
|
||||
}
|
||||
//quantity
|
||||
var quantityInput = document.getElementsByClassName('cart-quantity');
|
||||
for(var i = 0; i < quantityInput.length; i++){
|
||||
var input = quantityInput[i];
|
||||
input.addEventListener('change', quantityChange);
|
||||
}
|
||||
//add cart
|
||||
var addCart = document.getElementsByClassName('add-cart');
|
||||
for(var i = 0; i < addCart.length; i++){
|
||||
var button = addCart[i];
|
||||
button.addEventListener('click', addCartClick);
|
||||
}
|
||||
loadCartItems();
|
||||
}
|
||||
//remove item
|
||||
function removeCartItem(event){
|
||||
var buttonClicked = event.target;
|
||||
buttonClicked.parentElement.remove();
|
||||
updateTotal();
|
||||
saveCartItem();
|
||||
}
|
||||
//quantity change
|
||||
function quantityChange(event){
|
||||
var input = event.target;
|
||||
if(isNaN(input.value) || input.value <= 0){
|
||||
input.value = 1;
|
||||
}
|
||||
updateTotal();
|
||||
saveCartItem();
|
||||
updateCartIcon();
|
||||
}
|
||||
//add item to cart
|
||||
function addCartClick(event){
|
||||
var button = event.target;
|
||||
var shopProduct = button.parentElement;
|
||||
var title = shopProduct.getElementsByClassName('product-title')[0].innerText;
|
||||
var price = shopProduct.getElementsByClassName('price')[0].innerText;
|
||||
var productImg = shopProduct.getElementsByClassName('product-img')[0].src;
|
||||
addProductToCart(title, price, productImg);
|
||||
updateTotal();
|
||||
saveCartItem();
|
||||
updateCartIcon();
|
||||
}
|
||||
function addProductToCart(title, price, productImg){
|
||||
var cartShopBox = document.createElement('div');
|
||||
cartShopBox.classList.add('cart-box');
|
||||
var cartItems = document.getElementsByClassName('cart-content')[0];
|
||||
var cartItemName = cartItems.getElementsByClassName('cart-product-title');
|
||||
for (var i = 0; i < cartItemName.length; i++){
|
||||
if (cartItemName[i].innerText == title){
|
||||
alert('You have already added this item to your cart');
|
||||
return;
|
||||
}
|
||||
}
|
||||
var cartBoxContent = ` <img src= "${productImg}" alt="" class="cart-img"/>
|
||||
<div class="detail-box">
|
||||
<div class="cart-product-title">${title}</div>
|
||||
<div class="cart-price">${price}</div>
|
||||
<input type="number" name="" id="" value="1" class="cart-quantity">
|
||||
</div>
|
||||
<i class='bx bxs-trash cart-remove'></i>`;
|
||||
cartShopBox.innerHTML = cartBoxContent;
|
||||
cartItems.append(cartShopBox);
|
||||
cartShopBox.getElementsByClassName('cart-remove')[0].addEventListener('click', removeCartItem);
|
||||
cartShopBox.getElementsByClassName('cart-quantity')[0].addEventListener('change', quantityChange);
|
||||
saveCartItem();
|
||||
updateCartIcon();
|
||||
}
|
||||
//price total
|
||||
function updateTotal(){
|
||||
var cartContent = document.getElementsByClassName('cart-content')[0];
|
||||
var cartBoxes = cartContent.getElementsByClassName('cart-box');
|
||||
var total =0;
|
||||
for(var i = 0; i < cartBoxes.length; i++){
|
||||
var cartBox = cartBoxes[i];
|
||||
var priceElement = cartBox.getElementsByClassName('cart-price')[0];
|
||||
var quantityElement = cartBox.getElementsByClassName('cart-quantity')[0];
|
||||
var price = parseFloat(priceElement.innerText.replace('$', ''))
|
||||
var quantity = quantityElement.value;
|
||||
total += price*quantity;
|
||||
}
|
||||
total = Math.round(total * 100)/100;
|
||||
document.getElementsByClassName('total-price')[0].innerText = '$' + total;
|
||||
//save total
|
||||
localStorage.setItem('cartTotal', total);
|
||||
}
|
||||
//item in cart
|
||||
function saveCartItem(){
|
||||
var cartContent = document.getElementsByClassName('cart-content')[0];
|
||||
var cartBoxes = cartContent.getElementsByClassName('cart-box');
|
||||
var cartItems = [];
|
||||
|
||||
for (var i = 0; i < cartBoxes.length; i++){
|
||||
cartBox = cartBoxes[i];
|
||||
var titleElement = cartBox.getElementsByClassName('cart-product-title')[0];
|
||||
var priceElement = cart.getElementsByClassName('cart-price')[0];
|
||||
var quantityElement = cartBox.getElementsByClassName('cart-quantity')[0];
|
||||
var productImg = cartBox.getElementsByClassName('cart-img')[0].src;
|
||||
|
||||
var item = {
|
||||
title: titleElement.innerText,
|
||||
price: priceElement.innerText,
|
||||
quantity: quantityElement.value,
|
||||
productImg: productImg,
|
||||
};
|
||||
cartItems.push(item);
|
||||
}
|
||||
localStorage.setItem('cartItems', JSON.stringify(cartItems));
|
||||
}
|
||||
//load in cart
|
||||
function loadCartItems(){
|
||||
var cartItems = localStorage.getItem('cartItems');
|
||||
if (cartItems){
|
||||
cartItems = JSON.parse(cartItems);
|
||||
|
||||
for (var i = 0; i < cartItems.length; i++){
|
||||
var item = cartItems[i];
|
||||
addProductToCart(item.title, item.price, item.productImg);
|
||||
|
||||
var cartBoxes = document.getElementsByClassName('cart-box');
|
||||
var cartBox = cartBoxes[cartBoxes.length - 1];
|
||||
var quantityElement = cartBox.getElementsByClassName('cart-quantity')[0];
|
||||
quantityElement.value = item.quantity;
|
||||
}
|
||||
}
|
||||
var cartTotal = localStorage.getItem('cartTotal');
|
||||
if(cartTotal){
|
||||
document.getElementsByClassName('total-price')[0].innerText = '$' + cartTotal;
|
||||
}
|
||||
updateCartIcon();
|
||||
}
|
||||
//quantity in cart icon
|
||||
function updateCartIcon(){
|
||||
var cartBoxes = document.getElementsByClassName('cart-box');
|
||||
var quantity = 0;
|
||||
|
||||
for (var i = 0; i < cartBoxes.length; i++){
|
||||
var cartBox = cartBoxes[i];
|
||||
var quantityElement = cartBox.getElementsByClassName('cart-quantity')[0];
|
||||
quantity += parseInt(quantityElement.value);
|
||||
}
|
||||
var cartIcon = document.querySelector('#cart-icon');
|
||||
cartIcon.setAttribute('data-quantity', quantity);
|
||||
}
|
||||
//clear cart after making a payment
|
||||
function clearCart(){
|
||||
var cartContent = document.getElementsByClassName('cart-content')[0];
|
||||
cartContent.innerHTML = '';
|
||||
updateTotal();
|
||||
localStorage.removeItem('cartItems');
|
||||
}
|
||||
123
bakery_website/public/gallery.html
Executable file
123
bakery_website/public/gallery.html
Executable file
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Home | Sweet Bake - European style Bakery</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/home-logo.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="brand" id="brand-1">Sweet Bake</a>
|
||||
<div class="menu-btn"></div>
|
||||
<div class="nav">
|
||||
<div class="nav-items" id="nav-items-1">
|
||||
<a href="menu.html">Order online</a>
|
||||
<a href="gallery.html">Gallery</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!------------ landing page ------------>
|
||||
<div class="bakery">
|
||||
<div class="wrapper">
|
||||
<i id="left" class="fa-solid fa-angle-left"></i>
|
||||
<div class="carousel">
|
||||
<img src="images/gallery-1.jpg" alt="img" draggable="false">
|
||||
<img src="images/gallery-2.jpg" alt="img" draggable="false">
|
||||
<img src="images/gallery-3.jpg" alt="img" draggable="false">
|
||||
<img src="images/gallery-4.jpg" alt="img" draggable="false">
|
||||
<img src="images/gallery-5.jpg" alt="img" draggable="false">
|
||||
</div>
|
||||
<i id="right" class="fa-solid fa-angle-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hour-bakery">
|
||||
<div class="hour-baker-detail">
|
||||
<h2>Business hours</h2>
|
||||
<p>Mon - Sat 10:00am - 4:00pm</p>
|
||||
<p>Sun 11:00am - 4:00pm</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="wrapper-gallery">
|
||||
<div class="our-gal">
|
||||
<h2>Gallery</h2>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="gallery-items">
|
||||
<span class="item-gallery active" data-name="all">All</span>
|
||||
<span class="item-gallery" data-name="shop">Shop</span>
|
||||
<span class="item-gallery" data-name="cake">Cake</span>
|
||||
<span class="item-gallery" data-name="pastry">Pastry</span>
|
||||
<span class="item-gallery" data-name="coffee">Coffee</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="gallery">
|
||||
<div class="image-gal" data-name="shop"><span><img src="images/gal-1.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="shop"><span><img src="images/gal-6.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="shop"><span><img src="images/gal-7.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="shop"><span><img src="images/gal-2.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="shop"><span><img src="images/gal-3.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="shop"><span><img src="images/gal-4.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="coffee"><span><img src="images/gal-5.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="coffee"><span><img src="images/gal-11.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="coffee"><span><img src="images/gal-12.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="coffee"><span><img src="images/gal-13.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="coffee"><span><img src="images/gal-8.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="coffee"><span><img src="images/gal-9.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="coffee"><span><img src="images/gal-10.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="coffee"><span><img src="images/gal-14.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="pastry"><span><img src="images/gal-15.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="pastry"><span><img src="images/gal-16.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="pastry"><span><img src="images/gal-17.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="pastry"><span><img src="images/gal-18.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="pastry"><span><img src="images/gal-19.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="pastry"><span><img src="images/gal-20.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="cake"><span><img src="images/gal-21.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="cake"><span><img src="images/gal-22.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="cake"><span><img src="images/gal-23.jpg" alt=""></span></div>
|
||||
<div class="image-gal" data-name="cake"><span><img src="images/gal-24.jpg" alt=""></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-box">
|
||||
<div class="details-gal">
|
||||
<span class="title-gal">Image Category: <p></p></span>
|
||||
<span class="icon-gal fas fa-times"></span>
|
||||
</div>
|
||||
<div class="image-box-gal"><img src="" alt=""></div>
|
||||
</div>
|
||||
<div class="shadow"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-4">
|
||||
<h3>Sweet Bake</h3>
|
||||
<div class="con-4-social">
|
||||
<a href="#"><i class='bx bxl-facebook'></i></a>
|
||||
<a href="#"><i class='bx bxl-instagram' ></i></a>
|
||||
<a href="#"><i class='bx bx-mail-send'></i></a>
|
||||
<a href="#"><i class='bx bx-phone' ></i></a>
|
||||
</div>
|
||||
<div class="con-text-4">
|
||||
<a href="#">Policy</a>
|
||||
<a href="#">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
<!------------ footer ------------>
|
||||
<footer>
|
||||
<p>© 2023 All Right Reserved</p>
|
||||
</footer>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
191
bakery_website/public/index.html
Executable file
191
bakery_website/public/index.html
Executable file
|
|
@ -0,0 +1,191 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Home | Sweet Bake - European style Bakery</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/home-logo.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="#" class="brand">Sweet Bake</a>
|
||||
<div class="menu-btn"></div>
|
||||
<div class="nav">
|
||||
<div class="nav-items">
|
||||
<a href="menu.html">Order online</a>
|
||||
<a href="gallery.html">Gallery</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!------------ landing page ------------>
|
||||
<section class="home">
|
||||
<video src="video/home-1.mp4" class="video-slide active" autoplay muted loop></video>
|
||||
<video src="video/home-2.mp4" class="video-slide" autoplay muted loop></video>
|
||||
<div class="content active">
|
||||
<h1>We bake the world a better place</h1>
|
||||
<p>We are delighted to present to you daily, an irresistible selection of fresh ingredients</p>
|
||||
<a href="./menu.html">Our Menu</a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>Celebrate your holiday with us</h1>
|
||||
<p>Enhance your holiday with our delightful array of freshly baked goods <br> and aromatic brewed beverages.</p>
|
||||
<a href="./menu.html">Order Now</a>
|
||||
</div>
|
||||
<div class="slider-nav">
|
||||
<div class="nav-btn active"></div>
|
||||
<div class="nav-btn"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!------------ content-1 ------------>
|
||||
<div class="gallery">
|
||||
<div class="container">
|
||||
<div class="tab">
|
||||
<input type="radio" class="tab-radio" name="tab-example" id="tab1" checked>
|
||||
<label for="tab1" class="tab-label"><img src="images/bakery.png" alt=""><br><br>pastry</label>
|
||||
<div class="tab-content">
|
||||
<div class="note">
|
||||
<div class="container">
|
||||
<div class="note-detail">
|
||||
<div class="note-img">
|
||||
<img src="images/hero-bakery.jpg" alt="">
|
||||
</div>
|
||||
<div class="note-text">
|
||||
<div class="note-text-title">
|
||||
<h2>Now</h2>
|
||||
</div>
|
||||
<h1>Fresh pastries available daily</h1>
|
||||
<p>Check out fresh pastries selection for the very best in unique or custom, cookies, tarts, and more. Pre-orders are available</p>
|
||||
<div class="order-btn"><a href="#">Order Now</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="radio" class="tab-radio" name="tab-example" id="tab2">
|
||||
<label for="tab2" class="tab-label"><img src="images/cake.png" alt=""><br><br> Cake</label>
|
||||
<div class="tab-content">
|
||||
<div class="note">
|
||||
<div class="container">
|
||||
<div class="note-detail">
|
||||
<div class="note-img">
|
||||
<img src="images/hero-cake.jpg" alt="">
|
||||
</div>
|
||||
<div class="note-text-1">
|
||||
<div class="note-text-title-1">
|
||||
<h2>Cheers</h2>
|
||||
</div>
|
||||
<h1>Wishing you a holly jolly <br><span>Christmas</span></h1>
|
||||
<p>We would love to cater your holiday gathering! <br> Pre-orders are available</p>
|
||||
<div class="order-btn-1"><a href="#">Order Now</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="radio" class="tab-radio" name="tab-example" id="tab3">
|
||||
<label for="tab3" class="tab-label"><img src="images/cup.png" alt=""><br><br> Coffee</label>
|
||||
<div class="tab-content">
|
||||
<div class="note">
|
||||
<div class="container">
|
||||
<div class="note-detail">
|
||||
<div class="note-img">
|
||||
<img src="images/hero-coffee.jpg" alt="">
|
||||
</div>
|
||||
<div class="note-text">
|
||||
<div class="note-text-title">
|
||||
<h2>New</h2>
|
||||
</div>
|
||||
<h1>Enjoy your Coffee</h1>
|
||||
<p>A cup of coffee lasts only a moment, but it is that moment that makes your day better. <br> Discover you perfect cup with us</p>
|
||||
<div class="order-btn"><a href="#">Try Now</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!------------ content-2 ------------>
|
||||
<div class="content-2">
|
||||
<h1>Best Selling</h1>
|
||||
<div class="con-2">
|
||||
<div class="container">
|
||||
<div class="con-2-detail">
|
||||
<div class="con-2-img">
|
||||
<img src="images/best-selling-1.jpg" alt="">
|
||||
<div class="con-2-text">
|
||||
<h3>Macarons</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
|
||||
<button class="con-2-btn"><a href="#">Order Now</a></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con-2-img">
|
||||
<img src="images/best-selling-2.jpg" alt="">
|
||||
<div class="con-2-text">
|
||||
<h3>Cream Puffs</h3>
|
||||
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<button class="con-2-btn"><a href="#">Order Now</a></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con-2-img">
|
||||
<img src="images/best-selling-3.jpg" alt="">
|
||||
<div class="con-2-text">
|
||||
<h3>Cheesecake</h3>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
||||
<button class="con-2-btn"><a href="#">Order Now</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!------------ content-3 ------------>
|
||||
<div class="content-3">
|
||||
<div class="con-3">
|
||||
<div class="container">
|
||||
<div class="con-3-detail">
|
||||
<div class="con-3-text">
|
||||
<h1>current hours</h1>
|
||||
</div>
|
||||
<div class="con-3-text-detail">
|
||||
<h3>Business Hours</h3>
|
||||
<p>Monday - Saturday 10:00am - 4:00pm</p>
|
||||
<p>Sundays 11:00am - 4:00pm</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con-3-img"><img src="images/con-3.jpg" alt=""></div>
|
||||
</div>
|
||||
<!------------ content-4 ------------>
|
||||
<div class="content-4">
|
||||
<h2>Looking to inquire or ready to make an order?</h2>
|
||||
<button class="con-2-btn"><a href="#">Contact Us</a></button>
|
||||
<h3>Sweet Bake</h3>
|
||||
<div class="con-4-social">
|
||||
<a href="#"><i class='bx bxl-facebook'></i></a>
|
||||
<a href="#"><i class='bx bxl-instagram' ></i></a>
|
||||
<a href="#"><i class='bx bx-mail-send'></i></a>
|
||||
<a href="#"><i class='bx bx-phone' ></i></a>
|
||||
</div>
|
||||
<div class="con-text-4">
|
||||
<a href="#">Policy</a>
|
||||
<a href="#">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
<!------------ footer ------------>
|
||||
<footer>
|
||||
<p>© 2023 All Right Reserved</p>
|
||||
</footer>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
164
bakery_website/public/main.js
Executable file
164
bakery_website/public/main.js
Executable file
|
|
@ -0,0 +1,164 @@
|
|||
//navbar
|
||||
const menuBtn = document.querySelector(".menu-btn");
|
||||
const navi = document.querySelector(".nav");
|
||||
|
||||
menuBtn.addEventListener("click", ()=>{
|
||||
menuBtn.classList.toggle("active");
|
||||
navi.classList.toggle("active");
|
||||
});
|
||||
|
||||
//video
|
||||
const videoBtn = document.querySelectorAll(".nav-btn");
|
||||
const slides = document.querySelectorAll(".video-slide");
|
||||
const contents = document.querySelectorAll(".content");
|
||||
|
||||
var sliderNav = function(manual){
|
||||
videoBtn.forEach((btn)=>{
|
||||
btn.classList.remove("active");
|
||||
});
|
||||
|
||||
slides.forEach((slide)=>{
|
||||
slide.classList.remove("active");
|
||||
});
|
||||
contents.forEach((content)=>{
|
||||
content.classList.remove("active");
|
||||
});
|
||||
|
||||
videoBtn[manual].classList.add("active");
|
||||
slides[manual].classList.add("active");
|
||||
contents[manual].classList.add("active");
|
||||
}
|
||||
videoBtn.forEach((btn, i)=>{
|
||||
btn.addEventListener("click", ()=>{
|
||||
sliderNav(i);
|
||||
});
|
||||
});
|
||||
|
||||
//carousel
|
||||
const carousel = document.querySelector(".carousel"),
|
||||
firstImg = carousel.querySelectorAll("img")[0],
|
||||
arrowIcons = document.querySelectorAll(".wrapper i");
|
||||
|
||||
let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
|
||||
|
||||
const showHideIcons = () => {
|
||||
// showing and hiding prev/next icon according to carousel scroll left value
|
||||
let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
|
||||
arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
|
||||
arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
|
||||
}
|
||||
|
||||
arrowIcons.forEach(icon => {
|
||||
icon.addEventListener("click", () => {
|
||||
let firstImgWidth = firstImg.clientWidth + 14; // getting first img width & adding 14 margin value
|
||||
// if clicked icon is left, reduce width value from the carousel scroll left else add to it
|
||||
carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
|
||||
setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
|
||||
});
|
||||
});
|
||||
|
||||
const autoSlide = () => {
|
||||
// if there is no image left to scroll then return from here
|
||||
if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
|
||||
|
||||
positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
|
||||
let firstImgWidth = firstImg.clientWidth + 14;
|
||||
// getting difference value that needs to add or reduce from carousel left to take middle img center
|
||||
let valDifference = firstImgWidth - positionDiff;
|
||||
|
||||
if(carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
|
||||
return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
||||
}
|
||||
// if user is scrolling to the left
|
||||
carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
||||
}
|
||||
|
||||
const dragStart = (e) => {
|
||||
// updatating global variables value on mouse down event
|
||||
isDragStart = true;
|
||||
prevPageX = e.pageX || e.touches[0].pageX;
|
||||
prevScrollLeft = carousel.scrollLeft;
|
||||
}
|
||||
|
||||
const dragging = (e) => {
|
||||
// scrolling images/carousel to left according to mouse pointer
|
||||
if(!isDragStart) return;
|
||||
e.preventDefault();
|
||||
isDragging = true;
|
||||
carousel.classList.add("dragging");
|
||||
positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
|
||||
carousel.scrollLeft = prevScrollLeft - positionDiff;
|
||||
showHideIcons();
|
||||
}
|
||||
|
||||
const dragStop = () => {
|
||||
isDragStart = false;
|
||||
carousel.classList.remove("dragging");
|
||||
|
||||
if(!isDragging) return;
|
||||
isDragging = false;
|
||||
autoSlide();
|
||||
}
|
||||
|
||||
carousel.addEventListener("mousedown", dragStart);
|
||||
carousel.addEventListener("touchstart", dragStart);
|
||||
|
||||
document.addEventListener("mousemove", dragging);
|
||||
carousel.addEventListener("touchmove", dragging);
|
||||
|
||||
document.addEventListener("mouseup", dragStop);
|
||||
carousel.addEventListener("touchend", dragStop);
|
||||
|
||||
//gallery-tab
|
||||
//selecting all required elements
|
||||
const filterItem = document.querySelector(".gallery-items");
|
||||
const filterImg = document.querySelectorAll(".gallery .image-gal");
|
||||
|
||||
window.onload = ()=>{ //after window loaded
|
||||
filterItem.onclick = (selectedItem)=>{ //if user click on filterItem div
|
||||
if(selectedItem.target.classList.contains("item-gallery")){ //if user selected item has .item class
|
||||
filterItem.querySelector(".active").classList.remove("active"); //remove the active class which is in first item
|
||||
selectedItem.target.classList.add("active"); //add that active class on user selected item
|
||||
let filterName = selectedItem.target.getAttribute("data-name"); //getting data-name value of user selected item and store in a filtername variable
|
||||
filterImg.forEach((image) => {
|
||||
let filterImges = image.getAttribute("data-name"); //getting image data-name value
|
||||
//if user selected item data-name value is equal to images data-name value
|
||||
//or user selected item data-name value is equal to "all"
|
||||
if((filterImges == filterName) || (filterName == "all")){
|
||||
image.classList.remove("hide"); //first remove the hide class from the image
|
||||
image.classList.add("show"); //add show class in image
|
||||
}else{
|
||||
image.classList.add("hide"); //add hide class in image
|
||||
image.classList.remove("show"); //remove show class from the image
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < filterImg.length; i++) {
|
||||
filterImg[i].setAttribute("onclick", "preview(this)"); //adding onclick attribute in all available images
|
||||
}
|
||||
}
|
||||
|
||||
//fullscreen image preview function
|
||||
//selecting all required elements
|
||||
const previewBox = document.querySelector(".preview-box"),
|
||||
categoryName = previewBox.querySelector(".title-gal p"),
|
||||
previewImg = previewBox.querySelector("img"),
|
||||
closeIcon = previewBox.querySelector(".icon-gal"),
|
||||
shadow = document.querySelector(".shadow");
|
||||
|
||||
function preview(element){
|
||||
//once user click on any image then remove the scroll bar of the body, so user can't scroll up or down
|
||||
document.querySelector("body").style.overflow = "hidden";
|
||||
let selectedPrevImg = element.querySelector("img").src; //getting user clicked image source link and stored in a variable
|
||||
let selectedImgCategory = element.getAttribute("data-name"); //getting user clicked image data-name value
|
||||
previewImg.src = selectedPrevImg; //passing the user clicked image source in preview image source
|
||||
categoryName.textContent = selectedImgCategory; //passing user clicked data-name value in category name
|
||||
previewBox.classList.add("show"); //show the preview image box
|
||||
shadow.classList.add("show"); //show the light grey background
|
||||
closeIcon.onclick = ()=>{ //if user click on close icon of preview box
|
||||
previewBox.classList.remove("show"); //hide the preview box
|
||||
shadow.classList.remove("show"); //hide the light grey background
|
||||
document.querySelector("body").style.overflow = "auto"; //show the scroll bar on body
|
||||
}
|
||||
}
|
||||
225
bakery_website/public/menu.html
Executable file
225
bakery_website/public/menu.html
Executable file
|
|
@ -0,0 +1,225 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Menu | Sweet Bake - European style Bakery</title>
|
||||
<link rel="stylesheet" href="style_extension.css">
|
||||
<link rel="shortcut icon" href="images/home-logo.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav-menu container-menu">
|
||||
<a href="index.html" class="menu-logo">Sweet Bake</a>
|
||||
<i class='bx bx-shopping-bag' id="cart-icon" data-quantity="0"></i>
|
||||
<div class="cart">
|
||||
<h2 class="cart-title">Your Cart</h2>
|
||||
<div class="cart-content">
|
||||
<!--<div class="cart-box">
|
||||
<img src="images/cake-7.jpg" alt="" class="cart-img">
|
||||
<div class="detail-box">
|
||||
<div class="cart-product-title">Product</div>
|
||||
<div class="cart-price">$24.99</div>
|
||||
<input type="number" name="" id="" value="1" class="cart-quantity">
|
||||
</div>
|
||||
<i class='bx bxs-trash cart-remove'></i>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="total">
|
||||
<div class="total-title">Total</div>
|
||||
<div class="total-price">$0</div>
|
||||
</div>
|
||||
<button type="button" class="btn-buy">Pay Now</button>
|
||||
<i class='bx bx-x' id="close-cart"></i>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Product -->
|
||||
<div class="shop container-shop">
|
||||
<h2 class="section-title">Cakes</h2>
|
||||
<div class="shop-content">
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV84qyExbv2N9cMSe2Ic9xyGZjUQayKOdEY8vJJvMZq4S8YNmz9gY4HsH_GLq86uejCEMuLC2C1nDsuVXeN6PSidKi4tNiYa9GWLyNGYw6d8qMh023TFd1SewhgBba-wscs_qIeYscukcr8rruhw5qOfO=w737-h921-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Ice cream cake</h2>
|
||||
<span class="price">$24.99 (1 lb)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV87x_ZSDPdVoapBMy6cST_wOnKE_rFq17Ci0PZe9DsFYdzaBR8L4zoMDTvIrmDBvPgatymPmkJAQKsq0rLTq-qP1JYpRkfTno6k7KN1Zzh0TtNoM3vlZM-y4V8_pYGisURq5qziX6laMLOAmIcTt2XLj=w737-h921-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Chocolate cake</h2>
|
||||
<span class="price">$19.99 (1 lb)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV84G2Iina5G4cdaRMxbOUCHuPxmS9sNjfguoGPkYpIVElFXNSFac-jBKUd25AePQ9lOOjRZbpfOUcI8l1SNxfBZ8tTJzPC2L3iv__uJ-qKGISYyeq_GC6Tk-BVDgW-pqwoXOhdHikAEcCxAk0OA6m8Uq=w737-h921-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Red velvet cake</h2>
|
||||
<span class="price">$19.99 (1 lb)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV85gdwk9PCG1PfVTZ3gZWQAGBRDF5hxFIxVWC5xeqgUdPUlzgt4JLNThit2yVNj7caGCjOq5Z7KB6YmGTn7-UetJCMu2AbrVJT8h6behjT_l_z_0s0iFWFUIGxuyTpcx1mTERrsO42p2Ku4LzhCIfiKo=w737-h921-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Cheesecake</h2>
|
||||
<span class="price">$19.99 (1 lb)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV8612BO4uuXv7D9ikXmzpTkGse3l_zT9nJN1Ou1NdMrc2mThfqeTn6VAgoAK4zTM8_4oY29OHrJY5v4dwz-iRxSA11wThWFvLPQxoCaN2djuppdaaocOJgZEQ_BQSalKJ93cGeDf2cvCOu05fYKKDpwy=w737-h921-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Orange Cake</h2>
|
||||
<span class="price">$15.99 (1 lb)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV86-7Wr8jScKegTRMnd8jow--OG82smatMr0gOpl0J9IMqyrdokKsO2NybAOPUPjCrqYAUr8uMZuNQG59EFSnTE7dJMN-Z8UrnS7fMd4TEW3pbY7qEius5aU_EJBz0HpyVqfygS2T3o_VTzpBoncUxz3=w736-h921-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Carrot cake</h2>
|
||||
<span class="price">$13.99 (1 lb)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title"><br><br><br> Pastries</h2>
|
||||
<div class="shop-content">
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV850i052hqLqrYOjnBmNDZyral0wu_RB2iAaJx-86vbWDlizTyUNEF_GLNeJgWm4WZYtU885CAM8tWQH620pGcSS9Ateo3M9OXAAck3XpzqaJtzqPzUPi69fictJ3auPeKtW5iQ9ZQ8UokcT0A-UKfSM=w575-h719-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Passion fruit panna cotta</h2>
|
||||
<span class="price">$7.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV86us9gqzmEyQBn-OkDx9yBPEbQSkTcQiZQ1wHWuIEgL6ueqKHTBblnJp4IU0TSOfAjZM4KcVa5pvd-DQtAZaxnvIIdh4536sq36tZfA9zjVJSvw9IMM5YmsZ0aO-GrXwWyOnw_U_deD26agn5dIl1MM=w737-h921-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Tiramisu</h2>
|
||||
<span class="price">$6.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV87QRkyYplULS1FoQqOAIcH8RGZj4WiEFiQRiIlcjZGPeteiVLqKw_bSFy1q5xMUeASNhkNJuFiI3fQErpNljTHD-ISFgD3-_sy0GRI-d40l3ol8pDmjUAVQh_o3_L-o4da7AOJnvq0jgfCvwXfVPlYF=w737-h921-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Cream puff</h2>
|
||||
<span class="price">$6.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV87js0IKvFXjfukkhSDtwQQhapXQo6hTNU2nKWkdlpd4iOv8uDLYY5fF1NwvZyOUZXY08UXAXv-yNhzFF2dwFiKapTzYMSieXhFeCtETnYO68Ws9mfwgiDMvzFiwPascRCJj4--9zjBCyrI70bfAZLnp=w737-h921-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Matcha Swiss roll</h2>
|
||||
<span class="price">$5.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV87XwyJUxBraV1GGoF_yr9EwsImNe07BH8d4CANayyVnMI9s9TgKvQOmaJKuCvxzkTAf5jN1jxMDY2F8ohjFBRyDcthcHxzAtItK1rQdZ0hCGiy6pVAUZ6LRAlPck8_-PAHdmg0CBKIYsmGRSA-n13VQ=w435-h543-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">strawberry swiss roll</h2>
|
||||
<span class="price">$5.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV86gTB3HVD8n1FZcgLh3IAJ-nf8YBqBPKsC5tmcHDrobPhLAuaAiYqsgOT40i_rs9hn9Qcy5-1N5xbTqjVlNhT1IRUkhbMliZ0BOnlJ8VvF9lLWhwE0X-7l9iSI2uCFOGrEMwb9Bc69QOnstGdWE2w4t=w737-h921-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Paris brest</h2>
|
||||
<span class="price">$5.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV86kyMtuDCR-0BY3IS6unBqwuVXLHxlnja27siB2nFzrMsHTub79AyP-0bEk9LwzKpwcdTg5er-DX7_dNCIetnbv04amjcT2nUpok0n7FocgTYdECS7vdsW5DiPGAW-1VrBK66JAWyuf5vYAHSRt1eJl=w387-h483-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Crème brûlée</h2>
|
||||
<span class="price">$5.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV87fvjSwuzadi5bumA0JzUZTvAFyWkQ6PXY0p8P1DoCzsvrdSjowfzF8Ql79ejyQ3N5GR5o_o0kzzPoojODseemw4S8zdbtdYtvV2eiVRHZEizoeCgxO07XumiN1YH0mJMVO8zgO1EiBpw1kOGOvZb8A=w455-h570-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Pastéis De Nata</h2>
|
||||
<span class="price">$4.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV85YpNqyo0rhjU2ws7mffKic4shVssuNT4oUcqJnNwVbhFn1GRnhofWz3t0TNFrF6qPBnlsko5iTt1lLF3HBMe4JpBjxHE4XMGAQCalUsntFgEbEiSwbq1YcLKqISDbkSbgqY2KzQ3yVZFW437GmD4W-=w437-h546-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">corissant</h2>
|
||||
<span class="price">$3.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV85JO-EqQZPYeQA0OOFlWkF1lyxU6nXfnHI1fjtMatLiGXI9ldzqS4R2vv4LkavbpAjLf7ZLUYR17zfl6fDuf0G2ZDI0qHolYy2l5HYlWSj798e_07dXedt4Ajug6y3kefvag0byU1WYHbRLTYRyW7AL=w386-h482-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Nutella Puff</h2>
|
||||
<span class="price">$2.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title"><br><br><br> Macarons</h2>
|
||||
<div class="shop-content">
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV85b1o-4GiiVdWDHzqxhI3UtUB5oQeeXS-7p8ZLTcs9CN4_9PDnt2lf8C_o6oNW72uGcmDxDcllMgV6CwcL3pUH7wtwUX6sSZZrMdNPERwWFvMZ3bGdHm9vp4O7tiVU_MMgoBtM_mwiXSGQNFD6V47xH=w499-h624-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Rose Lychee Macaron</h2>
|
||||
<span class="price">$2.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV84xosF_PCdnSNfPB-bxAzrShDolJJ8HWRqAL7T9F-NTCzjJ68We6lshOEDpK9-p2l_0opZCZGiXuF5wsw1dPqav6esMk4BEMHfEEV6nGn95dAq3CikMaZEZ_xSH5_cjVaniqjwd6iZU8ghS-3PaL0sn=w535-h669-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Chocolate macaron</h2>
|
||||
<span class="price">$2.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV85bCKXE14_lO-PQaCZa8EuUk1fO_H4NG_iZ_UC3zccD76XvPQy1HnPkCHkP7qYCNTgFQkd9Y68a9e0jMO7e769uDax9q_xYVaxgxQN6WmwV94okZQ4N5p_5lvjdgavxaXxjRYsbwrzaBsrl0POyWNFe=w529-h662-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Vanilla macaron</h2>
|
||||
<span class="price">$2.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV84rHn4G_cynNv81Pyt21eHG5bjW3bgwbPPwwOSywinCLXGTtjLxnQbJBA5DymMYutmWRUvakd66b4bMuYDwN1cmHN_9XCsGAvLY2SXIS-nD4rL1kTblo_MDQhuC1TWntWk0A8IQRlhEAZNIweVnyztx=w523-h654-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Strawberry Macaron </h2>
|
||||
<span class="price">$2.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV86P8pO8TZd1x6o_vG2_cI_mdnjxyTj2S49t8PTUXP_0Ya2z4_QtzzvokX7josntuUIdVuXst0Z7NJ8zO1Ly8Sqpku-rRaWnkwfpflE4EgR1XzGbZ9S3iHMs4ZMoxEfxbq3A-RLfbgBpvecVQhsqLqKb=w516-h645-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Lemon Macaron</h2>
|
||||
<span class="price">$2.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV85Or0UR3A6sSHDwn9-pweQyp212gp1QYCXw1zUR0JUzCjMHu1SrzZTjZISx5bG38EQRZ9AYTCFlm8ctQMF0KhgWWFHcWpfxzDz5oetzQZur2kuBXZglbu6iiPapJcByDi70yepguvwlkKpTrSQlNI-r=w498-h623-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Pistachio Macaron </h2>
|
||||
<span class="price">$2.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV85BDX2o0B1f_blBMEAvu4sUW1mb10dNNWs68QfIuM-9aNkBFIFenmpBVaufDisCMMSHmyuGMY3j9YiH44RYH53XK4i6S2bYTnXr7cPtz1P0LYH0P-q4CJsEsdb1UlU4uPCWJjQCjSOzIF7mIUZXhsbB=w518-h648-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Salted Caramel Macaron </h2>
|
||||
<span class="price">$2.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
|
||||
<div class="product-box">
|
||||
<img src="https://lh3.googleusercontent.com/pw/ABLVV85iTP7g-myaZOGQ-LKlZkbxqQvoWHA1WDtYOcs1ERKNTS7wbXHV8RLVxKwXLRBEsAy-mRjkfhQQ67BiG--I9L25XifeLmsVTsKVgkFuk2eYsZjeZkMkl07yI9E7UiFJCwrPQFmg6qHSsVYnCSTu8-bo=w470-h588-s-no?authuser=0" alt="" class="product-img">
|
||||
<h2 class="product-title">Hazelnut Praline Macaron </h2>
|
||||
<span class="price">$2.99 (1 ea)</span>
|
||||
<i class='bx bx-shopping-bag add-cart'></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="extension.js"></script>
|
||||
<script src="cart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1083
bakery_website/public/style.css
Executable file
1083
bakery_website/public/style.css
Executable file
File diff suppressed because it is too large
Load diff
311
bakery_website/public/style_extension.css
Executable file
311
bakery_website/public/style_extension.css
Executable file
|
|
@ -0,0 +1,311 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400;500;600;700&family=Waterfall&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Cormorant', serif;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 4px hsla(0, 0%, 98%, 0.3);
|
||||
}
|
||||
.nav-menu{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.container-menu{
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.menu-logo{
|
||||
color: black;
|
||||
font-size: 66px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
font-family: 'Waterfall';
|
||||
text-decoration: none;
|
||||
}
|
||||
#cart-icon{
|
||||
position: relative;
|
||||
font-size: 26px;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
#cart-icon[data-quantity='0']::after{
|
||||
contain: '';
|
||||
}
|
||||
#cart-icon[data-quantity]::after{
|
||||
content: attr(data-quantity);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
border-radius: 50%;
|
||||
color: black;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cart{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
width: 360px;
|
||||
min-height: 100vh;
|
||||
padding: 50px;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: -2px 0 4px hsl(0, 4%, 15% / 10%);
|
||||
transition: 0.3 cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.cart.active{
|
||||
right: 0;
|
||||
transition: 0.3 cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.cart-title{
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.total{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid #B0A695;
|
||||
}
|
||||
.total-title{
|
||||
font-size: 18px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.total-price{
|
||||
font-size: 20px;
|
||||
margin: 20px 0 0 20px;
|
||||
}
|
||||
.btn-buy{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30px auto 0 auto;
|
||||
padding: 8px 10px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background-color: transparent;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
#close-cart{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cart-box{
|
||||
display: grid;
|
||||
grid-template-columns: 35% 40% 15%;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.cart-img{
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
padding: 10px;
|
||||
}
|
||||
.detail-box{
|
||||
display: grid;
|
||||
row-gap: 10px;
|
||||
}
|
||||
.cart-product-title{
|
||||
font-size: 16px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.cart-price{
|
||||
font-weight: 600;
|
||||
}
|
||||
.cart-quantity{
|
||||
border: 1px solid black;
|
||||
outline-color: black;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.cart-remove{
|
||||
font-size: 20px;
|
||||
color: #6C5F5B;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*-------------------- product --------------------*/
|
||||
.shop{
|
||||
margin-top: 50px;
|
||||
padding: 4rem 0 3rem ;
|
||||
}
|
||||
.container-shop{
|
||||
max-width: 60%;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
margin-top: 100px;
|
||||
}
|
||||
.section-title{
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.shop-content{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
|
||||
gap: 20px;
|
||||
}
|
||||
.product-box{
|
||||
position: relative;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.product-box:hover{
|
||||
border: 1px solid black;
|
||||
box-shadow: 0 8px 32px hsla(0.75, 0.82, 0.165, 1);
|
||||
transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.product-img{
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.product-title{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.price{
|
||||
font-weight: 500;
|
||||
}
|
||||
.add-cart{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add-cart:hover{
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
/*-------------------- payment successful --------------------*/
|
||||
.sc-container{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.sc-container img{
|
||||
width: 200px;
|
||||
margin: 50px 0;
|
||||
}
|
||||
.sc-container h1{
|
||||
font-size: 38px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sc-container p{
|
||||
font-size: 18px;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
.sc-btn{
|
||||
padding: 12px 20px;
|
||||
background-color: lightgrey;
|
||||
border: 1px solid grey;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (width < 1380px) {
|
||||
.container-shop{
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 950px) {
|
||||
.container-shop{
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 750px) {
|
||||
.container-shop{
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 590px) {
|
||||
.container-shop{
|
||||
max-width: 50%;
|
||||
}
|
||||
.shop-content{
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
|
||||
}
|
||||
.menu-logo{
|
||||
font-size: 48px;
|
||||
}
|
||||
.cart{
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 390px) {
|
||||
.container-shop{
|
||||
max-width: 60%;
|
||||
}
|
||||
.shop-content{
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
|
||||
}
|
||||
.menu-logo{
|
||||
font-size: 48px;
|
||||
}
|
||||
.cart{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
20
bakery_website/public/success.html
Executable file
20
bakery_website/public/success.html
Executable file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Payment Successful</title>
|
||||
<link rel="stylesheet" href="style_extension.css">
|
||||
<link rel="shortcut icon" href="images/home-logo.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sc-container">
|
||||
<h1>Payment Successful</h1>
|
||||
<p>You have completed your payment</p>
|
||||
<img src="images/success.png" alt="">
|
||||
<a href="http://localhost:3000" class="sc-btn">Back</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
21
bakery_website/public/unsuccess.html
Executable file
21
bakery_website/public/unsuccess.html
Executable file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Payment Unsuccessful</title>
|
||||
<link rel="stylesheet" href="style_extension.css">
|
||||
<link rel="shortcut icon" href="images/home-logo.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sc-container">
|
||||
<h1>Payment Unsuccessful</h1>
|
||||
<p>Oops! Something went wrong. Please try again or contact us for any support at</p>
|
||||
<p>help@example.com</p>
|
||||
<img src="images/no.png" alt="">
|
||||
<a href="http://localhost:3000" class="sc-btn">Back</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
65
bakery_website/server.js
Executable file
65
bakery_website/server.js
Executable file
|
|
@ -0,0 +1,65 @@
|
|||
import express from 'express';
|
||||
import dotenv from 'dotenv'
|
||||
import stripe from 'stripe';
|
||||
|
||||
//load variable
|
||||
dotenv.config();
|
||||
|
||||
//start server
|
||||
const app = express();
|
||||
|
||||
app.use(express.static('public'));
|
||||
app.use(express.json());
|
||||
|
||||
|
||||
//Home Route
|
||||
app.get('/', (req, res) => {
|
||||
res.sendFile('menu.html', {root: 'public'});
|
||||
});
|
||||
//success
|
||||
app.get('/success', (req, res) => {
|
||||
res.sendFile('success.html', {root: 'public'});
|
||||
});
|
||||
//unsuccess
|
||||
app.get('/unsuccess', (req, res) => {
|
||||
res.sendFile('unsuccess.html', {root: 'public'});
|
||||
});
|
||||
//stripe
|
||||
let stripeGateway = stripe(process.env.stripe_api);
|
||||
let DOMAIN = process.env.DOMAIN;
|
||||
|
||||
app.post('/stripe-checkout', async (req, res) => {
|
||||
const lineItems = req.body.items.map((item) => {
|
||||
const unitAmount = parseInt(item.price.replace(/[^0-9.-]+/g, '') * 100);
|
||||
console.log('item-price:', item.price);
|
||||
console.log('unitAmount:', unitAmount);
|
||||
return {
|
||||
price_data:{
|
||||
currency: 'usd',
|
||||
product_data: {
|
||||
name: item.title,
|
||||
images: [item.productImg]
|
||||
},
|
||||
unit_amount: unitAmount,
|
||||
},
|
||||
quantity: item.quantity,
|
||||
};
|
||||
});
|
||||
console.log('lineItems:', lineItems);
|
||||
|
||||
//craete checkout
|
||||
const session = await stripeGateway.checkout.sessions.create({
|
||||
payment_method_types: ['card'],
|
||||
mode: 'payment',
|
||||
success_url: `${DOMAIN}/success`,
|
||||
cancel_url: `${DOMAIN}/unsuccess`,
|
||||
line_items: lineItems,
|
||||
//asking address in stripe checkout
|
||||
billing_address_collection: 'required'
|
||||
});
|
||||
res.json(session.url);
|
||||
});
|
||||
|
||||
app.listen(3005, ()=>{
|
||||
console.log('listening on port 3005;');
|
||||
});
|
||||
|
|
@ -1,643 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/logo.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page" class="site">
|
||||
<header>
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="social">
|
||||
<ul>
|
||||
<li><a href=""></a><i class='bx bxl-facebook' ></i></li>
|
||||
<li><a href=""></a><i class='bx bxl-instagram-alt' ></i></li>
|
||||
<li><a href=""></a><i class='bx bxl-twitter' ></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="other-1">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bxs-phone' ></i><span class="phone">+123 456 789</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="other-2">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bxs-envelope' ></i><span class="phone">info@example.com</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="langs">
|
||||
<ul>
|
||||
<li><a href="#"><span class="flag us"></span><span>English</span><i class='bx bxs-chevron-down' ></i></a>
|
||||
<ul>
|
||||
<li><a href="#"><span class="flag sp"></span><span>Español</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-main">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="logo">
|
||||
<a href="#" class="menu-trigger" open-btn><i class='bx bx-menu'></i></a>
|
||||
<a href=""><span>Blood</span> Bank</a>
|
||||
<img src="images/logo-1.png" alt="">
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#"><span>Home</span></a></li>
|
||||
<li><a href="#"><span>Donate</span><i class='bx bx-chevron-down' ></i></a>
|
||||
<ul class="submenu">
|
||||
<li><a href="">Donate Blood</a></li>
|
||||
<li><a href="">Donation Types</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#"><span>Learn</span><i class='bx bx-chevron-down' ></i></a>
|
||||
<ul class="submenu">
|
||||
<li><a href="">Blood Types</a></li>
|
||||
<li><a href="">First Time Blood Doner</a></li>
|
||||
<li><a href="">Scientific Research</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#"><span>Support</span><i class='bx bx-chevron-down' ></i></a>
|
||||
<ul class="submenu">
|
||||
<li><a href="">Volunteer</a></li>
|
||||
<li><a href="">Partnerships</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#"><span>Service</span><i class='bx bx-chevron-down' ></i></a>
|
||||
<ul class="submenu">
|
||||
<li><a href="">Laboratory Services</a></li>
|
||||
<li><a href="">Clinical Apheresis Services </a></li>
|
||||
<li><a href="">Medical Consultation</a></li>
|
||||
<li><a href="">Cell & Gene Therapy </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="icon">
|
||||
<ul>
|
||||
<li><a href="#" open-btn><i class='bx bx-search' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="home">
|
||||
<div class="home-box">
|
||||
<div class="wrap">
|
||||
<div class="item">
|
||||
<div class="image">
|
||||
<div class="object-cover">
|
||||
<img src="images/heading.jpg" alt="">
|
||||
</div>
|
||||
<div class="title-info">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<h1 class="text">Every blood doner is a lifesaver</h1>
|
||||
<h3 class="title">Your blood donation is needed to prevernt <br>a blood shortage</h3>
|
||||
<div class="button"><a href="" class="primary-btn">Make appointment</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="guide">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="row">
|
||||
<h1>Donation guide</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="icon">
|
||||
<i class='bx bxs-calendar'></i>
|
||||
</div>
|
||||
<h3>Appointment</h3>
|
||||
<p>Make an appointment and find the nearest donation center or blood drive near you.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="icon">
|
||||
<i class='bx bxs-check-circle'></i>
|
||||
</div>
|
||||
<h3>Eligibility</h3>
|
||||
<p>Find out blood donation eligibility requirements, including a minimum age and weight requirement.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="icon">
|
||||
<i class='bx bx-spreadsheet'></i>
|
||||
</div>
|
||||
<h3>Rapidpass</h3>
|
||||
<p>Complete your health history questions online before visiting your blood drive location.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-1">
|
||||
<div class="container">
|
||||
<div class="content-1-img">
|
||||
<img src="images/content-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="content-1-text">
|
||||
<h2>Give blood and keep the world beating</h2>
|
||||
<p>World Blood Donor Day is celebrated on 14 June every year to spread awareness and seek attention to the importance of blood donation.
|
||||
It is important that people are educated on the importance of safe blood donation and blood products for the purpose of transfusion.
|
||||
</p>
|
||||
<a href="" class="primary-btn">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress">
|
||||
<div class="container">
|
||||
<div class="progress-content">
|
||||
<h1>Average distribution of blood types in the United States</h1>
|
||||
</div>
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="item swiper-slide">
|
||||
<div class="card-progress">
|
||||
<div class="head">
|
||||
<div class="blur"></div>
|
||||
<div class="thumbnail-progress">
|
||||
<div class="progress-bar progress-bar-1">
|
||||
<span class="progress-value progress-value-1">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<h2>Blood type A+</h2>
|
||||
<a href="" class="progress-btn">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="card-progress">
|
||||
<div class="head">
|
||||
<div class="blur"></div>
|
||||
<div class="thumbnail-progress">
|
||||
<div class="progress-bar progress-bar-2">
|
||||
<span class="progress-value progress-value-2">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<h2>Blood type A-</h2>
|
||||
<a href="" class="progress-btn">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="card-progress">
|
||||
<div class="head">
|
||||
<div class="blur"></div>
|
||||
<div class="thumbnail-progress">
|
||||
<div class="progress-bar progress-bar-3">
|
||||
<span class="progress-value progress-value-3">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<h2>Blood type B+</h2>
|
||||
<a href="" class="progress-btn">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="card-progress">
|
||||
<div class="head">
|
||||
<div class="blur"></div>
|
||||
<div class="thumbnail-progress">
|
||||
<div class="progress-bar progress-bar-4">
|
||||
<span class="progress-value progress-value-4">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<h2>Blood type B-</h2>
|
||||
<a href="" class="progress-btn">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="card-progress">
|
||||
<div class="head">
|
||||
<div class="blur"></div>
|
||||
<div class="thumbnail-progress">
|
||||
<div class="progress-bar progress-bar-5">
|
||||
<span class="progress-value progress-value-5">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<h2>Blood type AB+</h2>
|
||||
<a href="" class="progress-btn">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="card-progress">
|
||||
<div class="head">
|
||||
<div class="blur"></div>
|
||||
<div class="thumbnail-progress">
|
||||
<div class="progress-bar progress-bar-6">
|
||||
<span class="progress-value progress-value-6">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<h2>Blood type AB-</h2>
|
||||
<a href="" class="progress-btn">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="card-progress">
|
||||
<div class="head">
|
||||
<div class="blur"></div>
|
||||
<div class="thumbnail-progress">
|
||||
<div class="progress-bar progress-bar-7">
|
||||
<span class="progress-value progress-value-7">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<h2>Blood type O+</h2>
|
||||
<a href="" class="progress-btn">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="card-progress">
|
||||
<div class="head">
|
||||
<div class="blur"></div>
|
||||
<div class="thumbnail-progress">
|
||||
<div class="progress-bar progress-bar-8">
|
||||
<span class="progress-value progress-value-8">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<h2>Blood type O-</h2>
|
||||
<a href="" class="progress-btn">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination"></div>
|
||||
<div class="nextprev">
|
||||
<i class='button-prev bx bx-chevron-left'></i>
|
||||
<i class='button-next bx bx-chevron-right'></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion">
|
||||
<div class="container">
|
||||
<div class="content-2">
|
||||
<h2>Why blood donation is important</h2>
|
||||
<div class="question-answ">
|
||||
<div class="question">
|
||||
<h3 class="title-question">Saving Lives</h3>
|
||||
<button class="question-btn">
|
||||
<span class="icon-up">
|
||||
<i class='bx bx-chevron-up'></i>
|
||||
</span>
|
||||
<span class="icon-down">
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<p>Blood donations are critical in medical emergencies and surgeries where patients may need blood transfusions due to accidents, organ transplants, and various medical conditions. By donating blood, you can directly contribute to saving someone's life.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-answ">
|
||||
<div class="question">
|
||||
<h3 class="title-question">Treating Medical Conditions</h3>
|
||||
<button class="question-btn">
|
||||
<span class="icon-up">
|
||||
<i class='bx bx-chevron-up'></i>
|
||||
</span>
|
||||
<span class="icon-down">
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<p>Many medical conditions, such as anemia, thalassemia, and certain cancers, require regular blood transfusions to manage the symptoms and improve the quality of life for patients.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-answ">
|
||||
<div class="question">
|
||||
<h3 class="title-question">Supporting Healthcare Systems</h3>
|
||||
<button class="question-btn">
|
||||
<span class="icon-up">
|
||||
<i class='bx bx-chevron-up'></i>
|
||||
</span>
|
||||
<span class="icon-down">
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<p>Hospitals and medical facilities need a steady and reliable blood supply to handle emergencies and provide proper care to patients.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-answ">
|
||||
<div class="question">
|
||||
<h3 class="title-question">Supporting Specific Blood Types</h3>
|
||||
<button class="question-btn">
|
||||
<span class="icon-up">
|
||||
<i class='bx bx-chevron-up'></i>
|
||||
</span>
|
||||
<span class="icon-down">
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<p>By donating blood, individuals with rarer blood types can help meet the needs of patients who share their blood type.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-answ">
|
||||
<div class="question">
|
||||
<h3 class="title-question">Health Benefits for Donors</h3>
|
||||
<button class="question-btn">
|
||||
<span class="icon-up">
|
||||
<i class='bx bx-chevron-up'></i>
|
||||
</span>
|
||||
<span class="icon-down">
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<p>Donating blood can help reduce the risk of certain health conditions, such as hemochromatosis, by lowering the iron levels in the body.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-answ">
|
||||
<div class="question">
|
||||
<h3 class="title-question">Screening for Health Conditions</h3>
|
||||
<button class="question-btn">
|
||||
<span class="icon-up">
|
||||
<i class='bx bx-chevron-up'></i>
|
||||
</span>
|
||||
<span class="icon-down">
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<p>Before blood is used for transfusions, it undergoes rigorous testing for infectious diseases, ensuring the safety of the blood supply. Donating blood can also act as an opportunity to identify potential health issues in donors.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-2-img">
|
||||
<img src="images/accordion.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event">
|
||||
<div class="container">
|
||||
<div class="event-heading">
|
||||
<h2>June Events</h2>
|
||||
</div>
|
||||
<div class="card-event">
|
||||
<div class="event-image">
|
||||
<img src="images/event-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="event-content">
|
||||
<h2 class="event-title">World Blood Doner Day 2023</h2>
|
||||
<div class="event-detail">
|
||||
<div class="icon-text">
|
||||
<span class="icon-event"><i class='bx bxs-calendar'></i></span>
|
||||
<span class="text-event">June 14, 2023</span>
|
||||
</div>
|
||||
<div class="icon-text">
|
||||
<span class="icon-event"><i class='bx bx-map' ></i></span>
|
||||
<span class="text-event">Grant Park</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="event-subtitle">By donating blood at this event, you will be impacting the lives of many in your community.</p>
|
||||
<div class="event-btn">
|
||||
<a href="" class="button-event">View events</a>
|
||||
<div class="share-button"><i class='bx bxs-share' ></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-event">
|
||||
<div class="event-image">
|
||||
<img src="images/event-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="event-content">
|
||||
<h2 class="event-title">Lincoln Park Community Blood Drive</h2>
|
||||
<div class="event-detail">
|
||||
<div class="icon-text">
|
||||
<span class="icon-event"><i class='bx bxs-calendar'></i></span>
|
||||
<span class="text-event">June 20, 2023</span>
|
||||
</div>
|
||||
<div class="icon-text">
|
||||
<span class="icon-event"><i class='bx bx-map' ></i></span>
|
||||
<span class="text-event">Lincoln Park</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="event-subtitle">Schedule your appointment to donate at an upcoming Lincoln Park community blood drive at Lincoln Park fitness center from 1:00 pm to 3:00 pm.</p>
|
||||
<div class="event-btn">
|
||||
<a href="" class="button-event">View events</a>
|
||||
<div class="share-button"><i class='bx bxs-share' ></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-event">
|
||||
<div class="event-image">
|
||||
<img src="images/event-3.jpg" alt="">
|
||||
</div>
|
||||
<div class="event-content">
|
||||
<h2 class="event-title">Chicago Pride Festival</h2>
|
||||
<div class="event-detail">
|
||||
<div class="icon-text">
|
||||
<span class="icon-event"><i class='bx bxs-calendar'></i></span>
|
||||
<span class="text-event">June 30, 2023</span>
|
||||
</div>
|
||||
<div class="icon-text">
|
||||
<span class="icon-event"><i class='bx bx-map' ></i></span>
|
||||
<span class="text-event">Millennium Park</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="event-subtitle">Blood donation costs you nothing, but it can mean to someone in need. Join the effort and save lives at Millennium Park from 1:00 pm to 4:00pm</p>
|
||||
<div class="event-btn">
|
||||
<a href="" class="button-event">View events</a>
|
||||
<div class="share-button"><i class='bx bxs-share' ></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="partner">
|
||||
<div class="container">
|
||||
<div class="partner-slider">
|
||||
<div class="slide-track">
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-1.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-2.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-3.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-4.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-5.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-6.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-1.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-2.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-3.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-4.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-5.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/partner-6.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer></footer>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<nav class="mobile" data-show>
|
||||
<a href="#" class="close-trigger" close-btn><i class='bx bx-x-circle' ></i></a>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Donate</a>
|
||||
<span class="sub-trigger"><i class='bx bx-chevron-down' ></i></span>
|
||||
<ul class="submenu">
|
||||
<li><a href="">Donate Blood</a></li>
|
||||
<li><a href="">Donation Types</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="">Learn</a>
|
||||
<span class="sub-trigger"><i class='bx bx-chevron-down' ></i></span>
|
||||
<ul class="submenu">
|
||||
<li><a href="">Blood Types</a></li>
|
||||
<li><a href="">First Time Blood Doner</a></li>
|
||||
<li><a href="">Scientific Research</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="">Support</a>
|
||||
<span class="sub-trigger"><i class='bx bx-chevron-down' ></i></span>
|
||||
<ul class="submenu">
|
||||
<li><a href="">Volunteer</a></li>
|
||||
<li><a href="">Partnerships</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="">Service</a>
|
||||
<span class="sub-trigger"><i class='bx bx-chevron-down' ></i></span>
|
||||
<ul class="submenu">
|
||||
<li><a href="">Laboratory Services</a></li>
|
||||
<li><a href="">Clinical Apheresis Services </a></li>
|
||||
<li><a href="">Medical Consultation</a></li>
|
||||
<li><a href="">Cell & Gene Therapy </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="search-modal" data-show>
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="search-head">
|
||||
<strong>Search</strong>
|
||||
<a href="#" class="close-trigger" close-btn><i class='bx bx-x'></i></a>
|
||||
</div>
|
||||
<form action="" class="search">
|
||||
<i class='bx bx-search' ></i>
|
||||
<input type="search" placeholder="Search">
|
||||
<input type="submit" value="Submit">
|
||||
<i class='bx bx-right-arrow-alt' ></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbot-aid">
|
||||
<button class="chatbot-toggler">
|
||||
<span class="chatbot-icon"><i class='bx bx-message-alt'></i></span>
|
||||
<span class="chatbot-icon"><i class='bx bx-x'></i></span>
|
||||
</button>
|
||||
<div class="chatbot">
|
||||
<div class="chatbot-container">
|
||||
<h2> Chatbot</h2>
|
||||
<span class="chatbot-close-btn chatbot-icon"><i class='bx bx-x'></i></span>
|
||||
</div>
|
||||
<ul class="chatbox">
|
||||
<li class="chat incoming">
|
||||
<span class="chatbot-icon"><i class='bx bx-bot' ></i></span>
|
||||
<p>Hi there 👋 <br> What can I help you with?</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="chat-input">
|
||||
<textarea placeholder="Enter your message" required></textarea>
|
||||
<span id="send-btn" class="chatbot-icon"><i class='bx bx-send'></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
const menuTrigger = document.querySelectorAll('[open-btn]');
|
||||
const mobileMenu = document.querySelectorAll('[data-show]');
|
||||
const closeTrigger = document.querySelectorAll('[close-btn]');
|
||||
const overlay = document.querySelector('[data-overlay]');
|
||||
|
||||
for (let x = 0; x < menuTrigger.length; x++){
|
||||
const closeMenu = function(){
|
||||
mobileMenu[x].classList.remove('active');
|
||||
overlay.classList.remove('active');
|
||||
}
|
||||
menuTrigger[x].addEventListener('click', function() {
|
||||
mobileMenu[x].classList.add('active');
|
||||
overlay.classList.add('active');
|
||||
})
|
||||
closeTrigger[x].addEventListener('click', closeMenu);
|
||||
overlay.addEventListener('click', closeMenu)
|
||||
}
|
||||
|
||||
//submenu
|
||||
const submenu = document.querySelectorAll('.sub-trigger');
|
||||
submenu.forEach((menu) => menu.addEventListener('click', toggle));
|
||||
|
||||
function toggle(){
|
||||
submenu.forEach((item) => item != this ? item.classList.remove('expand') : null);
|
||||
if(this.classList != 'expand'){
|
||||
this.classList.toggle('expand')
|
||||
}
|
||||
}
|
||||
|
||||
//progress
|
||||
function progressBar(progressBarNum, progressStart, progressEnd, speed) {
|
||||
|
||||
let progressBar = document.querySelector('.progress-bar-' + progressBarNum);
|
||||
let progressValue = document.querySelector('.progress-value-' + progressBarNum);
|
||||
|
||||
let progress = setInterval(() => {
|
||||
progressStart ++;
|
||||
progressValue.textContent = `${progressStart}%`
|
||||
progressBar.style.background = `conic-gradient(red ${progressStart * 3.6}deg, lightgray 0deg)`
|
||||
|
||||
if(progressStart == progressEnd){
|
||||
clearInterval(progress);
|
||||
}
|
||||
}, speed)
|
||||
|
||||
return progress
|
||||
}
|
||||
progressBar(1, 0, 34, 200);
|
||||
progressBar(2, 0, 6, 300);
|
||||
progressBar(3, 0, 9 ,400);
|
||||
progressBar(4, 0, 2, 500);
|
||||
progressBar(5, 0, 3, 400);
|
||||
progressBar(6, 0, 1, 300);
|
||||
progressBar(7, 0, 38, 200);
|
||||
progressBar(8, 0, 7, 200);
|
||||
|
||||
//slider
|
||||
const swiper = new Swiper('.swiper', {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 30,
|
||||
autoHeight: true,
|
||||
loop: true,
|
||||
breakpoints:{
|
||||
992:{
|
||||
slidesPerView: 3,
|
||||
centeredSlides: true,
|
||||
},
|
||||
641:{
|
||||
slidesPerView: 2,
|
||||
centeredSlides: false,
|
||||
}
|
||||
},
|
||||
pagination: {
|
||||
el: '.pagination',
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.button-next',
|
||||
prevEl: '.button-prev',
|
||||
},
|
||||
});
|
||||
|
||||
//accordion
|
||||
const questions = document.querySelectorAll('.question-answ');
|
||||
questions.forEach(function(question){
|
||||
const btn = question.querySelector('.question-btn');
|
||||
btn.addEventListener("click", function(){
|
||||
questions.forEach(function(item){
|
||||
if(item !== question){
|
||||
item.classList.remove('show-text');
|
||||
}
|
||||
})
|
||||
question.classList.toggle('show-text');
|
||||
})
|
||||
})
|
||||
|
||||
//chatbot
|
||||
const sendBtn = document.querySelector(".chat-input span");
|
||||
const chatInput = document.querySelector(".chat-input textarea");
|
||||
const chatbox = document.querySelector(".chatbox");
|
||||
const chatbotToggler = document.querySelector(".chatbot-toggler");
|
||||
const chatbotCloseBtn = document.querySelector(".chatbot-close-btn");
|
||||
|
||||
let userMessage;
|
||||
const api_key = "API KEY";
|
||||
const inputHeight = chatInput.scrollHeight;
|
||||
|
||||
const createChat = (message, className) => {
|
||||
const chat_ = document.createElement("li");
|
||||
chat_.classList.add("chat", className);
|
||||
let chatContent = className === "outgoing" ? `<p></p>`:`<span class="chatbot-icon"><i class='bx bx-bot'></i></span><p></p>`;
|
||||
chat_.innerHTML = chatContent;
|
||||
chat_.querySelector("p").textContent = message;
|
||||
return chat_;
|
||||
}
|
||||
const generateRespond = (incomingChat_) => {
|
||||
const api_url = "https://api.openai.com/v1/chat/completions";
|
||||
const messageElement = incomingChat_.querySelector("p");
|
||||
|
||||
const requestOptions = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": `Bearer ${api_key}`
|
||||
},
|
||||
body:JSON.stringify({
|
||||
model: "gpt-3.5-turbo",
|
||||
messages: [{role: "user", content: userMessage}]
|
||||
})
|
||||
}
|
||||
fetch(api_url, requestOptions).then(res => res.json()).then(data => {
|
||||
messageElement.textContent = data.choices[0].message.content;
|
||||
}).catch((error) => {
|
||||
messageElement.classList.add("error");
|
||||
messageElement.textContent = "Something went wrong, please try again!";
|
||||
}).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
|
||||
}
|
||||
|
||||
const handleChat = () =>{
|
||||
userMessage = chatInput.value.trim();
|
||||
if(!userMessage) return;
|
||||
chatInput.value = "";
|
||||
chatInput.style.height = `${inputHeight}px`
|
||||
|
||||
chatbox.appendChild(createChat(userMessage, "outgoing"));
|
||||
chatbox.scrollTo(0, chatbox.scrollHeight);
|
||||
|
||||
setTimeout (() => {
|
||||
const incomingChat_ = createChat("Typing...", "incoming")
|
||||
chatbox.appendChild(incomingChat_);
|
||||
chatbox.scrollTo(0, chatbox.scrollHeight);
|
||||
generateRespond(incomingChat_);
|
||||
}, 600);
|
||||
}
|
||||
chatInput.addEventListener("input", () => {
|
||||
chatInput.style.height = `${inputHeight}px`
|
||||
chatInput.style.height = `${chatInput.scrollHeight}px`
|
||||
});
|
||||
|
||||
chatInput.addEventListener("keydown", (x) => {
|
||||
if(x.key === "Enter" && !x.shiftKey && window.innerWidth > 490){
|
||||
x.preventDefault();
|
||||
handleChat();
|
||||
}
|
||||
});
|
||||
|
||||
sendBtn.addEventListener("click", handleChat);
|
||||
chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
|
||||
chatbotCloseBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
|
||||
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,44 +0,0 @@
|
|||
const menuToggle = document.querySelectorAll('[data-open-btn]');
|
||||
const mobileMenu = document.querySelectorAll('[data-show]');
|
||||
const closeToggle = document.querySelectorAll('[data-close-btn]');
|
||||
const overlay = document.querySelector('[data-overlay]');
|
||||
|
||||
for (let x = 0; x < menuToggle.length; x++){
|
||||
const closeMenu = function(){
|
||||
mobileMenu[x].classList.remove('active');
|
||||
overlay.classList.remove('active');
|
||||
}
|
||||
menuToggle[x].addEventListener('click', function(){
|
||||
mobileMenu[x].classList.add('active');
|
||||
overlay.classList.add('active');
|
||||
})
|
||||
closeToggle[x].addEventListener('click', closeMenu);
|
||||
overlay.addEventListener('click', closeMenu)
|
||||
}
|
||||
|
||||
const subMenu = document.querySelectorAll('.sub-toggle');
|
||||
subMenu.forEach((menu) => menu.addEventListener('click', toggle));
|
||||
function toggle(){
|
||||
subMenu.forEach((item) => item != this? item.classList.remove('expand'): null);
|
||||
|
||||
if(this.classList != 'expand'){
|
||||
this.classList.toggle('expand')
|
||||
}
|
||||
}
|
||||
|
||||
//---------- Swiper ----------
|
||||
var tabbedNav = new Swiper('.tabs',{
|
||||
slidePerView: 1,
|
||||
centeredSlides: true,
|
||||
slidesPerGroup: false,
|
||||
spaceBetween: 20,
|
||||
});
|
||||
|
||||
var theTab = new Swiper('.tabs-box',{
|
||||
slidePerView: 1,
|
||||
autoHeight: true,
|
||||
thumbs: {
|
||||
swiper: tabbedNav
|
||||
},
|
||||
|
||||
});
|
||||
|
|
@ -1,826 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>A.Z Shop Category</title>
|
||||
<link rel="stylesheet" href="page.css">
|
||||
<link rel="shortcut icon" href="images/icon.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><span class="item-floating">4</span><i class='bx bx-heart'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="../index.html"><span>Home</span></a></li>
|
||||
<li><a href=""><span>Products</span><i class='bx bx-chevron-down'></i></a>
|
||||
<ul class="sub-mega">
|
||||
<li>
|
||||
<div class="container">
|
||||
<div class="wrapper">
|
||||
<div class="mega-content">
|
||||
<div class="dotgrid">
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="page.html" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top1.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top1-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>20% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Castleton Green Halterneck Top</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$279.00</span>
|
||||
<span class="current">$223.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top3.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top3-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Scoop-neck T-shirt</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$99.00</span>
|
||||
<span class="current">$74.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Crayola Lemon Thong Bodysuit</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$125.00</span>
|
||||
<span class="current">$93.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">CLOTHING</h3>
|
||||
<ul>
|
||||
<li><a href="">Tops</a></li>
|
||||
<li><a href="">Bottoms</a></li>
|
||||
<li><a href="">Dresses</a></li>
|
||||
<li><a href="">Beachwear</a></li>
|
||||
<li><a href="">Sportswear</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">SHOES</h3>
|
||||
<ul>
|
||||
<li><a href="">Boots</a></li>
|
||||
<li><a href="">Flats</a></li>
|
||||
<li><a href="">Heigh Heels</a></li>
|
||||
<li><a href="">Flip Flops</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">ACCESSORIES</h3>
|
||||
<ul>
|
||||
<li><a href="">Bags</a></li>
|
||||
<li><a href="">Belts</a></li>
|
||||
<li><a href="">Sunglasses</a></li>
|
||||
<li><a href="">Jewelries</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href=""><span>Shop</span></a></li>
|
||||
<li><a href=""><span>Blog</span><i class='bx bx-chevron-down'></i></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="">Latest</a></li>
|
||||
<li><a href="">Jumper</a></li>
|
||||
<li><a href="">A Must Read</a></li>
|
||||
<li><a href="">Go Viral</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="">A.Z Shop</a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="#0" trigger-button data-target="search-float"><i class='bx bx-search' ></i></a></li>
|
||||
<li><a href="#0" trigger-button data-target="data-cart"><span class="item-floating">2</span><i class='bx bx-shopping-bag' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="search-float" class="search-float">
|
||||
<div class="container wide">
|
||||
<form action="" class="search">
|
||||
<i class='bx bx-search'></i>
|
||||
<input type="search" class="input" placeholder="Search products">
|
||||
<i class='bx bx-x' close-button></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="breadcrumb list-inline">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Products</a></li>
|
||||
<li><span>Tops</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="section">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="heading">
|
||||
<h1 class="title">Tops</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="sidebar-filter" class="sidebar">
|
||||
<div class="wrap">
|
||||
<a href="#0" class="close-trigger" close-button>
|
||||
<i class='bx bx-x'></i>
|
||||
</a>
|
||||
<div class="siderbar-content">
|
||||
<div class="sidebar-title">Filter</div>
|
||||
<div class="widget">
|
||||
<div class="summary">
|
||||
<input type="checkbox" name="category" id="category-size" checked>
|
||||
<label for="category-size">
|
||||
<span>Size</span>
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</label>
|
||||
<div class="accord product-size">
|
||||
<div class="wrap">
|
||||
<button>XS</button>
|
||||
<button>S</button>
|
||||
<button>M</button>
|
||||
<button>L</button>
|
||||
<button>XL</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget">
|
||||
<div class="summary">
|
||||
<input type="checkbox" name="category" id="category-color" checked>
|
||||
<label for="category-color">
|
||||
<span>Colors</span>
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</label>
|
||||
<div class="accord product-color">
|
||||
<div class="wrap">
|
||||
<button class="color1"></button>
|
||||
<button class="color2"></button>
|
||||
<button class="color3"></button>
|
||||
<button class="color4"></button>
|
||||
<button class="color5"></button>
|
||||
<button class="color6"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget">
|
||||
<div class="summary">
|
||||
<input type="checkbox" name="category" id="category-categories" checked>
|
||||
<label for="category-categories">
|
||||
<span>Categories</span>
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</label>
|
||||
<div class="accord list-block scrollto">
|
||||
<ul class="wrapper initial">
|
||||
<li><a href="">Tops</a></li>
|
||||
<li><a href="">Bottoms</a></li>
|
||||
<li><a href="">Dresses</a></li>
|
||||
<li><a href="">Beachwear</a></li>
|
||||
<li><a href="">Activewear</a></li>
|
||||
<li><a href="">Shoes</a></li>
|
||||
<li><a href="">Bags</a></li>
|
||||
<li><a href="">Belts</a></li>
|
||||
<li><a href="">Sunglasses</a></li>
|
||||
<li><a href="">Jewelries</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget">
|
||||
<div class="summary">
|
||||
<label><span>Price</span></label>
|
||||
<div class="range-track">
|
||||
<input type="range" value="20" min="0" max="400" step="1">
|
||||
</div>
|
||||
<div class="price-range grey-color">
|
||||
<span>$20</span>
|
||||
<span>$400</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-content">
|
||||
<div class="sorter">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="sidebar-filter"><i class='bx bx-filter-alt' ></i></a>
|
||||
<div class="left">
|
||||
<span class="grey-color">Showing 6 of 30 results</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="sort-list">
|
||||
<div class="wrap">
|
||||
<div class="opt-trigger">
|
||||
<span class="value">Default sorting</span>
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="active"><a href="#0">Default sorting</a></li>
|
||||
<li><a href="#0">Popular</a></li>
|
||||
<li><a href="#0">Rating</a></li>
|
||||
<li><a href="#0">Lastest</a></li>
|
||||
<li><a href="#0">Price: low to high</a></li>
|
||||
<li><a href="30">Price: high to low</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-pause'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-list-check'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-layout'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-grid-alt'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dotgrid alsolike-box">
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/best3.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/best3-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Embroidered Semi-Sheer Blouse</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$145.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/new7.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/new7-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Snow Lace Trim Shirt</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$135.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/tops1.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/tops1-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Linen-blend Shirt</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$79.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/best2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/best2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">White Snow Open Back Halter Top</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$89.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/new6.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/new6-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Zebra Halterneck Thong Bodysuit</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$85.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/tops2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/tops2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Crop Knit Turtleneck Sweater</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$89.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/on2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/on2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>10% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Neck Knitted Crop Top</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$109.00</span>
|
||||
<span class="current">$98.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top1.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top1-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>20% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Castleton Green Halterneck Top</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$279.00</span>
|
||||
<span class="current">$223.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top3.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top3-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Scoop-neck T-shirt</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$99.00</span>
|
||||
<span class="current">$74.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Crayola Lemon Thong Bodysuit</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$125.00</span>
|
||||
<span class="current">$93.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button"><a href="" class="primary-btn">Load more</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
<div class="inner-footer">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="top">
|
||||
<div class="subscribe">
|
||||
<h3>Subscribe via email</h3>
|
||||
<p class="grey-color">Subscribe and recive a 35% discount on your next purchase</p>
|
||||
<form action="" class="search">
|
||||
<i class='bx bx-envelope'></i>
|
||||
<input type="text" class="input" placeholder="Enter your email">
|
||||
<i class='bx bx-right-arrow-alt' ></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title social">Social Media</h3>
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bxl-instagram-alt'></i> Instagram</a></li>
|
||||
<li><a href="#"><i class='bx bxl-twitter'></i> Twitter</a></li>
|
||||
<li><a href="#"><i class='bx bxl-pinterest'></i> Printerest</a></li>
|
||||
<li><a href="#"><i class='bx bxl-youtube' ></i> Youtube</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">Service</h3>
|
||||
<ul>
|
||||
<li><a href="#">About Us</a></li>
|
||||
<li><a href="#">Delivery Service</a></li>
|
||||
<li><a href="#">Terms & Condition</a></li>
|
||||
<li><a href="#">Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">Company</h3>
|
||||
<div class="company-address grey-color">
|
||||
<p>1234 N Lincoln Park W <br>Chicago, IL 60600</p>
|
||||
<p><a href="#">+1 (312) 123-4567</a> <br> <a href="#">az.shop@outlook.com</a></p>
|
||||
<p>Weekdays: 11:00 am - 8:00 pm<br> Weekends: 10:00 am to 9:00 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href=""><span>Home</span></a></li>
|
||||
<li class="has-child"><a href=""><span>Clothing</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="#">Tops</a></li>
|
||||
<li><a href="#">Bottoms</a></li>
|
||||
<li><a href="#">Dresses</a></li>
|
||||
<li><a href="#">Beachwear</a></li>
|
||||
<li><a href="#">Sportswear</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-child"><a href=""><span>Shoes</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="#">Boots</a></li>
|
||||
<li><a href="#">Flats</a></li>
|
||||
<li><a href="#">High Heels</a></li>
|
||||
<li><a href="#">Flip Flops</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-child"><a href=""><span>Accessories</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="#">Bags</a></li>
|
||||
<li><a href="#">Belts</a></li>
|
||||
<li><a href="#">Sunglasses</a></li>
|
||||
<li><a href="#">Jewelries</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href=""><span>Blog</span></a></li>
|
||||
<li><a href=""><span>Offers</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="button">
|
||||
<a href="" class="secondary-btn">Login</a>
|
||||
<a href="" class="primary-btn">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="data-cart" class="cart-menu">
|
||||
<div class="wrap">
|
||||
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
|
||||
<div class="scrollto cart-outer">
|
||||
<div class="wrapper">
|
||||
<div class="cart-list">
|
||||
<div class="wrapper">
|
||||
<div class="cart-header">
|
||||
<h2>Shopping cart</h2>
|
||||
</div>
|
||||
<div class="cart-body scrollto">
|
||||
<div class="product-list">
|
||||
<div class="wrapper">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="grouping">
|
||||
<div class="quantity">
|
||||
<div class="control">
|
||||
<button>-</button>
|
||||
<input type="text" value="1">
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumbnail">
|
||||
<a href="">
|
||||
<img src="images/on4.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="variants">
|
||||
<h4 class="dot-title"><a href="">Canary Dress</a></h4>
|
||||
<div class="colcor grey-color">
|
||||
<span>Color:</span>
|
||||
<span>Canary yellow</span>
|
||||
</div>
|
||||
<div class="size grey-color">
|
||||
<span>Size:</span>
|
||||
<span>S</span>
|
||||
</div>
|
||||
<div class="price">$103.00</div>
|
||||
<a href="" class="item-remove">
|
||||
<i class='bx bx-x'></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="grouping">
|
||||
<div class="quantity">
|
||||
<div class="control">
|
||||
<button>-</button>
|
||||
<input type="text" value="1">
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumbnail">
|
||||
<a href="">
|
||||
<img src="images/new4.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="variants">
|
||||
<h4 class="dot-title"><a href="">Sequin-fringer Skirt</a></h4>
|
||||
<div class="colcor grey-color">
|
||||
<span>Color:</span>
|
||||
<span>Buttermilk</span>
|
||||
</div>
|
||||
<div class="size grey-color">
|
||||
<span>Size:</span>
|
||||
<span>M</span>
|
||||
</div>
|
||||
<div class="price">$109.00</div>
|
||||
<a href="" class="item-remove">
|
||||
<i class='bx bx-x'></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-footer">
|
||||
<div class="discount">
|
||||
<form action="">
|
||||
<input type="text" class="input" placeholder="Discount code">
|
||||
<input type="submit" value="Apply" class="submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="pricing">
|
||||
<ul>
|
||||
<li>
|
||||
<span>Subtotal</span>
|
||||
<span class="value"></span>
|
||||
</li>
|
||||
<ul>
|
||||
<li><span>Shipping</span></li>
|
||||
<li>
|
||||
<div>
|
||||
<input type="radio" class="checking" name="shipping">
|
||||
<label for="">Free</label>
|
||||
</div>
|
||||
<span class="value">$0.00</span>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<input type="radio" class="checking" name="shipping">
|
||||
<label for="">Flat Rate</label>
|
||||
</div>
|
||||
<span class="value">$9.99</span>
|
||||
</li>
|
||||
</ul>
|
||||
<li>
|
||||
<span>Promotion Discount</span>
|
||||
<span class="value">-$0.00</span>
|
||||
</li>
|
||||
<li class="total">
|
||||
<span>Total</span>
|
||||
<span class="value">$212.00</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="button">
|
||||
<a href="" class="secondary-btn">Checkout</a>
|
||||
<a href="" class="grey-link">View cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
|
||||
<script src="page.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,889 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>A.Z Shop products</title>
|
||||
<link rel="stylesheet" href="page.css">
|
||||
<link rel="shortcut icon" href="images/icon.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page" class="page-single">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><span class="item-floating">4</span><i class='bx bx-heart'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="../index.html"><span>Home</span></a></li>
|
||||
<li><a href=""><span>Products</span><i class='bx bx-chevron-down'></i></a>
|
||||
<ul class="sub-mega">
|
||||
<li>
|
||||
<div class="container">
|
||||
<div class="wrapper">
|
||||
<div class="mega-content">
|
||||
<div class="dotgrid">
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top1.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top1-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>20% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Castleton Green Halterneck Top</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$279.00</span>
|
||||
<span class="current">$223.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top3.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top3-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Scoop-neck T-shirt</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$99.00</span>
|
||||
<span class="current">$74.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Crayola Lemon Thong Bodysuit</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$125.00</span>
|
||||
<span class="current">$93.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">CLOTHING</h3>
|
||||
<ul>
|
||||
<li><a href="">Tops</a></li>
|
||||
<li><a href="">Bottoms</a></li>
|
||||
<li><a href="">Dresses</a></li>
|
||||
<li><a href="">Beachwear</a></li>
|
||||
<li><a href="">Sportswear</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">SHOES</h3>
|
||||
<ul>
|
||||
<li><a href="">Boots</a></li>
|
||||
<li><a href="">Flats</a></li>
|
||||
<li><a href="">Heigh Heels</a></li>
|
||||
<li><a href="">Flip Flops</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">ACCESSORIES</h3>
|
||||
<ul>
|
||||
<li><a href="">Bags</a></li>
|
||||
<li><a href="">Belts</a></li>
|
||||
<li><a href="">Sunglasses</a></li>
|
||||
<li><a href="">Jewelries</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href=""><span>Shop</span></a></li>
|
||||
<li><a href=""><span>Blog</span><i class='bx bx-chevron-down'></i></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="">Latest</a></li>
|
||||
<li><a href="">Jumper</a></li>
|
||||
<li><a href="">A Must Read</a></li>
|
||||
<li><a href="">Go Viral</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="">A.Z Shop</a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="#0" trigger-button data-target="search-float"><i class='bx bx-search' ></i></a></li>
|
||||
<li><a href="#0" trigger-button data-target="data-cart"><span class="item-floating">2</span><i class='bx bx-shopping-bag' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="search-float" class="search-float">
|
||||
<div class="container wide">
|
||||
<form action="" class="search">
|
||||
<i class='bx bx-search'></i>
|
||||
<input type="search" class="input" placeholder="Search products">
|
||||
<i class='bx bx-x' close-button></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="breadcrumb list-inline">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Products</a></li>
|
||||
<li><a href="">Tops</a></li>
|
||||
<li><span>Castleton Green Halterneck Top</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="product dotgrid">
|
||||
<div class="wrapper">
|
||||
<div class="image">
|
||||
<div class="outer-main">
|
||||
<div class="main-image swiper">
|
||||
<div class="wrap swiper-wrapper">
|
||||
<div class="item swiper-slide"><img src="images/top1.jpg" alt=""></div>
|
||||
<div class="item swiper-slide"><img src="images/top1-1.jpg" alt=""></div>
|
||||
<div class="item swiper-slide"><img src="images/top1-2.jpg" alt=""></div>
|
||||
<div class="item swiper-slide"><img src="images/top1-3.jpg" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-pagination">
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-thumb ob-cover">
|
||||
<div class="thumbnail-image swiper" >
|
||||
<div class="wrap swiper-wrapper">
|
||||
<div class="item swiper-slide">
|
||||
<div class="thumb-wrap"><img src="images/top1.jpg" alt=""></div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="thumb-wrap"><img src="images/top1-1.jpg" alt=""></div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="thumb-wrap"><img src="images/top1-2.jpg" alt=""></div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="thumb-wrap"><img src="images/top1-3.jpg" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary">
|
||||
<div class="entry">
|
||||
<h1 class="title">Castleton Green Halterneck Top</h1>
|
||||
<div class="product-group">
|
||||
<div class="product-price">
|
||||
<span class="current">$223.00</span>
|
||||
<div class="wrap">
|
||||
<span class="before">$279.00</span>
|
||||
<span class="discount">20% OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-rating">
|
||||
<span>
|
||||
<span>4.5</span>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star-half' ></i>
|
||||
</span>
|
||||
<a href="">2 Reviews</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-color">
|
||||
<span>Colors:</span>
|
||||
<div class="wrap">
|
||||
<button class="color1 selected"></button>
|
||||
<button class="color2"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-size">
|
||||
<span>Size:</span>
|
||||
<div class="wrap">
|
||||
<button disabled>XS</button>
|
||||
<button class="selected">S</button>
|
||||
<button>M</button>
|
||||
<button>L</button>
|
||||
<button>XL</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-stock">
|
||||
<div class="wrap">
|
||||
<span class="grey-color">in stock</span>
|
||||
<i class='bx bxs-check-circle' ></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-action">
|
||||
<div class="qty">
|
||||
<button class="decrease">-</button>
|
||||
<input type="text" value="1">
|
||||
<button class="increase">+</button>
|
||||
</div>
|
||||
<div class="addcart button">
|
||||
<button type="submit" class="primary-btn">Add to Cart</button>
|
||||
</div>
|
||||
<div class="buynow button">
|
||||
<button type="submit" class="secondary-btn">Buy Now</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-control list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart' ></i><span>Add to List</span></a></li>
|
||||
<li><a href="#0" trigger-button data-target="data-share"><i class='bx bx-share' ></i><span>Share</span></a></li>
|
||||
<li><a href="#0" trigger-button data-target="data-question"><i class='bx bx-help-circle' ></i><span>Help</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="shipping">
|
||||
<ul>
|
||||
<li><i class='bx bx-package' ></i>
|
||||
<span>Free shipping & return</span>
|
||||
<span class="grey-color">On orders over $159</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class='bx bxs-truck' ></i>
|
||||
<span>Estimate delivery:</span>
|
||||
<span class="grey-color">11 -15 Feb, 2024</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product detail">
|
||||
<div class="wrapper tabbed">
|
||||
<nav class="list-inline scrollto">
|
||||
<ul class="wrapper">
|
||||
<li class="active"><a href="#0" class="tabbed-trigger" data-id="product-description"><span>Product Details</span></a></li>
|
||||
<li><a href="#0" class="tabbed-trigger" data-id="product-custom"><span>Size Chart</span></a></li>
|
||||
<li><a href="#0" class="tabbed-trigger" data-id="product-review"><span>Reviews</span></a></li>
|
||||
<li><a href="#0" class="tabbed-trigger" data-id="product-shipping"><span>Shipping</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div id="product-description" class="product-about description active">
|
||||
<div class="text-block">
|
||||
<h3>Castleton Green Halterneck Top</h3>
|
||||
<div class="grey-color">
|
||||
<p>This Castleton Green halterneck top is double lined to prevent see-through,and holds your breast in place so well you don't even need a bra!</p>
|
||||
<p>Sexy going out tops,easy to dress up and dress down! perfect for any occasion. Cocktail party, clubs, dates, night out,brunch,beach,holiday and so on. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dotgrid">
|
||||
<div class="wrapper">
|
||||
<div class="list-block">
|
||||
<h4>Materials & Care</h4>
|
||||
<ul class="grey-color">
|
||||
<li>Rayon 100%</li>
|
||||
<li>Iron when damp</li>
|
||||
<li>Machine wash cold</li>
|
||||
<li>Can be dry cleaned</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="product-custom" class="product-about custom">
|
||||
<h3>Size Chart</h3>
|
||||
<div class="image">
|
||||
<img src="images/size-guid.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div id="product-review" class="product-about review">
|
||||
<div class="wrapper">
|
||||
<h3>Reviews</h3>
|
||||
<div class="head-review">
|
||||
<div class="sum-rating">
|
||||
<strong>4.5</strong>
|
||||
<span>2 reviews</span>
|
||||
</div>
|
||||
<div class="button">
|
||||
<a href="#0" class="primary-btn" trigger-button data-target="data-review">Write a Review</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-review">
|
||||
<div class="profile">
|
||||
<div class="thumb-name">
|
||||
<div class="image">
|
||||
<img src="images/review.jpg" alt="">
|
||||
</div>
|
||||
<div class="grouping">
|
||||
<div class="name">Jane Doe</div>
|
||||
<div class="rating">
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
</div>
|
||||
<div class="date grey-color">On July 3, 2023</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<strong>Great purchase</strong>
|
||||
<p class="grey-color">This was amazing. The first thing I notice is the material. So soft and comfortable.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile">
|
||||
<div class="thumb-name">
|
||||
<div class="image">
|
||||
<img src="images/review-anonymous.png" alt="">
|
||||
</div>
|
||||
<div class="grouping">
|
||||
<div class="name">Anonymous</div>
|
||||
<div class="rating">
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bx-star'></i>
|
||||
</div>
|
||||
<div class="date grey-color">On July 3, 2023</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<strong>Good product</strong>
|
||||
<p class="grey-color">This was amazing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="product-shipping" class="product-about shipping">
|
||||
<div class="grey-color">
|
||||
<p>Business days are Monday-Friday; Holidays, Saturday, and Sunday are not included inshipping days. Shipping timelines are estimates and are not guranteed.</p>
|
||||
<p>For a more specific delivery ETA based on the exact item(s) you want to purchase, please call us at +1 (123) 456-7890 or +1 (321) 654-0987.</p>
|
||||
<p>Shipping cost is calculated on a "per order", "per item", or "per pound" basis and is based on the shipping option you select.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alsolike">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="heading">
|
||||
<h2 class="title">You may also like</h2>
|
||||
</div>
|
||||
<div class="inner-wrapper">
|
||||
<div class="dotgrid alsolike-box">
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/new1.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/new1-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Onyx Dress with Embroidery</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$129.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/new5.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/new5-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Villie Wide-legs Shorts</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$115.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/best2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/best2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">White Snow Open Back Halter Top</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$89.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/new9.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/new9-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Jester Loafers</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$149.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Crayola Lemon Thong Bodysuit</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$125.00</span>
|
||||
<span class="current">$93.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="inner-footer">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="top">
|
||||
<div class="subscribe">
|
||||
<h3>Subscribe via email</h3>
|
||||
<p class="grey-color">Subscribe and recive a 35% discount on your next purchase</p>
|
||||
<form action="" class="search">
|
||||
<i class='bx bx-envelope'></i>
|
||||
<input type="text" class="input" placeholder="Enter your email">
|
||||
<i class='bx bx-right-arrow-alt' ></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title social">Social Media</h3>
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bxl-instagram-alt'></i> Instagram</a></li>
|
||||
<li><a href="#"><i class='bx bxl-twitter'></i> Twitter</a></li>
|
||||
<li><a href="#"><i class='bx bxl-pinterest'></i> Printerest</a></li>
|
||||
<li><a href="#"><i class='bx bxl-youtube' ></i> Youtube</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">Service</h3>
|
||||
<ul>
|
||||
<li><a href="#">About Us</a></li>
|
||||
<li><a href="#">Delivery Service</a></li>
|
||||
<li><a href="#">Terms & Condition</a></li>
|
||||
<li><a href="#">Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">Company</h3>
|
||||
<div class="company-address grey-color">
|
||||
<p>1234 N Lincoln Park W <br>Chicago, IL 60600</p>
|
||||
<p><a href="#">+1 (312) 123-4567</a> <br> <a href="#">az.shop@outlook.com</a></p>
|
||||
<p>Weekdays: 11:00 am - 8:00 pm<br> Weekends: 10:00 am to 9:00 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href=""><span>Home</span></a></li>
|
||||
<li class="has-child"><a href=""><span>Clothing</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="#">Tops</a></li>
|
||||
<li><a href="#">Bottoms</a></li>
|
||||
<li><a href="#">Dresses</a></li>
|
||||
<li><a href="#">Beachwear</a></li>
|
||||
<li><a href="#">Sportswear</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-child"><a href=""><span>Shoes</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="#">Boots</a></li>
|
||||
<li><a href="#">Flats</a></li>
|
||||
<li><a href="#">High Heels</a></li>
|
||||
<li><a href="#">Flip Flops</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-child"><a href=""><span>Accessories</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="#">Bags</a></li>
|
||||
<li><a href="#">Belts</a></li>
|
||||
<li><a href="#">Sunglasses</a></li>
|
||||
<li><a href="#">Jewelries</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href=""><span>Blog</span></a></li>
|
||||
<li><a href=""><span>Offers</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="button">
|
||||
<a href="" class="secondary-btn">Login</a>
|
||||
<a href="" class="primary-btn">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="data-share" class="data-popup data_share">
|
||||
<div class="wrap">
|
||||
<div class="data-content">
|
||||
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
|
||||
<div class="form">
|
||||
<label>Copy link</label>
|
||||
<input type="text" disabled value="https://www.youtube.com/watch?v=FMgraHfrw_o">
|
||||
<span><i class='bx bx-copy' ></i></span>
|
||||
</div>
|
||||
<div class="media-share list-inline">
|
||||
<label>Share</label>
|
||||
<ul>
|
||||
<lu><a href=""><i class='bx bxl-instagram' ></i></a></lu>
|
||||
<lu><a href=""><i class='bx bxl-twitter' ></i></a></lu>
|
||||
<lu><a href=""><i class='bx bxl-pinterest' ></i></a></lu>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="data-question" class="data-popup data_question">
|
||||
<div class="wrap">
|
||||
<div class="data-content">
|
||||
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
|
||||
<h3>Question</h3>
|
||||
<form action="">
|
||||
<div><input type="text" placeholder="Name"></div>
|
||||
<div><input type="text" placeholder="Email"></div>
|
||||
<div><textarea placeholder="Leave us your question(s)" cols="30" rows="4"></textarea></div>
|
||||
<div class="button">
|
||||
<button type="submit" class="secondary-btn">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="data-review" class="data-popup data_review">
|
||||
<div class="wrap">
|
||||
<div class="data-content">
|
||||
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
|
||||
<h3>Leave a Review</h3>
|
||||
<form action="">
|
||||
<div class="dotgrid">
|
||||
<div class="wrapper">
|
||||
<div><input type="text" placeholder="Name"></div>
|
||||
<div><input type="text" placeholder="Email"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rating">
|
||||
<span>Rating: </span>
|
||||
<div class="stars">
|
||||
<input type="radio" name="rating" id="star5">
|
||||
<label for="star5"><i class='bx bxs-star' ></i></label>
|
||||
<input type="radio" name="rating" id="star4">
|
||||
<label for="star4"><i class='bx bxs-star' ></i></label>
|
||||
<input type="radio" name="rating" id="star3">
|
||||
<label for="star3"><i class='bx bxs-star' ></i></label>
|
||||
<input type="radio" name="rating" id="star2">
|
||||
<label for="star2"><i class='bx bxs-star' ></i></label>
|
||||
<input type="radio" name="rating" id="star1">
|
||||
<label for="star1"><i class='bx bxs-star' ></i></label>
|
||||
</div>
|
||||
</div>
|
||||
<div><input type="text" placeholder="Review title"></div>
|
||||
<div><textarea placeholder="Your review" cols="30" rows="4"></textarea></div>
|
||||
<div class="button">
|
||||
<button type="submit" class="secondary-btn">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="data-cart" class="cart-menu">
|
||||
<div class="wrap">
|
||||
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
|
||||
<div class="scrollto cart-outer">
|
||||
<div class="wrapper">
|
||||
<div class="cart-list">
|
||||
<div class="wrapper">
|
||||
<div class="cart-header">
|
||||
<h2>Shopping cart</h2>
|
||||
</div>
|
||||
<div class="cart-body scrollto">
|
||||
<div class="product-list">
|
||||
<div class="wrapper">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="grouping">
|
||||
<div class="quantity">
|
||||
<div class="control">
|
||||
<button>-</button>
|
||||
<input type="text" value="1">
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumbnail">
|
||||
<a href="">
|
||||
<img src="images/on4.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="variants">
|
||||
<h4 class="dot-title"><a href="">Canary Dress</a></h4>
|
||||
<div class="colcor grey-color">
|
||||
<span>Color:</span>
|
||||
<span>Canary yellow</span>
|
||||
</div>
|
||||
<div class="size grey-color">
|
||||
<span>Size:</span>
|
||||
<span>S</span>
|
||||
</div>
|
||||
<div class="price">$103.00</div>
|
||||
<a href="" class="item-remove">
|
||||
<i class='bx bx-x'></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="grouping">
|
||||
<div class="quantity">
|
||||
<div class="control">
|
||||
<button>-</button>
|
||||
<input type="text" value="1">
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumbnail">
|
||||
<a href="">
|
||||
<img src="images/new4.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="variants">
|
||||
<h4 class="dot-title"><a href="">Sequin-fringer Skirt</a></h4>
|
||||
<div class="colcor grey-color">
|
||||
<span>Color:</span>
|
||||
<span>Buttermilk</span>
|
||||
</div>
|
||||
<div class="size grey-color">
|
||||
<span>Size:</span>
|
||||
<span>M</span>
|
||||
</div>
|
||||
<div class="price">$109.00</div>
|
||||
<a href="" class="item-remove">
|
||||
<i class='bx bx-x'></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-footer">
|
||||
<div class="discount">
|
||||
<form action="">
|
||||
<input type="text" class="input" placeholder="Discount code">
|
||||
<input type="submit" value="Apply" class="submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="pricing">
|
||||
<ul>
|
||||
<li>
|
||||
<span>Subtotal</span>
|
||||
<span class="value"></span>
|
||||
</li>
|
||||
<ul>
|
||||
<li><span>Shipping</span></li>
|
||||
<li>
|
||||
<div>
|
||||
<input type="radio" class="checking" name="shipping">
|
||||
<label for="">Free</label>
|
||||
</div>
|
||||
<span class="value">$0.00</span>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<input type="radio" class="checking" name="shipping">
|
||||
<label for="">Flat Rate</label>
|
||||
</div>
|
||||
<span class="value">$9.99</span>
|
||||
</li>
|
||||
</ul>
|
||||
<li>
|
||||
<span>Promotion Discount</span>
|
||||
<span class="value">-$0.00</span>
|
||||
</li>
|
||||
<li class="total">
|
||||
<span>Total</span>
|
||||
<span class="value">$212.00</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="button">
|
||||
<a href="" class="secondary-btn">Checkout</a>
|
||||
<a href="" class="grey-link">View cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
|
||||
<script src="page.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
//navbar
|
||||
const openBtn = document.querySelectorAll('[trigger-button]');
|
||||
const closeBtn = document.querySelectorAll('[close-button]');
|
||||
const overlay = document.querySelector('[data-overlay]');
|
||||
|
||||
for (let x = 0; x < openBtn.length; x++){
|
||||
let currentID = openBtn[x].dataset.target,
|
||||
targetEl =document.querySelector(`#${currentID}`)
|
||||
|
||||
const openData =function(){
|
||||
targetEl.classList.remove('active');
|
||||
overlay.classList.remove('active');
|
||||
};
|
||||
openBtn[x].addEventListener('click', function(){
|
||||
targetEl.classList.add('active');
|
||||
overlay.classList.add('active');
|
||||
});
|
||||
targetEl.querySelector('[close-button]').addEventListener('click',openData);
|
||||
overlay.addEventListener('click', openData);
|
||||
}
|
||||
//submenu
|
||||
const subMenu = document.querySelectorAll('.child-trigger');
|
||||
subMenu.forEach((menu) => menu.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
subMenu.forEach((item) => item != this ? item.closest('.has-child').classList.remove('active') : null);
|
||||
|
||||
if(this.closest('.has-child').classList != 'active'){
|
||||
this.closest('.has-child').classList.toggle('active');
|
||||
}
|
||||
}))
|
||||
|
||||
//swiper product
|
||||
const thumbImage = new Swiper('.thumbnail-image', {
|
||||
//loop: true,
|
||||
direction:'vertical',
|
||||
spaceBetween: 25,
|
||||
slidePerView: 1,
|
||||
freeMode: true,
|
||||
watchSlideProgress: true,
|
||||
});
|
||||
const mainImage = new Swiper('.main-image', {
|
||||
loop: true,
|
||||
autoHeight: true,
|
||||
|
||||
pagination:{
|
||||
el: '.swiper-pagination',
|
||||
clickable:true,
|
||||
},
|
||||
thumbs:{
|
||||
swiper: thumbImage,
|
||||
},
|
||||
});
|
||||
|
||||
const trigger = document.querySelectorAll('.tabbed-trigger'),
|
||||
content = document.querySelectorAll('.tabbed > div');
|
||||
|
||||
trigger.forEach((btn) => {
|
||||
btn.addEventListener('click', function(){
|
||||
let dataTarget = this.dataset.id,
|
||||
body = document.querySelector(`#${dataTarget}`);
|
||||
|
||||
trigger.forEach((b) => b.parentNode.classList.remove('active'));
|
||||
content.forEach((s) => s.classList.remove('active'));
|
||||
this.parentNode.classList.add('active');
|
||||
body.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
//popup
|
||||
const sorter = document.querySelector('.sort-list');
|
||||
if(sorter){
|
||||
const sortLi = sorter.querySelectorAll('li');
|
||||
sorter.querySelector('.opt-trigger').addEventListener('click', function(){
|
||||
sorter.querySelector('ul').classList.toggle('show');
|
||||
});
|
||||
|
||||
sortLi.forEach((item) => item.addEventListener('click', function(){
|
||||
sortLi.forEach((i) => li != this ? li.classList.remove('active'): null);
|
||||
|
||||
this.classList.add('active');
|
||||
sorter.querySelector('.opt-trigger span.value').textContent = this.textContent;
|
||||
sorter.querySelector('ul').classList.toggle('show')
|
||||
}))
|
||||
}
|
||||
|
|
@ -1,944 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600&family=Nunito:wght@200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,600&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
:root{
|
||||
--main-color:#b9936c;
|
||||
--based-color:#c4b7a6;
|
||||
--light-color:#bab7ac;
|
||||
--white-color:white;
|
||||
--dark-color:black;
|
||||
}
|
||||
*,::before,::after{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: var(--dark-color);
|
||||
background-color: var(--white-color);
|
||||
font-family: 'Nunito', sans-serif;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
img{
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
h1,h2,h3,h4{
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
h1{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.container{
|
||||
max-width: 1280px;
|
||||
padding: 0 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header-top, .header-main nav > ul{
|
||||
display: none;
|
||||
}
|
||||
.header-top{
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid var(--light-color);
|
||||
}
|
||||
header :where(.wrap, .socials ul, .options, li a){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.header-top .wrap{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-top ul li span{
|
||||
font-size: 14px;
|
||||
}
|
||||
.header-top ul li i{
|
||||
font-size: 20px;
|
||||
}
|
||||
.header-top .options li{
|
||||
position: relative;
|
||||
}
|
||||
.header-top .options ul ul{
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 0;
|
||||
min-width: 68px;
|
||||
padding: 15px 20px;
|
||||
background-color: var(--white-color);
|
||||
box-shadow: 0 20px 30px rgb(0 0 0/13%);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(20px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.header-top li:hover ul{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
z-index: 100;
|
||||
}
|
||||
.header-top .flag{
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.header-top .flag.us{
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEoklEQVRoQ+2Z/WtbVRjHn5u35WVNGoOtS5dtTbt17Za6MWZlY9kGysbY/AdWhyCyos6XVquITKcy7aQyJupARNjGYCAyVnTDn1xhv1jBmdJ5QmulTIVZ6/LSJmmS5vqce25ub2NWf8iT6oUeuOQ+557zfZ7Pec7NOSeRwOBFMnj8sAzwX2dwOQP/hwyYMYgVePFPI5U5DHaWTyHvwYPv/VXtyD+TRshd1A+cv48DrDtw4N1fdu9ug97ex+DUqSuaI0r7KIyTAqSv34BVX3/RyAFa9u8/ycLhVojFZhQnsjzvS+It+IV1vN6E97rHZYPi7ZR+auH28TbLvwOUdizXA9tILifkb0Wh9kTvRgVg37532M6d8wD9/Y9Dd/c5NQgJuN3Tc74YDtpHoAefK7Co8AG3leeyAle0hSUKr6MukiQJgEcfeZt1PLwe4vG0GOoFRR1+pU5/r7dL6/UCIhVnzjxBHT8OsAqwd+9bbPv2IPT1HYaurk81R2fPPkVm94d9ZACSww75idvgebFLZGDPnjfZli3rMAMpMielQn1wk0zb5HFD9mYE/N9+IwB27TrONm8OQCLBpxDAhQvHoLPzQ82hYh9GW30xted8tmFd2fa6/lzotMToANw1kB2JwqrrlwXAjh2vsw0b/JBMCoBqlEsfE77EJhNANgeWhgcEQEfHaywYrIOLF5+HQ4f6tPgHBl4hs7kWddFe4m3bXmWBgA+mpzPUPjS9q5900mnzDORyYN3YLDKwdWsvq6vzQCo1qzgZHDwB4fAbmsNKbS50CYbIACSnAwp//AkNPwwKgFDoJVZb64J0OkvmpFToMgySafOvUTmegNWRIQHQ2trNXM4VMPT9SQi1vywc4TfM8PD70B5CW12nImjz58Vlazii2uq3UYTb2F7ZRmCd1h7vbxxtIwMAC26cc3lwP/ekAGhpeYHJ+g0QnStNKRo9Ta6qvcRNTcdYLse316JMTHwEa9c+Q2YXNakJNIDGxmfZ5GSCWn+B3thDYqdLVUy1bqj78nMxhQKBp9nUVBJmZs6ByzW/4FDaI/AVVeyKjtnngzW3RwWA39/F7t6dJnVQKja6hvZAI+F+qOG7awJgbm6OmfjiYKBSKBTAbDYLgHw+z9AwUPgACwDGfS3MgpsjGS8jFMlmhTxewamoyMDPnmZmwZTIGVyJi2dZ/cGsuHLpzrn/AC1tX9pAXeyUav19sV2xrqhT7vCn9lUArGZoio0JgLGaILPiQibPIkC5E+W9nCyWrnudMvWDUQql11vkJCvZbZDD5b45OS4A0uk0s9vtRpg9WoyZTAYcDocASKVSDA1DAeCgg9PpFAA/2VYzp80Gcqp6JzLK0eHb6VQ2C63ZXwXAiLWBrcQpJM9U71BPCoA/bE3jFNqU+00FsPjZSpxChgLAKbQp/7sAiMfjzO12Uw5S1bUSiQR4PB4BEIvFGBpVd0rpAGMGr9crAH401TNvjbEyEEsmoL1wRwFoRoBRytFZKq0HC3fWc4B6vEJ43b9Ujon8TKLOMAfgfy/VqJ9E2ksiw38DSi62PVuSKCp1sgxQ6QhW2n85A5WOYKX9DZ+BvwGx0t5IqAHCtwAAAABJRU5ErkJggg==');
|
||||
}
|
||||
.header-top .flag.sp{
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADQ0lEQVRoQ+2Zy08TURSHv5nptKWUR0EBleCroJL4QJCKD9SFC12iceHGxJ0LXRtj4l/gIzEx/gdufCUkGk2UmCAkWkEjPmnKwyhFBKzlMZbOjLeasHBTZOoUyNxt59x7fr/v3HM6rcQiX9Iizx9HQK4JOgQcAhYdWBol1JFfZVo0IifhuyYHpd8EHAE58R8cAjkyfvZYh4BDwKIDsyVktrMo54C0hz9z4J8E/D27cyj93wSIxE1kZlCIjuajGxLVyydQ0cVLhZH+0PY1dwEyjE96GR71ov2A72OqSFmiNJDEUwTlJRoBv0Zah51rbgIUkZIHon0+nl/xkdRNJI+EmSaimXiEuO2nNaqDk5AUz+r2ScgsQCQ//lVi5JtEsNag+4VKxxu3yNzApWnoskx9UKexGQb7ZIoKTUqWi1qyiURmASp09UC4F441KETu+QhHTYyYn7IjLShrDIKrU6z2PODmvU9sWgtNdYLAjD0UMgsQZfLVrCWSPEBN9Bq3LpQSq4tT019FxdmLyL1xpqtWEKo9S2RiG6VSN+t83QuHgCFK4X3XRobi9RR9vEPnywBd+/3sbEtSdeocBfE8XMFVuGPniI+VUeiPsi30GsWV7s3/n0JGAinRWDoehEgs209F32XCTwsYLC4jIlWiVGzgZHMdatkKAsPnGfrRJC7MKw4cbMddIJK34R5kFJA2set+DcPDm6ndd5vOVh/qZIpWUVI/TZUThWF0l8qmUIzowGHylF52tbxB3O2FQcAQbbHn7V7MLcdZmTjFoxs+FK/olOMmeXHRompcyJ90Gg4lSDRdZbStlcYtD1HyFogAMXTpHa/k3bdqQsVPeHxDZC+nkJRi8ic8KOYYqWmVhqMTvPLvZqV3gK3l/bbNgowlJL45cD18mJ6RdZxpuIsU+8KH/lWMlBzCjLuo/NzGmrUR3NtLuPSshfWBIU7vuJsOs2VlFiDSmJrxkDJc+FQNl0cXM8xLIukXd9SkwD0lOs40uiYzlfSK2jfIF8/ZteYkwK5k5nPOrADnZ5X52JeFGOelPgsmWtrCIWDJviwEOwSyYKKlLWYJWNolx8FL4x+aHJto6XiHgCX7shDsEMiCiZa2WPQEfgE+XF5AfzjtFQAAAABJRU5ErkJggg==');
|
||||
}
|
||||
.header-top .flag.kr{
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAILklEQVRoQ+1YCUyUVxD+9mIXQRQUtFYEvEolFOsRsbYlamytiRVIjAdiorHBK4K21noraj3QeqNJrdJWU1ptEMVQW6+KR9RWMRRZlcSKth6VSwT23s68lZZd92Ihtps4yc/C8t78883x5psngZeLxMvtxwsA/3UEX0Tg/xABGRmhpIc/vUmMZKyWUyjQbDZXeJPlDbZKJJIgBhBOAG55KYAIBvAKAVC7A6C2thYKhQI+Pj7uLPdojVarhdFoRKtWrVzupwhENglAQUEBOnXqhG7durlU7umCa9euob6+Hn379nWpokkAHj16hPT0dCxYsAB3795FdHQ0lEqu/ZaRyspKlJWVITAwEOvXr8fatWvh6+vrVLnbAEwmE+bPn49Ro0ahY8eOWLduHZYvX46KigpERkaCFHmMgtOlqKgI7du3x8qVK7F48WJcvnwZV65cwcKFCyGTOT4c3QZw4MABXC0sxIcffYQ5c+aI58GDB9i3bx927tzZrJrgdJkxYwZmz54NjsL+/fuxbNkynD59GkOHDkVAQIBD57gF4N69e5g7d64Ia05ODriQJ02ahNTUVKxYsQIREREee79hY3FxMVavXo3NmzcjIyMDvXv3xsiRI7F06VIR+Xbt2tl9h0sABoMBKSkpmDhxIkJCQkR4s7KyRKgHDBiAhISEZxWbzdDfuAHN+fPQU61ApwNUKvgQUNWgQZB36WLXmG3btiEmJkYUL79v48aNOHv2LC5duiScZy9NnQIoLy/HsWPHcOLECaxZswZTpkzBkiVLRJg5bfbu3Qu5XG5ljOHW76jK3A79LWorEikkMil9Un0QKDM5QyKVwicqCm1mzoTMxqt6vR5Xr14VOV9ZWYHsb7KxjqLBDuRnyJAhzwB3CuDJkyfitOGTYMuWLQgKCsLkyZOFd3Z9vgth4WFWCjXnzqHi008hoR4hsQHWeKFZoxFr2tNBIO/a1UrH8ePHhbOys7OxaNEi9OjRA4mJicL7YWHW7+ONLlOIF3EacREPovDzEdqnTx9RcI1FV/QbHn08FxIFRUTqmlKJaFBDDNm+HTLqKw3Cpx1HmaMxk6J0jpwyZsyY5hVxw+7Hjx+L3F+1apXoxv8IGXN/wgQY//oL9A+3C5ojoewVheDt2yxp9lS4E3Px8rtsU9RWuVsRcGVR3ZmzKE9LhbR1a6dLVTDS+GeCmX5K6acOcujqNej49ddQUKp4Ii0CoGTecgT8eBBmB9yFyhgq6PGzPBw/KbrhsVSFCFMVEjTFCK35Az4fTBNF7Yk0G4DBDOSMTsXbN49Dp1A9e0rQNzLy9mbfWHyjfO3p/030KUeQqRbpFUcQ1+dlBOzO8sR+94rYmWYdjRST31mCjNLd0CuUIj0aS6C5Hp+p3sAGvzgoTXT60ArCLEQrkSG4rhI/hv+G7kdy/hsARMMR9f4XSCjJw4fGXyivZdBTQcrJTD+zHrk+kUjzf48ynw6nf0z/11aN1oSdUeVI/jajeQDo+FJ7SshGpWTjp4IyJEpLMUFTiBBKjUrK81zlq/jKJ0aYLRMQnhVNrQ4bk7oiZWlSkwGw86RSqWUeIEaopj+arIQ3fPl9IVI+zgUC/EWKtDbpUUfpYZDIoaQoWJKqIXH4d/7G8rfmiRZn9iahX2z3Jr+bewZ1bQsAalZqZ7SVtTOF2LRpk+BDjc/n2no9eg7ZispqDbUBKflaIoC4IthanQERoUEoyp8KOVOOp8JNjNkoN00/Pz+HwKwA0Ca1o6bBCw8fOoyer/TEwIEDhfK0tDQrxdmHizEx7QCUrRRuzQYmE/UBAp6XlYx33rKmE+yggwcPiu5/izjV8OHD7YJghkAN1RIBnU6ntuqu9CV7oqamhsikDrGxsYIDxcfHCxbKijt37myleP3n5/FJej5k/koo5I7T0aA3wlinR2ZGPD4Y87qVjgsXLuBNoiw3bt4UFJ6jzqTR398frW0aJdtHs7kFALVvte2gfufOHUHirl+/jszMTEHezhScQV5eHo4ePSporm3hf/9DCWYty8eDP6qoe8khIyBiDVNsAyWXxoCXugRi15r38e5b1nM1R5qpOqdycHAwxo4di5KSEgwbNgxTp07FrFmzrMCyY2mktQCgqUitIs5uKzwtMfKTJ0/i4cOHYsxjssVj5Y4dO+wSrVry7u79v+K7IyUo+7OaImmkUMsQ9nJbTIiPRnJiDHyV1jSc38vDUXh4OJKTk5GUlCSMvn37togEO9M2xTXEpYgpWwDU1dWpHQ3QfBMRFxcHnsx4jDx06BBGjBiBfv36iSHcNpUaO4Fz3Wg0k1eJ/0gdl3UhjavMcnky27NnD6ZPny5GSb4B4fm4V69edp1LVy8WADQmqp3dw4wePRo8H2zYsAFRNJBw+nCR8cvYO825JyLniSizrg4dOoiiZSB8vdK/f390oQnOXo/ifXRKWQBQsaq5UBwJG9+2bVvk5+eLwpo2bRouXryI3Nxc4S176efuwc4HBacjz8DsaZ4CObI8c9y/f9+hbraJgFsAENdX21a5rQGnTp3C4MGDhXIubp6Y2rRp466dLtexXr7lGDdunLgo4Pxn7zsSBk5pZgFQXV2tdnZ9wUq4dXNhcT2MHz/epUGeLti6dSs4PebNm+dUBQ9Y5EALgKqqKrU73uShm2fj0NBQT+1zua+0tFRMfPZm4MabyWa+xbMAoBs2NV/peZM0BtCdANz0JuMbbKVs6MER6EBPND3BXgaCbhFQxAD4ipkn8pa7an4+ntDSa2pcsd7nY0oz3vICQDOc1yJbX0SgRdzYDCVeH4G/AcYnjGZP18ksAAAAAElFTkSuQmCC');
|
||||
}
|
||||
header li a{
|
||||
transition: color 0.3s;
|
||||
}
|
||||
header li a:hover{
|
||||
color: var(--based-color);
|
||||
}
|
||||
.header-top :where(.socials li:last-child, .options > div:last-child){
|
||||
margin-left: 15px;
|
||||
}
|
||||
.header-main :where(nav, .icons){
|
||||
flex: 1 1 0;
|
||||
}
|
||||
.header-main .icons{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.header-main :where(nav, .icons) > ul {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
.header-main :where(.menu-toggle, .icons a){
|
||||
font-size: 20px;
|
||||
}
|
||||
.header-main .menu-toggle{
|
||||
display: block;
|
||||
}
|
||||
.header-main :where(nav > ul > li > a, .logo){
|
||||
line-height: 90px;
|
||||
}
|
||||
.header-main .logo{
|
||||
font-size: 28px;
|
||||
}
|
||||
.header-main :where(nav li >a span, .logo){
|
||||
font-weight: 600;
|
||||
}
|
||||
.header-main .icons li a{
|
||||
position: relative;
|
||||
gap: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
.header-main .icons li .qty{
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -8px;
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
font-size: 10px;
|
||||
width: 10px;
|
||||
height: 14px;
|
||||
line-height: initial;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
}
|
||||
/*----------nav-products----------*/
|
||||
.product{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
.product .list{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.product-thumb{
|
||||
position: relative;
|
||||
height: 300px;
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.object-cover img{
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
.hover-image{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.15, 0.75, 0.5, 1) 0s;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
opacity: 0;
|
||||
}
|
||||
.product-thumb:hover .hover-image{
|
||||
opacity: 1;
|
||||
transform: scale3d(1.1, 1.1, 1.1) translateZ(0);
|
||||
}
|
||||
.product :where(.label, .icons-act){
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
.product .label{
|
||||
z-index: 2;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
padding: 2px 5px;
|
||||
line-height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.product .icons-act{
|
||||
right: 10px;
|
||||
left: auto;
|
||||
transform: translateX(70px);
|
||||
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
.product-thumb:hover .icons-act{
|
||||
transform: translateX(0);
|
||||
}
|
||||
.product .icons-act li a{
|
||||
display: flex;
|
||||
font-size: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: var(--white-color);
|
||||
border-radius: 50%;
|
||||
margin-bottom: 8px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.product .icons-act li a:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
.product-info h2{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.product .price .before{
|
||||
color: var(--light-color);
|
||||
text-decoration: line-through;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/*----- mobile -----*/
|
||||
nav.mobile{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
max-width: calc(100vw - 60px);
|
||||
padding: 30px;
|
||||
background-color: var(--white-color);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: -100%;
|
||||
visibility: hidden;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
nav.mobile.active{
|
||||
left: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
nav.mobile > ul > li{
|
||||
position: relative;
|
||||
}
|
||||
nav.mobile > ul > li >a{
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 13px 0;
|
||||
}
|
||||
nav.mobile .enter{
|
||||
padding-top: 20px;
|
||||
margin-top: auto;
|
||||
}
|
||||
nav.mobile .enter div{
|
||||
max-width: 170px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
nav.mobile .enter div::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
nav.mobile .enter div span{
|
||||
position: relative;
|
||||
padding: 5px 20px;
|
||||
color: var(--based-color);
|
||||
background-color: var(--white-color);
|
||||
}
|
||||
.btn-login, .btn-signUp{
|
||||
display: inline-flex;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 32px;
|
||||
border-radius: 50px;
|
||||
line-height: 40px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.btn-login{
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.btn-login:hover{
|
||||
background: transparent;
|
||||
color: var(--dark-color);
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
.btn-signUp{
|
||||
background-color: white;
|
||||
}
|
||||
.btn-signUp:hover, .hero a:hover .btn-signUp{
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
nav.mobile .enter a{
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
nav.mobile .btn-signUp{
|
||||
border: 1px solid var(--main-color);
|
||||
margin-top: 10px;
|
||||
}
|
||||
.close-toggle{
|
||||
font-size: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.close-toggle:hover{
|
||||
color: var(--main-color);
|
||||
}
|
||||
nav.mobile .close-toggle{
|
||||
position: absolute;
|
||||
right: -40px;
|
||||
top: 0;
|
||||
}
|
||||
.overlay{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgb(0 0 0 /50%);
|
||||
pointer-events: none;
|
||||
z-index: 15px;
|
||||
transition: 0.5s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
.overlay.active{
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
nav.mobile > ul{
|
||||
overflow-y: auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
nav.mobile > ul > li >span{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 55px;
|
||||
font-size: 20px;
|
||||
transition: color 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
nav.mobile > ul > li >span:hover{
|
||||
color: var(--based-color);
|
||||
}
|
||||
nav.mobile .submenu{
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
nav.mobile .submenu a{
|
||||
color: var(--based-color);
|
||||
padding-left: 15px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
nav.mobile .submenu a:hover{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
nav.mobile .submenu{
|
||||
transform: translateY(15px);
|
||||
transition: height 0.3s, transform 0.3s;
|
||||
}
|
||||
nav.mobile .expand ~ .submenu{
|
||||
height: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
/*----- search -----*/
|
||||
.search-container{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30px 0;
|
||||
background-color: var(--white-color);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.search-container.active{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.search-container .wrap{
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.search-container .shearch-head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
form.search{
|
||||
position: relative;
|
||||
height: 46px;
|
||||
color: var(--dark-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
form.search input{
|
||||
position: absolute;
|
||||
}
|
||||
form.search :where(input[type=search], input[type=text]){
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px 15px 10px 40px;
|
||||
border: 1px solid var(--based-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
form.search input[type=submit]{
|
||||
right: 0;
|
||||
top: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
form.search i{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.search-container .search-footer{
|
||||
margin-top: 10px;
|
||||
color: var(--light-color);
|
||||
}
|
||||
.search-container .search-footer a{
|
||||
margin-right: 8px;
|
||||
color: var(--dark-color);
|
||||
text-decoration: underline;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.search-container .search-footer a:hover{
|
||||
color: var(--light-color);
|
||||
}
|
||||
/*----- main-hero -----*/
|
||||
.hero .wrap{
|
||||
display: grid;
|
||||
}
|
||||
.hero .large{
|
||||
height: 335px;
|
||||
}
|
||||
.hero .list:not(.large){
|
||||
height: 230px;
|
||||
}
|
||||
.hero .wrap .list{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero a:hover img{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.hero .info{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 10px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
/*----- main -----*/
|
||||
main > div{
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
/*----- best seller -----*/
|
||||
.tabbed nav{
|
||||
margin: 0 0 50px;
|
||||
}
|
||||
.tabbed nav ul{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 436px;
|
||||
width: auto;
|
||||
padding-bottom: 10px;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-inline: contain;
|
||||
scroll-snap-type: inline mandatory;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.tabbed nav ul li a{
|
||||
font-size: clamp(20px, -0.8rem + 8.33vw, 26px);
|
||||
font-weight: 400;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.tabbed nav ul li a:hover{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
.tabbed nav ul li:not(.swiper-slide-thumb-active) a{
|
||||
color: var(--based-color);
|
||||
}
|
||||
.tabbed nav ul li.swiper-slide-thumb-active a{
|
||||
border-bottom: 2px solid var(--dark-color);
|
||||
}
|
||||
.tabbed .button{
|
||||
text-align: center;
|
||||
margin: 35px 0 0 ;
|
||||
}
|
||||
.tabbed nav li{
|
||||
width: fit-content !important;
|
||||
}
|
||||
.product .colors{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 8px 0 15px;
|
||||
}
|
||||
.product .colors a{
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.product .colors a::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
left: 6px;
|
||||
top: 6px;transition: transform 0.3s;
|
||||
transform: scale(0);
|
||||
}
|
||||
.product .colors a.active::before, .product .colors a:hover::before{
|
||||
background-color: var(--white-color);
|
||||
transform: scale(1);
|
||||
border: 1px solid var(--white-color);
|
||||
}
|
||||
.product .colors .color-1{
|
||||
background-color: black;
|
||||
}
|
||||
.product .colors .color-2{
|
||||
background-color: #034f84;
|
||||
}
|
||||
.product .colors .color-3{
|
||||
background-color: #fefbd8;
|
||||
}
|
||||
.product .colors .color-4{
|
||||
background-color: #d4ac6e;
|
||||
}
|
||||
.product .colors .color-5{
|
||||
background-color: lightgrey;
|
||||
}
|
||||
.product .colors .color-6{
|
||||
background-color: rgb(255, 153, 0);
|
||||
}
|
||||
.product .colors .color-7{
|
||||
background-color: rgb(175, 138, 175);
|
||||
}
|
||||
.product .colors .color-8{
|
||||
background-color: #FFFF99;
|
||||
}
|
||||
.product .colors .color-9{
|
||||
background-color: #F9F6EE;
|
||||
}
|
||||
.product .colors .color-10{
|
||||
background-color: #87bdd8;
|
||||
}
|
||||
.product .colors .color-11{
|
||||
background-color: #eec0c8;
|
||||
}
|
||||
.product .colors .color-12{
|
||||
background-color: #A9BA9D;
|
||||
}
|
||||
.product .colors .color-13{
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
.product .colors .color-14{
|
||||
background-color: #13274F;
|
||||
}
|
||||
.product .colors .color-15{
|
||||
background-color: #dac292;
|
||||
}
|
||||
.product .colors .color-16{
|
||||
background-color: #A52A2A;
|
||||
}
|
||||
.product .colors .color-17{
|
||||
background-color: goldenrod;
|
||||
}
|
||||
.product .colors .color-18{
|
||||
background-color: #00563B;
|
||||
}
|
||||
/*----- video -----*/
|
||||
.video-box{
|
||||
position: relative;
|
||||
height: 500px;
|
||||
max-width: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.video-box .video-play{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--white-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.video-box .video-play i{
|
||||
font-size: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
border: 2px solid var(--white-color);
|
||||
border-radius: 50%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.video-box .video-play h3{
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.video-box:hover img{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
/*---video-play-from-youtube---*/
|
||||
.youtube{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: var(--dark-color);
|
||||
z-index: 1000;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.youtube.active{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.youtube, .youtube :where(.wrap, .inner , iframe){
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.youtube .wrap{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.youtube .inner, .youtube iframe{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.youtube .item{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.youtube .item::before{
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.youtube .outer{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 800px;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.youtube .control{
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.youtube iframe{
|
||||
display: inline-block;
|
||||
transform: scale3d(0.5, 0.5, 0.5);
|
||||
transition: transform 0.3s;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.youtube.active iframe{
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.youtube .item > a{
|
||||
color: var(--white-color);
|
||||
float: right;
|
||||
}
|
||||
/*---------- banner ----------*/
|
||||
.banner{
|
||||
position: relative;
|
||||
background-color: rgb(220, 220, 212);
|
||||
}
|
||||
.banner .wrap{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
.banner .bg-image{
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
.banner .info{
|
||||
padding: 90px 0 ;
|
||||
}
|
||||
.banner .info span{
|
||||
color: #454140;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.banner .info h3{
|
||||
margin-bottom: 20px;
|
||||
font-size: 32px;
|
||||
}
|
||||
/*---------- footer ----------*/
|
||||
.inner-footer{
|
||||
padding: 0 0 60px;
|
||||
font-size: 14px;
|
||||
color: var(--based-color);
|
||||
}
|
||||
.inner-footer .wrap{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
}
|
||||
.inner-footer .wrap h3{
|
||||
font-weight: 600;
|
||||
color: var(--dark-color);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.inner-footer .wrap > div:not(.subscribe) h3{
|
||||
font-size: 18px;
|
||||
}
|
||||
.inner-footer .socials ul{
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
font-size: 20px;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
footer a{
|
||||
transition: color 0.3s;
|
||||
}
|
||||
footer a:hover{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
footer .socials a:hover{
|
||||
color: var(--based-color);
|
||||
}
|
||||
.copyright{
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.scroll-top{
|
||||
position: fixed;
|
||||
bottom: 2.3rem;
|
||||
right: 2.3rem;
|
||||
}
|
||||
.scroll-top i{
|
||||
background: var(--based-color);
|
||||
color: var(--white-color);
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width:576px){
|
||||
.header-main .icons :where(li:nth-child(2), li:nth-child(3)){
|
||||
display: none;
|
||||
}
|
||||
.hero .wrap{
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width:768px){
|
||||
.hero .wrap{
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
}
|
||||
.hero .large{
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 3;
|
||||
height: 640px;
|
||||
}
|
||||
.hero .list:not(.large){
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width:576px) and (max-width:767px){
|
||||
.hero .wrap{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.hero .large{
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width:992px){
|
||||
.header-main .menu-toggle{
|
||||
display: none;
|
||||
}
|
||||
.header-main nav > ul{
|
||||
display: flex;
|
||||
}
|
||||
.header-top{
|
||||
display: block;
|
||||
}
|
||||
.header-main nav .submenu{
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: auto;
|
||||
padding: 15px 20px;
|
||||
margin-left: -20px;
|
||||
line-height: 40px;
|
||||
min-width: 150px;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-main nav :where(.submenu, .megamenu){
|
||||
background-color: var(--white-color);
|
||||
box-shadow: 0 20px 30px rgb(0 0 0/13%);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(20px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.header-main nav li:hover :where(.submenu, .megamenu){
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.megamenu{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30px 0;
|
||||
z-index: 999;
|
||||
}
|
||||
.megamenu .wrap{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
align-items: flex-start;
|
||||
gap: 60px;
|
||||
}
|
||||
.megamenu .menus{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.megamenu .links h3{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.megamenu .links a{
|
||||
color: var(--main-color);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.megamenu .links a:hover{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
.megamenu .featured h3{
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.megamenu .product{
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>About Us</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_about.css">
|
||||
<link rel="shortcut icon" href="images/title.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="index.html" class="logo">
|
||||
<img src="images/logo1.png" alt="" class="logo-img">
|
||||
</a>
|
||||
<div class="search-box">
|
||||
<input type="search" name="" id="search-input" placeholder="Search">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<a href="index.html" class="nav-link ">
|
||||
<i class='bx bxs-home'></i>
|
||||
<span class="nav-link-title">HOME</span>
|
||||
</a>
|
||||
<a href="" class="nav-link">
|
||||
<i class='bx bx-basket'></i>
|
||||
<span class="nav-link-title">Shop</span>
|
||||
</a>
|
||||
<a href="" class="nav-link">
|
||||
<i class='bx bx-book-bookmark' ></i>
|
||||
<span class="nav-link-title">Blog</span>
|
||||
</a>
|
||||
<a href="" class="nav-link nav-active">
|
||||
<i class='bx bxs-florist'></i>
|
||||
<span class="nav-link-title">About Us</span>
|
||||
</a>
|
||||
<a href="contact.html" class="nav-link">
|
||||
<i class='bx bx-phone-call'></i>
|
||||
<span class="nav-link-title">Contact</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="about">
|
||||
<div class="about-container">
|
||||
<div class="about-text">
|
||||
<div class="tiltle">
|
||||
<h1> About Us</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>message</p>
|
||||
<div class="button">
|
||||
<a href="">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social">
|
||||
<a href=""><i class='bx bxl-instagram-alt'></i></a>
|
||||
<a href=""><i class='bx bxl-twitter'></i></a>
|
||||
<a href=""><i class='bx bxl-facebook-circle'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-img">
|
||||
<img src="images/a1.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="end-text">
|
||||
<p>© Flora All Rights Reserved </p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blog</title>
|
||||
<link rel="stylesheet" href="style_blog.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/title.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="index.html" class="logo">
|
||||
<img src="images/logo1.png" alt="" class="logo-img">
|
||||
</a>
|
||||
<div class="search-box">
|
||||
<input type="search" name="" id="search-input" placeholder="Search">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<a href="index.html" class="nav-link">
|
||||
<i class='bx bxs-home'></i>
|
||||
<span class="nav-link-title">HOME</span>
|
||||
</a>
|
||||
<a href="shop.html" class="nav-link">
|
||||
<i class='bx bx-basket'></i>
|
||||
<span class="nav-link-title">Shop</span>
|
||||
</a>
|
||||
<a href="" class="nav-link nav-active">
|
||||
<i class='bx bx-book-bookmark' ></i>
|
||||
<span class="nav-link-title">Blog</span>
|
||||
</a>
|
||||
<a href="about.html" class="nav-link">
|
||||
<i class='bx bxs-florist'></i>
|
||||
<span class="nav-link-title">About Us</span>
|
||||
</a>
|
||||
<a href="contact.html" class="nav-link">
|
||||
<i class='bx bx-phone-call'></i>
|
||||
<span class="nav-link-title">Contact</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="blog">
|
||||
<div class="blog-heading">
|
||||
<h1>On the blog</h1>
|
||||
</div>
|
||||
<div class="blog-container">
|
||||
<!--content1-->
|
||||
<div class="blog-content">
|
||||
<div class="blog-img">
|
||||
<img src="images/pe1.jpg">
|
||||
</div>
|
||||
<div class="blog-text">
|
||||
<span>May 21, 2023 / Topic</span>
|
||||
<a href="" class="blog-title">Title</a>
|
||||
<p> all messages are in here.</p>
|
||||
<a href="">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--content2-->
|
||||
<div class="blog-content">
|
||||
<div class="blog-img">
|
||||
<img src="images/pe2.jpg">
|
||||
</div>
|
||||
<div class="blog-text">
|
||||
<span>May 21, 2023 / Topic</span>
|
||||
<a href="" class="blog-title">Title</a>
|
||||
<p> all messages are in here.</p>
|
||||
<a href="">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--content3-->
|
||||
<div class="blog-content">
|
||||
<div class="blog-img">
|
||||
<img src="images/pe3.jpg">
|
||||
</div>
|
||||
<div class="blog-text">
|
||||
<span>May 21, 2023 / Topic</span>
|
||||
<a href="" class="blog-title">Title</a>
|
||||
<p> all messages are in here.</p>
|
||||
<a href="">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--content4-->
|
||||
<div class="blog-content">
|
||||
<div class="blog-img">
|
||||
<img src="images/pe4.jpg">
|
||||
</div>
|
||||
<div class="blog-text">
|
||||
<span>May 21, 2023 / Topic</span>
|
||||
<a href="" class="blog-title">Title</a>
|
||||
<p> all messages are in here.</p>
|
||||
<a href="">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--content5-->
|
||||
<div class="blog-content">
|
||||
<div class="blog-img">
|
||||
<img src="images/pe5.jpg">
|
||||
</div>
|
||||
<div class="blog-text">
|
||||
<span>May 21, 2023 / Topic</span>
|
||||
<a href="" class="blog-title">Title</a>
|
||||
<p> all messages are in here.</p>
|
||||
<a href="">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="end-text">
|
||||
<p>© Flora All Rights Reserved </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact</title>
|
||||
<link rel="stylesheet" href="style_contact.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/title.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="index.html" class="logo">
|
||||
<img src="images/logo1.png" alt="" class="logo-img">
|
||||
</a>
|
||||
<div class="search-box">
|
||||
<input type="search" name="" id="search-input" placeholder="Search">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<a href="index.html" class="nav-link">
|
||||
<i class='bx bxs-home'></i>
|
||||
<span class="nav-link-title">HOME</span>
|
||||
</a>
|
||||
<a href="" class="nav-link">
|
||||
<i class='bx bx-basket'></i>
|
||||
<span class="nav-link-title">Shop</span>
|
||||
</a>
|
||||
<a href="" class="nav-link">
|
||||
<i class='bx bx-book-bookmark' ></i>
|
||||
<span class="nav-link-title">Blog</span>
|
||||
</a>
|
||||
<a href="about.html" class="nav-link">
|
||||
<i class='bx bxs-florist'></i>
|
||||
<span class="nav-link-title">About Us</span>
|
||||
</a>
|
||||
<a href="" class="nav-link nav-active">
|
||||
<i class='bx bx-phone-call'></i>
|
||||
<span class="nav-link-title">Contact</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="contact-container">
|
||||
<div class="contact-box">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<h2>Contact Us</h2>
|
||||
<input type="text" class="field" placeholder="Your Name">
|
||||
<input type="text" class="field" placeholder="Your Last name">
|
||||
<input type="email" class="field" placeholder="Your Email">
|
||||
<textarea class="field area" placeholder="Message"></textarea>
|
||||
<button class="button-btn">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="end-text">
|
||||
<p>© Flora All Rights Reserved </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,348 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Flora-Flower For You</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/title.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="index.html" class="logo">
|
||||
<img src="images/logo1.png" alt="" class="logo-img">
|
||||
</a>
|
||||
<div class="search-box">
|
||||
<input type="search" name="" id="search-input" placeholder="Search">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<a href="" class="nav-link nav-active">
|
||||
<i class='bx bxs-home'></i>
|
||||
<span class="nav-link-title">HOME</span>
|
||||
</a>
|
||||
<a href="" class="nav-link">
|
||||
<i class='bx bx-basket'></i>
|
||||
<span class="nav-link-title">Shop</span>
|
||||
</a>
|
||||
<a href="blog.html" class="nav-link">
|
||||
<i class='bx bx-book-bookmark' ></i>
|
||||
<span class="nav-link-title">Blog</span>
|
||||
</a>
|
||||
<a href="about.html" class="nav-link">
|
||||
<i class='bx bxs-florist'></i>
|
||||
<span class="nav-link-title">About Us</span>
|
||||
</a>
|
||||
<a href="contact.html" class="nav-link">
|
||||
<i class='bx bx-phone-call'></i>
|
||||
<span class="nav-link-title">Contact</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="home">
|
||||
<div class="home-text">
|
||||
<h1>Find your favorite bouquet</h1>
|
||||
<p>Make a bouquet and get a gift.<br> Delivery in Chicago, the suburbs, and nationwide!</p>
|
||||
<a href="#" class="home-btn">Make a bouquet</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="promotion">
|
||||
<div class="promotion-img">
|
||||
<img src="images/ba1.JPG">
|
||||
</div>
|
||||
<div class="promotion-img">
|
||||
<img src="images/ba2.JPG">
|
||||
</div>
|
||||
<div class="promotion-img">
|
||||
<img src="images/ba3.JPG">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="popular-flower">
|
||||
<div class="popular-text">
|
||||
<h2>Our Most Popular Flowers</h2>
|
||||
</div>
|
||||
<div class="new-content">
|
||||
<!--flower1-->
|
||||
<div class="row">
|
||||
<img src="images/f1_.jpg">
|
||||
<h4>Red Roses</h4>
|
||||
<h5>$2.08 per stem</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower2-->
|
||||
<div class="row">
|
||||
<img src="images/f2.jpg">
|
||||
<h4>White Calla Lilies</h4>
|
||||
<h5>$5.27 per stem</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower3-->
|
||||
<div class="row">
|
||||
<img src="images/f3.jpg">
|
||||
<h4>Pink Tulips</h4>
|
||||
<h5>$1.20 per stem</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower4-->
|
||||
<div class="row">
|
||||
<img src="images/f4.jpg">
|
||||
<h4>Phalaenopsis White Orchids</h4>
|
||||
<h5>$39.49 per stem</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower5-->
|
||||
<div class="row">
|
||||
<img src="images/f5.jpg">
|
||||
<h4>Lavender Flowers</h4>
|
||||
<h5>$2.45 per stem</h5>
|
||||
<div class="top">
|
||||
<p>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower6-->
|
||||
<div class="row">
|
||||
<img src="images/f6.jpg">
|
||||
<h4>Pink Daisies</h4>
|
||||
<h5>$3.25 per stem</h5>
|
||||
<div class="top">
|
||||
<p>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower7-->
|
||||
<div class="row">
|
||||
<img src="images/f7.jpg">
|
||||
<h4>Orange Baby's breath</h4>
|
||||
<h5>$1.50 per stem</h5>
|
||||
<div class="top">
|
||||
<p>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower8-->
|
||||
<div class="row">
|
||||
<img src="images/f8.jpg">
|
||||
<h4>Blue Hydrangeas</h4>
|
||||
<h5>$3.75 per stem</h5>
|
||||
<div class="top">
|
||||
<p>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="promotion">
|
||||
<div class="promotion-img">
|
||||
<img src="images/ba4.JPG">
|
||||
</div>
|
||||
<div class="promotion-img">
|
||||
<img src="images/ba5.JPG">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="popular-flower">
|
||||
<div class="popular-text">
|
||||
<h2>Trending Bouquets</h2>
|
||||
</div>
|
||||
<div class="new-content">
|
||||
<!--flower1-->
|
||||
<div class="row">
|
||||
<img src="images/t1.jpg">
|
||||
<h4>Fall Bouquet</h4>
|
||||
<h5>$55.99</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower2-->
|
||||
<div class="row">
|
||||
<img src="images/t2.jpg">
|
||||
<h4>Sunflowers Bouquet</h4>
|
||||
<h5>$30.99</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower3-->
|
||||
<div class="row">
|
||||
<img src="images/t3.jpg">
|
||||
<h4>White Peony Bouquet</h4>
|
||||
<h5>$25.99</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower4-->
|
||||
<div class="row">
|
||||
<img src="images/t4.jpg">
|
||||
<h4>Bridal Bouquets</h4>
|
||||
<h5>$69.49 per stem</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="review" id="review">
|
||||
<h1 class="heading">Customer Reviews</h1>
|
||||
<div class="box-container">
|
||||
<div class="box">
|
||||
<div class="stars">
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
</div>
|
||||
<p>Wonderful experience! <br>The flowers are beautiful and lasted.</p>
|
||||
<div class="user">
|
||||
<img src="images/u1.jpg">
|
||||
<div class="user-info">
|
||||
<h3>Taylor Swift</h3>
|
||||
<span>Singer/ Producer/ Director</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class='bx bxs-quote-right' ></i>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="stars">
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
</div>
|
||||
<p>The best flower delivery service.</p>
|
||||
<div class="user">
|
||||
<img src="images/u2.jpg">
|
||||
<div class="user-info">
|
||||
<h3>Selena Gomez</h3>
|
||||
<span>Singer/ Actress/ Producer</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class='bx bxs-quote-right' ></i>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="stars">
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
<i class='bx bxs-star' ></i>
|
||||
</div>
|
||||
<p>The flowers are drop dead <br>gorgeous every time. </p>
|
||||
<div class="user">
|
||||
<img src="images/u3.jpg">
|
||||
<div class="user-info">
|
||||
<h3>Rihanna</h3>
|
||||
<span>Singer/ Businesswoman</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class='bx bxs-quote-right' ></i>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact">
|
||||
<div class="contact-box">
|
||||
<h4>Get to Know Us</h4>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Newsletter</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
<li><a href="#">Accessibility</a></li>
|
||||
<li><a href="#">Advertising</a></li>
|
||||
</div>
|
||||
<div class="contact-box">
|
||||
<h4>Shop</h4>
|
||||
<li><a href="#">Graduation</a></li>
|
||||
<li><a href="#">Prom</a></li>
|
||||
<li><a href="#">Memorial Day</a></li>
|
||||
<li><a href="#">Anniversary</a></li>
|
||||
<li><a href="#">Birthday</a></li>
|
||||
</div>
|
||||
<div class="contact-box">
|
||||
<h4>Quick Links</h4>
|
||||
<li><a href="#">Our Location</a></li>
|
||||
<li><a href="#">Order Tracking</a></li>
|
||||
<li><a href="#">Delivery service</a></li>
|
||||
<li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">FAQs</a></li>
|
||||
</div>
|
||||
<div class="contact-box">
|
||||
<h4>Let Us Help You</h4>
|
||||
<li><a href="#">Your Order</a></li>
|
||||
<li><a href="#">Shipping Policies</a></li>
|
||||
<li><a href="#">Use Our Coupon</a></li>
|
||||
<li><a href="#">Cancel Your Order</a></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
</div>
|
||||
<div class="contact-box">
|
||||
<h4>Social Media</h4>
|
||||
<h5>Follow Us On</h5>
|
||||
<div class="social">
|
||||
<a href="#"><i class='bx bxl-instagram'></i></a>
|
||||
<a href="#"><i class='bx bxl-facebook-square'></i></a>
|
||||
<a href="#"><i class='bx bxl-twitter'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a href="#" class="scroll-top"><i class='bx bxs-chevrons-up'></i></a>
|
||||
|
||||
<div class="end-text">
|
||||
<p>© Flora All Rights Reserved </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,278 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Flora-Flower For You</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_blog.css">
|
||||
<link rel="stylesheet" href="style_shop.css">
|
||||
<link rel="shortcut icon" href="images/title.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="index.html" class="logo">
|
||||
<img src="images/logo1.png" alt="" class="logo-img">
|
||||
</a>
|
||||
<div class="search-box">
|
||||
<input type="search" name="" id="search-input" placeholder="Search">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<a href="index.html" class="nav-link">
|
||||
<i class='bx bxs-home'></i>
|
||||
<span class="nav-link-title">HOME</span>
|
||||
</a>
|
||||
<a href="" class="nav-link nav-active">
|
||||
<i class='bx bx-basket'></i>
|
||||
<span class="nav-link-title">Shop</span>
|
||||
</a>
|
||||
<a href="blog.html" class="nav-link">
|
||||
<i class='bx bx-book-bookmark' ></i>
|
||||
<span class="nav-link-title">Blog</span>
|
||||
</a>
|
||||
<a href="about.html" class="nav-link">
|
||||
<i class='bx bxs-florist'></i>
|
||||
<span class="nav-link-title">About Us</span>
|
||||
</a>
|
||||
<a href="contact.html" class="nav-link">
|
||||
<i class='bx bx-phone-call'></i>
|
||||
<span class="nav-link-title">Contact</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="shop">
|
||||
<!--set1-->
|
||||
<div class="blog-heading">
|
||||
<h1>Graduation</h1>
|
||||
</div>
|
||||
<div class="new-content">
|
||||
<!--flower1-->
|
||||
<div class="row">
|
||||
<img src="images/sg1.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower2-->
|
||||
<div class="row">
|
||||
<img src="images/sg2.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower3-->
|
||||
<div class="row">
|
||||
<img src="images/sg3.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower4-->
|
||||
<div class="row">
|
||||
<img src="images/sg4.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--set2-->
|
||||
<div class="blog-heading">
|
||||
<h1>Wedding</h1>
|
||||
</div>
|
||||
<div class="new-content">
|
||||
<!--flower1-->
|
||||
<div class="row">
|
||||
<img src="images/sw1.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower2-->
|
||||
<div class="row">
|
||||
<img src="images/sw2.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower3-->
|
||||
<div class="row">
|
||||
<img src="images/sw3.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower4-->
|
||||
<div class="row">
|
||||
<img src="images/sw4.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--set3-->
|
||||
<div class="blog-heading">
|
||||
<h1>Memorial Day</h1>
|
||||
</div>
|
||||
<div class="new-content">
|
||||
<!--flower1-->
|
||||
<div class="row">
|
||||
<img src="images/sm2.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower2-->
|
||||
<div class="row">
|
||||
<img src="images/sm3.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower3-->
|
||||
<div class="row">
|
||||
<img src="images/sm4.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower4-->
|
||||
<div class="row">
|
||||
<img src="images/sm1.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--set4-->
|
||||
<div class="blog-heading">
|
||||
<h1>Birthday</h1>
|
||||
</div>
|
||||
<div class="new-content">
|
||||
<!--flower1-->
|
||||
<div class="row">
|
||||
<img src="images/sb1.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower2-->
|
||||
<div class="row">
|
||||
<img src="images/sb2.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--flower3-->
|
||||
<div class="row">
|
||||
<img src="images/sb3.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$$$</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--flower4-->
|
||||
<div class="row">
|
||||
<img src="images/sb4.jpg">
|
||||
<h4>###</h4>
|
||||
<h5>$35.49</h5>
|
||||
<div class="top">
|
||||
<p><i class='bx bxs-hot' ></i>hot</p>
|
||||
</div>
|
||||
<div class="flower-btn">
|
||||
<br><a href="#">Add to cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a href="#" class="scroll-top"><i class='bx bxs-chevrons-up'></i></a>
|
||||
|
||||
<div class="end-text">
|
||||
<p>© Flora All Rights Reserved </p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,582 +0,0 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Klee One', cursive;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
:root{
|
||||
--bg-color:snow;
|
||||
--main-color:lightcoral;
|
||||
--minor-color:rgb(49, 48, 48);
|
||||
--other-color:dimgray;
|
||||
--text-color:black;
|
||||
--head-font:5rem;
|
||||
--h2-font:3rem;
|
||||
--p-font:1.5rem;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
section{
|
||||
padding: 3rem 0 2rem;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
.bx{
|
||||
cursor: pointer;
|
||||
}
|
||||
body{
|
||||
background: var(--body-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
.container{
|
||||
max-width: 1060px;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background: var(--bg-color);
|
||||
box-shadow: 0 1px 6px 0 rgb(32 33 36 /10% );
|
||||
display: flex;
|
||||
padding: 4px 10%;
|
||||
}
|
||||
.logo-img{
|
||||
width: 12rem;
|
||||
}
|
||||
.nav{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.logo{
|
||||
font-size: 2rem;
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0 auto 0 0;
|
||||
}
|
||||
.search-box{
|
||||
max-width: 210px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.5rem;
|
||||
padding: 6px 15px;
|
||||
background: rgb(242, 213, 213) ;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
.search-box .bx:hover{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.search-box .bx{
|
||||
font-size: 1rem;
|
||||
}
|
||||
#search-input{
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text-color);
|
||||
background: transparent;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.navbar{
|
||||
position: fixed;
|
||||
top: 9%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 3.2rem;
|
||||
|
||||
}
|
||||
.nav-link{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: var(--other-color);
|
||||
}
|
||||
.nav-link:hover, .nav-active{
|
||||
color: var(--main-color);
|
||||
transition: 0.2s all linear;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.nav-link .bx{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.nav-link-title{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
section{
|
||||
padding: 50px 15% 70px;
|
||||
}
|
||||
/*-------*/
|
||||
.home{
|
||||
position: relative;
|
||||
background: url(images/wall3.jpg);
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.home-text h1{
|
||||
font-family: 'Norican', cursive;
|
||||
font-size: 4.2rem;
|
||||
color: var(--minor-color);
|
||||
margin-bottom: 20px;
|
||||
margin-top: 200px;
|
||||
line-height: 1;
|
||||
}
|
||||
.home-text p{
|
||||
color:DimGray ;
|
||||
font-size: var(--p-font);margin-bottom: 60px;
|
||||
}
|
||||
.home-btn{
|
||||
padding: 15px 20px;
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
.home-btn:hover{
|
||||
background: var(--other-color);
|
||||
}
|
||||
.promotion{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, auto));
|
||||
gap: 1rem;
|
||||
}
|
||||
.promotion-img img{
|
||||
width: 100%;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.promotion-img:hover img{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
/*----------*/
|
||||
.popular-text h2{
|
||||
text-align: center;
|
||||
font-size: var(--h2-font);
|
||||
font-weight: 500;
|
||||
font-family: 'Norican', cursive;
|
||||
}
|
||||
.new-content{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, auto));
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
margin-top: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
.row{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.row img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.row h4{
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.row h4:hover{
|
||||
color: var(--main-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.row h5{
|
||||
color: var(--other-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
.top{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
width: 60px;
|
||||
color: var(--bg-color);
|
||||
background: var(--main-color);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.row .flower-btn a{
|
||||
padding: 8px 10px;
|
||||
background: rgb(242, 213, 213);
|
||||
color: var(--minor-color);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
.row:hover .flower-btn a{
|
||||
color: var(--main-color);
|
||||
}
|
||||
/*----------*/
|
||||
.review h1{
|
||||
text-align: center;
|
||||
font-size: var(--h2-font);
|
||||
font-weight: 500;
|
||||
font-family: 'Norican', cursive;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
.review .box-container{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
.review .box-container .box{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, auto));
|
||||
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem 4.2rem;
|
||||
position: relative;
|
||||
border: 0.1rem;
|
||||
align-items: center;
|
||||
}
|
||||
.review .box-container .box .bxs-quote-right{
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
right: 1rem;
|
||||
font-size: 2.5rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.review .box-container .box .stars i{
|
||||
color: var(--main-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.review .box-container .box p{
|
||||
color: var(--minor-color);
|
||||
font-size: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.review .box-container .box .user{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.review .box-container .box .user img{
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.review .box-container .box .user h3{
|
||||
font-size: 1.5rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.review .box-container .box .user span{
|
||||
font-size: 1rem;
|
||||
color: var(--minor-color);
|
||||
}
|
||||
/*-----------*/
|
||||
.contact{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
|
||||
gap: 2rem;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
.contact-box h4{
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 16px;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.contact-box li{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.contact-box a{
|
||||
font-size: 14px;
|
||||
color: var(--minor-color);
|
||||
}
|
||||
.contact-box h5{
|
||||
color: var(--minor-color);
|
||||
}
|
||||
.contact-box i{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.end-text p{
|
||||
text-align: center;
|
||||
background: #272829;
|
||||
color: var(--bg-color);
|
||||
font-size: 15px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.scroll-top{
|
||||
position: fixed;
|
||||
bottom: 2.3rem;
|
||||
right: 2.3rem;
|
||||
}
|
||||
.scroll-top i{
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
font-size: 22px;
|
||||
padding: 12px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
/*----------*/
|
||||
@media(max-width: 1200px){
|
||||
header{
|
||||
padding: 1px 2%;
|
||||
}
|
||||
section{
|
||||
padding: 40px 3% 50px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 920px){
|
||||
.logo-img{
|
||||
width: 8rem;
|
||||
}
|
||||
.nav{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.search-box{
|
||||
max-width: 170px;
|
||||
}
|
||||
#search-input{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.navbar{
|
||||
top: 5%;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 720px){
|
||||
.search-box{
|
||||
max-width: 150px;
|
||||
}
|
||||
#search-input{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.navbar{
|
||||
top: 5%;
|
||||
gap: 2rem;
|
||||
}
|
||||
.nav-link .bx{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.nav-link-title{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 640px){
|
||||
.home-text h1{
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
.home-text p{
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.home-btn{
|
||||
padding: 8px 13px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.popular-text h2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
.row img{
|
||||
width: 50%;
|
||||
height: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.row h4{
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.top{
|
||||
left: 150px;
|
||||
}
|
||||
.review h1{
|
||||
font-size: 2rem;
|
||||
}
|
||||
.review .box-container .box{
|
||||
padding: 1.5rem 9.5rem;
|
||||
}
|
||||
.review .box-container .box .bxs-quote-right{
|
||||
bottom: 2rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.review .box-container .box .stars i{
|
||||
color: var(--main-color);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.review .box-container .box .user img{
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
.review .box-container .box .user h3{
|
||||
font-size: 1rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.review .box-container .box .user span{
|
||||
font-size: 0.8rem;
|
||||
color: var(--minor-color);
|
||||
}
|
||||
.contact-box h4{
|
||||
font-size: 14px;
|
||||
}
|
||||
.contact-box a{
|
||||
font-size: 12px;
|
||||
}
|
||||
.end-text p{
|
||||
font-size: 12px;
|
||||
}
|
||||
.scroll-top{
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
}
|
||||
.scroll-top i{
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 550px){
|
||||
.search-box{
|
||||
max-width: 120px;
|
||||
}
|
||||
#search-input{
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.navbar{
|
||||
top: 5%;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.nav-link .bx{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.nav-link-title{
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.review .box-container .box{
|
||||
padding: 1.5rem 6.8rem;
|
||||
}
|
||||
.review .box-container .box .bxs-quote-right{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.review .box-container .box .user h3{
|
||||
font-size: 1rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.review .box-container .box .user span{
|
||||
font-size: 0.7rem;
|
||||
color: var(--minor-color);
|
||||
}
|
||||
.review .box-container .box p{
|
||||
font-size: 0.8rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
.contact-box h4{
|
||||
font-size: 12px;
|
||||
}
|
||||
.contact-box a{
|
||||
font-size: 10px;
|
||||
}
|
||||
.end-text p{
|
||||
font-size: 10px;
|
||||
}
|
||||
.scroll-top{
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
}
|
||||
.contact{
|
||||
gap: 0.8rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 500px){
|
||||
.search-box{
|
||||
max-width: 100px;
|
||||
}
|
||||
#search-input{
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
.navbar{
|
||||
gap: 1.3rem;
|
||||
}
|
||||
.review .box-container .box{
|
||||
padding: 1.5rem 5.3rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 450px){
|
||||
.logo-img{
|
||||
width: 5.5rem;
|
||||
}
|
||||
.search-box{
|
||||
max-width: 92px;
|
||||
}
|
||||
.home-text p{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.review .box-container .box{
|
||||
padding: 1.5rem 3.9rem;
|
||||
}
|
||||
.top{
|
||||
left: 80px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 400px){
|
||||
.logo-img{
|
||||
width: 5rem;
|
||||
}
|
||||
.search-box{
|
||||
max-width: 100px;
|
||||
}
|
||||
#search-input{
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
.navbar{
|
||||
top: 6%;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
.nav-link .bx{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.nav-link-title{
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
.home-text p{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.review .box-container .box{
|
||||
padding: 1.5rem 2.5rem;
|
||||
}
|
||||
.top{
|
||||
left: 80px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 380px){
|
||||
.home-text p{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.home-btn{
|
||||
padding: 7px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.review .box-container .box{
|
||||
padding: 1.5rem 1.8rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 360px){
|
||||
.review .box-container .box{
|
||||
padding: 1.5rem 1.2rem;
|
||||
}
|
||||
.search-box{
|
||||
max-width: 90px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Klee One', cursive;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
:root{
|
||||
--bg-color:snow;
|
||||
--main-color:lightcoral;
|
||||
--minor-color:rgb(49, 48, 48);
|
||||
--other-color:dimgray;
|
||||
--text-color:black;
|
||||
}
|
||||
.about{
|
||||
margin-top: 10rem;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
.about-container{
|
||||
width: 80%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
padding-top: 100px;
|
||||
}
|
||||
.about-text{
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.about-img{
|
||||
float: right;
|
||||
width: 40%;
|
||||
}
|
||||
.about-img img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.about-text .tiltle h1{
|
||||
font-size: 36px;
|
||||
font-family: 'Norican', cursive;
|
||||
}
|
||||
.content p{
|
||||
margin-top: 3%;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
color: var(--other-color);
|
||||
}
|
||||
.content .button {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .button a{
|
||||
background-color: var(--main-color);
|
||||
padding: 10px 15px;
|
||||
color: var(--bg-color);
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
.content .button a:hover{
|
||||
background-color: rgb(239, 197, 197);
|
||||
color: var(--text-color);
|
||||
}
|
||||
.social{
|
||||
margin-top: 40px;
|
||||
}
|
||||
.social i{
|
||||
color: var(--main-color);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media(max-width:1000px){
|
||||
.about-container{
|
||||
width: 80%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.about-text{
|
||||
float: none;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
.about-img{
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.about-img img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
.about-text .tiltle{
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.content .button {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.social{
|
||||
text-align: center;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Klee One', cursive;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
:root{
|
||||
--bg-color:snow;
|
||||
--main-color:lightcoral;
|
||||
--minor-color:rgb(49, 48, 48);
|
||||
--other-color:dimgray;
|
||||
--text-color:black;
|
||||
}
|
||||
#blog{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.blog-heading h1{
|
||||
font-size: 2.5rem;
|
||||
font-family: 'Norican', cursive;
|
||||
}
|
||||
.blog-container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 20px 0px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.blog-content{
|
||||
width: 350px;
|
||||
background-color: var(--bg-color);
|
||||
border: 1px solid var(--bg-color);
|
||||
margin: 20px;
|
||||
}
|
||||
.blog-img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.blog-img img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
.blog-text{
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.blog-text span{
|
||||
color: var(--other-color);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.blog-text .blog-title{
|
||||
font-size: 1.2rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.blog-text .blog-title:hover{
|
||||
color: var(--other-color);
|
||||
transition: all ease 0.5s;
|
||||
}
|
||||
.blog-text p{
|
||||
color: var(--text-color);
|
||||
font-size: 0.8rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
.blog-text a{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.blog-text a:hover{
|
||||
color: var(--minor-color);
|
||||
transition: all ease 0.5s;
|
||||
}
|
||||
@media(max-width:1200px){
|
||||
#blog{
|
||||
margin-top: 15%;
|
||||
}
|
||||
.blog-container{
|
||||
width: 120%;
|
||||
}
|
||||
}
|
||||
@media(max-width:1100px){
|
||||
#blog{
|
||||
margin-top: 15%;
|
||||
}
|
||||
.blog-container{
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
@media(max-width:550px){
|
||||
#blog{
|
||||
margin-top: 18%;
|
||||
}
|
||||
.blog-container{
|
||||
margin: 20px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Klee One', cursive;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
:root{
|
||||
--bg-color:snow;
|
||||
--main-color:lightcoral;
|
||||
--minor-color:rgb(49, 48, 48);
|
||||
--other-color:dimgray;
|
||||
--text-color:black;
|
||||
}
|
||||
body{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
.contact-container{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 100px;
|
||||
}
|
||||
.contact-box{
|
||||
max-width: 850px;
|
||||
margin-top: 10%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
.left{
|
||||
height: 100%;
|
||||
background: url(images/bl3.jpg) no-repeat center;
|
||||
background-size: cover;
|
||||
}.right{
|
||||
padding: 25px 40px;
|
||||
}
|
||||
h2{
|
||||
padding-bottom: 10px;
|
||||
margin-top: 8%;
|
||||
margin-bottom: 5%;
|
||||
position: relative;
|
||||
font-family: 'Norican', cursive;
|
||||
font-size: 2rem;
|
||||
}
|
||||
h2:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
height: 4px;
|
||||
width: 50px;
|
||||
border-radius: 2px;
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
.field{
|
||||
width: 100%;
|
||||
padding: 0.6rem 1rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: rgba(230, 230, 230, 0.5);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 20px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.area{
|
||||
min-height: 150px;
|
||||
}
|
||||
.button-btn{
|
||||
margin-top: 5%;
|
||||
margin-bottom: 8%;
|
||||
width: 30%;
|
||||
padding: 8px 10px;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
background-color: var(--main-color);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-btn:hover{
|
||||
background-color: rgb(239, 197, 197);
|
||||
color: var(--text-color);
|
||||
}
|
||||
@media(max-width: 880px){
|
||||
.contact-box{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.left{
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 500px){
|
||||
.contact-box{
|
||||
max-width: 800px;
|
||||
}
|
||||
h2{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.field{
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.area{
|
||||
min-height: 90px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 400px){
|
||||
.field{
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
.area{
|
||||
min-height: 80px;
|
||||
}
|
||||
.button-btn{
|
||||
width: 60%;
|
||||
padding: 5px 8px;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 380px){
|
||||
h2{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.field{
|
||||
padding: 0.4rem 0.4rem;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
.button-btn{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
#shop{
|
||||
margin-top: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
#shop .blog-heading h1{
|
||||
margin-top: 8%;
|
||||
}
|
||||
|
||||
|
|
@ -1,369 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Home Furniture</title>
|
||||
<link rel="shortcut icon" href="images/logo.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.theme.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header id="header" class="header">
|
||||
<div class="top-nav">
|
||||
<div class="container display-flex">
|
||||
<p><i class='bx bxs-truck' ></i>   Get $59 free delivery on all oders over $159! See details</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navigation">
|
||||
<div class="nav-container container display-flex">
|
||||
<a href="" class="logo">
|
||||
I<span>KEY</span>
|
||||
</a>
|
||||
|
||||
<ul class="nav-list display-flex">
|
||||
<li class="nav-item"><a href="/" class="nav-link">Home</a></li>
|
||||
<li class="nav-item"><a href="/product.html" class="nav-link">Products</a></li>
|
||||
<li class="nav-item"><a href="#room" class="nav-link">Rooms</a></li>
|
||||
<li class="nav-item"><a href="#ideas" class="nav-link">Ideas</a></li>
|
||||
<li class="nav-item"><a href="#deals" class="nav-link">Deals</a></li>
|
||||
<li class="icons display-flex">
|
||||
<div class="icon" id="search-box">
|
||||
<input type="search" id="search-input" placeholder="What are you looking for?">
|
||||
<i class='bx bx-search' ></i>
|
||||
</div>
|
||||
<a href="login.html" class="icon"><i class='bx bxs-user'></i></a>
|
||||
<div class="icon"><i class='bx bx-heart' ></i></div>
|
||||
<a href="cart.html" class="icon"><i class='bx bx-cart' ></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="icons display-flex">
|
||||
<div class="icon" id="search-box">
|
||||
<input type="search" id="search-input" placeholder="What are you looking for?">
|
||||
<i class='bx bx-search' ></i>
|
||||
</div>
|
||||
<a href="login.html" class="icon"><i class='bx bxs-user'></i></a>
|
||||
<div class="icon"><i class='bx bx-heart' ></i></div>
|
||||
<a href="cart.html" class="icon"><i class='bx bx-cart' ></i></a>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<i class="bx bx-menu"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="glide" id="glide_">
|
||||
<div class="glide__track" data-glide-el="track">
|
||||
<ul class="glide__slides">
|
||||
<li class="glide__slide">
|
||||
<div class="center">
|
||||
<div class="footer-left">
|
||||
<span>New Fall Collection 2023</span>
|
||||
<h1>Comfort and coziness with Bee's armchair</h1>
|
||||
<p>A colorfully contemporary home workspace</p>
|
||||
<a href="" class="footer-btn">Shop now</a>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<img src="images/collection-1.png" class="img-1">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="glide__slide">
|
||||
<div class="center">
|
||||
<div class="footer-left">
|
||||
<span>Ideas & Inspiration</span>
|
||||
<h1>20% off select Hexagon Bookcase</h1>
|
||||
<p>Spend less to organize and showcase your books!</p>
|
||||
<a href="" class="footer-btn">Shop now</a>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<img src="images/collection-2.png" class="img-2">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section-category" id="section-category">
|
||||
<div class="category-center">
|
||||
<div class="category-box">
|
||||
<div class="category-img">
|
||||
<img src="images/category-1.jpg">
|
||||
</div>
|
||||
<div class="category-content">
|
||||
<h3>Deal of the week: Living room accessories</h3>
|
||||
<p>Don't miss this deal of the week offer on DIVA sofa. Regular price, $529.99. Sale price, $399.99!!</p>
|
||||
<a href="" class="post-btn"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-box">
|
||||
<div class="category-img">
|
||||
<img src="images/category-2.jpg">
|
||||
</div>
|
||||
<div class="category-content">
|
||||
<h3>Deal of the week: Furniture</h3>
|
||||
<p>Hurry,one week only offer on the Raccoon bar stool. Sale price, $89.99. </p>
|
||||
<a href="" class="post-btn"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-box">
|
||||
<div class="category-img">
|
||||
<img src="images/category-3.jpg">
|
||||
</div>
|
||||
<div class="category-content">
|
||||
<h3>New lower prices</h3>
|
||||
<p>Shop our low prices from office essentials to storage.</p>
|
||||
<a href="" class="post-btn"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section banner">
|
||||
<div class="banner-content">
|
||||
<h1>Midsummer low prices</h1>
|
||||
<p>Shop online now and select from more than 9,999 convenient pickup locations!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-category-2" id="section-category-2">
|
||||
<div class="category-center-2">
|
||||
<div class="category-box-2">
|
||||
<div class="category-img-2">
|
||||
<img src="images/category2-1.jpg">
|
||||
</div>
|
||||
<div class="category-content-2">
|
||||
<h3>Delivery now starts at $59 from $79</h3>
|
||||
<p>Choose an arrival date range and have your purchases conveniently delivered to your front door for $59.</p>
|
||||
<a href="" class="post-btn-2"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-box-2">
|
||||
<div class="category-img-2">
|
||||
<img src="images/category2-2.jpg">
|
||||
</div>
|
||||
<div class="category-content-2">
|
||||
<h3>New living room styles</h3>
|
||||
<p>By producing in high volumes with smarter designs, we can continue to offer affordable products for you.</p>
|
||||
<a href="" class="post-btn-2"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-box-2">
|
||||
<div class="category-img-2">
|
||||
<img src="images/category2-3.jpg">
|
||||
</div>
|
||||
<div class="category-content-2">
|
||||
<h3>Spend more-Save more</h3>
|
||||
<p>If you are ready for a deal, this section is for you!</p>
|
||||
<a href="" class="post-btn-2"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="new-topic-summer">
|
||||
<div class="new-topic-text">
|
||||
<h1>Best. Summer. Styles. Ever.</h1>
|
||||
<p>Everything good, everything magical, happens during summer! Make the most of your outside-time this summer, and shop our products at IKEY.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="new-topic container" id="new-topic">
|
||||
<img src="images/summer.jpg" alt="" class="new-img">
|
||||
<div class="new-text">
|
||||
<a href="" class="click-btn">
|
||||
<i class='bx bxs-circle'></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="new-text-2">
|
||||
<a href="" class="click-btn">
|
||||
<i class='bx bxs-circle'></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="new-text-3">
|
||||
<a href="" class="click-btn">
|
||||
<i class='bx bxs-circle'></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section new-arrival">
|
||||
<div class="new-arrival-title">
|
||||
<h1>Popular categories</h1>
|
||||
<p>All the latest picked from our store</p>
|
||||
</div>
|
||||
<div class="product-center">
|
||||
<div class="product-item">
|
||||
<div class="overlay">
|
||||
<a href="product-details.html" class="product-show">
|
||||
<img src="images/furniture/new-1.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span>Sofas</span>
|
||||
<a href="product-details.html"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="overlay">
|
||||
<a href="product-details.html" class="product-show">
|
||||
<img src="images/furniture/new-2.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span>Beds & Mattresses</span>
|
||||
<a href="product-details.html"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="overlay">
|
||||
<a href="product-details.html" class="product-show">
|
||||
<img src="images/furniture/new-3.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span>Bookcases</span>
|
||||
<a href="product-details.html"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="overlay">
|
||||
<a href="product-details.html" class="product-show">
|
||||
<img src="images/furniture/new-4.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span>TV & Media Furniture</span>
|
||||
<a href="product-details.html"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="overlay">
|
||||
<a href="product-details.html" class="product-show">
|
||||
<img src="images/furniture/new-5.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span>Dressers & Wardrobes</span>
|
||||
<a href="product-details.html"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="overlay">
|
||||
<a href="product-details.html" class="product-show">
|
||||
<img src="images/furniture/new-6.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span>Tables & Desks</span>
|
||||
<a href="product-details.html"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="overlay">
|
||||
<a href="product-details.html" class="product-show">
|
||||
<img src="images/furniture/new-7.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span>Cookware</span>
|
||||
<a href="product-details.html"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="overlay">
|
||||
<a href="product-details.html" class="product-show">
|
||||
<img src="images/furniture/new-8.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span>Children & Nursery</span>
|
||||
<a href="product-details.html"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="overlay">
|
||||
<a href="product-details.html" class="product-show">
|
||||
<img src="images/furniture/new-9.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span>Home Decor</span>
|
||||
<a href="product-details.html"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="overlay">
|
||||
<a href="product-details.html" class="product-show">
|
||||
<img src="images/furniture/new-10.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span>Special offers</span>
|
||||
<a href="product-details.html"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section banner-2">
|
||||
<div class="banner-conten-2">
|
||||
<h1>Services to help you shop</h1>
|
||||
<p>IKEY offers a wide range of useful services to help you purchase, transport and assemble your products.</p>
|
||||
<a href="" class="banner-2-btn">View all services</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gallery-container">
|
||||
<div class="new-topic-text-2">
|
||||
<h1>The Life at Home</h1>
|
||||
<p>At your IKEY online store, you'll discover even more tips and ideas to make the most of every room in your home.</p>
|
||||
</div>
|
||||
<div class="gallery-container">
|
||||
<i class='bx bx-chevron-left' id="back-btn"></i>
|
||||
<div class="gallery">
|
||||
<div>
|
||||
<span><img src="images/slide-1.jpg"></span>
|
||||
<span><img src="images/slide-2.jpg"></span>
|
||||
<span><img src="images/slide-3.jpg"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span><img src="images/slide-4.jpg"></span>
|
||||
<span><img src="images/slide-5.jpg"></span>
|
||||
<span><img src="images/slide-6.jpg"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span><img src="images/slide-7.jpg"></span>
|
||||
<span><img src="images/slide-8.jpg"></span>
|
||||
<span><img src="images/slide-9.jpg"></span>
|
||||
</div>
|
||||
</div>
|
||||
<i class='bx bx-chevron-right' id="next-btn"></i>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.js"></script>
|
||||
<script src="swiper.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
const navBar = document.querySelector('.nav-bar');
|
||||
const navList = document.querySelector('.nav-list');
|
||||
|
||||
if(navBar){
|
||||
navBar.addEventListener('click', () => {
|
||||
navList.classList.toggle('open');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
let scrollcontainer = document.querySelector('.gallery');
|
||||
let backButton = document.getElementById('back-btn');
|
||||
let nextButton = document.getElementById('next-btn');
|
||||
|
||||
scrollcontainer.addEventListener('wheel', (evt) =>{
|
||||
evt.preventDefault();
|
||||
scrollcontainer.scrollLeft += evt.deltaY;
|
||||
});
|
||||
|
||||
nextButton.addEventListener('click', () =>{
|
||||
scrollcontainer.style.scrollBehavior = 'smooth';
|
||||
scrollcontainer.scrollLeft += 900;
|
||||
});
|
||||
backButton.addEventListener('click', () =>{
|
||||
scrollcontainer.style.scrollBehavior = 'smooth';
|
||||
scrollcontainer.scrollLeft -= 900;
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -1,663 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Permanent+Marker&family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,600&family=Vujahday+Script&display=swap');
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
:root{
|
||||
--w:white;
|
||||
--b:black;
|
||||
--g:gray;
|
||||
--lg:lightgray;
|
||||
}
|
||||
html{
|
||||
font-size: 65%;
|
||||
}
|
||||
body{
|
||||
font-size: 1.5rem;
|
||||
background-color: var(--w);
|
||||
color: var(--b);
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
li{
|
||||
list-style-type: none;
|
||||
}
|
||||
.container{
|
||||
max-width: 115rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 3rem;
|
||||
}
|
||||
.display-flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header{
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.top-nav{
|
||||
background-color: var(--b);
|
||||
color: var(--w);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.top-nav .display-flex{
|
||||
height: 4rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.top-nav a{
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
.top-nav p{
|
||||
cursor: pointer;
|
||||
}
|
||||
.navigation{
|
||||
line-height: 6rem;
|
||||
}
|
||||
.nav-container .display-flex{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.logo{
|
||||
font-size: 3rem;
|
||||
color: gold;
|
||||
font-weight: 600;
|
||||
margin: 0 auto 0 0;
|
||||
}
|
||||
.logo span{
|
||||
color: blue;
|
||||
}
|
||||
.nav-container .nav-item:not(:last-child){
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.nav-container .nav-link{
|
||||
font-size: 1.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.nav-container .nav-link:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
.icon{
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
padding: 0 1rem;
|
||||
position: relative;
|
||||
}
|
||||
.icon:not(:last-child){
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
#search-box{
|
||||
margin: 4rem;
|
||||
max-width: 320px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.5rem;
|
||||
padding: 8px 15px;
|
||||
background:var(--lg);
|
||||
border-radius: 4rem;
|
||||
}
|
||||
#search-box .bx{
|
||||
font-size: 2rem;
|
||||
}
|
||||
#search-input{
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.nav-list .icons{
|
||||
display: none;
|
||||
}
|
||||
.nav-container .nav-bar{
|
||||
display: none;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*----- footer -----*/
|
||||
.footer, .footer .glide__slides{
|
||||
background-color: #e0e2e4;
|
||||
position: relative;
|
||||
height: calc(100vh - 6rem);
|
||||
margin: 0 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.footer .center{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-top: 3rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.footer .footer-left{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all 1s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
.footer .footer-left h1{
|
||||
font-size: 3.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.footer .footer-left p{
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
.footer .footer-left .footer-btn{
|
||||
display: inline-block;
|
||||
padding: 1rem 3rem;
|
||||
margin-top: 1rem;
|
||||
background-color: #625750;
|
||||
color: var(--w);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.footer .footer-right{
|
||||
flex: 0 0 50%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 80%;
|
||||
}
|
||||
.footer .footer-right img{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
.footer .footer-right img.img-1{
|
||||
width: 75%;
|
||||
right: -30%;
|
||||
bottom: -50%;
|
||||
}
|
||||
.footer .footer-right img.img-2{
|
||||
width: 80%;
|
||||
right: -30%;
|
||||
bottom: -50%;
|
||||
}
|
||||
.glide__slide--active .center .footer-right img{
|
||||
bottom: -2%;
|
||||
opacity: 1;
|
||||
}
|
||||
.glide__slide--active .footer-left{
|
||||
opacity: 1;
|
||||
top: 30%;
|
||||
}
|
||||
/*----- category -----*/
|
||||
#section-category{
|
||||
padding: 6rem 0;
|
||||
margin: 5rem;
|
||||
}
|
||||
.category-center{
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.category-center .category-box{
|
||||
width: 33%;
|
||||
background: yellow;
|
||||
text-align: center;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
.category-center .category-box .category-img{
|
||||
height: 60rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.category-center .category-box .category-img img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.category-center .category-box .category-img:hover img{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.category-center .category-box .category-content{
|
||||
padding: 2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.category-center .category-box .category-content h3{
|
||||
font-size: 2rem;
|
||||
}
|
||||
.category-center .category-box .category-content p{
|
||||
font-size: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.category-center .category-box .category-content .post-btn{
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: none;
|
||||
padding: 1rem 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background: var(--b);
|
||||
color: var(--w);
|
||||
transition: all 0.5s ease-in-out;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.category-center .category-box .category-content .post-btn:hover{
|
||||
background-color: rgb(62, 62, 62);
|
||||
}
|
||||
/*----- Banner -----*/
|
||||
.banner{
|
||||
position: relative;
|
||||
background-color: #e0e2e4 ;
|
||||
padding: 6rem 3rem;
|
||||
margin: 5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.banner .banner-content h1{
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.banner .banner-content p{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
/*----- category2 -----*/
|
||||
#section-category-2{
|
||||
padding: 6rem 3rem;
|
||||
margin: 5rem;
|
||||
}
|
||||
.category-center-2{
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.category-center-2 .category-box-2{
|
||||
width: 33%;
|
||||
background: rgb(42, 42, 171);
|
||||
color: var(--w);
|
||||
text-align: center;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
.category-center-2 .category-box-2 .category-img-2{
|
||||
height: 40rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.category-center-2 .category-box-2 .category-img-2 img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.category-center-2 .category-box-2 .category-content-2{
|
||||
padding: 2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.category-center-2 .category-box-2 .category-content-2 h3{
|
||||
font-size: 2rem;
|
||||
}
|
||||
.category-center-2 .category-box-2 .category-content-2 p{
|
||||
font-size: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.category-center-2 .category-box-2 .category-content-2 .post-btn-2{
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: none;
|
||||
padding: 1rem 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background: var(--w);
|
||||
color: var(--b);
|
||||
transition: all 0.5s ease-in-out;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.category-center-2 .category-box-2 .category-content-2 .post-btn-2:hover{
|
||||
background-color: rgb(62, 62, 62);
|
||||
}
|
||||
/*----------------*/
|
||||
.new-topic-text{
|
||||
margin-left: 8rem;
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
.new-topic-text h1{
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.new-topic-text p{
|
||||
font-size: 1.5rem;
|
||||
color: #625750;
|
||||
}
|
||||
/*----------------*/
|
||||
.new-topic{
|
||||
position: relative;
|
||||
min-height: 450px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.new-img{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 130%;
|
||||
z-index: -1;
|
||||
object-fit: cover;
|
||||
}
|
||||
.new-text{
|
||||
padding-right: 20px;
|
||||
padding-top: 80px;
|
||||
}
|
||||
.new-text-2{
|
||||
padding-left: 250px;
|
||||
padding-bottom: 180px;
|
||||
}
|
||||
.new-text-3{
|
||||
padding-left: 50px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
.click-btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.8rem;
|
||||
color: white;
|
||||
}
|
||||
.click-btn .bx{
|
||||
font-size: 16px;
|
||||
background: rgba(121, 120, 120, 0.5);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.click-btn .bx:hover{
|
||||
background: rgba(121, 120, 120, 0.8);
|
||||
border: 1px solid white;
|
||||
}
|
||||
/*----- new arrival -----*/
|
||||
.new-arrival-title{
|
||||
padding: 6rem 3rem;
|
||||
margin: 5rem;
|
||||
}
|
||||
.new-arrival-title h1{
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.new-arrival-title p{
|
||||
font-size: 1.5rem;
|
||||
color: #625750;
|
||||
}
|
||||
.product-center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 150rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
.product-item{
|
||||
position: relative;
|
||||
width: 25rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.product-show img{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
transition: all 0.5s linear;
|
||||
}
|
||||
.product-info{
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.product-info span{
|
||||
display: inline-block;
|
||||
font-size: 1.2rem;
|
||||
color: #625750;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.product-info a{
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
/*----- Banner2 -----*/
|
||||
.banner-2{
|
||||
position: relative;
|
||||
background-color: #e0e2e4 ;
|
||||
padding: 6rem 3rem;
|
||||
margin: 5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.banner-2 .banner-content-2 h1{
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.banner-2 .banner-content-2 p{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.banner-2-btn{
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
margin-top: 3rem;
|
||||
background-color: #625750;
|
||||
color: var(--w);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
/*----- slide -----*/
|
||||
.new-topic-text-2{
|
||||
margin-left: 8rem;
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
.new-topic-text-2 h1{
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.new-topic-text-2 p{
|
||||
font-size: 1.5rem;
|
||||
color: #625750;
|
||||
}
|
||||
.gallery{
|
||||
width: 1000px;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.gallery div{
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-gap: 20px;
|
||||
padding: 10px;
|
||||
flex: none;
|
||||
}
|
||||
.gallery div img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
.gallery-container{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#back-btn, #next-btn{
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
font-size: 3rem;
|
||||
}
|
||||
.gallery div img:hover{
|
||||
transform:scale(1.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*----- respo -----*/
|
||||
@media(max-width: 1200px){
|
||||
.new-img{
|
||||
width: 90%;
|
||||
height: 120%;
|
||||
}
|
||||
.new-text{
|
||||
display: none;
|
||||
}
|
||||
.new-text-2{
|
||||
display: none;
|
||||
}
|
||||
.new-text-3{
|
||||
display: none;
|
||||
}
|
||||
.new-topic-text{
|
||||
margin-left: 8rem;
|
||||
margin-bottom: 8rem;
|
||||
margin-right: 8rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 1000px){
|
||||
.glide__slide--active .footer-left{
|
||||
top: 15%;
|
||||
}
|
||||
.footer .footer-right img.img-1{
|
||||
width: 100%;
|
||||
}
|
||||
.footer .footer-right img.img-2{
|
||||
width: 100%;
|
||||
}
|
||||
.section-category .category-center{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.section-category .category-center .category-box{
|
||||
width: 100%;
|
||||
}
|
||||
.section-category-2 .category-center-2{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.section-category-2 .category-center-2 .category-box-2{
|
||||
width: 100%;
|
||||
}
|
||||
.product-item{
|
||||
width: 20rem;
|
||||
}
|
||||
.product-show img{
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 765px){
|
||||
.footer .footer-left h1{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.category-center-2 .category-box-2 .category-img-2{
|
||||
height: 30rem;
|
||||
width: 100%;
|
||||
}
|
||||
.new-img{
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
.new-topic-text{
|
||||
margin-left: 8rem;
|
||||
margin-bottom: 4rem;
|
||||
margin-right: 8rem;
|
||||
}
|
||||
.new-topic-text-2{
|
||||
margin-left: 8rem;
|
||||
margin-right: 8rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 760px){
|
||||
.nav-list{
|
||||
position: fixed;
|
||||
top: 12%;
|
||||
left: -100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
|
||||
height: 80%;
|
||||
width: 0;
|
||||
max-width: 35rem;
|
||||
z-index: 100;
|
||||
transition: all 0.3s ease-in-out;
|
||||
background-color: var(--w);
|
||||
}
|
||||
.nav-list.open{
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.nav-list .nav-item{
|
||||
margin: 1rem 0 1rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
.nav-list .nav-link{
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
.nav-container .nav-bar{
|
||||
display: block;
|
||||
font-size: 3rem;
|
||||
}
|
||||
.icons{
|
||||
display: none;
|
||||
}
|
||||
.nav-list .icons{
|
||||
display: flex;
|
||||
}
|
||||
.top-nav .display-flex{
|
||||
height: 3rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#search-box{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media(max-width: 590px){
|
||||
.footer .footer-left p{
|
||||
width: 80%;
|
||||
}
|
||||
.center .footer-right img.img-1{
|
||||
width: 35rem;
|
||||
}
|
||||
.center .footer-right img.img-2{
|
||||
width: 30rem;
|
||||
}
|
||||
.footer, .footer .glide__slides{
|
||||
margin: 0;
|
||||
padding: 0 3rem;
|
||||
}
|
||||
.new-img{
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
}
|
||||
.new-topic-text{
|
||||
margin-left: 8rem;
|
||||
margin-right: 8rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 400px){
|
||||
.new-topic{
|
||||
display: none;
|
||||
}
|
||||
.new-topic-text{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media(max-width: 362px){
|
||||
.top-nav .display-flex{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
const slider1 = document.querySelector('#glide_')
|
||||
if(slider1){
|
||||
new Glide(slider1, {
|
||||
type:'footer',
|
||||
startAt: 0,
|
||||
autoplay:3000,
|
||||
gap:0,
|
||||
hover:true,
|
||||
perView:1,
|
||||
animationDuration:800,
|
||||
AnimationTimeframe: 'linear',
|
||||
}).mount();
|
||||
}
|
||||
|
|
@ -1,537 +0,0 @@
|
|||
*{padding: 0; margin: 0; font-family: monospace; scroll-behavior: smooth; box-sizing: border-box; scroll-padding-top: 2rem;}
|
||||
:root{
|
||||
--main-color: red;
|
||||
--hover-color: rgb(240, 57, 57);
|
||||
--body-color:black;
|
||||
--container-color:#25262a;
|
||||
--text-color: #fff;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
section{
|
||||
padding: 3rem 0 2rem;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
.bx{
|
||||
cursor: pointer;
|
||||
}
|
||||
body{
|
||||
background: var(--body-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
.container{
|
||||
max-width: 1060px;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: var(--body-color);
|
||||
z-index: 100;
|
||||
}
|
||||
.nav{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.logo{
|
||||
font-size: 2rem;
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0 auto 0 0;
|
||||
}
|
||||
.logo span{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.search-box{
|
||||
max-width: 240px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.5rem;
|
||||
padding: 8px 15px;
|
||||
background: var(--container-color);
|
||||
border-radius: 4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.search-box .bx:hover{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.search-box .bx{
|
||||
font-size: 1rem;
|
||||
}
|
||||
#search-input{
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text-color);
|
||||
background: transparent;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.navbar{
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform:translateY(-50%) ;
|
||||
left: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 3rem;
|
||||
}
|
||||
.nav-link{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: lightgrey;
|
||||
}
|
||||
.nav-link:hover, .nav-active{
|
||||
color: var(--text-color);
|
||||
transition: 0.2s all linear;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.nav-link .bx{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.nav-link-title{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.home{
|
||||
position: relative;
|
||||
min-height: 450px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5rem !important;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.home-img{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
object-fit: cover;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.home-text{
|
||||
padding-left: 40px;
|
||||
}
|
||||
.home-title{
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.home-text p{
|
||||
font-size: 1rem;
|
||||
margin: 10px 0 20px;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.watch-btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.8rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.watch-btn .bx{
|
||||
font-size: 25px;
|
||||
background: var(--main-color);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.watch-btn .bx:hover{
|
||||
background: var(--hover-color);
|
||||
}
|
||||
.watch-btn span{
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.heading{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--container-color);
|
||||
padding: 8px 14px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.heading-title{
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.movie-box{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.movie-box-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.movie-box .box-text{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 14px;
|
||||
background: linear-gradient(8deg, hsl(240 17% 14% / 74%) 14%, hsl(240 17% 14% / 14%) 44% );
|
||||
overflow: hidden;
|
||||
}
|
||||
.movie-title{
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.movie-genre{
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.swiper-btn{
|
||||
display: flex;
|
||||
}
|
||||
.swiper-button-next, .swiper-button-prev{
|
||||
position: static !important;
|
||||
margin: 0 0 0 10px !important;
|
||||
}
|
||||
.swiper-button-next::after, .swiper-button-prev::after{
|
||||
color: var(--text-color);
|
||||
font-size: 20px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
.play-btn{
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
.movies .heading{
|
||||
padding: 10px 14px;
|
||||
}
|
||||
.movies-content{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit,minmax(247px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
.movies-content .movie-box:hover .movie-box-img{
|
||||
transform: scale(1.1);
|
||||
transition: 0.5s;
|
||||
}
|
||||
.next-page{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
.next-page a{
|
||||
color: var(--text-color);
|
||||
font-size: 18px;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
.copyright{
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
/*-----------------------------------------*/
|
||||
.play-container{
|
||||
position: relative;
|
||||
min-height: 540px;
|
||||
margin-top: 5rem !important;
|
||||
}
|
||||
.play-img{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
z-index: -1;
|
||||
}
|
||||
.play-text{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 40px;
|
||||
background: linear-gradient(8deg, hsl(240 17% 14% / 74%) 14%, hsl(240 17% 14% / 14%) 44% );
|
||||
}
|
||||
.play-text h2{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.rating{
|
||||
margin-top: 4px;
|
||||
column-gap: 2px;
|
||||
}
|
||||
.tags{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.tags span{
|
||||
padding: 0 5px;
|
||||
background: var(--container-color);
|
||||
}
|
||||
.play-movie{
|
||||
position: absolute;
|
||||
bottom: 18rem;
|
||||
right: 10rem;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
background: var(--main-color);
|
||||
font-size: 20px;
|
||||
animation: animate 2s linear infinite;
|
||||
}
|
||||
@keyframes animate{
|
||||
0%{
|
||||
box-shadow: 0 0 0 0 rgba(255, 81, 58, 0.7);
|
||||
}
|
||||
40%{
|
||||
box-shadow: 0 0 0 50px rgb(255, 190, 7, 0);
|
||||
}
|
||||
80%{
|
||||
box-shadow: 0 0 0 50px rgb(255, 190, 7, 0);
|
||||
}
|
||||
100%{
|
||||
box-shadow: 0 0 0 rgb(255, 190, 7, 0);
|
||||
}
|
||||
}
|
||||
.video-container{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: hsl(234 10% 20% /60%);
|
||||
z-index: 400;
|
||||
}
|
||||
.video-container.show-video{
|
||||
display: flex;
|
||||
}
|
||||
.video-box{
|
||||
position: relative;
|
||||
width: 75%;
|
||||
}
|
||||
.video-box #myvideo{
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
.close-video{
|
||||
position: absolute;
|
||||
top: -3rem;
|
||||
right: 0;
|
||||
font-size: 40px;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.about-movie{
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
.about-movie h2{
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.about-movie p{
|
||||
max-width: 600px;
|
||||
font-size: 1rem;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.cast-heading{
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.cast{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
|
||||
gap: 1rem;
|
||||
}
|
||||
.cast-img{
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
@media(max-width:1170px){
|
||||
.navbar{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: auto;
|
||||
transform: translateY(0);
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
row-gap: 1px;
|
||||
padding: 10px;
|
||||
border-top: 1px solid hsl(200 100% 99% / 5%);
|
||||
background: linear-gradient(8deg, hsl(240 17% 14% / 100%) 5%,hsl(240 17% 14% / 90%) 100% );
|
||||
}
|
||||
.nav-link .bx{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.copyright{
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
@media(max-width:1060px){
|
||||
.container{
|
||||
margin: 0 auto;
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
@media(max-width:950px){
|
||||
.movie-box{
|
||||
height: 340px;
|
||||
}
|
||||
.movies-content{
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
}
|
||||
@media(max-width:880px){
|
||||
.nav{
|
||||
padding: 14px 0;
|
||||
}
|
||||
.home{
|
||||
min-height: 440px;
|
||||
margin-top: 4rem !important;
|
||||
}
|
||||
.home-text{
|
||||
padding-left: 15px;
|
||||
}
|
||||
.home-title{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.watch-btn span{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.movie-title{
|
||||
font-size: 1rem;
|
||||
padding-right: 30px;
|
||||
}
|
||||
.play-container{
|
||||
min-height: 440px;
|
||||
margin-top: 4rem !important;
|
||||
}
|
||||
.play-movie{
|
||||
bottom: 15rem;
|
||||
right: 3rem;
|
||||
}
|
||||
.cast{
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@media(max-width:760px){
|
||||
.nav{
|
||||
padding: 11px 0;
|
||||
}
|
||||
.home-img{
|
||||
object-position: left;
|
||||
}
|
||||
.movie-genre{
|
||||
font-size: 0.9rem;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.tags span, .about-movie p{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.play-text h2, .about-movie h2{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.play-movie{
|
||||
bottom: 10rem;
|
||||
right: 2rem;
|
||||
}
|
||||
}
|
||||
@media(max-width:500px){
|
||||
.home{
|
||||
min-height: 350px;
|
||||
}
|
||||
.heading{
|
||||
padding: 2px 14px;
|
||||
}
|
||||
.heading-title{
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.play-text{
|
||||
padding: 20px;
|
||||
}
|
||||
.play-movie{
|
||||
bottom: 4rem;
|
||||
}
|
||||
.video-box{
|
||||
width: 90%;
|
||||
}
|
||||
.cast-heading{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.cast-title{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
@media(max-width:400px){
|
||||
*{
|
||||
scroll-padding-top: 5rem;
|
||||
}
|
||||
.nav{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
row-gap: 5px;
|
||||
}
|
||||
.search-box{
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
order: 3;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
.play-container{
|
||||
margin-top: 7rem !important;
|
||||
}
|
||||
.movie-box{
|
||||
height: 300px;
|
||||
}
|
||||
.movies-content{
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
@media(max-width:360px){
|
||||
.home{
|
||||
min-height: 300px;
|
||||
}
|
||||
.movie-box{
|
||||
height: 285px;
|
||||
}
|
||||
.watch-btn .bx{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.navbar{
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
13
movie_app/css/swiper-bundle.min.css
vendored
13
movie_app/css/swiper-bundle.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,281 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MOVIEJTP</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/swiper-bundle.min.css">
|
||||
<link rel="shortcut icon" href="images/Daco.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="index.html" class="logo">
|
||||
Movie<span>JTP</span>
|
||||
</a>
|
||||
<div class="search-box">
|
||||
<input type="search" name="" id="search-input" placeholder="Search movie">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<a href="#home" class="nav-link nav-active">
|
||||
<i class='bx bxs-home'></i>
|
||||
<span class="nav-link-title">HOME</span>
|
||||
</a>
|
||||
<a href="#popular" class="nav-link">
|
||||
<i class='bx bxs-hot'></i>
|
||||
<span class="nav-link-title">TRENDING</span>
|
||||
</a>
|
||||
<a href="#movies" class="nav-link">
|
||||
<i class='bx bx-compass' ></i>
|
||||
<span class="nav-link-title">EXPLORE</span>
|
||||
</a>
|
||||
<a href="play_page.html" class="nav-link">
|
||||
<i class='bx bx-tv' ></i>
|
||||
<span class="nav-link-title">MOVIES</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="home container" id="home">
|
||||
<img src="images/background2.jpg" alt="" class="home-img">
|
||||
<div class="home-text">
|
||||
<h1 class = "home-title">The Flash</h1>
|
||||
<p>Releasing April 4th</p>
|
||||
<a href="play_heading.html" class="watch-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
<span>Watch the trailer</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="popular container" id="popular">
|
||||
<div class="heading">
|
||||
<h2 class="heading-title">Popular Movies</h2>
|
||||
<div class="swiper-btn">
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popular-content swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<!--m1-->
|
||||
<div class="swiper-slide">
|
||||
<div class="movie-box">
|
||||
<img src="images/p1.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">A League of Their Own</h2>
|
||||
<span class="movie-genre">Comedy/ Drama/ Sport</span>
|
||||
<a href="play_popular.html" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--m2-->
|
||||
<div class="swiper-slide">
|
||||
<div class="movie-box">
|
||||
<img src="images/m2.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">Avatar: The Way of Water</h2>
|
||||
<span class="movie-genre">Action/ Adventure/ Fantasy/ Sci-Fi</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--m3-->
|
||||
<div class="swiper-slide">
|
||||
<div class="movie-box">
|
||||
<img src="images/m3.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">M3GAN</h2>
|
||||
<span class="movie-genre"> Horror/ Sci-Fi/ Thriller</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--m4-->
|
||||
<div class="swiper-slide">
|
||||
<div class="movie-box">
|
||||
<img src="images/m4.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">The Hustle</h2>
|
||||
<span class="movie-genre">Comedy/ Crime</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--m5-->
|
||||
<div class="swiper-slide">
|
||||
<div class="movie-box">
|
||||
<img src="images/m5.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">Chip'n Dale: Rescue Rangers</h2>
|
||||
<span class="movie-genre"> Animation/ Action/ Adventure/ Comedy/ Crime/ Family/ Fantasy/ Mystery/ Sci-Fi</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--m6-->
|
||||
<div class="swiper-slide">
|
||||
<div class="movie-box">
|
||||
<img src="images/m6.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">Finch</h2>
|
||||
<span class="movie-genre"> Adventure/ Drama/ Sci-Fi</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--m7-->
|
||||
<div class="swiper-slide">
|
||||
<div class="movie-box">
|
||||
<img src="images/m7.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">Girl in the Basement</h2>
|
||||
<span class="movie-genre"> Crime/ Thriller</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--m8-->
|
||||
<div class="swiper-slide">
|
||||
<div class="movie-box">
|
||||
<img src="images/m8.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">The Last Duel</h2>
|
||||
<span class="movie-genre"> Action/ Drama/ History/ Thriller</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="movies container" id="movies">
|
||||
<div class="heading">
|
||||
<h2 class="heading-title">Movies</h2>
|
||||
</div>
|
||||
<div class="movies-content">
|
||||
<!--p1-->
|
||||
<div class="movie-box">
|
||||
<img src="images/m1.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">Top Gun: Maverick</h2>
|
||||
<span class="movie-genre">Action/ Drama</span>
|
||||
<a href="play_page.html" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--p2-->
|
||||
<div class="movie-box">
|
||||
<img src="images/p2.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">The Quick and the Dead</h2>
|
||||
<span class="movie-genre">Action/ Romance/ Thriller/ Western</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--p3-->
|
||||
<div class="movie-box">
|
||||
<img src="images/p3.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">Léon: The Professional</h2>
|
||||
<span class="movie-genre">Action/ Crime/ Drama/ Thrillerr</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--p4-->
|
||||
<div class="movie-box">
|
||||
<img src="images/p4.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">Forrest Gump</h2>
|
||||
<span class="movie-genre"> Drama/ Romance</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--p5-->
|
||||
<div class="movie-box">
|
||||
<img src="images/p5.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">Joker</h2>
|
||||
<span class="movie-genre"> Crime/ Drama/ Thriller</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--p6-->
|
||||
<div class="movie-box">
|
||||
<img src="images/p6.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">All My Life</h2>
|
||||
<span class="movie-genre"> Drama/ Romance</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--p7-->
|
||||
<div class="movie-box">
|
||||
<img src="images/p7.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">The Banker</h2>
|
||||
<span class="movie-genre"> Drama/ Biography</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--p8-->
|
||||
<div class="movie-box">
|
||||
<img src="images/p8.jpg" alt="" class="movie-box-img">
|
||||
<div class="box-text">
|
||||
<h2 class="movie-title">The Imitation Game</h2>
|
||||
<span class="movie-genre"> Biography/ Drama/ Thriller/ War</span>
|
||||
<a href="#" class="watch-btn play-btn">
|
||||
<i class='bx bx-play-circle' ></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="next-page">
|
||||
<a href="#" class="next-btn">Next Page <i class='bx bx-chevrons-right' ></i> </a>
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
<p>© MOVIEJTP All Rights Reserved </p>
|
||||
</div>
|
||||
|
||||
<script src = "js/swiper-bundle-min.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
var swiper = new Swiper(".popular-content", {
|
||||
autoplay: {
|
||||
delay: 5500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
breakpoints:{
|
||||
280:{
|
||||
slidesPerView: 1,
|
||||
spaceBetween:10,
|
||||
},
|
||||
320:{
|
||||
slidesPerView: 2,
|
||||
spaceBetween:10,
|
||||
},
|
||||
510:{
|
||||
slidesPerView: 2,
|
||||
spaceBetween:10,
|
||||
},
|
||||
750:{
|
||||
slidesPerView: 3,
|
||||
spaceBetween:15,
|
||||
},
|
||||
900:{
|
||||
slidesPerView: 4,
|
||||
spaceBetween:20,
|
||||
},
|
||||
},
|
||||
});
|
||||
// video
|
||||
let playButton = document.querySelector(".play-movie");
|
||||
let video = document.querySelector(".video-container");
|
||||
let myvideo = document.querySelector("#myvideo");
|
||||
let closebtn = document.querySelector(".close-video");
|
||||
|
||||
playButton.onclick = () =>{
|
||||
video.classList.add("show-video")
|
||||
myvideo.play();
|
||||
};
|
||||
closebtn.onclick = () =>{
|
||||
video.classList.remove("show-video")
|
||||
myvideo.pause();
|
||||
};
|
||||
14
movie_app/js/swiper-bundle-min.min.js
vendored
14
movie_app/js/swiper-bundle-min.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,96 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Flash</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="shortcut icon" href="images/Daco.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="index.html" class="logo">
|
||||
Movie<span>JTP</span>
|
||||
</a>
|
||||
<div class="search-box">
|
||||
<input type="search" name="" id="search-input" placeholder="Search movie">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<a href="index.html" class="nav-link nav-active">
|
||||
<i class='bx bxs-home'></i>
|
||||
<span class="nav-link-title">HOME</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="play-container container">
|
||||
<img src="play_page_heading/wall1.jpg" alt="" class="play-img">
|
||||
<div class="play-text">
|
||||
<h2>The Flash</h2>
|
||||
<div class="rating">
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bx-star' ></i>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span>Action</span>
|
||||
<span>Adventure</span>
|
||||
<span>Drama</span>
|
||||
<span>Sci-Fi</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class='bx bx-play-circle play-movie'></i>
|
||||
<div class="video-container">
|
||||
<div class="video-box">
|
||||
<video id="myvideo" src="play_page_heading/The Flash – Official Trailer.mp4" controls></video>
|
||||
<i class='bx bxs-x-circle close-video'></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-movie container">
|
||||
<h2>The Flash</h2>
|
||||
<p>After being struck by lightning, Barry Allen wakes up from his coma to discover
|
||||
he's been given the power of super speed, becoming the Flash, and fighting crime in Central City.</p>
|
||||
<h2 class="cast-heading">Movie Cast</h2>
|
||||
<div class="cast">
|
||||
<div class="cast-box">
|
||||
<img src="play_page_heading/cast1.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Grant Gustin</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_page_heading/cast2.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Candice Patton</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_page_heading/cast3.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Danielle Panabaker</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_page_heading/cast4.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Carlos Valdes</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_page_heading/cast5.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Jesse L. Martin</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_page_heading/cast6.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Tom Cavanagh</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
<p>© MOVIEJTP All Rights Reserved </p>
|
||||
</div>
|
||||
<script src="js/swiper-bundle-min.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Top Gun: Maverick</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="shortcut icon" href="images/Daco.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="index.html" class="logo">
|
||||
Movie<span>JTP</span>
|
||||
</a>
|
||||
<div class="search-box">
|
||||
<input type="search" name="" id="search-input" placeholder="Search movie">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<a href="index.html" class="nav-link nav-active">
|
||||
<i class='bx bxs-home'></i>
|
||||
<span class="nav-link-title">HOME</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="play-container container">
|
||||
<img src="play_page/play_wall2.jpg" alt="" class="play-img">
|
||||
<div class="play-text">
|
||||
<h2>Top Gun: Maverick</h2>
|
||||
<div class="rating">
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star-half' ></i>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span>Action</span>
|
||||
<span>Drama</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class='bx bx-play-circle play-movie'></i>
|
||||
<div class="video-container">
|
||||
<div class="video-box">
|
||||
<video id="myvideo" src="play_page/Top Gun Maverick.mp4" controls></video>
|
||||
<i class='bx bxs-x-circle close-video'></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-movie container">
|
||||
<h2>Top Gun: Maverick</h2>
|
||||
<p>After thirty years, Maverick is still pushing the envelope as a top naval aviator, but must confront ghosts of his past when
|
||||
he leads TOP GUN's elite graduates on a mission that demands the ultimate sacrifice from those chosen to fly it.</p>
|
||||
<h2 class="cast-heading">Movie Cast</h2>
|
||||
<div class="cast">
|
||||
<div class="cast-box">
|
||||
<img src="play_page/cast1.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Tom Cruise</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_page/cast2.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Miles Teller</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_page/cast3.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Jennifer Connelly</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_page/cast4.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Jon Hamm</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_page/cast6.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Glen Powell</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
<p>© MOVIEJTP All Rights Reserved </p>
|
||||
</div>
|
||||
|
||||
<script src="js/swiper-bundle-min.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>A League of Their Own</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="shortcut icon" href="images/Daco.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="index.html" class="logo">
|
||||
Movie<span>JTP</span>
|
||||
</a>
|
||||
<div class="search-box">
|
||||
<input type="search" name="" id="search-input" placeholder="Search movie">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<a href="index.html" class="nav-link nav-active">
|
||||
<i class='bx bxs-home'></i>
|
||||
<span class="nav-link-title">HOME</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="play-container container">
|
||||
<img src="play_popular/wall.jpg" alt="" class="play-img">
|
||||
<div class="play-text">
|
||||
<h2>A League of Their Own</h2>
|
||||
<div class="rating">
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star'></i>
|
||||
<i class='bx bxs-star-half'></i>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span>Comedy</span>
|
||||
<span>Drama</span>
|
||||
<span>Sport</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class='bx bx-play-circle play-movie'></i>
|
||||
<div class="video-container">
|
||||
<div class="video-box">
|
||||
<video id="myvideo" src="play_popular/Official Trailer A League of Their Own (1992).mp4" controls></video>
|
||||
<i class='bx bxs-x-circle close-video'></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-movie container">
|
||||
<h2>A League of Their Own</h2>
|
||||
<p>Two sisters join the first female professional baseball league and struggle to help it succeed
|
||||
amid their own growing rivalry.</p>
|
||||
<h2 class="cast-heading">Movie Cast</h2>
|
||||
<div class="cast">
|
||||
<div class="cast-box">
|
||||
<img src="play_popular/cast1.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Tom Hanks</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_popular/cast2.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Geena Davis</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_popular/cast3.jpeg" alt="" class="cast-img">
|
||||
<span class="cast-title">Lori Petty</span>
|
||||
</div>
|
||||
<div class="cast-box">
|
||||
<img src="play_popular/cast4.jpg" alt="" class="cast-img">
|
||||
<span class="cast-title">Madonna</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
<p>© MOVIEJTP All Rights Reserved </p>
|
||||
</div>
|
||||
|
||||
<script src="js/swiper-bundle-min.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
:root{
|
||||
--bg-color:snow;
|
||||
--main-color:rgb(177, 126, 5);
|
||||
--minor-color:rgb(49, 48, 48);
|
||||
--other-color:dimgray;
|
||||
--text-color:black;
|
||||
--box-shadow:10px 10px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
body{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url(images/contact.jpg) no-repeat;
|
||||
}
|
||||
.contact-container{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 100px;
|
||||
}
|
||||
.contact-box{
|
||||
max-width: 850px;
|
||||
margin-top: 10%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
.left{
|
||||
height: 100%;
|
||||
background: url(images/contact-1.jpg) no-repeat center;
|
||||
background-size: cover;
|
||||
}.right{
|
||||
padding: 25px 40px;
|
||||
}
|
||||
h2{
|
||||
padding-bottom: 10px;
|
||||
margin-top: 8%;
|
||||
margin-bottom: 5%;
|
||||
position: relative;
|
||||
font-family: 'Vujahday Script';
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
h2:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
height: 4px;
|
||||
width: 50px;
|
||||
border-radius: 2px;
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
.field{
|
||||
width: 100%;
|
||||
padding: 0.6rem 1rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: rgba(230, 230, 230, 0.5);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 20px;
|
||||
transition: 0.3s;
|
||||
text-align: left;
|
||||
}
|
||||
.area{
|
||||
min-height: 150px;
|
||||
}
|
||||
.button-btn{
|
||||
margin-top: 5%;
|
||||
margin-bottom: 8%;
|
||||
width: 30%;
|
||||
padding: 8px 10px;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
background-color: var(--main-color);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-btn:hover{
|
||||
background-color: var(--other-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
@media(max-width: 880px){
|
||||
.contact-box{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.left{
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 500px){
|
||||
.contact-box{
|
||||
max-width: 800px;
|
||||
}
|
||||
h2{
|
||||
font-size: 3rem;
|
||||
}
|
||||
.field{
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.area{
|
||||
min-height: 90px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 450px){
|
||||
.field{
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.area{
|
||||
min-height: 80px;
|
||||
}
|
||||
.button-btn{
|
||||
width: 60%;
|
||||
padding: 5px 8px;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@media(max-width: 380px){
|
||||
h2{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.field{
|
||||
padding: 0.4rem 0.4rem;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
.button-btn{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact</title>
|
||||
<link rel="shortcut icon" href="images/logo.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="contact.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Poppins:ital,wght@0,100;0,300;1,100;1,300&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Permanent+Marker&family=Vujahday+Script&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="navbar">
|
||||
<div class="logo">
|
||||
<a href=""><img src="images/logo.png"></a>
|
||||
<span>FUJISAN</span>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="heading-btn">
|
||||
<i class="close-btn fas fa-times-circle"></i>
|
||||
</div>
|
||||
<li><a href="index.html">HOME</a></li>
|
||||
<li><a href="menu.html">MENU</a></li>
|
||||
<li><a href="order.html">ORDER</a></li>
|
||||
<li><a href="index.html">RESERVATION</a></li>
|
||||
<li><a href="">CONTACT</a></li>
|
||||
</nav>
|
||||
<div class="heading-btn">
|
||||
<i class="menu-btn fas fa-bars"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="contact-container">
|
||||
<div class="contact-box">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<h2>Contact Us</h2>
|
||||
<input type="text" class="field" placeholder="Your Name">
|
||||
<input type="text" class="field" placeholder="Your Last name">
|
||||
<input type="email" class="field" placeholder="Your Email">
|
||||
<textarea class="field area" placeholder="Message"></textarea>
|
||||
<button class="button-btn">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,327 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FUJISAN</title>
|
||||
<link rel="shortcut icon" href="images/logo.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Poppins:ital,wght@0,100;0,300;1,100;1,300&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Permanent+Marker&family=Vujahday+Script&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="navbar">
|
||||
<div class="logo">
|
||||
<a href=""><img src="images/logo.png"></a>
|
||||
<span>FUJISAN</span>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="heading-btn">
|
||||
<i class="close-btn fas fa-times-circle"></i>
|
||||
</div>
|
||||
<li><a href="">HOME</a></li>
|
||||
<li><a href="menu.html">MENU</a></li>
|
||||
<li><a href="order.html">ORDER</a></li>
|
||||
<li><a href="#reservation">RESERVATION</a></li>
|
||||
<li><a href="contact.html">CONTACT</a></li>
|
||||
</nav>
|
||||
<div class="heading-btn">
|
||||
<i class="menu-btn fas fa-bars"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="home">
|
||||
<div class="container">
|
||||
<div class="home-content">
|
||||
<h2>HAVE A GOOD DAY WITH A GOOD MEAL</h2>
|
||||
<h3>Fresh ingredients make great food.</h3>
|
||||
<div class="countdown">
|
||||
<div class="title" id="open-time">We are open at 17:00</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
<input type="text" readonly value="0"><br>
|
||||
<label for="">Hours</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" readonly value="0"><br>
|
||||
<label for="">Minutes</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" readonly value="0"><br>
|
||||
<label for="">Seconds</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="post-menu" id="post">
|
||||
<div class="container">
|
||||
<h1 class="post-heading">Luxury & Quality</h1>
|
||||
<div class="post-box">
|
||||
<div class="box">
|
||||
<div class="post-img">
|
||||
<img src="images/post1.jpg" alt="">
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<h3>PROFESSIONAL CHEFS</h3>
|
||||
<p>Don't dunk your nigiri in the soy sauce. Don't mix your wasabi in the soy sauce. If the rice is good,
|
||||
complement your sushi chef on the rice.</p>
|
||||
<a href="" class="post-btn">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="post-img">
|
||||
<img src="images/post2.jpg" alt="">
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<h3>FRESH FOOD GAURANTEED</h3>
|
||||
<p>Don't dunk your nigiri in the soy sauce. Don't mix your wasabi in the soy sauce. If the rice is good,
|
||||
complement your sushi chef on the rice.</p>
|
||||
<a href="" class="post-btn">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="post-img">
|
||||
<img src="images/post3.jpg" alt="">
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<h3>THE MENU IS PLENTIFUL</h3>
|
||||
<p>Don't dunk your nigiri in the soy sauce. Don't mix your wasabi in the soy sauce. If the rice is good,
|
||||
complement your sushi chef on the rice.</p>
|
||||
<a href="" class="post-btn">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="static">
|
||||
<div class="container">
|
||||
<div class="static-content">
|
||||
<div class="static-num">
|
||||
<i class="fa-solid fa-award"></i>
|
||||
<div class="num" data="293">293</div>
|
||||
<h2>Best Dishes</h2>
|
||||
</div>
|
||||
<div class="static-num">
|
||||
<i class="fa-solid fa-trophy"></i>
|
||||
<div class="num" data="999">999</div>
|
||||
<h2>Awards won</h2>
|
||||
</div>
|
||||
<div class="static-num">
|
||||
<i class="fa-solid fa-medal"></i>
|
||||
<div class="num" data="148">148</div>
|
||||
<h2>Our Chefs</h2>
|
||||
</div>
|
||||
<div class="static-num">
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<div class="num" data="278">278</div>
|
||||
<h2>Daily Customers</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="chef-special">
|
||||
<div class="container">
|
||||
<div class="special-content">
|
||||
<div class="special-left">
|
||||
<div class="special-left-side">
|
||||
<h3>Most Popular Dishes</h3>
|
||||
</div>
|
||||
<!--chef1-->
|
||||
<div class="img-container">
|
||||
<div class="special-imgs">
|
||||
<img src="images/chef1.jpg">
|
||||
<div class="special-img-text">
|
||||
<h4>Sake Donburi with Ikura</h4>
|
||||
<p>A bowl of steamed sushi rice, topped with fresh salmon, ikura, shiso leaves, and shredded nori on top.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">
|
||||
<p>$17.99</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--chef2-->
|
||||
<div class="img-container">
|
||||
<div class="special-imgs">
|
||||
<img src="images/chef2.jpg">
|
||||
<div class="special-img-text">
|
||||
<h4>Ebi Okonomiyaki</h4>
|
||||
<p>Tempura fried shrimp, corn, Creole butter, arare.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">
|
||||
<p>$13.99</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--chef3-->
|
||||
<div class="img-container">
|
||||
<div class="special-imgs">
|
||||
<img src="images/chef3.jpg">
|
||||
<div class="special-img-text">
|
||||
<h4>Wagyu Nigiri</h4>
|
||||
<p>Thinly sliced savory wagyu steak, pressed over sushi rice (4 pieces).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">
|
||||
<p>$12.99</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--chef4-->
|
||||
<div class="img-container">
|
||||
<div class="special-imgs">
|
||||
<img src="images/chef4.jpg">
|
||||
<div class="special-img-text">
|
||||
<h4>Tekka Maki</h4>
|
||||
<p>8 pcs fresh tuna.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">
|
||||
<p>$9.99</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="special-right">
|
||||
<div class="special-right-img">
|
||||
<img src="images/logo.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="reservation">
|
||||
<div class="container">
|
||||
<div class="reservation-form">
|
||||
<h3>Reservation</h3>
|
||||
<form action="">
|
||||
<input class="input1" type="text" placeholder="First name">
|
||||
<input class="input1" type="text" placeholder="Phone number">
|
||||
<input class="input1" type="email" placeholder="Email">
|
||||
<input class="input1" type="number" placeholder="Number of guests" min="1">
|
||||
<input class="input1" type="date" placeholder="Pick Date">
|
||||
<select name="hours">
|
||||
<option value="hour-select">Select your time</option>
|
||||
<option value="10">17:00</option>
|
||||
<option value="10">17:30</option>
|
||||
<option value="10">18:00</option>
|
||||
<option value="10">18:30</option>
|
||||
<option value="10">19:00</option>
|
||||
<option value="10">19:30</option>
|
||||
<option value="10">20:00</option>
|
||||
<option value="10">20:30</option>
|
||||
<option value="10">21:00</option>
|
||||
<option value="10">21:30</option>
|
||||
<option value="10">22:00</option>
|
||||
</select>
|
||||
<textarea name="" id="" cols="10" rows="5" placeholder="Special request"></textarea>
|
||||
<button type="submit">Book table</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="our-chef" id="chef">
|
||||
<div class="container">
|
||||
<h1 class="chef-heading">Meet Our Chefs</h1>
|
||||
<div class="team-chef">
|
||||
<div class="chef-item">
|
||||
<div class="chef-img">
|
||||
<img src="images/c1.jpg">
|
||||
</div>
|
||||
<div class="chef-info">
|
||||
<div>
|
||||
<h3>John Doe</h3>
|
||||
<span>Executive Chef</span>
|
||||
<ul>
|
||||
<li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-square-google-plus"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chef-item">
|
||||
<div class="chef-img">
|
||||
<img src="images/c2.jpg">
|
||||
</div>
|
||||
<div class="chef-info">
|
||||
<div>
|
||||
<h3>John Doe</h3>
|
||||
<span>Head Chef</span>
|
||||
<ul>
|
||||
<li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-square-twitter"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-square-google-plus"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chef-item">
|
||||
<div class="chef-img">
|
||||
<img src="images/c3.jpg">
|
||||
</div>
|
||||
<div class="chef-info">
|
||||
<div>
|
||||
<h3>Jane Doe</h3>
|
||||
<span>Deputy Chef</span>
|
||||
<ul>
|
||||
<li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-square-twitter"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-square-google-plus"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="footer">
|
||||
<div class="container">
|
||||
<div class="footer-container">
|
||||
<div class="about-us">
|
||||
<h2><img src="images/logo.png" alt=""></h2>
|
||||
<p>Discovering the depth of flavors that lie within the simplicity at FUJISAN</p>
|
||||
</div>
|
||||
<div class="open-hours">
|
||||
<h2>Hours</h2>
|
||||
<p class="day">MON: <span>Close</span></p>
|
||||
<p class="day">TUE- THURS: <span>17:00 - 22:00</span></p>
|
||||
<p class="day">FRI- SUN: <span>17:00 - 23:00</span></p>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h2>Contact Us</h2>
|
||||
<p class="call"> <i class="fas fa-phone"></i>   Call us:</p>
|
||||
<p>123-456-7890</p>
|
||||
<p class="address"><i class="fas fa-map-marker-alt"></i>   Address:</p>
|
||||
<p>1234 N Lincoln Park, Chicago, IL 010203</p>
|
||||
<p class="email"><i class="fas fa-envelope"></i>   Email Us:</p>
|
||||
<p>fujisan@email.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,571 +0,0 @@
|
|||
const foodItem = [
|
||||
{
|
||||
id:1,
|
||||
name: 'Edamame',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:5.99,
|
||||
img:'images/order/1.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name: 'Spicy Edamame',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:5.99,
|
||||
img:'images/order/2.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
name: 'Gyoza',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/3.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
name: 'Takoyaki',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:6.99,
|
||||
img:'images/order/4.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:5,
|
||||
name: 'Ebi Okonomiyaki',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/5.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:6,
|
||||
name: 'Sake Carpaccio',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
img:'images/order/6.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:7,
|
||||
name: 'Hamachi Carpaccio',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/7.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:8,
|
||||
name: 'Soft Shell Crab',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
img:'images/order/8.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:9,
|
||||
name: 'Shrimp Tempura',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/9.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:10,
|
||||
name: 'Miso Soup',
|
||||
category: 'Soup',
|
||||
rating: 4.3,
|
||||
price:3.99,
|
||||
img:'images/order/10.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:11,
|
||||
name: 'Spicy Miso Soup',
|
||||
category: 'Soup',
|
||||
rating: 4.3,
|
||||
price:3.99,
|
||||
img:'images/order/11.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:12,
|
||||
name: 'House Salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:6.99,
|
||||
img:'images/order/12.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:13,
|
||||
name: 'Seaweed Salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/13.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:14,
|
||||
name: 'Cucumber Salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:5.99,
|
||||
img:'images/order/14.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:15,
|
||||
name: 'Tako Su',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/15.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:16,
|
||||
name: 'Ebi Su',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/16.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:17,
|
||||
name: 'Mixed Sunomono',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:11.99,
|
||||
img:'images/order/17.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:18,
|
||||
name: 'Spicy maguro Salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
img:'images/order/18.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:19,
|
||||
name: 'Sake/Smoked Sake',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/19.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:20,
|
||||
name: 'Maguro',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/20.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:21,
|
||||
name: 'Hamachi',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/21.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:22,
|
||||
name: 'Saba',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/22.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:23,
|
||||
name: 'Ebi',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/23.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:24,
|
||||
name: 'Hotate',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/24.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:25,
|
||||
name: 'Kani Kama',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/25.jpeg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:26,
|
||||
name: 'Unagi',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/26.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:27,
|
||||
name: 'Ikura',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/27.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:28,
|
||||
name: 'Masago',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/28.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:29,
|
||||
name: 'Tamago',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/29.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:30,
|
||||
name: 'Wagyu Nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
img:'images/order/30.jpeg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:31,
|
||||
name: 'Sushi A',
|
||||
category: 'Sushi-Set',
|
||||
rating: 4.3,
|
||||
price:19.99,
|
||||
img:'images/order/31.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:32,
|
||||
name: 'Sushi B',
|
||||
category: 'Sushi-Set',
|
||||
rating: 4.3,
|
||||
price:23.99,
|
||||
img:'images/order/31.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:33,
|
||||
name: 'Sashimi A',
|
||||
category: 'Sushi-Set',
|
||||
rating: 4.3,
|
||||
price:35.99,
|
||||
img:'images/order/31.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:34,
|
||||
name: 'Sashimi B',
|
||||
category: 'Sushi-Set',
|
||||
rating: 4.3,
|
||||
price:39.99,
|
||||
img:'images/order/31.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:35,
|
||||
name: 'Super Sashimi',
|
||||
category: 'Sushi-Set',
|
||||
rating: 4.3,
|
||||
price:45.99,
|
||||
img:'images/order/31.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:36,
|
||||
name: 'Tekka',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/32.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:37,
|
||||
name: 'Sake',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/33.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:38,
|
||||
name: 'Negi Hamachi',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/34.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:39,
|
||||
name: 'Ebi',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/35.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:40,
|
||||
name: 'Sake Avocado',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/36.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:41,
|
||||
name: 'Unagi Q',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/37.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:42,
|
||||
name: 'Spicy Scallop',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/38.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:43,
|
||||
name: 'Spicy Tako',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/39.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:44,
|
||||
name: 'Spider',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
img:'images/order/40.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:45,
|
||||
name: 'Alaska',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/41.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:46,
|
||||
name: 'Boston',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/42.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:47,
|
||||
name: 'Philadelphia',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/43.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:48,
|
||||
name: 'California',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/44.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:49,
|
||||
name: 'Chicago',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/45.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:50,
|
||||
name: 'Sake Donburi',
|
||||
category: 'Donburi',
|
||||
rating: 4.3,
|
||||
price:16.99,
|
||||
img:'images/order/46.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:51,
|
||||
name: 'Tekka Donburi',
|
||||
category: 'Donburi',
|
||||
rating: 4.3,
|
||||
price:17.99,
|
||||
img:'images/order/47.jpeg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:52,
|
||||
name: 'Hamachi Donburi',
|
||||
category: 'Donburi',
|
||||
rating: 4.3,
|
||||
price:17.99,
|
||||
img:'images/order/48.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:53,
|
||||
name: 'Chirashi Donburi',
|
||||
category: 'Donburi',
|
||||
rating: 4.3,
|
||||
price:19.99,
|
||||
img:'images/order/49.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:54,
|
||||
name: 'Unagi Donburi',
|
||||
category: 'Donburi',
|
||||
rating: 4.3,
|
||||
price:19.99,
|
||||
img:'images/order/50.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:55,
|
||||
name: 'Hot Green Tea',
|
||||
category: 'Beverage',
|
||||
rating: 4.3,
|
||||
price:2.99,
|
||||
img:'images/order/51.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:56,
|
||||
name: 'Iced Green Tea',
|
||||
category: 'Beverage',
|
||||
rating: 4.3,
|
||||
price:3.99,
|
||||
img:'images/order/52.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:57,
|
||||
name: 'Coke/Diet',
|
||||
category: 'Beverage',
|
||||
rating: 4.3,
|
||||
price:2.59,
|
||||
img:'images/order/53.png',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:58,
|
||||
name: 'Bottled Water',
|
||||
category: 'Beverage',
|
||||
rating: 4.3,
|
||||
price:1.99,
|
||||
img:'images/order/54.png',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:59,
|
||||
name: 'Matcha Ice Cream',
|
||||
category: 'Dessert',
|
||||
rating: 4.3,
|
||||
price:5.99,
|
||||
img:'images/order/55.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:60,
|
||||
name: 'Mochi Ice Cream',
|
||||
category: 'Dessert',
|
||||
rating: 4.3,
|
||||
price:4.99,
|
||||
img:'images/order/56.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:61,
|
||||
name: 'Matcha Cheesecake',
|
||||
category: 'Dessert',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/57.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:62,
|
||||
name: 'Dango',
|
||||
category: 'Dessert',
|
||||
rating: 4.3,
|
||||
price:3.99,
|
||||
img:'images/order/58.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:63,
|
||||
name: 'Taiyaki',
|
||||
category: 'Dessert',
|
||||
rating: 4.3,
|
||||
price:6.99,
|
||||
img:'images/order/59.jpg',
|
||||
quantity:1
|
||||
},
|
||||
]
|
||||
|
||||
export {foodItem};
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
//sticky navbar ---------------------------------------------
|
||||
|
||||
const nav = document.querySelector("header");
|
||||
window.addEventListener("scroll", function(){
|
||||
if(this.document.documentElement.scrollTop>20){
|
||||
nav.classList.add("sticky");
|
||||
}
|
||||
else{
|
||||
nav.classList.remove("sticky");
|
||||
}
|
||||
})
|
||||
|
||||
//parallax effect ---------------------------------------------
|
||||
|
||||
const Parallax = document.querySelector("#home");
|
||||
window.addEventListener("scroll", function(){
|
||||
let offset = window.pageYOffset;
|
||||
Parallax.style.backgroundPositionY = offset * 0.5 +"px";
|
||||
});
|
||||
|
||||
//menu ---------------------------------------------
|
||||
|
||||
let menu = document.querySelector('nav')
|
||||
let menubtn = document.querySelector('.menu-btn')
|
||||
let closebtn = document.querySelector('.close-btn')
|
||||
|
||||
menubtn.addEventListener('click', function(){
|
||||
menu.classList.add('active');
|
||||
});
|
||||
closebtn.addEventListener('click', function(){
|
||||
menu.classList.remove('active');
|
||||
});
|
||||
|
||||
//static ---------------------------------------------
|
||||
|
||||
const staticContentE1 = document.querySelectorAll('.num');
|
||||
|
||||
staticContentE1.forEach((staticContentE1) =>{
|
||||
staticContentE1.innerText = "0";
|
||||
increamentCounter();
|
||||
|
||||
function increamentCounter(){
|
||||
let currentNum = +staticContentE1.innerText;
|
||||
const dataCeil = staticContentE1.getAttribute('data')
|
||||
const increament = dataCeil/15;
|
||||
currentNum = Math.ceil(currentNum+increament);
|
||||
|
||||
if(currentNum < dataCeil){
|
||||
staticContentE1.innerText = currentNum;
|
||||
setTimeout(increamentCounter, 70);
|
||||
}
|
||||
else{
|
||||
staticContentE1.innerHTML = dataCeil
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//countdown ---------------------------------------------
|
||||
|
||||
const openTimeStr = "We are open at 17:00"
|
||||
const openTime = parseInt(openTimeStr.substring(15, 20));
|
||||
document.getElementById("open-time").innerText = openTimeStr;
|
||||
const inputs = document.querySelectorAll("input")
|
||||
|
||||
function clock(){
|
||||
const closeTime = 22
|
||||
const now = new Date();
|
||||
var now_hh = now.getHours();
|
||||
|
||||
// if its after the restaraunt closed:
|
||||
if (now_hh >= closeTime) {
|
||||
tomorrow = new Date(now);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
tomorrow.setHours(openTime);
|
||||
tomorrow.setMinutes(00);
|
||||
tomorrow.setSeconds(00);
|
||||
var diff = tomorrow - now;
|
||||
}
|
||||
|
||||
// restaraunt is closed we are waiting for it to open
|
||||
if (now_hh < openTime) {
|
||||
todayOpen = new Date(now);
|
||||
todayOpen.setHours(openTime);
|
||||
todayOpen.setMinutes(00);
|
||||
todayOpen.setSeconds(00);
|
||||
var diff = todayOpen - now;
|
||||
}
|
||||
|
||||
// return early if restaraunt is open.
|
||||
if (now_hh > openTime && now_hh < closeTime) {
|
||||
return;
|
||||
}
|
||||
|
||||
day_to_miliseconds = 1000 * 60 * 60 * 24
|
||||
// 1 day equivalent in milliseconds
|
||||
hour_to_miliseconds = 1000 * 60 * 60
|
||||
// 1 hour equivalent in milliseconds
|
||||
minute_to_miliseconds = 1000 * 60
|
||||
// 1 minute equivalent in milliseconds
|
||||
second_to_miliseconds = 1000
|
||||
// 1 second equivalent in milliseconds
|
||||
|
||||
let days = Math.floor(diff / day_to_miliseconds );
|
||||
// number of days from the difference in dates
|
||||
let hours = Math.floor((diff % day_to_miliseconds) / hour_to_miliseconds);
|
||||
// number of hours from the remaining time after removing days
|
||||
let minutes = Math.floor((diff % hour_to_miliseconds) / minute_to_miliseconds);
|
||||
// number of minutes from the remaining time after removing hours
|
||||
let seconds = Math.floor((diff % minute_to_miliseconds) / second_to_miliseconds);
|
||||
// number of hours from the remaining time after removing seconds
|
||||
|
||||
console.log(days, hours, minutes, seconds)
|
||||
inputs[0].value = hours;
|
||||
inputs[1].value = minutes;
|
||||
inputs[2].value = seconds;
|
||||
}
|
||||
|
||||
clock()
|
||||
|
||||
setInterval(
|
||||
()=>{
|
||||
clock()
|
||||
},
|
||||
1000
|
||||
)
|
||||
|
||||
//-------------------------------------------end JavaScript for index page----------------------------------------------
|
||||
|
||||
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
scroll-behavior: smooth;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
:root{
|
||||
--bg-color:snow;
|
||||
--main-color:rgb(177, 126, 5);
|
||||
--minor-color:rgb(49, 48, 48);
|
||||
--other-color:dimgray;
|
||||
--text-color:black;
|
||||
--box-shadow:10px 10px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
html{
|
||||
font-size: 100%;
|
||||
}
|
||||
.container{
|
||||
max-width: 1500px;
|
||||
margin: auto;
|
||||
padding: 0 100px;
|
||||
}
|
||||
#menu-container{
|
||||
padding: 13rem 0;
|
||||
margin-left: 10rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
.menu{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.menu-group-heading{
|
||||
margin: 0;
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: 'Vujahday Script';
|
||||
color: var(--main-color);
|
||||
font-size: 2rem;
|
||||
border-bottom: 2px solid #ccc;
|
||||
}
|
||||
.menu-group{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
.menu-item{
|
||||
display: flex;
|
||||
}
|
||||
.menu-item-text {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.menu-item-heading{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
}
|
||||
.menu-item-name{
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.menu-item-desc{
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media(max-width:1100px){
|
||||
html{
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
@media(max-width:800px){
|
||||
html{
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
@media(max-width:650px){
|
||||
html{
|
||||
font-size: 60%;
|
||||
}
|
||||
}
|
||||
@media(max-width:500px){
|
||||
html{
|
||||
font-size: 60%;
|
||||
}
|
||||
.menu-group{
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,681 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Menu</title>
|
||||
<link rel="shortcut icon" href="images/logo.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="menu.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Poppins:ital,wght@0,100;0,300;1,100;1,300&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Permanent+Marker&family=Vujahday+Script&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="navbar">
|
||||
<div class="logo">
|
||||
<a href=""><img src="images/logo.png"></a>
|
||||
<span>FUJISAN</span>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="heading-btn">
|
||||
<i class="close-btn fas fa-times-circle"></i>
|
||||
</div>
|
||||
<li><a href="index.html">HOME</a></li>
|
||||
<li><a href="menu.html">MENU</a></li>
|
||||
<li><a href="order.html">ORDER</a></li>
|
||||
<li><a href="index.html">RESERVATION</a></li>
|
||||
<li><a href="contact.html">CONTACT</a></li>
|
||||
</nav>
|
||||
<div class="heading-btn">
|
||||
<i class="menu-btn fas fa-bars"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="container" id="menu-container">
|
||||
<div class="menu">
|
||||
<h2 class="menu-group-heading">Appetizers</h2>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Edamame</span>
|
||||
<span class="menu-item-price">$5.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Steamed soybean with salt</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Spicy Edamame</span>
|
||||
<span class="menu-item-price">$5.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Steamed soybean with salt & togarashi.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Gyoza</span>
|
||||
<span class="menu-item-price">$7.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Steamed Japanese chicken dumpling.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Takoyaki</span>
|
||||
<span class="menu-item-price">$6.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Crispy ball batter stuffed w/ dice octopus, spicy mayo,
|
||||
special sauce, bonito.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Ebi Okonomiyaki</span>
|
||||
<span class="menu-item-price">$13.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Tempura fried shrimp, corn, Creole butter, arare..</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Sake Carpaccio</span>
|
||||
<span class="menu-item-price">$12.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">6 pcs salmon sashimi in ponzu sauce, jalapeno,
|
||||
masago, scallion.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Hamachi Carpaccio</span>
|
||||
<span class="menu-item-price">$13.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">6 pcs yellowtail sashimi in ponzu sauce, jalapeno,
|
||||
masago, scallion.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Soft Shell Crab</span>
|
||||
<span class="menu-item-price">$12.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Crispy fried soft shell crab. Served with ponzu sauce.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Shrimp Tempura Appetizer</span>
|
||||
<span class="menu-item-price">$13.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Fried breaded crumb shrimp. Serving 4 pcs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<h2 class="menu-group-heading">Soup</h2>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Miso Soup</span>
|
||||
<span class="menu-item-price">$3.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Soybean based soup with tofu, seaweed, scallion.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Spicy Miso Soup</span>
|
||||
<span class="menu-item-price">$3.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Soybean based soup with tofu, seaweed, scallion, jalapeno, and spicy sauce.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<h2 class="menu-group-heading">Sunomono Salad</h2>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">House Salad</span>
|
||||
<span class="menu-item-price">$6.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Tossed salad, avocado with housemade ginger dressing.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Seaweed Salad</span>
|
||||
<span class="menu-item-price">$7.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Marinated mixed seaweed.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Cucumber Salad</span>
|
||||
<span class="menu-item-price">$5.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Sliced cucumber with homemade vinegar dressing.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Tako Su</span>
|
||||
<span class="menu-item-price">$8.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Sliced octopus on top of cucumber salad.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Ebi Su</span>
|
||||
<span class="menu-item-price">$7.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Cooked shrimp on top of cucumber salad.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Mixed Sunomono</span>
|
||||
<span class="menu-item-price">$11.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Assorted raw seafood on top of cucumber salad.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Spicy maguro poke Salad</span>
|
||||
<span class="menu-item-price">$12.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Diced tuna tossed in spicy teriyaki sauce, togarashi,
|
||||
chili oil, avocado.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="menu">
|
||||
<h2 class="menu-group-heading">Nigiri/Sashimi</h2>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Sake/Smoked Sake</span>
|
||||
<span class="menu-item-price">$7.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs fresh salmon/smoked salmon</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Maguro/Shiro Maguro</span>
|
||||
<span class="menu-item-price">$8.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs fresh tuna/fresh white tuna.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Hamachi</span>
|
||||
<span class="menu-item-price">$7.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs fresh yellowtail.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Saba</span>
|
||||
<span class="menu-item-price">$8.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs makerel.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Ebi</span>
|
||||
<span class="menu-item-price">$7.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs cooked shrimp.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Hotate</span>
|
||||
<span class="menu-item-price">$8.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs scallop.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Kani Kama</span>
|
||||
<span class="menu-item-price">$7.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs crab stick.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Unagi</span>
|
||||
<span class="menu-item-price">$8.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs fresh water eel. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Ikura</span>
|
||||
<span class="menu-item-price">$9.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs salmon roe.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Masago</span>
|
||||
<span class="menu-item-price">$8.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs Smelt roe.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Tamago</span>
|
||||
<span class="menu-item-price">$7.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs Japanese omelet</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Wagyu Nigiri</span>
|
||||
<span class="menu-item-price">$12.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">4 pcs thinly sliced savory wagyu steak.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<h2 class="menu-group-heading">Sushi/Sashimi Platters</h2>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Sushi A</span>
|
||||
<span class="menu-item-price">$19.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">6 pcs nigiri (chef's selection) with one maki.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Sashimi A</span>
|
||||
<span class="menu-item-price">$35.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">14 pcs assorted sashimi (chef's selection) with one maki.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Sushi B</span>
|
||||
<span class="menu-item-price">$23.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">9 pcs nigiri (chef's selection) with one maki.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Sashimi B</span>
|
||||
<span class="menu-item-price">$39.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">21 pcs assorted sashimi (chef's selection) with one maki.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Super Sashimi</span>
|
||||
<span class="menu-item-price">$45.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">28 pcs assorted sashimi (chef's selection) with one maki.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<h2 class="menu-group-heading">Maki (Rolls)</h2>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Tekka</span>
|
||||
<span class="menu-item-price">$9.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">8 pcs fresh tuna.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Sake</span>
|
||||
<span class="menu-item-price">$9.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">8 pcs fresh salmon.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Negi Hamachi</span>
|
||||
<span class="menu-item-price">$9.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">8 pcs yellowtail, scallion.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Ebi</span>
|
||||
<span class="menu-item-price">$9.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">8 pcs cooked shrimp, cucumber, avocado.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Sake Avocado</span>
|
||||
<span class="menu-item-price">$9.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">8 pcs fresh salmon, avocado.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">unagi Q</span>
|
||||
<span class="menu-item-price">$9.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">8 pcs grilled fresh water eel, cucumber.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Spicy Scallop</span>
|
||||
<span class="menu-item-price">$9.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">8 pcs scallop, masago, scallion, spicy mayo, cucumber. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Spicy Tako</span>
|
||||
<span class="menu-item-price">$9.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">8 pcs marinated octopus, masago, spicy mayo,
|
||||
scallion.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Spider</span>
|
||||
<span class="menu-item-price">$12.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">8 pcs fried soft shell crab, avocado, cucumber,
|
||||
masago, scallion, spicy mayo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Alaska</span>
|
||||
<span class="menu-item-price">$13.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">9 pcs fresh salmon, avocado, masago.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Boston</span>
|
||||
<span class="menu-item-price">$13.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">9 pcs fresh salmon, Boston lettuce, cucumber,
|
||||
avocado, masago, scallion, spicy mayo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Philadelphia</span>
|
||||
<span class="menu-item-price">$13.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">9 pcs smoked salmon, cream cheese,
|
||||
cucumber, avocado.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">California</span>
|
||||
<span class="menu-item-price">$13.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">9 pcs snow crab, mayo, avocado.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Chicago</span>
|
||||
<span class="menu-item-price">$13.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">9 pcs Super white tuna, jalapeno.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<h2 class="menu-group-heading">Donburi</h2>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Sake Donburi</span>
|
||||
<span class="menu-item-price">$16.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Fresh salmon over a bed of sushi rice </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Tekka Donburi</span>
|
||||
<span class="menu-item-price">$17.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Fresh tuna over a bed of sushi rice.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Hamachi donburi</span>
|
||||
<span class="menu-item-price">$17.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Yellowtail over a bed of sushi rice.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Chirashi </span>
|
||||
<span class="menu-item-price">$19.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Assorted raw seafood over a bed of sushi rice.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Unagi Donburi</span>
|
||||
<span class="menu-item-price">$19.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Grilled fresh water eel glazed with teriyaki sauce
|
||||
over a bed of rice.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<h2 class="menu-group-heading">Beverages</h2>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Hot Green Tea</span>
|
||||
<span class="menu-item-price">$2.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Iced Green Tea</span>
|
||||
<span class="menu-item-price">$3.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Coke / Diet</span>
|
||||
<span class="menu-item-price">$2.59</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Bottled Water</span>
|
||||
<span class="menu-item-price">$1.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<h2 class="menu-group-heading">Desserts</h2>
|
||||
<div class="menu-group">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Matcha Ice Cream</span>
|
||||
<span class="menu-item-price">$5.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Served with 2 scoops of matcha ice cream.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Mochi Ice Cream</span>
|
||||
<span class="menu-item-price">$4.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Choices of Green tea, Red Bean, Vanilla, Strawberry, Chocolate.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Matcha Cheesecake</span>
|
||||
<span class="menu-item-price">$8.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Dango</span>
|
||||
<span class="menu-item-price">$3.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Sweet rice dumplings on a skewe</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Taiyaki</span>
|
||||
<span class="menu-item-price">$6.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">A Japanese fish-shaped cake filled with red bean paste.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,470 +0,0 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
:root{
|
||||
--bg-color:snow;
|
||||
--main-color:rgb(177, 126, 5);
|
||||
--minor-color:rgb(49, 48, 48);
|
||||
--other-color:rgb(232, 229, 229);
|
||||
--text-color:black;
|
||||
}
|
||||
html{
|
||||
height: 100%;
|
||||
}
|
||||
body{
|
||||
height: 100%;
|
||||
}
|
||||
.container{
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr 300px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#menu{
|
||||
background: var(--bg-color);
|
||||
}
|
||||
.menu-logo{
|
||||
padding: 0 30px;
|
||||
}
|
||||
.menu-logo img{
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.menu-items a{
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
padding: 10px 30px;
|
||||
margin: 12px 0;
|
||||
color: var(--main-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
.menu-items a:hover{
|
||||
background: var(--other-color);
|
||||
}
|
||||
#food-container{
|
||||
background: var(--bg-color);
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
#menu-header{
|
||||
align-items: center;
|
||||
background: var(--bg-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 1rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
#food-container{
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.address{
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid var(--main-color);
|
||||
color: var(--main-color);
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
width: 150px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.utility i{
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid var(--main-color);
|
||||
color: var(--main-color);
|
||||
padding: 5px 10px;
|
||||
border-radius: 50px;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.utility i:active{
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
#Appetizer, #Soup, #Salad, #Nigiri, #Sushi, #Maki, #Donburi, #Beverage, #Dessert{
|
||||
margin-top: 40px;
|
||||
}
|
||||
#Appetizer #item-box, #Soup #item-box, #Salad #item-box, #Nigiri #item-box, #Sushi-Set #item-box, #Maki #item-box, #Donburi #item-box, #Beverage #item-box, #Dessert #item-box{
|
||||
background-color: var(--other-color);
|
||||
}
|
||||
#category-name, .menu-items{
|
||||
margin: 1rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: var(--main-color);
|
||||
font-family: 'Vujahday Script';
|
||||
}
|
||||
#box-top{
|
||||
display: flex;
|
||||
margin: 5px 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#rating{
|
||||
font-size: 0.6rem;
|
||||
color: var(--main-color);
|
||||
padding: 5px;
|
||||
background: var(--minor-color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.fa-cart-plus{
|
||||
font-size: 1rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.toggle-cart{
|
||||
color: var(--text-color);
|
||||
}
|
||||
#item-box{
|
||||
width: 180px;
|
||||
height: 240px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
background: var(--main-color);
|
||||
cursor: pointer;
|
||||
transition: 0.5s all ease-in-out;
|
||||
}
|
||||
#item-box img{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#item-box p{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
#order-name{
|
||||
margin: 5px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
#cart{
|
||||
background: var(--bg-color);
|
||||
padding-right: 30px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.cart-header{
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 1rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
.user i{
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid var(--main-color);
|
||||
color: var(--main-color);
|
||||
padding: 5px 10px;
|
||||
border-radius: 50px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
margin: 1rem;
|
||||
}
|
||||
.user i:active{
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
#category-list .item-menu{
|
||||
margin: 1rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color:var(--main-color);
|
||||
}
|
||||
.fa-hotjar{
|
||||
color: rgb(255, 106, 0);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.list-menu{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: 0.5s all ease-in-out;
|
||||
}
|
||||
.list-menu:hover{
|
||||
background: var(--other-color);
|
||||
}
|
||||
.list-menu img{
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.list-name{
|
||||
margin: 0 10px;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--main-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
.food-items{
|
||||
display: none;
|
||||
}
|
||||
.cart-toggle{
|
||||
display: none;
|
||||
}
|
||||
#cart-page{
|
||||
background: var(--other-color);
|
||||
margin: 40px 10px;
|
||||
margin-right: 50px;
|
||||
padding: 20px 30px;
|
||||
padding-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
#cart-title{
|
||||
color: var(--main-color);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
#cart-page table{
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
#cart-total{
|
||||
display: none;
|
||||
}
|
||||
#cart-page table thead td{
|
||||
font-size: 1rem;
|
||||
padding-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
#cart-page table tbody td{
|
||||
padding: 10px 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#cart-page table tbody button{
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
background: none;
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 0 5px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
#cart-page table tbody img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#checkout{
|
||||
text-align: center;
|
||||
margin: 40px auto;
|
||||
background: var(--other-color);
|
||||
padding: 10px 20px;
|
||||
}
|
||||
#checkout p{
|
||||
margin: 1rem;
|
||||
float: left;
|
||||
}
|
||||
#total-item, #total-price{
|
||||
font-size: 1rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
#delivery{
|
||||
color: rgb(10, 142, 36);
|
||||
font-weight: 600;
|
||||
}
|
||||
.checkout-btn{
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
bottom: 30px;
|
||||
margin: 15px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkout-btn:active{
|
||||
background: var(--minor-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
#respon-view{
|
||||
display: none;
|
||||
}
|
||||
/*---------- responsive-view---------*/
|
||||
@media screen and (max-width:1200px){
|
||||
#container{
|
||||
display: none;
|
||||
}
|
||||
#respon-view{
|
||||
display: grid;
|
||||
grid-template-rows: 120px 1fr 50px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.respon-top{
|
||||
padding: 5px 15px;
|
||||
z-index: 1;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
.item-container{
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.logo-box, .top-menu{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.logo-box img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.top-menu{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.top-menu i {
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
padding: 10px 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.m-cart-toggle{
|
||||
color: var(--bg-color);
|
||||
background: var(--main-color);
|
||||
}
|
||||
.category-header{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--bg-color);
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid var(--other-color);
|
||||
margin: 0;
|
||||
}
|
||||
.toggle-category{
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
.list-menu{
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.list-menu img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.list-menu:hover{
|
||||
background: none;
|
||||
transform: none;
|
||||
|
||||
}
|
||||
.list-menu:hover img{
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
.list-name{
|
||||
margin: 5px 0;
|
||||
color: var(--main-color);
|
||||
width: max-content;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#food-items{
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.respon-footer{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 15px;
|
||||
background: var(--bg-color);
|
||||
border-top: 1px solid var(--other-color);
|
||||
}
|
||||
.respon-footer a{
|
||||
color: var(--main-color);
|
||||
text-decoration: none;
|
||||
position: sticky;
|
||||
font-weight: 600;
|
||||
}
|
||||
#category-name{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#item-box{
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
#item-box img{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
#item-box p{
|
||||
font-size: 12px;
|
||||
}
|
||||
.list-menu{
|
||||
flex-direction: column;
|
||||
}
|
||||
#cart-page{
|
||||
margin: 3px 0;
|
||||
padding: 10px 5px;
|
||||
padding-bottom: 30px;
|
||||
border-top: 1px solid var(--other-color);
|
||||
}
|
||||
#cart-page table thead td{
|
||||
font-size: 16px;
|
||||
}
|
||||
#cart-page table tbody td{
|
||||
font-size: 16px;
|
||||
}
|
||||
#cart-page table tbody img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
#cart-title{
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
#cart-total{
|
||||
display: inline-block;
|
||||
color: var(--main-color);
|
||||
padding: 5px 10px;
|
||||
margin: 0;
|
||||
border: 1px solid var(--main-color);
|
||||
float: inline-end;
|
||||
}
|
||||
.checkout-btn{
|
||||
font-size: 14px;
|
||||
background: var(--main-color);
|
||||
padding: 8px 15px;
|
||||
margin: auto;
|
||||
}
|
||||
#Appetizer{
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:380px){
|
||||
#item-box{
|
||||
height: 200px;
|
||||
width: 150px;
|
||||
}
|
||||
#food-items{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Order Online</title>
|
||||
<link rel="shortcut icon" href="images/logo.png">
|
||||
<link rel="stylesheet" href="order.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Poppins:ital,wght@0,100;0,300;1,100;1,300&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Permanent+Marker&family=Vujahday+Script&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div id="menu">
|
||||
<div class="menu-logo">
|
||||
<img src="images/logo.png">
|
||||
</div>
|
||||
<div class="menu-items">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="">Services</a>
|
||||
<a href="">Your orders</a>
|
||||
<a href="">Favorite</a>
|
||||
<a href="">Cart</a>
|
||||
<a href="">Address</a>
|
||||
<a href="">Help</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="food-container">
|
||||
<div id="menu-header">
|
||||
<div class="header-box">
|
||||
<i class="fa-solid fa-location-dot address" id="add-address">Address</i>
|
||||
</div>
|
||||
<div class="utility">
|
||||
<i class="fas fa-search">   Search</i>
|
||||
<i class="fas fa-tags">   Offers</i>
|
||||
<i class="fas fa-shopping-cart" id="shopping-cart">   0 Items</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="food-items">
|
||||
<div id="Appetizer">
|
||||
<p id="category-name">Appetizers</p>
|
||||
</div>
|
||||
|
||||
<div id="Soup">
|
||||
<p id="category-name">Soup</p>
|
||||
</div>
|
||||
|
||||
<div id="Salad">
|
||||
<p id="category-name">Sunomono Salad</p>
|
||||
</div>
|
||||
|
||||
<div id="Nigiri">
|
||||
<p id="category-name">Nigiri/Sashimi</p>
|
||||
</div>
|
||||
|
||||
<div id="Sushi-Set">
|
||||
<p id="category-name">Sushi/Sashimi Platters</p>
|
||||
</div>
|
||||
|
||||
<div id="Maki">
|
||||
<p id="category-name">Maki (Rolls)</p>
|
||||
</div>
|
||||
|
||||
<div id="Donburi">
|
||||
<p id="category-name">Donburi</p>
|
||||
</div>
|
||||
|
||||
<div id="Beverage">
|
||||
<p id="category-name">Beverages</p>
|
||||
</div>
|
||||
|
||||
<div id="Dessert">
|
||||
<p id="category-name">Desserts</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cart-page" class="cart-toggle">
|
||||
<p id="cart-title">Cart Items</p>
|
||||
<p id="cart-total">Total Amount: $100</p>
|
||||
<table>
|
||||
<thead>
|
||||
<td>Item</td>
|
||||
<td>Name</td>
|
||||
<td>Quantity</td>
|
||||
<td>Price</td>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cart">
|
||||
<div class="cart-header">
|
||||
<div class="user">
|
||||
<i class="fa-solid fa-user">   Login</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="category-list">
|
||||
<p class="item-menu"> <i class="fa-brands fa-hotjar"></i> Popular Dishes <i class="fa-brands fa-hotjar"></i></p>
|
||||
</div>
|
||||
|
||||
<div id="checkout" class="cart-toggle">
|
||||
<p id="total-item">Items : 5</p>
|
||||
<p id="total-price">Total Amount: $50</p>
|
||||
<p id="delivery">Free Delivery on $50</p>
|
||||
<button class="checkout-btn">Checkout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="respon-view" class="respon-view">
|
||||
<div class="respon-top">
|
||||
<div class="logo-box">
|
||||
<img src="images/logo.png" alt="">
|
||||
<i class="fa-solid fa-location-dot address" id="m-add-address">Address</i>
|
||||
</div>
|
||||
<div class="top-menu">
|
||||
<i class="fas fa-search"></i>
|
||||
<i class="fas fa-tag"></i>
|
||||
<i class="fas fa-heart"></i>
|
||||
<i class="fas fa-shopping-cart" id="m-shopping-cart"> 0</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="category-header" id="category-header">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="respon-footer">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="">Offers</a>
|
||||
<a href="">Your orders</a>
|
||||
<a href="">Help</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="order.js" type="module"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,591 +0,0 @@
|
|||
import {foodItem} from "./items.js";
|
||||
|
||||
function displayItems(){
|
||||
var appetizer = document.getElementById('Appetizer');
|
||||
var soup = document.getElementById('Soup');
|
||||
var salad = document.getElementById('Salad');
|
||||
var nigiri = document.getElementById('Nigiri');
|
||||
var sushi = document.getElementById('Sushi-Set');
|
||||
var maki = document.getElementById('Maki');
|
||||
var don = document.getElementById('Donburi');
|
||||
var drink = document.getElementById('Beverage');
|
||||
var dessert = document.getElementById('Dessert');
|
||||
|
||||
const appetizerData = foodItem.filter(item => item.category == 'Appetizer');
|
||||
const soupData = foodItem.filter(item => item.category == 'Soup');
|
||||
const saladData = foodItem.filter(item => item.category == 'Salad');
|
||||
const nigiriData = foodItem.filter(item => item.category == 'Nigiri');
|
||||
const sushiData = foodItem.filter(item => item.category == 'Sushi-Set');
|
||||
const makiData = foodItem.filter(item => item.category == 'Maki');
|
||||
const donData = foodItem.filter(item => item.category == 'Donburi');
|
||||
const drinkData = foodItem.filter(item => item.category == 'Beverage');
|
||||
const dessertData = foodItem.filter(item => item.category == 'Dessert');
|
||||
|
||||
appetizerData.map(item => {
|
||||
var itemBox = document.createElement('div');
|
||||
itemBox.setAttribute('id', 'item-box');
|
||||
|
||||
var boxTop = document.createElement('div');
|
||||
boxTop.setAttribute('id', 'box-top');
|
||||
|
||||
var star = document.createElement('i');
|
||||
star.setAttribute('class', 'fa fa-star');
|
||||
star.setAttribute('id', 'rating');
|
||||
star.innerText = ' '+ item.rating;
|
||||
|
||||
var addcart = document.createElement('i');
|
||||
addcart.setAttribute('class', 'fa-solid fa-cart-plus add-to-cart');
|
||||
addcart.setAttribute('id', item.id);
|
||||
|
||||
boxTop.appendChild(star);
|
||||
boxTop.appendChild(addcart);
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
|
||||
var orderName = document.createElement('p');
|
||||
orderName.setAttribute('id', 'order-name');
|
||||
orderName.innerText = item.name;
|
||||
|
||||
var orderPrice = document.createElement('p');
|
||||
orderPrice.setAttribute('id', 'order-price');
|
||||
orderPrice.innerText = 'Price : $ ' + item.price;
|
||||
|
||||
itemBox.appendChild(boxTop);
|
||||
itemBox.appendChild(img);
|
||||
itemBox.appendChild(orderName);
|
||||
itemBox.appendChild(orderPrice);
|
||||
|
||||
appetizer.appendChild(itemBox);
|
||||
})
|
||||
soupData.map(item => {
|
||||
var itemBox = document.createElement('div');
|
||||
itemBox.setAttribute('id', 'item-box');
|
||||
|
||||
var boxTop = document.createElement('div');
|
||||
boxTop.setAttribute('id', 'box-top');
|
||||
|
||||
var star = document.createElement('i');
|
||||
star.setAttribute('class', 'fa fa-star');
|
||||
star.setAttribute('id', 'rating');
|
||||
star.innerText = ' '+ item.rating;
|
||||
|
||||
var addcart = document.createElement('i');
|
||||
addcart.setAttribute('class', 'fa-solid fa-cart-plus add-to-cart');
|
||||
addcart.setAttribute('id', item.id);
|
||||
|
||||
boxTop.appendChild(star);
|
||||
boxTop.appendChild(addcart);
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
|
||||
var orderName = document.createElement('p');
|
||||
orderName.setAttribute('id', 'order-name');
|
||||
orderName.innerText = item.name;
|
||||
|
||||
var orderPrice = document.createElement('p');
|
||||
orderPrice.setAttribute('id', 'order-price');
|
||||
orderPrice.innerText = 'Price : $ ' + item.price;
|
||||
|
||||
itemBox.appendChild(boxTop);
|
||||
itemBox.appendChild(img);
|
||||
itemBox.appendChild(orderName);
|
||||
itemBox.appendChild(orderPrice);
|
||||
|
||||
soup.appendChild(itemBox);
|
||||
})
|
||||
saladData.map(item => {
|
||||
var itemBox = document.createElement('div');
|
||||
itemBox.setAttribute('id', 'item-box');
|
||||
|
||||
var boxTop = document.createElement('div');
|
||||
boxTop.setAttribute('id', 'box-top');
|
||||
|
||||
var star = document.createElement('i');
|
||||
star.setAttribute('class', 'fa fa-star');
|
||||
star.setAttribute('id', 'rating');
|
||||
star.innerText = ' '+ item.rating;
|
||||
|
||||
var addcart = document.createElement('i');
|
||||
addcart.setAttribute('class', 'fa-solid fa-cart-plus add-to-cart');
|
||||
addcart.setAttribute('id', item.id);
|
||||
|
||||
boxTop.appendChild(star);
|
||||
boxTop.appendChild(addcart);
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
|
||||
var orderName = document.createElement('p');
|
||||
orderName.setAttribute('id', 'order-name');
|
||||
orderName.innerText = item.name;
|
||||
|
||||
var orderPrice = document.createElement('p');
|
||||
orderPrice.setAttribute('id', 'order-price');
|
||||
orderPrice.innerText = 'Price : $ ' + item.price;
|
||||
|
||||
itemBox.appendChild(boxTop);
|
||||
itemBox.appendChild(img);
|
||||
itemBox.appendChild(orderName);
|
||||
itemBox.appendChild(orderPrice);
|
||||
|
||||
salad.appendChild(itemBox);
|
||||
})
|
||||
nigiriData.map(item => {
|
||||
var itemBox = document.createElement('div');
|
||||
itemBox.setAttribute('id', 'item-box');
|
||||
|
||||
var boxTop = document.createElement('div');
|
||||
boxTop.setAttribute('id', 'box-top');
|
||||
|
||||
var star = document.createElement('i');
|
||||
star.setAttribute('class', 'fa fa-star');
|
||||
star.setAttribute('id', 'rating');
|
||||
star.innerText = ' '+ item.rating;
|
||||
|
||||
var addcart = document.createElement('i');
|
||||
addcart.setAttribute('class', 'fa-solid fa-cart-plus add-to-cart');
|
||||
addcart.setAttribute('id', item.id);
|
||||
|
||||
boxTop.appendChild(star);
|
||||
boxTop.appendChild(addcart);
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
|
||||
var orderName = document.createElement('p');
|
||||
orderName.setAttribute('id', 'order-name');
|
||||
orderName.innerText = item.name;
|
||||
|
||||
var orderPrice = document.createElement('p');
|
||||
orderPrice.setAttribute('id', 'order-price');
|
||||
orderPrice.innerText = 'Price : $ ' + item.price;
|
||||
|
||||
itemBox.appendChild(boxTop);
|
||||
itemBox.appendChild(img);
|
||||
itemBox.appendChild(orderName);
|
||||
itemBox.appendChild(orderPrice);
|
||||
|
||||
nigiri.appendChild(itemBox);
|
||||
})
|
||||
sushiData.map(item => {
|
||||
var itemBox = document.createElement('div');
|
||||
itemBox.setAttribute('id', 'item-box');
|
||||
|
||||
var boxTop = document.createElement('div');
|
||||
boxTop.setAttribute('id', 'box-top');
|
||||
|
||||
var star = document.createElement('i');
|
||||
star.setAttribute('class', 'fa fa-star');
|
||||
star.setAttribute('id', 'rating');
|
||||
star.innerText = ' '+ item.rating;
|
||||
|
||||
var addcart = document.createElement('i');
|
||||
addcart.setAttribute('class', 'fa-solid fa-cart-plus add-to-cart');
|
||||
addcart.setAttribute('id', item.id);
|
||||
|
||||
boxTop.appendChild(star);
|
||||
boxTop.appendChild(addcart);
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
|
||||
var orderName = document.createElement('p');
|
||||
orderName.setAttribute('id', 'order-name');
|
||||
orderName.innerText = item.name;
|
||||
|
||||
var orderPrice = document.createElement('p');
|
||||
orderPrice.setAttribute('id', 'order-price');
|
||||
orderPrice.innerText = 'Price : $ ' + item.price;
|
||||
|
||||
itemBox.appendChild(boxTop);
|
||||
itemBox.appendChild(img);
|
||||
itemBox.appendChild(orderName);
|
||||
itemBox.appendChild(orderPrice);
|
||||
|
||||
sushi.appendChild(itemBox);
|
||||
})
|
||||
makiData.map(item => {
|
||||
var itemBox = document.createElement('div');
|
||||
itemBox.setAttribute('id', 'item-box');
|
||||
|
||||
var boxTop = document.createElement('div');
|
||||
boxTop.setAttribute('id', 'box-top');
|
||||
|
||||
var star = document.createElement('i');
|
||||
star.setAttribute('class', 'fa fa-star');
|
||||
star.setAttribute('id', 'rating');
|
||||
star.innerText = ' '+ item.rating;
|
||||
|
||||
var addcart = document.createElement('i');
|
||||
addcart.setAttribute('class', 'fa-solid fa-cart-plus add-to-cart');
|
||||
addcart.setAttribute('id', item.id);
|
||||
|
||||
boxTop.appendChild(star);
|
||||
boxTop.appendChild(addcart);
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
|
||||
var orderName = document.createElement('p');
|
||||
orderName.setAttribute('id', 'order-name');
|
||||
orderName.innerText = item.name;
|
||||
|
||||
var orderPrice = document.createElement('p');
|
||||
orderPrice.setAttribute('id', 'order-price');
|
||||
orderPrice.innerText = 'Price : $ ' + item.price;
|
||||
|
||||
itemBox.appendChild(boxTop);
|
||||
itemBox.appendChild(img);
|
||||
itemBox.appendChild(orderName);
|
||||
itemBox.appendChild(orderPrice);
|
||||
|
||||
maki.appendChild(itemBox);
|
||||
})
|
||||
donData.map(item => {
|
||||
var itemBox = document.createElement('div');
|
||||
itemBox.setAttribute('id', 'item-box');
|
||||
|
||||
var boxTop = document.createElement('div');
|
||||
boxTop.setAttribute('id', 'box-top');
|
||||
|
||||
var star = document.createElement('i');
|
||||
star.setAttribute('class', 'fa fa-star');
|
||||
star.setAttribute('id', 'rating');
|
||||
star.innerText = ' '+ item.rating;
|
||||
|
||||
var addcart = document.createElement('i');
|
||||
addcart.setAttribute('class', 'fa-solid fa-cart-plus add-to-cart');
|
||||
addcart.setAttribute('id', item.id);
|
||||
|
||||
boxTop.appendChild(star);
|
||||
boxTop.appendChild(addcart);
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
|
||||
var orderName = document.createElement('p');
|
||||
orderName.setAttribute('id', 'order-name');
|
||||
orderName.innerText = item.name;
|
||||
|
||||
var orderPrice = document.createElement('p');
|
||||
orderPrice.setAttribute('id', 'order-price');
|
||||
orderPrice.innerText = 'Price : $ ' + item.price;
|
||||
|
||||
itemBox.appendChild(boxTop);
|
||||
itemBox.appendChild(img);
|
||||
itemBox.appendChild(orderName);
|
||||
itemBox.appendChild(orderPrice);
|
||||
|
||||
don.appendChild(itemBox);
|
||||
})
|
||||
drinkData.map(item => {
|
||||
var itemBox = document.createElement('div');
|
||||
itemBox.setAttribute('id', 'item-box');
|
||||
|
||||
var boxTop = document.createElement('div');
|
||||
boxTop.setAttribute('id', 'box-top');
|
||||
|
||||
var star = document.createElement('i');
|
||||
star.setAttribute('class', 'fa fa-star');
|
||||
star.setAttribute('id', 'rating');
|
||||
star.innerText = ' '+ item.rating;
|
||||
|
||||
var addcart = document.createElement('i');
|
||||
addcart.setAttribute('class', 'fa-solid fa-cart-plus add-to-cart');
|
||||
addcart.setAttribute('id', item.id);
|
||||
|
||||
boxTop.appendChild(star);
|
||||
boxTop.appendChild(addcart);
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
|
||||
var orderName = document.createElement('p');
|
||||
orderName.setAttribute('id', 'order-name');
|
||||
orderName.innerText = item.name;
|
||||
|
||||
var orderPrice = document.createElement('p');
|
||||
orderPrice.setAttribute('id', 'order-price');
|
||||
orderPrice.innerText = 'Price : $ ' + item.price;
|
||||
|
||||
itemBox.appendChild(boxTop);
|
||||
itemBox.appendChild(img);
|
||||
itemBox.appendChild(orderName);
|
||||
itemBox.appendChild(orderPrice);
|
||||
|
||||
drink.appendChild(itemBox);
|
||||
})
|
||||
dessertData.map(item => {
|
||||
var itemBox = document.createElement('div');
|
||||
itemBox.setAttribute('id', 'item-box');
|
||||
|
||||
var boxTop = document.createElement('div');
|
||||
boxTop.setAttribute('id', 'box-top');
|
||||
|
||||
var star = document.createElement('i');
|
||||
star.setAttribute('class', 'fa fa-star');
|
||||
star.setAttribute('id', 'rating');
|
||||
star.innerText = ' '+ item.rating;
|
||||
|
||||
var addcart = document.createElement('i');
|
||||
addcart.setAttribute('class', 'fa-solid fa-cart-plus add-to-cart');
|
||||
addcart.setAttribute('id', item.id);
|
||||
|
||||
boxTop.appendChild(star);
|
||||
boxTop.appendChild(addcart);
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
|
||||
var orderName = document.createElement('p');
|
||||
orderName.setAttribute('id', 'order-name');
|
||||
orderName.innerText = item.name;
|
||||
|
||||
var orderPrice = document.createElement('p');
|
||||
orderPrice.setAttribute('id', 'order-price');
|
||||
orderPrice.innerText = 'Price : $ ' + item.price;
|
||||
|
||||
itemBox.appendChild(boxTop);
|
||||
itemBox.appendChild(img);
|
||||
itemBox.appendChild(orderName);
|
||||
itemBox.appendChild(orderPrice);
|
||||
|
||||
dessert.appendChild(itemBox);
|
||||
})
|
||||
}
|
||||
displayItems();
|
||||
|
||||
const categoryListData = [...new Map(foodItem.map(item => [item['category'], item])).values()];
|
||||
console.log(categoryListData)
|
||||
|
||||
function categoryLists(){
|
||||
var categoryList = document.getElementById('category-list');
|
||||
|
||||
categoryListData.map(item =>{
|
||||
var listMenu = document.createElement('div');
|
||||
listMenu.setAttribute('class', 'list-menu');
|
||||
|
||||
var listImg = document.createElement('img');
|
||||
listImg.src = item.img;
|
||||
|
||||
var listName = document.createElement('a');
|
||||
listName.setAttribute('class', 'list-name');
|
||||
listName.innerText = item.category;
|
||||
listName.setAttribute('href', '#' + item.category);
|
||||
|
||||
listMenu.appendChild(listImg);
|
||||
listMenu.appendChild(listName);
|
||||
|
||||
var cloneListMenu = listMenu.cloneNode(true);
|
||||
categoryList.appendChild(listMenu);
|
||||
document.querySelector('.category-header').appendChild(cloneListMenu)
|
||||
})
|
||||
}
|
||||
categoryLists();
|
||||
|
||||
|
||||
document.querySelectorAll('.add-to-cart').forEach(item => {
|
||||
item.addEventListener('click', addToCart);
|
||||
})
|
||||
|
||||
var cartData = [];
|
||||
|
||||
function addToCart(){
|
||||
var itemToAdd = this.parentNode.nextSibling.nextSibling.innerText;
|
||||
var itemObject = foodItem.find(element => element.name == itemToAdd);
|
||||
var index = cartData.indexOf(itemObject);
|
||||
if(index === -1){
|
||||
document.getElementById(itemObject.id).classList.add('toggle-cart');
|
||||
cartData = [...cartData, itemObject];
|
||||
console.log(cartData)
|
||||
}
|
||||
else if(index > -1){
|
||||
alert("Added to cart");
|
||||
}
|
||||
|
||||
document.getElementById('shopping-cart').innerText = ' ' +cartData.length + 'Items';
|
||||
document.getElementById('m-shopping-cart').innerText = '' +cartData.length;
|
||||
|
||||
totalAmount();
|
||||
cartItems()
|
||||
}
|
||||
|
||||
function cartItems(){
|
||||
var tableBody = document.getElementById('table-body');
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
cartData.map(item => {
|
||||
var tableRow = document.createElement('tr');
|
||||
|
||||
var rowData1 = document.createElement('td');
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
rowData1.appendChild(img);
|
||||
|
||||
var rowData2 = document.createElement('td');
|
||||
rowData2.innerText = item.name;
|
||||
|
||||
var rowData3 = document.createElement('td');
|
||||
var btn1 = document.createElement('button');
|
||||
btn1.setAttribute('class','drop-item');
|
||||
btn1.innerText = '-';
|
||||
var span = document.createElement('span');
|
||||
span.innerText = item.quantity;
|
||||
var btn2 = document.createElement('button');
|
||||
btn2.setAttribute('class','addOn-item');
|
||||
btn2.innerText = '+';
|
||||
|
||||
rowData3.appendChild(btn1);
|
||||
rowData3.appendChild(span);
|
||||
rowData3.appendChild(btn2);
|
||||
|
||||
var rowData4 = document.createElement('td');
|
||||
var rounded_price = parseFloat((Math.round(item.price * 100) / 100).toFixed(2));
|
||||
rowData4.innerText = rounded_price;
|
||||
|
||||
tableRow.appendChild(rowData1);
|
||||
tableRow.appendChild(rowData2);
|
||||
tableRow.appendChild(rowData3);
|
||||
tableRow.appendChild(rowData4);
|
||||
|
||||
tableBody.appendChild(tableRow);
|
||||
})
|
||||
document.querySelectorAll('.addOn-item').forEach(item => {
|
||||
item.addEventListener('click', addOnItem);
|
||||
})
|
||||
document.querySelectorAll('.drop-item').forEach(item => {
|
||||
item.addEventListener('click', dropItem);
|
||||
})
|
||||
}
|
||||
|
||||
var currentPrice = 0;
|
||||
|
||||
function addOnItem(){
|
||||
let itemAdd = this.parentNode.previousSibling.innerText;
|
||||
|
||||
var addObject = cartData.find(element => element.name == itemAdd);
|
||||
addObject.quantity += 1;
|
||||
|
||||
currentPrice = (addObject.price*addObject.quantity - addObject.price*(addObject.quantity - 1))/(addObject.quantity - 1);
|
||||
|
||||
addObject.price = currentPrice*addObject.quantity;
|
||||
totalAmount();
|
||||
cartItems();
|
||||
}
|
||||
|
||||
var flag = false;
|
||||
|
||||
function dropItem(){
|
||||
let itemRemove = this.parentNode.previousSibling.innerText;
|
||||
let removeObject = cartData.find(element => element.name == itemRemove);
|
||||
let ind = cartData.indexOf(removeObject);
|
||||
if(removeObject.quantity > 1){
|
||||
currentPrice = (removeObject.price*removeObject.quantity - removeObject.price*(removeObject.quantity-1))/(removeObject.quantity);
|
||||
removeObject.quantity -= 1;
|
||||
removeObject.price = currentPrice*removeObject.quantity;
|
||||
}
|
||||
else {
|
||||
document.getElementById(removeObject.id).classList.remove('toggle-cart');
|
||||
cartData.splice(ind,1);
|
||||
document.getElementById('shopping-cart').innerHTML = '' + cartData.length + 'Items';
|
||||
document.getElementById('m-shopping-cart').innerHTML = '' + cartData.length;
|
||||
|
||||
if(cartData.length < 1 && flag){
|
||||
document.getElementById('food-items').classList.toggle('food-items');
|
||||
document.getElementById('category-list').classList.toggle('food-items');
|
||||
document.getElementById('m-shopping-cart').classList.toggle('m-cart-toggle');
|
||||
document.getElementById('cart-page').classList.toggle('cart-toggle');
|
||||
document.getElementById('category-header').classList.toggle('toggle-category');
|
||||
document.getElementById('checkout').classList.toggle('cart-toggle');
|
||||
flag = false;
|
||||
alert('Currently no item in the cart');
|
||||
}
|
||||
}
|
||||
totalAmount();
|
||||
cartItems();
|
||||
}
|
||||
|
||||
function totalAmount(){
|
||||
var sum = 0;
|
||||
cartData.map(item => {
|
||||
let rounded_price = parseFloat((Math.round(item.price * 100) / 100).toFixed(2));
|
||||
console.log('item price:' + item.price);
|
||||
console.log('rounded price:' + rounded_price);
|
||||
sum += rounded_price;
|
||||
})
|
||||
document.getElementById('total-item').innerText = 'Items :' + cartData.length;
|
||||
document.getElementById('total-price').innerText = 'Total Amount : $' + sum;
|
||||
document.getElementById('cart-total').innerText = 'Total Amount : $' + sum;
|
||||
|
||||
}
|
||||
document.getElementById('shopping-cart').addEventListener('click', cartToggle);
|
||||
document.getElementById('m-shopping-cart').addEventListener('click', cartToggle);
|
||||
|
||||
function cartToggle(){
|
||||
if(cartData.length > 0){
|
||||
document.getElementById('food-items').classList.toggle('food-items');
|
||||
document.getElementById('category-list').classList.toggle('food-items');
|
||||
document.getElementById('m-shopping-cart').classList.toggle('m-cart-toggle');
|
||||
document.getElementById('cart-page').classList.toggle('cart-toggle');
|
||||
document.getElementById('category-header').classList.toggle('toggle-category');
|
||||
document.getElementById('checkout').classList.toggle('cart-toggle');
|
||||
flag = true;
|
||||
}
|
||||
else {
|
||||
alert('Currently no item in the cart');
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('add-address').addEventListener('click', addAddress);
|
||||
document.getElementById('m-add-address').addEventListener('click', addAddress);
|
||||
|
||||
function addAddress(){
|
||||
var address = prompt('Please enter your address');
|
||||
if(address){
|
||||
document.getElementById('add-address').innerText = ' '+ address;
|
||||
document.getElementById('m-add-address').innerText = ' '+ address;
|
||||
}
|
||||
else{
|
||||
document.getElementById('add-address').innerText = 'Address';
|
||||
alert('Please provide your address');
|
||||
}
|
||||
}
|
||||
|
||||
window.onresize = window.onload = function(){
|
||||
var size = window.innerWidth;
|
||||
if (size < 1200){
|
||||
var cloneFoodItems = document.getElementById('food-items').cloneNode(true);
|
||||
var cloneCartPage = document.getElementById('cart-page').cloneNode(true);
|
||||
|
||||
document.getElementById('food-items').remove();
|
||||
document.getElementById('cart-page').remove();
|
||||
document.getElementById('category-header').after(cloneFoodItems);
|
||||
document.getElementById('food-items').after(cloneCartPage);
|
||||
addEvents();
|
||||
}
|
||||
if (size >1200){
|
||||
var cloneFoodItems = document.getElementById('food-items').cloneNode(true);
|
||||
|
||||
document.getElementById('food-items').remove();
|
||||
document.getElementById('menu-header').after(cloneFoodItems);
|
||||
|
||||
var cloneCartPage = document.getElementById('cart-page').cloneNode(true);
|
||||
document.getElementById('cart-page').remove();
|
||||
document.getElementById('food-items').after(cloneCartPage);
|
||||
addEvents();
|
||||
}
|
||||
}
|
||||
|
||||
function addEvents(){
|
||||
document.querySelectorAll('.add-to-cart').forEach(item => {
|
||||
item.addEventListener('click', addToCart);
|
||||
})
|
||||
document.querySelectorAll('.addOn-item').forEach(item => {
|
||||
item.addEventListener('click', addOnItem);
|
||||
})
|
||||
document.querySelectorAll('.drop-item').forEach(item => {
|
||||
item.addEventListener('click', dropItem);
|
||||
})
|
||||
}
|
||||
|
|
@ -1,618 +0,0 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
scroll-behavior: smooth;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
:root{
|
||||
--bg-color:snow;
|
||||
--main-color:rgb(177, 126, 5);
|
||||
--minor-color:rgb(49, 48, 48);
|
||||
--other-color:dimgray;
|
||||
--text-color:black;
|
||||
--box-shadow:10px 10px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
html{
|
||||
font-size: 100%;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
.container{
|
||||
max-width: 1500px;
|
||||
margin: auto;
|
||||
padding: 0 100px;
|
||||
}
|
||||
header{
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
background: rgba(243, 241, 241, 0.85);
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
header.sticky{
|
||||
background: var(--bg-color);
|
||||
}
|
||||
.logo img{
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
width: 15%;
|
||||
}
|
||||
.logo span{
|
||||
font-family: 'Vujahday Script';
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.navbar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar nav{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar nav li{
|
||||
margin: 0 1rem;
|
||||
}
|
||||
.navbar nav a{
|
||||
font-size: 1rem;
|
||||
color: var(--main-color);
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.navbar nav a:hover{
|
||||
color: var(--other-color);
|
||||
}
|
||||
.heading-btn i{
|
||||
font-size: 1.5rem;
|
||||
color: var(--main-color);
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#home{
|
||||
background: url(images/header.jpg) no-repeat center center/cover;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
z-index: -10;
|
||||
}
|
||||
#home::before{
|
||||
content: '';
|
||||
background: rgba(57, 57, 57, 0.4);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -11;
|
||||
}
|
||||
.home-content{
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.home-content h2{
|
||||
font-size: 3.5rem;
|
||||
font-family: 'Vujahday Script';
|
||||
color: var(--bg-color);
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.home-content h3{
|
||||
font-size: 2rem;
|
||||
font-family: 'Vujahday Script';
|
||||
color: var(--bg-color);
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#post{
|
||||
padding: 10rem 0 ;
|
||||
}
|
||||
.post-heading{
|
||||
text-align: center;
|
||||
font-size: 3.5rem;
|
||||
font-family:'Vujahday Script';
|
||||
color: var(--main-color);
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
.post-box{
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.post-box .box{
|
||||
width: 33%;
|
||||
background: var(--minor-color);
|
||||
text-align: center;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
.post-box .box .post-img{
|
||||
height: 25rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.post-box .box .post-img img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.post-box .box .post-img:hover img{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.post-box .box .post-content{
|
||||
padding: 2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.post-box .box .post-content h3{
|
||||
font-size: 1.5rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.post-box .box .post-content p{
|
||||
font-size: 1rem;
|
||||
color: var(--bg-color);
|
||||
padding: 1rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.post-box .box .post-content .post-btn{
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
border: none;
|
||||
padding: 0.5rem 0;
|
||||
border: 1px solid var(--main-color);
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background: var(--minor-color);
|
||||
color: var(--bg-color);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.post-box .box .post-content .post-btn:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#static{
|
||||
background: url(images/static.jpg) no-repeat center center/cover;
|
||||
padding: 10rem 0;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
#static::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: -1;
|
||||
}
|
||||
.static-content{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
text-align: center;
|
||||
color: var(--main-color);
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
.static-num{
|
||||
border: 1px solid var(--main-color);
|
||||
padding: 2rem;
|
||||
color: var(--bg-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.static-num i{
|
||||
font-size: 5rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.num{
|
||||
font-size: 3rem;
|
||||
}
|
||||
.static-num h2{
|
||||
font-size: 1.5rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#chef-special{
|
||||
padding: 10rem 0;
|
||||
}
|
||||
.special-content{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
width: 100%;
|
||||
grid-gap: 5rem;
|
||||
}
|
||||
.special-left-side h3{
|
||||
font-size: 3.5rem;
|
||||
font-family:'Vujahday Script';
|
||||
color: var(--main-color);
|
||||
}
|
||||
.img-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.special-imgs{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.special-imgs img{
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
.special-img-text{
|
||||
padding-left: 3rem;
|
||||
}
|
||||
.special-img-text h4{
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
padding-block-end: 0.5rem;
|
||||
}
|
||||
.img-container .price{
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--main-color);
|
||||
background-color: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.special-right{
|
||||
width: 100%;
|
||||
}
|
||||
.special-right-img img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
#reservation{
|
||||
background: url(images/reserve.jpg) no-repeat center center/cover;
|
||||
background-attachment: fixed;
|
||||
padding: 6rem 0;
|
||||
}
|
||||
.reservation-form{
|
||||
background: var(--main-color);
|
||||
padding: 2rem;
|
||||
width: 50%;
|
||||
}
|
||||
.reservation-form h3{
|
||||
font-size: 3.5rem;
|
||||
font-family:'Vujahday Script';
|
||||
color: var(--bg-color);
|
||||
text-align: center;
|
||||
}
|
||||
.reservation-form form{
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.reservation-form form .input1{
|
||||
width: 49.5%;
|
||||
padding: 0.3rem 0.4rem;
|
||||
margin-bottom: 1rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
.reservation-form form textarea{
|
||||
width: 100%;
|
||||
padding: 1rem 0.4rem;
|
||||
margin-bottom: 1rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
}
|
||||
.reservation-form form select{
|
||||
width: 49.5%;
|
||||
padding: 0.7rem 0.4rem;
|
||||
margin-bottom: 1rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.reservation-form form button{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 0.5rem 0;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.reservation-form form button:hover{
|
||||
background-color: rgb(205, 171, 93);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#chef{
|
||||
padding: 10rem 0 ;
|
||||
}
|
||||
.chef-heading{
|
||||
text-align: center;
|
||||
font-size: 3.5rem;
|
||||
font-family:'Vujahday Script';
|
||||
color: var(--main-color);
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
.team-chef{
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||
grid-gap: 1.5rem;
|
||||
}
|
||||
.team-chef .chef-item .chef-img{
|
||||
height: 35rem;
|
||||
width: 100%;
|
||||
}
|
||||
.team-chef .chef-item .chef-img img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.team-chef .chef-item{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.team-chef .chef-item:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 5;
|
||||
}
|
||||
.team-chef .chef-item:hover.chef-item:before{
|
||||
display: block;
|
||||
}
|
||||
.team-chef .chef-item .chef-info{
|
||||
position: absolute;
|
||||
top: 130%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: 1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.team-chef .chef-item .chef-info h3{
|
||||
font-size: 1.5rem;
|
||||
color: var(--main-color);
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.team-chef .chef-item .chef-info span{
|
||||
font-size: 1.1rem;
|
||||
color: var(--bg-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
.team-chef .chef-item .chef-info ul{
|
||||
display: flex;
|
||||
grid-gap: 2rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.team-chef .chef-item .chef-info ul li a{
|
||||
color: var(--main-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.team-chef .chef-item:hover .chef-info{
|
||||
top: 0;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
.countdown .title{
|
||||
margin-top: 10px;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 600;
|
||||
font-family: 'Vujahday Script';
|
||||
color: var(--main-color);
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.col{
|
||||
width: 1000px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: var(--bg-color);
|
||||
}
|
||||
.col div{
|
||||
width: 250px;
|
||||
text-align: center;
|
||||
}
|
||||
input{
|
||||
width: 50%;
|
||||
height: 50px;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
label{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#footer{
|
||||
background: var(--minor-color);
|
||||
padding: 3rem 0;
|
||||
color: var(--bg-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.footer-container{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
.footer-container h2{
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
.about-us img{
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
width: 50%;
|
||||
}
|
||||
.about-us p{
|
||||
line-height: 1.5;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.open-hours h2{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.open-hours .day{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.open-hours span{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.contact h2{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.contact p{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.contact .call, .email, .address{
|
||||
color: var(--main-color);
|
||||
}
|
||||
/*-------------------------------------------------end of index page-------------------------------------------------------------------------*/
|
||||
@media(max-width:1100px){
|
||||
html{
|
||||
font-size: 80%;
|
||||
}
|
||||
.heading-container{
|
||||
padding: 0 60px;
|
||||
}
|
||||
.logo span{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.reservation-form{
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
@media(max-width:900px){
|
||||
html{
|
||||
font-size: 60%;
|
||||
}
|
||||
.heading-container{
|
||||
padding: 0 50px;
|
||||
}
|
||||
.heading-btn i{
|
||||
display: block;
|
||||
}
|
||||
.navbar nav{
|
||||
min-width: 100%;
|
||||
min-height: 60vh;
|
||||
position: fixed;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
align-items: center;
|
||||
transition: all 0.5s ease-in-out;
|
||||
justify-content: center;
|
||||
background: var(--minor-color);
|
||||
}
|
||||
nav.active{
|
||||
right: 0%;
|
||||
transition: all 0.8s ease-in;
|
||||
}
|
||||
.navbar nav li{
|
||||
margin: 1rem 2rem;
|
||||
}
|
||||
.navbar nav li a{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.navbar nav a:hover{
|
||||
color: var(--bg-color);
|
||||
}
|
||||
.close-btn{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 90%;
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
@media(max-width:780px){
|
||||
.special-content{
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
.reservation-form{
|
||||
width: 100%;
|
||||
}
|
||||
.reservation-form form .input1{
|
||||
width: 100%;
|
||||
}
|
||||
.post-menu .post-box{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.post-menu .post-box .box{
|
||||
width: 100%;
|
||||
}
|
||||
.static-content{
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
}
|
||||
.reservation-form form select{
|
||||
width: 100%;
|
||||
}
|
||||
.reservation-form form textarea{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.col{
|
||||
width: 500px;
|
||||
}
|
||||
.footer-container{
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
}
|
||||
}
|
||||
@media(max-width:500px){
|
||||
.col{
|
||||
width: 400px;
|
||||
}
|
||||
.reservation-form form .input1{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media(max-width:450px){
|
||||
html{
|
||||
font-size: 40%;
|
||||
}
|
||||
.static-content{
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
.footer-container{
|
||||
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
.about-us img{
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
@media(max-width:350px){
|
||||
.col{
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
1
wedding_website/.gitignore
vendored
Normal file
1
wedding_website/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
images/*
|
||||
128
wedding_website/about.html
Executable file
128
wedding_website/about.html
Executable file
|
|
@ -0,0 +1,128 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="about">
|
||||
<div class="container">
|
||||
<div class="about-title">
|
||||
<h3>About Us</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<br><p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form
|
||||
of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
|
||||
It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design. </p>
|
||||
<br><p>We are so excited to connect with you and hear more about you!</p>
|
||||
</div>
|
||||
<div class="about-us">
|
||||
<div class="about-detail">
|
||||
<img src="images/about-1.jpg" alt="">
|
||||
<h3>Founder & senior consultant</h3>
|
||||
<p>Jane Doe</p>
|
||||
</div>
|
||||
<div class="about-detail">
|
||||
<img src="images/about-2.jpg" alt="">
|
||||
<h3>Event consultant</h3>
|
||||
<p>Jane Doe</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
146
wedding_website/contact.html
Executable file
146
wedding_website/contact.html
Executable file
|
|
@ -0,0 +1,146 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="contact-form">
|
||||
<div class="container">
|
||||
<div class="contact-title">
|
||||
<h3>We are so excited to meet you!</h3>
|
||||
</div>
|
||||
<div class="contact-main">
|
||||
<div class="contact-box">
|
||||
<div class="left-box"></div>
|
||||
<div class="right-box">
|
||||
<h3>Connect with us</h3>
|
||||
<div class="content-title">
|
||||
<p>Your First Name</p>
|
||||
<input type="text" class="field">
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<p>Your Last Name</p>
|
||||
<input type="text" class="field">
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<p>Your E-Mail Address </p>
|
||||
<input type="text" class="field">
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<p>Your Telephone Number</p>
|
||||
<input type="text" class="field">
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<p>What is your anticipated guest count?</p>
|
||||
<input type="text" class="field">
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<p>Do you have a location, venue, or time of year in mind?</p>
|
||||
<input type="text" class="field">
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<p>We would love to learn more about you and your celebration, please share any details you would like!</p>
|
||||
<textarea name="" id="" cols="30" rows="5" class="field"></textarea>
|
||||
<span>By submitting this form, you agree to be contacted regarding your request, and you are confirming you agree to our Terms of Use and Privacy Policy.</span>
|
||||
</div>
|
||||
<button class="contact-btn">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
178
wedding_website/index.html
Executable file
178
wedding_website/index.html
Executable file
|
|
@ -0,0 +1,178 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="swiper-bundle.min.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="home-slider">
|
||||
<div class="load"></div>
|
||||
</div>
|
||||
|
||||
<div class="home-content">
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<p>We are known for being really good at <span>planning and creating amazing events.</span> We strive to create warm, detail-oriented, and timeless wedding celebrations that reflect the <span>unique desires</span>
|
||||
and preferences of our clients.</p><br>
|
||||
<p>Consider us as <span>passionate supporters</span> of your wedding vision (and coincidentally, the most skilled professionals) who will remain by your side throughout the entire process.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container">
|
||||
<div class="content-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-content-2">
|
||||
<div class="container">
|
||||
<div class="content-detail">
|
||||
<p>View Our</p>
|
||||
<a href="portfolio.html"><span>Portfolio</span></a>
|
||||
</div>
|
||||
<div class="content-detail">
|
||||
<p>Visit us on</p>
|
||||
<a href=""><span>Instagram</span></a>
|
||||
</div>
|
||||
<div class="content-detail">
|
||||
<p>Reach out to</p>
|
||||
<a href=""><span>Inquire</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-content-3">
|
||||
<div class="container">
|
||||
<div class="content-note-title">
|
||||
<h3>Love notes</h3>
|
||||
<h4>From our lovely clients</h4>
|
||||
<div class="content-3-detail mySwiper">
|
||||
<div class="content-note swiper-wrapper">
|
||||
<div class="slide swiper-slide">
|
||||
<img src="images/note-1.jpg" alt="" class="image">
|
||||
<p>"They were exactly what we were looking for when we started to plan our wedding. They were super patient with all our questions during the planning process
|
||||
and during the days just prior to our wedding. We honestly couldn't have asked for a better team of professionals to make our day the most amazing day ever."</p>
|
||||
<div class="note-name">
|
||||
<span class="name">John & Jane</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide swiper-slide">
|
||||
<img src="images/note-2.jpg" alt="" class="image">
|
||||
<p>"You guys are all amazing, kind, professional, attentive, on point answering back to emails, calls, changes and concerns."</p>
|
||||
<div class="note-name">
|
||||
<span class="name">John & Jane</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide swiper-slide">
|
||||
<img src="images/note-3.jpg" alt="" class="image">
|
||||
<p>"If you're looking for a wedding planner, here you have a team of them! We thought that we could take care of everything all by ourselves but we were wrong! Thank god we met the best staff. They found the perfect place for our ceremony and our favorite musical band."</p>
|
||||
<div class="note-name">
|
||||
<span class="name">John & Jane</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next swiper-btn"></div>
|
||||
<div class="swiper-button-prev swiper-btn"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="swiper-bundle.min.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
34
wedding_website/main.js
Executable file
34
wedding_website/main.js
Executable file
|
|
@ -0,0 +1,34 @@
|
|||
//navbar
|
||||
const openBtn = document.querySelectorAll('[trigger-button]');
|
||||
const closeBtn = document.querySelectorAll('[close-button]');
|
||||
const overlay = document.querySelector('[data-overlay]');
|
||||
|
||||
for (let x = 0; x < openBtn.length; x++){
|
||||
let currentID = openBtn[x].dataset.target,
|
||||
targetEl =document.querySelector(`#${currentID}`)
|
||||
|
||||
const openData =function(){
|
||||
targetEl.classList.remove('active');
|
||||
overlay.classList.remove('active');
|
||||
};
|
||||
openBtn[x].addEventListener('click', function(){
|
||||
targetEl.classList.add('active');
|
||||
overlay.classList.add('active');
|
||||
});
|
||||
targetEl.querySelector('[close-button]').addEventListener('click',openData);
|
||||
overlay.addEventListener('click', openData);
|
||||
}
|
||||
//button
|
||||
var swiper = new Swiper(".mySwiper", {
|
||||
slidesPerView: 1,
|
||||
grabCursor: true,
|
||||
loop: true,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
164
wedding_website/note.html
Executable file
164
wedding_website/note.html
Executable file
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="love-note">
|
||||
<div class="notes"></div>
|
||||
</div>
|
||||
<div class="note-title">
|
||||
<div class="container">
|
||||
<div class="note-text">
|
||||
<h2>Love Notes</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<div class="container">
|
||||
<div class="note-detail">
|
||||
<div class="note-img">
|
||||
<img src="images/port-2-3.jpg" alt="">
|
||||
</div>
|
||||
<div class="note-text">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<br><p>-John & Jane</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-detail-1">
|
||||
<div class="note-text-1">
|
||||
<div class="note-img-2">
|
||||
<img src="images/port-3-5.jpg" alt="">
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<br><p>-John & Jane</p>
|
||||
</div>
|
||||
<div class="note-img-1">
|
||||
<img src="images/port-3-5.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-detail">
|
||||
<div class="note-img">
|
||||
<img src="images/port-1-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="note-text">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<br><p>-John & Jane</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line-note"></div>
|
||||
<div class="line-note-2"></div>
|
||||
|
||||
<div class="visit-us">
|
||||
<div class="container">
|
||||
<div class="visit-detail">
|
||||
<p>Visit us on</p>
|
||||
<a href=""><span>Instagram</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
197
wedding_website/portfolio.html
Executable file
197
wedding_website/portfolio.html
Executable file
|
|
@ -0,0 +1,197 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="portfolio">
|
||||
<div class="container">
|
||||
<div class="img-port">
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/port-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay-port">
|
||||
<div class="content">
|
||||
<a href="portfolio_1.html"><p>Summer on <br>sandy coastline</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/port-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay-port">
|
||||
<div class="content">
|
||||
<a href="portfolio_2.html"><p>Summer on the beach</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/port-3.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay-port">
|
||||
<div class="content">
|
||||
<a href="portfolio_3.html"><p>Spring in somewhere</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/port-4.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay-port">
|
||||
<div class="content">
|
||||
<a href="portfolio_4.html"><p>Spring in a garden </p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/port-5.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay-port">
|
||||
<div class="content">
|
||||
<a href="portfolio_5.html"><p>Winter in the city</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/port-6.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay-port">
|
||||
<div class="content">
|
||||
<a href="portfolio_1.html"><p>Winter in somewhere</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/port-7.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay-port">
|
||||
<div class="content">
|
||||
<a href="portfolio_2.html"><p>Autumn in a garden </p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/port-8.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay-port">
|
||||
<div class="content">
|
||||
<a href="portfolio_3.html"><p>Summer at AZ hotel</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/port-9.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay-port">
|
||||
<div class="content">
|
||||
<a href="portfolio_4.html"><p>Summer at ZA hotel</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
126
wedding_website/portfolio_1.html
Executable file
126
wedding_website/portfolio_1.html
Executable file
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="portfolio-1">
|
||||
<div class="container">
|
||||
<div class="img-port-1">
|
||||
<img src="images/port-1-1.jpg" alt="">
|
||||
<img src="images/port-1-2.jpg" alt="">
|
||||
<img src="images/port-1-3.jpg" alt="">
|
||||
<img src="images/port-1-4.jpg" alt="">
|
||||
<img src="images/port-1-5.jpg" alt="">
|
||||
<img src="images/port-1-6.jpg" alt="">
|
||||
<img src="images/port-1-7.jpg" alt="">
|
||||
<img src="images/port-1-8.jpg" alt="">
|
||||
<img src="images/port-1.jpg" alt="">
|
||||
<img src="images/port-1-9.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-1-credit">
|
||||
<div class="container">
|
||||
<div class="credit">
|
||||
<p>credit images •</p>
|
||||
<p>Pexels •</p>
|
||||
<p>Pngwing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
125
wedding_website/portfolio_2.html
Executable file
125
wedding_website/portfolio_2.html
Executable file
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="portfolio-1">
|
||||
<div class="container">
|
||||
<div class="img-port-1">
|
||||
<img src="images/port-2.jpg" alt="">
|
||||
<img src="images/port-2-1.jpg" alt="">
|
||||
<img src="images/port-2-2.jpg" alt="">
|
||||
<img src="images/port-2-3.jpg" alt="">
|
||||
<img src="images/port-2-4.jpg" alt="">
|
||||
<img src="images/port-2-5.jpg" alt="">
|
||||
<img src="images/port-2-6.jpg" alt="">
|
||||
<img src="images/port-2-7.jpg" alt="">
|
||||
<img src="images/port-2-8.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-1-credit">
|
||||
<div class="container">
|
||||
<div class="credit">
|
||||
<p>credit images •</p>
|
||||
<p>Pexels •</p>
|
||||
<p>Pngwing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
128
wedding_website/portfolio_3.html
Executable file
128
wedding_website/portfolio_3.html
Executable file
|
|
@ -0,0 +1,128 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="portfolio-1">
|
||||
<div class="container">
|
||||
<div class="img-port-1">
|
||||
<img src="images/port-3-1.jpg" alt="">
|
||||
<img src="images/port-3-2.jpg" alt="">
|
||||
<img src="images/port-3-3.jpg" alt="">
|
||||
<img src="images/port-3-4.jpg" alt="">
|
||||
<img src="images/port-3-5.jpg" alt="">
|
||||
<img src="images/port-3-6.jpg" alt="">
|
||||
<img src="images/port-3-7.jpg" alt="">
|
||||
<img src="images/port-3-8.jpg" alt="">
|
||||
<img src="images/port-3-9.jpg" alt="">
|
||||
<img src="images/port-3-10.jpg" alt="">
|
||||
<img src="images/port-3-11.jpg" alt="">
|
||||
<img src="images/port-3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-1-credit">
|
||||
<div class="container">
|
||||
<div class="credit">
|
||||
<p>credit images •</p>
|
||||
<p>Pexels •</p>
|
||||
<p>Pngwing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
126
wedding_website/portfolio_4.html
Executable file
126
wedding_website/portfolio_4.html
Executable file
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="portfolio-1">
|
||||
<div class="container">
|
||||
<div class="img-port-1">
|
||||
<img src="images/port-4-1.jpg" alt="">
|
||||
<img src="images/port-4-2.jpg" alt="">
|
||||
<img src="images/port-4-3.jpg" alt="">
|
||||
<img src="images/port-4-4.jpg" alt="">
|
||||
<img src="images/port-4-5.jpg" alt="">
|
||||
<img src="images/port-4-6.jpg" alt="">
|
||||
<img src="images/port-4-7.jpg" alt="">
|
||||
<img src="images/port-4-8.jpg" alt="">
|
||||
<img src="images/port-4-9.jpg" alt="">
|
||||
<img src="images/port-4.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-1-credit">
|
||||
<div class="container">
|
||||
<div class="credit">
|
||||
<p>credit images •</p>
|
||||
<p>Pexels •</p>
|
||||
<p>Pngwing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
124
wedding_website/portfolio_5.html
Executable file
124
wedding_website/portfolio_5.html
Executable file
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="portfolio-1">
|
||||
<div class="container">
|
||||
<div class="img-port-1">
|
||||
<img src="images/port-5-1.jpg" alt="">
|
||||
<img src="images/port-5-2.jpg" alt="">
|
||||
<img src="images/port-5-3.jpg" alt="">
|
||||
<img src="images/port-5-4.jpg" alt="">
|
||||
<img src="images/port-5-5.jpg" alt="">
|
||||
<img src="images/port-5-6.jpg" alt="">
|
||||
<img src="images/port-5-7.jpg" alt="">
|
||||
<img src="images/port-5-8.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-1-credit">
|
||||
<div class="container">
|
||||
<div class="credit">
|
||||
<p>credit images •</p>
|
||||
<p>Pexels •</p>
|
||||
<p>Pngwing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
133
wedding_website/press.html
Executable file
133
wedding_website/press.html
Executable file
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="press">
|
||||
<div class="container">
|
||||
<div class="press-title">
|
||||
<div class="press-title-text">
|
||||
<h2>See and Be seen</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="press-title-1">
|
||||
<div class="press-title-text-1">
|
||||
<h2>Online</h2>
|
||||
</div>
|
||||
<div class="press-img-1">
|
||||
<img src="images/pr-1.png" alt="">
|
||||
<img src="images/pr-2.png" alt="">
|
||||
<img src="images/pr-3.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="press-title-2">
|
||||
<div class="press-title-text-2">
|
||||
<h2>Print</h2>
|
||||
</div>
|
||||
<div class="press-img-2">
|
||||
<img src="images/press-1.png" alt="">
|
||||
<img src="images/press-2.png" alt="">
|
||||
<img src="images/press-3.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
147
wedding_website/service.html
Executable file
147
wedding_website/service.html
Executable file
|
|
@ -0,0 +1,147 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Best Luxury Wedding Planner</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style_.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="service">
|
||||
<div class="service-img"></div>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<div class="container">
|
||||
<div class="service-text">
|
||||
<p>Weddings and special events are our <span>passion.</span></p><br>
|
||||
</div>
|
||||
<div class="service-text-more">
|
||||
<p>We offer different services for planning events, like small weddings, helping out on the big day, or taking care of everything from start to finish. Your coordinator will work closely with you <span>to create a memorable event</span> just for you and your fiancé.
|
||||
We will be there for you from picking the right place to your final dance, supporting you at every stage.</p><br>
|
||||
<p>In our first meeting, you can check out our past work, find out about our event planning services, and ask any questions at our office.
|
||||
After figuring out what you need, we will create a <span>special plan</span> just for you.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-container">
|
||||
<div class="service-card-container">
|
||||
<div class="card-text">
|
||||
<img src="images/service-card-1.jpg" alt="" class="card-img">
|
||||
<div class="card-description">
|
||||
<span class="card-desc">Day of Coordination</span>
|
||||
<h2 class="service-card-title">Pricing begins at $2,000</h2>
|
||||
<a href="#" class="service-card-button">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<img src="images/service-card-2.jpg" alt="" class="card-img">
|
||||
<div class="card-description">
|
||||
<span class="card-desc">Partial Event Planning</span>
|
||||
<h2 class="service-card-title">Pricing begins at $5,000</h2>
|
||||
<a href="#" class="service-card-button">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<img src="images/service-card-3.jpg" alt="" class="card-img">
|
||||
<div class="card-description">
|
||||
<span class="card-desc">Full Service Planning </span>
|
||||
<h2 class="service-card-title">Please inquire for pricing</h2>
|
||||
<a href="#" class="service-card-button">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<ul class="social">
|
||||
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||
<div class="copyright">
|
||||
<p>copyright ©2023 M Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html"><span>Home</span></a></li>
|
||||
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||
<li><a href="note.html"><span>Love note</span></a></li>
|
||||
<li><a href="press.html"><span>Press</span></a></li>
|
||||
<li><a href="service.html"><span>Services</span></a></li>
|
||||
<li><a href="about.html"><span>About</span></a></li>
|
||||
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
510
wedding_website/style.css
Executable file
510
wedding_website/style.css
Executable file
|
|
@ -0,0 +1,510 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600&family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=WindSong:wght@400;500&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
}
|
||||
*,::before,::after{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:root{
|
||||
--main-color: #8D7B68;
|
||||
--based-color:#c4b7a6;
|
||||
--light-color:#bab7ac;
|
||||
--white-color:white;
|
||||
--dark-color:black;
|
||||
|
||||
--transition-color: color 0.3s;
|
||||
--transition-background: background-color 0.3s;
|
||||
--trabsition-border: border 0.3s;
|
||||
--trabsition-transform: transform 0.3s;
|
||||
|
||||
--shadow: 0px 10px 20px 0px rgb(0 0 0 /20%);
|
||||
--fade: fade-bottom 0.3s cubic-bezier(0.3, 0.5, 0.5, 1) both;
|
||||
}
|
||||
.grey-color{
|
||||
color: grey;
|
||||
}
|
||||
html{
|
||||
scroll-behavior: smooth;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body{
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.8;
|
||||
color: var(--main-color);
|
||||
background-color: var(--white-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
img{
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
p{
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
input, textarea, select{
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
input[type=checkbox], input[type=radio]{
|
||||
width: auto;
|
||||
}
|
||||
input::placeholder, textarea::placeholder{
|
||||
color: inherit;
|
||||
}
|
||||
button{
|
||||
font: inherit;
|
||||
}
|
||||
strong{
|
||||
font-weight: 500;
|
||||
}
|
||||
h1, h2, h3, h4{
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
h1{
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
h2{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
h3{
|
||||
font-size: 2rem;
|
||||
}
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.container{
|
||||
max-width: var(--mx-width, 1200px);
|
||||
padding: 0 var(--gutter, 15px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header-center .branding{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.list-block a{
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
color: var(--dark-color);
|
||||
padding: 5px 0;
|
||||
display: inline-block;
|
||||
transition: var(--transition-color);
|
||||
}
|
||||
.list-block a:hover{
|
||||
color: var(--based-color);
|
||||
}
|
||||
nav.menu{
|
||||
padding: 5px 30px;
|
||||
}
|
||||
.inner-header{
|
||||
line-height: 90px;
|
||||
}
|
||||
.inner-header :where(.wrap, .menu > ul), .list-inline > ul{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header-left, .header-right{
|
||||
flex-grow: 1;
|
||||
}
|
||||
.header-left .menu-bar{
|
||||
font-size: 24px;
|
||||
}
|
||||
.header-left .list-inline .bx-user, .header-right .list-inline .bx-user{
|
||||
display: none;
|
||||
}
|
||||
.header-center nav{
|
||||
display: none;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 180px;
|
||||
max-width: 1020px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.header-center .branding{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.header-center .branding a{
|
||||
font-size: 30px;
|
||||
line-height: inherit;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.header-center .menu > ul > li > a{
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 700;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.header-right ul{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.overlay, .mobile-menu, .cart-menu, .sidebar{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.overlay{
|
||||
background-color: var(--dark-color);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 999;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
}
|
||||
.overlay.active{
|
||||
opacity: 0.5;
|
||||
visibility: visible;
|
||||
pointer-events: all;
|
||||
}
|
||||
/*---------- mobile navbar ----------*/
|
||||
.mobile-menu, .cart-menu, .sidebar{
|
||||
pointer-events: none;
|
||||
z-index: 1001;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.mobile-menu.active{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.mobile-menu .wrap{
|
||||
position: relative;
|
||||
max-width: calc(100% - 40px);
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background-color: var(--white-color);
|
||||
pointer-events: auto;
|
||||
transition: var(--trabsition-transform);
|
||||
transform: translateX(var(--transX, -100%));
|
||||
}
|
||||
.mobile-menu.active .wrap{
|
||||
transform: translateX(0);
|
||||
}
|
||||
.mobile-menu .close-trigger{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: var(--dark-color);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
.mobile-menu .main-menu{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.mobile-menu nav>ul{
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-menu nav>ul>li>a{
|
||||
position: relative;
|
||||
padding: 12px 0;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.mobile-menu nav li :where(li, a){
|
||||
display: block;
|
||||
}
|
||||
.mobile-menu nav>ul>li>a:hover{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
/*---------------------------------- main ----------------------------------*/
|
||||
/*----- home-slide -----*/
|
||||
.load{
|
||||
animation: slide 0.2s;
|
||||
}
|
||||
.home-slider{
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
animation: slide 15s infinite;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@keyframes slide{
|
||||
0%{
|
||||
background-image: url(images/home-1.jpg);
|
||||
}
|
||||
20%{
|
||||
background-image: url(images/home-1.jpg);
|
||||
}
|
||||
20.01%{
|
||||
background-image: url(images/home-2.jpg);
|
||||
}
|
||||
40%{
|
||||
background-image: url(images/home-2.jpg);
|
||||
}
|
||||
40.01%{
|
||||
background-image: url(images/home-3.jpg);
|
||||
}
|
||||
60%{
|
||||
background-image: url(images/home-3.jpg);
|
||||
}
|
||||
60.01%{
|
||||
background-image: url(images/home-4.jpg);
|
||||
}
|
||||
80%{
|
||||
background-image: url(images/home-4.jpg);
|
||||
}
|
||||
80.01%{
|
||||
background-image: url(images/home-5.jpg);
|
||||
}
|
||||
100%{
|
||||
background-image: url(images/home-5.jpg);
|
||||
}
|
||||
}
|
||||
/*----- home-content -----*/
|
||||
.home-content .container{
|
||||
max-width: 60%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.content p {
|
||||
letter-spacing: 1px;
|
||||
color: #8D7B68;
|
||||
text-align: center;
|
||||
word-spacing: 1px;
|
||||
}
|
||||
.content span{
|
||||
font-family: 'WindSong';
|
||||
font-size: 22px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
/*----- line -----*/
|
||||
.line .container{
|
||||
max-width: 40%;
|
||||
margin-top: -30px;
|
||||
}
|
||||
.line .content-line{
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border: 1px solid #3F4E4F;
|
||||
opacity: 0.3;
|
||||
display:inline-block;
|
||||
}
|
||||
/*----- contenr-2 -----*/
|
||||
.home-content-2 .container{
|
||||
display: flex;
|
||||
max-width: 80%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.content-detail{
|
||||
display: inline-block;
|
||||
padding: 0 50px;
|
||||
}
|
||||
.content-detail p{
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: #8D7B68;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.content-detail span{
|
||||
margin-left: 30px;
|
||||
font-family: 'WindSong';
|
||||
font-size: 24px;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
/*----- content-3 -----*/
|
||||
.home-content-3 .container{
|
||||
max-width: 100%;
|
||||
height: 85vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #DCD7C9;
|
||||
}
|
||||
.content-3-detail{
|
||||
max-width: 800px;
|
||||
padding: 50px 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-note-title h3{
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.content-note-title h4{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
font-family: 'WindSong';
|
||||
font-size: 24px;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.content-3-detail .image{
|
||||
height: auto;
|
||||
width: 500px;
|
||||
}
|
||||
.content-3-detail .slide{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 30px;
|
||||
}
|
||||
.slide p{
|
||||
padding: 0 160px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.slide .note-name{
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.swiper-btn{
|
||||
transform: translateY(10px);
|
||||
}
|
||||
.swiper-btn::after, .swiper-btn::before{
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.swiper-pagination{
|
||||
display: none;
|
||||
}
|
||||
/*----- footer -----*/
|
||||
footer .container{
|
||||
padding-top: 100px;
|
||||
width: 100vw;
|
||||
color: #3F4E4F;
|
||||
max-width: 60%;
|
||||
}
|
||||
.footer-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.footer-content p{
|
||||
font-size: 12px;
|
||||
}
|
||||
.social{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px 0 20px 0;
|
||||
}
|
||||
.social li{
|
||||
margin: 0 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.footer-content .copyright p{
|
||||
margin-top: 10px;
|
||||
font-size: 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:1200px){
|
||||
.swiper-btn::after, .swiper-btn::before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (width < 990px) {
|
||||
.home-slider{
|
||||
margin-top: 45px;
|
||||
height: 50vh;
|
||||
}
|
||||
.home-content .container{
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:695px){
|
||||
.home-content-2 .container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.line .container{
|
||||
max-width: 60%;
|
||||
}
|
||||
.content-detail{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.content-3-detail .image{
|
||||
width: 350px;
|
||||
}
|
||||
.slide p{
|
||||
padding: 0 200px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.home-content-3 .container{
|
||||
height: -60vh;
|
||||
}
|
||||
footer .container{
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
@media (width < 420px){
|
||||
.content-3-detail .image{
|
||||
width: 300px;
|
||||
}
|
||||
.slide p{
|
||||
padding: 0 250px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (width < 390px){
|
||||
.home-content-3 .container{
|
||||
height: 100vh;
|
||||
}
|
||||
.footer-content p{
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
@media(min-width: 992px){
|
||||
.menu-trigger{
|
||||
display: none;
|
||||
}
|
||||
.header-center nav{
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
625
wedding_website/style_.css
Executable file
625
wedding_website/style_.css
Executable file
|
|
@ -0,0 +1,625 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600&family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=WindSong:wght@400;500&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
}
|
||||
/*----- main -----*/
|
||||
.portfolio .container{
|
||||
max-width: 60%;
|
||||
}
|
||||
.img-port{
|
||||
margin-top: 50px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
grid-gap: 25px;
|
||||
}
|
||||
.img-port .image-item .image{
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
}
|
||||
.img-port .image-item .image img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
.img-port .image-item{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-port .image-item:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(245, 244, 244, 0.9);
|
||||
z-index: 5;
|
||||
}
|
||||
.img-port .image-item:hover.image-item:before{
|
||||
display: block;
|
||||
}
|
||||
.img-port .image-item .overlay-port{
|
||||
position: absolute;
|
||||
top: 130%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: 1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.img-port .image-item .overlay-port p{
|
||||
font-size: 24px;
|
||||
font-style: italic;
|
||||
font-family: 'WindSong';
|
||||
text-align: center;
|
||||
color: #3F4E4F;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.img-port .image-item:hover .overlay-port{
|
||||
top: 0;
|
||||
}
|
||||
/*---------------------------------------- Portfolio-extension ----------------------------------------*/
|
||||
.portfolio-1 .container{
|
||||
max-width: 60%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.img-port-1{
|
||||
columns: 2 300px;
|
||||
gap: 10px;
|
||||
}
|
||||
.img-port-1 img{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.portfolio-1-credit .container{
|
||||
max-width: 60%;
|
||||
margin: 10px auto;
|
||||
text-align: center;
|
||||
}
|
||||
.credit p{
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
/*---------------------------------------- Love notes ----------------------------------------*/
|
||||
.love-note{
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-image: url(images/home-note.jpg);
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.note-text h2{
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
color: #3F4E4F;
|
||||
font-family: 'WindSong';
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
.note .container{
|
||||
max-width: 60%;
|
||||
}
|
||||
.note-detail, .note-detail-1{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.note-img img, .note-img-1 img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
.note-img-2 img{
|
||||
display: none;
|
||||
}
|
||||
.note-text, .note-text-1{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.note-text p, .note-text-1 p{
|
||||
font-size: 14px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.line-note{
|
||||
height: 1px;
|
||||
background: lightgray;
|
||||
}
|
||||
.line-note-2{
|
||||
margin-top: 5px;
|
||||
height: 1px;
|
||||
background: lightgray;
|
||||
}
|
||||
.visit-us{
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
}
|
||||
.visit-detail p{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #8D7B68;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.visit-detail span{
|
||||
margin-left: 50px;
|
||||
color: #3F4E4F;
|
||||
font-size: 22px;
|
||||
font-family: 'WindSong';
|
||||
}
|
||||
/*---------------------------------------- press ----------------------------------------*/
|
||||
.press .container{
|
||||
max-width: 70%;
|
||||
}
|
||||
.press-title{
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.press-title-text h2, .press-title-text-1 h2, .press-title-text-2 h2{
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
color: #3F4E4F;
|
||||
font-family: 'WindSong';
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
.press-title-text p{
|
||||
padding: 0 100px;
|
||||
text-align: center;
|
||||
color: #3F4E4F;
|
||||
font-size: 14px;
|
||||
}
|
||||
.press-title-1{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.press-img-1{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.press-img-1 img{
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
}
|
||||
.press-title-2{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.press-img-2{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 20px;
|
||||
}
|
||||
/*---------------------------------------- service ----------------------------------------*/
|
||||
.service{
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-image: url(images/service.jpg);
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.service-content .container{
|
||||
max-width: 60%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.service-text p {
|
||||
letter-spacing: 4px;
|
||||
color: #8D7B68;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.service-text span{
|
||||
font-family: 'WindSong';
|
||||
font-size: 30px;
|
||||
color: #3F4E4F;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.service-text-more p{
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
}
|
||||
.service-text-more span{
|
||||
font-family: 'WindSong';
|
||||
font-size: 30px;
|
||||
color: #3F4E4F;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.service-container{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-inline: 1.5rem;
|
||||
padding-block: 5rem;
|
||||
}
|
||||
.service-card-container{
|
||||
display: grid;
|
||||
row-gap: 3.5rem;
|
||||
}
|
||||
.card-text{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-img{
|
||||
width: 327px;
|
||||
}
|
||||
.card-description{
|
||||
width: 280px;
|
||||
background-color: #F3EEEA;
|
||||
padding: 1.5rem 1.5rem;
|
||||
box-shadow: 0 10px 25px hsla(0, 0%, 0%, 0.15);
|
||||
border-radius: 1rem;
|
||||
position: absolute;
|
||||
bottom: -9rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-inline: auto;
|
||||
opacity: 0;
|
||||
transition: opacity 1s 1s;
|
||||
text-align: center;
|
||||
}
|
||||
.card-desc{
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.service-card-title{
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.service-card-button{
|
||||
font-size: 14px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.service-card-button:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
.card-text:hover .card-description{
|
||||
animation: showdata 1s forwards;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.card-text:hover{
|
||||
animation: removedata 2s forwards;
|
||||
}
|
||||
.card-text:not(:hover){
|
||||
animation: show-overflow 2s forwards;
|
||||
}
|
||||
.card-text:not(:hover) .card-description{
|
||||
animation: remove-overflow 1s forwards;
|
||||
}
|
||||
@keyframes showdata{
|
||||
50%{
|
||||
transform: translateY(-10rem);
|
||||
}
|
||||
100%{
|
||||
transform: translateY(-7rem);
|
||||
}
|
||||
}
|
||||
@keyframes removedata{
|
||||
to{
|
||||
overflow: initial;
|
||||
}
|
||||
}
|
||||
@keyframes remove-overflow{
|
||||
0%{
|
||||
transform: translateY(-7rem);
|
||||
}
|
||||
50%{
|
||||
transform: translateY(-10rem);
|
||||
}
|
||||
100%{
|
||||
transform: translateY(0.5rem);
|
||||
}
|
||||
}
|
||||
@keyframes show-overflow{
|
||||
0%{
|
||||
overflow: initial;
|
||||
pointer-events: none;
|
||||
}
|
||||
50%{
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
/*---------------------------------------- about ----------------------------------------*/
|
||||
.about .container{
|
||||
max-width: 50%;
|
||||
}
|
||||
.about-title{
|
||||
display: block;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.about-title h3{
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
font-family: 'WindSong';
|
||||
color: #3F4E4F;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
.about-title p{
|
||||
font-size: 14px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.about-us{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.about-detail img{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
.about-detail h3{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: #3F4E4F;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.about-detail p{
|
||||
text-align: center;
|
||||
color: #3F4E4F;
|
||||
font-size: 22px;
|
||||
font-family: 'WindSong';
|
||||
}
|
||||
/*---------------------------------------- contact-form ----------------------------------------*/
|
||||
.contact-form .container{
|
||||
max-width: 60%;
|
||||
}
|
||||
.contact-title h3{
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
font-family: 'WindSong';
|
||||
color: #3F4E4F;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
.contact-main{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.contact-box{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.left-box{
|
||||
height: 100%;
|
||||
background: url(images/contact.jpg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
.right-box{
|
||||
padding: 25px 40px;
|
||||
}
|
||||
.right-box h3{
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.right-box .content-title p{
|
||||
font-size: 14px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.right-box .content-title span{
|
||||
font-size: 12px;
|
||||
color: #3F4E4F;
|
||||
}
|
||||
.field{
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.right-box button{
|
||||
padding: 10px 12px;
|
||||
margin-top: 20px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #7E8A97;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-box button:hover{
|
||||
background-color: #3F4E4F;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media(width < 1500px){
|
||||
.contact-form .container{
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
@media(width < 1200px){
|
||||
.portfolio-1 .container{
|
||||
max-width: 80%;
|
||||
}
|
||||
.note .container{
|
||||
max-width: 90%;
|
||||
}
|
||||
.love-note{
|
||||
margin-top: 50px;
|
||||
}
|
||||
.press-img-1 img{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.press .container{
|
||||
max-width: 80%;
|
||||
}
|
||||
.about .container{
|
||||
max-width: 80%;
|
||||
}
|
||||
.contact-form .container{
|
||||
max-width: 90%;
|
||||
}
|
||||
.right-box h3{
|
||||
font-size: 20px;
|
||||
}
|
||||
.service{
|
||||
margin-top: 50px;
|
||||
height: 50vh;
|
||||
}
|
||||
.love-note{
|
||||
height: 50vh;
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
@media(width < 800px){
|
||||
.portfolio-1 .container{
|
||||
max-width: 90%;
|
||||
}
|
||||
.note .container{
|
||||
max-width: 100%;
|
||||
}
|
||||
.press .container{
|
||||
max-width: 100%;
|
||||
}
|
||||
.press-img-2{
|
||||
gap: 10px;
|
||||
}
|
||||
.about .container{
|
||||
max-width: 100%;
|
||||
}
|
||||
.about-detail img{
|
||||
height: 350px;
|
||||
}
|
||||
.contact-form .container{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media(width < 700px){
|
||||
.note-detail, .note-detail-1{
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
.note .container{
|
||||
max-width: 80%;
|
||||
}
|
||||
.note-img-2 img{
|
||||
display: block;
|
||||
}
|
||||
.note-img-1 img{
|
||||
display: none;
|
||||
}
|
||||
.note-text p, .note-text-1 p{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.press-img-1{
|
||||
display: block;
|
||||
}
|
||||
.press-img-1 img{
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
.press-img-2{
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
.contact-box{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media(width < 550px){
|
||||
.portfolio .container{
|
||||
max-width: 100%;
|
||||
}
|
||||
.portfolio-1 .container{
|
||||
max-width: 100%;
|
||||
}
|
||||
.portfolio-1-credit .container{
|
||||
max-width: 100%;
|
||||
}
|
||||
.note .container{
|
||||
max-width: 100%;
|
||||
}
|
||||
.about .container{
|
||||
max-width: 90%;
|
||||
}
|
||||
.about-us{
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
.service-container{
|
||||
margin-inline: 1rem;
|
||||
}
|
||||
.card-description{
|
||||
width: 250px;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 768px){
|
||||
.service-card-container{
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1120px){
|
||||
.service-card-container{
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.card-img{
|
||||
width: 350px;
|
||||
}
|
||||
.card-description{
|
||||
width: 315px;
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
}
|
||||
13
wedding_website/swiper-bundle.min.css
vendored
Executable file
13
wedding_website/swiper-bundle.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
14
wedding_website/swiper-bundle.min.js
vendored
Executable file
14
wedding_website/swiper-bundle.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue