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/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/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/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/index.html b/src/index.html index 92da07de4e6..37858b9a27f 100755 --- a/src/index.html +++ b/src/index.html @@ -5,11 +5,28 @@ Page title + + + + + + + + + + + -

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