diff --git a/donation_website/index.html b/donation_website/index.html deleted file mode 100644 index 1f3f62f..0000000 --- a/donation_website/index.html +++ /dev/null @@ -1,667 +0,0 @@ - - - - - - - Document - - - - - - -
-
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
-
- -
-
-
- - -
-
    -
    • -
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-

Every blood doner is a lifesaver

-

Your blood donation is needed to prevernt
a blood shortage

-
Make appointment
-
-
-
-
-
-
-
-
- -
-
-
-
-

Donation guide

-
-
-
-
-
- -
-

Appointment

-

Make an appointment and find the nearest donation center or blood drive near you.

-
-
-
-
-
- -
-

Eligibility

-

Find out blood donation eligibility requirements, including a minimum age and weight requirement.

-
-
-
-
-
- -
-

Rapidpass

-

Complete your health history questions online before visiting your blood drive location.

-
-
-
-
-
-
- -
-
-
- -
-
-

Give blood and keep the world beating

-

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

- Read more -
-
-
- -
-
-
-

Average distribution of blood types in the United States

-
-
-
-
-
-
-
-
-
- 0% -
-
-
-

Blood type A+

- Donate -
-
-
-
-
-
-
-
-
-
- 0% -
-
-
-

Blood type A-

- Donate -
-
-
-
-
-
-
-
-
-
- 0% -
-
-
-

Blood type B+

- Donate -
-
-
-
-
-
-
-
-
-
- 0% -
-
-
-

Blood type B-

- Donate -
-
-
-
-
-
-
-
-
-
- 0% -
-
-
-

Blood type AB+

- Donate -
-
-
-
-
-
-
-
-
-
- 0% -
-
-
-

Blood type AB-

- Donate -
-
-
-
-
-
-
-
-
-
- 0% -
-
-
-

Blood type O+

- Donate -
-
-
-
-
-
-
-
-
-
- 0% -
-
-
-

Blood type O-

- Donate -
-
-
-
-
- -
- - -
-
-
-
- -
-
-
-

Why blood donation is important

-
-
-

Saving Lives

- -
-
-

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.

-
-
-
-
-

Treating Medical Conditions

- -
-
-

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.

-
-
-
-
-

Supporting Healthcare Systems

- -
-
-

Hospitals and medical facilities need a steady and reliable blood supply to handle emergencies and provide proper care to patients.

-
-
-
-
-

Supporting Specific Blood Types

- -
-
-

By donating blood, individuals with rarer blood types can help meet the needs of patients who share their blood type.

-
-
-
-
-

Health Benefits for Donors

- -
-
-

Donating blood can help reduce the risk of certain health conditions, such as hemochromatosis, by lowering the iron levels in the body.

-
-
-
-
-

Screening for Health Conditions

- -
-
-

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.

-
-
-
-
- -
-
-
- -
-
-
-

June Events

-
-
-
- -
-
-

World Blood Doner Day 2023

-
-
- - June 14, 2023 -
-
- - Grant Park -
-
- -

By donating blood at this event, you will be impacting the lives of many in your community.

-
- View events - -
-
-
-
-
- -
-
-

Lincoln Park Community Blood Drive

-
-
- - June 20, 2023 -
-
- - Lincoln Park -
-
- -

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.

-
- View events - -
-
-
-
-
- -
-
-

Chicago Pride Festival

-
-
- - June 30, 2023 -
-
- - Millennium Park -
-
- -

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

-
- View events - -
-
-
-
-
- -
-
-
-
- - - - - - - - - - - - -
-
-
-
- -
- - - -
- - - -
-
-
-
- Search - -
-
- - - - -
-
-
-
- -
- -
-
-

  Chatbot

- -
-
    -
  • - -

    Hi there 👋
    What can I help you with?

    -
    • -
-
- - -
-
-
-
- - - - - \ No newline at end of file diff --git a/donation_website/main.js b/donation_website/main.js deleted file mode 100644 index be80aab..0000000 --- a/donation_website/main.js +++ /dev/null @@ -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" ? `

`:`

`; - 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")); - diff --git a/donation_website/style.css b/donation_website/style.css deleted file mode 100644 index 90a4a22..0000000 --- a/donation_website/style.css +++ /dev/null @@ -1,1137 +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; - box-sizing: border-box; -} -html{ - scroll-behavior: smooth; - overflow-x: hidden; -} -body{ - font-size: 16px; - font-weight: 400; - line-height: 1.5; - color: black; - background-color: whitesmoke; -} -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: 0 0 15px; -} -h1,h2,h3,h4{ - font-weight: 500px; - line-height: normal; -} -input, textarea, select{ - font: inherit; - width: 100%; -} -input[type=checkbox], input[type=radio]{ - width: auto; -} -input::placeholder, textarea::placeholder{ - color: inherit; -} -button{ - font: inherit; -} -strong{ - font-weight: 600; -} -.container{ - max-width: 80%; - padding: 0 15px; - margin: 0 auto; -} -.grey-color{ - color: grey; -} -/*----------------------*/ -.header-top{ - line-height: 40px; - border-bottom: 1px solid lightgray; -} -header :where(.wrap, .social ul, .options, li a){ - display: flex; - align-items: center; - gap: 10px; -} -.header-top .wrap{ - justify-content: space-between; -} -.header-top ul li span{ - font-size: 14px; -} -.header-top ul li i{ - font-size: 18px; -} -.header-top .options li{ - position: relative; -} -.header-top .options ul ul{ - position: absolute; - left: auto; - right: 0; - min-width: 80px; - padding: 15px 20px; - background-color: whitesmoke; - box-shadow: 0 20px 30px rgb(0 0 0 /10%); - opacity: 0; - visibility: hidden; - transform: translateY(20px); - transition: transform 0.3s; -} -.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 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 li a{ - transition: color 0.3s; -} -header li a:hover{ - color: #D22B2B; -} -.header-top :where(.socials li:last-child, .options > div:last-child){ - margin-left: 15px; -} -.header-top .wrap .social i:hover{ - color: #D22B2B; - cursor: pointer; -} - -.header-top, .header-main nav > ul{ - display: none; -} -/*-------- header-main ---------*/ -.header-main .container .wrap .logo img{ - width: 60px; -} -.header-main .container .wrap .logo a{ - font-size: 22px; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; - word-spacing: 5px; -} -.header-main .container .wrap .logo span{ - color: red; -} -.header-main :where(.logo, .icon){ - flex: 1 1 0; -} -.header-main .icon{ - justify-content: flex-end; - display: flex; -} -.header-main :where(nav, .icon) > ul{ - display: flex; - gap: 30px; -} -.header-main :where(.menu-trigger, .icon a){ - font-size: 18px; -} -.header-main :where(nav){ - font-size: 16px; - letter-spacing: 1px; -} -.header-main .menu-trigger{ - display: block; -} -.header-main :where(nav > ul > li > a, .icon){ - line-height: 100px; -} -.header-main :where(nav > ul > li >a span, .logo){ - font-weight: 600; -} -/*---------- mobile menu & submenu----------*/ -.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{ - position: fixed; - top: 0; - left: 0; - width: 300px; - height: 100%; - max-width: calc(100vw -60px); - padding: 30px; - background-color: whitesmoke; - 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; -} -.close-trigger{ - font-size: 22px; - width: 40px; - height: 40px; - line-height: 40px; - text-align: center; - transition: color 0.3s; -} -.close-trigger:hover{ - color: #D22B2B; -} -nav.mobile .close-trigger{ - position: absolute; - right: -40px; - top: 0; -} -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: 22px; - cursor: pointer; - transition: color 0.3s; -} -nav.mobile > ul >li > span:hover{ - color: #D22B2B; -} -nav.mobile .submenu{ - height: 0; - overflow: hidden; -} -nav.mobile .submenu a{ - color: #E34234; - padding-left: 15px; - transition: color 0.3s; -} -nav.mobile .submenu a:hover{ - color: black; -} -nav.mobile .submenu{ - transform: translateY(15px); - transition: height 0.3s, transform 0.3s; -} -nav.mobile .expand ~ .submenu{ - height: auto; - transform: translateY(0); -} -/*---------- search ----------*/ -.search-modal{ - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: 30px 0; - background-color: whitesmoke; - z-index: 1000; - opacity: 0; - visibility: hidden; -} -.search-modal.active{ - opacity: 1; - visibility: visible; -} -.search-modal .wrap{ - max-width: 640px; - margin: 0 auto; -} -.search-modal .search-head{ - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 40px; -} -form.search{ - position: relative; - height: 45px; - background-color: whitesmoke; - display: flex; - justify-content: space-between; - align-items: center; -} -form.search input{ - position: absolute; -} -form.search input[type=search]{ - width: 100%; - height: 45px; - left: 0; - top: 0; - padding: 10px 15px 10px 40px; - border: 1px solid gray; - border-radius: 5px; -} -form.search input[type=submit]{ - right: 0; - top: 0; - border: 0; - background-color: transparent; - color: transparent; - height: 100%; - cursor: pointer; - z-index: 10; -} -form.search i{ - position: relative; - z-index: 1; - padding: 0 15px; -} -/*---------- slider ----------*/ -.home :where(.image, .object-cover){ - position: relative; -} -.home .object-cover{ - height: 430px; -} -.object-cover img{ - position: absolute; - height: 100%; - width: 100%; - object-fit: cover; - opacity: 0.8; -} -.home .title-info{ - background-color: whitesmoke; -} -.home .title-info .wrap{ - display: flex; - flex-direction: column; - align-items: center; - gap: 30px; - padding-bottom: 5vw; - max-width: 1000px; - margin: 0 auto; - text-align: center; -} -.home .title-info .text{ - position: relative; - font-size: 40px; - margin-top: -40px; - color: #D22B2B; - text-shadow: 2px 2px salmon; - display: flex; - align-items: center; - justify-content: center; - text-transform: uppercase; - letter-spacing: 1px; - word-spacing: 2px; -} -.primary-btn{ - padding: 10px 18px; - background-color: #E34234; - font-weight: 600; - color: white; -} -.primary-btn:hover{ - padding: 10px 18px; - background-color: #FA8072; - color: black; -} -/*---------- guide ----------*/ -.guide .row{ - display: flex; - flex-wrap: wrap; - cursor: pointer; -} -.guide .row h1{ - width: 100%; - text-align: center; - margin: 20px 0; - font-size: 22px; - text-transform: uppercase; - text-shadow: 2px 2px gray; -} -.guide .column{ - padding: 16px; -} -.guide .card{ - padding: 48px 10px; - text-align: center; - background: linear-gradient(0deg, #E34234 10px, transparent 10px); - background-repeat: no-repeat; - background-position: 0 10px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); - border-radius: 5px; - transition: 0.5s; -} -.guide .card .icon{ - font-size: 40px; - height: 70px; - width: 70px; - margin: auto; - background-color: #FA8072; - display: grid; - place-items: center; - border-radius: 50%; - color: white; -} -.guide .card .icon::before{ - content: ''; - position: absolute; - height: 80px; - width: 80px; - border: 4px solid #FA8072; - border-radius: 50%; - transition: 0.5s; -} -.guide .card h3{ - font-size: 18px; - font-weight: 600; - margin: 16px 0 24px 0; - letter-spacing: 1px; - text-transform: uppercase; -} -.guide .card p{ - line-height: 1.5; - color: #625a71; - font-size: 14px; -} -.guide .card:hover{ - background-position: 0; -} -.guide .card:hover .icon::before{ - height: 50px; - width: 50px; -} -/*----- content-1 -----*/ -.content-1 .container{ - max-width: 69%; - display: flex; - flex-wrap: wrap; - gap: 50px; - margin-top: 100px; -} -.content-1-img{ - flex: 1 1 21rem; -} -.content-1-img img{ - border-radius: 5px; - height: 95%; -} -.content-1-text{ - flex: 1 1 21rem; -} -.content-1-text h2{ - font-size: 22px; - text-shadow: 2px 2px gray; - text-transform: uppercase; -} -.content-1-text p{ - margin: 0.5rem 0 2.5rem; - color: #625a71; - text-align: justify; -} -.content-1-text .primary-btn:hover{ - background: transparent; - border: 2px solid #E34234; - color: black; -} -/*----- progress -----*/ -.progress{ - display: flex; - align-items: center; - height: 80vh; -} -.progress .container{ - padding: 0 30px; - margin: 0 auto; - max-width: 1100px; - width: 100%; -} -.progress .progress-content h1{ - width: 100%; - text-align: center; - margin: 50px 0; - font-size: 22px; - text-transform: uppercase; - text-shadow: 2px 2px gray; -} -.card-progress{ - max-width: 300px; - background-color: white; - border-radius: 10px; - box-shadow: rgb(225 225 225 / 0.2) 0 0 0 8px; - margin: 0 auto; - overflow: hidden; -} -.card-progress .head{ - position: relative; - height: 420px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 20px; - text-align: center; -} -.card-progress .thumbnail-progress{ - position: relative; -} -.card-progress .thumbnail-progress .progress-bar{ - position: relative; - height: 259px; - width: 250px; - background-color: lightgray; - border-radius: 50%; - background: conic-gradient(red 3deg, lightgray 0deg); - display: flex; - justify-content: center; - align-items: center; -} -.card-progress .thumbnail-progress .progress-bar::before{ - content: ''; - position: absolute; - height: 210px; - width: 210px; - background-color: white; - border-radius: 50%; -} -.card-progress .thumbnail-progress .progress-value{ - position: relative; - font-size: 30px; - font-weight: 600; - color: salmon; -} -.card-progress .meta{ - position: relative; -} -.card-progress .meta h2{ - font-size: 26px; - font-weight: 600; - margin-bottom: 20px; -} -.card-progress .meta .progress-btn{ - padding: 6px 14px; - border: 2px solid #E34234; - margin-bottom: 20px; - text-transform: uppercase; - font-size: 12px; - font-weight: 600; -} -.card-progress .meta .progress-btn:hover{ - background-color: #E34234; - color: white; -} -.swiper .pagination{ - text-align: center; - padding: 20px; -} -.swiper .pagination span{ - height: 4px; - border-radius: 4px; - background-color: gray; - opacity: 1; - transition: width 0.3s; -} -.swiper .pagination span[class*=-active]{ - width: 25px; - background-color: red; -} -.nextprev{ - position: absolute; - right: 0; - bottom: 0; - padding: 15px 0; -} -.nextprev i{ - color: black; - font-size: 22px; - padding: 0 10px; - cursor: pointer; -} -.nextprev i:hover{ - color: gray; -} -/*----- accordion -----*/ -.accordion .container{ - max-width: 65%; - display: flex; - flex-wrap: wrap; - gap: 50px; - margin-top: 50px; -} -.content-2-img{ - flex: 1 1 21rem; -} -.content-2-img img{ - border-radius: 5px; - height: 90%; -} -.content-2{ - flex: 1 1 21rem; -} -.content-2 h2{ - font-size: 22px; - text-shadow: 2px 2px gray; - text-transform: uppercase; - margin-bottom: 30px; -} -.content-2 .question-answ{ - width: 100%; - border-bottom: 1px solid gray; -} -.content-2 .question{ - display: flex; - justify-content: space-between; -} -.content-2 .title-question{ - margin: 20px 0; - font-size: 20px; - font-weight: 600; - color: #E34234; -} -.content-2 .question-btn{ - font-size: 20px; - background-color: transparent; - border-color: transparent; - cursor: pointer; -} -.content-2 .icon-up{ - display: none; -} -.content-2 .answer{ - font-size: 16px; - line-height: 1.5; - margin-bottom: 10px; - color: #625a71; - display: none; -} -.content-2 .show-text .answer{ - display: block; -} -.content-2 .show-text .icon-up{ - display: inline; -} -.content-2 .show-text .icon-down{ - display: none; -} -/*----- chatbot -----*/ -.chatbot-toggler{ - display: flex; - position: fixed; - bottom: 35px; - right: 40px; - height: 50px; - width: 50px; - background: #E34234; - color: white; - border: none; - outline: none; - border-radius: 50%; - cursor: pointer; - align-items: center; - justify-content: center; - transition: all 0.3s ease; - z-index: 1000; -} -.show-chatbot .chatbot-toggler{ - transform: rotate(90deg); -} -.chatbot-toggler span{ - position: absolute; -} -.chatbot-toggler span:last-child, .show-chatbot .chatbot-toggler span:first-child{ - opacity: 0; -} -.chatbot-toggler span i{ - font-size: 22px; - line-height: 40px; -} -.chatbot{ - position: fixed; - background: white; - width: 420px; - right: 40px; - bottom: 100px; - border-radius: 15px; - overflow: hidden; - box-shadow: 0 0 120px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5); - transform: scale(0.5); - transition: all 0.1s ease; - transform-origin: bottom right; - opacity: 0; - pointer-events: none; - z-index: 1000; -} -.show-chatbot .chatbot{ - transform: scale(1); - opacity: 1; - pointer-events: auto; -} -.show-chatbot .chatbot-toggler span:last-child{ - opacity: 1; -} -.chatbot .chatbot-container{ - position: relative; - background-color: #E34234; - padding: 16px 0; -} -.chatbot .chatbot-container h2{ - color: white; - font-size: 20px; - text-transform: uppercase; -} -.chatbot .chatbot-container span{ - display: none; - position: absolute; - right: 20px; - top: 50%; - color: white; - font-size: 22px; - transform: translateY(-50%); - cursor: pointer; -} -.chatbot .chatbox{ - height: 400px; - padding: 30px 20px 100px; - overflow-y: auto; -} -.chatbox .chat{ - display: flex; -} -.chatbox .chat p{ - max-width: 75%; - white-space: pre-wrap; - background: #E34234; - padding: 12px 16px; - border-radius: 5px 5px 0 5px; - color: white; - font-size: 14px; -} -.chatbox .chat p.error{ - color: red; - background-color: rgb(250, 225, 225); -} -.chatbox .incoming span{ - height: 32px; - width: 32px; - background: #E34234; - color: white; - text-align: center; - line-height: 36px; - border-radius: 5px; - margin: 0 10px 10px 0; - align-self: flex-end; -} -.chatbox .incoming i{ - font-size: 22px; -} -.chatbox .outgoing{ - justify-content: flex-end; - margin: 20px 0; -} -.chatbox .incoming p{ - color: black; - background-color: lightgrey; - border-radius: 5px 5px 5px 0; -} -.chatbot .chat-input{ - position: absolute; - display: flex; - width: 100%; - padding: 5px 20px; - gap: 5px; - bottom: 0; - background: white; - border-top: 1px solid gray; -} -.chat-input textarea{ - border: none; - outline: none; - font-size: 16px; - padding: 16px 15px 16px 0; - resize: none; - height: 55px; - width: 100%; - overflow-y: hidden; - max-height: 200px; -} -.chat-input textarea:valid ~ span{ - visibility: visible; -} -.chat-input span{ - font-size: 22px; - color: red; - cursor: pointer; - align-self: self-end; - line-height: 55px; - visibility: hidden; -} -/*----- partner -----*/ -.partner{ - max-width: 100%; - background-color: #DCDCDC; - align-items: center; - justify-content: center; - margin-top: 100px; -} -.partner-slider{ - height: 200px; - width: auto; - margin: auto; - overflow: hidden; - position: relative; -} -.slide-track{ - animation: scroll 60s linear infinite; - display: flex; - width: calc(250px * 20); - gap: 50px; -} -.partner-logo img{ - margin-top: 50px; - width: 250px; - height: 100px; -} -@keyframes scroll{ - 0%{ - transform: translateX(0); - } - 100%{ - transform: translateX(calc(-250px * 5)); - } -} -/*----- event -----*/ -.card-event{ - background-color: white; - box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); - margin-bottom: 30px; -} -.event-heading{ - text-align: center; -} -.event-heading h2{ - font-size: 22px; - text-shadow: 2px 2px gray; - text-transform: uppercase; - margin-bottom: 30px; -} -.event-image{ - height: 200px; - overflow: hidden; -} -.event-image img{ - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} -.event-content{ - padding: 32px; -} -.event-title{ - margin-bottom: 10px; - font-size: 22px; - font-weight: 600; -} -.event-detail, .icon-text{ - display: flex; - align-items: center; -} -.icon-event i{ - font-size: 20px; -} -.text-event{ - font-size: 14px; - color: #625a71; -} -.icon-text{ - margin-right: 15px; -} -.icon-text .icon-event{ - color: #E34234; - margin-right: 10px; -} -.event-subtitle{ - margin-top: 10px; - font-size: 16px; - color: #625a71; -} -.event-btn{ - margin-top: 10px; - display: flex; - align-items: center; - justify-content: space-between; -} -.button-event{ - padding: 5px 10px; - display: inline-block; - background-color: transparent; - border: 2px solid #FA8072; - color: #E34234; - font-weight: 600; -} -.button-event:hover{ - border: none; - background-color: #E34234; - color: white; -} -.share-button i{ - font-size: 30px; - color: #FA8072; - cursor: pointer; -} -.loading-event{ - padding: 5px 10px; - background-color: #E34234; - color: white; - font-weight: 600; - justify-content: center; - text-align: center; - align-items: center; -} -/*----- footer -----*/ -.footer{ - width: 100%; - padding: 50px 30px 20px; - background-color: whitesmoke; -} -.social-icon{ - display: flex; - justify-content: center; -} -.social-icon a{ - width: 40px; - height: 40px; - background-color: #FA8072; - margin: 10px; - border-radius: 50%; - justify-content: center; - text-align: center; - line-height: 45px; -} -.social-icon a:hover{ - background-color: #E34234; - transition: 0.3s; -} -.social-icon a i{ - font-size: 22px; - color: white; -} -.footernav{ - margin: 30px 0; -} -.footernav ul{ - display: flex; - justify-content: center; -} -.footernav ul li a{ - margin: 20px; - font-size: 14px; - color: #FA8072; - transition: 0.5s; - font-weight: 600; -} -.footernav ul li a:hover{ - color: #D22B2B; -} -.copyright{ - background-color: whitesmoke; - color:#625a71; - font-size: 12px; - text-align: center; -} - - -@media only screen and (max-width:1500px){ - .event-heading{ - margin-top: 100px; - } -} - -@media only screen and (max-width:1200px){ - .content-2-img{ - display: none; - } -} - -@media only screen and (min-width:992px){ - .header-main nav > ul{ - display: flex; - } - .header-top{ - display: block; - } - .header-main .menu-trigger{ - display: none; - } - /*----- Submenu -----*/ - .header-main nav .submenu{ - position: absolute; - top: auto; - left: auto; - background-color: whitesmoke; - box-shadow: 0 20px 30px rgb(0 0 0 /10%); - padding: 15px 20px; - margin-left: -20px; - line-height: 40px; - z-index: 999; - min-width: 150px; - transform: translateY(20px); - transition: transform 0.3s; - opacity: 0; - visibility: hidden; - } - .header-main nav li:hover .submenu{ - transform: translateY(0); - opacity: 1; - visibility: visible; - } - /*----- home -----*/ - .home .title-info{ - position: absolute; - bottom: 0; - left: 0; - right: 0; - background-color: transparent; - } - .home .object-cover{ - height: calc(100vh - 80px); - } - .home .title{ - font-size: 30px; - color: white; - text-transform: capitalize; - } - .home .title-1{ - font-size: 30px; - color: red; - text-transform: capitalize; - } - .guide{ - padding: 1rem; - } - .card{ - padding: 5rem 2rem; - } - .column{ - flex: 0 0 33.33%; - max-width: 33.33%; - padding: 0 1rem; - } - /*----- accordion -----*/ - .question-answ{ - width: 380px; - } - .content{ - margin-top: 100px; - } - .title{ - margin-top: 50px; - font-size: 36px; - } - /*----- event -----*/ - .card-event{ - display: flex; - height: 180px; - overflow: hidden; - } - .event-image{ - height: auto; - flex: 1; - } - .event-content{ - flex: 5; - display: flex; - flex-direction: column; - justify-content: center; - } -} - -@media screen and (max-width:700px) { - .footernav ul{ - flex-direction: column; - } - .footernav ul li{ - width: 100%; - margin: 10px; - text-align: center; - } - .social-icon a i{ - font-size: 18px; - } - .social-icon a{ - width: 30px; - height: 30px; - line-height: 35px; - } -} -@media screen and (min-width:768px){ - .guide{ - padding: 1rem 7rem; - } -} - -@media screen and (max-width:490px){ - .chatbot{ - width: 100%; - height: 100%; - right: 0; - bottom: 0; - } - .chatbot .chatbox{ - height: 90%; - } - .chatbot .chatbot-container span{ - display: block; - } -} \ No newline at end of file diff --git a/ecommerce/fashion_website/index.html b/ecommerce/fashion_website/index.html deleted file mode 100644 index 15bd370..0000000 --- a/ecommerce/fashion_website/index.html +++ /dev/null @@ -1,1205 +0,0 @@ - - - - - - - Fashion Reflects Who You Are - - - - - - -
-
-
-
-
-
- -
-
-
- -
-
- -
-
-
-
-
- -
-
-
- - -
-
    -
    • -
    • -
  • 4
    • -
  • 6
    • -
-
-
-
-
-
- -
-
-
-
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
-
-
- -
-
-
- -
-
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - -
-

Bodycon Dress

-
- $149.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Bone White Dress

-
- $175.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - -
-

Sequin-fringe Skirt

-
- $109.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - - - -
-

Villie Wide-leg Shorts

-
- $115.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Snow Lace Trim Shirt

-
- $135.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - -
-

Block Heel Shoes

-
- $169.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Jester Loafers

-
- $149.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Woven Bag

-
- $85.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Oval Sunglasses

-
- $59.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Golden Daisy Earrings

-
- $49.00 -
-
-
- -
-
- -
-
- -
-
-
-
- 30% OFF -
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - - -
-

Outerwear Winter Coat

-
- $599.00 - $419.00 -
-
-
-
-
- 10% OFF -
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - -
-

Neck Knitted Crop Top

-
- $109.00 - $98.00 -
-
-
-
-
- 10% OFF -
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - - -
-

Knit Lavender Dress

-
- $109.00 - $98.00 -
-
-
-
-
- 10% OFF -
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - -
-

Canary Dress

-
- $115.00 - $103.00 -
-
-
-
-
- 20% OFF -
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - -
-

Castleton Green Halterneck Top

-
- $279.00 - $223.00 -
-
-
-
-
- 25% OFF -
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - - -
-

Scoop-neck T-shirt

-
- $99.00 - $74.00 -
-
-
-
-
- 25% OFF -
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Crayola Lemon Thong Bodysuit

-
- $125.00 - $93.00 -
-
-
- -
-
- -
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- - -
-

Broncos Navy with Gold Button Shorts

-
- $135.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

White Snow Open Back Halter Top

-
- $89.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Embroidered Semi-Sheer Blouse

-
- $145.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Double-breasted Jacket

-
- $259.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Onyx Dress with Embroidery

-
- $129.00 -
-
-
-
-
-
- -
- -
-
- -
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-
- -
-

Zebra Halterneck Thong Bodysuit

-
- $85.00 -
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
- -
-
- -

Our Designers

-
-
-
-
-
- - -
- - -
- - - -
-
-
-
- Search Everything - -
-
- - - - -
-
-

- Popular Search: - Shorts - Swimsuit - Tank Tops -

-
-
-
-
- -
-
-
-
- -
-
- -
-
-
-
-
-
- - - -
- - - - - - - \ No newline at end of file diff --git a/ecommerce/fashion_website/main.js b/ecommerce/fashion_website/main.js deleted file mode 100644 index 4bbedbd..0000000 --- a/ecommerce/fashion_website/main.js +++ /dev/null @@ -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 - }, - -}); diff --git a/ecommerce/fashion_website/pages/page-category.html b/ecommerce/fashion_website/pages/page-category.html deleted file mode 100644 index cb97ebf..0000000 --- a/ecommerce/fashion_website/pages/page-category.html +++ /dev/null @@ -1,826 +0,0 @@ - - - - - - - A.Z Shop Category - - - - - - -
-
-
-
-
-
-
- -
-
-
    -
    • -
  • 4
    • -
-
-
-
- -
A.Z Shop
-
-
-
-
    -
    • -
  • 2
    • -
-
-
-
-
-
-
-
- - - -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-

Tops

-
-
- -
-
- -
- Showing 6 of 30 results -
-
-
-
-
- Default sorting - -
- -
-
-
-
    -
    • -
    • -
    • -
    • -
-
-
-
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-

Embroidered Semi-Sheer Blouse

-
- $145.00 - -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-

Snow Lace Trim Shirt

-
- $135.00 - -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-

Linen-blend Shirt

-
- $79.00 -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-

White Snow Open Back Halter Top

-
- $89.00 -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-

Zebra Halterneck Thong Bodysuit

-
- $85.00 - -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-

Crop Knit Turtleneck Sweater

-
- $89.00 - -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
10% OFF
-
-
-

Neck Knitted Crop Top

-
- $109.00 - $98.00 -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
20% OFF
-
-
-

Castleton Green Halterneck Top

-
- $279.00 - $223.00 -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
25% OFF
-
-
-

Scoop-neck T-shirt

-
- $99.00 - $74.00 -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
25% OFF
-
-
-

Crayola Lemon Thong Bodysuit

-
- $125.00 - $93.00 -
-
-
-
-
-
Load more
-
-
-
-
-
- -
- -
- -
- -
-
- - - -
- -
- Login - Sign Up -
-
-
-
- -
-
- -
-
-
-
-
-

Shopping cart

-
-
-
-
- -
-
-
-
-
-
- - -
-
-
-
    -
  • - Subtotal - -
    • -
      -
    • Shipping
      • -
    • -
      - - -
      - $0.00 -
      • -
    • -
      - - -
      - $9.99 -
      • -
    -
  • - Promotion Discount - -$0.00 -
    • -
  • - Total - $212.00 -
    • -
-
-
- Checkout - View cart -
-
-
-
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/ecommerce/fashion_website/pages/page.css b/ecommerce/fashion_website/pages/page.css deleted file mode 100644 index d8bfe09..0000000 --- a/ecommerce/fashion_website/pages/page.css +++ /dev/null @@ -1,1552 +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; - font-family: 'Nunito', sans-serif; -} -*,::before,::after{ - box-sizing: border-box; -} -:root{ - --main-color:#b9936c; - --based-color:#c4b7a6; - --light-color:#bab7ac; - --white-color:white; - --dark-color:black; - - --transition-color: color 0.3s; - --transition-background: background-color 0.3s; - --trabsition-border: border 0.3s; - --trabsition-transform: transform 0.3s; - - --shadow: 0px 10px 20px 0px rgb(0 0 0 /20%); - --fade: fade-bottom 0.3s cubic-bezier(0.3, 0.5, 0.5, 1) both; -} -.grey-color{ - color: grey; -} -html{ - scroll-behavior: smooth; - overflow-x: hidden; -} -body{ - font-size: 16px; - font-weight: 500; - line-height: 1.8; - color: var(--dark-color); - background-color: var(--white-color); -} -a{ - text-decoration: none; - color: inherit; - -webkit-tap-highlight-color: transparent; -} -img{ - max-width: 100%; - vertical-align: middle; -} -ul{ - list-style: none; -} -p{ - margin: 0 0 15px; -} -input, textarea, select{ - font: inherit; - width: 100%; -} -input[type=checkbox], input[type=radio]{ - width: auto; -} -input::placeholder, textarea::placeholder{ - color: inherit; -} -button{ - font: inherit; -} -strong{ - font-weight: 500; -} -h1, h2, h3, h4{ - font-weight: 400; - line-height: normal; -} -h1{ - font-size: 2.7rem; -} -h2{ - font-size: 2.5rem; -} -h3{ - font-size: 2rem; -} -h4{ - font-size: 1rem; -} -.container{ - max-width: var(--mx-width, 1200px); - padding: 0 var(--gutter, 15px); - margin: 0 auto; -} -.item-floating{ - position: absolute; - font-size: 12px; - font-weight: 600; - top: -8px; - right: 0; - background-color: var(--based-color); - color: var(--white-color); - width: 16px; - height: 16px; - border-radius: 4px; -} -.item-floating, .header-center .branding{ - display: flex; - align-items: center; - justify-content: center; -} -.list-block a{ - position: relative; - font-size: 16px; - color: var(--dark-color); - padding: 5px 0; - display: inline-block; - transition: var(--transition-color); -} -.list-block a:hover{ - color: var(--based-color); -} -nav.menu .sub-menu li{ - padding: 5px 30px; -} -.inner-header{ - line-height: 90px; -} -.inner-header :where(.wrap, .menu > ul), .list-inline > ul{ - display: flex; - align-items: center; -} -.header-left, .header-right{ - flex-grow: 1; -} -.header-center nav{ - display: none; - grid-template-columns: 1fr 1fr; - gap: 180px; - max-width: 720px; -} -.header-center .branding{ - position: absolute; - left: 0; - right: 0; - top: 0; - pointer-events: none; -} -.header-center .branding a{ - font-size: 30px; - line-height: inherit; - pointer-events: auto; -} -.header-center .menu > ul > li > a{ - font-size: 16px; - font-weight: 600; - padding: 0 15px; -} -.header-right ul{ - justify-content: flex-end; -} -.list-inline a, .menu-trigger, .close-trigger{ - position: relative; - font-size: 18px; - padding: 0 10px; - line-height: 1; - display: flex; - transition: var(--transition-color); -} -.list-inline a:hover{ - color: var(--based-color); -} -.header-left .list-inline, .sidebar .widget input[type="checkbox"]{ - display: none; -} -:where(.header-left, .header-right) li{ - display: flex; - align-items: center; - height: 90px; -} -@keyframes fade-bottom{ - 0%{ - transform: translateY(10px); - opacity: 0; - } - 100%{ - transform: translateY(0); - opacity: 1; - } -} -/*---------- header ----------*/ -.dotgrid .wrapper{ - display: var(--display,grid); - --grid-col:175px; - grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col),100%), 1fr)); - gap: var(--gutter, 30px); -} -.dotgrid .dot-image{ - position: relative; - margin-bottom: 30px; - overflow: hidden; -} -.dotgrid .dot-image > a, .dotgrid .thumbnail.hover, .dotgrid .actions, .dotgrid .dot-image .label{ - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; -} -.dotgrid .dot-image > a{ - z-index: 1; -} -.dotgrid .thumbnail.hover{ - opacity: 0; - transition: opacity 0.7s ease, transform 1.1s cubic-bezier(0.15, 0.75, 0.5, 1) 0s; - backface-visibility: hidden; - transform: translateZ(0); -} -.dotgrid .dot-image:hover .thumbnail.hover{ - opacity: 1; - transform: scale3d(1.1, 1.1, 1.1) translateZ(0); -} -.dotgrid .actions{ - z-index: 2; - top: auto; - bottom: 20px; - transform: translate3d(0, 0.1, 0); - opacity: 0; - transition: all 0.3s cubic-bezier(0, 0, 0.2, 1); -} -.dot-image:hover .actions{ - opacity: 1; - transform: translateZ(0); -} -.dotgrid .actions ul{ - display: flex; - justify-content: center; - gap: 10px; -} -.dotgrid .actions ul li a{ - font-size: 20px; - display: flex; - align-items: center; - justify-content: center; - width: 36px; - height: 36px; - background-color: var(--white-color); - border-radius: 50%; - transition: var(--transition-background), var(--transition-color); -} -.dotgrid .actions ul li a:hover{ - background-color: var(--main-color); - color: var(--white-color); -} -.dotgrid .dot-image .label{ - top: auto; - bottom: 20px; -} -.dotgrid .dot-image .label span{ - font-size: 10px; - font-weight: 600; - background: var(--main-color); - color: var(--white-color); - justify-content: center; - align-items: center; - padding: 2px 5px; - line-height: 20px; - border-radius: 4px; -} -.list-block ul li a{ - color: var(--main-color); -} -.list-block ul li a:hover{ - color: var(--dark-color); -} -.dot-title{ - font-size: 16px; - font-weight: 600; - line-height: 30px; -} -.dot-title a{ - transition: var(--transition-color); -} -.dot-title a:hover{ - color: var(--based-color); -} -.dotgrid .product-price .before{ - color: var(--light-color); - text-decoration: line-through; - margin-right: 10px; -} -/*---------- search ----------*/ -.inner-header .search-float{ - top: 0; - left: 0; - right: 0; - bottom: auto; - position: fixed; - height: 80px; - background-color: var(--white-color); - z-index: 1000; - display: none; -} -form.search{ - position: relative; -} -form.search :where(i){ - position: absolute; - left: 0; - top: 0; -} -form.search .input{ - outline: 0; - padding: 15px 50px; -} -form.search i{ - display: flex; - font-size: 20px; - align-items: center; - justify-content: center; - width: 50px; - height: 100%; - cursor: pointer; -} -form.search :where(i:last-child){ - left: auto; - right: 0; -} -form :where(input, textarea, select){ - font-size: 14px; - border: 1px solid var(--white-color); - outline: 0; - background-color: transparent; - padding: 10px 20px; - transition: border 0.3s; -} -form :where(input, textarea, select):focus{ - border-color: var(--dark-color); -} -form :where(input, textarea, select)::placeholder{ - color: grey; -} -.inner-header .search .input{ - display: flex; - height: 80px; - font-size: 16px; - border: 0; -} -.search-float.active{ - display: block; -} -.overlay, .mobile-menu, .cart-menu, .sidebar{ - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; -} -.overlay{ - background-color: var(--dark-color); - opacity: 0; - visibility: hidden; - pointer-events: none; - z-index: 999; - transition: opacity 0.3s, visibility 0.3s; -} -.overlay.active{ - opacity: 0.5; - visibility: visible; - pointer-events: all; -} -/*---------- mobile navbar ----------*/ -.mobile-menu, .cart-menu, .sidebar{ - pointer-events: none; - z-index: 1001; - visibility: hidden; - opacity: 0; -} -.mobile-menu.active, .cart-menu.active, .sidebar.active{ - visibility: visible; - opacity: 1; -} -.mobile-menu .wrap, .cart-menu .wrap, .sidebar > .wrap{ - position: relative; - max-width: calc(100% - 40px); - width: 360px; - height: 100%; - background-color: var(--white-color); - pointer-events: auto; - transition: var(--trabsition-transform); - transform: translateX(var(--transX, -100%)); -} -.mobile-menu.active .wrap, .cart-menu.active .wrap, .sidebar.active > .wrap{ - transform: translateX(0); -} -.mobile-menu .close-trigger, .mobile-menu .child-trigger, .cart-menu .close-trigger, .sidebar .close-trigger{ - display: flex; - position: absolute; - top: 0; - right: -40px; - width: 40px; - height: 40px; - color: var(--dark-color); - align-items: center; - justify-content: center; - font-size: 30px; -} -.mobile-menu .main-menu, .cart-menu .cart-list, .sidebar-content{ - display: flex; - height: 100%; - padding: 0 20px; - flex-direction: column; -} -.mobile-menu nav>ul{ - padding: 20px 0; -} -.mobile-menu nav>ul>li>a{ - position: relative; - padding: 12px 0; - font-weight: 600; - transition: var(--transition-color); -} -.mobile-menu nav li :where(li, a){ - display: block; -} -.mobile-menu nav>ul>li>a:hover{ - color: var(--main-color); -} -.mobile-menu .child-trigger{ - color: var(--dark-color); - font-size: 20px; - right: 0; - top: 50%; - transform: translateY(-50%); -} -.mobile-menu .child-trigger:hover{ - color: var(--based-color); -} -.mobile-menu .close-trigger:hover{ - color: var(--main-color); -} -.mobile-menu nav .sub-menu{ - padding-left: 15px; - max-height: 0; - overflow: hidden; - visibility: hidden; - transition: 0.3s ease-in-out; -} -.mobile-menu nav li.active .sub-menu{ - max-height: 1000px; - visibility: visible; -} -.mobile-menu .main-menu .sub-menu li a{ - color: var(--based-color); -} -.mobile-menu .main-menu .sub-menu li a:hover{ - color: var(--dark-color); -} -.button > [class*=-btn]{ - font-size: 14px; - font-weight: 600; - padding: 0 32px; - display: inline-block; - line-height: 40px; - border-width: 1px; - border-radius: 50px; - border-style: solid; - transition: background-color 0.3s, color 0.3s; -} -.secondary-btn, .primary-btn{ - border-color: var(--main-color); -} -.primary-btn:hover{ - background: var(--main-color); - color: var(--white-color); -} -.secondary-btn{ - background: var(--main-color); - color: var(--white-color); -} -.secondary-btn:hover{ - background: transparent; - color: var(--dark-color); -} -.mobile-menu .button{ - margin-top: auto; - padding: 20px 0 40px; - text-align: center; -} -.mobile-menu .button a{ - display: block; - margin-top: 10px; -} -/*--------- product (page-single) ----------*/ -.breadcrumb{ - width: 100%; - line-height: initial; - padding: 30px 0 50px; -} -.breadcrumb ul{ - justify-content: center; -} -.breadcrumb ul li{ - position: relative; - margin-right: 10px; -} -.breadcrumb ul li:not(:first-child){ - padding-left: 25px; -} -.breadcrumb ul li:not(:first-child)::before{ - content: '>'; - position: absolute; - left: 0; -} -.breadcrumb ul :where(li, li a){ - font-size: 15px; - padding: 0; -} -.breadcrumb ul li:last-child{ - color: gray; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -/*---------- product ----------*/ -.product .wrapper{ - --grid-col:331px -} -.product .main-image img{ - width: 100%; -} -.product .outer-thumb{ - display: none; -} -.product .outer-thumb .item{ - height: fit-content !important; - cursor: pointer; -} -.product .thumb-wrap{ - position: relative; - width: 70px; - height: 90px; -} -.product .custom-pagination{ - position: relative; - height: 40px; -} -/*---------- product summary----------*/ -.summary .entry .title{ - font-size: 36px; -} -.summary .grey-color{ - color: grey; -} -.summary .entry{ - display: flex; - flex-direction: column; - gap: 30px; -} -.summary .product-group{ - display: flex; - justify-content: space-between; -} -.summary .product-price{ - display: flex; - align-items: center; -} -.summary .product-price .current{ - font-size: 22px; -} -.summary .product-price .wrap{ - position: relative; - display: flex; - flex-direction: column; - padding-left: 30px; -} -.summary .product-price .wrap::before{ - content: ''; - position: absolute; - top: 0; - left: 12px; - height: 100%; - width: 1px; - background-color: var(--based-color); -} -.summary .product-price .discount{ - display: inline-block; - font-size: 14px; - width: 70px; - padding: 5px; - background-color: var(--main-color); - color: var(--white-color); - border-radius: 5px; - text-align: center; - line-height: 1; - margin-left: -10px; -} -.summary .product-rating{ - line-height: initial; - text-align: right; -} -.summary .product-rating span i{ - color: var(--based-color); -} -.summary .product-rating a{ - font-size: 14px; - color: grey; - padding-left: 10px; - text-decoration-line: underline; - white-space: nowrap; - transition: var(--transition-color); -} -.summary .product-rating a:hover{ - color: var(--dark-color); -} -.summary .wrap:has(button){ - display: flex; - flex-wrap: wrap; - gap: 10px; -} -.summary button{ - border-color: transparent; - justify-content: center; - align-items: center; - flex-shrink: 0; - cursor: pointer; -} -.summary .wrap > button, .summary .qty button{ - width: 30px; - height: 30px; -} -.summary .product-color button{ - border-radius: 50%; -} -.summary .product-color button.color1{ - background-color: #00563B; -} -.summary .product-color button.color2{ - background-color: #13274F; -} -.summary .product-color button.color3{ - background-color: black; -} -.summary .product-color button.color4{ - background-color: whitesmoke; -} -.summary .product-color button.color5{ - background-color: #dac292; -} -.summary .product-color button.color6{ - background-color: red; -} -.summary .product-color button.selected, .summary .product-color button:hover:not(.selected){ - box-shadow: inset 0 0 0 1px var(--white-color); -} -.summary .product-size button{ - font-size: 14px; - line-height: 30px; - border: 1px solid var(--based-color); - background-color: transparent; - border-color: var(--based-color); -} -.summary .product-size button.selected{ - background-color: var(--based-color); -} -.summary .product-size button:hover:not(.selected, [disabled]){ - border-color: #7e4a35; -} -.summary .product-size button:disabled{ - pointer-events: none; -} -.summary .product-stock .wrap{ - display: flex; - gap: 5px; -} -.summary .product-stock .wrap i{ - color: var(--main-color); -} -.summary .qty{ - display: flex; - font-size: 14px; - min-width: 100px; - margin: 0 20px 0 20px; -} -.summary .qty input{ - text-align: center; - border: 1px; - outline: 0; - background-color: var(--based-color); -} -.summary .qty button{ - font-size: 20px; - height: 100%; - background-color: var(--based-color); -} -.summary .qty button:hover{ - color: var(--white-color); -} -.summary .product-action{ - display: grid; - grid-template-columns: 1fr 2fr; -} -.summary .product-action .buynow{ - margin: 20px; - grid-column-start: 1; - grid-column-end: 3; -} -.summary .product-action :where(.addcart, .buynow) button{ - padding: 0; - width: 100%; - border-color: var(--main-color); -} -.summary .product-action .addcart button{ - background-color: var(--white-color); -} -.summary .product-action .addcart:hover button{ - color: var(--main-color); -} -.summary .product-action .addcart.button .primary-btn{ - border-radius: 0; -} -.summary .product-action .buynow.button .secondary-btn{ - border-radius: 0; -} -.summary .product-control ul{ - align-items: flex-start; - flex-flow: wrap; - gap: 25px; -}.summary .product-control a{ - display: flex; - gap: 5px; - flex-wrap: wrap; - align-items: center; - justify-content: center; - text-align: center; - padding: 0; -} -.summary .product-control span{ - font-size: 14px; -} -.summary .product-control ul li:first-child a:hover i{ - color: orangered; -} -.product .summary .shipping{ - padding-top: 20px; - border-top: 1px solid var(--main-color); -} -.product .summary .shipping li{ - position: relative; - padding-left: 25px; - margin-top: 10px; - line-height: 2; -} -.product .summary .shipping li i{ - position: absolute; - top: 0; - left: 0; - font-size: 20px; - line-height: 1.5; -} -/*---------- product description ----------*/ -.product.detail{ - padding-top: 30px; - margin: 70px 0; -} -.product nav{ - position: relative; -} -.product nav::before{ - content: ''; - position: absolute; - left: 0; - top: 56px; - height: 2px; - width: 100%; - background-color: var(--main-color); -} -#product-description .grey-color{ - color: grey; -} -.product nav ul li a{ - position: relative; - display: block; - font-size: 16px; - padding: 20px 0; - margin-right: 30px; - white-space: nowrap; - color: grey; -} -.product nav ul li a::before{ - content: ''; - position: absolute; - height: 2px; - width: 0; - left: 0; - bottom: -2px; - background-color: var(--dark-color); - transition: width 0.3s; -} -.product nav ul :is(li.active a, li a:hover){ - color: var(--dark-color); -} -.product nav ul li.active a::before{ - width: 100%; -} -.product .product-about{ - padding: 50px 0; - max-width: 980px; - margin: 0 auto; - display: none; - animation: var(--fade); -} -.product .product-about.active{ - display: block; -} -.product .product-about .text-block{ - padding-bottom: 30px; -} -.product .product-about :where(h3, h4){ - margin-bottom: 15px; -} -.product .product-about h3{ - font-size: 20px; -} -.product .product-about ul{ - margin-left: 20px; - list-style-type: disc; -} -.product.detail .dotgrid .wrapper{ - --grid-col: 250px; - --gutter: 30px; -} -.product .product-about.custom h3{ - font-size: 20px; - font-weight: 600; - color: var(--main-color); -} -/*---------- product review ----------*/ -.product .review .button .primary-btn{ - border-radius: 0; -} -.product .review .body-review .grey-color{ - color: grey; -} -.product .review{ - max-width: 770px; -} -.product .review .head-review{ - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 30px; - border-bottom: 1px solid var(--main-color); -} -.product .review .head-review strong{ - font-size: 40px; -} -.product .review .head-review span{ - position: relative; - padding-left: 20px; -} -.product .head-review span::before{ - content: ''; - position: absolute; - top: -20px; - left: 12px; - height: 50px; - width: 1px; - background-color: var(--based-color); -} -.product .head-review .primary-btn{ - border-width: 1px; - text-transform: unset; -} -.product .profile .thumb-name{ - display: flex; - align-items: center; - margin-bottom: 20px; -} -.product .profile .image{ - width: 60px; - height: 60px; - border-radius: 50%; - margin-right: 20px; - overflow: hidden; -} -.product .profile .grouping{ - line-height: initial; -} -.product .profile .name{ - font-weight: 600; - margin-bottom: 5px; -} -.product .profile .date{ - font-size: 12px; - margin-top: 10px; -} -.review .profile{ - padding-bottom: 40px; -} -.product-about.shipping .grey-color{ - color: grey; -} -/*--------- alsolike ---------*/ -.alsolike .heading h2{ - font-size: 30px; - margin-bottom: 20px; - text-align: center; -} -/*---------- footer ----------*/ -.inner-footer{ - padding: 100px 0; - padding-bottom: 20px; - line-height: 1.4; - background-color: whitesmoke; - margin-top: 60px; -} -.inner-footer .wrap >div{ - display: flex; - flex-flow: wrap; - justify-content: space-between; - gap: 50px; -} -.inner-footer .subscribe{ - width: 100%; -} -.inner-footer .top.subscribe h3{ - margin-bottom: 20px; -} -.inner-footer p{ - font-size: 14px; -}.inner-footer .search{ - max-width: 400px; -} -.inner-footer .search .input{ - font-size: 14px; - border: 1px solid var(--main-color); -} -.inner-footer .subscribe .grey-color{ - color: grey; -} -.inner-footer .subscribe .search i{ - color: var(--main-color); -} -.inner-footer .list-block .company-address a{ - color: var(--main-color); -} -.inner-footer .list-block .company-address:hover a{ - color: var(--dark-color); -} -.inner-footer .list-block .company-address p{ - color: var(--main-color); -} -.inner-footer .list-block .company-address:hover p{ - color: var(--dark-color); -} -/*--------- popup --------*/ -.data-popup{ - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1000; - pointer-events: none; -} -.data-popup .wrap{ - display: flex; - align-items: center; - justify-content: center; - height: 100%; -} -.data-popup .data-content{ - position: relative; - background-color: var(--white-color); - width: var(--data-width, 400px); - padding: 40px 20px; - max-width: calc(100vw -50px); - max-height: calc(100vh -60px); - border-radius: 5px; - overflow-y: auto; - pointer-events: auto; -} -.data-popup .close-trigger, .data-popup .form span{ - display: flex; - position: absolute; - top: 0; - right: 0; - height: 40px; - align-items: center; -} -.data-popup .form{ - position: relative; -} -.data-popup label{ - font-weight: 600; - font-size: 14px; - margin-bottom: 10px; - display: block; -} -.data-popup .form input{ - background-color: lightgrey; - color: var(--dark-color); - padding: 5px 30px 5px 10px; - border: none; - font-size: 14px; -} -.data-popup .form span{ - top: auto; - bottom: 0; - right: 10px; - cursor: pointer; -} -.data-popup .form span:hover{ - color: gray; -} -.data-popup .media-share{ - margin-top: 20px; -} -.data-popup form>div{ - margin-top: 20px; -} -.data-popup form input, textarea{ - border-color: var(--main-color); -} -form .button button{ - cursor: pointer; -} -form .button .secondary-btn{ - border-radius: 0; -} -.data-popup h3, form .button{ - text-align: center; -} -.data_review .data-content{ - --data-width: 500px; -} -.data_review .dotgrid .wrapper{ - --gutter: 10px; -} -.data_review .stars input{ - display: none; -} -.data_review .stars > input:checked ~ label{ - color: var(--based-color); -} -.data_review .stars label{ - font-size: 16px; - margin: 0; - cursor: pointer; -} -.data_review :where(.rating, .stars){ - display: flex; - gap: 5px; -} -.data_review .stars{ - flex-direction: row-reverse; -} -.data-popup{ - display: none; - animation: var(--fade); -} -.data-popup.active{ - display: block; -} -/*---------- cart ----------*/ -.cart-menu .wrap{ - --transX: 100%; - float: right; -} -.cart-menu .close-trigger{ - right: auto; - left: -40px; -} -.cart-menu .wrapper{ - height: 100%; - display: flex; - flex-direction: column; -} -.cart-menu .cart-header{ - padding: 30px 0; -} -.product-list .thumbnail{ - width: 70px; - margin-right: 20px; -} -.product-list li{ - margin-bottom: 30px; -} -.product-list li .grouping{ - position: relative; - float: left; - padding-left: 45px; -} -.product-list .quantity{ - position: absolute; - left: 0; - top: 0; - max-width: 30px; -} -.product-list .quantity .control{ - background-color: whitesmoke; -} -.product-list .quantity .control > *{ - border: 0; - outline: 0; - height: 30px; - text-align: center; - background-color: transparent; -} -.product-list .quantity button{ - font-size: 20px; - line-height: initial; - width: 100%; - cursor: pointer; -} -.product-list .variants{ - display: flex; - position: relative; - flex-direction: column; - gap: 2px; -} -.product-list .variants h4{ - line-height: initial; - margin-bottom: 5px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.product-list .variants > div{ - font-size: 14px; - line-height: 1.4; -} -.product-list .variants .item-remove{ - position: absolute; - right: 0; - bottom: 0; -} -.product-list .item-remove{ - color: var(--dark-color); - background-color: var(--based-color); - display: flex; - width: 20px; - height: 20px; - align-items: center; - justify-content: center; -} -.product-list .item-remove:hover{ - color: var(--white-color); - background-color: var(--main-color); -} -.cart-menu .cart-outer > .wrapper{ - height: 100vh; - padding: 0; -} -.cart-menu .cart-footer{ - margin: 0 -20px; - padding: 20px; - background-color: whitesmoke; - margin-top: auto; -} -.cart-footer form{ - position: relative; - margin-bottom: 20px; -} -.cart-footer form .input{ - line-height: 34px; - border: 0; - background-color: var(--white-color); -} -.cart-footer form .submit{ - position: absolute; - top: 10px; - right: 10px; - max-width: 90px; - height: 34px; - line-height: 1; - background-color: var(--main-color); - color: var(--white-color); - padding: 0; - cursor: pointer; -} -.cart-footer form .submit:hover{ - background-color: transparent; - border-color: var(--main-color); - color: var(--dark-color); -} -.cart-footer .button{ - text-align: center; -} -.cart-footer .button .secondary-btn{ - border-radius: 0; - display: block; - margin: 20px 0 10px; - line-height: 50px; - min-width: 240px; -} -.cart-footer .button .secondary-btn:hover{ - background-color: var(--based-color); - color: var(--white-color); - border-color:var(--based-color) ; -} -.cart-footer .pricing ul li{ - position: relative; - display: flex; - justify-content: space-between; -} -.cart-footer .pricing ul ul{ - width: 100%; -} -.cart-footer .pricing ul li span:not(.value), .cart-footer .pricing ul li label{ - color: grey; -} -.cart-footer .pricing ul ul li:not(:first-child){ - padding-left: 20px; -} -.cart-footer .pricing .total{ - font-size: 16px; - font-weight: 600; - margin-top: 10px; - padding-top: 10px; - border-top: 1px solid var(--main-color); -} -.greylink{ - color: inherit; - transition: var(--transition-color); -} -.grey-link:hover{ - color: grey; -} -input.checking{ - position: relative; - padding: 5px; - margin: 0 5px 0 2px; - cursor: pointer; -} -input.checking::after, input.checking::before{ - content: ''; - position: absolute; - display: block; - top: 50%; - left: 50%; -} -input.checking:checked::before{ - border-color: var(--dark-color); -} -input.checking:checked::after{ - transform: translate(-50%, -50%) scale(1); -} -.cart-menu .product-list >.wrapper{ - max-height: 400px; -} -/*--------- scroll --------*/ -.scrollto .wrapper:not(.initial){ - --display:grid; - padding: 0; - overflow: unset; - scroll-snap-type: unset; - overscroll-behavior-inline: unset; -} -.scrollto .wrapper .item{ - width: unset; -} -.scrollto > .wrapper{ - overflow-x: auto; - overscroll-behavior-inline: contain; - scroll-snap-type: inline mandatory; -} -.scrollto .wrapper::-webkit-scrollbar{ - width: 12px; - height: 12px; -} -.scrollto .wrapper::-webkit-scrollbar-thumb{ - --border-color: var(var(--white-color)); - background-color: lightgray; - border: 3px solid var(--border-color); - border-radius: 20px; -} -.scrollto .wrapper::-webkit-scrollbar-thumb{ - background-color: lightgray; -} -/*---------------------------------------- page-category ----------------------------------------*/ -/*---------- sidebar ----------*/ -.section .title{ - text-align: center; -} -.sidebar-title{ - font-size: 24px; - padding-top: 100px; -} -.sidebar .widget{ - margin: 20px 0; -} -.sidebar label, .sidebar .price-range{ - justify-content: space-between; - display: flex; - cursor: pointer; -} -.sidebar label span{ - font-weight: 600; -} -.sidebar label i{ - font-size: 24px; - width: 30px; - height: 30px; - display: flex; - align-items: center; - justify-content: center; - transition: var(--trabsition-transform); -} -.sidebar .list-block ul{ - padding-left: 15px; - margin-top: 20px; - height: 230px; -} -.sidebar .price-range{ - font-size: 16px; -} -.sidebar .widget .accord{ - padding-right: 15px; - max-height: 0; - opacity: 0; - visibility: hidden; - overflow: hidden; - transition: all 0.3s ease; -} -.sidebar .widget input:checked ~ div{ - max-height: 1000px; - opacity: 1; - visibility: visible; -} -.sidebar .widget input:checked ~ label i{ - transform: rotate(180deg); -} -.sidebar .widget :where(.accord >div, .range-track){ - padding-top: 20px; -} -/*---------- category content ----------*/ -.sort-list .wrap{ - position: relative; - cursor: pointer; -} -.sort-list .wrap ul{ - position: absolute; - text-align: left; - top: 50px; - left: 0; - right: 0; - background-color: var(--white-color); - box-shadow: var(--shadow); - z-index: 10; - display: none; - animation: var(--fade); -} -.sort-list .wrap ul.show{ - display: block; -} -.sort-list ul li a{ - display: block; - padding: 5px 20px; - transition: var(--transition-background), var(--transition-color); -} -.sort-list ul li a:hover, .sort-list ul li.active a{ - background-color: var(--dark-color); - color: var(--white-color); -} -.category-content .button .primary-btn{ - border-radius: 0; -} -.category-content .button{ - margin: 60px 0 100px; - text-align: center; -} -.category-content :where(.sorter, .right){ - display: flex; - align-items: center; - justify-content: space-between; -} -.category-content .sorter{ - margin: 0 0 30px; -} -.category-content .sorter > a{ - display: flex; - position: fixed; - justify-content: center; - align-items: center; - height: 40px; - width: 40; - background-color: var(--dark-color); - color: var(--white-color); - border-radius: 50%; - top: calc(50% -20px); - left: 0; - opacity: 0.5; - z-index: 10; - transition: opacity 0.3s, var(--trabsition-transform); -} -.category-content .sorter > a:hover{ - transform: scale(1.2); - opacity: 1; -} -.category-content .opt-trigger{ - gap: 5px; - margin-right: 15px; - line-height: 1.5; -} -.category-content .opt-trigger span{ - font-size: 14px; - font-weight: 600; -} -.category-content .right .list-inline a{ - display: flex; - padding: 7px; - background-color: whitesmoke; - margin-left: 10px; -} -.category-content .sort-list ul{ - width: 180px; -} -.category-content .left span{ - display: none; -} -.category-content .dotgrid .wrapper{ - --grid-col:220px; -} - - - - - -@media(min-width:481px){ - .product.wrapper{ - --gutter:60px; - } - .product.dotgrid .image{ - position: relative; - max-width: 500px; - width: 100%; - margin: 0 auto; - height: min-content; - overflow: hidden; - } - .product .outer-main{ - width: calc(100% -85px); - height: 100%; - margin: 0 0 0 85px; - } - .product .outer-thumb{ - display: block; - position: absolute; - top: 0; - left: 0; - } - .custom-pagination{ - display: none; - } - .product .profile .comment{ - padding-left: 80px; - } -} -@media(min-width: 768px){ - .product.dotgrid .image{ - max-width: 100%; - margin: 0; - position: sticky; - top: 30px; - } - .product nav ul{ - justify-content: center; - } - .category-content .left span{ - display: block; - } -} -@media(min-width: 992px){ - .menu-trigger, .sidebar .close-trigger, .category-content .sorter >a{ - display: none; - } - .header-center nav{ - display: grid; - } - .header-left .list-inline{ - display: block; - } - .mega-content{ - display: grid; - grid-template-columns: 2fr 1fr; - gap: 60px; - } - .mega-content .links{ - display: grid; - grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); - gap: 15px; - } - nav.menu .sub-mega{ - left: 0; - right: 0; - padding: 50px 0; - } - nav.menu :where(.sub-menu, .sub-mega){ - position: absolute; - top: auto; - line-height: initial; - background-color: var(--white-color); - box-shadow: var(--shadow); - z-index: 1000; - display: none; - animation: var(--fade); - } - nav.menu li:hover :where(.sub-menu, .sub-mega){ - display: block; - } - nav.menu .sub-menu{ - padding: 10px 0; - } - nav.menu .sub-menu li{ - padding: 5px 30px; - } - .page-category .content{ - display: grid; - grid-template-columns: 1fr 4fr; - gap: 60px; - } - .sidebar-title, .sidebar-content{ - padding: 0; - } - .sidebar, .sidebar > .wrap{ - all: unset; - } -} - -@media(min-width: 1200px){ - .container.wide{ - --mx-width:1720px; - --gutter: 40px - } -} -@media (min-width: 1400px){ - .mega-content{ - grid-template-columns: 1fr 1fr ; - } - .product .outer-main{ - width: 100%; - margin: 0; - } - .product .image .outer-thumb{ - position: absolute; - top: 0; - left: -100px; - height: 100%; - } - .product.dotgrid .image{ - overflow: unset; - } -} - diff --git a/ecommerce/fashion_website/pages/page.html b/ecommerce/fashion_website/pages/page.html deleted file mode 100644 index eb391c1..0000000 --- a/ecommerce/fashion_website/pages/page.html +++ /dev/null @@ -1,889 +0,0 @@ - - - - - - - A.Z Shop products - - - - - - -
-
-
-
-
-
-
- -
-
-
    -
    • -
  • 4
    • -
-
-
-
- -
A.Z Shop
-
-
-
-
    -
    • -
  • 2
    • -
-
-
-
-
-
-
-
- - - -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

Castleton Green Halterneck Top

-
-
- $223.00 -
- $279.00 - 20% OFF -
-
-
- - 4.5 - - - - - - - 2 Reviews -
-
-
- Colors: -
- - -
-
-
- Size: -
- - - - - -
-
-
-
- in stock - -
-
-
-
- - - -
-
- -
-
- -
-
-
- -
-
-
    -
  • - Free shipping & return - On orders over $159 -
    • -
  • - - Estimate delivery: - 11 -15 Feb, 2024 -
    • -
-
-
-
-
-
-
-
- -
-
-

Castleton Green Halterneck Top

-
-

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!

-

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.

-
-
-
-
-
-

Materials & Care

-
    -
  • Rayon 100%
    • -
  • Iron when damp
    • -
  • Machine wash cold
    • -
  • Can be dry cleaned
    • -
-
-
-
-
-
-

Size Chart

-
- -
-
-
-
-

Reviews

-
-
- 4.5 - 2 reviews -
-
- Write a Review -
-
-
-
-
-
- -
-
-
Jane Doe
-
- - - - - -
-
On July 3, 2023
-
-
-
- Great purchase -

This was amazing. The first thing I notice is the material. So soft and comfortable.

-
-
-
-
-
- -
-
-
Anonymous
-
- - - - - -
-
On July 3, 2023
-
-
-
- Good product -

This was amazing.

-
-
-
-
-
-
-
-

Business days are Monday-Friday; Holidays, Saturday, and Sunday are not included inshipping days. Shipping timelines are estimates and are not guranteed.

-

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.

-

Shipping cost is calculated on a "per order", "per item", or "per pound" basis and is based on the shipping option you select.

-
-
-
-
-
-
-
-
-
-
-
-

You may also like

-
-
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-

Onyx Dress with Embroidery

-
- $129.00 - -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-

Villie Wide-legs Shorts

-
- $115.00 - -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-

White Snow Open Back Halter Top

-
- $89.00 -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
-
-

Jester Loafers

-
- $149.00 -
-
-
-
-
- -
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
-
25% OFF
-
-
-

Crayola Lemon Thong Bodysuit

-
- $125.00 - $93.00 - -
-
-
-
-
-
-
-
-
-
- -
- -
- -
-
- - - -
- -
- Login - Sign Up -
-
-
-
- -
-
-
- -
- - - -
-
- -
    - - - -
-
-
-
-
- -
-
-
- -

Question

-
-
-
-
-
- -
-
-
-
-
- -
-
-
- -

Leave a Review

-
-
-
-
-
-
-
-
- Rating: -
- - - - - - - - - - -
-
-
-
-
- -
-
-
-
-
- -
-
- -
-
-
-
-
-

Shopping cart

-
-
-
-
- -
-
-
-
-
-
- - -
-
-
-
    -
  • - Subtotal - -
    • -
      -
    • Shipping
      • -
    • -
      - - -
      - $0.00 -
      • -
    • -
      - - -
      - $9.99 -
      • -
    -
  • - Promotion Discount - -$0.00 -
    • -
  • - Total - $212.00 -
    • -
-
-
- Checkout - View cart -
-
-
-
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/ecommerce/fashion_website/pages/page.js b/ecommerce/fashion_website/pages/page.js deleted file mode 100644 index 3c0f60a..0000000 --- a/ecommerce/fashion_website/pages/page.js +++ /dev/null @@ -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') - })) -} \ No newline at end of file diff --git a/ecommerce/fashion_website/style.css b/ecommerce/fashion_website/style.css deleted file mode 100644 index 8120a32..0000000 --- a/ecommerce/fashion_website/style.css +++ /dev/null @@ -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)); - } - -} diff --git a/ecommerce/flora_website/about.html b/ecommerce/flora_website/about.html deleted file mode 100644 index 4ba4b87..0000000 --- a/ecommerce/flora_website/about.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - About Us - - - - - - - - - -
-
- -
- - -
-
- - - HOME - - - - Shop - - - - Blog - - - - About Us - - - - Contact - -
-
-
- -
-
-
-
-

About Us

-
-
-

message

-
- Read More -
-
- -
-
- -
-
-
- -
-

© Flora All Rights Reserved

-
- - - \ No newline at end of file diff --git a/ecommerce/flora_website/blog.html b/ecommerce/flora_website/blog.html deleted file mode 100644 index 5584778..0000000 --- a/ecommerce/flora_website/blog.html +++ /dev/null @@ -1,124 +0,0 @@ - - - - - - Blog - - - - - - - - - -
-
- -
- - -
-
- - - HOME - - - - Shop - - - - Blog - - - - About Us - - - - Contact - -
-
-
- -
-
-

On the blog

-
-
- -
-
- -
-
- May 21, 2023 / Topic - Title -

all messages are in here.

- Read More -
-
- -
-
- -
-
- May 21, 2023 / Topic - Title -

all messages are in here.

- Read More -
-
- -
-
- -
-
- May 21, 2023 / Topic - Title -

all messages are in here.

- Read More -
-
- -
-
- -
-
- May 21, 2023 / Topic - Title -

all messages are in here.

- Read More -
-
- -
-
- -
-
- May 21, 2023 / Topic - Title -

all messages are in here.

- Read More -
-
- -
-
- - -
-

© Flora All Rights Reserved

-
- - \ No newline at end of file diff --git a/ecommerce/flora_website/contact.html b/ecommerce/flora_website/contact.html deleted file mode 100644 index cfd8f2e..0000000 --- a/ecommerce/flora_website/contact.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - Contact - - - - - - - - - -
-
- -
- - -
-
- - - HOME - - - - Shop - - - - Blog - - - - About Us - - - - Contact - -
-
-
- -
-
-
-
-

Contact Us

- - - - - -
-
-
- -
-

© Flora All Rights Reserved

-
- - \ No newline at end of file diff --git a/ecommerce/flora_website/index.html b/ecommerce/flora_website/index.html deleted file mode 100644 index b5c958c..0000000 --- a/ecommerce/flora_website/index.html +++ /dev/null @@ -1,348 +0,0 @@ - - - - - - Flora-Flower For You - - - - - - - - -
-
- -
- - -
-
- - - HOME - - - - Shop - - - - Blog - - - - About Us - - - - Contact - -
-
-
- -
-
-

Find your favorite bouquet

-

Make a bouquet and get a gift.
Delivery in Chicago, the suburbs, and nationwide!

- Make a bouquet -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-

Our Most Popular Flowers

-
-
- -
- -

Red Roses

-
$2.08 per stem
-
-

hot

-
-
-
Add to cart -
-
- -
- -

White Calla Lilies

-
$5.27 per stem
-
-

hot

-
-
-
Add to cart -
-
- -
- -

Pink Tulips

-
$1.20 per stem
-
-

hot

-
-
-
Add to cart -
-
- -
- -

Phalaenopsis White Orchids

-
$39.49 per stem
-
-

hot

-
-
-
Add to cart -
-
- -
- -

Lavender Flowers

-
$2.45 per stem
-
-

hot

-
-
-
Add to cart -
-
- -
- -

Pink Daisies

-
$3.25 per stem
-
-

hot

-
-
-
Add to cart -
-
- -
- -

Orange Baby's breath

-
$1.50 per stem
-
-

hot

-
-
-
Add to cart -
-
- -
- -

Blue Hydrangeas

-
$3.75 per stem
-
-

hot

-
-
-
Add to cart -
-
-
-
- -
-
- -
-
- -
-
- -
-
-

Trending Bouquets

-
-
- -
- -

Fall Bouquet

-
$55.99
-
-

hot

-
-
-
Add to cart -
-
- -
- -

Sunflowers Bouquet

-
$30.99
-
-

hot

-
-
-
Add to cart -
-
- -
- -

White Peony Bouquet

-
$25.99
-
-

hot

-
-
-
Add to cart -
-
- -
- -

Bridal Bouquets

-
$69.49 per stem
-
-

hot

-
-
-
Add to cart -
-
-
-
- -
-

Customer Reviews

-
-
-
- - - - - -
-

Wonderful experience!
The flowers are beautiful and lasted.

-
- - -
- -
-
-
- - - - - -
-

The best flower delivery service.

-
- - -
- -
-
-
- - - - - -
-

The flowers are drop dead
gorgeous every time.

-
- - -
- -
-
-
- -
-
-

Get to Know Us

-
  • Careers
    • -
  • Newsletter
    • -
  • About Us
    • -
  • Accessibility
    • -
  • Advertising
    • -
    -
    -

    Shop

    -
  • Graduation
    • -
  • Prom
    • -
  • Memorial Day
    • -
  • Anniversary
    • -
  • Birthday
    • -
    -
    -

    Quick Links

    -
  • Our Location
    • -
  • Order Tracking
    • -
  • Delivery service
    • -
  • Privacy
    • -
  • FAQs
    • -
    -
    -

    Let Us Help You

    -
  • Your Order
    • -
  • Shipping Policies
    • -
  • Use Our Coupon
    • -
  • Cancel Your Order
    • -
  • Help
    • -
    -
    -

    Social Media

    -
    Follow Us On
    - -
    -
    - - - -
    -

    © Flora All Rights Reserved

    -
    - - \ No newline at end of file diff --git a/ecommerce/flora_website/shop.html b/ecommerce/flora_website/shop.html deleted file mode 100644 index 569342a..0000000 --- a/ecommerce/flora_website/shop.html +++ /dev/null @@ -1,278 +0,0 @@ - - - - - - Flora-Flower For You - - - - - - - - - - -
    -
    - -
    - - -
    -
    - - - HOME - - - - Shop - - - - Blog - - - - About Us - - - - Contact - -
    -
    -
    - -
    - -
    -

    Graduation

    -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    -
    - -
    -

    Wedding

    -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    -
    - -
    -

    Memorial Day

    -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    -
    - -
    -

    Birthday

    -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - -
    - -

    ###

    -
    $$$
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    - - -
    - -

    ###

    -
    $35.49
    -
    -

    hot

    -
    -
    -
    Add to cart -
    -
    -
    -
    - - - -
    -

    © Flora All Rights Reserved

    -
    - - - \ No newline at end of file diff --git a/ecommerce/flora_website/style.css b/ecommerce/flora_website/style.css deleted file mode 100644 index 6d2c89d..0000000 --- a/ecommerce/flora_website/style.css +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/ecommerce/flora_website/style_about.css b/ecommerce/flora_website/style_about.css deleted file mode 100644 index 27f0488..0000000 --- a/ecommerce/flora_website/style_about.css +++ /dev/null @@ -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%; - } -} - - diff --git a/ecommerce/flora_website/style_blog.css b/ecommerce/flora_website/style_blog.css deleted file mode 100644 index 2aa2d93..0000000 --- a/ecommerce/flora_website/style_blog.css +++ /dev/null @@ -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%; - } -} diff --git a/ecommerce/flora_website/style_contact.css b/ecommerce/flora_website/style_contact.css deleted file mode 100644 index 3d373e0..0000000 --- a/ecommerce/flora_website/style_contact.css +++ /dev/null @@ -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%; - } -} \ No newline at end of file diff --git a/ecommerce/flora_website/style_shop.css b/ecommerce/flora_website/style_shop.css deleted file mode 100644 index 8849225..0000000 --- a/ecommerce/flora_website/style_shop.css +++ /dev/null @@ -1,8 +0,0 @@ -#shop{ - margin-top: 5%; - text-align: center; -} -#shop .blog-heading h1{ - margin-top: 8%; -} - diff --git a/ecommerce/furniture_website/index.html b/ecommerce/furniture_website/index.html deleted file mode 100644 index 5e621d9..0000000 --- a/ecommerce/furniture_website/index.html +++ /dev/null @@ -1,369 +0,0 @@ - - - - - - Home Furniture - - - - - - - - - - -
    -
    -
    -
    - -
    -
    -

    Deal of the week: Living room accessories

    -

    Don't miss this deal of the week offer on DIVA sofa. Regular price, $529.99. Sale price, $399.99!!

    - -
    -
    - -
    -
    - -
    -
    -

    Deal of the week: Furniture

    -

    Hurry,one week only offer on the Raccoon bar stool. Sale price, $89.99.

    - -
    -
    - -
    -
    - -
    -
    -

    New lower prices

    -

    Shop our low prices from office essentials to storage.

    - -
    -
    -
    -
    - - - -
    -
    -
    -
    - -
    -
    -

    Delivery now starts at $59 from $79

    -

    Choose an arrival date range and have your purchases conveniently delivered to your front door for $59.

    - -
    -
    - -
    -
    - -
    -
    -

    New living room styles

    -

    By producing in high volumes with smarter designs, we can continue to offer affordable products for you.

    - -
    -
    - -
    -
    - -
    -
    -

    Spend more-Save more

    -

    If you are ready for a deal, this section is for you!

    - -
    -
    -
    -
    - -
    -
    -

    Best. Summer. Styles. Ever.

    -

    Everything good, everything magical, happens during summer! Make the most of your outside-time this summer, and shop our products at IKEY.

    -
    -
    - -
    - -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    - - -
    -
    -

    Popular categories

    -

    All the latest picked from our store

    -
    -
    -
    -
    - - - -
    -
    - Sofas - -
    -
    -
    -
    - - - -
    -
    - Beds & Mattresses - -
    -
    -
    -
    - - - -
    -
    - Bookcases - -
    -
    -
    -
    - - - -
    -
    - TV & Media Furniture - -
    -
    -
    -
    - - - -
    -
    - Dressers & Wardrobes - -
    -
    -
    -
    - - - -
    -
    - Tables & Desks - -
    -
    -
    -
    - - - -
    -
    - Cookware - -
    -
    -
    -
    - - - -
    -
    - Children & Nursery - -
    -
    -
    -
    - - - -
    -
    - Home Decor - -
    -
    -
    -
    - - - -
    -
    - Special offers - -
    -
    -
    -
    - - - - - - - - - - - - - - diff --git a/ecommerce/furniture_website/main.js b/ecommerce/furniture_website/main.js deleted file mode 100644 index 1083fe7..0000000 --- a/ecommerce/furniture_website/main.js +++ /dev/null @@ -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; -}); - - diff --git a/ecommerce/furniture_website/style.css b/ecommerce/furniture_website/style.css deleted file mode 100644 index dd863ee..0000000 --- a/ecommerce/furniture_website/style.css +++ /dev/null @@ -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; - } -} - - - - - diff --git a/ecommerce/furniture_website/swiper.js b/ecommerce/furniture_website/swiper.js deleted file mode 100644 index f86d5e6..0000000 --- a/ecommerce/furniture_website/swiper.js +++ /dev/null @@ -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(); -} \ No newline at end of file diff --git a/movie_app/css/style.css b/movie_app/css/style.css deleted file mode 100755 index cfe1479..0000000 --- a/movie_app/css/style.css +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/movie_app/css/swiper-bundle.min.css b/movie_app/css/swiper-bundle.min.css deleted file mode 100644 index 31c0532..0000000 --- a/movie_app/css/swiper-bundle.min.css +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Swiper 7.4.1 - * Most modern mobile touch slider and framework with hardware accelerated transitions - * https://swiperjs.com - * - * Copyright 2014-2021 Vladimir Kharlampidi - * - * Released under the MIT License - * - * Released on: December 24, 2021 - */ - -@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} diff --git a/movie_app/index.html b/movie_app/index.html deleted file mode 100755 index 3bd0e1b..0000000 --- a/movie_app/index.html +++ /dev/null @@ -1,281 +0,0 @@ - - - - - - MOVIEJTP - - - - - - -
    -
    - -
    - - -
    -
    - - - HOME - - - - TRENDING - - - - EXPLORE - - - - MOVIES - -
    -
    -
    - -
    - -
    -

    The Flash

    -

    Releasing April 4th

    - - - Watch the trailer - -
    -
    - - - -
    -
    -

    Movies

    -
    -
    - -
    - -
    -

    Top Gun: Maverick

    - Action/ Drama - - - -
    -
    - -
    - -
    -

    The Quick and the Dead

    - Action/ Romance/ Thriller/ Western - - - -
    -
    - -
    - -
    -

    LĆ©on: The Professional

    - Action/ Crime/ Drama/ Thrillerr - - - -
    -
    - -
    - -
    -

    Forrest Gump

    - Drama/ Romance - - - -
    -
    - -
    - -
    -

    Joker

    - Crime/ Drama/ Thriller - - - -
    -
    - -
    - -
    -

    All My Life

    - Drama/ Romance - - - -
    -
    - -
    - -
    -

    The Banker

    - Drama/ Biography - - - -
    -
    - -
    - -
    -

    The Imitation Game

    - Biography/ Drama/ Thriller/ War - - - -
    -
    -
    -
    - -
    - Next Page -
    - -
    -

    © MOVIEJTP All Rights Reserved

    -
    - - - - - \ No newline at end of file diff --git a/movie_app/js/script.js b/movie_app/js/script.js deleted file mode 100755 index 6c1f494..0000000 --- a/movie_app/js/script.js +++ /dev/null @@ -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(); -}; \ No newline at end of file diff --git a/movie_app/js/swiper-bundle-min.min.js b/movie_app/js/swiper-bundle-min.min.js deleted file mode 100644 index d6bdd22..0000000 --- a/movie_app/js/swiper-bundle-min.min.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Swiper 7.4.1 - * Most modern mobile touch slider and framework with hardware accelerated transitions - * https://swiperjs.com - * - * Copyright 2014-2021 Vladimir Kharlampidi - * - * Released under the MIT License - * - * Released on: December 24, 2021 - */ - -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Swiper=t()}(this,(function(){"use strict";function e(e){return null!==e&&"object"==typeof e&&"constructor"in e&&e.constructor===Object}function t(s={},a={}){Object.keys(a).forEach((i=>{void 0===s[i]?s[i]=a[i]:e(a[i])&&e(s[i])&&Object.keys(a[i]).length>0&&t(s[i],a[i])}))}const s={body:{},addEventListener(){},removeEventListener(){},activeElement:{blur(){},nodeName:""},querySelector:()=>null,querySelectorAll:()=>[],getElementById:()=>null,createEvent:()=>({initEvent(){}}),createElement:()=>({children:[],childNodes:[],style:{},setAttribute(){},getElementsByTagName:()=>[]}),createElementNS:()=>({}),importNode:()=>null,location:{hash:"",host:"",hostname:"",href:"",origin:"",pathname:"",protocol:"",search:""}};function a(){const e="undefined"!=typeof document?document:{};return t(e,s),e}const i={document:s,navigator:{userAgent:""},location:{hash:"",host:"",hostname:"",href:"",origin:"",pathname:"",protocol:"",search:""},history:{replaceState(){},pushState(){},go(){},back(){}},CustomEvent:function(){return this},addEventListener(){},removeEventListener(){},getComputedStyle:()=>({getPropertyValue:()=>""}),Image(){},Date(){},screen:{},setTimeout(){},clearTimeout(){},matchMedia:()=>({}),requestAnimationFrame:e=>"undefined"==typeof setTimeout?(e(),null):setTimeout(e,0),cancelAnimationFrame(e){"undefined"!=typeof setTimeout&&clearTimeout(e)}};function r(){const e="undefined"!=typeof window?window:{};return t(e,i),e}class n extends Array{constructor(e){super(...e||[]),function(e){const t=e.__proto__;Object.defineProperty(e,"__proto__",{get:()=>t,set(e){t.__proto__=e}})}(this)}}function l(e=[]){const t=[];return e.forEach((e=>{Array.isArray(e)?t.push(...l(e)):t.push(e)})),t}function o(e,t){return Array.prototype.filter.call(e,t)}function d(e,t){const s=r(),i=a();let l=[];if(!t&&e instanceof n)return e;if(!e)return new n(l);if("string"==typeof e){const s=e.trim();if(s.indexOf("<")>=0&&s.indexOf(">")>=0){let e="div";0===s.indexOf("e.split(" "))));return this.forEach((e=>{e.classList.add(...t)})),this},removeClass:function(...e){const t=l(e.map((e=>e.split(" "))));return this.forEach((e=>{e.classList.remove(...t)})),this},hasClass:function(...e){const t=l(e.map((e=>e.split(" "))));return o(this,(e=>t.filter((t=>e.classList.contains(t))).length>0)).length>0},toggleClass:function(...e){const t=l(e.map((e=>e.split(" "))));this.forEach((e=>{t.forEach((t=>{e.classList.toggle(t)}))}))},attr:function(e,t){if(1===arguments.length&&"string"==typeof e)return this[0]?this[0].getAttribute(e):void 0;for(let s=0;s=0;e-=1){const s=n[e];a&&s.listener===a||a&&s.listener&&s.listener.dom7proxy&&s.listener.dom7proxy===a?(r.removeEventListener(t,s.proxyListener,i),n.splice(e,1)):a||(r.removeEventListener(t,s.proxyListener,i),n.splice(e,1))}}}return this},trigger:function(...e){const t=r(),s=e[0].split(" "),a=e[1];for(let i=0;it>0)),i.dispatchEvent(s),i.dom7EventData=[],delete i.dom7EventData}}}return this},transitionEnd:function(e){const t=this;return e&&t.on("transitionend",(function s(a){a.target===this&&(e.call(this,a),t.off("transitionend",s))})),this},outerWidth:function(e){if(this.length>0){if(e){const e=this.styles();return this[0].offsetWidth+parseFloat(e.getPropertyValue("margin-right"))+parseFloat(e.getPropertyValue("margin-left"))}return this[0].offsetWidth}return null},outerHeight:function(e){if(this.length>0){if(e){const e=this.styles();return this[0].offsetHeight+parseFloat(e.getPropertyValue("margin-top"))+parseFloat(e.getPropertyValue("margin-bottom"))}return this[0].offsetHeight}return null},styles:function(){const e=r();return this[0]?e.getComputedStyle(this[0],null):{}},offset:function(){if(this.length>0){const e=r(),t=a(),s=this[0],i=s.getBoundingClientRect(),n=t.body,l=s.clientTop||n.clientTop||0,o=s.clientLeft||n.clientLeft||0,d=s===e?e.scrollY:s.scrollTop,p=s===e?e.scrollX:s.scrollLeft;return{top:i.top+d-l,left:i.left+p-o}}return null},css:function(e,t){const s=r();let a;if(1===arguments.length){if("string"!=typeof e){for(a=0;a{e.apply(t,[t,s])})),this):this},html:function(e){if(void 0===e)return this[0]?this[0].innerHTML:null;for(let t=0;tt-1)return d([]);if(e<0){const s=t+e;return d(s<0?[]:[this[s]])}return d([this[e]])},append:function(...e){let t;const s=a();for(let a=0;a=0;i-=1)this[s].insertBefore(a.childNodes[i],this[s].childNodes[0])}else if(e instanceof n)for(i=0;i0?e?this[0].nextElementSibling&&d(this[0].nextElementSibling).is(e)?d([this[0].nextElementSibling]):d([]):this[0].nextElementSibling?d([this[0].nextElementSibling]):d([]):d([])},nextAll:function(e){const t=[];let s=this[0];if(!s)return d([]);for(;s.nextElementSibling;){const a=s.nextElementSibling;e?d(a).is(e)&&t.push(a):t.push(a),s=a}return d(t)},prev:function(e){if(this.length>0){const t=this[0];return e?t.previousElementSibling&&d(t.previousElementSibling).is(e)?d([t.previousElementSibling]):d([]):t.previousElementSibling?d([t.previousElementSibling]):d([])}return d([])},prevAll:function(e){const t=[];let s=this[0];if(!s)return d([]);for(;s.previousElementSibling;){const a=s.previousElementSibling;e?d(a).is(e)&&t.push(a):t.push(a),s=a}return d(t)},parent:function(e){const t=[];for(let s=0;s6&&(i=i.split(", ").map((e=>e.replace(",","."))).join(", ")),n=new s.WebKitCSSMatrix("none"===i?"":i)):(n=l.MozTransform||l.OTransform||l.MsTransform||l.msTransform||l.transform||l.getPropertyValue("transform").replace("translate(","matrix(1, 0, 0, 1,"),a=n.toString().split(",")),"x"===t&&(i=s.WebKitCSSMatrix?n.m41:16===a.length?parseFloat(a[12]):parseFloat(a[4])),"y"===t&&(i=s.WebKitCSSMatrix?n.m42:16===a.length?parseFloat(a[13]):parseFloat(a[5])),i||0}function m(e){return"object"==typeof e&&null!==e&&e.constructor&&"Object"===Object.prototype.toString.call(e).slice(8,-1)}function f(...e){const t=Object(e[0]),s=["__proto__","constructor","prototype"];for(let i=1;is.indexOf(e)<0));for(let s=0,a=e.length;si?"next":"prev",p=(e,t)=>"next"===d&&e>=t||"prev"===d&&e<=t,c=()=>{n=(new Date).getTime(),null===l&&(l=n);const r=Math.max(Math.min((n-l)/o,1),0),d=.5-Math.cos(r*Math.PI)/2;let u=i+d*(t-i);if(p(u,t)&&(u=t),e.wrapperEl.scrollTo({[s]:u}),p(u,t))return e.wrapperEl.style.overflow="hidden",e.wrapperEl.style.scrollSnapType="",setTimeout((()=>{e.wrapperEl.style.overflow="",e.wrapperEl.scrollTo({[s]:u})})),void a.cancelAnimationFrame(e.cssModeFrameID);e.cssModeFrameID=a.requestAnimationFrame(c)};c()}let w,b,x;function y(){return w||(w=function(){const e=r(),t=a();return{smoothScroll:t.documentElement&&"scrollBehavior"in t.documentElement.style,touch:!!("ontouchstart"in e||e.DocumentTouch&&t instanceof e.DocumentTouch),passiveListener:function(){let t=!1;try{const s=Object.defineProperty({},"passive",{get(){t=!0}});e.addEventListener("testPassiveListener",null,s)}catch(e){}return t}(),gestures:"ongesturestart"in e}}()),w}function E(e={}){return b||(b=function({userAgent:e}={}){const t=y(),s=r(),a=s.navigator.platform,i=e||s.navigator.userAgent,n={ios:!1,android:!1},l=s.screen.width,o=s.screen.height,d=i.match(/(Android);?[\s\/]+([\d.]+)?/);let p=i.match(/(iPad).*OS\s([\d_]+)/);const c=i.match(/(iPod)(.*OS\s([\d_]+))?/),u=!p&&i.match(/(iPhone\sOS|iOS)\s([\d_]+)/),h="Win32"===a;let m="MacIntel"===a;return!p&&m&&t.touch&&["1024x1366","1366x1024","834x1194","1194x834","834x1112","1112x834","768x1024","1024x768","820x1180","1180x820","810x1080","1080x810"].indexOf(`${l}x${o}`)>=0&&(p=i.match(/(Version)\/([\d.]+)/),p||(p=[0,1,"13_0_0"]),m=!1),d&&!h&&(n.os="android",n.android=!0),(p||u||c)&&(n.os="ios",n.ios=!0),n}(e)),b}function T(){return x||(x=function(){const e=r();return{isSafari:function(){const t=e.navigator.userAgent.toLowerCase();return t.indexOf("safari")>=0&&t.indexOf("chrome")<0&&t.indexOf("android")<0}(),isWebView:/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(e.navigator.userAgent)}}()),x}Object.keys(p).forEach((e=>{Object.defineProperty(d.fn,e,{value:p[e],writable:!0})}));var C={on(e,t,s){const a=this;if("function"!=typeof t)return a;const i=s?"unshift":"push";return e.split(" ").forEach((e=>{a.eventsListeners[e]||(a.eventsListeners[e]=[]),a.eventsListeners[e][i](t)})),a},once(e,t,s){const a=this;if("function"!=typeof t)return a;function i(...s){a.off(e,i),i.__emitterProxy&&delete i.__emitterProxy,t.apply(a,s)}return i.__emitterProxy=t,a.on(e,i,s)},onAny(e,t){const s=this;if("function"!=typeof e)return s;const a=t?"unshift":"push";return s.eventsAnyListeners.indexOf(e)<0&&s.eventsAnyListeners[a](e),s},offAny(e){const t=this;if(!t.eventsAnyListeners)return t;const s=t.eventsAnyListeners.indexOf(e);return s>=0&&t.eventsAnyListeners.splice(s,1),t},off(e,t){const s=this;return s.eventsListeners?(e.split(" ").forEach((e=>{void 0===t?s.eventsListeners[e]=[]:s.eventsListeners[e]&&s.eventsListeners[e].forEach(((a,i)=>{(a===t||a.__emitterProxy&&a.__emitterProxy===t)&&s.eventsListeners[e].splice(i,1)}))})),s):s},emit(...e){const t=this;if(!t.eventsListeners)return t;let s,a,i;"string"==typeof e[0]||Array.isArray(e[0])?(s=e[0],a=e.slice(1,e.length),i=t):(s=e[0].events,a=e[0].data,i=e[0].context||t),a.unshift(i);return(Array.isArray(s)?s:s.split(" ")).forEach((e=>{t.eventsAnyListeners&&t.eventsAnyListeners.length&&t.eventsAnyListeners.forEach((t=>{t.apply(i,[e,...a])})),t.eventsListeners&&t.eventsListeners[e]&&t.eventsListeners[e].forEach((e=>{e.apply(i,a)}))})),t}};function $({swiper:e,runCallbacks:t,direction:s,step:a}){const{activeIndex:i,previousIndex:r}=e;let n=s;if(n||(n=i>r?"next":i0)return;if(n.isTouched&&n.isMoved)return;!!l.noSwipingClass&&""!==l.noSwipingClass&&c.target&&c.target.shadowRoot&&e.path&&e.path[0]&&(h=d(e.path[0]));const m=l.noSwipingSelector?l.noSwipingSelector:`.${l.noSwipingClass}`,f=!(!c.target||!c.target.shadowRoot);if(l.noSwiping&&(f?function(e,t=this){return function t(s){return s&&s!==a()&&s!==r()?(s.assignedSlot&&(s=s.assignedSlot),s.closest(e)||t(s.getRootNode().host)):null}(t)}(m,c.target):h.closest(m)[0]))return void(t.allowClick=!0);if(l.swipeHandler&&!h.closest(l.swipeHandler)[0])return;o.currentX="touchstart"===c.type?c.targetTouches[0].pageX:c.pageX,o.currentY="touchstart"===c.type?c.targetTouches[0].pageY:c.pageY;const g=o.currentX,v=o.currentY,w=l.edgeSwipeDetection||l.iOSEdgeSwipeDetection,b=l.edgeSwipeThreshold||l.iOSEdgeSwipeThreshold;if(w&&(g<=b||g>=i.innerWidth-b)){if("prevent"!==w)return;e.preventDefault()}if(Object.assign(n,{isTouched:!0,isMoved:!1,allowTouchCallbacks:!0,isScrolling:void 0,startMoving:void 0}),o.startX=g,o.startY=v,n.touchStartTime=u(),t.allowClick=!0,t.updateSize(),t.swipeDirection=void 0,l.threshold>0&&(n.allowThresholdMove=!1),"touchstart"!==c.type){let e=!0;h.is(n.focusableElements)&&(e=!1),s.activeElement&&d(s.activeElement).is(n.focusableElements)&&s.activeElement!==h[0]&&s.activeElement.blur();const a=e&&t.allowTouchMove&&l.touchStartPreventDefault;!l.touchStartForcePreventDefault&&!a||h[0].isContentEditable||c.preventDefault()}t.emit("touchStart",c)}function M(e){const t=a(),s=this,i=s.touchEventsData,{params:r,touches:n,rtlTranslate:l,enabled:o}=s;if(!o)return;let p=e;if(p.originalEvent&&(p=p.originalEvent),!i.isTouched)return void(i.startMoving&&i.isScrolling&&s.emit("touchMoveOpposite",p));if(i.isTouchEvent&&"touchmove"!==p.type)return;const c="touchmove"===p.type&&p.targetTouches&&(p.targetTouches[0]||p.changedTouches[0]),h="touchmove"===p.type?c.pageX:p.pageX,m="touchmove"===p.type?c.pageY:p.pageY;if(p.preventedByNestedSwiper)return n.startX=h,void(n.startY=m);if(!s.allowTouchMove)return s.allowClick=!1,void(i.isTouched&&(Object.assign(n,{startX:h,startY:m,currentX:h,currentY:m}),i.touchStartTime=u()));if(i.isTouchEvent&&r.touchReleaseOnEdges&&!r.loop)if(s.isVertical()){if(mn.startY&&s.translate>=s.minTranslate())return i.isTouched=!1,void(i.isMoved=!1)}else if(hn.startX&&s.translate>=s.minTranslate())return;if(i.isTouchEvent&&t.activeElement&&p.target===t.activeElement&&d(p.target).is(i.focusableElements))return i.isMoved=!0,void(s.allowClick=!1);if(i.allowTouchCallbacks&&s.emit("touchMove",p),p.targetTouches&&p.targetTouches.length>1)return;n.currentX=h,n.currentY=m;const f=n.currentX-n.startX,g=n.currentY-n.startY;if(s.params.threshold&&Math.sqrt(f**2+g**2)=25&&(e=180*Math.atan2(Math.abs(g),Math.abs(f))/Math.PI,i.isScrolling=s.isHorizontal()?e>r.touchAngle:90-e>r.touchAngle)}if(i.isScrolling&&s.emit("touchMoveOpposite",p),void 0===i.startMoving&&(n.currentX===n.startX&&n.currentY===n.startY||(i.startMoving=!0)),i.isScrolling)return void(i.isTouched=!1);if(!i.startMoving)return;s.allowClick=!1,!r.cssMode&&p.cancelable&&p.preventDefault(),r.touchMoveStopPropagation&&!r.nested&&p.stopPropagation(),i.isMoved||(r.loop&&!r.cssMode&&s.loopFix(),i.startTranslate=s.getTranslate(),s.setTransition(0),s.animating&&s.$wrapperEl.trigger("webkitTransitionEnd transitionend"),i.allowMomentumBounce=!1,!r.grabCursor||!0!==s.allowSlideNext&&!0!==s.allowSlidePrev||s.setGrabCursor(!0),s.emit("sliderFirstMove",p)),s.emit("sliderMove",p),i.isMoved=!0;let v=s.isHorizontal()?f:g;n.diff=v,v*=r.touchRatio,l&&(v=-v),s.swipeDirection=v>0?"prev":"next",i.currentTranslate=v+i.startTranslate;let w=!0,b=r.resistanceRatio;if(r.touchReleaseOnEdges&&(b=0),v>0&&i.currentTranslate>s.minTranslate()?(w=!1,r.resistance&&(i.currentTranslate=s.minTranslate()-1+(-s.minTranslate()+i.startTranslate+v)**b)):v<0&&i.currentTranslatei.startTranslate&&(i.currentTranslate=i.startTranslate),s.allowSlidePrev||s.allowSlideNext||(i.currentTranslate=i.startTranslate),r.threshold>0){if(!(Math.abs(v)>r.threshold||i.allowThresholdMove))return void(i.currentTranslate=i.startTranslate);if(!i.allowThresholdMove)return i.allowThresholdMove=!0,n.startX=n.currentX,n.startY=n.currentY,i.currentTranslate=i.startTranslate,void(n.diff=s.isHorizontal()?n.currentX-n.startX:n.currentY-n.startY)}r.followFinger&&!r.cssMode&&((r.freeMode&&r.freeMode.enabled&&s.freeMode||r.watchSlidesProgress)&&(s.updateActiveIndex(),s.updateSlidesClasses()),s.params.freeMode&&r.freeMode.enabled&&s.freeMode&&s.freeMode.onTouchMove(),s.updateProgress(i.currentTranslate),s.setTranslate(i.currentTranslate))}function P(e){const t=this,s=t.touchEventsData,{params:a,touches:i,rtlTranslate:r,slidesGrid:n,enabled:l}=t;if(!l)return;let o=e;if(o.originalEvent&&(o=o.originalEvent),s.allowTouchCallbacks&&t.emit("touchEnd",o),s.allowTouchCallbacks=!1,!s.isTouched)return s.isMoved&&a.grabCursor&&t.setGrabCursor(!1),s.isMoved=!1,void(s.startMoving=!1);a.grabCursor&&s.isMoved&&s.isTouched&&(!0===t.allowSlideNext||!0===t.allowSlidePrev)&&t.setGrabCursor(!1);const d=u(),p=d-s.touchStartTime;if(t.allowClick){const e=o.path||o.composedPath&&o.composedPath();t.updateClickedSlide(e&&e[0]||o.target),t.emit("tap click",o),p<300&&d-s.lastClickTime<300&&t.emit("doubleTap doubleClick",o)}if(s.lastClickTime=u(),c((()=>{t.destroyed||(t.allowClick=!0)})),!s.isTouched||!s.isMoved||!t.swipeDirection||0===i.diff||s.currentTranslate===s.startTranslate)return s.isTouched=!1,s.isMoved=!1,void(s.startMoving=!1);let h;if(s.isTouched=!1,s.isMoved=!1,s.startMoving=!1,h=a.followFinger?r?t.translate:-t.translate:-s.currentTranslate,a.cssMode)return;if(t.params.freeMode&&a.freeMode.enabled)return void t.freeMode.onTouchEnd({currentPos:h});let m=0,f=t.slidesSizesGrid[0];for(let e=0;e=n[e]&&h=n[e]&&(m=e,f=n[n.length-1]-n[n.length-2])}const g=(h-n[m])/f,v=ma.longSwipesMs){if(!a.longSwipes)return void t.slideTo(t.activeIndex);"next"===t.swipeDirection&&(g>=a.longSwipesRatio?t.slideTo(m+v):t.slideTo(m)),"prev"===t.swipeDirection&&(g>1-a.longSwipesRatio?t.slideTo(m+v):t.slideTo(m))}else{if(!a.shortSwipes)return void t.slideTo(t.activeIndex);t.navigation&&(o.target===t.navigation.nextEl||o.target===t.navigation.prevEl)?o.target===t.navigation.nextEl?t.slideTo(m+v):t.slideTo(m):("next"===t.swipeDirection&&t.slideTo(m+v),"prev"===t.swipeDirection&&t.slideTo(m))}}function k(){const e=this,{params:t,el:s}=e;if(s&&0===s.offsetWidth)return;t.breakpoints&&e.setBreakpoint();const{allowSlideNext:a,allowSlidePrev:i,snapGrid:r}=e;e.allowSlideNext=!0,e.allowSlidePrev=!0,e.updateSize(),e.updateSlides(),e.updateSlidesClasses(),("auto"===t.slidesPerView||t.slidesPerView>1)&&e.isEnd&&!e.isBeginning&&!e.params.centeredSlides?e.slideTo(e.slides.length-1,0,!1,!0):e.slideTo(e.activeIndex,0,!1,!0),e.autoplay&&e.autoplay.running&&e.autoplay.paused&&e.autoplay.run(),e.allowSlidePrev=i,e.allowSlideNext=a,e.params.watchOverflow&&r!==e.snapGrid&&e.checkOverflow()}function z(e){const t=this;t.enabled&&(t.allowClick||(t.params.preventClicks&&e.preventDefault(),t.params.preventClicksPropagation&&t.animating&&(e.stopPropagation(),e.stopImmediatePropagation())))}function O(){const e=this,{wrapperEl:t,rtlTranslate:s,enabled:a}=e;if(!a)return;let i;e.previousTranslate=e.translate,e.isHorizontal()?e.translate=-t.scrollLeft:e.translate=-t.scrollTop,-0===e.translate&&(e.translate=0),e.updateActiveIndex(),e.updateSlidesClasses();const r=e.maxTranslate()-e.minTranslate();i=0===r?0:(e.translate-e.minTranslate())/r,i!==e.progress&&e.updateProgress(s?-e.translate:e.translate),e.emit("setTranslate",e.translate,!1)}let I=!1;function L(){}const A=(e,t)=>{const s=a(),{params:i,touchEvents:r,el:n,wrapperEl:l,device:o,support:d}=e,p=!!i.nested,c="on"===t?"addEventListener":"removeEventListener",u=t;if(d.touch){const t=!("touchstart"!==r.start||!d.passiveListener||!i.passiveListeners)&&{passive:!0,capture:!1};n[c](r.start,e.onTouchStart,t),n[c](r.move,e.onTouchMove,d.passiveListener?{passive:!1,capture:p}:p),n[c](r.end,e.onTouchEnd,t),r.cancel&&n[c](r.cancel,e.onTouchEnd,t)}else n[c](r.start,e.onTouchStart,!1),s[c](r.move,e.onTouchMove,p),s[c](r.end,e.onTouchEnd,!1);(i.preventClicks||i.preventClicksPropagation)&&n[c]("click",e.onClick,!0),i.cssMode&&l[c]("scroll",e.onScroll),i.updateOnWindowResize?e[u](o.ios||o.android?"resize orientationchange observerUpdate":"resize observerUpdate",k,!0):e[u]("observerUpdate",k,!0)};const D=(e,t)=>e.grid&&t.grid&&t.grid.rows>1;var G={init:!0,direction:"horizontal",touchEventsTarget:"wrapper",initialSlide:0,speed:300,cssMode:!1,updateOnWindowResize:!0,resizeObserver:!0,nested:!1,createElements:!1,enabled:!0,focusableElements:"input, select, option, textarea, button, video, label",width:null,height:null,preventInteractionOnTransition:!1,userAgent:null,url:null,edgeSwipeDetection:!1,edgeSwipeThreshold:20,autoHeight:!1,setWrapperSize:!1,virtualTranslate:!1,effect:"slide",breakpoints:void 0,breakpointsBase:"window",spaceBetween:0,slidesPerView:1,slidesPerGroup:1,slidesPerGroupSkip:0,slidesPerGroupAuto:!1,centeredSlides:!1,centeredSlidesBounds:!1,slidesOffsetBefore:0,slidesOffsetAfter:0,normalizeSlideIndex:!0,centerInsufficientSlides:!1,watchOverflow:!0,roundLengths:!1,touchRatio:1,touchAngle:45,simulateTouch:!0,shortSwipes:!0,longSwipes:!0,longSwipesRatio:.5,longSwipesMs:300,followFinger:!0,allowTouchMove:!0,threshold:0,touchMoveStopPropagation:!1,touchStartPreventDefault:!0,touchStartForcePreventDefault:!1,touchReleaseOnEdges:!1,uniqueNavElements:!0,resistance:!0,resistanceRatio:.85,watchSlidesProgress:!1,grabCursor:!1,preventClicks:!0,preventClicksPropagation:!0,slideToClickedSlide:!1,preloadImages:!0,updateOnImagesReady:!0,loop:!1,loopAdditionalSlides:0,loopedSlides:null,loopFillGroupWithBlank:!1,loopPreventsSlide:!0,rewind:!1,allowSlidePrev:!0,allowSlideNext:!0,swipeHandler:null,noSwiping:!0,noSwipingClass:"swiper-no-swiping",noSwipingSelector:null,passiveListeners:!0,containerModifierClass:"swiper-",slideClass:"swiper-slide",slideBlankClass:"swiper-slide-invisible-blank",slideActiveClass:"swiper-slide-active",slideDuplicateActiveClass:"swiper-slide-duplicate-active",slideVisibleClass:"swiper-slide-visible",slideDuplicateClass:"swiper-slide-duplicate",slideNextClass:"swiper-slide-next",slideDuplicateNextClass:"swiper-slide-duplicate-next",slidePrevClass:"swiper-slide-prev",slideDuplicatePrevClass:"swiper-slide-duplicate-prev",wrapperClass:"swiper-wrapper",runCallbacksOnInit:!0,_emitClasses:!1};function N(e,t){return function(s={}){const a=Object.keys(s)[0],i=s[a];"object"==typeof i&&null!==i?(["navigation","pagination","scrollbar"].indexOf(a)>=0&&!0===e[a]&&(e[a]={auto:!0}),a in e&&"enabled"in i?(!0===e[a]&&(e[a]={enabled:!0}),"object"!=typeof e[a]||"enabled"in e[a]||(e[a].enabled=!0),e[a]||(e[a]={enabled:!1}),f(t,s)):f(t,s)):f(t,s)}}const B={eventsEmitter:C,update:{updateSize:function(){const e=this;let t,s;const a=e.$el;t=void 0!==e.params.width&&null!==e.params.width?e.params.width:a[0].clientWidth,s=void 0!==e.params.height&&null!==e.params.height?e.params.height:a[0].clientHeight,0===t&&e.isHorizontal()||0===s&&e.isVertical()||(t=t-parseInt(a.css("padding-left")||0,10)-parseInt(a.css("padding-right")||0,10),s=s-parseInt(a.css("padding-top")||0,10)-parseInt(a.css("padding-bottom")||0,10),Number.isNaN(t)&&(t=0),Number.isNaN(s)&&(s=0),Object.assign(e,{width:t,height:s,size:e.isHorizontal()?t:s}))},updateSlides:function(){const e=this;function t(t){return e.isHorizontal()?t:{width:"height","margin-top":"margin-left","margin-bottom ":"margin-right","margin-left":"margin-top","margin-right":"margin-bottom","padding-left":"padding-top","padding-right":"padding-bottom",marginRight:"marginBottom"}[t]}function s(e,s){return parseFloat(e.getPropertyValue(t(s))||0)}const a=e.params,{$wrapperEl:i,size:r,rtlTranslate:n,wrongRTL:l}=e,o=e.virtual&&a.virtual.enabled,d=o?e.virtual.slides.length:e.slides.length,p=i.children(`.${e.params.slideClass}`),c=o?e.virtual.slides.length:p.length;let u=[];const h=[],m=[];let f=a.slidesOffsetBefore;"function"==typeof f&&(f=a.slidesOffsetBefore.call(e));let v=a.slidesOffsetAfter;"function"==typeof v&&(v=a.slidesOffsetAfter.call(e));const w=e.snapGrid.length,b=e.slidesGrid.length;let x=a.spaceBetween,y=-f,E=0,T=0;if(void 0===r)return;"string"==typeof x&&x.indexOf("%")>=0&&(x=parseFloat(x.replace("%",""))/100*r),e.virtualSize=-x,n?p.css({marginLeft:"",marginBottom:"",marginTop:""}):p.css({marginRight:"",marginBottom:"",marginTop:""}),a.centeredSlides&&a.cssMode&&(g(e.wrapperEl,"--swiper-centered-offset-before",""),g(e.wrapperEl,"--swiper-centered-offset-after",""));const C=a.grid&&a.grid.rows>1&&e.grid;let $;C&&e.grid.initSlides(c);const S="auto"===a.slidesPerView&&a.breakpoints&&Object.keys(a.breakpoints).filter((e=>void 0!==a.breakpoints[e].slidesPerView)).length>0;for(let i=0;i1&&u.push(e.virtualSize-r)}if(0===u.length&&(u=[0]),0!==a.spaceBetween){const s=e.isHorizontal()&&n?"marginLeft":t("marginRight");p.filter(((e,t)=>!a.cssMode||t!==p.length-1)).css({[s]:`${x}px`})}if(a.centeredSlides&&a.centeredSlidesBounds){let e=0;m.forEach((t=>{e+=t+(a.spaceBetween?a.spaceBetween:0)})),e-=a.spaceBetween;const t=e-r;u=u.map((e=>e<0?-f:e>t?t+v:e))}if(a.centerInsufficientSlides){let e=0;if(m.forEach((t=>{e+=t+(a.spaceBetween?a.spaceBetween:0)})),e-=a.spaceBetween,e{u[s]=e-t})),h.forEach(((e,s)=>{h[s]=e+t}))}}if(Object.assign(e,{slides:p,snapGrid:u,slidesGrid:h,slidesSizesGrid:m}),a.centeredSlides&&a.cssMode&&!a.centeredSlidesBounds){g(e.wrapperEl,"--swiper-centered-offset-before",-u[0]+"px"),g(e.wrapperEl,"--swiper-centered-offset-after",e.size/2-m[m.length-1]/2+"px");const t=-e.snapGrid[0],s=-e.slidesGrid[0];e.snapGrid=e.snapGrid.map((e=>e+t)),e.slidesGrid=e.slidesGrid.map((e=>e+s))}c!==d&&e.emit("slidesLengthChange"),u.length!==w&&(e.params.watchOverflow&&e.checkOverflow(),e.emit("snapGridLengthChange")),h.length!==b&&e.emit("slidesGridLengthChange"),a.watchSlidesProgress&&e.updateSlidesOffset()},updateAutoHeight:function(e){const t=this,s=[],a=t.virtual&&t.params.virtual.enabled;let i,r=0;"number"==typeof e?t.setTransition(e):!0===e&&t.setTransition(t.params.speed);const n=e=>a?t.slides.filter((t=>parseInt(t.getAttribute("data-swiper-slide-index"),10)===e))[0]:t.slides.eq(e)[0];if("auto"!==t.params.slidesPerView&&t.params.slidesPerView>1)if(t.params.centeredSlides)t.visibleSlides.each((e=>{s.push(e)}));else for(i=0;it.slides.length&&!a)break;s.push(n(e))}else s.push(n(t.activeIndex));for(i=0;ir?e:r}(r||0===r)&&t.$wrapperEl.css("height",`${r}px`)},updateSlidesOffset:function(){const e=this,t=e.slides;for(let s=0;s=0&&c1&&u<=t.size||c<=0&&u>=t.size)&&(t.visibleSlides.push(l),t.visibleSlidesIndexes.push(e),a.eq(e).addClass(s.slideVisibleClass)),l.progress=i?-d:d,l.originalProgress=i?-p:p}t.visibleSlides=d(t.visibleSlides)},updateProgress:function(e){const t=this;if(void 0===e){const s=t.rtlTranslate?-1:1;e=t&&t.translate&&t.translate*s||0}const s=t.params,a=t.maxTranslate()-t.minTranslate();let{progress:i,isBeginning:r,isEnd:n}=t;const l=r,o=n;0===a?(i=0,r=!0,n=!0):(i=(e-t.minTranslate())/a,r=i<=0,n=i>=1),Object.assign(t,{progress:i,isBeginning:r,isEnd:n}),(s.watchSlidesProgress||s.centeredSlides&&s.autoHeight)&&t.updateSlidesProgress(e),r&&!l&&t.emit("reachBeginning toEdge"),n&&!o&&t.emit("reachEnd toEdge"),(l&&!r||o&&!n)&&t.emit("fromEdge"),t.emit("progress",i)},updateSlidesClasses:function(){const e=this,{slides:t,params:s,$wrapperEl:a,activeIndex:i,realIndex:r}=e,n=e.virtual&&s.virtual.enabled;let l;t.removeClass(`${s.slideActiveClass} ${s.slideNextClass} ${s.slidePrevClass} ${s.slideDuplicateActiveClass} ${s.slideDuplicateNextClass} ${s.slideDuplicatePrevClass}`),l=n?e.$wrapperEl.find(`.${s.slideClass}[data-swiper-slide-index="${i}"]`):t.eq(i),l.addClass(s.slideActiveClass),s.loop&&(l.hasClass(s.slideDuplicateClass)?a.children(`.${s.slideClass}:not(.${s.slideDuplicateClass})[data-swiper-slide-index="${r}"]`).addClass(s.slideDuplicateActiveClass):a.children(`.${s.slideClass}.${s.slideDuplicateClass}[data-swiper-slide-index="${r}"]`).addClass(s.slideDuplicateActiveClass));let o=l.nextAll(`.${s.slideClass}`).eq(0).addClass(s.slideNextClass);s.loop&&0===o.length&&(o=t.eq(0),o.addClass(s.slideNextClass));let d=l.prevAll(`.${s.slideClass}`).eq(0).addClass(s.slidePrevClass);s.loop&&0===d.length&&(d=t.eq(-1),d.addClass(s.slidePrevClass)),s.loop&&(o.hasClass(s.slideDuplicateClass)?a.children(`.${s.slideClass}:not(.${s.slideDuplicateClass})[data-swiper-slide-index="${o.attr("data-swiper-slide-index")}"]`).addClass(s.slideDuplicateNextClass):a.children(`.${s.slideClass}.${s.slideDuplicateClass}[data-swiper-slide-index="${o.attr("data-swiper-slide-index")}"]`).addClass(s.slideDuplicateNextClass),d.hasClass(s.slideDuplicateClass)?a.children(`.${s.slideClass}:not(.${s.slideDuplicateClass})[data-swiper-slide-index="${d.attr("data-swiper-slide-index")}"]`).addClass(s.slideDuplicatePrevClass):a.children(`.${s.slideClass}.${s.slideDuplicateClass}[data-swiper-slide-index="${d.attr("data-swiper-slide-index")}"]`).addClass(s.slideDuplicatePrevClass)),e.emitSlidesClasses()},updateActiveIndex:function(e){const t=this,s=t.rtlTranslate?t.translate:-t.translate,{slidesGrid:a,snapGrid:i,params:r,activeIndex:n,realIndex:l,snapIndex:o}=t;let d,p=e;if(void 0===p){for(let e=0;e=a[e]&&s=a[e]&&s=a[e]&&(p=e);r.normalizeSlideIndex&&(p<0||void 0===p)&&(p=0)}if(i.indexOf(s)>=0)d=i.indexOf(s);else{const e=Math.min(r.slidesPerGroupSkip,p);d=e+Math.floor((p-e)/r.slidesPerGroup)}if(d>=i.length&&(d=i.length-1),p===n)return void(d!==o&&(t.snapIndex=d,t.emit("snapIndexChange")));const c=parseInt(t.slides.eq(p).attr("data-swiper-slide-index")||p,10);Object.assign(t,{snapIndex:d,realIndex:c,previousIndex:n,activeIndex:p}),t.emit("activeIndexChange"),t.emit("snapIndexChange"),l!==c&&t.emit("realIndexChange"),(t.initialized||t.params.runCallbacksOnInit)&&t.emit("slideChange")},updateClickedSlide:function(e){const t=this,s=t.params,a=d(e).closest(`.${s.slideClass}`)[0];let i,r=!1;if(a)for(let e=0;eo?o:a&&e=o.length&&(g=o.length-1),(c||l.initialSlide||0)===(p||0)&&s&&r.emit("beforeSlideChangeStart");const w=-o[g];if(r.updateProgress(w),l.normalizeSlideIndex)for(let e=0;e=s&&t=s&&t=s&&(n=e)}if(r.initialized&&n!==c){if(!r.allowSlideNext&&wr.translate&&w>r.maxTranslate()&&(c||0)!==n)return!1}let b;if(b=n>c?"next":n{r.wrapperEl.style.scrollSnapType="",r._swiperImmediateVirtual=!1}))}else{if(!r.support.smoothScroll)return v({swiper:r,targetPosition:s,side:e?"left":"top"}),!0;h.scrollTo({[e?"left":"top"]:s,behavior:"smooth"})}return!0}return r.setTransition(t),r.setTranslate(w),r.updateActiveIndex(n),r.updateSlidesClasses(),r.emit("beforeTransitionStart",t,a),r.transitionStart(s,b),0===t?r.transitionEnd(s,b):r.animating||(r.animating=!0,r.onSlideToWrapperTransitionEnd||(r.onSlideToWrapperTransitionEnd=function(e){r&&!r.destroyed&&e.target===this&&(r.$wrapperEl[0].removeEventListener("transitionend",r.onSlideToWrapperTransitionEnd),r.$wrapperEl[0].removeEventListener("webkitTransitionEnd",r.onSlideToWrapperTransitionEnd),r.onSlideToWrapperTransitionEnd=null,delete r.onSlideToWrapperTransitionEnd,r.transitionEnd(s,b))}),r.$wrapperEl[0].addEventListener("transitionend",r.onSlideToWrapperTransitionEnd),r.$wrapperEl[0].addEventListener("webkitTransitionEnd",r.onSlideToWrapperTransitionEnd)),!0},slideToLoop:function(e=0,t=this.params.speed,s=!0,a){const i=this;let r=e;return i.params.loop&&(r+=i.loopedSlides),i.slideTo(r,t,s,a)},slideNext:function(e=this.params.speed,t=!0,s){const a=this,{animating:i,enabled:r,params:n}=a;if(!r)return a;let l=n.slidesPerGroup;"auto"===n.slidesPerView&&1===n.slidesPerGroup&&n.slidesPerGroupAuto&&(l=Math.max(a.slidesPerViewDynamic("current",!0),1));const o=a.activeIndexp(e)));let h=n[u.indexOf(c)-1];if(void 0===h&&i.cssMode){let e;n.forEach(((t,s)=>{c>=t&&(e=s)})),void 0!==e&&(h=n[e>0?e-1:e])}let m=0;return void 0!==h&&(m=l.indexOf(h),m<0&&(m=a.activeIndex-1),"auto"===i.slidesPerView&&1===i.slidesPerGroup&&i.slidesPerGroupAuto&&(m=m-a.slidesPerViewDynamic("previous",!0)+1,m=Math.max(m,0))),i.rewind&&a.isBeginning?a.slideTo(a.slides.length-1,e,t,s):a.slideTo(m,e,t,s)},slideReset:function(e=this.params.speed,t=!0,s){return this.slideTo(this.activeIndex,e,t,s)},slideToClosest:function(e=this.params.speed,t=!0,s,a=.5){const i=this;let r=i.activeIndex;const n=Math.min(i.params.slidesPerGroupSkip,r),l=n+Math.floor((r-n)/i.params.slidesPerGroup),o=i.rtlTranslate?i.translate:-i.translate;if(o>=i.snapGrid[l]){const e=i.snapGrid[l];o-e>(i.snapGrid[l+1]-e)*a&&(r+=i.params.slidesPerGroup)}else{const e=i.snapGrid[l-1];o-e<=(i.snapGrid[l]-e)*a&&(r-=i.params.slidesPerGroup)}return r=Math.max(r,0),r=Math.min(r,i.slidesGrid.length-1),i.slideTo(r,e,t,s)},slideToClickedSlide:function(){const e=this,{params:t,$wrapperEl:s}=e,a="auto"===t.slidesPerView?e.slidesPerViewDynamic():t.slidesPerView;let i,r=e.clickedIndex;if(t.loop){if(e.animating)return;i=parseInt(d(e.clickedSlide).attr("data-swiper-slide-index"),10),t.centeredSlides?re.slides.length-e.loopedSlides+a/2?(e.loopFix(),r=s.children(`.${t.slideClass}[data-swiper-slide-index="${i}"]:not(.${t.slideDuplicateClass})`).eq(0).index(),c((()=>{e.slideTo(r)}))):e.slideTo(r):r>e.slides.length-a?(e.loopFix(),r=s.children(`.${t.slideClass}[data-swiper-slide-index="${i}"]:not(.${t.slideDuplicateClass})`).eq(0).index(),c((()=>{e.slideTo(r)}))):e.slideTo(r)}else e.slideTo(r)}},loop:{loopCreate:function(){const e=this,t=a(),{params:s,$wrapperEl:i}=e,r=i.children().length>0?d(i.children()[0].parentNode):i;r.children(`.${s.slideClass}.${s.slideDuplicateClass}`).remove();let n=r.children(`.${s.slideClass}`);if(s.loopFillGroupWithBlank){const e=s.slidesPerGroup-n.length%s.slidesPerGroup;if(e!==s.slidesPerGroup){for(let a=0;an.length&&(e.loopedSlides=n.length);const l=[],o=[];n.each(((t,s)=>{const a=d(t);s=n.length-e.loopedSlides&&l.push(t),a.attr("data-swiper-slide-index",s)}));for(let e=0;e=0;e-=1)r.prepend(d(l[e].cloneNode(!0)).addClass(s.slideDuplicateClass))},loopFix:function(){const e=this;e.emit("beforeLoopFix");const{activeIndex:t,slides:s,loopedSlides:a,allowSlidePrev:i,allowSlideNext:r,snapGrid:n,rtlTranslate:l}=e;let o;e.allowSlidePrev=!0,e.allowSlideNext=!0;const d=-n[t]-e.getTranslate();if(t=s.length-a){o=-s.length+t+a,o+=a;e.slideTo(o,0,!1,!0)&&0!==d&&e.setTranslate((l?-e.translate:e.translate)-d)}e.allowSlidePrev=i,e.allowSlideNext=r,e.emit("loopFix")},loopDestroy:function(){const{$wrapperEl:e,params:t,slides:s}=this;e.children(`.${t.slideClass}.${t.slideDuplicateClass},.${t.slideClass}.${t.slideBlankClass}`).remove(),s.removeAttr("data-swiper-slide-index")}},grabCursor:{setGrabCursor:function(e){const t=this;if(t.support.touch||!t.params.simulateTouch||t.params.watchOverflow&&t.isLocked||t.params.cssMode)return;const s="container"===t.params.touchEventsTarget?t.el:t.wrapperEl;s.style.cursor="move",s.style.cursor=e?"-webkit-grabbing":"-webkit-grab",s.style.cursor=e?"-moz-grabbin":"-moz-grab",s.style.cursor=e?"grabbing":"grab"},unsetGrabCursor:function(){const e=this;e.support.touch||e.params.watchOverflow&&e.isLocked||e.params.cssMode||(e["container"===e.params.touchEventsTarget?"el":"wrapperEl"].style.cursor="")}},events:{attachEvents:function(){const e=this,t=a(),{params:s,support:i}=e;e.onTouchStart=S.bind(e),e.onTouchMove=M.bind(e),e.onTouchEnd=P.bind(e),s.cssMode&&(e.onScroll=O.bind(e)),e.onClick=z.bind(e),i.touch&&!I&&(t.addEventListener("touchstart",L),I=!0),A(e,"on")},detachEvents:function(){A(this,"off")}},breakpoints:{setBreakpoint:function(){const e=this,{activeIndex:t,initialized:s,loopedSlides:a=0,params:i,$el:r}=e,n=i.breakpoints;if(!n||n&&0===Object.keys(n).length)return;const l=e.getBreakpoint(n,e.params.breakpointsBase,e.el);if(!l||e.currentBreakpoint===l)return;const o=(l in n?n[l]:void 0)||e.originalParams,d=D(e,i),p=D(e,o),c=i.enabled;d&&!p?(r.removeClass(`${i.containerModifierClass}grid ${i.containerModifierClass}grid-column`),e.emitContainerClasses()):!d&&p&&(r.addClass(`${i.containerModifierClass}grid`),(o.grid.fill&&"column"===o.grid.fill||!o.grid.fill&&"column"===i.grid.fill)&&r.addClass(`${i.containerModifierClass}grid-column`),e.emitContainerClasses());const u=o.direction&&o.direction!==i.direction,h=i.loop&&(o.slidesPerView!==i.slidesPerView||u);u&&s&&e.changeDirection(),f(e.params,o);const m=e.params.enabled;Object.assign(e,{allowTouchMove:e.params.allowTouchMove,allowSlideNext:e.params.allowSlideNext,allowSlidePrev:e.params.allowSlidePrev}),c&&!m?e.disable():!c&&m&&e.enable(),e.currentBreakpoint=l,e.emit("_beforeBreakpoint",o),h&&s&&(e.loopDestroy(),e.loopCreate(),e.updateSlides(),e.slideTo(t-a+e.loopedSlides,0,!1)),e.emit("breakpoint",o)},getBreakpoint:function(e,t="window",s){if(!e||"container"===t&&!s)return;let a=!1;const i=r(),n="window"===t?i.innerHeight:s.clientHeight,l=Object.keys(e).map((e=>{if("string"==typeof e&&0===e.indexOf("@")){const t=parseFloat(e.substr(1));return{value:n*t,point:e}}return{value:e,point:e}}));l.sort(((e,t)=>parseInt(e.value,10)-parseInt(t.value,10)));for(let e=0;es}else e.isLocked=1===e.snapGrid.length;!0===s.allowSlideNext&&(e.allowSlideNext=!e.isLocked),!0===s.allowSlidePrev&&(e.allowSlidePrev=!e.isLocked),t&&t!==e.isLocked&&(e.isEnd=!1),t!==e.isLocked&&e.emit(e.isLocked?"lock":"unlock")}},classes:{addClasses:function(){const e=this,{classNames:t,params:s,rtl:a,$el:i,device:r,support:n}=e,l=function(e,t){const s=[];return e.forEach((e=>{"object"==typeof e?Object.keys(e).forEach((a=>{e[a]&&s.push(t+a)})):"string"==typeof e&&s.push(t+e)})),s}(["initialized",s.direction,{"pointer-events":!n.touch},{"free-mode":e.params.freeMode&&s.freeMode.enabled},{autoheight:s.autoHeight},{rtl:a},{grid:s.grid&&s.grid.rows>1},{"grid-column":s.grid&&s.grid.rows>1&&"column"===s.grid.fill},{android:r.android},{ios:r.ios},{"css-mode":s.cssMode},{centered:s.cssMode&&s.centeredSlides}],s.containerModifierClass);t.push(...l),i.addClass([...t].join(" ")),e.emitContainerClasses()},removeClasses:function(){const{$el:e,classNames:t}=this;e.removeClass(t.join(" ")),this.emitContainerClasses()}},images:{loadImage:function(e,t,s,a,i,n){const l=r();let o;function p(){n&&n()}d(e).parent("picture")[0]||e.complete&&i?p():t?(o=new l.Image,o.onload=p,o.onerror=p,a&&(o.sizes=a),s&&(o.srcset=s),t&&(o.src=t)):p()},preloadImages:function(){const e=this;function t(){null!=e&&e&&!e.destroyed&&(void 0!==e.imagesLoaded&&(e.imagesLoaded+=1),e.imagesLoaded===e.imagesToLoad.length&&(e.params.updateOnImagesReady&&e.update(),e.emit("imagesReady")))}e.imagesToLoad=e.$el.find("img");for(let s=0;s1){const e=[];return d(s.el).each((t=>{const a=f({},s,{el:t});e.push(new H(a))})),e}const a=this;a.__swiper__=!0,a.support=y(),a.device=E({userAgent:s.userAgent}),a.browser=T(),a.eventsListeners={},a.eventsAnyListeners=[],a.modules=[...a.__modules__],s.modules&&Array.isArray(s.modules)&&a.modules.push(...s.modules);const i={};a.modules.forEach((e=>{e({swiper:a,extendParams:N(s,i),on:a.on.bind(a),once:a.once.bind(a),off:a.off.bind(a),emit:a.emit.bind(a)})}));const r=f({},G,i);return a.params=f({},r,X,s),a.originalParams=f({},a.params),a.passedParams=f({},s),a.params&&a.params.on&&Object.keys(a.params.on).forEach((e=>{a.on(e,a.params.on[e])})),a.params&&a.params.onAny&&a.onAny(a.params.onAny),a.$=d,Object.assign(a,{enabled:a.params.enabled,el:t,classNames:[],slides:d(),slidesGrid:[],snapGrid:[],slidesSizesGrid:[],isHorizontal:()=>"horizontal"===a.params.direction,isVertical:()=>"vertical"===a.params.direction,activeIndex:0,realIndex:0,isBeginning:!0,isEnd:!1,translate:0,previousTranslate:0,progress:0,velocity:0,animating:!1,allowSlideNext:a.params.allowSlideNext,allowSlidePrev:a.params.allowSlidePrev,touchEvents:function(){const e=["touchstart","touchmove","touchend","touchcancel"],t=["pointerdown","pointermove","pointerup"];return a.touchEventsTouch={start:e[0],move:e[1],end:e[2],cancel:e[3]},a.touchEventsDesktop={start:t[0],move:t[1],end:t[2]},a.support.touch||!a.params.simulateTouch?a.touchEventsTouch:a.touchEventsDesktop}(),touchEventsData:{isTouched:void 0,isMoved:void 0,allowTouchCallbacks:void 0,touchStartTime:void 0,isScrolling:void 0,currentTranslate:void 0,startTranslate:void 0,allowThresholdMove:void 0,focusableElements:a.params.focusableElements,lastClickTime:u(),clickTimeout:void 0,velocities:[],allowMomentumBounce:void 0,isTouchEvent:void 0,startMoving:void 0},allowClick:!0,allowTouchMove:a.params.allowTouchMove,touches:{startX:0,startY:0,currentX:0,currentY:0,diff:0},imagesToLoad:[],imagesLoaded:0}),a.emit("_swiper"),a.params.init&&a.init(),a}enable(){const e=this;e.enabled||(e.enabled=!0,e.params.grabCursor&&e.setGrabCursor(),e.emit("enable"))}disable(){const e=this;e.enabled&&(e.enabled=!1,e.params.grabCursor&&e.unsetGrabCursor(),e.emit("disable"))}setProgress(e,t){const s=this;e=Math.min(Math.max(e,0),1);const a=s.minTranslate(),i=(s.maxTranslate()-a)*e+a;s.translateTo(i,void 0===t?0:t),s.updateActiveIndex(),s.updateSlidesClasses()}emitContainerClasses(){const e=this;if(!e.params._emitClasses||!e.el)return;const t=e.el.className.split(" ").filter((t=>0===t.indexOf("swiper")||0===t.indexOf(e.params.containerModifierClass)));e.emit("_containerClasses",t.join(" "))}getSlideClasses(e){const t=this;return e.className.split(" ").filter((e=>0===e.indexOf("swiper-slide")||0===e.indexOf(t.params.slideClass))).join(" ")}emitSlidesClasses(){const e=this;if(!e.params._emitClasses||!e.el)return;const t=[];e.slides.each((s=>{const a=e.getSlideClasses(s);t.push({slideEl:s,classNames:a}),e.emit("_slideClass",s,a)})),e.emit("_slideClasses",t)}slidesPerViewDynamic(e="current",t=!1){const{params:s,slides:a,slidesGrid:i,slidesSizesGrid:r,size:n,activeIndex:l}=this;let o=1;if(s.centeredSlides){let e,t=a[l].swiperSlideSize;for(let s=l+1;sn&&(e=!0));for(let s=l-1;s>=0;s-=1)a[s]&&!e&&(t+=a[s].swiperSlideSize,o+=1,t>n&&(e=!0))}else if("current"===e)for(let e=l+1;e=0;e-=1){i[l]-i[e]1)&&e.isEnd&&!e.params.centeredSlides?e.slideTo(e.slides.length-1,0,!1,!0):e.slideTo(e.activeIndex,0,!1,!0),i||a()),s.watchOverflow&&t!==e.snapGrid&&e.checkOverflow(),e.emit("update")}changeDirection(e,t=!0){const s=this,a=s.params.direction;return e||(e="horizontal"===a?"vertical":"horizontal"),e===a||"horizontal"!==e&&"vertical"!==e||(s.$el.removeClass(`${s.params.containerModifierClass}${a}`).addClass(`${s.params.containerModifierClass}${e}`),s.emitContainerClasses(),s.params.direction=e,s.slides.each((t=>{"vertical"===e?t.style.width="":t.style.height=""})),s.emit("changeDirection"),t&&s.update()),s}mount(e){const t=this;if(t.mounted)return!0;const s=d(e||t.params.el);if(!(e=s[0]))return!1;e.swiper=t;const i=()=>`.${(t.params.wrapperClass||"").trim().split(" ").join(".")}`;let r=(()=>{if(e&&e.shadowRoot&&e.shadowRoot.querySelector){const t=d(e.shadowRoot.querySelector(i()));return t.children=e=>s.children(e),t}return s.children(i())})();if(0===r.length&&t.params.createElements){const e=a().createElement("div");r=d(e),e.className=t.params.wrapperClass,s.append(e),s.children(`.${t.params.slideClass}`).each((e=>{r.append(e)}))}return Object.assign(t,{$el:s,el:e,$wrapperEl:r,wrapperEl:r[0],mounted:!0,rtl:"rtl"===e.dir.toLowerCase()||"rtl"===s.css("direction"),rtlTranslate:"horizontal"===t.params.direction&&("rtl"===e.dir.toLowerCase()||"rtl"===s.css("direction")),wrongRTL:"-webkit-box"===r.css("display")}),!0}init(e){const t=this;if(t.initialized)return t;return!1===t.mount(e)||(t.emit("beforeInit"),t.params.breakpoints&&t.setBreakpoint(),t.addClasses(),t.params.loop&&t.loopCreate(),t.updateSize(),t.updateSlides(),t.params.watchOverflow&&t.checkOverflow(),t.params.grabCursor&&t.enabled&&t.setGrabCursor(),t.params.preloadImages&&t.preloadImages(),t.params.loop?t.slideTo(t.params.initialSlide+t.loopedSlides,0,t.params.runCallbacksOnInit,!1,!0):t.slideTo(t.params.initialSlide,0,t.params.runCallbacksOnInit,!1,!0),t.attachEvents(),t.initialized=!0,t.emit("init"),t.emit("afterInit")),t}destroy(e=!0,t=!0){const s=this,{params:a,$el:i,$wrapperEl:r,slides:n}=s;return void 0===s.params||s.destroyed||(s.emit("beforeDestroy"),s.initialized=!1,s.detachEvents(),a.loop&&s.loopDestroy(),t&&(s.removeClasses(),i.removeAttr("style"),r.removeAttr("style"),n&&n.length&&n.removeClass([a.slideVisibleClass,a.slideActiveClass,a.slideNextClass,a.slidePrevClass].join(" ")).removeAttr("style").removeAttr("data-swiper-slide-index")),s.emit("destroy"),Object.keys(s.eventsListeners).forEach((e=>{s.off(e)})),!1!==e&&(s.$el[0].swiper=null,function(e){const t=e;Object.keys(t).forEach((e=>{try{t[e]=null}catch(e){}try{delete t[e]}catch(e){}}))}(s)),s.destroyed=!0),null}static extendDefaults(e){f(X,e)}static get extendedDefaults(){return X}static get defaults(){return G}static installModule(e){H.prototype.__modules__||(H.prototype.__modules__=[]);const t=H.prototype.__modules__;"function"==typeof e&&t.indexOf(e)<0&&t.push(e)}static use(e){return Array.isArray(e)?(e.forEach((e=>H.installModule(e))),H):(H.installModule(e),H)}}function Y(e,t,s,i){const r=a();return e.params.createElements&&Object.keys(i).forEach((a=>{if(!s[a]&&!0===s.auto){let n=e.$el.children(`.${i[a]}`)[0];n||(n=r.createElement("div"),n.className=i[a],e.$el.append(n)),s[a]=n,t[a]=n}})),s}function W(e=""){return`.${e.trim().replace(/([\.:!\/])/g,"\\$1").replace(/ /g,".")}`}function R(e){const t=this,{$wrapperEl:s,params:a}=t;if(a.loop&&t.loopDestroy(),"object"==typeof e&&"length"in e)for(let t=0;t=l)return void s.appendSlide(t);let o=n>e?n+1:n;const d=[];for(let t=l-1;t>=e;t-=1){const e=s.slides.eq(t);e.remove(),d.unshift(e)}if("object"==typeof t&&"length"in t){for(let e=0;ee?n+t.length:n}else a.append(t);for(let e=0;e{if(s.params.effect!==t)return;s.classNames.push(`${s.params.containerModifierClass}${t}`),l&&l()&&s.classNames.push(`${s.params.containerModifierClass}3d`);const e=n?n():{};Object.assign(s.params,e),Object.assign(s.originalParams,e)})),a("setTranslate",(()=>{s.params.effect===t&&i()})),a("setTransition",((e,a)=>{s.params.effect===t&&r(a)}))}function U(e,t){return e.transformEl?t.find(e.transformEl).css({"backface-visibility":"hidden","-webkit-backface-visibility":"hidden"}):t}function K({swiper:e,duration:t,transformEl:s,allSlides:a}){const{slides:i,activeIndex:r,$wrapperEl:n}=e;if(e.params.virtualTranslate&&0!==t){let t,l=!1;t=a?s?i.find(s):i:s?i.eq(r).find(s):i.eq(r),t.transitionEnd((()=>{if(l)return;if(!e||e.destroyed)return;l=!0,e.animating=!1;const t=["webkitTransitionEnd","transitionend"];for(let e=0;e`),i.append(r)),r}Object.keys(B).forEach((e=>{Object.keys(B[e]).forEach((t=>{H.prototype[t]=B[e][t]}))})),H.use([function({swiper:e,on:t,emit:s}){const a=r();let i=null;const n=()=>{e&&!e.destroyed&&e.initialized&&(s("beforeResize"),s("resize"))},l=()=>{e&&!e.destroyed&&e.initialized&&s("orientationchange")};t("init",(()=>{e.params.resizeObserver&&void 0!==a.ResizeObserver?e&&!e.destroyed&&e.initialized&&(i=new ResizeObserver((t=>{const{width:s,height:a}=e;let i=s,r=a;t.forEach((({contentBoxSize:t,contentRect:s,target:a})=>{a&&a!==e.el||(i=s?s.width:(t[0]||t).inlineSize,r=s?s.height:(t[0]||t).blockSize)})),i===s&&r===a||n()})),i.observe(e.el)):(a.addEventListener("resize",n),a.addEventListener("orientationchange",l))})),t("destroy",(()=>{i&&i.unobserve&&e.el&&(i.unobserve(e.el),i=null),a.removeEventListener("resize",n),a.removeEventListener("orientationchange",l)}))},function({swiper:e,extendParams:t,on:s,emit:a}){const i=[],n=r(),l=(e,t={})=>{const s=new(n.MutationObserver||n.WebkitMutationObserver)((e=>{if(1===e.length)return void a("observerUpdate",e[0]);const t=function(){a("observerUpdate",e[0])};n.requestAnimationFrame?n.requestAnimationFrame(t):n.setTimeout(t,0)}));s.observe(e,{attributes:void 0===t.attributes||t.attributes,childList:void 0===t.childList||t.childList,characterData:void 0===t.characterData||t.characterData}),i.push(s)};t({observer:!1,observeParents:!1,observeSlideChildren:!1}),s("init",(()=>{if(e.params.observer){if(e.params.observeParents){const t=e.$el.parents();for(let e=0;e{i.forEach((e=>{e.disconnect()})),i.splice(0,i.length)}))}]);const J=[function({swiper:e,extendParams:t,on:s}){let a;function i(t,s){const a=e.params.virtual;if(a.cache&&e.virtual.cache[s])return e.virtual.cache[s];const i=a.renderSlide?d(a.renderSlide.call(e,t,s)):d(`
    ${t}
    `);return i.attr("data-swiper-slide-index")||i.attr("data-swiper-slide-index",s),a.cache&&(e.virtual.cache[s]=i),i}function r(t){const{slidesPerView:s,slidesPerGroup:a,centeredSlides:r}=e.params,{addSlidesBefore:n,addSlidesAfter:l}=e.params.virtual,{from:o,to:d,slides:p,slidesGrid:c,offset:u}=e.virtual;e.params.cssMode||e.updateActiveIndex();const h=e.activeIndex||0;let m,f,g;m=e.rtlTranslate?"right":e.isHorizontal()?"left":"top",r?(f=Math.floor(s/2)+a+l,g=Math.floor(s/2)+a+n):(f=s+(a-1)+l,g=a+n);const v=Math.max((h||0)-g,0),w=Math.min((h||0)+f,p.length-1),b=(e.slidesGrid[v]||0)-(e.slidesGrid[0]||0);function x(){e.updateSlides(),e.updateProgress(),e.updateSlidesClasses(),e.lazy&&e.params.lazy.enabled&&e.lazy.load()}if(Object.assign(e.virtual,{from:v,to:w,offset:b,slidesGrid:e.slidesGrid}),o===v&&d===w&&!t)return e.slidesGrid!==c&&b!==u&&e.slides.css(m,`${b}px`),void e.updateProgress();if(e.params.virtual.renderExternal)return e.params.virtual.renderExternal.call(e,{offset:b,from:v,to:w,slides:function(){const e=[];for(let t=v;t<=w;t+=1)e.push(p[t]);return e}()}),void(e.params.virtual.renderExternalUpdate&&x());const y=[],E=[];if(t)e.$wrapperEl.find(`.${e.params.slideClass}`).remove();else for(let t=o;t<=d;t+=1)(tw)&&e.$wrapperEl.find(`.${e.params.slideClass}[data-swiper-slide-index="${t}"]`).remove();for(let e=0;e=v&&e<=w&&(void 0===d||t?E.push(e):(e>d&&E.push(e),e{e.$wrapperEl.append(i(p[t],t))})),y.sort(((e,t)=>t-e)).forEach((t=>{e.$wrapperEl.prepend(i(p[t],t))})),e.$wrapperEl.children(".swiper-slide").css(m,`${b}px`),x()}t({virtual:{enabled:!1,slides:[],cache:!0,renderSlide:null,renderExternal:null,renderExternalUpdate:!0,addSlidesBefore:0,addSlidesAfter:0}}),e.virtual={cache:{},from:void 0,to:void 0,slides:[],offset:0,slidesGrid:[]},s("beforeInit",(()=>{e.params.virtual.enabled&&(e.virtual.slides=e.params.virtual.slides,e.classNames.push(`${e.params.containerModifierClass}virtual`),e.params.watchSlidesProgress=!0,e.originalParams.watchSlidesProgress=!0,e.params.initialSlide||r())})),s("setTranslate",(()=>{e.params.virtual.enabled&&(e.params.cssMode&&!e._immediateVirtual?(clearTimeout(a),a=setTimeout((()=>{r()}),100)):r())})),s("init update resize",(()=>{e.params.virtual.enabled&&e.params.cssMode&&g(e.wrapperEl,"--swiper-virtual-size",`${e.virtualSize}px`)})),Object.assign(e.virtual,{appendSlide:function(t){if("object"==typeof t&&"length"in t)for(let s=0;s{const a=t[e],r=a.attr("data-swiper-slide-index");r&&a.attr("data-swiper-slide-index",parseInt(r,10)+i),s[parseInt(e,10)+i]=a})),e.virtual.cache=s}r(!0),e.slideTo(a,0)},removeSlide:function(t){if(null==t)return;let s=e.activeIndex;if(Array.isArray(t))for(let a=t.length-1;a>=0;a-=1)e.virtual.slides.splice(t[a],1),e.params.virtual.cache&&delete e.virtual.cache[t[a]],t[a]0&&0===e.$el.parents(`.${e.params.slideActiveClass}`).length)return;const a=e.$el,i=a[0].clientWidth,r=a[0].clientHeight,n=l.innerWidth,o=l.innerHeight,d=e.$el.offset();s&&(d.left-=e.$el[0].scrollLeft);const p=[[d.left,d.top],[d.left+i,d.top],[d.left,d.top+r],[d.left+i,d.top+r]];for(let e=0;e=0&&s[0]<=n&&s[1]>=0&&s[1]<=o){if(0===s[0]&&0===s[1])continue;t=!0}}if(!t)return}e.isHorizontal()?((d||p||c||u)&&(a.preventDefault?a.preventDefault():a.returnValue=!1),((p||u)&&!s||(d||c)&&s)&&e.slideNext(),((d||c)&&!s||(p||u)&&s)&&e.slidePrev()):((d||p||h||m)&&(a.preventDefault?a.preventDefault():a.returnValue=!1),(p||m)&&e.slideNext(),(d||h)&&e.slidePrev()),i("keyPress",r)}}function p(){e.keyboard.enabled||(d(n).on("keydown",o),e.keyboard.enabled=!0)}function c(){e.keyboard.enabled&&(d(n).off("keydown",o),e.keyboard.enabled=!1)}e.keyboard={enabled:!1},t({keyboard:{enabled:!1,onlyInViewport:!0,pageUpDown:!0}}),s("init",(()=>{e.params.keyboard.enabled&&p()})),s("destroy",(()=>{e.keyboard.enabled&&c()})),Object.assign(e.keyboard,{enable:p,disable:c})},function({swiper:e,extendParams:t,on:s,emit:a}){const i=r();let n;t({mousewheel:{enabled:!1,releaseOnEdges:!1,invert:!1,forceToAxis:!1,sensitivity:1,eventsTarget:"container",thresholdDelta:null,thresholdTime:null}}),e.mousewheel={enabled:!1};let l,o=u();const p=[];function h(){e.enabled&&(e.mouseEntered=!0)}function m(){e.enabled&&(e.mouseEntered=!1)}function f(t){return!(e.params.mousewheel.thresholdDelta&&t.delta=6&&u()-o<60||(t.direction<0?e.isEnd&&!e.params.loop||e.animating||(e.slideNext(),a("scroll",t.raw)):e.isBeginning&&!e.params.loop||e.animating||(e.slidePrev(),a("scroll",t.raw)),o=(new i.Date).getTime(),!1)))}function g(t){let s=t,i=!0;if(!e.enabled)return;const r=e.params.mousewheel;e.params.cssMode&&s.preventDefault();let o=e.$el;if("container"!==e.params.mousewheel.eventsTarget&&(o=d(e.params.mousewheel.eventsTarget)),!e.mouseEntered&&!o[0].contains(s.target)&&!r.releaseOnEdges)return!0;s.originalEvent&&(s=s.originalEvent);let h=0;const m=e.rtlTranslate?-1:1,g=function(e){let t=0,s=0,a=0,i=0;return"detail"in e&&(s=e.detail),"wheelDelta"in e&&(s=-e.wheelDelta/120),"wheelDeltaY"in e&&(s=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(t=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(t=s,s=0),a=10*t,i=10*s,"deltaY"in e&&(i=e.deltaY),"deltaX"in e&&(a=e.deltaX),e.shiftKey&&!a&&(a=i,i=0),(a||i)&&e.deltaMode&&(1===e.deltaMode?(a*=40,i*=40):(a*=800,i*=800)),a&&!t&&(t=a<1?-1:1),i&&!s&&(s=i<1?-1:1),{spinX:t,spinY:s,pixelX:a,pixelY:i}}(s);if(r.forceToAxis)if(e.isHorizontal()){if(!(Math.abs(g.pixelX)>Math.abs(g.pixelY)))return!0;h=-g.pixelX*m}else{if(!(Math.abs(g.pixelY)>Math.abs(g.pixelX)))return!0;h=-g.pixelY}else h=Math.abs(g.pixelX)>Math.abs(g.pixelY)?-g.pixelX*m:-g.pixelY;if(0===h)return!0;r.invert&&(h=-h);let v=e.getTranslate()+h*r.sensitivity;if(v>=e.minTranslate()&&(v=e.minTranslate()),v<=e.maxTranslate()&&(v=e.maxTranslate()),i=!!e.params.loop||!(v===e.minTranslate()||v===e.maxTranslate()),i&&e.params.nested&&s.stopPropagation(),e.params.freeMode&&e.params.freeMode.enabled){const t={time:u(),delta:Math.abs(h),direction:Math.sign(h)},i=l&&t.time=e.minTranslate()&&(o=e.minTranslate()),o<=e.maxTranslate()&&(o=e.maxTranslate()),e.setTransition(0),e.setTranslate(o),e.updateProgress(),e.updateActiveIndex(),e.updateSlidesClasses(),(!d&&e.isBeginning||!u&&e.isEnd)&&e.updateSlidesClasses(),e.params.freeMode.sticky){clearTimeout(n),n=void 0,p.length>=15&&p.shift();const s=p.length?p[p.length-1]:void 0,a=p[0];if(p.push(t),s&&(t.delta>s.delta||t.direction!==s.direction))p.splice(0);else if(p.length>=15&&t.time-a.time<500&&a.delta-t.delta>=1&&t.delta<=6){const s=h>0?.8:.2;l=t,p.splice(0),n=c((()=>{e.slideToClosest(e.params.speed,!0,void 0,s)}),0)}n||(n=c((()=>{l=t,p.splice(0),e.slideToClosest(e.params.speed,!0,void 0,.5)}),500))}if(i||a("scroll",s),e.params.autoplay&&e.params.autoplayDisableOnInteraction&&e.autoplay.stop(),o===e.minTranslate()||o===e.maxTranslate())return!0}}else{const s={time:u(),delta:Math.abs(h),direction:Math.sign(h),raw:t};p.length>=2&&p.shift();const a=p.length?p[p.length-1]:void 0;if(p.push(s),a?(s.direction!==a.direction||s.delta>a.delta||s.time>a.time+150)&&f(s):f(s),function(t){const s=e.params.mousewheel;if(t.direction<0){if(e.isEnd&&!e.params.loop&&s.releaseOnEdges)return!0}else if(e.isBeginning&&!e.params.loop&&s.releaseOnEdges)return!0;return!1}(s))return!0}return s.preventDefault?s.preventDefault():s.returnValue=!1,!1}function v(t){let s=e.$el;"container"!==e.params.mousewheel.eventsTarget&&(s=d(e.params.mousewheel.eventsTarget)),s[t]("mouseenter",h),s[t]("mouseleave",m),s[t]("wheel",g)}function w(){return e.params.cssMode?(e.wrapperEl.removeEventListener("wheel",g),!0):!e.mousewheel.enabled&&(v("on"),e.mousewheel.enabled=!0,!0)}function b(){return e.params.cssMode?(e.wrapperEl.addEventListener(event,g),!0):!!e.mousewheel.enabled&&(v("off"),e.mousewheel.enabled=!1,!0)}s("init",(()=>{!e.params.mousewheel.enabled&&e.params.cssMode&&b(),e.params.mousewheel.enabled&&w()})),s("destroy",(()=>{e.params.cssMode&&w(),e.mousewheel.enabled&&b()})),Object.assign(e.mousewheel,{enable:w,disable:b})},function({swiper:e,extendParams:t,on:s,emit:a}){function i(t){let s;return t&&(s=d(t),e.params.uniqueNavElements&&"string"==typeof t&&s.length>1&&1===e.$el.find(t).length&&(s=e.$el.find(t))),s}function r(t,s){const a=e.params.navigation;t&&t.length>0&&(t[s?"addClass":"removeClass"](a.disabledClass),t[0]&&"BUTTON"===t[0].tagName&&(t[0].disabled=s),e.params.watchOverflow&&e.enabled&&t[e.isLocked?"addClass":"removeClass"](a.lockClass))}function n(){if(e.params.loop)return;const{$nextEl:t,$prevEl:s}=e.navigation;r(s,e.isBeginning&&!e.params.rewind),r(t,e.isEnd&&!e.params.rewind)}function l(t){t.preventDefault(),(!e.isBeginning||e.params.loop||e.params.rewind)&&e.slidePrev()}function o(t){t.preventDefault(),(!e.isEnd||e.params.loop||e.params.rewind)&&e.slideNext()}function p(){const t=e.params.navigation;if(e.params.navigation=Y(e,e.originalParams.navigation,e.params.navigation,{nextEl:"swiper-button-next",prevEl:"swiper-button-prev"}),!t.nextEl&&!t.prevEl)return;const s=i(t.nextEl),a=i(t.prevEl);s&&s.length>0&&s.on("click",o),a&&a.length>0&&a.on("click",l),Object.assign(e.navigation,{$nextEl:s,nextEl:s&&s[0],$prevEl:a,prevEl:a&&a[0]}),e.enabled||(s&&s.addClass(t.lockClass),a&&a.addClass(t.lockClass))}function c(){const{$nextEl:t,$prevEl:s}=e.navigation;t&&t.length&&(t.off("click",o),t.removeClass(e.params.navigation.disabledClass)),s&&s.length&&(s.off("click",l),s.removeClass(e.params.navigation.disabledClass))}t({navigation:{nextEl:null,prevEl:null,hideOnClick:!1,disabledClass:"swiper-button-disabled",hiddenClass:"swiper-button-hidden",lockClass:"swiper-button-lock"}}),e.navigation={nextEl:null,$nextEl:null,prevEl:null,$prevEl:null},s("init",(()=>{p(),n()})),s("toEdge fromEdge lock unlock",(()=>{n()})),s("destroy",(()=>{c()})),s("enable disable",(()=>{const{$nextEl:t,$prevEl:s}=e.navigation;t&&t[e.enabled?"removeClass":"addClass"](e.params.navigation.lockClass),s&&s[e.enabled?"removeClass":"addClass"](e.params.navigation.lockClass)})),s("click",((t,s)=>{const{$nextEl:i,$prevEl:r}=e.navigation,n=s.target;if(e.params.navigation.hideOnClick&&!d(n).is(r)&&!d(n).is(i)){if(e.pagination&&e.params.pagination&&e.params.pagination.clickable&&(e.pagination.el===n||e.pagination.el.contains(n)))return;let t;i?t=i.hasClass(e.params.navigation.hiddenClass):r&&(t=r.hasClass(e.params.navigation.hiddenClass)),a(!0===t?"navigationShow":"navigationHide"),i&&i.toggleClass(e.params.navigation.hiddenClass),r&&r.toggleClass(e.params.navigation.hiddenClass)}})),Object.assign(e.navigation,{update:n,init:p,destroy:c})},function({swiper:e,extendParams:t,on:s,emit:a}){const i="swiper-pagination";let r;t({pagination:{el:null,bulletElement:"span",clickable:!1,hideOnClick:!1,renderBullet:null,renderProgressbar:null,renderFraction:null,renderCustom:null,progressbarOpposite:!1,type:"bullets",dynamicBullets:!1,dynamicMainBullets:1,formatFractionCurrent:e=>e,formatFractionTotal:e=>e,bulletClass:`${i}-bullet`,bulletActiveClass:`${i}-bullet-active`,modifierClass:`${i}-`,currentClass:`${i}-current`,totalClass:`${i}-total`,hiddenClass:`${i}-hidden`,progressbarFillClass:`${i}-progressbar-fill`,progressbarOppositeClass:`${i}-progressbar-opposite`,clickableClass:`${i}-clickable`,lockClass:`${i}-lock`,horizontalClass:`${i}-horizontal`,verticalClass:`${i}-vertical`}}),e.pagination={el:null,$el:null,bullets:[]};let n=0;function l(){return!e.params.pagination.el||!e.pagination.el||!e.pagination.$el||0===e.pagination.$el.length}function o(t,s){const{bulletActiveClass:a}=e.params.pagination;t[s]().addClass(`${a}-${s}`)[s]().addClass(`${a}-${s}-${s}`)}function p(){const t=e.rtl,s=e.params.pagination;if(l())return;const i=e.virtual&&e.params.virtual.enabled?e.virtual.slides.length:e.slides.length,p=e.pagination.$el;let c;const u=e.params.loop?Math.ceil((i-2*e.loopedSlides)/e.params.slidesPerGroup):e.snapGrid.length;if(e.params.loop?(c=Math.ceil((e.activeIndex-e.loopedSlides)/e.params.slidesPerGroup),c>i-1-2*e.loopedSlides&&(c-=i-2*e.loopedSlides),c>u-1&&(c-=u),c<0&&"bullets"!==e.params.paginationType&&(c=u+c)):c=void 0!==e.snapIndex?e.snapIndex:e.activeIndex||0,"bullets"===s.type&&e.pagination.bullets&&e.pagination.bullets.length>0){const a=e.pagination.bullets;let i,l,u;if(s.dynamicBullets&&(r=a.eq(0)[e.isHorizontal()?"outerWidth":"outerHeight"](!0),p.css(e.isHorizontal()?"width":"height",r*(s.dynamicMainBullets+4)+"px"),s.dynamicMainBullets>1&&void 0!==e.previousIndex&&(n+=c-(e.previousIndex-e.loopedSlides||0),n>s.dynamicMainBullets-1?n=s.dynamicMainBullets-1:n<0&&(n=0)),i=Math.max(c-n,0),l=i+(Math.min(a.length,s.dynamicMainBullets)-1),u=(l+i)/2),a.removeClass(["","-next","-next-next","-prev","-prev-prev","-main"].map((e=>`${s.bulletActiveClass}${e}`)).join(" ")),p.length>1)a.each((e=>{const t=d(e),a=t.index();a===c&&t.addClass(s.bulletActiveClass),s.dynamicBullets&&(a>=i&&a<=l&&t.addClass(`${s.bulletActiveClass}-main`),a===i&&o(t,"prev"),a===l&&o(t,"next"))}));else{const t=a.eq(c),r=t.index();if(t.addClass(s.bulletActiveClass),s.dynamicBullets){const t=a.eq(i),n=a.eq(l);for(let e=i;e<=l;e+=1)a.eq(e).addClass(`${s.bulletActiveClass}-main`);if(e.params.loop)if(r>=a.length){for(let e=s.dynamicMainBullets;e>=0;e-=1)a.eq(a.length-e).addClass(`${s.bulletActiveClass}-main`);a.eq(a.length-s.dynamicMainBullets-1).addClass(`${s.bulletActiveClass}-prev`)}else o(t,"prev"),o(n,"next");else o(t,"prev"),o(n,"next")}}if(s.dynamicBullets){const i=Math.min(a.length,s.dynamicMainBullets+4),n=(r*i-r)/2-u*r,l=t?"right":"left";a.css(e.isHorizontal()?l:"top",`${n}px`)}}if("fraction"===s.type&&(p.find(W(s.currentClass)).text(s.formatFractionCurrent(c+1)),p.find(W(s.totalClass)).text(s.formatFractionTotal(u))),"progressbar"===s.type){let t;t=s.progressbarOpposite?e.isHorizontal()?"vertical":"horizontal":e.isHorizontal()?"horizontal":"vertical";const a=(c+1)/u;let i=1,r=1;"horizontal"===t?i=a:r=a,p.find(W(s.progressbarFillClass)).transform(`translate3d(0,0,0) scaleX(${i}) scaleY(${r})`).transition(e.params.speed)}"custom"===s.type&&s.renderCustom?(p.html(s.renderCustom(e,c+1,u)),a("paginationRender",p[0])):a("paginationUpdate",p[0]),e.params.watchOverflow&&e.enabled&&p[e.isLocked?"addClass":"removeClass"](s.lockClass)}function c(){const t=e.params.pagination;if(l())return;const s=e.virtual&&e.params.virtual.enabled?e.virtual.slides.length:e.slides.length,i=e.pagination.$el;let r="";if("bullets"===t.type){let a=e.params.loop?Math.ceil((s-2*e.loopedSlides)/e.params.slidesPerGroup):e.snapGrid.length;e.params.freeMode&&e.params.freeMode.enabled&&!e.params.loop&&a>s&&(a=s);for(let s=0;s`;i.html(r),e.pagination.bullets=i.find(W(t.bulletClass))}"fraction"===t.type&&(r=t.renderFraction?t.renderFraction.call(e,t.currentClass,t.totalClass):` / `,i.html(r)),"progressbar"===t.type&&(r=t.renderProgressbar?t.renderProgressbar.call(e,t.progressbarFillClass):``,i.html(r)),"custom"!==t.type&&a("paginationRender",e.pagination.$el[0])}function u(){e.params.pagination=Y(e,e.originalParams.pagination,e.params.pagination,{el:"swiper-pagination"});const t=e.params.pagination;if(!t.el)return;let s=d(t.el);0!==s.length&&(e.params.uniqueNavElements&&"string"==typeof t.el&&s.length>1&&(s=e.$el.find(t.el),s.length>1&&(s=s.filter((t=>d(t).parents(".swiper")[0]===e.el)))),"bullets"===t.type&&t.clickable&&s.addClass(t.clickableClass),s.addClass(t.modifierClass+t.type),s.addClass(t.modifierClass+e.params.direction),"bullets"===t.type&&t.dynamicBullets&&(s.addClass(`${t.modifierClass}${t.type}-dynamic`),n=0,t.dynamicMainBullets<1&&(t.dynamicMainBullets=1)),"progressbar"===t.type&&t.progressbarOpposite&&s.addClass(t.progressbarOppositeClass),t.clickable&&s.on("click",W(t.bulletClass),(function(t){t.preventDefault();let s=d(this).index()*e.params.slidesPerGroup;e.params.loop&&(s+=e.loopedSlides),e.slideTo(s)})),Object.assign(e.pagination,{$el:s,el:s[0]}),e.enabled||s.addClass(t.lockClass))}function h(){const t=e.params.pagination;if(l())return;const s=e.pagination.$el;s.removeClass(t.hiddenClass),s.removeClass(t.modifierClass+t.type),s.removeClass(t.modifierClass+e.params.direction),e.pagination.bullets&&e.pagination.bullets.removeClass&&e.pagination.bullets.removeClass(t.bulletActiveClass),t.clickable&&s.off("click",W(t.bulletClass))}s("init",(()=>{u(),c(),p()})),s("activeIndexChange",(()=>{(e.params.loop||void 0===e.snapIndex)&&p()})),s("snapIndexChange",(()=>{e.params.loop||p()})),s("slidesLengthChange",(()=>{e.params.loop&&(c(),p())})),s("snapGridLengthChange",(()=>{e.params.loop||(c(),p())})),s("destroy",(()=>{h()})),s("enable disable",(()=>{const{$el:t}=e.pagination;t&&t[e.enabled?"removeClass":"addClass"](e.params.pagination.lockClass)})),s("lock unlock",(()=>{p()})),s("click",((t,s)=>{const i=s.target,{$el:r}=e.pagination;if(e.params.pagination.el&&e.params.pagination.hideOnClick&&r.length>0&&!d(i).hasClass(e.params.pagination.bulletClass)){if(e.navigation&&(e.navigation.nextEl&&i===e.navigation.nextEl||e.navigation.prevEl&&i===e.navigation.prevEl))return;const t=r.hasClass(e.params.pagination.hiddenClass);a(!0===t?"paginationShow":"paginationHide"),r.toggleClass(e.params.pagination.hiddenClass)}})),Object.assign(e.pagination,{render:c,update:p,init:u,destroy:h})},function({swiper:e,extendParams:t,on:s,emit:i}){const r=a();let n,l,o,p,u=!1,h=null,m=null;function f(){if(!e.params.scrollbar.el||!e.scrollbar.el)return;const{scrollbar:t,rtlTranslate:s,progress:a}=e,{$dragEl:i,$el:r}=t,n=e.params.scrollbar;let d=l,p=(o-l)*a;s?(p=-p,p>0?(d=l-p,p=0):-p+l>o&&(d=o+p)):p<0?(d=l+p,p=0):p+l>o&&(d=o-p),e.isHorizontal()?(i.transform(`translate3d(${p}px, 0, 0)`),i[0].style.width=`${d}px`):(i.transform(`translate3d(0px, ${p}px, 0)`),i[0].style.height=`${d}px`),n.hide&&(clearTimeout(h),r[0].style.opacity=1,h=setTimeout((()=>{r[0].style.opacity=0,r.transition(400)}),1e3))}function g(){if(!e.params.scrollbar.el||!e.scrollbar.el)return;const{scrollbar:t}=e,{$dragEl:s,$el:a}=t;s[0].style.width="",s[0].style.height="",o=e.isHorizontal()?a[0].offsetWidth:a[0].offsetHeight,p=e.size/(e.virtualSize+e.params.slidesOffsetBefore-(e.params.centeredSlides?e.snapGrid[0]:0)),l="auto"===e.params.scrollbar.dragSize?o*p:parseInt(e.params.scrollbar.dragSize,10),e.isHorizontal()?s[0].style.width=`${l}px`:s[0].style.height=`${l}px`,a[0].style.display=p>=1?"none":"",e.params.scrollbar.hide&&(a[0].style.opacity=0),e.params.watchOverflow&&e.enabled&&t.$el[e.isLocked?"addClass":"removeClass"](e.params.scrollbar.lockClass)}function v(t){return e.isHorizontal()?"touchstart"===t.type||"touchmove"===t.type?t.targetTouches[0].clientX:t.clientX:"touchstart"===t.type||"touchmove"===t.type?t.targetTouches[0].clientY:t.clientY}function w(t){const{scrollbar:s,rtlTranslate:a}=e,{$el:i}=s;let r;r=(v(t)-i.offset()[e.isHorizontal()?"left":"top"]-(null!==n?n:l/2))/(o-l),r=Math.max(Math.min(r,1),0),a&&(r=1-r);const d=e.minTranslate()+(e.maxTranslate()-e.minTranslate())*r;e.updateProgress(d),e.setTranslate(d),e.updateActiveIndex(),e.updateSlidesClasses()}function b(t){const s=e.params.scrollbar,{scrollbar:a,$wrapperEl:r}=e,{$el:l,$dragEl:o}=a;u=!0,n=t.target===o[0]||t.target===o?v(t)-t.target.getBoundingClientRect()[e.isHorizontal()?"left":"top"]:null,t.preventDefault(),t.stopPropagation(),r.transition(100),o.transition(100),w(t),clearTimeout(m),l.transition(0),s.hide&&l.css("opacity",1),e.params.cssMode&&e.$wrapperEl.css("scroll-snap-type","none"),i("scrollbarDragStart",t)}function x(t){const{scrollbar:s,$wrapperEl:a}=e,{$el:r,$dragEl:n}=s;u&&(t.preventDefault?t.preventDefault():t.returnValue=!1,w(t),a.transition(0),r.transition(0),n.transition(0),i("scrollbarDragMove",t))}function y(t){const s=e.params.scrollbar,{scrollbar:a,$wrapperEl:r}=e,{$el:n}=a;u&&(u=!1,e.params.cssMode&&(e.$wrapperEl.css("scroll-snap-type",""),r.transition("")),s.hide&&(clearTimeout(m),m=c((()=>{n.css("opacity",0),n.transition(400)}),1e3)),i("scrollbarDragEnd",t),s.snapOnRelease&&e.slideToClosest())}function E(t){const{scrollbar:s,touchEventsTouch:a,touchEventsDesktop:i,params:n,support:l}=e,o=s.$el[0],d=!(!l.passiveListener||!n.passiveListeners)&&{passive:!1,capture:!1},p=!(!l.passiveListener||!n.passiveListeners)&&{passive:!0,capture:!1};if(!o)return;const c="on"===t?"addEventListener":"removeEventListener";l.touch?(o[c](a.start,b,d),o[c](a.move,x,d),o[c](a.end,y,p)):(o[c](i.start,b,d),r[c](i.move,x,d),r[c](i.end,y,p))}function T(){const{scrollbar:t,$el:s}=e;e.params.scrollbar=Y(e,e.originalParams.scrollbar,e.params.scrollbar,{el:"swiper-scrollbar"});const a=e.params.scrollbar;if(!a.el)return;let i=d(a.el);e.params.uniqueNavElements&&"string"==typeof a.el&&i.length>1&&1===s.find(a.el).length&&(i=s.find(a.el));let r=i.find(`.${e.params.scrollbar.dragClass}`);0===r.length&&(r=d(`
    `),i.append(r)),Object.assign(t,{$el:i,el:i[0],$dragEl:r,dragEl:r[0]}),a.draggable&&e.params.scrollbar.el&&E("on"),i&&i[e.enabled?"removeClass":"addClass"](e.params.scrollbar.lockClass)}function C(){e.params.scrollbar.el&&E("off")}t({scrollbar:{el:null,dragSize:"auto",hide:!1,draggable:!1,snapOnRelease:!0,lockClass:"swiper-scrollbar-lock",dragClass:"swiper-scrollbar-drag"}}),e.scrollbar={el:null,dragEl:null,$el:null,$dragEl:null},s("init",(()=>{T(),g(),f()})),s("update resize observerUpdate lock unlock",(()=>{g()})),s("setTranslate",(()=>{f()})),s("setTransition",((t,s)=>{!function(t){e.params.scrollbar.el&&e.scrollbar.el&&e.scrollbar.$dragEl.transition(t)}(s)})),s("enable disable",(()=>{const{$el:t}=e.scrollbar;t&&t[e.enabled?"removeClass":"addClass"](e.params.scrollbar.lockClass)})),s("destroy",(()=>{C()})),Object.assign(e.scrollbar,{updateSize:g,setTranslate:f,init:T,destroy:C})},function({swiper:e,extendParams:t,on:s}){t({parallax:{enabled:!1}});const a=(t,s)=>{const{rtl:a}=e,i=d(t),r=a?-1:1,n=i.attr("data-swiper-parallax")||"0";let l=i.attr("data-swiper-parallax-x"),o=i.attr("data-swiper-parallax-y");const p=i.attr("data-swiper-parallax-scale"),c=i.attr("data-swiper-parallax-opacity");if(l||o?(l=l||"0",o=o||"0"):e.isHorizontal()?(l=n,o="0"):(o=n,l="0"),l=l.indexOf("%")>=0?parseInt(l,10)*s*r+"%":l*s*r+"px",o=o.indexOf("%")>=0?parseInt(o,10)*s+"%":o*s+"px",null!=c){const e=c-(c-1)*(1-Math.abs(s));i[0].style.opacity=e}if(null==p)i.transform(`translate3d(${l}, ${o}, 0px)`);else{const e=p-(p-1)*(1-Math.abs(s));i.transform(`translate3d(${l}, ${o}, 0px) scale(${e})`)}},i=()=>{const{$el:t,slides:s,progress:i,snapGrid:r}=e;t.children("[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]").each((e=>{a(e,i)})),s.each(((t,s)=>{let n=t.progress;e.params.slidesPerGroup>1&&"auto"!==e.params.slidesPerView&&(n+=Math.ceil(s/2)-i*(r.length-1)),n=Math.min(Math.max(n,-1),1),d(t).find("[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]").each((e=>{a(e,n)}))}))};s("beforeInit",(()=>{e.params.parallax.enabled&&(e.params.watchSlidesProgress=!0,e.originalParams.watchSlidesProgress=!0)})),s("init",(()=>{e.params.parallax.enabled&&i()})),s("setTranslate",(()=>{e.params.parallax.enabled&&i()})),s("setTransition",((t,s)=>{e.params.parallax.enabled&&((t=e.params.speed)=>{const{$el:s}=e;s.find("[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]").each((e=>{const s=d(e);let a=parseInt(s.attr("data-swiper-parallax-duration"),10)||t;0===t&&(a=0),s.transition(a)}))})(s)}))},function({swiper:e,extendParams:t,on:s,emit:a}){const i=r();t({zoom:{enabled:!1,maxRatio:3,minRatio:1,toggle:!0,containerClass:"swiper-zoom-container",zoomedSlideClass:"swiper-slide-zoomed"}}),e.zoom={enabled:!1};let n,l,o,p=1,c=!1;const u={$slideEl:void 0,slideWidth:void 0,slideHeight:void 0,$imageEl:void 0,$imageWrapEl:void 0,maxRatio:3},m={isTouched:void 0,isMoved:void 0,currentX:void 0,currentY:void 0,minX:void 0,minY:void 0,maxX:void 0,maxY:void 0,width:void 0,height:void 0,startX:void 0,startY:void 0,touchesStart:{},touchesCurrent:{}},f={x:void 0,y:void 0,prevPositionX:void 0,prevPositionY:void 0,prevTime:void 0};let g=1;function v(e){if(e.targetTouches.length<2)return 1;const t=e.targetTouches[0].pageX,s=e.targetTouches[0].pageY,a=e.targetTouches[1].pageX,i=e.targetTouches[1].pageY;return Math.sqrt((a-t)**2+(i-s)**2)}function w(t){const s=e.support,a=e.params.zoom;if(l=!1,o=!1,!s.gestures){if("touchstart"!==t.type||"touchstart"===t.type&&t.targetTouches.length<2)return;l=!0,u.scaleStart=v(t)}u.$slideEl&&u.$slideEl.length||(u.$slideEl=d(t.target).closest(`.${e.params.slideClass}`),0===u.$slideEl.length&&(u.$slideEl=e.slides.eq(e.activeIndex)),u.$imageEl=u.$slideEl.find(`.${a.containerClass}`).eq(0).find("picture, img, svg, canvas, .swiper-zoom-target").eq(0),u.$imageWrapEl=u.$imageEl.parent(`.${a.containerClass}`),u.maxRatio=u.$imageWrapEl.attr("data-swiper-zoom")||a.maxRatio,0!==u.$imageWrapEl.length)?(u.$imageEl&&u.$imageEl.transition(0),c=!0):u.$imageEl=void 0}function b(t){const s=e.support,a=e.params.zoom,i=e.zoom;if(!s.gestures){if("touchmove"!==t.type||"touchmove"===t.type&&t.targetTouches.length<2)return;o=!0,u.scaleMove=v(t)}u.$imageEl&&0!==u.$imageEl.length?(s.gestures?i.scale=t.scale*p:i.scale=u.scaleMove/u.scaleStart*p,i.scale>u.maxRatio&&(i.scale=u.maxRatio-1+(i.scale-u.maxRatio+1)**.5),i.scalem.touchesStart.x))return void(m.isTouched=!1);if(!e.isHorizontal()&&(Math.floor(m.minY)===Math.floor(m.startY)&&m.touchesCurrent.ym.touchesStart.y))return void(m.isTouched=!1)}t.cancelable&&t.preventDefault(),t.stopPropagation(),m.isMoved=!0,m.currentX=m.touchesCurrent.x-m.touchesStart.x+m.startX,m.currentY=m.touchesCurrent.y-m.touchesStart.y+m.startY,m.currentXm.maxX&&(m.currentX=m.maxX-1+(m.currentX-m.maxX+1)**.8),m.currentYm.maxY&&(m.currentY=m.maxY-1+(m.currentY-m.maxY+1)**.8),f.prevPositionX||(f.prevPositionX=m.touchesCurrent.x),f.prevPositionY||(f.prevPositionY=m.touchesCurrent.y),f.prevTime||(f.prevTime=Date.now()),f.x=(m.touchesCurrent.x-f.prevPositionX)/(Date.now()-f.prevTime)/2,f.y=(m.touchesCurrent.y-f.prevPositionY)/(Date.now()-f.prevTime)/2,Math.abs(m.touchesCurrent.x-f.prevPositionX)<2&&(f.x=0),Math.abs(m.touchesCurrent.y-f.prevPositionY)<2&&(f.y=0),f.prevPositionX=m.touchesCurrent.x,f.prevPositionY=m.touchesCurrent.y,f.prevTime=Date.now(),u.$imageWrapEl.transform(`translate3d(${m.currentX}px, ${m.currentY}px,0)`)}}function E(){const t=e.zoom;u.$slideEl&&e.previousIndex!==e.activeIndex&&(u.$imageEl&&u.$imageEl.transform("translate3d(0,0,0) scale(1)"),u.$imageWrapEl&&u.$imageWrapEl.transform("translate3d(0,0,0)"),t.scale=1,p=1,u.$slideEl=void 0,u.$imageEl=void 0,u.$imageWrapEl=void 0)}function T(t){const s=e.zoom,a=e.params.zoom;if(u.$slideEl||(t&&t.target&&(u.$slideEl=d(t.target).closest(`.${e.params.slideClass}`)),u.$slideEl||(e.params.virtual&&e.params.virtual.enabled&&e.virtual?u.$slideEl=e.$wrapperEl.children(`.${e.params.slideActiveClass}`):u.$slideEl=e.slides.eq(e.activeIndex)),u.$imageEl=u.$slideEl.find(`.${a.containerClass}`).eq(0).find("picture, img, svg, canvas, .swiper-zoom-target").eq(0),u.$imageWrapEl=u.$imageEl.parent(`.${a.containerClass}`)),!u.$imageEl||0===u.$imageEl.length||!u.$imageWrapEl||0===u.$imageWrapEl.length)return;let r,n,l,o,c,h,f,g,v,w,b,x,y,E,T,C,$,S;e.params.cssMode&&(e.wrapperEl.style.overflow="hidden",e.wrapperEl.style.touchAction="none"),u.$slideEl.addClass(`${a.zoomedSlideClass}`),void 0===m.touchesStart.x&&t?(r="touchend"===t.type?t.changedTouches[0].pageX:t.pageX,n="touchend"===t.type?t.changedTouches[0].pageY:t.pageY):(r=m.touchesStart.x,n=m.touchesStart.y),s.scale=u.$imageWrapEl.attr("data-swiper-zoom")||a.maxRatio,p=u.$imageWrapEl.attr("data-swiper-zoom")||a.maxRatio,t?($=u.$slideEl[0].offsetWidth,S=u.$slideEl[0].offsetHeight,l=u.$slideEl.offset().left+i.scrollX,o=u.$slideEl.offset().top+i.scrollY,c=l+$/2-r,h=o+S/2-n,v=u.$imageEl[0].offsetWidth,w=u.$imageEl[0].offsetHeight,b=v*s.scale,x=w*s.scale,y=Math.min($/2-b/2,0),E=Math.min(S/2-x/2,0),T=-y,C=-E,f=c*s.scale,g=h*s.scale,fT&&(f=T),gC&&(g=C)):(f=0,g=0),u.$imageWrapEl.transition(300).transform(`translate3d(${f}px, ${g}px,0)`),u.$imageEl.transition(300).transform(`translate3d(0,0,0) scale(${s.scale})`)}function C(){const t=e.zoom,s=e.params.zoom;u.$slideEl||(e.params.virtual&&e.params.virtual.enabled&&e.virtual?u.$slideEl=e.$wrapperEl.children(`.${e.params.slideActiveClass}`):u.$slideEl=e.slides.eq(e.activeIndex),u.$imageEl=u.$slideEl.find(`.${s.containerClass}`).eq(0).find("picture, img, svg, canvas, .swiper-zoom-target").eq(0),u.$imageWrapEl=u.$imageEl.parent(`.${s.containerClass}`)),u.$imageEl&&0!==u.$imageEl.length&&u.$imageWrapEl&&0!==u.$imageWrapEl.length&&(e.params.cssMode&&(e.wrapperEl.style.overflow="",e.wrapperEl.style.touchAction=""),t.scale=1,p=1,u.$imageWrapEl.transition(300).transform("translate3d(0,0,0)"),u.$imageEl.transition(300).transform("translate3d(0,0,0) scale(1)"),u.$slideEl.removeClass(`${s.zoomedSlideClass}`),u.$slideEl=void 0)}function $(t){const s=e.zoom;s.scale&&1!==s.scale?C():T(t)}function S(){const t=e.support;return{passiveListener:!("touchstart"!==e.touchEvents.start||!t.passiveListener||!e.params.passiveListeners)&&{passive:!0,capture:!1},activeListenerWithCapture:!t.passiveListener||{passive:!1,capture:!0}}}function M(){return`.${e.params.slideClass}`}function P(t){const{passiveListener:s}=S(),a=M();e.$wrapperEl[t]("gesturestart",a,w,s),e.$wrapperEl[t]("gesturechange",a,b,s),e.$wrapperEl[t]("gestureend",a,x,s)}function k(){n||(n=!0,P("on"))}function z(){n&&(n=!1,P("off"))}function O(){const t=e.zoom;if(t.enabled)return;t.enabled=!0;const s=e.support,{passiveListener:a,activeListenerWithCapture:i}=S(),r=M();s.gestures?(e.$wrapperEl.on(e.touchEvents.start,k,a),e.$wrapperEl.on(e.touchEvents.end,z,a)):"touchstart"===e.touchEvents.start&&(e.$wrapperEl.on(e.touchEvents.start,r,w,a),e.$wrapperEl.on(e.touchEvents.move,r,b,i),e.$wrapperEl.on(e.touchEvents.end,r,x,a),e.touchEvents.cancel&&e.$wrapperEl.on(e.touchEvents.cancel,r,x,a)),e.$wrapperEl.on(e.touchEvents.move,`.${e.params.zoom.containerClass}`,y,i)}function I(){const t=e.zoom;if(!t.enabled)return;const s=e.support;t.enabled=!1;const{passiveListener:a,activeListenerWithCapture:i}=S(),r=M();s.gestures?(e.$wrapperEl.off(e.touchEvents.start,k,a),e.$wrapperEl.off(e.touchEvents.end,z,a)):"touchstart"===e.touchEvents.start&&(e.$wrapperEl.off(e.touchEvents.start,r,w,a),e.$wrapperEl.off(e.touchEvents.move,r,b,i),e.$wrapperEl.off(e.touchEvents.end,r,x,a),e.touchEvents.cancel&&e.$wrapperEl.off(e.touchEvents.cancel,r,x,a)),e.$wrapperEl.off(e.touchEvents.move,`.${e.params.zoom.containerClass}`,y,i)}Object.defineProperty(e.zoom,"scale",{get:()=>g,set(e){if(g!==e){const t=u.$imageEl?u.$imageEl[0]:void 0,s=u.$slideEl?u.$slideEl[0]:void 0;a("zoomChange",e,t,s)}g=e}}),s("init",(()=>{e.params.zoom.enabled&&O()})),s("destroy",(()=>{I()})),s("touchStart",((t,s)=>{e.zoom.enabled&&function(t){const s=e.device;u.$imageEl&&0!==u.$imageEl.length&&(m.isTouched||(s.android&&t.cancelable&&t.preventDefault(),m.isTouched=!0,m.touchesStart.x="touchstart"===t.type?t.targetTouches[0].pageX:t.pageX,m.touchesStart.y="touchstart"===t.type?t.targetTouches[0].pageY:t.pageY))}(s)})),s("touchEnd",((t,s)=>{e.zoom.enabled&&function(){const t=e.zoom;if(!u.$imageEl||0===u.$imageEl.length)return;if(!m.isTouched||!m.isMoved)return m.isTouched=!1,void(m.isMoved=!1);m.isTouched=!1,m.isMoved=!1;let s=300,a=300;const i=f.x*s,r=m.currentX+i,n=f.y*a,l=m.currentY+n;0!==f.x&&(s=Math.abs((r-m.currentX)/f.x)),0!==f.y&&(a=Math.abs((l-m.currentY)/f.y));const o=Math.max(s,a);m.currentX=r,m.currentY=l;const d=m.width*t.scale,p=m.height*t.scale;m.minX=Math.min(u.slideWidth/2-d/2,0),m.maxX=-m.minX,m.minY=Math.min(u.slideHeight/2-p/2,0),m.maxY=-m.minY,m.currentX=Math.max(Math.min(m.currentX,m.maxX),m.minX),m.currentY=Math.max(Math.min(m.currentY,m.maxY),m.minY),u.$imageWrapEl.transition(o).transform(`translate3d(${m.currentX}px, ${m.currentY}px,0)`)}()})),s("doubleTap",((t,s)=>{!e.animating&&e.params.zoom.enabled&&e.zoom.enabled&&e.params.zoom.toggle&&$(s)})),s("transitionEnd",(()=>{e.zoom.enabled&&e.params.zoom.enabled&&E()})),s("slideChange",(()=>{e.zoom.enabled&&e.params.zoom.enabled&&e.params.cssMode&&E()})),Object.assign(e.zoom,{enable:O,disable:I,in:T,out:C,toggle:$})},function({swiper:e,extendParams:t,on:s,emit:a}){t({lazy:{checkInView:!1,enabled:!1,loadPrevNext:!1,loadPrevNextAmount:1,loadOnTransitionStart:!1,scrollingElement:"",elementClass:"swiper-lazy",loadingClass:"swiper-lazy-loading",loadedClass:"swiper-lazy-loaded",preloaderClass:"swiper-lazy-preloader"}}),e.lazy={};let i=!1,n=!1;function l(t,s=!0){const i=e.params.lazy;if(void 0===t)return;if(0===e.slides.length)return;const r=e.virtual&&e.params.virtual.enabled?e.$wrapperEl.children(`.${e.params.slideClass}[data-swiper-slide-index="${t}"]`):e.slides.eq(t),n=r.find(`.${i.elementClass}:not(.${i.loadedClass}):not(.${i.loadingClass})`);!r.hasClass(i.elementClass)||r.hasClass(i.loadedClass)||r.hasClass(i.loadingClass)||n.push(r[0]),0!==n.length&&n.each((t=>{const n=d(t);n.addClass(i.loadingClass);const o=n.attr("data-background"),p=n.attr("data-src"),c=n.attr("data-srcset"),u=n.attr("data-sizes"),h=n.parent("picture");e.loadImage(n[0],p||o,c,u,!1,(()=>{if(null!=e&&e&&(!e||e.params)&&!e.destroyed){if(o?(n.css("background-image",`url("${o}")`),n.removeAttr("data-background")):(c&&(n.attr("srcset",c),n.removeAttr("data-srcset")),u&&(n.attr("sizes",u),n.removeAttr("data-sizes")),h.length&&h.children("source").each((e=>{const t=d(e);t.attr("data-srcset")&&(t.attr("srcset",t.attr("data-srcset")),t.removeAttr("data-srcset"))})),p&&(n.attr("src",p),n.removeAttr("data-src"))),n.addClass(i.loadedClass).removeClass(i.loadingClass),r.find(`.${i.preloaderClass}`).remove(),e.params.loop&&s){const t=r.attr("data-swiper-slide-index");if(r.hasClass(e.params.slideDuplicateClass)){l(e.$wrapperEl.children(`[data-swiper-slide-index="${t}"]:not(.${e.params.slideDuplicateClass})`).index(),!1)}else{l(e.$wrapperEl.children(`.${e.params.slideDuplicateClass}[data-swiper-slide-index="${t}"]`).index(),!1)}}a("lazyImageReady",r[0],n[0]),e.params.autoHeight&&e.updateAutoHeight()}})),a("lazyImageLoad",r[0],n[0])}))}function o(){const{$wrapperEl:t,params:s,slides:a,activeIndex:i}=e,r=e.virtual&&s.virtual.enabled,o=s.lazy;let p=s.slidesPerView;function c(e){if(r){if(t.children(`.${s.slideClass}[data-swiper-slide-index="${e}"]`).length)return!0}else if(a[e])return!0;return!1}function u(e){return r?d(e).attr("data-swiper-slide-index"):d(e).index()}if("auto"===p&&(p=0),n||(n=!0),e.params.watchSlidesProgress)t.children(`.${s.slideVisibleClass}`).each((e=>{l(r?d(e).attr("data-swiper-slide-index"):d(e).index())}));else if(p>1)for(let e=i;e1||o.loadPrevNextAmount&&o.loadPrevNextAmount>1){const e=o.loadPrevNextAmount,t=p,s=Math.min(i+t+Math.max(e,t),a.length),r=Math.max(i-Math.max(t,e),0);for(let e=i+p;e0&&l(u(e));const a=t.children(`.${s.slidePrevClass}`);a.length>0&&l(u(a))}}function p(){const t=r();if(!e||e.destroyed)return;const s=e.params.lazy.scrollingElement?d(e.params.lazy.scrollingElement):d(t),a=s[0]===t,n=a?t.innerWidth:s[0].offsetWidth,l=a?t.innerHeight:s[0].offsetHeight,c=e.$el.offset(),{rtlTranslate:u}=e;let h=!1;u&&(c.left-=e.$el[0].scrollLeft);const m=[[c.left,c.top],[c.left+e.width,c.top],[c.left,c.top+e.height],[c.left+e.width,c.top+e.height]];for(let e=0;e=0&&t[0]<=n&&t[1]>=0&&t[1]<=l){if(0===t[0]&&0===t[1])continue;h=!0}}const f=!("touchstart"!==e.touchEvents.start||!e.support.passiveListener||!e.params.passiveListeners)&&{passive:!0,capture:!1};h?(o(),s.off("scroll",p,f)):i||(i=!0,s.on("scroll",p,f))}s("beforeInit",(()=>{e.params.lazy.enabled&&e.params.preloadImages&&(e.params.preloadImages=!1)})),s("init",(()=>{e.params.lazy.enabled&&(e.params.lazy.checkInView?p():o())})),s("scroll",(()=>{e.params.freeMode&&e.params.freeMode.enabled&&!e.params.freeMode.sticky&&o()})),s("scrollbarDragMove resize _freeModeNoMomentumRelease",(()=>{e.params.lazy.enabled&&(e.params.lazy.checkInView?p():o())})),s("transitionStart",(()=>{e.params.lazy.enabled&&(e.params.lazy.loadOnTransitionStart||!e.params.lazy.loadOnTransitionStart&&!n)&&(e.params.lazy.checkInView?p():o())})),s("transitionEnd",(()=>{e.params.lazy.enabled&&!e.params.lazy.loadOnTransitionStart&&(e.params.lazy.checkInView?p():o())})),s("slideChange",(()=>{const{lazy:t,cssMode:s,watchSlidesProgress:a,touchReleaseOnEdges:i,resistanceRatio:r}=e.params;t.enabled&&(s||a&&(i||0===r))&&o()})),Object.assign(e.lazy,{load:o,loadInSlide:l})},function({swiper:e,extendParams:t,on:s}){function a(e,t){const s=function(){let e,t,s;return(a,i)=>{for(t=-1,e=a.length;e-t>1;)s=e+t>>1,a[s]<=i?t=s:e=s;return e}}();let a,i;return this.x=e,this.y=t,this.lastIndex=e.length-1,this.interpolate=function(e){return e?(i=s(this.x,e),a=i-1,(e-this.x[a])*(this.y[i]-this.y[a])/(this.x[i]-this.x[a])+this.y[a]):0},this}function i(){e.controller.control&&e.controller.spline&&(e.controller.spline=void 0,delete e.controller.spline)}t({controller:{control:void 0,inverse:!1,by:"slide"}}),e.controller={control:void 0},s("beforeInit",(()=>{e.controller.control=e.params.controller.control})),s("update",(()=>{i()})),s("resize",(()=>{i()})),s("observerUpdate",(()=>{i()})),s("setTranslate",((t,s,a)=>{e.controller.control&&e.controller.setTranslate(s,a)})),s("setTransition",((t,s,a)=>{e.controller.control&&e.controller.setTransition(s,a)})),Object.assign(e.controller,{setTranslate:function(t,s){const i=e.controller.control;let r,n;const l=e.constructor;function o(t){const s=e.rtlTranslate?-e.translate:e.translate;"slide"===e.params.controller.by&&(!function(t){e.controller.spline||(e.controller.spline=e.params.loop?new a(e.slidesGrid,t.slidesGrid):new a(e.snapGrid,t.snapGrid))}(t),n=-e.controller.spline.interpolate(-s)),n&&"container"!==e.params.controller.by||(r=(t.maxTranslate()-t.minTranslate())/(e.maxTranslate()-e.minTranslate()),n=(s-e.minTranslate())*r+t.minTranslate()),e.params.controller.inverse&&(n=t.maxTranslate()-n),t.updateProgress(n),t.setTranslate(n,e),t.updateActiveIndex(),t.updateSlidesClasses()}if(Array.isArray(i))for(let e=0;e{s.updateAutoHeight()})),s.$wrapperEl.transitionEnd((()=>{i&&(s.params.loop&&"slide"===e.params.controller.by&&s.loopFix(),s.transitionEnd())})))}if(Array.isArray(i))for(r=0;r0&&(e.isBeginning?(c(s),n(s)):(u(s),r(s))),t&&t.length>0&&(e.isEnd?(c(t),n(t)):(u(t),r(t)))}function f(){return e.pagination&&e.pagination.bullets&&e.pagination.bullets.length}function g(){return f()&&e.params.pagination.clickable}const v=(e,t,s)=>{r(e),"BUTTON"!==e[0].tagName&&(l(e,"button"),e.on("keydown",h)),p(e,s),function(e,t){e.attr("aria-controls",t)}(e,t)};function w(){const t=e.params.a11y;e.$el.append(a);const s=e.$el;t.containerRoleDescriptionMessage&&o(s,t.containerRoleDescriptionMessage),t.containerMessage&&p(s,t.containerMessage);const i=e.$wrapperEl,r=i.attr("id")||`swiper-wrapper-${function(e=16){return"x".repeat(e).replace(/x/g,(()=>Math.round(16*Math.random()).toString(16)))}(16)}`,n=e.params.autoplay&&e.params.autoplay.enabled?"off":"polite";var c;c=r,i.attr("id",c),function(e,t){e.attr("aria-live",t)}(i,n),t.itemRoleDescriptionMessage&&o(d(e.slides),t.itemRoleDescriptionMessage),l(d(e.slides),t.slideRole);const u=e.params.loop?e.slides.filter((t=>!t.classList.contains(e.params.slideDuplicateClass))).length:e.slides.length;let m,f;e.slides.each(((s,a)=>{const i=d(s),r=e.params.loop?parseInt(i.attr("data-swiper-slide-index"),10):a;p(i,t.slideLabelMessage.replace(/\{\{index\}\}/,r+1).replace(/\{\{slidesLength\}\}/,u))})),e.navigation&&e.navigation.$nextEl&&(m=e.navigation.$nextEl),e.navigation&&e.navigation.$prevEl&&(f=e.navigation.$prevEl),m&&m.length&&v(m,r,t.nextSlideMessage),f&&f.length&&v(f,r,t.prevSlideMessage),g()&&e.pagination.$el.on("keydown",W(e.params.pagination.bulletClass),h)}s("beforeInit",(()=>{a=d(``)})),s("afterInit",(()=>{e.params.a11y.enabled&&(w(),m())})),s("toEdge",(()=>{e.params.a11y.enabled&&m()})),s("fromEdge",(()=>{e.params.a11y.enabled&&m()})),s("paginationUpdate",(()=>{e.params.a11y.enabled&&function(){const t=e.params.a11y;f()&&e.pagination.bullets.each((s=>{const a=d(s);e.params.pagination.clickable&&(r(a),e.params.pagination.renderBullet||(l(a,"button"),p(a,t.paginationBulletMessage.replace(/\{\{index\}\}/,a.index()+1)))),a.is(`.${e.params.pagination.bulletActiveClass}`)?a.attr("aria-current","true"):a.removeAttr("aria-current")}))}()})),s("destroy",(()=>{e.params.a11y.enabled&&function(){let t,s;a&&a.length>0&&a.remove(),e.navigation&&e.navigation.$nextEl&&(t=e.navigation.$nextEl),e.navigation&&e.navigation.$prevEl&&(s=e.navigation.$prevEl),t&&t.off("keydown",h),s&&s.off("keydown",h),g()&&e.pagination.$el.off("keydown",W(e.params.pagination.bulletClass),h)}()}))},function({swiper:e,extendParams:t,on:s}){t({history:{enabled:!1,root:"",replaceState:!1,key:"slides"}});let a=!1,i={};const n=e=>e.toString().replace(/\s+/g,"-").replace(/[^\w-]+/g,"").replace(/--+/g,"-").replace(/^-+/,"").replace(/-+$/,""),l=e=>{const t=r();let s;s=e?new URL(e):t.location;const a=s.pathname.slice(1).split("/").filter((e=>""!==e)),i=a.length;return{key:a[i-2],value:a[i-1]}},o=(t,s)=>{const i=r();if(!a||!e.params.history.enabled)return;let l;l=e.params.url?new URL(e.params.url):i.location;const o=e.slides.eq(s);let d=n(o.attr("data-history"));if(e.params.history.root.length>0){let s=e.params.history.root;"/"===s[s.length-1]&&(s=s.slice(0,s.length-1)),d=`${s}/${t}/${d}`}else l.pathname.includes(t)||(d=`${t}/${d}`);const p=i.history.state;p&&p.value===d||(e.params.history.replaceState?i.history.replaceState({value:d},null,d):i.history.pushState({value:d},null,d))},d=(t,s,a)=>{if(s)for(let i=0,r=e.slides.length;i{i=l(e.params.url),d(e.params.speed,e.paths.value,!1)};s("init",(()=>{e.params.history.enabled&&(()=>{const t=r();if(e.params.history){if(!t.history||!t.history.pushState)return e.params.history.enabled=!1,void(e.params.hashNavigation.enabled=!0);a=!0,i=l(e.params.url),(i.key||i.value)&&(d(0,i.value,e.params.runCallbacksOnInit),e.params.history.replaceState||t.addEventListener("popstate",p))}})()})),s("destroy",(()=>{e.params.history.enabled&&(()=>{const t=r();e.params.history.replaceState||t.removeEventListener("popstate",p)})()})),s("transitionEnd _freeModeNoMomentumRelease",(()=>{a&&o(e.params.history.key,e.activeIndex)})),s("slideChange",(()=>{a&&e.params.cssMode&&o(e.params.history.key,e.activeIndex)}))},function({swiper:e,extendParams:t,emit:s,on:i}){let n=!1;const l=a(),o=r();t({hashNavigation:{enabled:!1,replaceState:!1,watchState:!1}});const p=()=>{s("hashChange");const t=l.location.hash.replace("#","");if(t!==e.slides.eq(e.activeIndex).attr("data-hash")){const s=e.$wrapperEl.children(`.${e.params.slideClass}[data-hash="${t}"]`).index();if(void 0===s)return;e.slideTo(s)}},c=()=>{if(n&&e.params.hashNavigation.enabled)if(e.params.hashNavigation.replaceState&&o.history&&o.history.replaceState)o.history.replaceState(null,null,`#${e.slides.eq(e.activeIndex).attr("data-hash")}`||""),s("hashSet");else{const t=e.slides.eq(e.activeIndex),a=t.attr("data-hash")||t.attr("data-history");l.location.hash=a||"",s("hashSet")}};i("init",(()=>{e.params.hashNavigation.enabled&&(()=>{if(!e.params.hashNavigation.enabled||e.params.history&&e.params.history.enabled)return;n=!0;const t=l.location.hash.replace("#","");if(t){const s=0;for(let a=0,i=e.slides.length;a{e.params.hashNavigation.enabled&&e.params.hashNavigation.watchState&&d(o).off("hashchange",p)})),i("transitionEnd _freeModeNoMomentumRelease",(()=>{n&&c()})),i("slideChange",(()=>{n&&e.params.cssMode&&c()}))},function({swiper:e,extendParams:t,on:s,emit:i}){let r;function n(){const t=e.slides.eq(e.activeIndex);let s=e.params.autoplay.delay;t.attr("data-swiper-autoplay")&&(s=t.attr("data-swiper-autoplay")||e.params.autoplay.delay),clearTimeout(r),r=c((()=>{let t;e.params.autoplay.reverseDirection?e.params.loop?(e.loopFix(),t=e.slidePrev(e.params.speed,!0,!0),i("autoplay")):e.isBeginning?e.params.autoplay.stopOnLastSlide?o():(t=e.slideTo(e.slides.length-1,e.params.speed,!0,!0),i("autoplay")):(t=e.slidePrev(e.params.speed,!0,!0),i("autoplay")):e.params.loop?(e.loopFix(),t=e.slideNext(e.params.speed,!0,!0),i("autoplay")):e.isEnd?e.params.autoplay.stopOnLastSlide?o():(t=e.slideTo(0,e.params.speed,!0,!0),i("autoplay")):(t=e.slideNext(e.params.speed,!0,!0),i("autoplay")),(e.params.cssMode&&e.autoplay.running||!1===t)&&n()}),s)}function l(){return void 0===r&&(!e.autoplay.running&&(e.autoplay.running=!0,i("autoplayStart"),n(),!0))}function o(){return!!e.autoplay.running&&(void 0!==r&&(r&&(clearTimeout(r),r=void 0),e.autoplay.running=!1,i("autoplayStop"),!0))}function d(t){e.autoplay.running&&(e.autoplay.paused||(r&&clearTimeout(r),e.autoplay.paused=!0,0!==t&&e.params.autoplay.waitForTransition?["transitionend","webkitTransitionEnd"].forEach((t=>{e.$wrapperEl[0].addEventListener(t,u)})):(e.autoplay.paused=!1,n())))}function p(){const t=a();"hidden"===t.visibilityState&&e.autoplay.running&&d(),"visible"===t.visibilityState&&e.autoplay.paused&&(n(),e.autoplay.paused=!1)}function u(t){e&&!e.destroyed&&e.$wrapperEl&&t.target===e.$wrapperEl[0]&&(["transitionend","webkitTransitionEnd"].forEach((t=>{e.$wrapperEl[0].removeEventListener(t,u)})),e.autoplay.paused=!1,e.autoplay.running?n():o())}function h(){e.params.autoplay.disableOnInteraction?o():d(),["transitionend","webkitTransitionEnd"].forEach((t=>{e.$wrapperEl[0].removeEventListener(t,u)}))}function m(){e.params.autoplay.disableOnInteraction||(e.autoplay.paused=!1,n())}e.autoplay={running:!1,paused:!1},t({autoplay:{enabled:!1,delay:3e3,waitForTransition:!0,disableOnInteraction:!0,stopOnLastSlide:!1,reverseDirection:!1,pauseOnMouseEnter:!1}}),s("init",(()=>{if(e.params.autoplay.enabled){l();a().addEventListener("visibilitychange",p),e.params.autoplay.pauseOnMouseEnter&&(e.$el.on("mouseenter",h),e.$el.on("mouseleave",m))}})),s("beforeTransitionStart",((t,s,a)=>{e.autoplay.running&&(a||!e.params.autoplay.disableOnInteraction?e.autoplay.pause(s):o())})),s("sliderFirstMove",(()=>{e.autoplay.running&&(e.params.autoplay.disableOnInteraction?o():d())})),s("touchEnd",(()=>{e.params.cssMode&&e.autoplay.paused&&!e.params.autoplay.disableOnInteraction&&n()})),s("destroy",(()=>{e.$el.off("mouseenter",h),e.$el.off("mouseleave",m),e.autoplay.running&&o();a().removeEventListener("visibilitychange",p)})),Object.assign(e.autoplay,{pause:d,run:n,start:l,stop:o})},function({swiper:e,extendParams:t,on:s}){t({thumbs:{swiper:null,multipleActiveThumbs:!0,autoScrollOffset:0,slideThumbActiveClass:"swiper-slide-thumb-active",thumbsContainerClass:"swiper-thumbs"}});let a=!1,i=!1;function r(){const t=e.thumbs.swiper;if(!t)return;const s=t.clickedIndex,a=t.clickedSlide;if(a&&d(a).hasClass(e.params.thumbs.slideThumbActiveClass))return;if(null==s)return;let i;if(i=t.params.loop?parseInt(d(t.clickedSlide).attr("data-swiper-slide-index"),10):s,e.params.loop){let t=e.activeIndex;e.slides.eq(t).hasClass(e.params.slideDuplicateClass)&&(e.loopFix(),e._clientLeft=e.$wrapperEl[0].clientLeft,t=e.activeIndex);const s=e.slides.eq(t).prevAll(`[data-swiper-slide-index="${i}"]`).eq(0).index(),a=e.slides.eq(t).nextAll(`[data-swiper-slide-index="${i}"]`).eq(0).index();i=void 0===s?a:void 0===a?s:a-t1?a:o:a-oe.previousIndex?"next":"prev"}else n=e.realIndex,l=n>e.previousIndex?"next":"prev";r&&(n+="next"===l?i:-1*i),s.visibleSlidesIndexes&&s.visibleSlidesIndexes.indexOf(n)<0&&(s.params.centeredSlides?n=n>o?n-Math.floor(a/2)+1:n+Math.floor(a/2)-1:n>o&&s.params.slidesPerGroup,s.slideTo(n,t?0:void 0))}let n=1;const l=e.params.thumbs.slideThumbActiveClass;if(e.params.slidesPerView>1&&!e.params.centeredSlides&&(n=e.params.slidesPerView),e.params.thumbs.multipleActiveThumbs||(n=1),n=Math.floor(n),s.slides.removeClass(l),s.params.loop||s.params.virtual&&s.params.virtual.enabled)for(let t=0;t{const{thumbs:t}=e.params;t&&t.swiper&&(n(),l(!0))})),s("slideChange update resize observerUpdate",(()=>{e.thumbs.swiper&&l()})),s("setTransition",((t,s)=>{const a=e.thumbs.swiper;a&&a.setTransition(s)})),s("beforeDestroy",(()=>{const t=e.thumbs.swiper;t&&i&&t&&t.destroy()})),Object.assign(e.thumbs,{init:n,update:l})},function({swiper:e,extendParams:t,emit:s,once:a}){t({freeMode:{enabled:!1,momentum:!0,momentumRatio:1,momentumBounce:!0,momentumBounceRatio:1,momentumVelocityRatio:1,sticky:!1,minimumVelocity:.02}}),Object.assign(e,{freeMode:{onTouchMove:function(){const{touchEventsData:t,touches:s}=e;0===t.velocities.length&&t.velocities.push({position:s[e.isHorizontal()?"startX":"startY"],time:t.touchStartTime}),t.velocities.push({position:s[e.isHorizontal()?"currentX":"currentY"],time:u()})},onTouchEnd:function({currentPos:t}){const{params:i,$wrapperEl:r,rtlTranslate:n,snapGrid:l,touchEventsData:o}=e,d=u()-o.touchStartTime;if(t<-e.minTranslate())e.slideTo(e.activeIndex);else if(t>-e.maxTranslate())e.slides.length1){const t=o.velocities.pop(),s=o.velocities.pop(),a=t.position-s.position,r=t.time-s.time;e.velocity=a/r,e.velocity/=2,Math.abs(e.velocity)150||u()-t.time>300)&&(e.velocity=0)}else e.velocity=0;e.velocity*=i.freeMode.momentumVelocityRatio,o.velocities.length=0;let t=1e3*i.freeMode.momentumRatio;const d=e.velocity*t;let p=e.translate+d;n&&(p=-p);let c,h=!1;const m=20*Math.abs(e.velocity)*i.freeMode.momentumBounceRatio;let f;if(pe.minTranslate())i.freeMode.momentumBounce?(p-e.minTranslate()>m&&(p=e.minTranslate()+m),c=e.minTranslate(),h=!0,o.allowMomentumBounce=!0):p=e.minTranslate(),i.loop&&i.centeredSlides&&(f=!0);else if(i.freeMode.sticky){let t;for(let e=0;e-p){t=e;break}p=Math.abs(l[t]-p){e.loopFix()})),0!==e.velocity){if(t=n?Math.abs((-p-e.translate)/e.velocity):Math.abs((p-e.translate)/e.velocity),i.freeMode.sticky){const s=Math.abs((n?-p:p)-e.translate),a=e.slidesSizesGrid[e.activeIndex];t=s{e&&!e.destroyed&&o.allowMomentumBounce&&(s("momentumBounce"),e.setTransition(i.speed),setTimeout((()=>{e.setTranslate(c),r.transitionEnd((()=>{e&&!e.destroyed&&e.transitionEnd()}))}),0))}))):e.velocity?(s("_freeModeNoMomentumRelease"),e.updateProgress(p),e.setTransition(t),e.setTranslate(p),e.transitionStart(!0,e.swipeDirection),e.animating||(e.animating=!0,r.transitionEnd((()=>{e&&!e.destroyed&&e.transitionEnd()})))):e.updateProgress(p),e.updateActiveIndex(),e.updateSlidesClasses()}else{if(i.freeMode.sticky)return void e.slideToClosest();i.freeMode&&s("_freeModeNoMomentumRelease")}(!i.freeMode.momentum||d>=i.longSwipesMs)&&(e.updateProgress(),e.updateActiveIndex(),e.updateSlidesClasses())}}}})},function({swiper:e,extendParams:t}){let s,a,i;t({grid:{rows:1,fill:"column"}}),e.grid={initSlides:t=>{const{slidesPerView:r}=e.params,{rows:n,fill:l}=e.params.grid;a=s/n,i=Math.floor(t/n),s=Math.floor(t/n)===t/n?t:Math.ceil(t/n)*n,"auto"!==r&&"row"===l&&(s=Math.max(s,r*n))},updateSlide:(t,r,n,l)=>{const{slidesPerGroup:o,spaceBetween:d}=e.params,{rows:p,fill:c}=e.params.grid;let u,h,m;if("row"===c&&o>1){const e=Math.floor(t/(o*p)),a=t-p*o*e,i=0===e?o:Math.min(Math.ceil((n-e*p*o)/p),o);m=Math.floor(a/i),h=a-m*i+e*o,u=h+m*s/p,r.css({"-webkit-order":u,order:u})}else"column"===c?(h=Math.floor(t/p),m=t-h*p,(h>i||h===i&&m===p-1)&&(m+=1,m>=p&&(m=0,h+=1))):(m=Math.floor(t/a),h=t-m*a);r.css(l("margin-top"),0!==m?d&&`${d}px`:"")},updateWrapperSize:(t,a,i)=>{const{spaceBetween:r,centeredSlides:n,roundLengths:l}=e.params,{rows:o}=e.params.grid;if(e.virtualSize=(t+r)*s,e.virtualSize=Math.ceil(e.virtualSize/o)-r,e.$wrapperEl.css({[i("width")]:`${e.virtualSize+r}px`}),n){a.splice(0,a.length);const t=[];for(let s=0;s{const{slides:t}=e,s=e.params.fadeEffect;for(let a=0;a{const{transformEl:s}=e.params.fadeEffect;(s?e.slides.find(s):e.slides).transition(t),K({swiper:e,duration:t,transformEl:s,allSlides:!0})},overwriteParams:()=>({slidesPerView:1,slidesPerGroup:1,watchSlidesProgress:!0,spaceBetween:0,virtualTranslate:!e.params.cssMode})})},function({swiper:e,extendParams:t,on:s}){t({cubeEffect:{slideShadows:!0,shadow:!0,shadowOffset:20,shadowScale:.94}}),F({effect:"cube",swiper:e,on:s,setTranslate:()=>{const{$el:t,$wrapperEl:s,slides:a,width:i,height:r,rtlTranslate:n,size:l,browser:o}=e,p=e.params.cubeEffect,c=e.isHorizontal(),u=e.virtual&&e.params.virtual.enabled;let h,m=0;p.shadow&&(c?(h=s.find(".swiper-cube-shadow"),0===h.length&&(h=d('
    '),s.append(h)),h.css({height:`${i}px`})):(h=t.find(".swiper-cube-shadow"),0===h.length&&(h=d('
    '),t.append(h))));for(let e=0;e-1&&(m=90*s+90*o,n&&(m=90*-s-90*o)),t.transform(v),p.slideShadows){let e=c?t.find(".swiper-slide-shadow-left"):t.find(".swiper-slide-shadow-top"),s=c?t.find(".swiper-slide-shadow-right"):t.find(".swiper-slide-shadow-bottom");0===e.length&&(e=d(`
    `),t.append(e)),0===s.length&&(s=d(`
    `),t.append(s)),e.length&&(e[0].style.opacity=Math.max(-o,0)),s.length&&(s[0].style.opacity=Math.max(o,0))}}if(s.css({"-webkit-transform-origin":`50% 50% -${l/2}px`,"transform-origin":`50% 50% -${l/2}px`}),p.shadow)if(c)h.transform(`translate3d(0px, ${i/2+p.shadowOffset}px, ${-i/2}px) rotateX(90deg) rotateZ(0deg) scale(${p.shadowScale})`);else{const e=Math.abs(m)-90*Math.floor(Math.abs(m)/90),t=1.5-(Math.sin(2*e*Math.PI/360)/2+Math.cos(2*e*Math.PI/360)/2),s=p.shadowScale,a=p.shadowScale/t,i=p.shadowOffset;h.transform(`scale3d(${s}, 1, ${a}) translate3d(0px, ${r/2+i}px, ${-r/2/a}px) rotateX(-90deg)`)}const f=o.isSafari||o.isWebView?-l/2:0;s.transform(`translate3d(0px,0,${f}px) rotateX(${e.isHorizontal()?0:m}deg) rotateY(${e.isHorizontal()?-m:0}deg)`)},setTransition:t=>{const{$el:s,slides:a}=e;a.transition(t).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(t),e.params.cubeEffect.shadow&&!e.isHorizontal()&&s.find(".swiper-cube-shadow").transition(t)},perspective:()=>!0,overwriteParams:()=>({slidesPerView:1,slidesPerGroup:1,watchSlidesProgress:!0,resistanceRatio:0,spaceBetween:0,centeredSlides:!1,virtualTranslate:!0})})},function({swiper:e,extendParams:t,on:s}){t({flipEffect:{slideShadows:!0,limitRotation:!0,transformEl:null}}),F({effect:"flip",swiper:e,on:s,setTranslate:()=>{const{slides:t,rtlTranslate:s}=e,a=e.params.flipEffect;for(let i=0;i{const{transformEl:s}=e.params.flipEffect;(s?e.slides.find(s):e.slides).transition(t).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(t),K({swiper:e,duration:t,transformEl:s})},perspective:()=>!0,overwriteParams:()=>({slidesPerView:1,slidesPerGroup:1,watchSlidesProgress:!0,spaceBetween:0,virtualTranslate:!e.params.cssMode})})},function({swiper:e,extendParams:t,on:s}){t({coverflowEffect:{rotate:50,stretch:0,depth:100,scale:1,modifier:1,slideShadows:!0,transformEl:null}}),F({effect:"coverflow",swiper:e,on:s,setTranslate:()=>{const{width:t,height:s,slides:a,slidesSizesGrid:i}=e,r=e.params.coverflowEffect,n=e.isHorizontal(),l=e.translate,o=n?t/2-l:s/2-l,d=n?r.rotate:-r.rotate,p=r.depth;for(let e=0,t=a.length;e0?l:0),s.length&&(s[0].style.opacity=-l>0?-l:0)}}},setTransition:t=>{const{transformEl:s}=e.params.coverflowEffect;(s?e.slides.find(s):e.slides).transition(t).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(t)},perspective:()=>!0,overwriteParams:()=>({watchSlidesProgress:!0})})},function({swiper:e,extendParams:t,on:s}){t({creativeEffect:{transformEl:null,limitProgress:1,shadowPerProgress:!1,progressMultiplier:1,perspective:!0,prev:{translate:[0,0,0],rotate:[0,0,0],opacity:1,scale:1},next:{translate:[0,0,0],rotate:[0,0,0],opacity:1,scale:1}}});const a=e=>"string"==typeof e?e:`${e}px`;F({effect:"creative",swiper:e,on:s,setTranslate:()=>{const{slides:t,$wrapperEl:s,slidesSizesGrid:i}=e,r=e.params.creativeEffect,{progressMultiplier:n}=r,l=e.params.centeredSlides;if(l){const t=i[0]/2-e.params.slidesOffsetBefore||0;s.transform(`translateX(calc(50% - ${t}px))`)}for(let s=0;s0&&(f=r.prev,m=!0),u.forEach(((e,t)=>{u[t]=`calc(${e}px + (${a(f.translate[t])} * ${Math.abs(d*n)}))`})),h.forEach(((e,t)=>{h[t]=f.rotate[t]*Math.abs(d*n)})),i[0].style.zIndex=-Math.abs(Math.round(o))+t.length;const g=u.join(", "),v=`rotateX(${h[0]}deg) rotateY(${h[1]}deg) rotateZ(${h[2]}deg)`,w=p<0?`scale(${1+(1-f.scale)*p*n})`:`scale(${1-(1-f.scale)*p*n})`,b=p<0?1+(1-f.opacity)*p*n:1-(1-f.opacity)*p*n,x=`translate3d(${g}) ${v} ${w}`;if(m&&f.shadow||!m){let e=i.children(".swiper-slide-shadow");if(0===e.length&&f.shadow&&(e=Z(r,i)),e.length){const t=r.shadowPerProgress?d*(1/r.limitProgress):d;e[0].style.opacity=Math.min(Math.max(Math.abs(t),0),1)}}const y=U(r,i);y.transform(x).css({opacity:b}),f.origin&&y.css("transform-origin",f.origin)}},setTransition:t=>{const{transformEl:s}=e.params.creativeEffect;(s?e.slides.find(s):e.slides).transition(t).find(".swiper-slide-shadow").transition(t),K({swiper:e,duration:t,transformEl:s,allSlides:!0})},perspective:()=>e.params.creativeEffect.perspective,overwriteParams:()=>({watchSlidesProgress:!0,virtualTranslate:!e.params.cssMode})})},function({swiper:e,extendParams:t,on:s}){t({cardsEffect:{slideShadows:!0,transformEl:null}}),F({effect:"cards",swiper:e,on:s,setTranslate:()=>{const{slides:t,activeIndex:s}=e,a=e.params.cardsEffect,{startTranslate:i,isTouched:r}=e.touchEventsData,n=e.translate;for(let l=0;l0&&p<1&&(r||e.params.cssMode)&&n-1&&(r||e.params.cssMode)&&n>i;if(w||b){const e=(1-Math.abs((Math.abs(p)-.5)/.5))**.5;g+=-28*p*e,f+=-.5*e,v+=96*e,h=-25*e*Math.abs(p)+"%"}if(u=p<0?`calc(${u}px + (${v*Math.abs(p)}%))`:p>0?`calc(${u}px + (-${v*Math.abs(p)}%))`:`${u}px`,!e.isHorizontal()){const e=h;h=u,u=e}const x=`\n translate3d(${u}, ${h}, ${m}px)\n rotateZ(${g}deg)\n scale(${p<0?""+(1+(1-f)*p):""+(1-(1-f)*p)})\n `;if(a.slideShadows){let e=o.find(".swiper-slide-shadow");0===e.length&&(e=Z(a,o)),e.length&&(e[0].style.opacity=Math.min(Math.max((Math.abs(p)-.5)/.5,0),1))}o[0].style.zIndex=-Math.abs(Math.round(d))+t.length;U(a,o).transform(x)}},setTransition:t=>{const{transformEl:s}=e.params.cardsEffect;(s?e.slides.find(s):e.slides).transition(t).find(".swiper-slide-shadow").transition(t),K({swiper:e,duration:t,transformEl:s})},perspective:()=>!0,overwriteParams:()=>({watchSlidesProgress:!0,virtualTranslate:!e.params.cssMode})})}];return H.use(J),H})); -//# sourceMappingURL=swiper-bundle.min.js.map diff --git a/movie_app/play_heading.html b/movie_app/play_heading.html deleted file mode 100644 index 8d7806f..0000000 --- a/movie_app/play_heading.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - The Flash - - - - - -
    -
    - -
    - - -
    -
    - - - HOME - -
    -
    -
    - -
    - -
    -

    The Flash

    -
    - - - - - -
    -
    - Action - Adventure - Drama - Sci-Fi -
    -
    - -
    -
    - - -
    -
    -
    - -
    -

    The Flash

    -

    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.

    -

    Movie Cast

    -
    -
    - - Grant Gustin -
    -
    - - Candice Patton -
    -
    - - Danielle Panabaker -
    -
    - - Carlos Valdes -
    -
    - - Jesse L. Martin -
    -
    - - Tom Cavanagh -
    -
    -
    - -
    -

    © MOVIEJTP All Rights Reserved

    -
    - - - - \ No newline at end of file diff --git a/movie_app/play_page.html b/movie_app/play_page.html deleted file mode 100755 index 611305a..0000000 --- a/movie_app/play_page.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - - Top Gun: Maverick - - - - - -
    -
    - -
    - - -
    -
    - - - HOME - -
    -
    -
    - -
    - -
    -

    Top Gun: Maverick

    -
    - - - - - -
    -
    - Action - Drama -
    -
    - -
    -
    - - -
    -
    -
    - -
    -

    Top Gun: Maverick

    -

    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.

    -

    Movie Cast

    -
    -
    - - Tom Cruise -
    -
    - - Miles Teller -
    -
    - - Jennifer Connelly -
    -
    - - Jon Hamm -
    -
    - - Glen Powell -
    -
    -
    - -
    -

    © MOVIEJTP All Rights Reserved

    -
    - - - - - \ No newline at end of file diff --git a/movie_app/play_popular.html b/movie_app/play_popular.html deleted file mode 100644 index c64f00b..0000000 --- a/movie_app/play_popular.html +++ /dev/null @@ -1,88 +0,0 @@ - - - - - - A League of Their Own - - - - - -
    -
    - -
    - - -
    -
    - - - HOME - -
    -
    -
    - -
    - -
    -

    A League of Their Own

    -
    - - - - - -
    -
    - Comedy - Drama - Sport -
    -
    - -
    -
    - - -
    -
    -
    - -
    -

    A League of Their Own

    -

    Two sisters join the first female professional baseball league and struggle to help it succeed - amid their own growing rivalry.

    -

    Movie Cast

    -
    -
    - - Tom Hanks -
    -
    - - Geena Davis -
    -
    - - Lori Petty -
    -
    - - Madonna -
    -
    -
    - -
    -

    © MOVIEJTP All Rights Reserved

    -
    - - - - - \ No newline at end of file diff --git a/recipe_website/index.html b/recipe_website/index.html deleted file mode 100644 index c6a88d7..0000000 --- a/recipe_website/index.html +++ /dev/null @@ -1,381 +0,0 @@ - - - - - - - Cooking and Recipes - - - - - -
    -
    -
    - -
    -
    - -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    M Recipes made for everyone

    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -

    Vegetarian

     -
    -
    -
    -
    -
    - -
    -
    -
    -

    Brunch

     -
    -
    -
    -
    -
    - -
    -
    -
    -

    Dinners

     -
    -
    -
    -
    -
    - -
    -
    -
    -

    Desserts

     -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -

    Find a recipe

    -
    - - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -

    As seen in

    -
    - - - - - -
    -
    -
    -
    - -
    -
    -
    -

    The big guide for you

    -
    -
      -
    • -
      -
      - -
      -
      -
      - August 3, 2023 -
      -

      Mint Mojito: A must try in summer

      -

      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.

      - Read more -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      - July 29, 2023 -
      -

      Avocado Ice Cream - Just only 4 Ingredients!

      -

      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!

      - Read more -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      - July 15, 2023 -
      -

      Why do people tap watermelon before buying?

      -

      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.

      - Read more -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      - July 1, 2023 -
      -

      Smoky Barbecue Ribs

      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

      - Read more -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      - June 29, 2023 -
      -

      Healthy Banana Chai Smoothie

      -

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

      - Read more -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      - June 15, 2023 -
      -

      Kombucha tea: Does it have health benefits?

      -

      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      - Read more -
      -
      -
      • -
    - View more posts -
    -
    -
    -
    - -
    -
    -
    -
    -

    Margherita Pizza

    -

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

    - View recipe -
    -
    -
    -
    - - - -
    -
    -
    - watch videos -
    -
    - - - -
    -
    -
    - -
    -
    -
    -

    join our community

    -
    -
    -

    come join our amazing group of food recipes!

    - - - - -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    - -
    - - - - - - - \ No newline at end of file diff --git a/recipe_website/main.js b/recipe_website/main.js deleted file mode 100644 index 21dcc2a..0000000 --- a/recipe_website/main.js +++ /dev/null @@ -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 += `
    -
    - -
    -
    -

    ${meal.strMeal}

    - Get Recipe -
    -
    `; - }); - 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 = `

    ${meal.strMeal}

    -

    ${meal.strCategory}

    -
    -

    Directions:

    -

    ${meal.strInstructions}

    -
    -
    - -
    -
    - Watch Video -
    `; - 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') - } -}) - - diff --git a/recipe_website/style.css b/recipe_website/style.css deleted file mode 100644 index 1b03e8c..0000000 --- a/recipe_website/style.css +++ /dev/null @@ -1,1266 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600&family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=WindSong:wght@400;500&display=swap'); -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Josefin Sans', sans-serif; -} -a{ - text-decoration: none; - color: inherit; - -webkit-tap-highlight-color: transparent; -} -ul, li{ -list-style: none; -} -p{ - margin-bottom: 0 0 15px; -} -.container{ - max-width: 60%; - padding: 0 20px; - margin: 0 auto; -} -/*---------- nav ----------*/ -header{ - position: relative; - line-height: 30px; - background-color: white; - z-index: 10; - border-bottom: 1px solid lightgray; -} -.container, .navigation{ - display: flex; - align-items: center; - justify-content: space-between; -} -.brand img{ - margin-top: 10px; - width: 200px; -} -nav{ - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-color: #FFFAF4; - z-index: 5; - align-items: center; - display: none; -} -nav ul{ - display: flex; - flex-direction: column; - padding: 0; - margin: 0 auto; - max-width: 200px; -} -nav li a{ - position: relative; - display: inline-block; - line-height: 1.5; - overflow: hidden; - margin-top: 30px; - font-size: 14px; - font-weight: 800; - text-transform: uppercase; - letter-spacing: 1px; - color: #5F264A; -} -nav li a:hover{ - color: #85586F; -} -.trigger button{ - position: relative; - background-color: transparent; - border: none; - outline: none; - font-size: 20px; - padding: 10px; - cursor: pointer; -} -.showmenu nav{ - display: flex; -} -.showmenu .menu{ - z-index: 10; - color: black; -} -.showmenu .menu i::before{ - content: 'x' -} -/*---------- home title----------*/ -.homepage-title .container{ - display: flex; - position: relative; - text-align: center; -} -.home-title{ - margin-top: 30px; - margin-left: 30%; - margin-right: 30%; -} -.home-title .title p{ - font-size: 22px; - font-weight: 800; - letter-spacing: 1px; - color: #5F264A; -} -.title span{ - font-size: 36px; - font-family: 'WindSong'; - font-weight: 300; - font-style: italic; - color: #C38154; -} -/*---------- home content----------*/ -.home-content{ - background-color: #F8F6F4; -} -.home-content .container{ - max-width: 60%; - display: block; - background-color: #F8F6F4; -} -.img-content{ - width: 100%; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - grid-gap: 25px; -} -.img-content .image-item .image{ - width: 100%; - height: 400px; -} -.img-content .image-item .image img{ - margin-top: 50px; - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; -} -.img-content .image-item{ - position: relative; - z-index: 2; - overflow: hidden; -} -.img-content .image-item:before{ - margin-top: 50px; - content: ''; - position: absolute; - width: 100%; - height: 100%; - display: none; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.8); - z-index: 5; -} -.img-content .image-item:hover.image-item:before{ - display: block; -} -.img-content .image-item .overlay{ - position: absolute; - top: 110%; - left: 0; - right: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; - z-index: 10; - transition: 1s; - cursor: pointer; -} -.img-content .image-item .overlay p{ - margin-top: 60px; - font-size: 18px; - font-weight: 700; - letter-spacing: 1px; - text-transform: uppercase; - text-align: center; - color: #FFC26F; - padding: 8px 0; -} -.img-content .image-item:hover .overlay{ - top: 0; -} -/*---------- meal----------*/ -.meal-recipe{ - background-color: #F8F6F4; -} -.meal-recipe .container{ - min-height: 20vh; -} -.meal-wrap{ - max-width: 100%; - margin: 30px auto; - background: #F8F6F4; - text-align: center; -} -.meal-search{ - margin: 30px 0; -} -.search-title{ - font-size: 22px; - color: #5F264A; -} -.meal-search-box{ - margin: 20px; - display: flex; - align-items: stretch; -} -.search-control, .search-btn{ - width: 100%; -} -.search-control{ - padding: 0 20px; - font-size: 16px; - outline: 0; - border: 1px solid #5F264A; -} -.search-control::placeholder{ - color: #85586F; -} -.search-btn{ - width: 80px; - height: 40px; - font-size: 20px; - background-color: #5F264A; - color: white; - border: none; -} -.search-btn:hover{ - background-color: #85586F; -} -.meal-result{ - margin-top: 30px; -} -#meal{ - margin: 20px 0; -} -.meal-item{ - margin: 20px 0; - overflow: hidden; - box-shadow: 0 4px 20px -12px rgba(0, 0, 0, 0.8); -} -.meal-img img{ - display: block; - width: 100%; -} -.meal-name{ - padding: 20px 10px; -} -.meal-name h3{ - font-size: 18px; - font-weight: 800; - letter-spacing: 1px; - text-transform: uppercase; -} -.recipe-btn{ - display: block; - width: 150px; - margin: 20px auto; - background: #FFC26F; - color: white; - font-size: 16px; - font-weight: 600; - padding: 10px 0; -}.recipe-btn:hover{ - background-color: #F9E0BB; - color: black; -} -.meal-detail{ - display: none; - padding: 30px 0; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: #F9E0BB; - color: #884A39; - width: 80%; - height: 80%; - z-index: 20; - overflow-y: scroll; -} -.showRecipe{ - display: block; -} -.meal-content{ - margin: 30px; -} -.meal-content p:not(.recipe-cat){ - padding: 20px 0; -} -.recipe-button{ - position: absolute; - right: 30px; - font-size: 30px; - background: transparent; - color: #884A39; - border: none; - outline: none; - cursor: pointer; -} -.recipe-title{ - text-transform: uppercase; - font-size: 20px; - padding-bottom: 20px; -} -.recipe-cat{ - display: inline-block; - background: #FFC95F; - font-weight: 600; - color: white; - padding: 5px 12px; -} -.recipe-guide{ - padding: 20px 0; -} -.recipe-img img{ - display: block; - margin: 0 auto; - width: 200px; - height: 200px; - border-radius: 50%; -} -.recipe-link{ - margin: 30px 0; -} -.recipe-link a{ - font-size: 18px; - font-weight: 800; - text-decoration: underline; - transition: all 0.3s linear; -} -.recipe-link a:hover{ - opacity: 0.5; -} -.notFound{ - grid-template-columns: 1fr !important; - font-size: 18px; - width: 100%; - color: red; -} -/*---------- partner ----------*/ -.partner{ - max-width: 100%; -} -.partner-image{ - height: 200px; - width: auto; - margin: auto; - overflow: hidden; - position: relative; -} -.partner-image h3{ - margin-top: 50px; - text-align: center; - font-size: 12px; - text-transform: uppercase; - letter-spacing: 1px; - color: #FFC26F; -} -.slide-track{ - display: flex; - gap: 50px; -} -.partner-logo img{ - margin-top: 30px; - width: auto; - height: 80px; -} -/*---------- home blog ----------*/ -.home-blog .container{ - max-width: 60%; -} -.home-blog-title{ - border-top: 1px solid lightgray; - width: 100%; -} -.home-blog-title h2{ - margin-top: 50px; - margin-bottom: 30px; - font-size: 18px; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; - color: #5F264A; -} -.blog-post{ - display: flex; - align-items: center; - border-bottom: 1px solid lightgrey; - width: 100%; - margin-top: 20px; -} -.blog-post-img img{ - width: 300px; - height: 200px; - object-fit: cover; - object-position: center; - margin-bottom: 30px; -} -.blog-post-info{ - padding: 20px; -} -.blog-post-date{ - margin-bottom: 20px; - color: gray; -} -.blog-post-title{ - font-size: 24px; - text-transform: capitalize; - margin-bottom: 20px; - color: #5F264A; -} -.blog-post-info p{ - margin-bottom: 20px; - color: #85586F; -} -.blog-post-info a{ - color: #FFC26F; - font-weight: 800; -} -.blog-post-info a:hover{ - color: #C38154; -} -.post li:nth-child(3) ~ li{ - display: none; -} -.load-more{ - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - width: 180px; - height: 40px; - text-transform: uppercase; - background-color: #5F264A; - color: white; - margin: 0 auto; - margin-top: 30px; -} -.loading{ - display: none; - height: 32px; - width: 32px; - margin: 0 auto; -} - -.loading.show-loader{ - width: 52px; - background-color: #5F264A; - text-indent: -9999px; -} -.loading.show-loader .loading{ - display: block; -} -.load-more.loaded{ - visibility: hidden; - opacity: 0; - height: 0; - transition: visibility 0.3s 0.3s, opacity 0.3s 0.3s, height 0.3s 0.3s; -} -/*---------- home-content-2 ----------*/ -.home-content-2 .container{ - margin-top: 50px; - margin-bottom: 50px; - max-width: 50%; - height: 50vh; - background: url(images/home-content.jpg) no-repeat center center/cover; -} -.home-frame{ - width: 1000px; - height: 410px; - border: 2px solid white; - background: transparent; - margin: auto; -} -.home-2-title{ - width: 350px; - height: 250px; - background: #eee; - float: right; - margin-top: 140px; - margin-right: 20px; - padding: 25px 10px; - justify-content: center; - align-items: center; - text-align: center; -} -.home-2-title h2{ - font-size: 30px; - margin-bottom: 20px; -} -.home-2-title p{ - font-size: 16px; - color: gray; - margin-bottom: 20px; -} -.home-2-title span{ - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - color: #F99417; -} -.home-2-title span:hover{ - text-decoration: underline; - color: #FFC95F; -} -/*---------- footer ----------*/ -footer{ - width: 100%; - bottom: 0; - background-color: #5F264A; - color: white; - padding: 50px 0 30px; - font-size: 14px; - line-height: 20px; -} -.footer-row{ - width: 70%; - margin: auto; - display: flex; - flex-wrap: wrap; - align-items: flex-start; - justify-content: space-between; -} -.footer-col{ - flex-basis: 25%; - padding: 10px; -} -.footer-col:nth-child(2), .footer-col:nth-child(3){ - flex-basis: 15%; -} -.footer-logo{ - margin-bottom: 20px; -} -.footer-logo a{ - font-size: 30px; -} -.footer-logo span{ - font-family: 'WindSong'; - font-size: 54px; - color: #FFC26F; -} -.footer-col h3{ - width: fit-content; - position: relative; - margin-bottom: 20px; - text-transform: uppercase; - font-size: 14px; -} -form{ - padding-bottom: 15px; - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid #FFC26F; - margin-bottom: 30px; -} -form .bx{ - font-size: 20px; - margin-right: 10px; -} -form input{ - width: 100%; - background: transparent; - color: white; - border: 0; - outline: none; -} -form button{ - background: transparent; - border: 0; - outline: none; - cursor: pointer; -} -form button .bx-right-arrow-alt{ - font-size: 24px; - color: white; -} -.footer-social .bx{ - font-size: 24px; - padding: 0 5px; -} -hr{ - border: 0; - border-bottom: 1px solid #85586F; - margin: 20px auto; -} -.copy-right{ - text-align: center; -} -/*---------- join ----------*/ -.join .container{ - display: block; -} -.hr-lines{ - position: relative; - max-width: 650px; - margin: 50px auto; - text-align: center; -} -.hr-lines:before{ - content:" "; - height: 1px; - width: 150px; - background: #E5B8F4; - display: block; - position: absolute; - top: 50%; - left: 0; -} -.hr-lines:after{ - content:" "; - height: 1px; - width: 150px; - background: #E5B8F4; - display: block; - position: absolute; - top: 50%; - right: 0; -} -.join-title{ - text-transform: uppercase; - color: #5F264A; -} -.join-social{ - text-align: center; - margin-top: -30px; - margin-bottom: 30px; -} -.join-social p{ - font-size: 16px; - text-transform: capitalize; - color: #5F264A; - opacity: 0.5; -} -.join-social i{ - margin-top: 30px; - font-size: 24px; - padding: 0 10px; - color: #85586F; -} -/*---------- join-content ----------*/ -.join-content .container{ - max-width: 40%; - margin: auto; - margin-bottom: 40px; -} -.join-gallery{ - display: flex; - gap: 10px; -} -.join-col{ - display: flex; - flex-direction: column; - gap: 10px; -} -.join-img img{ - width: 100%; - height: 100%; - object-fit: cover; -} -/*------------------------------------------------------- vegetarian page -------------------------------------------------------*/ -.veggie-heading{ - background: #eee; -} -.veggie-heading .container{ - display: flex; - align-self: flex-start; - justify-content: space-between; - background: #eee; -} -.veggie-left{ - margin-top: 50px; - flex-basis: 30%; -} -.veggie-right{ - flex-basis: 90%; -} -.veggie-left img{ - width: 180px; - height: 180px; - border-radius: 50%; -} -.veggie-left h3{ - padding: 10px 10px; - text-transform: uppercase; - font-size: 16px; - color: gray; -} -.veggie-left a p{ - margin-bottom: 50px; - text-transform: uppercase; - font-size: 12px; - font-weight: 700; - color: #5F264A; -} -.veggie-left a p:hover{ - text-decoration: underline; - color: #F99417; -} -.veggie-right h1{ - font-size: 38px; - color: #5F264A; - letter-spacing: 1px; - margin-bottom: 20px; -} -.veggie-right p{ - font-size: 20px; - font-weight: 300; -} -/*---------- veggie-rated/ veggie-dinner / veggie-healthy ----------*/ -.veggie-rating, .veggie-dinner, .veggie-healthy{ - min-height: 60vh; - display: flex; - align-items: center; - justify-content: center; -} -.container{ - max-width: 1120px; - width: 100%; -} -.veggie-title, .veggie-dinner-title, .veggie-healthy-title{ - margin-bottom: 50px; - text-align: center; -} -.veggie-title i{ - color: #F99417; - font-size: 32px; -} -.veggie-title span{ - text-transform: uppercase; - color: #5F264A; - font-size: 24px; - font-weight: bold; -} -.veggie-dinner-title h2, .veggie-healthy-title h2{ - text-transform: uppercase; - color: #5F264A; -} -.veggie-title p, .veggie-dinner-title p, .veggie-healthy-title p{ - margin-top: 10px; - font-size: 18px; - color: gray; -} -.slide-container{ - margin: 0 30px; -} -.card{ - background: white; -} -.card .image-box{ - height: 250px; -} -.card .image-box img{ - width: 100%; - height: 100%; - object-fit: cover; -} -.card .profile-detail{ - display: grid; - align-items: center; - text-align: center; - padding: 15px; -} -.card .profile-detail li i{ - font-size: 18px; - color: #FFC26F; -} -.profile-detail .rating{ - margin-top: 10px; - margin-bottom: 10px; - font-size: 10px; - text-transform: uppercase; - color: gray; -} -.profile-detail .name{ - font-size: 14px; - font-weight: 800; - text-transform: uppercase; -} -.container .swiper-btn{ - display: none; -} -.container .swiper-pagination-bullet{ - background-color: gray; -} -.line{ - margin-left: 20%; - margin-right: 20%; - height: 1px; - background: lightgray; -} -/*---------- subscribe ----------*/ -.subscribe{ - background-color: #5F264A; -} -.subscribe .container{ - max-width: 60%; - height: 20vh; - display: flex; - align-self: flex-start; - justify-content: space-between; - background-color: #5F264A; -} -.subscribe-left{ - flex-basis: 60%; -} -.subscribe-left h3{ - color: white; - text-transform: capitalize; - font-size: 22px; -} -.subscribe-right{ - margin: 20px; - display: flex; - flex-basis: 40%; - align-items: stretch; -} -.subscribe-control{ - padding: 0 20px; - font-size: 16px; - outline: 0; - border: 1px solid #FFC26F; -} -.subscribe-control::placeholder{ - color: gray; - font-size: 12px; - text-transform: uppercase; -} -.subscribe-btn{ - width: 80px; - height: 40px; - font-size: 14px; - font-weight: 600; - text-transform: uppercase; - background-color: #FFC26F; - color: white; - border: none; - cursor: pointer; -} -.subscribe-btn:hover{ - background-color: #F9E0BB; - color: black; -} -/*---------- video ----------*/ -.veggie-video{ - background-color: #eee; -} -.veggie-video .container{ - display:block; - justify-content: center; - align-items: center; - text-align: center; - background-color: #eee; -} -.veggie-video-title{ - padding: 50px 50px; -} -.veggie-video-title i{ - color: #F99417; - font-size: 32px; -} -.veggie-video-title span{ - text-transform: uppercase; - color: #5F264A; - font-size: 24px; - font-weight: bold; -} -.veggie-video-content{ - display: flex; - gap: 20px; -} -iframe{ - margin-bottom: 50px; -} -/*---------- veggie-content ----------*/ -.veggie-content-2 .container{ - margin-top: 50px; - margin-bottom: 50px; - max-width: 50%; - height: 50vh; - background: url(images/post-7.jpg) no-repeat center center/cover; -} -.veggie-frame{ - width: 1000px; - height: 410px; - border: 2px solid white; - background: transparent; - margin: auto; -} -.veggie-2-title{ - width: 350px; - height: 250px; - background: #eee; - float: right; - margin-top: 140px; - margin-right: 20px; - padding: 25px 10px; - justify-content: center; - align-items: center; - text-align: center; -} -.veggie-2-title h2{ - font-size: 30px; - margin-bottom: 20px; -} -.veggie-2-title p{ - font-size: 16px; - color: gray; - margin-bottom: 20px; -} -.veggie-2-title span{ - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - color: #F99417; -} -.veggie-2-title span:hover{ - text-decoration: underline; - color: #FFC95F; -} -/*---------- brunch-content ----------*/ -.brunch-content-2 .container{ - margin-top: 50px; - margin-bottom: 50px; - max-width: 50%; - height: 50vh; - background: url(images/brunch.jpg) no-repeat center center/cover; -} -.brunch-frame{ - width: 1000px; - height: 410px; - border: 2px solid white; - background: transparent; - margin: auto; -} -.brunch-2-title{ - width: 350px; - height: 250px; - background: #eee; - float: right; - margin-top: 140px; - margin-right: 20px; - padding: 25px 10px; - justify-content: center; - align-items: center; - text-align: center; -} -.brunch-2-title h2{ - font-size: 30px; - margin-bottom: 20px; -} -.brunch-2-title p{ - font-size: 16px; - color: gray; - margin-bottom: 20px; -} -.brunch-2-title span{ - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - color: #F99417; -} -.brunch-2-title span:hover{ - text-decoration: underline; - color: #FFC95F; -} -/*---------- dinner-content ----------*/ -.dinner-content-2 .container{ - margin-top: 50px; - margin-bottom: 50px; - max-width: 50%; - height: 50vh; - background: url(images/dinner.jpg) no-repeat center center/cover; -} -.dinner-frame{ - width: 1000px; - height: 410px; - border: 2px solid white; - background: transparent; - margin: auto; -} -.dinner-2-title{ - width: 350px; - height: 250px; - background: #eee; - float: right; - margin-top: 140px; - margin-right: 20px; - padding: 25px 10px; - justify-content: center; - align-items: center; - text-align: center; -} -.dinner-2-title h2{ - font-size: 30px; - margin-bottom: 20px; -} -.dinner-2-title p{ - font-size: 16px; - color: gray; - margin-bottom: 20px; -} -.dinner-2-title span{ - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - color: #F99417; -} -.dinner-2-title span:hover{ - text-decoration: underline; - color: #FFC95F; -} -/*------------------------------------------------------- responsive (main page) -------------------------------------------------------*/ -@media screen and (max-width:1200px){ - .home-blog .container{ - max-width: 90%; - } - header{ - max-width: 100%; - } - .brand img{ - width: 150px; - } -} -@media screen and (min-width:1200px){ - #meal{ - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 30px; - } - .meal-item{ - margin: 0; - } -} -@media screen and (min-width:992px){ - nav{ - display: block; - position: relative; - background-color: transparent; - padding: 0; - } - nav ul{ - display: flex; - flex-wrap: wrap; - flex-direction: row; - max-width: 100%; - } - nav li{ - display: flex; - align-items: center; - } - nav li a{ - margin-right: 40px; - font-size: 14px; - font-weight: 800; - text-transform: uppercase; - letter-spacing: 1px; - } - .trigger .menu{ - display: none; - } - .meal-detail{ - width: 700px; - } -} -@media screen and (max-width:876px){ - .blog-post-img img{ - height: 280px; - } - .home-content-2 .container{ - max-width: 100%; - height: 50vh; - } - .veggie-content-2 .container{ - max-width: 100%; - height: 50vh; - } - .brunch-content-2 .container{ - max-width: 100%; - height: 50vh; - } - .dinner-content-2 .container{ - max-width: 100%; - height: 50vh; - } - .home-frame{ - display: flex; - } - footer{ - bottom: unset; - } - .footer-col{ - flex-basis: 100%; - } - .footer-col:nth-child(2), .footer-col:nth-child(3){ - flex-basis: 100%; - } -} -@media screen and (max-width:725px){ - .blog-post{ - display: block; - } - .blog-post-img img{ - width: 100%; - height: 300px; - object-fit: cover; - object-position: center; - } - .title p{ - font-size: 20px; - } - .title span{ - font-size: 30px; - } - .home-content .container{ - max-width: 100%; - } - .join-content .container{ - max-width: 60%; - } - .hr-lines{ - max-width: 500px; - } - .hr-lines:before{ - width: 80px; - } - .hr-lines:after{ - width: 80px; - } -} -@media screen and (max-width:525px){ - .brand img{ - width: 100px; - } - .social a p{ - margin: 0 10px; - font-size: 10px; - } - .join-content .container{ - max-width: 80%; - } - .hr-lines:before{ - display: none; - } - .hr-lines:after{ - display: none; - } -} -@media screen and (max-width:400px){ - .home-content-2 .container, .veggie-content-2 .container, .brunch-content-2 .container, - .dinner-content-2 .container { - display: none; - } - .subscribe .container{ - margin-top: 50px; - } - .home-frame{ - display: none; - } - iframe{ - width: 300px; - height: 200px; - } - .join-content .container{ - max-width: 100%; - } -} -/*------------------------------------------------------- responsive (vegetarian page) -------------------------------------------------------*/ -@media screen and (max-width:1500px){ - .veggie-right{ - flex-basis: 70%; - } - .subscribe .container{ - max-width: 80%; - } -} -@media screen and (max-width:1200px){ - .veggie-heading .container{ - max-width: 80%; - } - .subscribe .container{ - max-width: 90%; - } -} -@media screen and (max-width:950px){ - .veggie-heading .container{ - max-width: 100%; - } - .veggie-right{ - padding: 0 10px; - } - .veggie-right h1{ - font-size: 30px; - } - .veggie-right p{ - font-size: 16px; - } - .subscribe .container{ - display: block; - text-align: center; - } - .subscribe-left h3{ - padding-top: 50px; - } - .subscribe-right{ - justify-content: center; - } - .veggie-video-content{ - display: block; - } -} -@media screen and (max-width:750px){ - .veggie-heading .container{ - display: block; - } - .veggie-left{ - margin-top: 0; - margin-left: 35%; - } - .veggie-left img{ - margin-top: 50px; - } - .veggie-right{ - justify-content: center; - align-items: center; - text-align: center; - padding-bottom: 50px; - } -} -@media screen and (max-width:550px){ - .veggie-left{ - margin-left: 30%; - } - .subscribe-left h3{ - font-size: 16px; - } - .subscribe-control{ - padding: 0 10px; - font-size: 10px; - } - .subscribe-control::placeholder{ - font-size: 10px; - } - .subscribe-btn{ - width: 80px; - height: 22px; - font-size: 12px; - } -} -@media screen and (max-width:420px){ - .veggie-left{ - margin-left: 25%; - } - .veggie-right h1{ - font-size: 26px; - } -} diff --git a/restaurant_website/contact.css b/restaurant_website/contact.css deleted file mode 100644 index a3b6705..0000000 --- a/restaurant_website/contact.css +++ /dev/null @@ -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%; - } -} - - - - - diff --git a/restaurant_website/contact.html b/restaurant_website/contact.html deleted file mode 100644 index 8a675d1..0000000 --- a/restaurant_website/contact.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - Contact - - - - - - - - - - - - -
    -
    -
    - - -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -

    Contact Us

    - - - - - -
    -
    -
    - - - - - - - - - \ No newline at end of file diff --git a/restaurant_website/index.html b/restaurant_website/index.html deleted file mode 100644 index d74c74b..0000000 --- a/restaurant_website/index.html +++ /dev/null @@ -1,327 +0,0 @@ - - - - - - FUJISAN - - - - - - - - - - - -
    -
    -
    - - -
    - -
    -
    -
    -
    - -
    -
    -
    -

    HAVE A GOOD DAY WITH A GOOD MEAL

    -

    Fresh ingredients make great food.

    -
    -
    We are open at 17:00
    -
    -
    -
    - -
    -
    -
    - -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -

    Luxury & Quality

    -
    -
    -
    - -
    -
    -

    PROFESSIONAL CHEFS

    -

    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.

    - Read More -
    -
    - -
    -
    - -
    -
    -

    FRESH FOOD GAURANTEED

    -

    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.

    - Read More -
    -
    - -
    -
    - -
    -
    -

    THE MENU IS PLENTIFUL

    -

    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.

    - Read More -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    293
    -

    Best Dishes

    -
    -
    - -
    999
    -

    Awards won

    -
    -
    - -
    148
    -

    Our Chefs

    -
    -
    - -
    278
    -

    Daily Customers

    -
    -
    -
    - -
    - -
    -
    -
    -
    -
    -

    Most Popular Dishes

    -
    - -
    -
    - -
    -

    Sake Donburi with Ikura

    -

    A bowl of steamed sushi rice, topped with fresh salmon, ikura, shiso leaves, and shredded nori on top.

    -
    -
    -
    -

    $17.99

    -
    -
    - -
    -
    - -
    -

    Ebi Okonomiyaki

    -

    Tempura fried shrimp, corn, Creole butter, arare.

    -
    -
    -
    -

    $13.99

    -
    -
    - -
    -
    - -
    -

    Wagyu Nigiri

    -

    Thinly sliced savory wagyu steak, pressed over sushi rice (4 pieces).

    -
    -
    -
    -

    $12.99

    -
    -
    - -
    -
    - -
    -

    Tekka Maki

    -

    8 pcs fresh tuna.

    -
    -
    -
    -

    $9.99

    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -

    Reservation

    -
    - - - - - - - - -
    -
    -
    -
    - -
    -
    -

    Meet Our Chefs

    -
    -
    -
    - -
    -
    -
    -

    John Doe

    - Executive Chef -
      -
      • -
      • -
      • -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -

    John Doe

    - Head Chef -
      -
      • -
      • -
      • -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -

    Jane Doe

    - Deputy Chef -
      -
      • -
      • -
      • -
      • -
    -
    -
    -
    -
    -
    -
    - - - - - - - \ No newline at end of file diff --git a/restaurant_website/items.js b/restaurant_website/items.js deleted file mode 100644 index 92ad1ad..0000000 --- a/restaurant_website/items.js +++ /dev/null @@ -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}; diff --git a/restaurant_website/main.js b/restaurant_website/main.js deleted file mode 100644 index de152f2..0000000 --- a/restaurant_website/main.js +++ /dev/null @@ -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---------------------------------------------- - - diff --git a/restaurant_website/menu.css b/restaurant_website/menu.css deleted file mode 100644 index cf62aef..0000000 --- a/restaurant_website/menu.css +++ /dev/null @@ -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; - - } -} - - - - - - diff --git a/restaurant_website/menu.html b/restaurant_website/menu.html deleted file mode 100644 index f23583e..0000000 --- a/restaurant_website/menu.html +++ /dev/null @@ -1,681 +0,0 @@ - - - - - - Menu - - - - - - - - - - - - - -
    -
    -
    - - -
    - -
    -
    -
    -
    - - - - - - - diff --git a/restaurant_website/order.css b/restaurant_website/order.css deleted file mode 100644 index c01b029..0000000 --- a/restaurant_website/order.css +++ /dev/null @@ -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; - } -} - - - diff --git a/restaurant_website/order.html b/restaurant_website/order.html deleted file mode 100644 index cfc0684..0000000 --- a/restaurant_website/order.html +++ /dev/null @@ -1,150 +0,0 @@ - - - - - - Order Online - - - - - - - - - - - -
    - - -
    - -
    -
    -

    Appetizers

    -
    - -
    -

    Soup

    -
    - -
    -

    Sunomono Salad

    -
    - -
    -

    Nigiri/Sashimi

    -
    - -
    -

    Sushi/Sashimi Platters

    -
    - -
    -

    Maki (Rolls)

    -
    - -
    -

    Donburi

    -
    - -
    -

    Beverages

    -
    - -
    -

    Desserts

    -
    -
    - -
    -

    Cart Items

    -

    Total Amount: $100

    - - - - - - - - - - -
    ItemNameQuantityPrice
    -
    -
    - -
    -
    -
    -   Login -
    -
    -
    -

    Popular Dishes

    -
    - -
    -

    Items : 5

    -

    Total Amount: $50

    -

    Free Delivery on $50

    - -
    -
    -
    - -
    -
    -
    - - Address -
    -
    - - - - 0 -
    -
    - -
    -
    - -
    -
    - -
    - Home - Offers - Your orders - Help -
    -
    - - - - - \ No newline at end of file diff --git a/restaurant_website/order.js b/restaurant_website/order.js deleted file mode 100644 index 10cc1c5..0000000 --- a/restaurant_website/order.js +++ /dev/null @@ -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); - }) -} \ No newline at end of file diff --git a/restaurant_website/style.css b/restaurant_website/style.css deleted file mode 100644 index 3eb9344..0000000 --- a/restaurant_website/style.css +++ /dev/null @@ -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; - } -} - -