diff --git a/.parcelrc b/.parcelrc index 057a249667f..d3681adc0cd 100755 --- a/.parcelrc +++ b/.parcelrc @@ -7,3 +7,4 @@ "parcel-reporter-clean-dist" ] } + diff --git a/assets/test b/assets/test new file mode 100644 index 00000000000..ac68855c388 --- /dev/null +++ b/assets/test @@ -0,0 +1,8 @@ +Victor Prisacariu Test +Topa Adrian Test +Molnar Aczel Zsuzsanna +Stefoi Iosif +Matis Daria +Cristina Macicasan +Manea Maria +Gheorghe Anca \ No newline at end of file diff --git a/assets/victor b/assets/victor new file mode 100644 index 00000000000..948d4653365 --- /dev/null +++ b/assets/victor @@ -0,0 +1 @@ +Victor a testat ceva. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e6c0aff679c..53c34d50f96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "2.0.0", "license": "ISC", "dependencies": { + "body-scroll-lock": "^4.0.0-beta.0", "modern-normalize": "^1.1.0" }, "devDependencies": { @@ -1658,6 +1659,11 @@ "node": ">=8" } }, + "node_modules/body-scroll-lock": { + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz", + "integrity": "sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==" + }, "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -1721,9 +1727,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001346", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001346.tgz", - "integrity": "sha512-q6ibZUO2t88QCIPayP/euuDREq+aMAxFE5S70PkrLh0iTDj/zEhgvJRKC2+CvXY6EWc6oQwUR48lL5vCW6jiXQ==", + "version": "1.0.30001559", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz", + "integrity": "sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==", "dev": true, "funding": [ { @@ -1733,6 +1739,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ] }, @@ -2286,9 +2296,9 @@ "dev": true }, "node_modules/json5": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", - "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "dev": true, "bin": { "json5": "lib/cli.js" @@ -2906,9 +2916,9 @@ } }, "node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true, "bin": { "semver": "bin/semver" @@ -4121,6 +4131,11 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "dev": true }, + "body-scroll-lock": { + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz", + "integrity": "sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==" + }, "boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -4162,9 +4177,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001346", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001346.tgz", - "integrity": "sha512-q6ibZUO2t88QCIPayP/euuDREq+aMAxFE5S70PkrLh0iTDj/zEhgvJRKC2+CvXY6EWc6oQwUR48lL5vCW6jiXQ==", + "version": "1.0.30001559", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz", + "integrity": "sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==", "dev": true }, "chalk": { @@ -4541,9 +4556,9 @@ "dev": true }, "json5": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", - "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "dev": true }, "lines-and-columns": { @@ -4969,9 +4984,9 @@ } }, "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true }, "source-map": { diff --git a/package.json b/package.json index efbc9f63d06..4f53a975229 100755 --- a/package.json +++ b/package.json @@ -2,10 +2,10 @@ "name": "parcel-project-template", "version": "2.0.0", "description": "", - "homepage": "https://goitacademy.github.io/parcel-project-template", + "homepage": "https://exigibil.github.io/parcel-project-team8/", "scripts": { "start": "parcel src/*.html", - "build": "parcel build src/*.html --public-url /parcel-project-template/" + "build": "parcel build src/*.html --public-url /parcel-project-team8/" }, "repository": { "type": "git", @@ -18,6 +18,7 @@ "url": "https://github.com/goitacademy/parcel-project-template/issues" }, "dependencies": { + "body-scroll-lock": "^4.0.0-beta.0", "modern-normalize": "^1.1.0" }, "devDependencies": { diff --git a/src/carousel.js b/src/carousel.js new file mode 100644 index 00000000000..d0601381795 --- /dev/null +++ b/src/carousel.js @@ -0,0 +1,64 @@ +$(function () { + new Slider({ + images: '.slider-1 img', + btnPrev: '.slider-1 .buttons .prev', + btnNext: '.slider-1 .buttons .next', + auto: false, + }); + + new Slider({ + images: '.slider-2 img', + btnPrev: '.slider-2 .buttons .prev', + btnNext: '.slider-2 .buttons .next', + auto: true, + rate: 2000, + }); +}); + +function Slider(obj) { + this.images = $(obj.images); + this.auto = obj.auto; + this.btnPrev = obj.btnPrev; + this.btnNext = obj.btnNext; + this.rate = obj.rate || 1000; + + var i = 0; + var slider = this; + + // The "Previous" button: to remove the class .shown, to show the previous image and to add the .shown class + this.prev = function () { + slider.images.eq(i).removeClass('shown'); + i--; + + if (i < 0) { + i = slider.images.length - 1; + } + + slider.images.eq(i).addClass('shown'); + }; + + // The "Next" button: to remove the class .shown, to show the next image and to add the .shown class + this.next = function () { + slider.images.eq(i).removeClass('shown'); + i++; + + if (i >= slider.images.length) { + i = 0; + } + + slider.images.eq(i).addClass('shown'); + }; + + // To add next and prev functions when clicking on the corresponding buttons + $(slider.btnPrev).on('click', function () { + slider.prev(); + }); + $(slider.btnNext).on('click', function () { + slider.next(); + }); + + // For the automatic slider: this method calls the next function at the set rate + if (slider.auto) { + setInterval(slider.next, slider.rate); + } +} diff --git a/src/icons.svg b/src/icons.svg new file mode 100644 index 00000000000..c186fdbc6bd --- /dev/null +++ b/src/icons.svg @@ -0,0 +1,45 @@ + \ No newline at end of file diff --git a/src/images/Rectangle 8.png b/src/images/Rectangle 8.png new file mode 100644 index 00000000000..5a925d7a7f5 Binary files /dev/null and b/src/images/Rectangle 8.png differ diff --git a/src/images/Rectangle 9.png b/src/images/Rectangle 9.png new file mode 100644 index 00000000000..79669cee344 Binary files /dev/null and b/src/images/Rectangle 9.png differ diff --git a/src/images/arm-watches_d.png b/src/images/arm-watches_d.png new file mode 100644 index 00000000000..385f3b011e8 Binary files /dev/null and b/src/images/arm-watches_d.png differ diff --git a/src/images/arm-watches_m.png b/src/images/arm-watches_m.png new file mode 100644 index 00000000000..b0ab41020f7 Binary files /dev/null and b/src/images/arm-watches_m.png differ diff --git a/src/images/arm-watches_t.png b/src/images/arm-watches_t.png new file mode 100644 index 00000000000..01f94521c3e Binary files /dev/null and b/src/images/arm-watches_t.png differ diff --git a/src/images/armani-exchange-watch.jpg b/src/images/armani-exchange-watch.jpg new file mode 100644 index 00000000000..954a6065a00 Binary files /dev/null and b/src/images/armani-exchange-watch.jpg differ diff --git a/src/images/avondale-watch.jpg b/src/images/avondale-watch.jpg new file mode 100644 index 00000000000..f2658f33d78 Binary files /dev/null and b/src/images/avondale-watch.jpg differ diff --git a/src/images/big-plan.png b/src/images/big-plan.png new file mode 100644 index 00000000000..6e265f15030 Binary files /dev/null and b/src/images/big-plan.png differ diff --git a/src/images/catalog-2.png b/src/images/catalog-2.png new file mode 100644 index 00000000000..abd5842b72d Binary files /dev/null and b/src/images/catalog-2.png differ diff --git a/src/images/catalog-3.png b/src/images/catalog-3.png new file mode 100644 index 00000000000..69f1253e760 Binary files /dev/null and b/src/images/catalog-3.png differ diff --git a/src/images/catalog-4.png b/src/images/catalog-4.png new file mode 100644 index 00000000000..42821cef875 Binary files /dev/null and b/src/images/catalog-4.png differ diff --git a/src/images/catalog-5.png b/src/images/catalog-5.png new file mode 100644 index 00000000000..9d7c1023268 Binary files /dev/null and b/src/images/catalog-5.png differ diff --git a/src/images/catalog-6.png b/src/images/catalog-6.png new file mode 100644 index 00000000000..2a5648f173d Binary files /dev/null and b/src/images/catalog-6.png differ diff --git a/src/images/catalog-7.png b/src/images/catalog-7.png new file mode 100644 index 00000000000..c488657095f Binary files /dev/null and b/src/images/catalog-7.png differ diff --git a/src/images/catalog-8.png b/src/images/catalog-8.png new file mode 100644 index 00000000000..ca8abd3a7ea Binary files /dev/null and b/src/images/catalog-8.png differ diff --git a/src/images/catalog-9.png b/src/images/catalog-9.png new file mode 100644 index 00000000000..a8a37e48f15 Binary files /dev/null and b/src/images/catalog-9.png differ diff --git a/src/images/citizen-watch.jpg b/src/images/citizen-watch.jpg new file mode 100644 index 00000000000..a9c9b492477 Binary files /dev/null and b/src/images/citizen-watch.jpg differ diff --git a/src/images/diver-300m-co-axial.jpg b/src/images/diver-300m-co-axial.jpg new file mode 100644 index 00000000000..02e6c6f0603 Binary files /dev/null and b/src/images/diver-300m-co-axial.jpg differ diff --git a/src/images/diver-300m-master.jpg b/src/images/diver-300m-master.jpg new file mode 100644 index 00000000000..04526f49e80 Binary files /dev/null and b/src/images/diver-300m-master.jpg differ diff --git a/src/images/diver-300m.jpg b/src/images/diver-300m.jpg new file mode 100644 index 00000000000..f5967557811 Binary files /dev/null and b/src/images/diver-300m.jpg differ diff --git a/src/images/diver-master-watch.jpg b/src/images/diver-master-watch.jpg new file mode 100644 index 00000000000..7ea4e0353c1 Binary files /dev/null and b/src/images/diver-master-watch.jpg differ diff --git a/src/images/editorconfig.png b/src/images/editorconfig.png new file mode 100644 index 00000000000..78e0a9c865f Binary files /dev/null and b/src/images/editorconfig.png differ diff --git a/src/images/green-watch.png b/src/images/green-watch.png new file mode 100644 index 00000000000..bc1a9a68dbb Binary files /dev/null and b/src/images/green-watch.png differ diff --git a/src/images/greenlane-watch.jpg b/src/images/greenlane-watch.jpg new file mode 100644 index 00000000000..995930183f8 Binary files /dev/null and b/src/images/greenlane-watch.jpg differ diff --git a/src/images/hand-green-desktop-2x.jpg b/src/images/hand-green-desktop-2x.jpg new file mode 100644 index 00000000000..a577dcaccbb Binary files /dev/null and b/src/images/hand-green-desktop-2x.jpg differ diff --git a/src/images/hand-green-desktop.jpg b/src/images/hand-green-desktop.jpg new file mode 100644 index 00000000000..84464f7931d Binary files /dev/null and b/src/images/hand-green-desktop.jpg differ diff --git a/src/images/hand-green-mobile-2x.jpg b/src/images/hand-green-mobile-2x.jpg new file mode 100644 index 00000000000..538fb60c7db Binary files /dev/null and b/src/images/hand-green-mobile-2x.jpg differ diff --git a/src/images/hand-green-mobile.jpg b/src/images/hand-green-mobile.jpg new file mode 100644 index 00000000000..f5c7effa688 Binary files /dev/null and b/src/images/hand-green-mobile.jpg differ diff --git a/src/images/hand-green-table-2x.jpg b/src/images/hand-green-table-2x.jpg new file mode 100644 index 00000000000..3c93b6f67ea Binary files /dev/null and b/src/images/hand-green-table-2x.jpg differ diff --git a/src/images/hand-green-tableta.jpg b/src/images/hand-green-tableta.jpg new file mode 100644 index 00000000000..88069092869 Binary files /dev/null and b/src/images/hand-green-tableta.jpg differ diff --git a/src/images/image 64.jpg b/src/images/image 64.jpg new file mode 100644 index 00000000000..07ef7be445e Binary files /dev/null and b/src/images/image 64.jpg differ diff --git a/src/images/image 65.jpg b/src/images/image 65.jpg new file mode 100644 index 00000000000..2dd353a288c Binary files /dev/null and b/src/images/image 65.jpg differ diff --git a/src/images/image 65.svg b/src/images/image 65.svg new file mode 100644 index 00000000000..aab6a69f3ed --- /dev/null +++ b/src/images/image 65.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/image 66.jpg b/src/images/image 66.jpg new file mode 100644 index 00000000000..f030a005d03 Binary files /dev/null and b/src/images/image 66.jpg differ diff --git a/src/images/image 66.svg b/src/images/image 66.svg new file mode 100644 index 00000000000..ad98ab968b5 --- /dev/null +++ b/src/images/image 66.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/image 67-big.jpg b/src/images/image 67-big.jpg new file mode 100644 index 00000000000..4c6129add58 Binary files /dev/null and b/src/images/image 67-big.jpg differ diff --git a/src/images/image 67.jpg b/src/images/image 67.jpg new file mode 100644 index 00000000000..d9ddc6dc6d1 Binary files /dev/null and b/src/images/image 67.jpg differ diff --git a/src/images/image 67.svg b/src/images/image 67.svg new file mode 100644 index 00000000000..17e1182db33 --- /dev/null +++ b/src/images/image 67.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/malawi-watch.jpg b/src/images/malawi-watch.jpg new file mode 100644 index 00000000000..80c1533833a Binary files /dev/null and b/src/images/malawi-watch.jpg differ diff --git a/src/images/man-s-hand.png b/src/images/man-s-hand.png new file mode 100644 index 00000000000..9b3c6a4c103 Binary files /dev/null and b/src/images/man-s-hand.png differ diff --git a/src/images/minus.png b/src/images/minus.png new file mode 100644 index 00000000000..5080a3c2b6e Binary files /dev/null and b/src/images/minus.png differ diff --git a/src/images/modalwatch.png b/src/images/modalwatch.png new file mode 100644 index 00000000000..e8d123c5054 Binary files /dev/null and b/src/images/modalwatch.png differ diff --git a/src/images/nou-catalog.png b/src/images/nou-catalog.png new file mode 100644 index 00000000000..eafd1336266 Binary files /dev/null and b/src/images/nou-catalog.png differ diff --git a/src/images/omaega-watch.png b/src/images/omaega-watch.png new file mode 100644 index 00000000000..3e42633ce36 Binary files /dev/null and b/src/images/omaega-watch.png differ diff --git a/src/images/omega-black-watch.png b/src/images/omega-black-watch.png new file mode 100644 index 00000000000..13ee3325181 Binary files /dev/null and b/src/images/omega-black-watch.png differ diff --git a/src/images/omega-blau-watch.png b/src/images/omega-blau-watch.png new file mode 100644 index 00000000000..c0a13f3446a Binary files /dev/null and b/src/images/omega-blau-watch.png differ diff --git a/src/images/representation-1.png b/src/images/representation-1.png new file mode 100644 index 00000000000..1269e649c1d Binary files /dev/null and b/src/images/representation-1.png differ diff --git a/src/images/representation-1.svg b/src/images/representation-1.svg new file mode 100644 index 00000000000..70407e87268 --- /dev/null +++ b/src/images/representation-1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/representation-2.png b/src/images/representation-2.png new file mode 100644 index 00000000000..d336b7ffb88 Binary files /dev/null and b/src/images/representation-2.png differ diff --git a/src/images/representation-3.png b/src/images/representation-3.png new file mode 100644 index 00000000000..3e547c521f0 Binary files /dev/null and b/src/images/representation-3.png differ diff --git a/src/images/representation-4.png b/src/images/representation-4.png new file mode 100644 index 00000000000..9318316c0dc Binary files /dev/null and b/src/images/representation-4.png differ diff --git a/src/images/squardrc-watch.jpg b/src/images/squardrc-watch.jpg new file mode 100644 index 00000000000..b7eebd4843e Binary files /dev/null and b/src/images/squardrc-watch.jpg differ diff --git a/src/images/taman-watch.jpg b/src/images/taman-watch.jpg new file mode 100644 index 00000000000..780f2676014 Binary files /dev/null and b/src/images/taman-watch.jpg differ diff --git a/src/images/team8svg.svg b/src/images/team8svg.svg new file mode 100644 index 00000000000..bec6ee76470 --- /dev/null +++ b/src/images/team8svg.svg @@ -0,0 +1,34 @@ + \ No newline at end of file diff --git a/src/images/timex-watch.png b/src/images/timex-watch.png new file mode 100644 index 00000000000..7cb8901dd29 Binary files /dev/null and b/src/images/timex-watch.png differ diff --git a/src/images/tube-watch.jpg b/src/images/tube-watch.jpg new file mode 100644 index 00000000000..8bd084ab740 Binary files /dev/null and b/src/images/tube-watch.jpg differ diff --git a/src/images/watch--green-mobile-2x.jpg b/src/images/watch--green-mobile-2x.jpg new file mode 100644 index 00000000000..05823600256 Binary files /dev/null and b/src/images/watch--green-mobile-2x.jpg differ diff --git a/src/images/watch-green-desktop-2x.jpg b/src/images/watch-green-desktop-2x.jpg new file mode 100644 index 00000000000..777930451b0 Binary files /dev/null and b/src/images/watch-green-desktop-2x.jpg differ diff --git a/src/images/watch-green-desktop.jpg b/src/images/watch-green-desktop.jpg new file mode 100644 index 00000000000..377fe1c79aa Binary files /dev/null and b/src/images/watch-green-desktop.jpg differ diff --git a/src/images/watch-green-mobile.jpg b/src/images/watch-green-mobile.jpg new file mode 100644 index 00000000000..2e33345f869 Binary files /dev/null and b/src/images/watch-green-mobile.jpg differ diff --git a/src/images/watch-green-tablet-2x.jpg b/src/images/watch-green-tablet-2x.jpg new file mode 100644 index 00000000000..63f88c912c9 Binary files /dev/null and b/src/images/watch-green-tablet-2x.jpg differ diff --git a/src/images/watch-green-tableta.jpg b/src/images/watch-green-tableta.jpg new file mode 100644 index 00000000000..574d62e356b Binary files /dev/null and b/src/images/watch-green-tableta.jpg differ diff --git a/src/images/watch.gif b/src/images/watch.gif new file mode 100644 index 00000000000..e1c692b8b3d Binary files /dev/null and b/src/images/watch.gif differ diff --git a/src/images/withe-img.png b/src/images/withe-img.png new file mode 100644 index 00000000000..7cb8901dd29 Binary files /dev/null and b/src/images/withe-img.png differ diff --git a/src/index.html b/src/index.html old mode 100755 new mode 100644 index 83f66efe6da..47018ae3480 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,54 @@ - + - Page title + The Watch Spot + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + diff --git a/src/index.js b/src/index.js index e69de29bb2d..5de265d222b 100755 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,21 @@ + +let currentSlide = 0; +const slides = document.querySelectorAll(".image"); +const imageCountElement = document.getElementById("imageCount"); + +function showSlide(index) { + slides[currentSlide].style.transform = "translateX(-100%)"; + currentSlide = (index + slides.length) % slides.length; + slides[currentSlide].style.transform = "translateX(0)"; + updateIndicator(); +} + +function updateIndicator() { + imageCountElement.textContent = `Imagine ${currentSlide + 1} din ${slides.length}`; +} + +function plusSlides(n) { + showSlide(currentSlide + n); +} + +updateIndicator(); \ No newline at end of file diff --git a/src/mobile-menu.js b/src/mobile-menu.js new file mode 100644 index 00000000000..b9b4d6d4a64 --- /dev/null +++ b/src/mobile-menu.js @@ -0,0 +1,29 @@ +(() => { + const mobileMenu = document.querySelector(".js-menu-container"); + const openMenuBtn = document.querySelector(".js-open-menu"); + const closeMenuBtn = document.querySelector(".js-close-menu"); + + const toggleMenu = () => { + const isMenuOpen = + openMenuBtn.getAttribute("aria-expanded") === "true" || false; + openMenuBtn.setAttribute("aria-expanded", !isMenuOpen); + mobileMenu.classList.toggle("is-open"); + + const scrollLockMethod = !isMenuOpen + ? "disableBodyScroll" + : "enableBodyScroll"; + bodyScrollLock[scrollLockMethod](document.body); + }; + + + openMenuBtn.addEventListener("click", toggleMenu); + closeMenuBtn.addEventListener("click", toggleMenu); + + // Close the mobile menu on wider screens if the device orientation changes + window.matchMedia("(min-width: 768px)").addEventListener("change", (e) => { + if (!e.matches) return; + mobileMenu.classList.remove("is-open"); + openMenuBtn.setAttribute("aria-expanded", false); + bodyScrollLock.enableBodyScroll(document.body); + }); +})(); \ No newline at end of file diff --git a/src/modal.js b/src/modal.js new file mode 100644 index 00000000000..61915ac20bf --- /dev/null +++ b/src/modal.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/newcarrousel.js b/src/newcarrousel.js new file mode 100644 index 00000000000..1fa6e2b737a --- /dev/null +++ b/src/newcarrousel.js @@ -0,0 +1,51 @@ +const slides = document.querySelectorAll(".slide"); +let totalSlides = slides.length; +let counter = 0; +const slideNumberElement = document.querySelector('.slide-number'); + +slides.forEach((slide, index) => { + slide.style.left = `${index * 100}%`; +}); + +const goPrev = () => { + if (counter === 0) { + counter = totalSlides - 1; // Go to the last photo + } else { + counter--; + } + slideImage(); + updateSlideNumber(); +}; + +const goNext = () => { + if (counter === totalSlides - 1) { + counter = 0; // Go to the first photo + } else { + counter++; + } + slideImage(); + updateSlideNumber(); +}; + +const slideImage = () => { + slides.forEach((slide) => { + slide.style.transform = `translateX(-${counter * 100}%)`; + }); +}; + +const updateSlideNumber = () => { + let counterDisplay = counter + 1; + let totalSlidesDisplay = totalSlides; + + if (totalSlides < 10) { + totalSlidesDisplay = "0" + totalSlides; + } + + if (counterDisplay < 10) { + counterDisplay = "0" + counterDisplay; + } + + slideNumberElement.textContent = `${counterDisplay} - ${totalSlidesDisplay}`; +}; + +updateSlideNumber(); // Update slide number initially diff --git a/src/partials/about-us.html b/src/partials/about-us.html new file mode 100644 index 00000000000..946777371d8 --- /dev/null +++ b/src/partials/about-us.html @@ -0,0 +1,29 @@ + +
+
+
+

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 +
+
diff --git a/src/partials/catalog-section-2.html b/src/partials/catalog-section-2.html new file mode 100644 index 00000000000..ab75f6eab14 --- /dev/null +++ b/src/partials/catalog-section-2.html @@ -0,0 +1,654 @@ +
+
+

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

    +
    + + +
    +
    • +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Avondale Watch Police For Men

    +

    €800

    +
    + + +
    +
    • +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Diver 300M Co‑Axial Master Chronometer Chronograph

    +

    €600

    +
    + + +
    + +
    • + + + +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Diver 300M Co‑Axial Master Chronometer Chronograph

    +

    €1400

    +
    + + +
    + +
    • + +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Diver 300M Co‑Axial Master Chronometer Chronograph

    +

    €1400

    +
    + + +
    + + +
    • + +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Diver 300M Co‑Axial Master Chronometer Chronograph

    +

    €1400

    +
    + + +
    + + +
    • + +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Diver 300M Co‑Axial Master Chronometer Chronograph

    +

    €1400

    +
    + + +
    + + +
    • + +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Diver 300M Co‑Axial Master Chronometer Chronograph

    +

    €1400

    +
    + + +
    + + +
    • + +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Taman Watch By Police For Men

    +

    €500

    +
    + + +
    + + +
    • + +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Malawi Watch Police For Men

    +

    €555

    +
    + + +
    + +
    • + +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Diver 300M Co-Axial Master Chronometer

    +

    €1200

    +
    + + +
    + +
    • + +
  • +
    +
    +
    + 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

    + + +
    + +
    + +
    + +
    +
    +

    Greenlane Watch By Police For Men

    +

    €1000

    +
    + + +
    + +
    • +
+
+ +
+ +
+
+
+ + + +
diff --git a/src/partials/example.html b/src/partials/example.html index f7f444c97e2..54234130bc3 100755 --- a/src/partials/example.html +++ b/src/partials/example.html @@ -1,4 +1,4 @@ -
+

HTML-partials

+ + +
+
+ + +
+
+ +
+
+
+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/src/partials/welcom.html b/src/partials/welcom.html new file mode 100644 index 00000000000..72c2b581aee --- /dev/null +++ b/src/partials/welcom.html @@ -0,0 +1,54 @@ +
+
+

Welcome to our collection of premium watches

+ + + + +
+
+ clasic-hand-watch + + clasic-hand-watch + + clasic-hand-watch + + clasic-hand-watch + + clasic-hand-watch + +
+ + +
+
+ + + + + + +
+
1 - 5
+
+ +
+ + + +

+ Our watches are not just timepieces, but also an expression of your + personality and lifestyle. From classic designs to modern ones, we have a + watch to suit every taste and occasion. +

+ + + + + + clasic-hand-watch watch + +
+
+ + \ No newline at end of file diff --git a/src/sass/_about-us.scss b/src/sass/_about-us.scss new file mode 100644 index 00000000000..b691bbd6bf3 --- /dev/null +++ b/src/sass/_about-us.scss @@ -0,0 +1,90 @@ +.about-us { + max-width: 375px; + width: 100%; + display: flex; + flex-direction: column; + margin: 0 auto; + padding: 40px 20px; + .title { + padding-bottom: 40px; + margin: 0 auto; + color: #1e2827; + font-family: 'Epilogue', sans-serif; + font-size: 32px; + font-style: normal; + white-space: nowrap; + font-weight: 600; + line-height: 40px; + letter-spacing: -0.64px; + } +} +.text-section { + color: #141414; + letter-spacing: -0.28px; + flex-direction: column; + gap: 20px; + margin: 0 auto; + padding: 0; + font-family: Epilogue, sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 300; + line-height: 125%; + display: flex; +} +.about-us-gif { + object-fit: cover; + width: 100%; + height: 365px; + padding: 40px 0px 0px 0px; +} +@media screen and (min-width: 768px) { + .about-us { + max-width: 768px; + padding: 64px 20px 128px 20px; + display: flex; + flex-direction: column; + align-items: center; + } + .content-section { + flex-direction: row; + justify-content: center; + margin: 0; + display: flex; + .title { + margin-right: 60px; + font-size: 40px; + } + .text-section { + display: flex; + flex-direction: row; + margin: 0 auto; + } + } + .about-us-gif { + height: 465px; + margin: 0 auto; + } +} +@media screen and (min-width: 1158px) { + .about-us { + width: 100%; + max-width: 1158px; + padding: 80px 20px; + margin: 0 auto; + .title { + margin-right: 110px; + } + .gif-container { + width: 1200px; + padding-right: 40px; + display: block; + .about-us-gif { + float: right; + width: 839px; + margin: 0 auto; + margin-left: auto; + } + } + } +} diff --git a/src/sass/_footer.scss b/src/sass/_footer.scss new file mode 100644 index 00000000000..4ec2696a260 --- /dev/null +++ b/src/sass/_footer.scss @@ -0,0 +1,201 @@ +:root { + --footer-text-color: #fff; + --font-family: 'Epilogue', sans-serif; + --footer-header-background-color: #1e2827; + --trasform: 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +/*--syles canceling--*/ +h1, +h2, +h3, +h4, +h5, +p { + margin: 0; +} + +ul { + list-style: none; + padding: 0; + margin: 0; +} + +a { + text-decoration: none; +} +/*--MOBILE--*/ +.footer-container { + background-color: var(--footer-header-background-color); + font-family: var(--font-family); + list-style-type: none; + color: var(--footer-text-color); +} +.footer-section { + padding: 40px 20px 20px 20px; + width: 100%; +} +.first-row { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; +} +.footer-logo { + width: fit-content; + display: flex; + flex-direction: column; +} +.footer-logo-svg { + width: 40px; + height: 40px; +} + +.tel-class-footer { + padding-top: 40px; +} +.f-section-link { + font-size: 14px; + font-weight: 400; + line-height: 18px; + text-align: left; + display: flex; + flex-direction: row; + width: max-content; + justify-content: end; + align-content: center; + + li { + padding-bottom: 14px; + } + a { + text-decoration: none; + text-transform: uppercase; + color: var(--footer-text-color); + } + + a:hover{ + color: rgb(194, 204, 223) + } +} + + +.address-footer { + display: block; + padding-top: 20px; +} +.social-links-footer { + padding-top: 40px; + padding-bottom: 40px; +} + + +.social-ellipse { + display: inline-block; + flex-direction: row; + align-items: center; + justify-content: center; + fill: var(--footer-header-background-color); + border-radius: 10%; + padding-right: 14px; + +} +.social-icon { + text-decoration: none; + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #5e6265; + background-color: var(--footer-header-background-color); + border-radius: 20%; + fill: var(--footer-text-color); + +} +.icon { + display: block; + flex-direction: row; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + padding: 8px; + +} + +.social-icon:hover { + background-color: #283533;; +} + +.footer-policy-terms { + display: flex; + flex-direction: row; + gap: 14px; + padding-top: 14px; +} + +.footer-policy-terms:hover { + color: #fff; + cursor: pointer; + +} +.last-row a { + color: #c6cdd1; +} + +.last-row ul { + color: #c6cdd1; +} + +.last-row p:hover { + cursor: pointer; + color: var(--footer-text-color); +} +/*--TABLET--*/ +@media screen and (min-width: 768px) { + .footer-container { + height: 476px; + } + .footer-section { + padding: 80px 32px 20px 32px; + } + .first-row-tablet { + display: flex; + flex-direction: row; + justify-content: space-between; + } + .first-row { + display: flex; + justify-content: space-evenly; + gap: 142px; + } + .social-links-footer { + padding-top: 0; + } + .footer-policy-terms { + padding: 0; + } + .last-row { + display: flex; + align-content: flex-end; + justify-content: space-between; + padding-top: 152px; + } + .social-ellipse { + padding-right: 16px; + } +} + +/*--DESCKTOP--*/ +@media screen and (min-width: 1158px) { + .footer-section { + padding: 104px 140px 32px 132px; + width: 100%; + } + .first-row { + width: 55%; + align-items: flex-start; + justify-content: space-between; + } +} diff --git a/src/sass/_green-sale.scss b/src/sass/_green-sale.scss new file mode 100644 index 00000000000..801af1e28b4 --- /dev/null +++ b/src/sass/_green-sale.scss @@ -0,0 +1,416 @@ +:root { + --font-family: 'Epilogue', sans-serif; +} + +ul { + list-style: none; + padding: 0; + margin: 0; +} + +a { + text-decoration: none; +} + +.container-section { + width: 100%; + max-width: 375px; + background: white; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0 auto; + padding-top: 80px; + padding-left: 20px; + padding-right: 20px; + display: flex; +} + +.green-bronze { + padding-bottom: 80px; + display: flex; + flex-direction: column; +} + +.section-header { + padding-bottom: 8px; + letter-spacing: 0.72px; + margin: 0; + padding-bottom: 8px; + font-family: Epilogue; + font-size: 12px; + font-style: normal; + font-weight: 300; + line-height: 14px; + color: #14141480; +} + +.main-title-green { + width: 335px; + margin: 0; + padding-bottom: 40px; + color: #141414; + font-size: 32px; + font-family: Epilogue; + font-weight: 600; + line-height: 40px; + word-wrap: break-word; +} + +.watch-shooting-1 { + flex-direction: column; + gap: 20px; + margin: 0; + margin-block: 0; + margin-inline: 0; + padding-inline-start: 0; + display: flex; +} + +.watch-shooting-1 img { + width: 335px; + height: 260px; +} + +.presentation-picture { + flex-direction: column; + gap: 20px; + margin: 0; + margin-block: 0; + margin-inline: 0; + padding-inline-start: 0; + display: flex; +} + +.new-watches .sliding { + width: 335px; + height: 260px; +} + +.new-watches .sliding { + animation: slideInAnimation 2s ease-in-out; +} + +.presentation-picture img { + padding: 0; +} + +.presentation-picture img { + transition: transform 0.3s ease; +} + +.presentation-picture img:hover { + transform: scale(1.1); +} + +.sales_images_list { + width: 30%; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + +.sale_image_big { + padding: 0; + width: 60%; +} + + .sale-title { + padding-bottom: 40px; + font-weight: 600; + font-size: 32px; + line-height: 40px; + color:#141414; + padding-top: 80px; + } + +.sale-gallery{ + gap: 20px; + display: flex; +} + +.all-gallery{ + gap: 20px; + display: flex; +} + +.small-gallery{ + width: 100%; + flex-direction: column; + gap: 10px; + display: flex; +} + +.small-gallery img{ + width: 80px; + height: 80px; +} + +.small-gallery img:hover { + transform: scale(1.1); +} + +.small-gallery img { + transition: 3s; + transition: transform .3s; +} + + +.big-photo img{ + width: 235px; + height: 350px; +} + +.big-photo img:hover { + transform: scale(1.1); +} + +.big-photo img { + transition: 3s; + transition: transform .3s; +} + +.container-sale-title h3{ + font-family: Epilogue; + font-size: 24px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.02em; + text-align: left; + color: #141414; + padding-top: 40px; + margin: 0; + +} + +.container-sale-title p{ + margin: 0; + padding-top: 8px; + font-size: 14px; + font-weight: 400; + line-height: 20px; + color: #14141480; +} + +.price-detailes-sale{ + gap: 8px; + display: flex; +} + +.after-discount{ + text-transform: uppercase; + color: #141414; + margin: 0; + padding-top: 16px; + font-size: 18px; + font-weight: 400; + line-height: 24px; +} + +.befor-discount{ + color: #14141480; + margin: 0; + padding-top: 22.5px; + padding-bottom: 40px; + font-size: 14px; + font-weight: 400; + text-decoration-line: line-through; +} + +.line-descriptions{ + height: 0; + color: inherit; +} + +.sale-descriptions-watch h4{ + text-transform: uppercase; + color: #141414; + margin: 0 auto; + padding-bottom: 18px; + font-size: 18px; + font-weight: 400; + line-height: 24px; +} + +.sale-descriptions-watch p{ + color: #14141480; + margin: 0; + padding: 0 0 40px; + font-size: 14px; + font-weight: 400; + line-height: 18px; +} + +.another-sale-details{ + padding-bottom: 80px; +} + +.another-sale-details h4{ + text-transform: uppercase; + color:#141414; + margin: 0; + padding-bottom: 18px; + font-size: 18px; + font-weight: 400; + line-height: 24px; +} + +.another-sale-details p{ + color: #14141480; + margin: 0; + padding: 0; + font-size: 14px; + font-weight: 400; + line-height: 18px; +} + +.all-sales-container { + width: 100%; + max-width: 375px; + padding-right: 20px; +} + +@media only screen and (min-width: 768px) { + .container-section { + max-width: 768px; + width: 100%; + flex-direction: column; + padding-top: 80px; + + .main-title-green { + width: 448px; + padding-bottom: 60px; + font-size: 40px; + font-family: Epilogue; + } + + .presentation-picture { + flex-direction: row-reverse; + justify-content: space-between; + gap: 20px; + } + } + + .presentation-picture img { + width: 354px; + height: 269px; + } + + .all-sales-container { + width: 100%; + max-width: 768px; + } + + .sale-title { + color:#1E2827; + font-size: 40px; + padding-top: 128px; + } + + .sale-gallery{ + justify-content: center; + margin: 0 auto; + } + + .small-gallery img{ + width: 146px; + height: 146px; + } + + .small-gallery img:hover { + transform: scale(1.1); + } + + .small-gallery img { + transition: 3s; + transition: transform .3s; + } + + .big-photo img{ + width: 406px; + height: 614px; + } + + .detailes-container{ + padding-left: 65px; + padding-right: 65px; + } + + .container-sale-title h3{ + font-size: 38px; + font-weight: 400; + line-height: 40px; + letter-spacing: -0.02em; + text-align: left; + padding-top: 40px; + } + + + +} + +@media only screen and (min-width: 1158px) { + .container-section { + width: 100%; + + .main-title-green { + padding-bottom: 80px; + } + + .presentation-picture { + flex-grow: 1; + display: flex; + gap: 30px; + } + + .presentation-picture img { + width: 547px; + height: 401px; + } + } + + .sale-title { + padding-bottom: 80px; + padding-top: 80px; + padding-left: 0px; + } + + .all-sales-container{ + width: 100%; + min-width: 1158px; + padding-bottom: 160px; + padding-right: 20px; + + } + + .sale-title{ + padding-bottom: 80px; + padding-left: 0; + } + + .sale-container{ + max-width: 1176px; + flex-direction: row; + gap: 40px; + display: flex; + position: relative; + } + + .small-gallery{ + padding-left: 97px; + } + + .detailes-container{ + flex-direction: column; + margin: 0; + padding-left: 0; + padding-right: 0; + display: flex; + } + + .container-sale-title h3{ + padding-top: 0px; + } + + +} diff --git a/src/sass/_navbar.scss b/src/sass/_navbar.scss new file mode 100644 index 00000000000..cccaaf3880e --- /dev/null +++ b/src/sass/_navbar.scss @@ -0,0 +1,277 @@ +:root { + --main-text-color: rgba(255, 255, 255, 1); + --main-family: 'Epilogue', sans-serif; + --trasform: 250ms cubic-bezier(0.4, 0, 0.2, 1); + --main-button-color: rgba(30, 40, 39, 1); + --main-background-color: rgba(20, 20, 20, 1); +} + +.navbar-container { + background-color: rgba(20, 20, 20, 1); + padding: 29px 20px; + border: 0; + + .logo-nav-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + .logo { + font-family: var(--main-family); + color: var(--main-text-color); + font-size: 12px; + font-weight: 400; + line-height: 15.37px; + letter-spacing: -0.03em; + text-align: left; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 4px; + + a { + text-decoration: none; + color: var(--main-text-color); + } + .iconlogo svg { + height: 14px; + width: 14px; + } + } + + .nav-menu-container { + justify-content: center; + align-items: center; + + .navigation-bar { + display: none; + } + + + .mobile-menu-icon svg { + width: 24px; + height: 24px; + } + + } + } + + .nav-contact { + display: none; + } + + .js-menu-container { + display: none; + + + + } + .js-menu-container.is-open { + background-color: var(--main-button-color); + display: flex; + flex-direction: column; + position: fixed; + gap: 200px; + top: 0; + right: 0; + width: 100%; + height: 100%; + z-index: 1; + transition-duration: 510ms; + transition-timing-function: ease-in-out; + + .mobile-logo-close-containter { + display: flex; + flex-direction: row; + padding: 29px 20px ; + justify-content: space-between; + align-items: center; + .js-close-menu { + .close-btn-container svg { + width: 24px; + height: 24px; + fill: var(--main-text-color); + } + + } + + .logo { + font-family: var(--main-family); + color: var(--main-text-color); + font-size: 12px; + font-weight: 400; + line-height: 12.3px; + letter-spacing: -0.03em; + text-align: left; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 4px; + + + .iconlogo svg { + height: 14px; + width: 14px; + } + + a { + list-style-type: none; + text-decoration: none; + color: aliceblue; + } + + } + } + .navigation-bar-mobile { + padding: 0 156px; + ul { + display: flex; + flex-direction: column; + gap: 14px; + justify-content: center; + align-items: center; + font-family: var(--main-family); + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + + a { + color: var(--main-text-color); + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: 0em; + text-align: center; + } + + a:hover { + color: rgb(194, 204, 223); + } + + } + } + + } + +} + +/* Tablet */ +@media screen and (min-width: 768px) { + .navbar-container { + display: flex; + justify-content: space-between; + padding: 34px 32px; + + + + .logo-nav-container { + display: flex; + gap: 80px; + justify-content: center; + align-items: center; + + .logo { + font-size: 15px; + + .iconlogo svg { + height: 19px; + width: 19px; + } + a { + text-decoration: none; + color: var(--main-text-color); + } + } + .nav-menu-container { + display: flex; + justify-content: center; + align-items: center; + + .mobile-menu-icon { + visibility: hidden; + } + + .navigation-bar { + display: flex; + visibility: visible; + justify-content: center; + align-items: center; + font-family: var(--main-family); + + + ul { + display: flex; + flex-direction: row; + list-style-type: none; + gap: 40px; + justify-content: center; + align-items: center; + + a { + color: var(--main-text-color); + font-size: 9px; + font-weight: 400; + line-height: 12px; + letter-spacing: 0em; + text-align: center; + } + + a:hover { + color: rgb(194, 204, 223); + } + } + } + } + } + + + .nav-contact { + display: flex; + justify-content: center; + align-items: center; + + .btnservice { + width: 159px; + height: 48px; + border-radius: 8px; + font-family: var(--main-family); + font-size: 9px; + font-weight: 400; + line-height: 12px; + letter-spacing: 0em; + text-align: center; + background-color: var(--main-button-color); + border: 0; + padding: 0; + + a { + color: var(--main-text-color); + } + } + } + } +} + +/* Desktop */ + +@media screen and (min-width: 1178px) { + .navbar-container { + padding: 34px; + + .logo-nav-container { + margin-left: 98px; + + } + + .nav-contact { + .btnservice { + margin-right: 98px; + } + } + } +} + diff --git a/src/sass/_welcom.scss b/src/sass/_welcom.scss new file mode 100644 index 00000000000..b30d067a70d --- /dev/null +++ b/src/sass/_welcom.scss @@ -0,0 +1,285 @@ +:root { + --main-family: 'Epilogue', sans-serif; + --trasform: 250ms cubic-bezier(0.4, 0, 0.2, 1); + --main-text-color: rgba(255, 255, 255, 1); + --main-button-color: rgba(30, 40, 39, 1); + --main-background-color: rgba(20, 20, 20, 1); +} +.main-container { + background-color: var(--main-background-color); + font-family: var(--font-family); + color: var(--main-text-color); + width: 100%; + padding: 40px 20px; + + .main-section { + padding-left: 20px; + padding-right: 20px; + + + .welcome-title { + width: 335px; + font-size: 38px; + font-family: var(--font-family); + font-weight: 600; + line-height: 40px; + letter-spacing: -0.04em; + } + + .welcome-paragraph { + float: right; + width: 248px; + color: var(--main-text-color); + letter-spacing: -0.28px; + padding: 40px 0; + font-size: 14px; + font-style: normal; + font-weight: 300; + line-height: 18px; + } + + .welcome-picture { + img { + padding: 0; + width: 100%; + } + } + + + .carousel { + position: relative; + flex-direction: column; + align-items: center; + justify-content: center; + width: 266px; + padding-top: 60px; + + + .slider { + width: 100%; + height: 190px; + position: relative; + overflow: hidden; + background-color: #1E2827; + + + + .slide { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + transition: 1s; + padding: 5px 20px; + } + } + .nav-carousel { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-top: 31px; + + .btnslide-container { + gap: 12px; + display: flex; + justify-content: center; + align-items: center; + + + .btnslide { + width: 32px; + height: 32px; + padding: 7px; + border: 1px solid #ffffff80; + border-radius: 8px; + justify-content: center; + align-items: center; + transition: border-color .25s ease-in-out; + display: flex; + } + .btnslide:hover, .btnslide:focus { + border-color: #fff; + } + } + + .slide-number { + gap: 6px; + font-family: Epilogue; + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + display: flex; + justify-content: center; + align-items: center; + } + + } + + + } + + } +} + +/* Tablet */ +@media screen and (min-width: 768px) { + .main-container { + padding-top: 80px; + padding-bottom: 40px; + display: block; + + .main-section { + margin: 0 auto; + display: flex; + flex-wrap: wrap; + padding-left: 0px; + padding-right: 0px; + gap: 20px; + align-items: center; + + + + .welcome-title { + width: 653px; + font-size: 60px; + line-height: 62px; + } + + .welcome-paragraph { + float: right; + width: 248px; + } + + .welcome-picture { + padding-top: 20px; + } + .carousel { + width: 436px; + padding-top: 71px; + .slider { + height: 233px; + + .slide { + padding: 11px 44px; + } + } + + .nav-carousel { + padding-top: 20px; + + .btnslide-container { + .btnslide { + width: 40px; + height: 40px; + padding: 8px; + } + } + .slide-number { + font-family: Epilogue; + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + display: flex; + justify-content: center; + align-items: center; + } + } + } + } + } +} + + +/* Desktop */ + +@media screen and (min-width: 1178px) { + .main-container { + position: relative; + padding: 0; + + + .main-section { + width: 100%; + position: relative; + display:flex; + gap: 43px; + flex-direction: row; + align-items: unset; + padding: 98px 132px 80px 132px; + + .welcome-title { + padding: 0px; + margin-right: 500px; + font-size: 60px; + line-height: 62px; + width: 750px; + height: 124px; + } + + .welcome-paragraph { + width: 282px; + height: 90px; + margin-bottom: 77px; + padding: 0; + position: absolute; + top: 100px; + right: 132px; + } + + .welcome-picture { + position: relative; + padding: 0; + width: 70%; + + img { + width: 676px; + height: 394px; + margin-top: 43px; + margin-bottom: 80px; + } + } + .carousel { + width: 436px; + padding-top: 122px; + padding-right: 21px; + .slider { + height: 233px; + + .slide { + padding: 11px 44px; + } + } + + .nav-carousel { + padding-top: 20px; + + .btnslide-container { + .btnslide { + width: 40px; + height: 40px; + padding: 8px; + } + } + .slide-number { + font-family: Epilogue; + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + display: flex; + justify-content: center; + align-items: center; + } + + } + + + } + + } + } +} \ No newline at end of file diff --git a/src/sass/catalog-section-2.scss b/src/sass/catalog-section-2.scss new file mode 100644 index 00000000000..539fc798e81 --- /dev/null +++ b/src/sass/catalog-section-2.scss @@ -0,0 +1,578 @@ +:root { + --font-family: 'Epilogue'; +} +.catalog { + padding-left: 20px; +} +.catalog-container { + display: flex; + flex-direction: column; +} + +.container-catalog-watch { + max-width: 335px; + margin: auto; +} + +.catalog-container h2 { + padding-top: 40px; + padding-bottom: 83px; + color: #1e2827; + font-family: var(--font-family); + font-size: 32px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.64px; +} + +.cards-catalog-container { + overflow: hidden; +} + +.description-flip-flop h4 { + padding-left: 40px; + padding-top: 46px; + color: #fff; + font-family: Epilogue; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 128.571% */ + letter-spacing: -0.28px; + text-transform: uppercase; +} + +.description-flip-flop p { + padding-left: 40px; + padding-top: 10px; + transition: transform 2s ease-in-out; + color: rgba(255, 255, 255, 0.5); + width: 236px; + height: 53px; + font-family: Epilogue; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 128.571% */ + letter-spacing: -0.14px; +} + +.detailes-flip-flop-watch h4 { + padding-top: 40px; + padding-bottom: 10px; + padding-left: 40px; + color: #fff; + font-family: Epilogue; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 128.571% */ + letter-spacing: -0.28px; + text-transform: uppercase; +} +.detailes-flip-flop-watch p { + padding-left: 40px; + transition: transform 2s ease-in-out; + color: rgba(255, 255, 255, 0.5); + font-family: Epilogue; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 128.571% */ + letter-spacing: -0.14px; +} + +.items-watch { + background-color: white; + justify-content: center; + transition: transform 0.25s ease-in-out; + display: flex; + position: relative; +} + +.items-watch:hover .flip-flop { + transition: transform 0.25s ease-in-out; + transform: translate(0); +} + +.watch-styles { + flex-direction: column; + display: flex; +} + +.flip-flop { + transform: translateX(110%); + position: absolute; + overflow: hidden; + width: 336px; + flex-shrink: 0; + background: #1e2827; + border-radius: 8px; +} + +.watch-section img { + width: 275px; +} + +.watch-price h3 { + height: 18px; + margin-top: 57px; + overflow: hidden; + color: #141414; + text-overflow: ellipsis; + white-space: nowrap; + font-family: Epilogue; + font-size: 14px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.28px; +} + +.watch-price p { + padding-bottom: 83px; + color: rgba(20, 20, 20, 0.5); + font-family: Epilogue; + font-size: 12px; + font-style: normal; + font-weight: 400; +} + +.button-buy-now { + border-radius: 8px; + background: var(--dark-green, #1e2827); + color: var(--white, #fff); + text-align: center; + font-family: Epilogue; + font-size: 12px; + font-style: normal; + font-weight: 400; + text-transform: uppercase; + padding: 14px 28px; + gap: 10px; + align-self: self-end; +} + +.button-buy-now:hover, +.button-buy-now:active { + background: var(--dark-green, #1e2827); + color: var(--white, #fff); +} + +.button-container { + display: flex; + justify-content: flex-end; +} + +.laptop-watches { + display: none; +} + +.modal { + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 0, 0, 0.2); + transform: scale(1); + transition-duration: 510ms; + transition-timing-function: ease-in-out; + z-index: 1; + + .modal-content { + background-color: rgba(255, 255, 255, 1); + max-width: 375px; + height: 1113px; + position: relative; + padding: 54px, 92px, 54px, 287px; + border-radius: 8px; + gap: 8px; + flex-direction: column; + display: flex; + box-shadow: 0px 0px 8.775463104248047px 0px #00000003; + box-shadow: 0px 0px 18.17037010192871px 0px #00000005; + box-shadow: 0px 0px 36.23749923706055px 0px #00000006; + box-shadow: 0px 0px 71.02963256835938px 0px #00000008; + box-shadow: 0px 0px 130.5995330810547px 0px #0000000a; + box-shadow: 0px 0px 223px 0px #0000000d; + + .btn-close-container { + position: relative; + } + + .close-btn { + box-sizing: content-box; + width: 20px; + height: 20px; + padding: 6px; + cursor: pointer; + position: absolute; + top: 8px; + right: 8px; + } + + .form-container { + display: flex; + flex-direction: column; + padding: 40px 20px; + + .modal-container { + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + width: 100%; + gap: 40px; + + .currentwatch { + width: 100%; + height: 375px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0; + + div { + width: 100%; + font-family: Epilogue; + color: #141414; + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + padding: 0; + justify-content: center; + align-content: center; + display: flex; + flex-direction: column; + + p + p { + color: #14141480; + font-size: 12px; + line-height: 14px; + } + } + } + + form { + display: flex; + flex-direction: column; + gap: 18px; + position: relative; + justify-content: center; + align-content: center; + + .label-content { + .form-label { + font-family: Epilogue; + font-size: 12px; + font-weight: 400; + line-height: 14px; + letter-spacing: -0.02em; + text-align: left; + color: #141414; + } + + .form-input-container { + position: relative; + width: 100%; + padding-top: 12px; + + .textfield { + height: 42px; + width: 100%; + border: 1px solid #14141480; + border-radius: 8px; + padding: 12px 16px; + outline: none; + font-family: Epilogue; + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + color: #14141480; + } + } + + textarea { + height: 170px; + width: 100%; + padding: 12px 16px; + border: 1px solid #14141480; + border-radius: 4px; + outline: none; + font-family: Epilogue; + font-size: 14px; + font-weight: 400; + line-height: 18px; + letter-spacing: -0.02em; + text-align: left; + } + + textarea::placeholder { + font-family: var(--head-text); + font-size: 14px; + font-weight: 400; + line-height: 16px; + letter-spacing: 0.01em; + color: rgba(117, 117, 117, 0.5); + padding-top: 2px; + } + } + + .label-terms { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-top: 2px; + + .btnform { + width: 100%; + height: 50px; + padding: 18px, 116px, 18px, 116px; + border-radius: 8px; + cursor: pointer; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); + background-color: #1e2827; + color: #ffffff; + font-family: Epilogue; + font-size: 12px; + font-weight: 400; + line-height: 14px; + letter-spacing: 0em; + text-align: center; + } + p { + padding-top: 12px; + font-family: Epilogue; + font-size: 12px; + font-weight: 400; + line-height: 14px; + letter-spacing: -0.02em; + text-align: left; + color: #14141466; + + span { + text-decoration: underline; + } + } + } + } + } + } + } +} + +.is-hidden { + visibility: hidden; + pointer-events: fill; + scale: calc(1.3); +} + +input:focus, +.textfield:focus, +textarea:focus { + border: 1px solid rgba(33, 150, 243, 1); + cursor: pointer; + transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +/*Tablet*/ + +@media screen and(min-width:768px) { + .catalog { + padding-left: 20px; + } + .catalog-container { + max-width: 768px; + } + + .watch-list { + flex-flow: wrap; + justify-content: center; + gap: 32px; + display: flex; + } + .watch-section img { + width: 310px; + height: 312px; + } + + .modal { + .modal-content { + max-width: 744px; + height: 670px; + + .close-btn { + width: 24px; + height: 24px; + } + + .form-container { + padding: 40px 40px; + + .modal-container { + width: 100%; + flex-direction: row; + gap: 20px; + + .currentwatch { + width: 276px; + height: 274px; + justify-content: start; + } + + form { + gap: 18px; + + .label-content { + .form-label { + font-size: 14px; + line-height: 18px; + } + + .form-input-container { + .textfield { + height: 42px; + width: 100%; + font-size: 16px; + } + } + + textarea { + height: 166px; + width: 100%; + font-size: 16px; + } + + textarea::placeholder { + font-size: 16px; + } + } + + .label-terms { + padding-top: 2px; + + .btnform { + width: 100%; + height: 50px; + padding: 18px; + } + } + } + } + } + } + } +} + +/*Desktop*/ + +@media screen and(min-width:1158px) { + .catalog-container { + max-width: 1118px; + } + + .catalog-container h2 { + font-size: 40px; + font-weight: 600; + color: var(--dark-green, #1e2827); + font-family: var(--font-family); + font-size: 40px; + font-style: normal; + font-weight: 600; + line-height: 44px; + letter-spacing: -0.02em; + align-self: self-start; + } + + .watch-section h3 { + width: 336px; + height: 18px; + overflow: hidden; + color: var(--black, #141414); + text-overflow: ellipsis; + white-space: nowrap; + font-family: Epilogue; + font-size: 14px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.28px; + } + + .watch-price p { + color: #ffffff80; + font-family: Epilogue; + font-size: 12px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.24px; + } + + .button-buy-now { + margin-top: 50px; + border-radius: 8px; + background: var(--dark-green, #1e2827); + color: var(--white, #fff); + font-family: Epilogue; + font-size: 12px; + font-style: normal; + font-weight: 400; + text-transform: uppercase; + gap: 10px; + padding: 20px 50px; + align-self: self-end; + cursor: pointer; + } + + .watch-list { + flex-direction: row; + justify-content: center; + align-items: center; + display: flex; + } + + .cards-catalog-container { + width: 250px; + } + + .flip-flop { + padding-left: 20px; + } + .laptop-watches { + display: flex; + } + + .modal { + .modal-content { + max-width: 904px; + height: 694px; + + .form-container { + padding: 40px 41px; + + .modal-container { + gap: 40px; + + .currentwatch { + height: 325px; + } + + form { + gap: 24px; + + .label-terms { + padding-top: 16px; + } + } + } + } + } + } +} diff --git a/src/sass/index.scss b/src/sass/index.scss old mode 100755 new mode 100644 index 8d1a014a6b5..18b8e1b7abc --- a/src/sass/index.scss +++ b/src/sass/index.scss @@ -1,2 +1,11 @@ @import './common'; @import './example'; +@import './welcom'; +@import './_about-us'; +@import './footer'; +@import './green-sale'; +@import './catalog-section-2.scss'; +@import './_navbar.scss'; + + +