diff --git a/css/style.css b/css/style.css index 0219bac..0652037 100644 --- a/css/style.css +++ b/css/style.css @@ -38,6 +38,11 @@ button { max-width: 1440px; margin: 0 auto; } +@media (max-width: 480px) { + .container { + overflow: hidden; + } +} .navbar { height: 97px; @@ -48,6 +53,11 @@ button { top: 0; left: 0; } +@media (max-width: 480px) { + .navbar { + display: none; + } +} .navbar-content { position: sticky; @@ -196,11 +206,29 @@ button { justify-content: space-between; padding: 150px 0 100px 0; } +@media (max-width: 480px) { + .header { + padding: 0; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + border-bottom: 1px solid #d1d1d1; + } +} .header .left-dog { position: relative; padding-top: 70px; left: 40px; } +@media (max-width: 480px) { + .header .left-dog { + padding: 0; + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + left: -55px; + bottom: 0; + } +} .header .left-dog::after { content: ""; position: absolute; @@ -210,19 +238,51 @@ button { height: 1px; background-color: #d1d1d1; } +@media (max-width: 480px) { + .header .left-dog::after { + display: none; + } +} .header .left-dog img { width: 300px; height: 306px; } +@media (max-width: 480px) { + .header .left-dog img { + width: 167px; + height: 171px; + position: relative; + bottom: -4px; + } +} .header .main-txt { text-align: center; } +@media (max-width: 480px) { + .header .main-txt { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + position: relative; + } +} .header .main-txt h1.txt1 { font-family: "Literata"; font-weight: 800; font-size: 4rem; text-align: center; } +@media (max-width: 480px) { + .header .main-txt h1.txt1 { + font-size: 2.8rem; + padding-top: 22px; + } + .header .main-txt h1.txt1 br { + display: none; + } +} .header .main-txt p.txt2 { font-family: "Lato"; font-size: 1.4rem; @@ -231,11 +291,34 @@ button { font-weight: 500; margin: 38px auto 0 auto; } +@media (max-width: 480px) { + .header .main-txt p.txt2 { + margin: 0; + font-size: 1.2rem; + position: absolute; + top: 160%; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + width: 48%; + z-index: 10; + line-height: 1.7; + } +} .header .right-cat { padding-top: 90px; position: relative; right: 60px; } +@media (max-width: 480px) { + .header .right-cat { + padding: 0; + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; + right: -60px; + } +} .header .right-cat::after { content: ""; position: absolute; @@ -245,15 +328,39 @@ button { height: 1px; background-color: #d1d1d1; } +@media (max-width: 480px) { + .header .right-cat::after { + display: none; + } +} .header .right-cat img { width: 288px; height: 286px; } +@media (max-width: 480px) { + .header .right-cat img { + width: 175px; + height: 174px; + position: relative; + bottom: -1px; + } +} .products-section { position: relative; padding: 100px 0 180px 0; } +@media (max-width: 480px) { + .products-section { + padding: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding-top: 30px; + } +} .products-section .options { position: absolute; left: 50%; @@ -268,12 +375,18 @@ button { justify-content: space-between; width: 540px; } -.products-section .options .dog-option img { - margin-right: 14px; -} -.products-section .options .dog-option, -.products-section .options .cat-option, -.products-section .options .toys-option { +@media (max-width: 480px) { + .products-section .options { + top: 0; + left: 0; + width: 382px; + -webkit-transform: translate(0); + transform: translate(0); + position: static; + margin: 0 auto; + } +} +.products-section .options .option { width: 160px; height: 140px; border: 1px solid #d1d1d1; @@ -294,24 +407,37 @@ button { transition: 0.25s; cursor: pointer; } -.products-section .options .dog-option:not(.active):hover, -.products-section .options .cat-option:not(.active):hover, -.products-section .options .toys-option:not(.active):hover { +@media (max-width: 480px) { + .products-section .options .option { + width: 113px; + height: 99px; + } +} +.products-section .options .option.dog-option img { + margin-right: 14px; +} +@media (max-width: 480px) { + .products-section .options .option.dog-option img { + margin-right: 8px; + } +} +.products-section .options .option:not(.active):hover { border-color: #000; } -.products-section .options .dog-option img, -.products-section .options .cat-option img, -.products-section .options .toys-option img { +.products-section .options .option img { width: 35%; } -.products-section .options .dog-option span, -.products-section .options .cat-option span, -.products-section .options .toys-option span { +.products-section .options .option span { font-size: 1.6rem; font-family: "Literata"; font-weight: 800; margin-top: 10px; } +@media (max-width: 480px) { + .products-section .options .option span { + font-size: 1.2rem; + } +} .active { background-color: #000; @@ -340,10 +466,27 @@ button { -ms-flex-pack: justify; justify-content: space-between; } +@media (max-width: 480px) { + .food-products { + width: 100%; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } +} .food-products .food-choice { -ms-flex-preferred-size: 20%; flex-basis: 20%; } +@media (max-width: 480px) { + .food-products .food-choice { + -ms-flex-preferred-size: 382px; + flex-basis: 382px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 40px auto 0 auto; + } +} .food-products .food-choice .food-option { width: 60%; display: -webkit-box; @@ -353,6 +496,15 @@ button { -ms-flex-pack: justify; justify-content: space-between; } +@media (max-width: 480px) { + .food-products .food-choice .food-option { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + } +} .food-products .food-choice .food-option .wet, .food-products .food-choice .food-option .dry { -ms-flex-preferred-size: 47%; @@ -387,6 +539,11 @@ button { align-items: center; margin-top: 20px; } +@media (max-width: 480px) { + .food-products .food-choice .gallery-arrows { + display: none; + } +} .food-products .food-choice .gallery-arrows button { background-color: transparent; width: 44px; @@ -401,15 +558,33 @@ button { .food-products .food-choice .gallery-arrows button:disabled { border: 1px solid #d1d1d1; } +@media (max-width: 480px) { + .food-products .food-choice .section-applaws-logo { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + } +} .food-products .food-choice .section-applaws-logo img { margin-top: 40px; width: 43%; } +@media (max-width: 480px) { + .food-products .food-choice .section-applaws-logo img { + width: 50%; + margin-top: 0; + } +} .products-gallery { -ms-flex-preferred-size: 69%; flex-basis: 69%; } +@media (max-width: 480px) { + .products-gallery { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + } +} .products-gallery .cat-wet { height: 500px; display: -webkit-box; @@ -421,6 +596,17 @@ button { align-content: space-between; padding-right: 100px; } +@media (max-width: 480px) { + .products-gallery .cat-wet { + height: 330px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-line-pack: center; + align-content: center; + padding-right: 0; + } +} .products-gallery .cat-wet .cat-wet-container { position: relative; width: 255px; @@ -429,6 +615,11 @@ button { margin-right: 40px; border-color: #dfaa40; } +@media (max-width: 480px) { + .products-gallery .cat-wet .cat-wet-container { + margin-right: 0; + } +} .products-gallery .cat-wet .cat-wet-container .product-code { border: 1px solid transparent; border-left: none; @@ -483,6 +674,11 @@ button { margin-right: 40px; border-color: #4fb6b1; } +@media (max-width: 480px) { + .products-gallery .cat-wet .cat-katido-container { + margin-right: 0; + } +} .products-gallery .cat-wet .cat-katido-container .product-code { border: 1px solid transparent; border-left: none; @@ -534,6 +730,11 @@ button { margin-right: 40px; border-color: #cc6330; } +@media (max-width: 480px) { + .products-gallery .cat-wet .cat-dry-container { + margin-right: 0; + } +} .products-gallery .cat-wet .cat-dry-container .product-code { border: 1px solid transparent; border-left: none; @@ -591,6 +792,11 @@ button { margin-right: 40px; border-color: #71517b; } +@media (max-width: 480px) { + .products-gallery .cat-wet .cat-dry-treats-container { + margin-right: 0; + } +} .products-gallery .cat-wet .cat-dry-treats-container .product-code { border: 1px solid transparent; border-left: none; @@ -642,6 +848,11 @@ button { margin-right: 40px; border-color: #4fb6b1; } +@media (max-width: 480px) { + .products-gallery .cat-wet .toys-container { + margin-right: 0; + } +} .products-gallery .cat-wet .toys-container .product-code { border: 1px solid transparent; border-left: none; @@ -699,6 +910,11 @@ button { margin-right: 40px; border-color: #ac517c; } +@media (max-width: 480px) { + .products-gallery .cat-wet .dog-wet-container { + margin-right: 0; + } +} .products-gallery .cat-wet .dog-wet-container .product-code { border: 1px solid transparent; border-left: none; @@ -753,6 +969,11 @@ button { margin-right: 40px; border-color: #cc037d; } +@media (max-width: 480px) { + .products-gallery .cat-wet .dog-dry-container { + margin-right: 0; + } +} .products-gallery .cat-wet .dog-dry-container .product-code { border: 1px solid transparent; border-left: none; diff --git a/css/style.css.map b/css/style.css.map index b61f0f3..479bb3c 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["../sass/_fonts.scss","../sass/_basic.scss","style.css","../sass/_navbar.scss","../sass/_header.scss","../sass/section-products/_option-choice.scss","../sass/section-products/_products.scss","../sass/section-products/_product.scss","../sass/_mixins.scss","../sass/_about.scss","../sass/_contact-form.scss","../sass/_footer.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["../sass/_fonts.scss","../sass/_basic.scss","style.css","../sass/mixins/_mixins-media-queries.scss","../sass/_navbar.scss","../sass/_header.scss","../sass/section-products/_option-choice.scss","../sass/section-products/_products.scss","../sass/section-products/_product.scss","../sass/mixins/_mixins-products-slider.scss","../sass/_about.scss","../sass/_contact-form.scss","../sass/_footer.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/index.html b/index.html index bc9fb7b..951d42b 100644 --- a/index.html +++ b/index.html @@ -68,15 +68,15 @@

Szczęśliwy pupil to nasza misja
-
+
Wybierz kot Kot
-
+
Wybierz pies Pies
-
+
Wybierz zabawki Zabawki
@@ -1232,7 +1232,7 @@

✅ Formularz został pomyślnie wysłany!

- + diff --git a/js/slider-both.js b/js/slider-both.js new file mode 100644 index 0000000..9542899 --- /dev/null +++ b/js/slider-both.js @@ -0,0 +1,373 @@ +// Desktop version script +function desktopScript() { + let index = 0; + const categories = { + cat: { + wet: document.querySelectorAll(".cat-wet div"), + dry: document.querySelectorAll(".cat-dry div"), + }, + dog: { + wet: document.querySelectorAll(".dog-wet div"), + dry: document.querySelectorAll(".dog-dry div"), + }, + toys: document.querySelectorAll(".toys div"), + }; + let currentCategory = "cat"; + let currentSubcategory = "wet"; + const displayDiv = document.querySelector(".cat-wet"); + const nextButton = document.querySelector(".arrow-right-btn"); + const prevButton = document.querySelector(".arrow-left-btn"); + + for (let category in categories) { + if (category === "toys") { + for (let i = 0; i < categories[category].length; i++) { + categories[category][i].style.display = "none"; + } + } else { + for (let subcategory in categories[category]) { + for (let i = 0; i < categories[category][subcategory].length; i++) { + categories[category][subcategory][i].style.display = "none"; + } + } + } + } + + function displayImages() { + for (let category in categories) { + if (category === "toys") { + for (let i = 0; i < categories[category].length; i++) { + categories[category][i].style.display = "none"; + } + } else { + for (let subcategory in categories[category]) { + for (let i = 0; i < categories[category][subcategory].length; i++) { + categories[category][subcategory][i].style.display = "none"; + } + } + } + } + + let images; + if (currentCategory === "toys") { + images = categories[currentCategory]; + } else { + images = categories[currentCategory][currentSubcategory]; + } + + for (let i = index; i < index + 6; i++) { + if (i < images.length) { + images[i].style.display = "block"; + displayDiv.appendChild(images[i]); + } + } + + // Slider animation effect + for (let i = index; i < index + 6; i++) { + if (i < images.length) { + images[i].style.display = "block"; + images[i].style.opacity = 0; + images[i].style.transform = "translateX(-100px) scale(0.8)"; + images[i].style.transition = + "opacity 0.5s ease-in-out, transform 0.5s ease-in-out"; + images[i].style.transitionDelay = `${(i - index) * 0.1}s`; + displayDiv.appendChild(images[i]); + + // use setTimeout to change opacity, position, and scale after the element is in the DOM + setTimeout(() => { + images[i].style.opacity = 1; + images[i].style.transform = "translateX(0) scale(1)"; + }, 0); + } + } + + prevButton.disabled = index === 0; + nextButton.disabled = index + 6 >= images.length; + if (prevButton.disabled) { + prevButton.style.cursor = "not-allowed"; + } else { + prevButton.style.cursor = "pointer"; + } + + if (nextButton.disabled) { + nextButton.style.cursor = "not-allowed"; + } else { + nextButton.style.cursor = "pointer"; + } + } + + displayImages(); + + nextButton.addEventListener("click", function () { + let images; + if (currentCategory === "toys") { + images = categories[currentCategory]; + } else { + images = categories[currentCategory][currentSubcategory]; + } + + if (index + 6 < images.length) { + index += 6; + displayImages(); + } + }); + + prevButton.addEventListener("click", function () { + if (index - 6 >= 0) { + index -= 6; + displayImages(); + } + }); + + const wetButton = document.querySelector(".wet"); + const dryButton = document.querySelector(".dry"); + + const logoLeftColumn = document.querySelector(".section-applaws-logo img"); + + wetButton.addEventListener("click", function () { + if (currentCategory !== "toys") { + currentSubcategory = "wet"; + index = 0; + displayImages(); + wetButton.classList.add("active-food-option"); + dryButton.classList.remove("active-food-option"); + } + }); + + dryButton.addEventListener("click", function () { + if (currentCategory !== "toys") { + currentSubcategory = "dry"; + index = 0; + displayImages(); + dryButton.classList.add("active-food-option"); + wetButton.classList.remove("active-food-option"); + } + }); + + const catButton = document.querySelector(".cat-option"); + const dogButton = document.querySelector(".dog-option"); + const toysButton = document.querySelector(".toys-option"); + + catButton.addEventListener("click", function () { + logoLeftColumn.src = "./src/applaws-logo.svg"; + logoLeftColumn.alt = "Applaws"; + currentCategory = "cat"; + index = 0; + displayImages(); + catButton.classList.add("active"); + dogButton.classList.remove("active"); + toysButton.classList.remove("active"); + wetButton.style.display = "block"; + dryButton.style.display = "block"; + }); + + dogButton.addEventListener("click", function () { + logoLeftColumn.src = "./src/applaws-logo.svg"; + logoLeftColumn.alt = "applaws"; + currentCategory = "dog"; + index = 0; + displayImages(); + dogButton.classList.add("active"); + catButton.classList.remove("active"); + toysButton.classList.remove("active"); + wetButton.style.display = "block"; + dryButton.style.display = "block"; + }); + + toysButton.addEventListener("click", function () { + logoLeftColumn.src = "./src/katido-logo.svg"; + logoLeftColumn.alt = "Katido"; + currentCategory = "toys"; + index = 0; + displayImages(); + toysButton.classList.add("active"); + catButton.classList.remove("active"); + dogButton.classList.remove("active"); + wetButton.style.display = "none"; + dryButton.style.display = "none"; + }); +} + +// Mobile version script +let index = 0; +const categories = { + cat: { + wet: document.querySelectorAll(".cat-wet div"), + dry: document.querySelectorAll(".cat-dry div"), + }, + dog: { + wet: document.querySelectorAll(".dog-wet div"), + dry: document.querySelectorAll(".dog-dry div"), + }, + toys: document.querySelectorAll(".toys div"), +}; +let currentCategory = "cat"; +let currentSubcategory = "wet"; +const displayDiv = document.querySelector(".cat-wet"); + +for (let category in categories) { + if (category === "toys") { + for (let i = 0; i < categories[category].length; i++) { + categories[category][i].style.display = "none"; + } + } else { + for (let subcategory in categories[category]) { + for (let i = 0; i < categories[category][subcategory].length; i++) { + categories[category][subcategory][i].style.display = "none"; + } + } + } +} + +function displayImages() { + for (let category in categories) { + if (category === "toys") { + for (let i = 0; i < categories[category].length; i++) { + categories[category][i].style.display = "none"; + } + } else { + for (let subcategory in categories[category]) { + for (let i = 0; i < categories[category][subcategory].length; i++) { + categories[category][subcategory][i].style.display = "none"; + } + } + } + } + + let images; + if (currentCategory === "toys") { + images = categories[currentCategory]; + } else { + images = categories[currentCategory][currentSubcategory]; + } + + // Zmieniamy tutaj ilość wyświetlanych obrazków na 1 + for (let i = index; i < index + 1; i++) { + if (i < images.length) { + images[i].style.display = "block"; + displayDiv.appendChild(images[i]); + } + } +} + +displayImages(); + +// Dodajemy obsługę przesuwania +let touchstartX = 0; +let touchendX = 0; + +displayDiv.addEventListener( + "touchstart", + function (event) { + touchstartX = event.changedTouches[0].screenX; + }, + false +); + +displayDiv.addEventListener( + "touchend", + function (event) { + touchendX = event.changedTouches[0].screenX; + handleSwipe(); + }, + false +); + +function handleSwipe() { + let images; + if (currentCategory === "toys") { + images = categories[currentCategory]; + } else { + images = categories[currentCategory][currentSubcategory]; + } + + if (touchendX < touchstartX) { + if (index + 1 < images.length) { + index += 1; + displayImages(); + } + } + + if (touchendX > touchstartX) { + if (index - 1 >= 0) { + index -= 1; + displayImages(); + } + } +} + +const wetButton = document.querySelector(".wet"); +const dryButton = document.querySelector(".dry"); + +const logoLeftColumn = document.querySelector(".section-applaws-logo img"); + +wetButton.addEventListener("click", function () { + if (currentCategory !== "toys") { + currentSubcategory = "wet"; + index = 0; + displayImages(); + wetButton.classList.add("active-food-option"); + dryButton.classList.remove("active-food-option"); + } +}); + +dryButton.addEventListener("click", function () { + if (currentCategory !== "toys") { + currentSubcategory = "dry"; + index = 0; + displayImages(); + dryButton.classList.add("active-food-option"); + wetButton.classList.remove("active-food-option"); + } +}); + +const catButton = document.querySelector(".cat-option"); +const dogButton = document.querySelector(".dog-option"); +const toysButton = document.querySelector(".toys-option"); + +catButton.addEventListener("click", function () { + logoLeftColumn.src = "./src/applaws-logo.svg"; + logoLeftColumn.alt = "Applaws"; + currentCategory = "cat"; + index = 0; + displayImages(); + catButton.classList.add("active"); + dogButton.classList.remove("active"); + toysButton.classList.remove("active"); + wetButton.style.display = "block"; + dryButton.style.display = "block"; +}); + +dogButton.addEventListener("click", function () { + logoLeftColumn.src = "./src/applaws-logo.svg"; + logoLeftColumn.alt = "applaws"; + currentCategory = "dog"; + index = 0; + displayImages(); + dogButton.classList.add("active"); + catButton.classList.remove("active"); + toysButton.classList.remove("active"); + wetButton.style.display = "block"; + dryButton.style.display = "block"; +}); + +toysButton.addEventListener("click", function () { + logoLeftColumn.src = "./src/katido-logo.svg"; + logoLeftColumn.alt = "Katido"; + currentCategory = "toys"; + index = 0; + displayImages(); + toysButton.classList.add("active"); + catButton.classList.remove("active"); + dogButton.classList.remove("active"); + wetButton.style.display = "none"; + dryButton.style.display = "none"; +}); + +// Use matchMedia to check the device's viewport width +if (window.matchMedia("(min-width: 480px)").matches) { + // If viewport width is at least 480px, run the desktop version script + desktopScript(); +} else { + // Otherwise, run the mobile version script + mobileScript(); +} diff --git a/js/slider.js b/js/slider.js deleted file mode 100644 index 52fb0c8..0000000 --- a/js/slider.js +++ /dev/null @@ -1,185 +0,0 @@ -let index = 0; -const categories = { - cat: { - wet: document.querySelectorAll(".cat-wet div"), - dry: document.querySelectorAll(".cat-dry div"), - }, - dog: { - wet: document.querySelectorAll(".dog-wet div"), - dry: document.querySelectorAll(".dog-dry div"), - }, - toys: document.querySelectorAll(".toys div"), -}; -let currentCategory = "cat"; -let currentSubcategory = "wet"; -const displayDiv = document.querySelector(".cat-wet"); -const nextButton = document.querySelector(".arrow-right-btn"); -const prevButton = document.querySelector(".arrow-left-btn"); - -for (let category in categories) { - if (category === "toys") { - for (let i = 0; i < categories[category].length; i++) { - categories[category][i].style.display = "none"; - } - } else { - for (let subcategory in categories[category]) { - for (let i = 0; i < categories[category][subcategory].length; i++) { - categories[category][subcategory][i].style.display = "none"; - } - } - } -} - -function displayImages() { - for (let category in categories) { - if (category === "toys") { - for (let i = 0; i < categories[category].length; i++) { - categories[category][i].style.display = "none"; - } - } else { - for (let subcategory in categories[category]) { - for (let i = 0; i < categories[category][subcategory].length; i++) { - categories[category][subcategory][i].style.display = "none"; - } - } - } - } - - let images; - if (currentCategory === "toys") { - images = categories[currentCategory]; - } else { - images = categories[currentCategory][currentSubcategory]; - } - - for (let i = index; i < index + 6; i++) { - if (i < images.length) { - images[i].style.display = "block"; - displayDiv.appendChild(images[i]); - } - } - - // Slider animation effect - for (let i = index; i < index + 6; i++) { - if (i < images.length) { - images[i].style.display = "block"; - images[i].style.opacity = 0; - images[i].style.transform = "translateX(-100px) scale(0.8)"; - images[i].style.transition = - "opacity 0.5s ease-in-out, transform 0.5s ease-in-out"; - images[i].style.transitionDelay = `${(i - index) * 0.1}s`; - displayDiv.appendChild(images[i]); - - // use setTimeout to change opacity, position, and scale after the element is in the DOM - setTimeout(() => { - images[i].style.opacity = 1; - images[i].style.transform = "translateX(0) scale(1)"; - }, 0); - } - } - - prevButton.disabled = index === 0; - nextButton.disabled = index + 6 >= images.length; - if (prevButton.disabled) { - prevButton.style.cursor = "not-allowed"; - } else { - prevButton.style.cursor = "pointer"; - } - - if (nextButton.disabled) { - nextButton.style.cursor = "not-allowed"; - } else { - nextButton.style.cursor = "pointer"; - } -} - -displayImages(); - -nextButton.addEventListener("click", function () { - let images; - if (currentCategory === "toys") { - images = categories[currentCategory]; - } else { - images = categories[currentCategory][currentSubcategory]; - } - - if (index + 6 < images.length) { - index += 6; - displayImages(); - } -}); - -prevButton.addEventListener("click", function () { - if (index - 6 >= 0) { - index -= 6; - displayImages(); - } -}); - -const wetButton = document.querySelector(".wet"); -const dryButton = document.querySelector(".dry"); - -const logoLeftColumn = document.querySelector(".section-applaws-logo img"); - -wetButton.addEventListener("click", function () { - if (currentCategory !== "toys") { - currentSubcategory = "wet"; - index = 0; - displayImages(); - wetButton.classList.add("active-food-option"); - dryButton.classList.remove("active-food-option"); - } -}); - -dryButton.addEventListener("click", function () { - if (currentCategory !== "toys") { - currentSubcategory = "dry"; - index = 0; - displayImages(); - dryButton.classList.add("active-food-option"); - wetButton.classList.remove("active-food-option"); - } -}); - -const catButton = document.querySelector(".cat-option"); -const dogButton = document.querySelector(".dog-option"); -const toysButton = document.querySelector(".toys-option"); - -catButton.addEventListener("click", function () { - logoLeftColumn.src = "./src/applaws-logo.svg"; - logoLeftColumn.alt = "Applaws"; - currentCategory = "cat"; - index = 0; - displayImages(); - catButton.classList.add("active"); - dogButton.classList.remove("active"); - toysButton.classList.remove("active"); - wetButton.style.display = "block"; - dryButton.style.display = "block"; -}); - -dogButton.addEventListener("click", function () { - logoLeftColumn.src = "./src/applaws-logo.svg"; - logoLeftColumn.alt = "applaws"; - currentCategory = "dog"; - index = 0; - displayImages(); - dogButton.classList.add("active"); - catButton.classList.remove("active"); - toysButton.classList.remove("active"); - wetButton.style.display = "block"; - dryButton.style.display = "block"; -}); - -toysButton.addEventListener("click", function () { - logoLeftColumn.src = "./src/katido-logo.svg"; - logoLeftColumn.alt = "Katido"; - currentCategory = "toys"; - index = 0; - displayImages(); - toysButton.classList.add("active"); - catButton.classList.remove("active"); - dogButton.classList.remove("active"); - wetButton.style.display = "none"; - dryButton.style.display = "none"; -}); diff --git a/sass/_basic.scss b/sass/_basic.scss index a01d4bd..2d838f6 100644 --- a/sass/_basic.scss +++ b/sass/_basic.scss @@ -32,5 +32,7 @@ button { .container { max-width: 1440px; margin: 0 auto; - // border: 1px solid black; + @include mobile { + overflow: hidden; + } } diff --git a/sass/_header.scss b/sass/_header.scss index ba36e70..dfb7465 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -2,14 +2,21 @@ display: flex; justify-content: space-between; padding: 150px 0 100px 0; - // background-color: lightblue; - // background-color: lightgoldenrodyellow; + @include mobile { + padding: 0; + flex-wrap: wrap; + border-bottom: 1px solid #d1d1d1; + } .left-dog { position: relative; - // background-color: #d1d1d1; padding-top: 70px; left: 40px; - // align-self: flex-end; + @include mobile { + padding: 0; + order: 2; + left: -55px; + bottom: 0; + } &::after { content: ""; position: absolute; @@ -18,21 +25,42 @@ width: 50vw; height: 1px; background-color: #d1d1d1; + @include mobile { + display: none; + } } img { width: 300px; height: 306px; + @include mobile { + width: 167px; + height: 171px; + position: relative; + bottom: -4px; + // z-index: 100; + } } } .main-txt { // background-color: lightblue; text-align: center; + @include mobile { + order: 1; + flex-basis: 100%; + position: relative; + } h1.txt1 { font-family: "Literata"; font-weight: 800; font-size: 4rem; text-align: center; - // width: 647px; + @include mobile { + font-size: 2.8rem; + padding-top: 22px; + br { + display: none; + } + } } p.txt2 { font-family: "Lato"; @@ -41,12 +69,28 @@ margin-top: 50px; font-weight: 500; margin: 38px auto 0 auto; + @include mobile { + margin: 0; + font-size: 1.2rem; + position: absolute; + top: 160%; + left: 50%; + transform: translateX(-50%); + width: 48%; + z-index: 10; + line-height: 1.7; + } } } .right-cat { padding-top: 90px; position: relative; right: 60px; + @include mobile { + padding: 0; + order: 3; + right: -60px; + } &::after { content: ""; position: absolute; @@ -55,10 +99,19 @@ width: 50vw; height: 1px; background-color: #d1d1d1; + @include mobile { + display: none; + } } img { width: 288px; height: 286px; + @include mobile { + width: 175px; + height: 174px; + position: relative; + bottom: -1px; + } } } } diff --git a/sass/_navbar.scss b/sass/_navbar.scss index 1c11670..551eb21 100644 --- a/sass/_navbar.scss +++ b/sass/_navbar.scss @@ -6,6 +6,9 @@ position: fixed; top: 0; left: 0; + @include mobile { + display: none; + } } .navbar-content { position: sticky; diff --git a/sass/mixins/_mixins-products-slider.scss b/sass/mixins/_mixins-products-slider.scss new file mode 100644 index 0000000..7054e3a --- /dev/null +++ b/sass/mixins/_mixins-products-slider.scss @@ -0,0 +1,70 @@ +@mixin product-container { + position: relative; + width: 255px; + height: 210px; + border-left: 1px solid transparent; + margin-right: 40px; + @include mobile { + margin-right: 0; + } +} +@mixin product-code { + border: 1px solid transparent; + border-left: none; + width: 95px; + line-height: 34px; + text-align: center; + display: block; + font-family: "Lato"; + font-size: 1rem; + background-color: #fff; + &:nth-child(2) { + border-top: none; + border-bottom: none; + } +} +@mixin product-img { + position: absolute; + z-index: -1; +} +@mixin description { + position: absolute; + bottom: 0; + left: 0; + padding-left: 20px; +} +@mixin product-title { + display: block; + font-size: 1rem; + font-weight: 900; + font-family: "Lato"; +} +@mixin product-ingridients { + display: block; + font-size: 1rem; + font-weight: 400; + font-family: "Lato"; +} +//================ + +@mixin product($color) { + @include product-container; + border-color: $color; + .product-code { + @include product-code; + border-color: $color; + color: $color; + } + img { + @include product-img; + } + .description { + @include description; + .title { + @include product-title; + } + .ingridients { + @include product-ingridients; + } + } +} diff --git a/sass/section-products/_option-choice.scss b/sass/section-products/_option-choice.scss index 1c06a01..27d034f 100644 --- a/sass/section-products/_option-choice.scss +++ b/sass/section-products/_option-choice.scss @@ -1,7 +1,15 @@ +// Products Section .products-section { position: relative; padding: 100px 0 180px 0; - // background-color: lightblue; + @include mobile { + padding: 0; + display: flex; + flex-wrap: wrap; + padding-top: 30px; + } + + // Options .options { position: absolute; left: 50%; @@ -10,14 +18,19 @@ display: flex; justify-content: space-between; width: 540px; - // background-color: lightblue; - // padding-top: 100px; - .dog-option img { - margin-right: 14px; + + @include mobile { + top: 0; + left: 0; + width: 382px; + transform: translate(0); + position: static; + margin: 0 auto; + // background-color: lightblue; } - .dog-option, - .cat-option, - .toys-option { + + // Individual Options + .option { width: 160px; height: 140px; border: 1px solid #d1d1d1; @@ -27,31 +40,50 @@ flex-direction: column; transition: 0.25s; cursor: pointer; + @include mobile { + width: 113px; + height: 99px; + } + + &.dog-option img { + margin-right: 14px; + @include mobile { + margin-right: 8px; + } + } + &:not(.active):hover { border-color: #000; } + img { width: 35%; } + span { font-size: 1.6rem; font-family: "Literata"; font-weight: 800; margin-top: 10px; + @include mobile { + font-size: 1.2rem; + } } } } } -// Active option +// Active Option .active { background-color: #000; color: #fff; position: relative; border: none !important; + img { filter: invert(100%); } + &::after { content: ""; position: absolute; diff --git a/sass/section-products/_product.scss b/sass/section-products/_product.scss index 3c4a36e..4097562 100644 --- a/sass/section-products/_product.scss +++ b/sass/section-products/_product.scss @@ -8,12 +8,23 @@ $dog-dry-color: #cc037d; .products-gallery { flex-basis: 69%; + @include mobile { + flex-basis: 100%; + } .cat-wet { height: 500px; display: flex; flex-wrap: wrap; align-content: space-between; padding-right: 100px; + @include mobile { + height: 330px; + // flex-wrap: nowrap; + justify-content: center; + // justify-items: flex-end; + align-content: center; + padding-right: 0; + } .cat-wet-container { @include product($cat-wet-color); img { diff --git a/sass/section-products/_products.scss b/sass/section-products/_products.scss index 5be7004..358868a 100644 --- a/sass/section-products/_products.scss +++ b/sass/section-products/_products.scss @@ -1,12 +1,36 @@ +// Food Products Section .food-products { display: flex; justify-content: space-between; + @include mobile { + width: 100%; + flex-wrap: wrap; + } + + // Food Choice .food-choice { flex-basis: 20%; + @include mobile { + flex-basis: 382px; + // background-color: lightblue; + display: flex; + // justify-content: space-between; + margin: 40px auto 0 auto; + // padding: 0 20px; + } + + // Food Option .food-option { width: 60%; display: flex; justify-content: space-between; + @include mobile { + // background-color: lightcoral; + order: 2; + flex-basis: 50%; + } + + // Wet and Dry Options .wet, .dry { flex-basis: 47%; @@ -17,38 +41,64 @@ padding: 14px 0; background-color: transparent; transition: 0.25s; + @include mobile { + } + &:not(.active-food-option):hover { border-color: #000; } } + + // Active Food Option .active-food-option { background-color: #000; color: #fff; } } + + // Gallery Arrows .gallery-arrows { width: 100px; display: flex; justify-content: space-between; align-items: center; margin-top: 20px; + @include mobile { + display: none; + } + button { background-color: transparent; width: 44px; height: 44px; border: 1px solid #d1d1d1; transition: 0.25s; + &:hover { border-color: #000; } + &:disabled { border: 1px solid #d1d1d1; } } } - .section-applaws-logo img { - margin-top: 40px; - width: 43%; + .section-applaws-logo { + @include mobile { + flex-basis: 50%; + // background-color: lightgoldenrodyellow; + } + img { + margin-top: 40px; + width: 43%; + @include mobile { + width: 50%; + // position: relative; + margin-top: 0; + } + } } + + // Section Applaws Logo } } diff --git a/sass/style.scss b/sass/style.scss index efa42eb..68619ec 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,6 +1,7 @@ @import "./fonts"; +@import "./mixins/mixins-media-queries"; @import "./basic"; -@import "./mixins"; +@import "./mixins/mixins-products-slider"; @import "./navbar"; @import "./header"; @import "./section-products/option-choice";