diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index 5f9e97051..77450481c 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Museum/). + [DEMO LINK](https://ht1204.github.io/Museum/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index d339e6856..447563839 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,334 @@ - + - Title + Museum + -

Hello Mate Academy

- + + +
+
+ + menu + + + +
+ +
+

Актуальні події

+
+ comeback +
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+
+

Йду і повертаюсь

+
+

+ Національний Художній Музей України презентує унікальну частину + колекції Градобанку - українське мистецтво другої половини + 1980-1995 років. +

+
+
+
+ dreams +
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+
+

І спогади і мрії

+
+

+ Національний художній музей України до 100 річчя від дня + народження видатної української художниці Тетяни Яблонської + відкриває ретроспективну ювілейну виставку «І спогади і мрії». +

+
+
+
+ +
+
+
+

ЛЕКЦІЯ

+

26/08/2019 - 11:00

+
+

Від класицизму до романтизму

+
+
+ + + + +
+ + + + diff --git a/package-lock.json b/package-lock.json index fbfeb1428..b3f5f3951 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1310,109 +1310,6 @@ } } }, - "node_modules/@isaacs/cliui": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", - "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", - "dev": true, - "peer": true, - "dependencies": { - "string-width": "^5.1.2", - "string-width-cjs": "npm:string-width@^4.2.0", - "strip-ansi": "^7.0.1", - "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", - "wrap-ansi": "^8.1.0", - "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/@isaacs/cliui/node_modules/ansi-regex": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", - "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", - "dev": true, - "peer": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, - "node_modules/@isaacs/cliui/node_modules/ansi-styles": { - "version": "6.2.3", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz", - "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==", - "dev": true, - "peer": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@isaacs/cliui/node_modules/emoji-regex": { - "version": "9.2.2", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", - "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", - "dev": true, - "peer": true - }, - "node_modules/@isaacs/cliui/node_modules/string-width": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", - "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", - "dev": true, - "peer": true, - "dependencies": { - "eastasianwidth": "^0.2.0", - "emoji-regex": "^9.2.2", - "strip-ansi": "^7.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@isaacs/cliui/node_modules/strip-ansi": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", - "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", - "dev": true, - "peer": true, - "dependencies": { - "ansi-regex": "^6.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/strip-ansi?sponsor=1" - } - }, - "node_modules/@isaacs/cliui/node_modules/wrap-ansi": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", - "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", - "dev": true, - "peer": true, - "dependencies": { - "ansi-styles": "^6.1.0", - "string-width": "^5.0.1", - "strip-ansi": "^7.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -1875,10 +1772,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -1950,71 +1848,6 @@ "node": ">= 8" } }, - "node_modules/@octokit/auth-token": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-6.0.0.tgz", - "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==", - "dev": true, - "peer": true, - "engines": { - "node": ">= 20" - } - }, - "node_modules/@octokit/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@octokit/core/-/core-7.0.6.tgz", - "integrity": "sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==", - "dev": true, - "peer": true, - "dependencies": { - "@octokit/auth-token": "^6.0.0", - "@octokit/graphql": "^9.0.3", - "@octokit/request": "^10.0.6", - "@octokit/request-error": "^7.0.2", - "@octokit/types": "^16.0.0", - "before-after-hook": "^4.0.0", - "universal-user-agent": "^7.0.0" - }, - "engines": { - "node": ">= 20" - } - }, - "node_modules/@octokit/endpoint": { - "version": "11.0.2", - "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-11.0.2.tgz", - "integrity": "sha512-4zCpzP1fWc7QlqunZ5bSEjxc6yLAlRTnDwKtgXfcI/FxxGoqedDG8V2+xJ60bV2kODqcGB+nATdtap/XYq2NZQ==", - "dev": true, - "peer": true, - "dependencies": { - "@octokit/types": "^16.0.0", - "universal-user-agent": "^7.0.2" - }, - "engines": { - "node": ">= 20" - } - }, - "node_modules/@octokit/graphql": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-9.0.3.tgz", - "integrity": "sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==", - "dev": true, - "peer": true, - "dependencies": { - "@octokit/request": "^10.0.6", - "@octokit/types": "^16.0.0", - "universal-user-agent": "^7.0.0" - }, - "engines": { - "node": ">= 20" - } - }, - "node_modules/@octokit/openapi-types": { - "version": "27.0.0", - "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-27.0.0.tgz", - "integrity": "sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==", - "dev": true, - "peer": true - }, "node_modules/@octokit/plugin-paginate-rest": { "version": "2.21.3", "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.21.3.tgz", @@ -2070,36 +1903,6 @@ "@types/node": ">= 8" } }, - "node_modules/@octokit/request": { - "version": "10.0.7", - "resolved": "https://registry.npmjs.org/@octokit/request/-/request-10.0.7.tgz", - "integrity": "sha512-v93h0i1yu4idj8qFPZwjehoJx4j3Ntn+JhXsdJrG9pYaX6j/XRz2RmasMUHtNgQD39nrv/VwTWSqK0RNXR8upA==", - "dev": true, - "peer": true, - "dependencies": { - "@octokit/endpoint": "^11.0.2", - "@octokit/request-error": "^7.0.2", - "@octokit/types": "^16.0.0", - "fast-content-type-parse": "^3.0.0", - "universal-user-agent": "^7.0.2" - }, - "engines": { - "node": ">= 20" - } - }, - "node_modules/@octokit/request-error": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-7.1.0.tgz", - "integrity": "sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==", - "dev": true, - "peer": true, - "dependencies": { - "@octokit/types": "^16.0.0" - }, - "engines": { - "node": ">= 20" - } - }, "node_modules/@octokit/rest": { "version": "17.11.2", "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-17.11.2.tgz", @@ -2275,16 +2078,6 @@ "os-name": "^3.1.0" } }, - "node_modules/@octokit/types": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-16.0.0.tgz", - "integrity": "sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==", - "dev": true, - "peer": true, - "dependencies": { - "@octokit/openapi-types": "^27.0.0" - } - }, "node_modules/@parcel/watcher": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz", @@ -2581,17 +2374,6 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/@pkgjs/parseargs": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", - "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", - "dev": true, - "optional": true, - "peer": true, - "engines": { - "node": ">=14" - } - }, "node_modules/@pkgr/core": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz", @@ -3721,13 +3503,6 @@ "tweetnacl": "^0.14.3" } }, - "node_modules/before-after-hook": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz", - "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==", - "dev": true, - "peer": true - }, "node_modules/bl": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", @@ -3773,13 +3548,6 @@ "node": ">=8" } }, - "node_modules/browser-stdout": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz", - "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==", - "dev": true, - "peer": true - }, "node_modules/browserslist": { "version": "4.28.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz", @@ -4792,16 +4560,6 @@ "node": ">=8" } }, - "node_modules/diff": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz", - "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==", - "dev": true, - "peer": true, - "engines": { - "node": ">=0.3.1" - } - }, "node_modules/diff-sequences": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz", @@ -4935,13 +4693,6 @@ "node": ">= 0.4" } }, - "node_modules/eastasianwidth": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", - "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", - "dev": true, - "peer": true - }, "node_modules/ecc-jsbn": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", @@ -5912,23 +5663,6 @@ "node >=0.6.0" ] }, - "node_modules/fast-content-type-parse": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/fast-content-type-parse/-/fast-content-type-parse-3.0.0.tgz", - "integrity": "sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/fastify" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/fastify" - } - ], - "peer": true - }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -6094,16 +5828,6 @@ "node": ">=8" } }, - "node_modules/flat": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz", - "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==", - "dev": true, - "peer": true, - "bin": { - "flat": "cli.js" - } - }, "node_modules/flat-cache": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", @@ -6139,36 +5863,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/foreground-child": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", - "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", - "dev": true, - "peer": true, - "dependencies": { - "cross-spawn": "^7.0.6", - "signal-exit": "^4.0.1" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/foreground-child/node_modules/signal-exit": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", - "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "dev": true, - "peer": true, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/forever-agent": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", @@ -6692,16 +6386,6 @@ "node": ">= 0.4" } }, - "node_modules/he": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", - "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", - "dev": true, - "peer": true, - "bin": { - "he": "bin/he" - } - }, "node_modules/hookified": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.13.0.tgz", @@ -7615,22 +7299,6 @@ "node": ">=8" } }, - "node_modules/jackspeak": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", - "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", - "dev": true, - "peer": true, - "dependencies": { - "@isaacs/cliui": "^8.0.2" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - }, - "optionalDependencies": { - "@pkgjs/parseargs": "^0.11.0" - } - }, "node_modules/jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz", @@ -8982,195 +8650,6 @@ "node": ">= 6" } }, - "node_modules/minipass": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", - "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", - "dev": true, - "peer": true, - "engines": { - "node": ">=16 || 14 >=14.17" - } - }, - "node_modules/mocha": { - "version": "11.7.5", - "resolved": "https://registry.npmjs.org/mocha/-/mocha-11.7.5.tgz", - "integrity": "sha512-mTT6RgopEYABzXWFx+GcJ+ZQ32kp4fMf0xvpZIIfSq9Z8lC/++MtcCnQ9t5FP2veYEP95FIYSvW+U9fV4xrlig==", - "dev": true, - "peer": true, - "dependencies": { - "browser-stdout": "^1.3.1", - "chokidar": "^4.0.1", - "debug": "^4.3.5", - "diff": "^7.0.0", - "escape-string-regexp": "^4.0.0", - "find-up": "^5.0.0", - "glob": "^10.4.5", - "he": "^1.2.0", - "is-path-inside": "^3.0.3", - "js-yaml": "^4.1.0", - "log-symbols": "^4.1.0", - "minimatch": "^9.0.5", - "ms": "^2.1.3", - "picocolors": "^1.1.1", - "serialize-javascript": "^6.0.2", - "strip-json-comments": "^3.1.1", - "supports-color": "^8.1.1", - "workerpool": "^9.2.0", - "yargs": "^17.7.2", - "yargs-parser": "^21.1.1", - "yargs-unparser": "^2.0.0" - }, - "bin": { - "_mocha": "bin/_mocha", - "mocha": "bin/mocha.js" - }, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - } - }, - "node_modules/mocha/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true, - "peer": true - }, - "node_modules/mocha/node_modules/brace-expansion": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", - "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", - "dev": true, - "peer": true, - "dependencies": { - "balanced-match": "^1.0.0" - } - }, - "node_modules/mocha/node_modules/find-up": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", - "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", - "dev": true, - "peer": true, - "dependencies": { - "locate-path": "^6.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/mocha/node_modules/glob": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", - "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==", - "dev": true, - "peer": true, - "dependencies": { - "foreground-child": "^3.1.0", - "jackspeak": "^3.1.2", - "minimatch": "^9.0.4", - "minipass": "^7.1.2", - "package-json-from-dist": "^1.0.0", - "path-scurry": "^1.11.1" - }, - "bin": { - "glob": "dist/esm/bin.mjs" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/mocha/node_modules/js-yaml": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", - "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", - "dev": true, - "peer": true, - "dependencies": { - "argparse": "^2.0.1" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, - "node_modules/mocha/node_modules/locate-path": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", - "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", - "dev": true, - "peer": true, - "dependencies": { - "p-locate": "^5.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/mocha/node_modules/minimatch": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", - "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", - "dev": true, - "peer": true, - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/mocha/node_modules/p-locate": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", - "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", - "dev": true, - "peer": true, - "dependencies": { - "p-limit": "^3.0.2" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/mocha/node_modules/supports-color": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", - "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", - "dev": true, - "peer": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/supports-color?sponsor=1" - } - }, - "node_modules/mocha/node_modules/yargs-parser": { - "version": "21.1.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", - "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", - "dev": true, - "peer": true, - "engines": { - "node": ">=12" - } - }, "node_modules/mochawesome": { "version": "7.1.4", "resolved": "https://registry.npmjs.org/mochawesome/-/mochawesome-7.1.4.tgz", @@ -9867,13 +9346,6 @@ "node": ">=6" } }, - "node_modules/package-json-from-dist": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", - "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "dev": true, - "peer": true - }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -9961,30 +9433,6 @@ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", "dev": true }, - "node_modules/path-scurry": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", - "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", - "dev": true, - "peer": true, - "dependencies": { - "lru-cache": "^10.2.0", - "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" - }, - "engines": { - "node": ">=16 || 14 >=14.18" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/path-scurry/node_modules/lru-cache": { - "version": "10.4.3", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", - "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", - "dev": true, - "peer": true - }, "node_modules/path-to-regexp": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz", @@ -10426,16 +9874,6 @@ "node": ">=8" } }, - "node_modules/randombytes": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", - "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", - "dev": true, - "peer": true, - "dependencies": { - "safe-buffer": "^5.1.0" - } - }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", @@ -10957,16 +10395,6 @@ "semver": "bin/semver.js" } }, - "node_modules/serialize-javascript": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", - "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", - "dev": true, - "peer": true, - "dependencies": { - "randombytes": "^2.1.0" - } - }, "node_modules/set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", @@ -11354,22 +10782,6 @@ "node": ">=8" } }, - "node_modules/string-width-cjs": { - "name": "string-width", - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, - "peer": true, - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/string.prototype.trim": { "version": "1.2.10", "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz", @@ -11438,20 +10850,6 @@ "node": ">=8" } }, - "node_modules/strip-ansi-cjs": { - "name": "strip-ansi", - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "peer": true, - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/strip-bom": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz", @@ -12349,13 +11747,6 @@ "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==", "dev": true }, - "node_modules/universal-user-agent": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz", - "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==", - "dev": true, - "peer": true - }, "node_modules/universalify": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", @@ -12929,13 +12320,6 @@ "node": ">=8.0.0" } }, - "node_modules/workerpool": { - "version": "9.3.4", - "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-9.3.4.tgz", - "integrity": "sha512-TmPRQYYSAnnDiEB0P/Ytip7bFGvqnSU6I2BcuSw7Hx+JSg/DsUi5ebYfc8GYaSdpuvOcEs6dXxPurOYpe9QFwg==", - "dev": true, - "peer": true - }, "node_modules/wrap-ansi": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", @@ -12950,25 +12334,6 @@ "node": ">=8" } }, - "node_modules/wrap-ansi-cjs": { - "name": "wrap-ansi", - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dev": true, - "peer": true, - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", @@ -13039,23 +12404,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", - "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - }, - "funding": { - "url": "https://github.com/sponsors/eemeli" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", @@ -13083,58 +12431,6 @@ "node": ">=10" } }, - "node_modules/yargs-unparser": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz", - "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==", - "dev": true, - "peer": true, - "dependencies": { - "camelcase": "^6.0.0", - "decamelize": "^4.0.0", - "flat": "^5.0.2", - "is-plain-obj": "^2.1.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/yargs-unparser/node_modules/camelcase": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", - "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", - "dev": true, - "peer": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/yargs-unparser/node_modules/decamelize": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz", - "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==", - "dev": true, - "peer": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/yargs-unparser/node_modules/is-plain-obj": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", - "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", - "dev": true, - "peer": true, - "engines": { - "node": ">=8" - } - }, "node_modules/yargs/node_modules/yargs-parser": { "version": "21.1.1", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", diff --git a/package.json b/package.json index ab5f87b9b..d2c5a8560 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv.png b/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv.png new file mode 100644 index 000000000..847ee582a Binary files /dev/null and b/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv.png differ diff --git a/src/images/classic.png b/src/images/classic.png new file mode 100644 index 000000000..85d46b958 Binary files /dev/null and b/src/images/classic.png differ diff --git a/src/images/icons/Arrow_right.svg b/src/images/icons/Arrow_right.svg new file mode 100644 index 000000000..1e66aedf1 --- /dev/null +++ b/src/images/icons/Arrow_right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/burger-menu.svg b/src/images/icons/burger-menu.svg new file mode 100644 index 000000000..f08cc7c6a --- /dev/null +++ b/src/images/icons/burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/close.svg b/src/images/icons/close.svg new file mode 100644 index 000000000..f43a579a4 --- /dev/null +++ b/src/images/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook-letter-logo.svg b/src/images/icons/facebook-letter-logo.svg new file mode 100644 index 000000000..511e7205b --- /dev/null +++ b/src/images/icons/facebook-letter-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..b080c7a38 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..f9d6c858d --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/photo1.png b/src/images/photo1.png new file mode 100644 index 000000000..a59f0d612 Binary files /dev/null and b/src/images/photo1.png differ diff --git a/src/images/photo2.png b/src/images/photo2.png new file mode 100644 index 000000000..ae454e8f9 Binary files /dev/null and b/src/images/photo2.png differ diff --git a/src/images/photo3.png b/src/images/photo3.png new file mode 100644 index 000000000..602ca86db Binary files /dev/null and b/src/images/photo3.png differ diff --git a/src/images/photo4.png b/src/images/photo4.png new file mode 100644 index 000000000..b60d1c5dc Binary files /dev/null and b/src/images/photo4.png differ diff --git a/src/images/poster1.png b/src/images/poster1.png new file mode 100644 index 000000000..26fe06a30 Binary files /dev/null and b/src/images/poster1.png differ diff --git a/src/images/poster2.png b/src/images/poster2.png new file mode 100644 index 000000000..85fbaecb2 Binary files /dev/null and b/src/images/poster2.png differ diff --git a/src/images/subscribeBack.png b/src/images/subscribeBack.png new file mode 100644 index 000000000..008f3e207 Binary files /dev/null and b/src/images/subscribeBack.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..2db20188b 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,53 @@ +/* eslint-disable no-undef */ 'use strict'; + +const form = document.querySelector('.subscribe__form'); +const input = document.querySelector('.subscribe__input'); + +form.addEventListener('submit', (e) => { + e.preventDefault(); + + if (input.value.trim() === '') { + return; + } + + form.reset(); + window.scrollTo({ top: 0, behavior: 'smooth' }); +}); + +const photos = document.querySelectorAll('.photos__photo'); +const dots = document.querySelectorAll('.gallery__dot'); +const slider = document.querySelector('.photos'); + +const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const index = Array.from(photos).indexOf(entry.target); + + dots.forEach((dot) => dot.classList.remove('gallery__dot--active')); + + dots[index].classList.add('gallery__dot--active'); + } + }); + }, + { + root: slider, + rootMargin: '0px -50% 0px 0px', + threshold: 0, + }, +); + +photos.forEach((photo) => observer.observe(photo)); + +dots.forEach((dot, index) => { + dot.addEventListener('click', (e) => { + e.preventDefault(); + + photos[index].scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'start', + }); + }); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..5dc1cc6b5 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} +@import 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Montserrat:wght@400;700&display=swap'; diff --git a/src/styles/blocks/actual.scss b/src/styles/blocks/actual.scss new file mode 100644 index 000000000..acb26079c --- /dev/null +++ b/src/styles/blocks/actual.scss @@ -0,0 +1,138 @@ +@import '../utils/mixins'; +@import '../utils/vars'; + +.actual { + @include padding-in-line; + @include grid; + + &__title { + grid-column: 1 / -1; + + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + color: $main-color; + text-align: center; + letter-spacing: 0; + + @include on-tablet { + text-align: start; + } + } +} + +.poster { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + width: 100%; + + &__photo { + grid-column: 1 / -1; + width: 100%; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + grid-column: span 7; + } + } + + &__summary { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: -5 / -1; + margin-block: auto; + } + } + + &__date { + display: flex; + grid-column: 1 / -1; + justify-content: space-between; + + @include on-tablet { + column-gap: 24px; + align-items: center; + justify-content: flex-start; + } + } + + &__subtitle { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: #687480; + letter-spacing: 0; + } + + &__time { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 150%; + color: $l-green; + letter-spacing: 0; + + @include on-tablet { + text-align: start; + } + } + + &__main { + display: flex; + flex-direction: row; + align-items: center; + } + + &__title { + position: relative; + + margin: 0; + + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 100%; + color: $main-color; + letter-spacing: 0; + + @include on-tablet { + font-size: 36px; + } + + &::after { + content: ''; + + position: absolute; + + width: 10px; + height: 10px; + margin: 12px; + + background-color: $l-red; + } + } + + &__description { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 300; + line-height: 150%; + color: #4e4e4e; + letter-spacing: 0; + } + + &:last-child { + margin-top: 60px; + } +} diff --git a/src/styles/blocks/classic.scss b/src/styles/blocks/classic.scss new file mode 100644 index 000000000..f486b90f4 --- /dev/null +++ b/src/styles/blocks/classic.scss @@ -0,0 +1,85 @@ +@import '../utils/mixins'; +@import '../utils/vars'; + +.classic { + position: relative; + + align-content: end; + + box-sizing: border-box; + width: 100%; + height: auto; + min-height: 210px; + + background-image: url('../images/classic.png'); + background-position: center; + background-size: cover; + + @include padding-in-line; + @include grid; + + @include on-tablet { + width: auto; + } + + @include on-desktop { + height: 550px; + + @include grid; + } +} + +.cart { + position: relative; + transform: translateY(50%); + + grid-column: 1 / -1; + grid-template-columns: subgrid; + + box-sizing: border-box; + padding-top: 24px; + padding-bottom: 20px; + + background-color: $white; + box-shadow: 0 2px 0 0 #1a5a4c40; + + @include on-desktop { + grid-column: 4 / -4; + } + + &__top { + display: flex; + grid-column: 1 / -1; + justify-content: space-around; + } + + &__subtitle { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: $subtitle; + letter-spacing: 0; + } + + &__date { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 150%; + color: $l-green; + letter-spacing: 0; + } + + &__title { + margin-top: 20px; + + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 100%; + color: $main-color; + text-align: center; + letter-spacing: 0; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..4a4c59b3e --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,198 @@ +@import '../utils/mixins'; +@import '../utils/vars'; + +.footer { + row-gap: 40px; + margin: 0; + padding-block: 40px; + background-color: $white; + + @include padding-in-line; + @include grid; + + &__icons { + display: flex; + grid-column: 1 / -1; + align-items: center; + justify-content: space-between; + + width: 100%; + + @include on-tablet { + grid-column: 1 / 2; + flex-direction: column; + row-gap: 64px; + align-items: flex-start; + justify-content: flex-start; + } + } + + &__summary { + grid-column: 1 / -1; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 12px; + font-weight: 300; + line-height: 141%; + color: $main-color; + text-align: center; + + @include on-tablet { + display: flex; + align-items: flex-end; + justify-content: space-between; + } + + @include on-desktop { + grid-column: 1 / -1; + margin-top: 40px; + } + } +} + +.schedule--footer { + grid-column: 1 / 2; + color: $main-color; + + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-desktop { + grid-column: 3 / 5; + } +} + +.schedule__time, +.schedule__summary { + margin: 0; +} + +.schedule__content--footer { + @include on-tablet { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + } +} + +.schedule__summary--footer { + margin: 0; + padding: 0; + + @include on-tablet { + display: block; + flex: none; + align-self: flex-start; + } +} + +.contacts { + display: flex; + grid-column: 2 / 3; + flex-direction: column; + row-gap: 16px; + + font-family: 'IBM Plex Sans', sans-serif; + + @include on-tablet { + grid-column: -4 / -2; + } + + @include on-desktop { + grid-column: 5 / 7; + } + + &__title { + margin: 0; + + font-size: 14px; + font-weight: 400; + line-height: 141%; + color: $main-color; + } + + &__content { + display: flex; + flex-direction: column; + row-gap: 8px; + } + + &__link { + font-size: 14px; + line-height: 1.4; + color: $main-color; + text-decoration: none; + } +} + +.line--footer { + position: relative; + + grid-column: 1 / -1; + + width: 100%; + min-width: 1px; + height: 1px; + + background: #1a5a4c80; + + @include on-tablet { + grid-column: 2 / -2; + justify-self: stretch; + + width: 100%; + height: 1px; + margin-block: 40px; + } + + @include on-desktop { + grid-column: 7 / 8; + + width: 1px; + height: 100%; + margin-block: 0; + margin-inline: auto; + } +} + +.menu__list--footer { + display: grid; + grid-column: 1 / -1; + grid-template-columns: repeat(2, 1fr); + row-gap: 16px; + + width: 100%; + + @include on-tablet { + grid-auto-flow: column; + grid-column: 2 / 6; + grid-template-rows: repeat(2, auto); + column-gap: 30px; + } + + @include on-desktop { + display: grid; + grid-auto-flow: row; + grid-column: 8 / 12; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + row-gap: 24px; + + height: fit-content; + } +} + +.menu__item--footer { + grid-column: span 1; + height: fit-content; + margin-bottom: 0; +} + +.menu__link--footer { + cursor: pointer; + color: $main-color; + + @include hover(color, $l-green); +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..5240d0957 --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,118 @@ +@import '../utils/mixins'; +@import '../utils/vars'; + +.gallery { + @include padding-in-line; + @include grid; + + padding-block: 100px; + + &__title { + grid-column: 1 / -1; + + width: 100%; + + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + color: $main-color; + text-align: center; + letter-spacing: 0; + + @include on-tablet { + grid-column: 1 / 4; + text-align: start; + } + } +} + +.photos { + scroll-behavior: smooth; + scrollbar-width: none; + scroll-snap-type: x mandatory; + + overflow-x: auto; + display: grid; + grid-auto-columns: 100%; + grid-auto-flow: column; + grid-column: 1 / -1; + column-gap: 16px; + + box-sizing: border-box; + + &::-webkit-scrollbar { + display: none; + } + + &__photo { + scroll-snap-align: start; + + width: 100%; + height: 100%; + max-height: 540px; + + object-fit: cover; + + @include on-desktop { + grid-column: span 8; + max-height: none; + } + + &--narrow { + @include on-desktop { + grid-column: span 4; + } + } + } + + @include on-tablet { + grid-auto-columns: calc(50% - 8px); + } + + @include on-desktop { + @include grid; + + overflow-x: visible; + grid-auto-flow: row; + grid-template-rows: 600px 360px; + row-gap: 30px; + } +} + +.gallery__dots-container { + display: flex; + grid-column: 1 / -1; + gap: 8px; + justify-content: center; + + margin-top: 16px; + + @include on-desktop { + display: none; + } +} + +.gallery__dot { + cursor: pointer; + + display: block; + + width: 10px; + height: 10px; + border-radius: 50%; + + text-decoration: none; + + background-color: $bc-dots; + + @include on-tablet { + &:last-child { + display: none; + } + } + + &--active { + background-color: $l-green; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..37c54b67e --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,165 @@ +@import '../utils/mixins'; +@import '../utils/vars'; + +.header { + position: fixed; + z-index: 5000; + top: -100%; + left: 0; + + overscroll-behavior: contain; + display: flex; + flex-direction: column; + + width: 100vw; + height: 100vh; + + opacity: 0; + background-color: rgba(0, 0, 0, 0.5); + + transition: + top 0.3s ease, + opacity 0.3s ease; + + &:target { + top: 0; + opacity: 1; + } +} + +.menu { + @include padding-in-line; + + display: flex; + flex-direction: column; + row-gap: 24px; + + box-sizing: border-box; + width: 100%; + padding-block: 28px; + + background: $l-green; + + @include on-tablet { + flex-direction: row; + gap: 0 38px; + padding-block: 40px; + } + + @include on-desktop { + column-gap: 102px; + padding-block: 40px; + } + + &__left { + display: flex; + flex-direction: row; + } + + &__close { + position: relative; + z-index: 10; + + display: block; + + width: 24px; + height: 24px; + + background-image: url('../images/icons/close.svg'); + background-repeat: no-repeat; + background-position: center; + + @include on-desktop { + margin-right: 102px; + } + } + + &__list { + display: flex; + flex-flow: column wrap; + + margin: 0; + + color: $white; + text-decoration: none; + list-style-type: none; + } + + &__item { + margin-bottom: 28px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + letter-spacing: 0; + + @include on-desktop { + width: 170px; + font-size: 22px; + } + } + + &__link { + cursor: pointer; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: $white; + text-decoration: none; + letter-spacing: 0; + + @include hover(color, rgba(255, 255, 255, 0.7)); + } +} + +.schedule { + display: flex; + flex-direction: column; + row-gap: 16px; + + width: 100%; + padding: 0; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 141%; + color: $white; + letter-spacing: 0; + + &__content { + @include on-tablet { + display: flex; + flex-direction: row; + row-gap: 0; + margin: 0; + } + + @include on-desktop { + column-gap: 30px; + } + } + + &--footer { + grid-column: 1 / 2; + color: $main-color; + } + + &__time { + @include on-tablet { + width: 170px; + margin: 0; + } + } + + &__summary { + @include on-tablet { + align-self: flex-end; + width: 144px; + margin: 0; + } + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 000000000..f25857298 --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,49 @@ +@import '../utils/mixins'; + +.icons { + &__logo { + position: absolute; + z-index: 10; + top: 24px; + left: 50%; + transform: translateX(-50%); + + display: block; + + width: 48px; + + @include on-tablet { + left: 120px; + transform: none; + } + } + + &__logo-footer { + display: block; + flex-shrink: 0; + width: 48px; + } + + &__image { + z-index: 100; + width: 100%; + height: 100%; + } + + &__messengers { + display: flex; + column-gap: 20px; + align-items: center; + height: 24px; + } + + &__facebook, + &__instagram { + cursor: pointer; + display: block; + height: 100%; + object-fit: contain; + + @include hover(transform, scale(1.1)); + } +} diff --git a/src/styles/blocks/museum.scss b/src/styles/blocks/museum.scss new file mode 100644 index 000000000..ecf42f10a --- /dev/null +++ b/src/styles/blocks/museum.scss @@ -0,0 +1,226 @@ +@import '../utils/mixins'; +@import '../utils/vars'; + +.museum { + position: relative; + + @include grid; + + @include on-tablet { + @include padding-in-line; + + padding-right: 0; + } + + @include on-desktop { + padding-bottom: 200px; + } + + &__top { + position: relative; + left: 50%; + transform: translateX(-50%); + + grid-column: 1 / -1; + grid-row: 1; + + box-sizing: border-box; + width: 100vw; + + @include on-tablet { + left: 0; + transform: none; + + display: grid; + grid-column: 4 / -1; + grid-template-columns: subgrid; + + width: 100%; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__photo { + display: block; + width: 100%; + object-fit: cover; + + @include on-tablet { + position: absolute; + z-index: 0; + inset: 0 auto 0 0; + + width: 50vw; + min-height: 384px; + } + + @include on-desktop { + min-height: 655px; + } + } + + &__bottom { + @include padding-in-line; + + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + margin-top: 32px; + + @include on-tablet { + display: flex; + grid-column: 1 / 4; + grid-row: 1; + flex-direction: column; + justify-content: center; + + padding-right: 15px; + padding-inline: 0; + } + + @include on-desktop { + display: grid; + grid-column: 1 / 6; + grid-template-columns: subgrid; + row-gap: 90px; + } + } + + &__title { + grid-column: 1 / -1; + + margin-bottom: 32px; + + font-family: Montserrat, sans-serif; + font-size: 45px; + font-weight: 700; + line-height: 100%; + text-align: center; + + @include on-tablet { + margin-top: 64px; + font-size: 56px; + text-align: left; + } + + @include on-desktop { + margin-top: 206px; + font-size: 72px; + line-height: 120%; + } + } +} + +.burger-menu { + position: absolute; + z-index: 100; + top: 28px; + left: 20px; + + display: block; + + width: 24px; + height: 24px; + + &__icon { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + } + + @include on-tablet { + left: 34px; + } + + @include on-desktop { + top: 40px; + left: 55px; + } +} + +.tickets { + cursor: pointer; + + display: flex; + grid-column: 1 / -1; + flex-direction: row; + align-items: stretch; + + width: 100%; + height: 60px; + padding: 0; + border: 1px solid $l-green; + + text-decoration: none; + + background-color: transparent; + + @include on-tablet { + width: 80%; + } + + @include on-desktop { + grid-column: -4 / -1; + grid-row: 2; + width: 100%; + } + + &__title { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; + + margin: 0; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 600; + color: $main-color; + } + + &__icon { + box-sizing: border-box; + width: 60px; + padding: 18px; + background-color: $l-green; + } +} + +.events { + &__title { + display: none; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 100%; + letter-spacing: 0; + + @include on-desktop { + position: relative; + transform: rotate(-90deg); + + display: block; + grid-column: span 1; + grid-row: 2; + + &::before { + content: ''; + + position: absolute; + top: 50%; + left: calc(-100% - 8px); + + width: 70px; + height: 1px; + + background-color: $l-green; + } + } + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..ac99d11dc --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,135 @@ +@import '../utils/mixins'; +@import '../utils/vars'; + +.subscribe { + row-gap: 50px; + + box-sizing: border-box; + width: 100%; + height: auto; + padding-block: 88px; + + background-image: url('../images/subscribeBack.png'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-tablet { + row-gap: 64px; + } + + @include on-desktop { + height: 550px; + background-position: top; + } + + @include padding-in-line; + @include grid; + + &__summary { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + row-gap: 20px; + + @include on-tablet { + row-gap: 16px; + } + } + + &__title { + grid-column: 1 / -1; + + margin: 0; + + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + color: $white; + text-align: center; + letter-spacing: 0; + + @include on-tablet { + font-size: 48px; + } + } + + &__subtitle { + grid-column: 1 / -1; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 150%; + color: $white; + text-align: center; + letter-spacing: 0; + + @include on-tablet { + margin-top: 0; + } + } + + &__form { + display: flex; + + width: 100%; + height: 50px; + margin: 0; + padding: 0; + + @include on-tablet { + grid-column: 2 / -2; + column-gap: 16px; + height: 70px; + } + + @include on-desktop { + grid-column: 4 / -4; + grid-template-columns: subgrid; + } + } + + &__input { + flex-grow: 1; + + box-sizing: border-box; + height: 100%; + padding-inline: 24px; + border: none; + border-radius: 0; + + outline: none; + + @include on-desktop { + grid-column: span 5; + } + + &:autofill { + -webkit-box-shadow: inset 0 0 0 50px $white; + } + } + + &__button { + cursor: pointer; + + width: 50px; + height: 100%; + border: none; + + background-color: $l-red; + background-image: url('../images/icons/Arrow_right.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: 24px; + + @include on-tablet { + width: 70px; + } + + @include on-desktop { + grid-column: span 1; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..c0286eff2 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,73 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './blocks/header'; +@import './blocks/museum'; +@import './blocks/actual'; +@import './blocks/gallery'; +@import './blocks/classic'; +@import './blocks/subscribe'; +@import './blocks/footer'; +@import './blocks/icons'; + +html { + scroll-behavior: smooth; + overflow-x: hidden; +} body { - background: $c-gray; + overflow-x: hidden; + display: flex; + flex-direction: column; + row-gap: 100px; + + width: 100%; + margin: 0; + padding: 0; + + @include on-tablet { + row-gap: 88px; + } + + @include on-desktop { + row-gap: 104px; + } + + &:has(.header:target) { + overflow: hidden; + } +} + +.line { + position: relative; + + grid-column: 1 / -1; + + width: 100%; + min-width: 1px; + height: 1px; + + background-color: $line-color; + + @include on-tablet { + width: 1px; + height: 100%; + } + + @include on-desktop { + width: 1px; + height: 100%; + } +} + +.is-hoverable { + @include hover(scale, 1.1); + + cursor: pointer; +} + +.is-hoverable-photo { + @include hover(scale, 1.05); + + cursor: pointer; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..bcca4aa6a 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,53 @@ @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; + &:hover { #{$_property}: $_toValue; } } + +@mixin on-desktop { + @media (min-width: 769px) { + @content; + } +} + +@mixin on-phone { + @media (max-width: 320px) { + @content; + } +} + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin padding-in-line { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 55px; + } +} + +@mixin grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..cc1710d56 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,8 @@ $c-gray: #eee; +$main-color: #0f0e08; +$bc-dots: #d9d9d9; +$l-green: #1a5a4c; +$line-color: #ffffff80; +$l-red: #f14a27; +$white: #fff; +$subtitle: #687480;