From 0abe0ffa98a7cb1eebabd303af8d8fbd8b9de177 Mon Sep 17 00:00:00 2001 From: Mayotopia <134679840+Mayotopia04@users.noreply.github.com> Date: Sun, 28 Jan 2024 19:16:11 +0800 Subject: [PATCH] all is fixed supposedly --- package-lock.json | 14 +- package.json | 6 +- src/images/icons.svg | 34 +--- src/images/the-watch-logo.svg | 13 -- src/index.html | 6 +- src/js/sale.js | 26 +++- src/partials/catalog.html | 94 +++++------ src/partials/footer.html | 37 ++--- src/partials/gallery.html | 5 +- src/partials/header.html | 8 +- src/partials/sale.html | 52 +++++-- src/sass/_catalog.scss | 66 ++------ src/sass/_common.scss | 1 + src/sass/_footer.scss | 49 +++--- src/sass/_header.scss | 22 +-- src/sass/_sale.scss | 283 +++++++++++++++++++++++----------- 16 files changed, 365 insertions(+), 351 deletions(-) delete mode 100644 src/images/the-watch-logo.svg diff --git a/package-lock.json b/package-lock.json index 33aad9b..b38247e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "ISC", "dependencies": { "modern-normalize": "^1.1.0", - "swiper": "^10.2.0" + "swiper": "^10.3.1" }, "devDependencies": { "@parcel/transformer-sass": "^2.6.0", @@ -2983,9 +2983,9 @@ } }, "node_modules/swiper": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.2.0.tgz", - "integrity": "sha512-nktQsOtBInJjr3f5DicxC8eHYGcLXDVIGPSon0QoXRaO6NjKnATCbQ8SZsD3dN1Ph1RH4EhVPwSYCcuDRFWHGQ==", + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz", + "integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==", "funding": [ { "type": "patreon", @@ -5046,9 +5046,9 @@ } }, "swiper": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.2.0.tgz", - "integrity": "sha512-nktQsOtBInJjr3f5DicxC8eHYGcLXDVIGPSon0QoXRaO6NjKnATCbQ8SZsD3dN1Ph1RH4EhVPwSYCcuDRFWHGQ==" + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz", + "integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==" }, "term-size": { "version": "2.2.1", diff --git a/package.json b/package.json index 54dae0c..8481878 100755 --- a/package.json +++ b/package.json @@ -2,10 +2,10 @@ "name": "parcel-project-template", "version": "2.0.0", "description": "", - "homepage": "https://johncleece.github.io/team-project", + "homepage": "https://mayotopia04.github.io/TheWatchSpot", "scripts": { "start": "parcel src/*.html", - "build": "parcel build src/*.html --public-url /team-project/" + "build": "parcel build src/*.html --public-url /TheWatchSpot/" }, "repository": { "type": "git", @@ -19,7 +19,7 @@ }, "dependencies": { "modern-normalize": "^1.1.0", - "swiper": "^10.2.0" + "swiper": "^10.3.1" }, "devDependencies": { "@parcel/transformer-sass": "^2.6.0", diff --git a/src/images/icons.svg b/src/images/icons.svg index 9d7643e..3a0548e 100644 --- a/src/images/icons.svg +++ b/src/images/icons.svg @@ -70,26 +70,6 @@ - - - - @@ -112,24 +92,24 @@ - + - + - + - - + + - + - + diff --git a/src/images/the-watch-logo.svg b/src/images/the-watch-logo.svg deleted file mode 100644 index d5b5724..0000000 --- a/src/images/the-watch-logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - diff --git a/src/index.html b/src/index.html index 3c40e73..bda5f90 100755 --- a/src/index.html +++ b/src/index.html @@ -9,14 +9,10 @@ href="https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;1,600&display=swap" rel="stylesheet" /> - - - - The Watch Spot @@ -33,7 +29,7 @@ - + diff --git a/src/js/sale.js b/src/js/sale.js index c246ac4..954868f 100644 --- a/src/js/sale.js +++ b/src/js/sale.js @@ -1,11 +1,25 @@ function displayImage(imageSrc) { - var imageContainer = document.getElementById('imagecontainer'); + const imageContainer = document.getElementById('imagecontainer'); + const imageElements = document.querySelectorAll('.sale-watch-preview'); + // const imageSelected = document.querySelector(`.imageselected-${imageSrc}`); + + // const imageActive = document.querySelector('.activeimage'); + + + // Create a new image element - var img = document.createElement('img'); - img.src = imageSrc; - img.alt = 'Selected Image'; + imageElements.forEach(element => { + element.classList.remove('activeimage'); + }); + imageElements[imageSrc].classList.add('activeimage'); + + + // imageActive.classList.remove('activeimage'); + // imageSelected.classList.toggle('activeimage'); + + // Clear the contents of the image container - imageContainer.innerHTML = ''; + // Append the selected image to the container - imageContainer.appendChild(img); + } diff --git a/src/partials/catalog.html b/src/partials/catalog.html index 9d8d797..da568f7 100644 --- a/src/partials/catalog.html +++ b/src/partials/catalog.html @@ -38,8 +38,7 @@
Tube Watch S42 Date Steel With Black Case
€395 - +

@@ -56,7 +55,7 @@
Tube Watch S42 Date Steel With Black Case

DESCRIPTION

- Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

DETAILS & FEATURE

@@ -75,13 +74,12 @@
Tube Watch S42 Date Steel With Black Case
Avondale Watch Police For Men
-

- €800 +

€800 - +

+
  • @@ -97,7 +95,7 @@
    Avondale Watch Police For Men

    DESCRIPTION

    - Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

    DETAILS & FEATURE

    @@ -116,14 +114,12 @@
    Avondale Watch Police For Men
    - Diver 300M Co-Axial Master Chronometer Chronograph + Diver 300M Co‑Axial Master Chronometer Chronograph
    -

    - €600 +

    €600 - +

    • @@ -140,7 +136,7 @@

    DESCRIPTION

    - Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

    DETAILS & FEATURE

    @@ -159,12 +155,10 @@
    Diver 300M Co-Axial Master Chronometer
    -

    - €1400 +

    €1400 - +

    @@ -181,7 +175,7 @@
    Diver 300M Co-Axial Master Chronometer

    DESCRIPTION

    - Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

    DETAILS & FEATURE

    @@ -200,12 +194,10 @@
    Diver 300M Co-Axial Master Chronometer
    Taman Watch By Police For Men
    -

    - €500 +

    €500 - +

    @@ -222,7 +214,7 @@
    Taman Watch By Police For Men

    DESCRIPTION

    - Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

    DETAILS & FEATURE

    @@ -241,12 +233,10 @@
    Taman Watch By Police For Men
    Malawi Watch Police For Men
    -

    - €555 +

    €555 - +

    @@ -263,7 +253,7 @@
    Malawi Watch Police For Men

    DESCRIPTION

    - Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

    DETAILS & FEATURE

    @@ -282,12 +272,10 @@
    Malawi Watch Police For Men
    Diver 300M Co-Axial Master Chronometer
    -

    - €1200 +

    €1200 - +

    @@ -304,7 +292,7 @@
    Diver 300M Co-Axial Master Chronometer

    DESCRIPTION

    - Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

    DETAILS & FEATURE

    @@ -323,12 +311,10 @@
    Diver 300M Co-Axial Master Chronometer
    Greenlane Watch By Police For Men
    -

    - €1000 +

    €1000 - +

    @@ -345,7 +331,7 @@
    Greenlane Watch By Police For Men

    DESCRIPTION

    - Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

    DETAILS & FEATURE

    @@ -364,12 +350,10 @@
    Greenlane Watch By Police For Men
    Squardrc 5402 Chrono
    -

    - €359 +

    €359 - +

    @@ -386,7 +370,7 @@
    Squardrc 5402 Chrono

    DESCRIPTION

    - Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

    DETAILS & FEATURE

    @@ -407,12 +391,10 @@
    Squardrc 5402 Chrono
    Diver 300M Co-Axial Master Chronometer Chronograph
    -

    - €400 +

    €400 - +

    @@ -429,7 +411,7 @@

    DESCRIPTION

    - Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

    DETAILS & FEATURE

    @@ -448,12 +430,10 @@
    Citizen
    -

    - €519 +

    €519 - +

    @@ -470,7 +450,7 @@
    Citizen

    DESCRIPTION

    - Richly detailed with an understated design - the Police Men's + Richly detailed with an understated design - the Police Men’s Greenlane watch.

    DETAILS & FEATURE

    @@ -489,12 +469,10 @@
    Citizen
    Armani Exchange
    -

    - €400 +

    €400 - +

    diff --git a/src/partials/footer.html b/src/partials/footer.html index a85a102..f1ea39c 100644 --- a/src/partials/footer.html +++ b/src/partials/footer.html @@ -41,28 +41,25 @@ +
    @@ -77,8 +74,4 @@ Terms of Service - -
    -

    This site is developed by GutenTag

    -
    diff --git a/src/partials/gallery.html b/src/partials/gallery.html index 5892b04..cf4b590 100644 --- a/src/partials/gallery.html +++ b/src/partials/gallery.html @@ -1,10 +1,7 @@

    New Watches

    -

    - Green And Bronze—The
    - Match Made In Heaven -

    +

    Green And Bronze—The
    Match Made In Heaven

      diff --git a/src/partials/header.html b/src/partials/header.html index d08ae00..0b2e863 100644 --- a/src/partials/header.html +++ b/src/partials/header.html @@ -20,9 +20,9 @@
    @@ -60,9 +60,7 @@
  • CATALOG
    • -
  • - SALE -
    • +
  • SALE
    • diff --git a/src/partials/sale.html b/src/partials/sale.html index c1312c6..29d38b3 100644 --- a/src/partials/sale.html +++ b/src/partials/sale.html @@ -1,7 +1,7 @@

    Sale

    -
    +
    • @@ -9,7 +9,9 @@

      Sale

      class="sale-watch" src="./images/sale-watch1x2.png" alt="sale-watch-preview1" - onclick="displayImage('./images/sale-watch5x2.png')" + width="80" + height="80" + onclick="displayImage(0)" />
    • @@ -17,7 +19,9 @@

      Sale

      class="sale-watch" src="./images/sale-watch2x2.png" alt="sale-watch-preview2" - onclick="displayImage('./images/sale-watch2x3.png')" + width="80" + height="80" + onclick="displayImage(1)" />
    • @@ -25,7 +29,9 @@

      Sale

      class="sale-watch" src="./images/sale-watch3x3.png" alt="sale-watch-preview3" - onclick="displayImage('./images/sale-watch3x4.png')" + width="80" + height="80" + onclick="displayImage(2)" />
    • @@ -33,22 +39,44 @@

      Sale

      class="sale-watch" src="./images/sale-watch4x2.png" alt="sale-watch-preview4" - onclick="displayImage('./images/sale-watch4x4.png')" + width="80" + height="80" + onclick="displayImage(3)" />
    watch preview + watch preview + watch preview + watch preview +
    -
    -
    +

    Greenlane Watch By Police For MenHT

    @@ -57,8 +85,8 @@

    €700€1000

    -
    -
    Description
    +
    +

    Description

    Richly detailed with an understated design - the Police Men’s Greenlane watch features a versatile multifunction design that fits @@ -67,8 +95,8 @@

    Description
    through a black IP bracelet with matching crown and pushers.

    -
    -
    DETAILS & FEATURES
    +
    +

    DETAILS & FEATUREStion

    Gender: man
    Size: 46x54.5mm
    diff --git a/src/sass/_catalog.scss b/src/sass/_catalog.scss index 4b7228c..9e5acc5 100644 --- a/src/sass/_catalog.scss +++ b/src/sass/_catalog.scss @@ -120,8 +120,7 @@ } .catalog-cover-text { position: absolute; - background-color: var(--dark-green); - top: 1; + top: 0; background-color: var(--dark-green); border-radius: 8px; transform: translateY(100%); @@ -139,6 +138,7 @@ margin-bottom: 10px; line-height: 18px; letter-spacing: -0.28px; + margin-top: 20px; } .catalog-cover-text-body { @@ -148,7 +148,7 @@ color: rgba(255, 255, 255, 0.5); line-height: 18px; letter-spacing: -0.14px; - margin-top: 20px; + // margin-top: 20px; margin-bottom: 20px; } @@ -165,7 +165,6 @@ height: 100%; background-color: rgba(0, 0, 0, 0.2); opacity: 1; - z-index: 9999; transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } @@ -177,32 +176,17 @@ position: absolute; top: 50%; left: 50%; - width: 904px; - height: 694px; + min-width: 904px; + min-height: 694px; background-color: var(--white); border-radius: 8px; display: flex; flex-direction: row; gap: 40px; padding: 40px; - overflow-y: auto; transform: translate(-50%, -50%) scale(1); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); - - @media screen and (min-width: 768px) { - width: 904px; - height: 694px; - top: 50%; - left: 50%; - } - - @media screen and (min-width: 1158px) { - width: 904px; - height: 694px; - top: 50%; - left: 50%; - } } .catalog-close { @@ -216,7 +200,7 @@ width: 24px; height: 24px; cursor: pointer; - background-color: transparent; + background-color: lightgrey; border: 1px solid transparent; transform: rotate(0deg); @@ -265,14 +249,14 @@ .form-modal-container { width: 100%; - height: 100%; + height: 100; } /*modal-forms*/ .form-field { display: flex; - position: relative; + position: rel ative; flex-direction: column; } @@ -308,7 +292,7 @@ .button.button-submit { width: 100%; - background-color: var(--dark-green); + background-color: var(--darkgreen); padding: 18px 0px; color: var(--white); border-radius: 8px; @@ -316,12 +300,14 @@ border: 1px solid transparent; transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), + border 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .button.button-submit:hover, .button.button-submit:focus { border-color: var(--white); + border: 1px solid var(--metallicgrey); background-color: rgba(30, 40, 39, 0.8); } @@ -351,10 +337,6 @@ .catalog { margin-bottom: 40px; } - - .catalog-modal{ - width: 744px; - } } @media screen and (max-width: 767px) { @@ -369,30 +351,4 @@ .catalog-title { font-size: 32px; } - - .catalog-modal { - display: flex; - flex-wrap: wrap; - width: 90%; - height: 95vh; - justify-content: center; - gap: 10px; - } - - .form-modal-container{ - height: unset; - } - - .product-modal-image{ - width: 100%; - height: fit-content; - } - - .catalog-image{ - margin-top: 0; - } - - .submit-note br{ - display: none; - } } diff --git a/src/sass/_common.scss b/src/sass/_common.scss index 2ac7277..73b4482 100755 --- a/src/sass/_common.scss +++ b/src/sass/_common.scss @@ -32,6 +32,7 @@ html { a{ text-decoration: none; + } .list { diff --git a/src/sass/_footer.scss b/src/sass/_footer.scss index 6d69824..a08cf62 100644 --- a/src/sass/_footer.scss +++ b/src/sass/_footer.scss @@ -21,7 +21,7 @@ .lower-container{ display: flex; justify-content: space-between; - margin-top: 100px; + margin-top: 174px; } .footer-navigation{ @@ -64,27 +64,36 @@ .footer-social-item{ border-radius: 10px; - border: 1px solid var(--border); + border: 1px solid #fefefe99; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; - - transition: background-color 250ms ease-in-out; } -.footer-social-item:hover{ - background-color: var(--light-green); +.footer-social-item:hover, +.footer-social-item:focus{ + border: white; } -.footer-social-icon{ - fill: var(--white); +.footer-social-link{ + cursor: pointer; display: flex; + justify-content: center; + color: #fefefe99; + border-color: var(--border); + transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1); } -.footer-social-icon:hover { - fill: var(--dark-green); +.footer-social-link:hover, +.footer-social-link:focus{ + color: var(--white); + border-color: white; +} + +.footer-social-icon{ + fill: var(--white); } .lower-text{ @@ -113,26 +122,6 @@ gap: 18px; } -.lowest-container{ - margin-top: 20px; - border-top: 1px solid var(--light-green); -} - -.webmaster{ - color: var(--light-green); - text-align: center; - font-family: 'Epilogue'; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 18px; - letter-spacing: -0.28px; - padding-top: 20px; - - @media screen and (max-width: 767px){ - font-size: 12px; - } -} @media screen and (max-width: 767px) { .footer { diff --git a/src/sass/_header.scss b/src/sass/_header.scss index a703f73..2706ade 100644 --- a/src/sass/_header.scss +++ b/src/sass/_header.scss @@ -43,41 +43,41 @@ .header-navigation-link{ - color: var(--white); + color: #fefefe99; font-family: Epilogue; font-size: 9px; font-style: normal; font-weight: 400; line-height: 12px; text-transform: uppercase; - - transition: transform 250ms ease-in-out; + transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .header-navigation-link:hover{ - transform: scale(1.2); + color: rgba(254, 254, 254, 1); + } + .header-button{ - color: var(--white); + color: #fefefe99; text-align: center; font-family: Epilogue; font-size: 9px; font-style: normal; font-weight: 400; line-height: 12px; - text-transform: uppercase; + // text-transform: uppercase; padding: 18px 36px; border-radius: 8px; background-color: var(--dark-green); border: none; - - transition: background-color 250ms ease-in-out, color 250ms ease-in-out; + cursor: pointer; + transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } -.header-button:hover{ - background-color: var(--white); - color: var(--dark-green); +.header-button:hover { + color: rgba(254, 254, 254, 1); } .hamburger-container{ diff --git a/src/sass/_sale.scss b/src/sass/_sale.scss index 7330e45..261b662 100644 --- a/src/sass/_sale.scss +++ b/src/sass/_sale.scss @@ -3,15 +3,9 @@ padding: 0 0 80px 0; } -.sale-column{ - display: flex; - padding: 0 98px; - gap: 40px; -} - .sale-description { color: rgba(20, 20, 20, 0.5); - font-family: 'Epilogue'; + font-family: Epilogue; font-size: 14px; font-style: normal; font-weight: 400; @@ -23,7 +17,7 @@ .sale-description-details { color: rgba(20, 20, 20, 0.5); - font-family: 'Epilogue'; + font-family: Epilogue; font-size: 14px; font-style: normal; font-weight: 400; @@ -37,30 +31,35 @@ cursor: pointer; } -.watch-items{ - margin: 0; - width: 146px; - height: 146px; +.watch-items { + list-style: none; + line-height: 0em; } - -.sale-info-container{ - width: 50%; +.watch-items:not(:last-child) { + margin-bottom: 10px; } .sale-heading { - color: var(--black); - font-family: 'Epilogue'; + color: var(--black, #141414); + font-family: Epilogue; font-size: 32px; font-style: normal; font-weight: 600; line-height: 40px; letter-spacing: -0.64px; margin-bottom: 40px; + + @media screen and (min-width: 768px) { + color: var(--dark-green, #1e2827); + font-size: 40px; + line-height: 44px; + letter-spacing: -0.8px; + } } .sale-heading { - color: var(--black); + color: var(--black, #141414); font-family: Epilogue; font-size: 32px; font-style: normal; @@ -68,52 +67,179 @@ line-height: 40px; letter-spacing: -0.64px; margin-bottom: 40px; + + @media screen and (min-width: 768px) { + color: var(--dark-green); + font-size: 40px; + line-height: 44px; + letter-spacing: -0.8px; + } +} + +.item-wrapper { + @media screen and (min-width: 768px) { + margin-left: 66px; + margin-right: 0px; + width: 768px; + } + + @media screen and (min-width: 1158px) { + width: 1081px; + display: flex; + gap: 40px; + height: 614px; + margin-left: 97px; + margin-right: 0px; + padding-bottom: 0px; + margin-right: 0px; + } } .wrapper { display: flex; - gap: 20px; +} + +@media screen and (min-width: 768px) { + .sale-watch { + width: 146px; + height: 146px; + } } .preview-wrapper { - width: 406px; - height: 614px; - margin: 0; + width: 235px; + height: 350px; + margin-bottom: 0px; + padding-bottom: 0px; + margin-left: 20px; + margin-bottom: 0px; display: flex; align-items: center; justify-content: center; - background-color: var(--black); + background-color: #141414; } +#imagecontainer { + max-width: 100%; + max-height: 100%; + overflow: hidden; +} -.sale-watch-container{ - display: flex; - flex-direction: column; - gap: 10px; +#imagecontainer img { + max-width: 100%; + max-height: 100%; + // display: block; + margin: auto; +} + +@media screen and (min-width: 768px) { + .preview-wrapper { + width: 406px; + height: 614px; + + margin-bottom: 0px; + padding-bottom: 0px; + margin-left: 20px; + margin-bottom: 0px; + display: flex; + align-items: center; + justify-content: center; + background-color: #141414; + } + + #imagecontainer { + max-width: 100%; + max-height: 100%; + overflow: hidden; + } + + #imagecontainer img { + max-width: 100%; + max-height: 100%; + // display: none; + margin: auto; + } } + + .sale-watch-preview { - padding: 0; - margin: 0; - width: 100%; + width: 235px; + height: 351px; + padding: 0px; + margin-bottom: -2px; + margin-left: 20px; background-color: #141414; + display: none; + + + @media screen and (min-width: 768px) { + width: 100%; + height: auto; + } } + +.sale-info-container { + padding: 0px; + margin: 0px; + width: 335px; + + @media screen and (min-width: 768px) { + padding: 0px; + margin: 0px; + width: 572px; + } + + @media screen and (min-width: 1158px) { + width: 369px; + } +} + .sale-details-heading { - color: var(--black); - font-family: 'Epilogue'; - font-size: 38px; + color: var(--black, #141414); + font-family: Epilogue; + font-size: 24px; font-style: normal; font-weight: 400; - line-height: 40px; + line-height: 24px; letter-spacing: -0.48px; + margin-bottom: 0px; + + @media screen and (min-width: 768px) { + font-size: 38px; + line-height: 40px; + letter-spacing: -0.76px; + margin-bottom: 0px; + } + + @media screen and (min-width: 1158px) { + margin-top: 0px; + } +} + +.margin-container { + margin-top: 40px; + width: 335px; + padding: 0px; + + @media screen and (min-width: 768px) { + width: 574px; + } + + @media screen and (min-width: 1158px) { + width: 1081px; + margin-top: 0px; + margin-bottom: 40px; + width: 369px; + } } .sale-product-tag { color: rgba(20, 20, 20, 0.5); - font-family: 'Epilogue'; + font-family: Epilogue; font-size: 14px; font-style: normal; font-weight: 400; @@ -123,8 +249,8 @@ } .current-price-on-sale { - color: var(--black); - font-family: 'Epilogue'; + color: var(--black, #141414); + font-family: Epilogue; font-size: 18px; font-style: normal; font-weight: 400; @@ -135,7 +261,7 @@ .actual-price { color: rgba(20, 20, 20, 0.5); - font-family: 'Epilogue'; + font-family: Epilogue; font-size: 12px; font-style: normal; font-weight: 400; @@ -146,8 +272,8 @@ } .sale-details-title { - color: var(--black); - font-family: 'Epilogue'; + color: var(--black, #141414); + font-family: Epilogue; font-size: 18px; font-style: normal; font-weight: 400; @@ -157,47 +283,38 @@ padding-top: 8px; padding-bottom: 8px; margin: 0 auto; - border-top: 1px solid var(--black); + border-top: 1px solid var(--black, #141414); display: flex; align-items: center; position: relative; + + @media screen and (min-width: 768px) { + width: 572px; + } + + @media screen and (min-width: 1158px) { + width: 369px; + } } -.sale-details-title:after { - content:''; +.sale-details-title::after { + content: ''; width: 16px; height: 2px; - background-color: var(--black); + background-color: #141414; position: absolute; - right: 0; -} - -.sale-details{ - margin-bottom: 40px; + left: 319px; } -.sale-details-2{ - margin-bottom: 20px; -} - - - -@media screen and (max-width: 1176px){ - .sale-section { - padding: 64px 0; - } - - .sale-column{ - display: flex; - flex-direction: column; - } - - .sale-info-container{ - width: 100%; +@media screen and (min-width: 768px) { + .sale-details-title::after { + left: 556px; } - .sale-column { - padding: 0 66px; + @media screen and (min-width: 1158px) { + .sale-details-title::after { + left: 353px; + } } } @@ -206,32 +323,12 @@ width: 100%; } - .sale-section { + .hero-section { padding: 40px 0; } - - .sale-column { - padding: 0; - } - - .sale-details-heading{ - font-size: 24px; - } } - @media screen and (max-width:430px){ - .wrapper{ - justify-content: space-between; - } - - .watch-items { - margin: 0; - width: 80px; - height: 80px; - } - - .preview-wrapper{ - width: 235px; - height: 350px; - } +.activeimage { + display: block; + }