removed old website code from older repo
This commit is contained in:
parent
7fdb1633d6
commit
a8dc2ffbba
46 changed files with 0 additions and 17207 deletions
|
|
@ -1,667 +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>
|
||||
<div class="footer">
|
||||
<div class="container">
|
||||
<div class="social-icon">
|
||||
<a href=""><i class='bx bxl-facebook'></i></a>
|
||||
<a href=""><i class='bx bxl-instagram' ></i></a>
|
||||
<a href=""><i class='bx bxl-twitter' ></i></a>
|
||||
<a href=""><i class='bx bxl-youtube' ></i></a>
|
||||
<a href=""><i class='bx bxl-gmail' ></i></a>
|
||||
</div>
|
||||
<div class="footernav">
|
||||
<ul>
|
||||
<li><a href="">News</a></li>
|
||||
<li><a href="">About</a></li>
|
||||
<li><a href="">Contact Us</a></li>
|
||||
<li><a href="">Our Team</a></li>
|
||||
<li><a href="">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
<p>Copyright ©Blood Bank 2023. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</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,381 +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>Cooking and Recipes</title>
|
||||
<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>
|
||||
<header>
|
||||
<div class="container site">
|
||||
<div class="brand">
|
||||
<a href="#"><img src="images/logo-home.png" alt=""></a>
|
||||
</div>
|
||||
<div class="navigation">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Recipe</a></li>
|
||||
<li><a href="">Tips & Tools</a></li>
|
||||
<li><a href="">About</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="trigger">
|
||||
<button class="menu"><i class='bx bx-menu'></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="homepage-title">
|
||||
<div class="container">
|
||||
<div class="home-title">
|
||||
<div class="title">
|
||||
<p>M Recipes made for <span>everyone</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-content">
|
||||
<div class="container">
|
||||
<div class="img-content">
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/home-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="content">
|
||||
<a href="vegetarian.html"><p>Vegetarian</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/home-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="content">
|
||||
<a href="brunch.html"><p>Brunch</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/home-3.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="content">
|
||||
<a href="dinner.html"><p>Dinners</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/home-4.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="content">
|
||||
<a href="dessert.html"><p>Desserts</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meal-recipe">
|
||||
<div class="container">
|
||||
<div class="meal-wrap">
|
||||
<div class="meal-search">
|
||||
<h2 class="search-title">Find a recipe</h2>
|
||||
<div class="meal-search-box">
|
||||
<input type="text" id="search-input" class="search-control" placeholder="Search...">
|
||||
<button type="submit" id="search-btn" class="search-btn btn"><i class='bx bx-search'></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meal-result">
|
||||
<div id="meal"></div>
|
||||
</div>
|
||||
<div class="meal-detail">
|
||||
<button id="recipe-button" class="btn recipe-button"><i class='bx bx-x' ></i></button>
|
||||
<div class="meal-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="partner">
|
||||
<div class="container">
|
||||
<div class="partner-image">
|
||||
<h3>As seen in</h3>
|
||||
<div class="slide-track">
|
||||
<div class="partner-logo">
|
||||
<img src="images/p-1.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/p-2.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/p-3.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/p-4.png">
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="images/p-5.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-blog">
|
||||
<div class="container">
|
||||
<div class="home-blog-title">
|
||||
<h2>The big guide for you</h2>
|
||||
<div class="post">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blog-post">
|
||||
<div class="blog-post-img">
|
||||
<img src="images/blog-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="blog-post-info">
|
||||
<div class="blog-post-date">
|
||||
<span>August 3, 2023</span>
|
||||
</div>
|
||||
<h1 class="blog-post-title">Mint Mojito: A must try in summer</h1>
|
||||
<p>Love easy summer cocktails? Try this classic mint mojito, it's a refreshing drink for a hot summer night and a great way to use up any mint in your garden.</p>
|
||||
<a href="" class="blog-btn">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="blog-post">
|
||||
<div class="blog-post-img">
|
||||
<img src="images/blog-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="blog-post-info">
|
||||
<div class="blog-post-date">
|
||||
<span>July 29, 2023</span>
|
||||
</div>
|
||||
<h1 class="blog-post-title">Avocado Ice Cream - Just only 4 Ingredients!</h1>
|
||||
<p>This healthy avocado ice cream is rich, smooth, and so unbelievably creamy. The sweet and creamy texture of this ice cream is sure to win you over!</p>
|
||||
<a href="" class="blog-btn">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="blog-post">
|
||||
<div class="blog-post-img">
|
||||
<img src="images/blog-3.jpg" alt="">
|
||||
</div>
|
||||
<div class="blog-post-info">
|
||||
<div class="blog-post-date">
|
||||
<span>July 15, 2023</span>
|
||||
</div>
|
||||
<h1 class="blog-post-title">Why do people tap watermelon before buying?</h1>
|
||||
<p>There's a definite art to picking the very best watermelons. It involves weighing the watermelon between your hands, turning it over, and giving it a firm thwap! on the underside.</p>
|
||||
<a href="" class="blog-btn">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="blog-post">
|
||||
<div class="blog-post-img">
|
||||
<img src="images/blog-4.jpg" alt="">
|
||||
</div>
|
||||
<div class="blog-post-info">
|
||||
<div class="blog-post-date">
|
||||
<span>July 1, 2023</span>
|
||||
</div>
|
||||
<h1 class="blog-post-title">Smoky Barbecue Ribs</h1>
|
||||
<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. </p>
|
||||
<a href="" class="blog-btn">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="blog-post">
|
||||
<div class="blog-post-img">
|
||||
<img src="images/blog-5.jpg" alt="">
|
||||
</div>
|
||||
<div class="blog-post-info">
|
||||
<div class="blog-post-date">
|
||||
<span>June 29, 2023</span>
|
||||
</div>
|
||||
<h1 class="blog-post-title">Healthy Banana Chai Smoothie</h1>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
||||
<a href="" class="blog-btn">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="blog-post">
|
||||
<div class="blog-post-img">
|
||||
<img src="images/blog-6.jpg" alt="">
|
||||
</div>
|
||||
<div class="blog-post-info">
|
||||
<div class="blog-post-date">
|
||||
<span>June 15, 2023</span>
|
||||
</div>
|
||||
<h1 class="blog-post-title">Kombucha tea: Does it have health benefits?</h1>
|
||||
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<a href="" class="blog-btn">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="load-more">View more posts <span class="loading"><span></span></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-content-2">
|
||||
<div class="container">
|
||||
<div class="home-frame">
|
||||
<div class="home-2-title">
|
||||
<h2>Margherita Pizza</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.
|
||||
</p>
|
||||
<a href=""><span class="home-btn">View recipe</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subscribe">
|
||||
<div class="container">
|
||||
<div class="subscribe-left">
|
||||
<h3>Get the latest recipes right in your inbox</h3>
|
||||
</div>
|
||||
<div class="subscribe-right">
|
||||
<input type="text" placeholder="Your email address" class="subscribe-control">
|
||||
<button type="submit" class="subscribe-btn">Sing Up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="veggie-video">
|
||||
<div class="container">
|
||||
<div class="veggie-video-title">
|
||||
<i class='bx bxs-videos' ></i><span> watch videos</span>
|
||||
</div>
|
||||
<div class="veggie-video-content">
|
||||
<iframe width="340" height="210" src="https://www.youtube.com/embed/Woiiet4vQ58"></iframe>
|
||||
<iframe width="340" height="210" src="https://www.youtube.com/embed/SKAnZgIoqns"></iframe>
|
||||
<iframe width="340" height="210" src="https://www.youtube.com/embed/8dXucFib8eg"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="join">
|
||||
<div class="container">
|
||||
<div class="join-title">
|
||||
<h2 class="hr-lines">join our community</h2>
|
||||
</div>
|
||||
<div class="join-social">
|
||||
<p>come join our amazing group of food recipes!</p>
|
||||
<a href=""><i class='bx bxl-facebook' ></i></a>
|
||||
<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-pinterest-alt' ></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="join-content">
|
||||
<div class="container">
|
||||
<div class="join-gallery">
|
||||
<div class="join-col">
|
||||
<div class="join-img">
|
||||
<img src="images/post-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="join-img">
|
||||
<img src="images/post-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="join-img">
|
||||
<img src="images/post-3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-col">
|
||||
<div class="join-img">
|
||||
<img src="images/post-4.jpg" alt="">
|
||||
</div>
|
||||
<div class="join-img">
|
||||
<img src="images/post-5.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-col">
|
||||
<div class="join-img">
|
||||
<img src="images/post-7.jpg" alt="">
|
||||
</div>
|
||||
<div class="join-img">
|
||||
<img src="images/post-8.jpg" alt="">
|
||||
</div>
|
||||
<div class="join-img">
|
||||
<img src="images/post-9.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-row">
|
||||
<div class="footer-col">
|
||||
<div class="footer-logo">
|
||||
<a href=""><span>M</span> Recipes</a>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h3>helpful links</h3>
|
||||
<li><a href="">Contact</a></li>
|
||||
<li><a href="">FAQ</a></li>
|
||||
<li><a href="">Request a Catalog</a></li>
|
||||
<li><a href="">Gift Cards</a></li>
|
||||
<li><a href="">Advertising Inquiries</a></li>
|
||||
</li>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h3>explore</h3>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Recipes</a></li>
|
||||
<li><a href="">Food</a></li>
|
||||
<li><a href="">The Shop</a></li>
|
||||
<li><a href="">Rewards</a></li>
|
||||
</li>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h3>Newsletter</h3>
|
||||
<form>
|
||||
<i class='bx bx-envelope'></i>
|
||||
<input type="email" placeholder="Enter your email" required>
|
||||
<button type="submit"><i class='bx bx-right-arrow-alt' ></i></button>
|
||||
</form>
|
||||
<div class="footer-social">
|
||||
<a href=""><i class='bx bxl-facebook' ></i></a>
|
||||
<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-pinterest-alt' ></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<p class="copy-right">copyright ©2023 M Recipes</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
const menu = document.querySelector('.menu');
|
||||
const showMenu = document.querySelector('.site');
|
||||
menu.addEventListener('click', function(){
|
||||
showMenu.classList.toggle('showmenu')
|
||||
})
|
||||
//recipe
|
||||
const search_btn = document.getElementById('search-btn');
|
||||
const meal_list = document.getElementById('meal');
|
||||
const meal_detail = document.querySelector('.meal-content');
|
||||
const recipe_btn = document.getElementById('recipe-button');
|
||||
|
||||
search_btn.addEventListener('click', getMealList);
|
||||
meal_list.addEventListener('click', getMealRecipe);
|
||||
recipe_btn.addEventListener('click', () =>{
|
||||
meal_detail.parentElement.classList.remove('showRecipe');
|
||||
});
|
||||
|
||||
function getMealList(){
|
||||
let searchInputText = document.getElementById('search-input').value.trim();
|
||||
fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${searchInputText}`).then(response => response.json()).then(data => {
|
||||
let html = "";
|
||||
if(data.meals){
|
||||
data.meals.forEach(meal => {
|
||||
html += `<div class="meal-item" data-id = "${meal.idMeal}">
|
||||
<div class="meal-img">
|
||||
<img src="${meal.strMealThumb}" alt="">
|
||||
</div>
|
||||
<div class="meal-name">
|
||||
<h3>${meal.strMeal}</h3>
|
||||
<a href="" class="recipe-btn">Get Recipe</a>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
meal_list.classList.remove('notFound')
|
||||
}
|
||||
else{
|
||||
html = "Sorry! we do not have this recipe"
|
||||
meal_list.classList.add('notFound');
|
||||
}
|
||||
meal_list.innerHTML = html;
|
||||
|
||||
});
|
||||
}
|
||||
function getMealRecipe(x){
|
||||
x.preventDefault();
|
||||
if(x.target.classList.contains('recipe-btn')){
|
||||
let meal_item = x.target.parentElement.parentElement;
|
||||
fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${meal_item.dataset.id}`).then(respond => respond.json()).then(data => mealRecipeModel(data.meals));
|
||||
}
|
||||
}
|
||||
function mealRecipeModel(meal){
|
||||
meal = meal[0];
|
||||
let html = `<h2 class="recipe-title">${meal.strMeal}</h2>
|
||||
<p class="recipe-cat">${meal.strCategory}</p>
|
||||
<div class="recipe-guide">
|
||||
<h3>Directions:</h3>
|
||||
<p>${meal.strInstructions}</p>
|
||||
</div>
|
||||
<div class="recipe-img">
|
||||
<img src="${meal.strMealThumb}" alt="">
|
||||
</div>
|
||||
<div class="recipe-link">
|
||||
<a href="${meal.strYoutube}" target="_blank">Watch Video</a>
|
||||
</div>`;
|
||||
meal_detail.innerHTML = html;
|
||||
meal_detail.parentElement.classList.add('showRecipe');
|
||||
}
|
||||
//loadmore
|
||||
const loadmore =document.querySelector('.load-more');
|
||||
let currentItems = 3;
|
||||
loadmore.addEventListener('click', (e) => {
|
||||
const elementList = [...document.querySelectorAll('.post li')];
|
||||
e.target.classList.add('show-loader');
|
||||
|
||||
for (let i = currentItems; i < currentItems +3; i++){
|
||||
setTimeout(function(){
|
||||
e.target.classList.remove('show-loader');
|
||||
if(elementList[i]){
|
||||
elementList[i].style.display = 'flex';
|
||||
}
|
||||
}, 3000)
|
||||
}
|
||||
currentItems += 3;
|
||||
|
||||
if(currentItems >= elementList.length){
|
||||
event.target.classList.add('loaded')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Add table
Reference in a new issue