diff --git a/package-lock.json b/package-lock.json index e6c0aff679c..89b4fdaeef2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "parcel-project-template", + "name": "team-project", "version": "2.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "parcel-project-template", + "name": "team-project", "version": "2.0.0", "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index efbc9f63d06..5ca554a0769 100755 --- a/package.json +++ b/package.json @@ -1,21 +1,21 @@ { - "name": "parcel-project-template", + "name": "team-project", "version": "2.0.0", "description": "", - "homepage": "https://goitacademy.github.io/parcel-project-template", + "homepage": "https://alinaelenadogaru.github.io/team-project", "scripts": { "start": "parcel src/*.html", - "build": "parcel build src/*.html --public-url /parcel-project-template/" + "build": "parcel build src/*.html --public-url /team-project/" }, "repository": { "type": "git", - "url": "git+https://github.com/goitacademy/parcel-project-template.git" + "url": "git+https://github.com/alinaelenadogaru/team-project.git" }, "keywords": [], "author": "Alexander Repeta ", "license": "ISC", "bugs": { - "url": "https://github.com/goitacademy/parcel-project-template/issues" + "url": "https://github.com/alinaelenadogaru/team-project/issues" }, "dependencies": { "modern-normalize": "^1.1.0" diff --git a/src/css/footer.css b/src/css/footer.css new file mode 100644 index 00000000000..2d3d5ea5edf --- /dev/null +++ b/src/css/footer.css @@ -0,0 +1,257 @@ + + +* { + margin: 0; + padding: 0; + border: 0px; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; + color: inherit; +} + +footer { + font-family: 'Epilogue'; + background-color: #1e2827; + color: white; + box-sizing: border-box; + padding-left: 104px; + padding-right: 104px; + padding-top: 132px; +} + +.footer-logo svg { + fill: white; + width: 50px; + height: 50px; + margin-bottom: 40px; +} + +.footer-info { + display: flex; + flex-direction: column; +} + +.footer-address { + font-family: var(--primary-font); + font-size: 18px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.02em; + text-align: left; + margin-top: 18px; +} + +.footer-nav li { + margin-bottom: 18px; + font-family: var(--primary-font); + font-size: 18px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.02em; + text-align: left; +} + +.footer-social { + width: 28px; + height: 28px; + border: 1px solid #ffffff1a; + border-radius: 10px; +} + +.footer-socials ul { + display: flex; + flex-direction: row; + gap: 20px; +} + +footer .container { + display: flex; + justify-content: space-between; +} + +.footer-copyright-terms { + display: flex; + justify-content: space-between; + margin-top: 174px; + padding-bottom: 32px; + font-family: var(--primary-font); + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: right; + color: #c6cdd1; +} + +.footer-terms a { + padding-left: 18px; +} + +.footer-mobile_socials { + display: none; +} + +@media screen and (min-width: 375px) and (max-width: 767px) { + .footer-socials { + display: none; + } + + footer { + padding: 40px 20px 20px 20px; + } + + footer .container { + margin: 0; + } + + .footer-info { + min-width: 140px; + } + + .footer-nav { + margin-left: 138px; + min-width: 80px; + } + + .footer-social { + width: 40px; + height: 40px; + } + + .footer-address { + font-family: var(--primary-font); + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + } + + .footer-info a { + font-family: var(--primary-font); + font-size: 14px; + font-weight: 400; + line-height: 18px; + text-align: left; + } + + .footer-nav { + font-family: var(--primary-font); + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + } + + .footer-mobile_socials { + display: flex; + flex-direction: row; + gap: 14px; + margin-top: 40px; + margin-bottom: 80px; + } + + .footer-copyright-terms a { + margin-top: 80px; + margin-bottom: 0px; + font-family: var(--primary-font); + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + } + + .footer-terms { + padding-top: 18px; + } + + .footer-copyright-terms { + align-items: flex-start; + flex-direction: column; + } +} + +@media screen and (min-width: 768px) and (max-width: 1280px) { + .footer-socials { + display: none; + } + + footer { + padding: 40px 20px 20px 20px; + } + + footer .container { + margin: 0; + } + + .footer-info { + min-width: 140px; + } + + .footer-nav { + margin-left: 138px; + min-width: 80px; + } + + .footer-social { + width: 40px; + height: 40px; + } + + .footer-address { + font-family: var(--primary-font); + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + } + + .footer-info a { + font-family: var(--primary-font); + font-size: 14px; + font-weight: 400; + line-height: 18px; + text-align: left; + } + + .footer-nav { + font-family: var(--primary-font); + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + } + + .footer-mobile_socials { + display: flex; + flex-direction: row; + gap: 14px; + margin-top: 40px; + margin-bottom: 80px; + } + + .footer-copyright-terms a { + margin-top: 152px; + margin-bottom: 0px; + font-family: var(--primary-font); + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + } + + .footer-copyright-terms { + gap: 18px; + } +} diff --git a/src/images/armani@1x.jpg b/src/images/armani@1x.jpg new file mode 100644 index 00000000000..ad7f71871b9 Binary files /dev/null and b/src/images/armani@1x.jpg differ diff --git a/src/images/armani@2x.jpg b/src/images/armani@2x.jpg new file mode 100644 index 00000000000..341769b8c69 Binary files /dev/null and b/src/images/armani@2x.jpg differ diff --git a/src/images/avondale@1x.jpg b/src/images/avondale@1x.jpg new file mode 100644 index 00000000000..918622366fe Binary files /dev/null and b/src/images/avondale@1x.jpg differ diff --git a/src/images/avondale@2x.jpg b/src/images/avondale@2x.jpg new file mode 100644 index 00000000000..34d98273c3c Binary files /dev/null and b/src/images/avondale@2x.jpg differ diff --git a/src/images/citizen@1x.jpg b/src/images/citizen@1x.jpg new file mode 100644 index 00000000000..355a7c7e2d0 Binary files /dev/null and b/src/images/citizen@1x.jpg differ diff --git a/src/images/citizen@2x.jpg b/src/images/citizen@2x.jpg new file mode 100644 index 00000000000..5d550f56edb Binary files /dev/null and b/src/images/citizen@2x.jpg differ diff --git a/src/images/firstdiver@1x.jpg b/src/images/firstdiver@1x.jpg new file mode 100644 index 00000000000..80477632074 Binary files /dev/null and b/src/images/firstdiver@1x.jpg differ diff --git a/src/images/firstdiver@2x.jpg b/src/images/firstdiver@2x.jpg new file mode 100644 index 00000000000..5dbf1c3fdd8 Binary files /dev/null and b/src/images/firstdiver@2x.jpg differ diff --git a/src/images/forthdiver@1x.jpg b/src/images/forthdiver@1x.jpg new file mode 100644 index 00000000000..3ac4c0a0672 Binary files /dev/null and b/src/images/forthdiver@1x.jpg differ diff --git a/src/images/forthdiver@2x.jpg b/src/images/forthdiver@2x.jpg new file mode 100644 index 00000000000..0033ec689b7 Binary files /dev/null and b/src/images/forthdiver@2x.jpg differ diff --git a/src/images/greenlane@1x.jpg b/src/images/greenlane@1x.jpg new file mode 100644 index 00000000000..4629312f4d6 Binary files /dev/null and b/src/images/greenlane@1x.jpg differ diff --git a/src/images/greenlane@2x.jpg b/src/images/greenlane@2x.jpg new file mode 100644 index 00000000000..0e120400759 Binary files /dev/null and b/src/images/greenlane@2x.jpg differ diff --git a/src/images/malawi@1x.jpg b/src/images/malawi@1x.jpg new file mode 100644 index 00000000000..f573d97fa3e Binary files /dev/null and b/src/images/malawi@1x.jpg differ diff --git a/src/images/malawi@2x.jpg b/src/images/malawi@2x.jpg new file mode 100644 index 00000000000..984ae5df64c Binary files /dev/null and b/src/images/malawi@2x.jpg differ diff --git a/src/images/sale-watch@1x-1.jpg b/src/images/sale-watch@1x-1.jpg new file mode 100644 index 00000000000..26c119c5f01 Binary files /dev/null and b/src/images/sale-watch@1x-1.jpg differ diff --git a/src/images/sale-watch@1x-2.jpg b/src/images/sale-watch@1x-2.jpg new file mode 100644 index 00000000000..c7b7e3aa69d Binary files /dev/null and b/src/images/sale-watch@1x-2.jpg differ diff --git a/src/images/sale-watch@1x-3.jpg b/src/images/sale-watch@1x-3.jpg new file mode 100644 index 00000000000..bf8e6e8a328 Binary files /dev/null and b/src/images/sale-watch@1x-3.jpg differ diff --git a/src/images/sale-watch@1x-4.jpg b/src/images/sale-watch@1x-4.jpg new file mode 100644 index 00000000000..58bc3b6e473 Binary files /dev/null and b/src/images/sale-watch@1x-4.jpg differ diff --git a/src/images/sale-watch@1x-5.jpg b/src/images/sale-watch@1x-5.jpg new file mode 100644 index 00000000000..f5a77d665ba Binary files /dev/null and b/src/images/sale-watch@1x-5.jpg differ diff --git a/src/images/sale-watch@2x-1.jpg b/src/images/sale-watch@2x-1.jpg new file mode 100644 index 00000000000..821e8c0a845 Binary files /dev/null and b/src/images/sale-watch@2x-1.jpg differ diff --git a/src/images/sale-watch@2x-2.jpg b/src/images/sale-watch@2x-2.jpg new file mode 100644 index 00000000000..1fa6259c9e0 Binary files /dev/null and b/src/images/sale-watch@2x-2.jpg differ diff --git a/src/images/sale-watch@2x-3.jpg b/src/images/sale-watch@2x-3.jpg new file mode 100644 index 00000000000..56298f37db7 Binary files /dev/null and b/src/images/sale-watch@2x-3.jpg differ diff --git a/src/images/sale-watch@2x-4.jpg b/src/images/sale-watch@2x-4.jpg new file mode 100644 index 00000000000..f90544d55c6 Binary files /dev/null and b/src/images/sale-watch@2x-4.jpg differ diff --git a/src/images/sale-watch@2x-5.jpg b/src/images/sale-watch@2x-5.jpg new file mode 100644 index 00000000000..015bc8b2b04 Binary files /dev/null and b/src/images/sale-watch@2x-5.jpg differ diff --git a/src/images/seconddiver@1x.jpg b/src/images/seconddiver@1x.jpg new file mode 100644 index 00000000000..c22bf2d4d50 Binary files /dev/null and b/src/images/seconddiver@1x.jpg differ diff --git a/src/images/seconddiver@2x.jpg b/src/images/seconddiver@2x.jpg new file mode 100644 index 00000000000..cb9553aac97 Binary files /dev/null and b/src/images/seconddiver@2x.jpg differ diff --git a/src/images/squardrc@1x.jpg b/src/images/squardrc@1x.jpg new file mode 100644 index 00000000000..6dfd13c5405 Binary files /dev/null and b/src/images/squardrc@1x.jpg differ diff --git a/src/images/squardrc@2x.jpg b/src/images/squardrc@2x.jpg new file mode 100644 index 00000000000..4f01cbf9872 Binary files /dev/null and b/src/images/squardrc@2x.jpg differ diff --git a/src/images/symbol-defs.svg b/src/images/symbol-defs.svg new file mode 100644 index 00000000000..2dfbefa1796 --- /dev/null +++ b/src/images/symbol-defs.svg @@ -0,0 +1,20 @@ + diff --git a/src/images/taman@1x.jpg b/src/images/taman@1x.jpg new file mode 100644 index 00000000000..87f176ad9e0 Binary files /dev/null and b/src/images/taman@1x.jpg differ diff --git a/src/images/taman@2x.jpg b/src/images/taman@2x.jpg new file mode 100644 index 00000000000..8528bd73e32 Binary files /dev/null and b/src/images/taman@2x.jpg differ diff --git a/src/images/thirddiver@1x.jpg b/src/images/thirddiver@1x.jpg new file mode 100644 index 00000000000..5bf0809a23b Binary files /dev/null and b/src/images/thirddiver@1x.jpg differ diff --git a/src/images/thirddiver@2x.jpg b/src/images/thirddiver@2x.jpg new file mode 100644 index 00000000000..60f76eac4da Binary files /dev/null and b/src/images/thirddiver@2x.jpg differ diff --git a/src/images/tube@1x.jpg b/src/images/tube@1x.jpg new file mode 100644 index 00000000000..a527fbda520 Binary files /dev/null and b/src/images/tube@1x.jpg differ diff --git a/src/images/tube@2x.jpg b/src/images/tube@2x.jpg new file mode 100644 index 00000000000..72db3595827 Binary files /dev/null and b/src/images/tube@2x.jpg differ diff --git a/src/images/watchspot.gif b/src/images/watchspot.gif new file mode 100644 index 00000000000..e1c692b8b3d Binary files /dev/null and b/src/images/watchspot.gif differ diff --git a/src/index.html b/src/index.html index 92da07de4e6..291c5b3fe1d 100755 --- a/src/index.html +++ b/src/index.html @@ -1,15 +1,59 @@ + + + - Page title + + The Watch Spot + + + + + + + + + + + + + + + + + + + + + + + -

Example title

- - + + + + + + + + + + + + + + + + + + + diff --git a/src/modalsection.js b/src/modalsection.js new file mode 100644 index 00000000000..45ca0c69a1f --- /dev/null +++ b/src/modalsection.js @@ -0,0 +1,14 @@ +(() => { + const refs = { + openModalBtn: document.querySelector("[data-modal-open]"), + closeModalBtn: document.querySelector("[data-modal-close]"), + modal: document.querySelector("[data-modal]"), + }; + + refs.openModalBtn.addEventListener("click", toggleModal); + refs.closeModalBtn.addEventListener("click", toggleModal); + + function toggleModal() { + refs.modal.classList.toggle("is-hidden"); + } +})(); \ No newline at end of file diff --git a/src/partials/about.html b/src/partials/about.html new file mode 100644 index 00000000000..0cf172b0c0b --- /dev/null +++ b/src/partials/about.html @@ -0,0 +1,21 @@ +
+
+

About us

+ +

+ Welcome to our premium watch collection, where luxury and style meet + functionality and precision. Our selection of timepieces embodies the very + best in Swiss craftsmanship and engineering, ensuring that you'll always + have a reliable and stylish accessory on your wrist. +

+

+ At our premium watch collection, we believe that a watch is more than just + a timekeeping device – it's a statement piece that reflects your + personality and style. So why settle for anything less than the best? + Browse our collection today and discover the perfect watch for you. +

+
+
+ Watch Gif +
+
diff --git a/src/partials/catalog.html b/src/partials/catalog.html new file mode 100644 index 00000000000..afc83978614 --- /dev/null +++ b/src/partials/catalog.html @@ -0,0 +1,450 @@ + + +
+
+

+ Catalog +

+
    + +
  • + Tube watch +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    +

    + Tube Watch S42 Date Steel With Black Case +

    + + €395 + +
    • + + + +
  • +Avondale watch + +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Avondale Watch Police For Men +

    + + €800 + +
    • + + + +
  • +Diver watch +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Diver 300M Co‑Axial Master Chronometer Chronograph

    + + €600 + +
    • + + + +
  • +Diver watch +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Diver 300M Co-Axial Master Chronometer

    + + €1400 + +
    • + + + +
  • +Taman watch + +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Taman Watch By Police For Men +

    + + €500 + +
    • + + + +
  • +Malawi watch + +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Malawi Watch Police For Men

    + + €555 + +
    • + + + +
  • +Diver watch + +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Diver 300M Co-Axial Master Chronometer

    + + €1200 + +
    • + + + +
  • +Greenlane watch + +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Greenlane Watch By Police For Men

    + + €1000 + +
    • + + + +
  • +Squardrc watch + +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Squardrc 5402 Chrono +

    + + €359 + +
    • + + + +
  • +Diver watch + +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Diver 300M Co‑Axial Master Chronometer Chronograph +

    + + €400 + +
    • + + + +
  • +Citizen watch + +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Citizen +

    + + €519 + +
    • + + + +
  • +Armani watch + +
    +

    + Description +

    +

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

    +

    + DETAILS & FEATURESTION +

    +

    + Gender: man
    + Size: 46x54.5mm
    + Case Colour: Steel
    + Band Material: Metal
    + Case Material: Metal
    + Features: Multifunction
    + Water Resistant: 5 (ATM)
    + Band Colour: Steel
    +

    +
    + +

    +Armani Exchange +

    + + €400 + +
    • + + + +
+ + + + +
+ + + + +
\ No newline at end of file diff --git a/src/partials/footer-section.html b/src/partials/footer-section.html new file mode 100644 index 00000000000..934ffda33e0 --- /dev/null +++ b/src/partials/footer-section.html @@ -0,0 +1,97 @@ + \ No newline at end of file diff --git a/src/partials/sale.html b/src/partials/sale.html new file mode 100644 index 00000000000..542344ccb52 --- /dev/null +++ b/src/partials/sale.html @@ -0,0 +1,92 @@ +
+
+

Sale

+
+
+
+
    +
  • + watch-photo-front +
    • +
  • + watch-photo-front +
    • +
  • + watch-photo-back +
    • +
  • + watch-photo-display +
    • +
+
+
+ watch-photo-front +
+
+
+

Greenlane Watch By Police For MenHT

+

Product tag: PEWJK2227003

+

€700 €1000

+

DESCRIPTION

+

+ Richly detailed with an understated design - the Police Men’s + Greenlane watch features a versatile multifunction design that fits + effortlessly into work and play. The steel case is adorned with a + semi-transparent black dial. The timepiece exhibits a contrast through + a black IP bracelet with matching crown and pushers. +

+

DETAILS & FEATURESTION

+

+ Gender: man
+ Size: 46x54.5mm
+ Case Colour: Steel
+ Band Material: Metal
+ Case Material: Metal
+ Features: Multifunction
+ Water Resistant: 5 (ATM)
+ Band Colour: Steel +

+
+
+
+
diff --git a/src/sass/about.css b/src/sass/about.css new file mode 100644 index 00000000000..70937454144 --- /dev/null +++ b/src/sass/about.css @@ -0,0 +1,123 @@ +.about { + max-width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + padding-top: 80px; + font-family: 'Epilogue'; + color: #1e2827; +} + +.div__paragraph { + max-width: 100%; + display: flex; + flex-direction: row; + height: auto; +} + +.about__title { + font-size: 40px; + font-weight: 600; + line-height: 44%; + padding-left: 130px; +} +.paragraph1 { + padding-left: 110px; + padding-right: 40px; +} +.paragraph1, +.paragraph2 { + font-size: 14px; + font-weight: 300; + line-height: 18px; + letter-spacing: -2%; + text-align: normal; +} +.about-gif { + max-width: 100%; + display: flex; + justify-content: flex-end; +} +.watch__gif { + max-width: 100%; + height: auto; +} + +/*Mobile*/ +@media screen and (max-width: 768px) { + .about { + margin-left: 20px; + margin-right: 20px; + padding-top: 40px; + } + .div__paragraph { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 40px; + } + .about__title { + padding: 0; + } + .paragraph1 { + padding: 0; + } +} + +/*Tablet*/ +@media screen and (min-width: 768px) and (max-width: 1280px) { + .about { + display: flex; + flex: 1; + flex-direction: column; + } + .div__paragraph { + max-width: 100%; + display: flex; + flex: 1; + justify-content: space-around; + } + .paragraph1, + .paragraph2 { + max-width: 30%; + } + .paragraph1 { + padding-left: 40px; + } + .about__title { + padding-left: 32px; + } + .about-gif { + display: flex; + justify-content: center; + align-items: center; + } + .watch__gif { + max-width: 100%; + height: auto; + } +} + +/* Desktop*/ +@media screen and (min-width: 1280px) { + .paragraph { + display: flex; + flex: 1; + } + + .paragraph1, + .paragraph2 { + display: flex; + flex: 1; + } + + .about-gif { + position: relative; + left: 416px; + top: 40px; + } + .watch__gif { + width: 850px; + } +} diff --git a/src/sass/catalog.css b/src/sass/catalog.css new file mode 100644 index 00000000000..b3bc32bca2b --- /dev/null +++ b/src/sass/catalog.css @@ -0,0 +1,336 @@ +.catalog { + max-width: 100%; + + font-family: Epilogue; + margin:auto; + box-sizing: border-box; +} +.wrap { + max-width: 1400px; +} +.catalog-title { + display: flex; + font-weight: 600; + padding-left: 130px; + margin-bottom: 64px; + padding-top: 80px; + color: #1E2827; + font-size: 40px; + font-weight: 600; + line-height: 44px; + letter-spacing: -0.02em; + text-align: left; +} +.main-list { + display: flex; + flex-wrap: wrap; + gap: 24px; + justify-content: center; +} +.list-element { + list-style: none; + position: relative; + +} +.overlay-info { + position: absolute; + top: 0; + left: auto; + background-color: #1E2827; + border-radius: 8px; + min-height:auto; + padding: 20px; + transition: opacity 1s ease; + transition-duration: 1000ms; + opacity: 0; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +visibility: hidden; +width: 90%; +} + +.list-element:hover .overlay-info { + transition: opacity 1s ease; + visibility: visible; + opacity: 1; + +} + +.overlay-info h3 { + font-family: Epilogue; + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + color: #fff; +} + +.overlay-info p { + font-family: Epilogue; + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.01em; + text-align: left; + color: #FFFFFF80; +} +.watch-image { +display: block; +max-width: 100%; +height: auto; +margin-bottom: 14px; +} + +.info-name { + max-width: 276px; + font-weight: 400; + color: #141414; + font-family: Epilogue; + font-size: 14px; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + overflow-y: hidden; + max-height: 18px; +} + +.info-price { + font-size: 12px; + font-weight: 400; + line-height: 14px; + letter-spacing: -0.02em; + text-align: left; + color: #14141480; +} + +.buy-button { + color: #fff; + background-color: #1E2827; + border-radius: 8px; + font-size: 12px; + font-weight: 400; + line-height: 14px; + text-align: center; + padding: 18px 35px; + display: flex; + margin-left: auto; + margin-bottom: 80px; +} + +/* Modal section*/ + +.is-hidden { + opacity: 0; + visibility: hidden; + pointer-events: none; + z-index: 11; +} + +[data-modal] { + height: 100%; + width: 100%; + position: fixed; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 11; +} + +.is-hidden [data-modal-content] { + transform: translate(-50%, -50%) scale(0.5); +} + +[data-modal-content] { + + display: flex; + max-width: 904px; + max-height: 694px; + background-color: white; + position: absolute; + z-index: 11; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(1); + transition-duration: 1s; + padding: 20px; + border-radius: 4px; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2), + 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); +} + +[data-modal-close] { + position: absolute; + top: 10px; + right: 10px; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.1); + cursor: pointer; + text-align: center; + right: 8px; + top: 8px; + width: 30px; + height: 30px; + flex-shrink: 0; + border-radius: 50%; + color: #000000; + font-size: 18px; + transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +[data-modal-close]:hover, +[data-modal-close]:focus { + color: var(--blue); +} + +.modal-watch { +align-items: center;} + +.modal-form { + padding: 12px 0px; + display: flex; + flex-direction: column; + gap: 12px; + +} + +.modal-form__position { + display: flex; + flex-direction: column; + font-weight: 400; + font-size: 12px; + line-height: 14px; + letter-spacing: 0.01em; + color: rgba(117, 117, 117, 1); + position: relative; + max-width: 508px; + +} + + + +.modal-form__position input { + padding-left: 10px; + border-radius: 8px; +} + +.modal-form__position textarea { + border-radius: 8px; +} + +.modal-form__input { + outline: none; + margin-top: 4px; + height: 35px; + cursor: pointer; + border: 1px solid rgba(33, 33, 33, 0.2); + padding-left: 12px; +} + +.modal-form__comments { + outline: none; + margin-top: 4px; + border-radius: 4px; + height: 35px; + cursor: pointer; + border: 1px solid rgba(33, 33, 33, 0.2); + padding-left: 12px; + padding-top: 5px; + height: 120px; +} + +.modal-form__input:hover, +.modal-form__input:focus, +.modal-form__comments:hover, +.modal-form__comments:focus { + border-color: blue; +} + + + +.condition { + color: var(--blue); +} + +.modal-form__input[type='checkbox'] { + display: none; +} + + +.modal-form__input[type='checkbox']:checked+.replace-checkbox { + background-color: var(--blue); + border-color: var(--blue); +} + + +.modal-form__input[type='checkbox']:checked+.modal-checkbox__position svg { + display: block; +} + +.modal-form__btn { + width: auto; + height: 50px; + background-color: #1E2827; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); + outline: none; + border: none; + cursor: pointer; + color: white; + border-radius: 8px; + margin: 0 0; + margin-top: 25px; + font-family: Epilogue; + font-size: 12px; + font-weight: 400; + line-height: 14px; + text-align: center; + text-transform:uppercase ; +} + +.modal-form__btn:hover { +box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); +} + +.submit-info { + font-family: Epilogue; + font-size: 12px; + font-weight: 400; + line-height: 14px; + letter-spacing: -0.02em; + text-align: left; + color: #14141466; +} + +.policy { + text-decoration: underline; +} +/*Mobile first*/ +@media screen and (max-width: 768px) { + .list-element:nth-last-child(-n+4) { + display: none; + } + + [data-modal-content] { + display: flex; + flex-direction: column; + max-height: 1073px; +} + +} + +/* Tablet*/ +@media screen and (min-width: 768px) and (max-width: 1280px) +{ +.list-element:nth-last-child(-n+4) { + display: none; + } + [data-modal-content] { + min-width: 744px; + } +} + +/*Desktop*/ + +@media screen and (min-width: 1280px) { + .modal-form__btn { + min-width: 508px; + } +} \ No newline at end of file diff --git a/src/sass/sale.css b/src/sass/sale.css new file mode 100644 index 00000000000..d49adcb48e1 --- /dev/null +++ b/src/sass/sale.css @@ -0,0 +1,178 @@ +.sale { + font-family: 'Epilogue'; + letter-spacing: -0.02em; + text-align: left; + color: #141414; + display: flex; + max-width: 100%; + box-sizing: border-box; + margin-left: 115px; + margin-right: 115px; + margin-bottom: 50px; +} +.sale__section { + display: flex; + flex-direction: column; + max-width: 1400px; +} +.sale__title { + font-size: 40px; + font-weight: 600; + line-height: 44px; + margin-top: 0; + margin-left: 0; + padding-bottom: 80px; +} +.sale__part { + display: flex; + flex-direction: column; + gap: 40px; + padding-left: 97px; + padding-right: 98px; +} +.sale__image { + display: block; + max-width: 100%; + height: auto; +} + +.sale__images-part { + display: flex; + flex-direction: row; + gap: 20px; +} +.sale__images-list-1 { + display: flex; + flex-direction: column; + margin: 0; + gap: 10px; + padding-left: 0; +} + +.sale__images-list li { + list-style: none; + display: flex; +} +.sale__info { + flex: 1; +} +.sale__subtitle { + font-size: 38px; + font-weight: 400; + line-height: 40px; + margin-top: 0; + padding-bottom: 8px; +} +.sale__product-tag { + font-size: 14px; + font-weight: 400; + line-height: 18px; + color: #14141480; + margin: 0; + padding-bottom: 16px; +} +.sale__text { + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.01em; + color: #14141480; + margin: 0; + padding-bottom: 40px; +} +.sale__price { + font-size: 18px; + font-weight: 400; + line-height: 24px; + padding-bottom: 40px; + margin: 0; +} +.sale__price span { + font-size: 12px; + font-weight: 400; + line-height: 14px; + color: #14141480; + text-decoration: line-through; +} + +.sale__description { + font-size: 18px; + font-weight: 400; + line-height: 24px; + padding-top: 8px; + padding-bottom: 17px; + position: relative; + margin: 0; +} +.sale__description::after { + content: ''; + width: 16px; + height: 1px; + vertical-align: middle; + display: inline-block; + background-color: #141414; + position: absolute; + right: 0; + top: 20px; + margin-right: auto; +} +.sale__description::before { + content: ''; + width: 100%; + height: 1px; + display: inline-block; + position: absolute; + background-color: #141414; + bottom: 50px; +} + +@media screen and (min-width: 375px) and (max-width: 768px) { + .sale__section { + display: flex; + flex-direction: column; + max-width: 100%; + } + .sale { + margin-left: 20px; + margin-right: 20px; + } + .sale__part { + padding-left: 20px; + padding-right: 20px; + } + .sale__image-list-2 { + display: flex; + } +} + +@media screen and (min-width: 768px) and (max-width: 1280px) { + .sale__section { + display: flex; + max-width: 100%; + } + .sale { + margin-left: 32px; + margin-right: 32px; + } + .sale__part { + display: flex; + justify-content: center; + align-items: center; + } +} + +@media screen and (min-width: 1280px) { + .sale__section { + display: flex; + max-width: 100%; + } + .sale__part { + display: flex; + flex-direction: row; + } + /* .sale__images-list { + display: flex; + height: auto; + background-color: red; + } */ +}