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/index.html b/index.html
index d339e6856..5bd166fb2 100644
--- a/index.html
+++ b/index.html
@@ -6,14 +6,542 @@
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
-
Title
+ NA MU
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- Hello Mate Academy
-
+
+
+
+
+
+
+
+
+
+ Актуальні події
+
+
+
+
+
+
+
+
+
Йду і повертаюсь
+
+
+
Національний Художній Музей України
+ презентує унікальну частину колекції Градобанку -
+ українське мистецтво
+ другої половини 1980-1995 років.
+
+
+
+
+
+
+
+
+
+
+
+
І спогади і мрії
+
+
+
Національний художній музей України
+ до 100 річчя від дня народження
+ видатної української художниці Тетяни Яблонської
+ відкриває ретроспективну ювілейну
+ виставку «І спогади і мрії».
+
+
+
+
+
+
+
+
+
+
+
+
Від класицизму до романтизму
+
+
+
+
+
+ Галерея
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Підписка
+
+
+ Бути в курсі всіх
+ актуальних подій та останніх новин.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
index fbfeb1428..112c6cd93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
"version": "1.0.0",
"hasInstallScript": true,
"license": "GPL-3.0",
+ "dependencies": {
+ "swiper": "^12.0.3"
+ },
"devDependencies": {
"@linthtml/linthtml": "^0.9.6",
"@mate-academy/eslint-config": "latest",
@@ -60,6 +63,7 @@
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
"dev": true,
+ "peer": true,
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.5",
@@ -544,6 +548,7 @@
"resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.4.tgz",
"integrity": "sha512-eohl3hKTiVyD1ilYdw9T0OiB4hnjef89e3dMYKz+mVKDzj+5IteTseASUsOB+EU9Tf6VNTCjDePcP6wkDGmLKQ==",
"dev": true,
+ "peer": true,
"dependencies": {
"@keyv/serialize": "^1.1.1"
}
@@ -592,6 +597,7 @@
"url": "https://opencollective.com/csstools"
}
],
+ "peer": true,
"engines": {
"node": ">=18"
},
@@ -633,6 +639,7 @@
"url": "https://opencollective.com/csstools"
}
],
+ "peer": true,
"engines": {
"node": ">=18"
}
@@ -1315,7 +1322,6 @@
"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",
@@ -1333,7 +1339,6 @@
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
"integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
"dev": true,
- "peer": true,
"engines": {
"node": ">=12"
},
@@ -1346,7 +1351,6 @@
"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"
},
@@ -1358,15 +1362,13 @@
"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
+ "dev": 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",
@@ -1384,7 +1386,6 @@
"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"
},
@@ -1400,7 +1401,6 @@
"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",
@@ -1955,7 +1955,6 @@
"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"
}
@@ -1984,7 +1983,6 @@
"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"
@@ -1998,7 +1996,6 @@
"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",
@@ -2012,8 +2009,7 @@
"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
+ "dev": true
},
"node_modules/@octokit/plugin-paginate-rest": {
"version": "2.21.3",
@@ -2075,7 +2071,6 @@
"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",
@@ -2092,7 +2087,6 @@
"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"
},
@@ -2280,7 +2274,6 @@
"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"
}
@@ -2587,7 +2580,6 @@
"integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
"dev": true,
"optional": true,
- "peer": true,
"engines": {
"node": ">=14"
}
@@ -3073,6 +3065,7 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
"integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
"dev": true,
+ "peer": true,
"dependencies": {
"undici-types": "~7.16.0"
}
@@ -3156,6 +3149,7 @@
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
+ "peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -3725,8 +3719,7 @@
"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
+ "dev": true
},
"node_modules/bl": {
"version": "4.1.0",
@@ -3777,8 +3770,7 @@
"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
+ "dev": true
},
"node_modules/browserslist": {
"version": "4.28.0",
@@ -3799,6 +3791,7 @@
"url": "https://github.com/sponsors/ai"
}
],
+ "peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.25",
"caniuse-lite": "^1.0.30001754",
@@ -4797,7 +4790,6 @@
"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"
}
@@ -4939,8 +4931,7 @@
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
- "dev": true,
- "peer": true
+ "dev": true
},
"node_modules/ecc-jsbn": {
"version": "0.1.2",
@@ -4990,6 +4981,7 @@
"resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
"integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
"dev": true,
+ "peer": true,
"dependencies": {
"ansi-colors": "^4.1.1",
"strip-ansi": "^6.0.1"
@@ -5274,6 +5266,7 @@
"integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
"dev": true,
+ "peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.6.1",
@@ -5329,6 +5322,7 @@
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.2.tgz",
"integrity": "sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==",
"dev": true,
+ "peer": true,
"bin": {
"eslint-config-prettier": "bin/cli.js"
},
@@ -5431,6 +5425,7 @@
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
"dev": true,
+ "peer": true,
"dependencies": {
"@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.9",
@@ -5485,6 +5480,7 @@
"resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz",
"integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==",
"dev": true,
+ "peer": true,
"dependencies": {
"eslint-plugin-es": "^3.0.0",
"eslint-utils": "^2.0.0",
@@ -5535,6 +5531,7 @@
"resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.3.1.tgz",
"integrity": "sha512-bY2sGqyptzFBDLh/GMbAxfdJC+b0f23ME63FOE4+Jao0oZ3E1LEwFtWJX/1pGMJLiTtrSSern2CRM/g+dfc0eQ==",
"dev": true,
+ "peer": true,
"engines": {
"node": ">=6"
}
@@ -5558,6 +5555,7 @@
"url": "https://feross.org/support"
}
],
+ "peer": true,
"peerDependencies": {
"eslint": ">=5.0.0"
}
@@ -5926,8 +5924,7 @@
"type": "opencollective",
"url": "https://opencollective.com/fastify"
}
- ],
- "peer": true
+ ]
},
"node_modules/fast-deep-equal": {
"version": "3.1.3",
@@ -6099,7 +6096,6 @@
"resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
"integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
"dev": true,
- "peer": true,
"bin": {
"flat": "cli.js"
}
@@ -6144,7 +6140,6 @@
"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"
@@ -6161,7 +6156,6 @@
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
"dev": true,
- "peer": true,
"engines": {
"node": ">=14"
},
@@ -6697,7 +6691,6 @@
"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"
}
@@ -7620,7 +7613,6 @@
"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"
},
@@ -8987,7 +8979,6 @@
"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"
}
@@ -8997,7 +8988,6 @@
"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",
@@ -9033,15 +9023,13 @@
"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
+ "dev": 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"
}
@@ -9051,7 +9039,6 @@
"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"
@@ -9068,7 +9055,6 @@
"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",
@@ -9089,7 +9075,6 @@
"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"
},
@@ -9102,7 +9087,6 @@
"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"
},
@@ -9118,7 +9102,6 @@
"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"
},
@@ -9134,7 +9117,6 @@
"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"
},
@@ -9150,7 +9132,6 @@
"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"
},
@@ -9166,7 +9147,6 @@
"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"
}
@@ -9871,8 +9851,7 @@
"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
+ "dev": true
},
"node_modules/parent-module": {
"version": "1.0.1",
@@ -9966,7 +9945,6 @@
"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"
@@ -9982,8 +9960,7 @@
"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
+ "dev": true
},
"node_modules/path-to-regexp": {
"version": "1.9.0",
@@ -10097,6 +10074,7 @@
"url": "https://github.com/sponsors/ai"
}
],
+ "peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -10175,6 +10153,7 @@
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
"integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
"dev": true,
+ "peer": true,
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
@@ -10212,6 +10191,7 @@
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.3.tgz",
"integrity": "sha512-QgODejq9K3OzoBbuyobZlUhznP5SKwPqp+6Q6xw6o8gnhr4O85L2U915iM2IDcfF2NPXVaM9zlo9tdwipnYwzg==",
"dev": true,
+ "peer": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
@@ -10431,7 +10411,6 @@
"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"
}
@@ -10921,6 +10900,7 @@
"resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz",
"integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==",
"dev": true,
+ "peer": true,
"dependencies": {
"chokidar": "^4.0.0",
"immutable": "^5.0.2",
@@ -10962,7 +10942,6 @@
"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"
}
@@ -11360,7 +11339,6 @@
"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",
@@ -11444,7 +11422,6 @@
"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"
},
@@ -11518,6 +11495,7 @@
"url": "https://github.com/sponsors/stylelint"
}
],
+ "peer": true,
"dependencies": {
"@csstools/css-parser-algorithms": "^3.0.5",
"@csstools/css-syntax-patches-for-csstree": "^1.0.19",
@@ -11879,6 +11857,25 @@
"integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
"dev": true
},
+ "node_modules/swiper": {
+ "version": "12.0.3",
+ "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.3.tgz",
+ "integrity": "sha512-BHd6U1VPEIksrXlyXjMmRWO0onmdNPaTAFduzqR3pgjvi7KfmUCAm/0cj49u2D7B0zNjMw02TSeXfinC1hDCXg==",
+ "funding": [
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/swiperjs"
+ },
+ {
+ "type": "open_collective",
+ "url": "http://opencollective.com/swiper"
+ }
+ ],
+ "license": "MIT",
+ "engines": {
+ "node": ">= 4.7.0"
+ }
+ },
"node_modules/symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -12058,6 +12055,7 @@
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true,
+ "peer": true,
"engines": {
"node": ">=12"
},
@@ -12353,8 +12351,7 @@
"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
+ "dev": true
},
"node_modules/universalify": {
"version": "2.0.1",
@@ -12576,6 +12573,7 @@
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true,
+ "peer": true,
"engines": {
"node": ">=12"
},
@@ -12933,8 +12931,7 @@
"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
+ "dev": true
},
"node_modules/wrap-ansi": {
"version": "6.2.0",
@@ -12956,7 +12953,6 @@
"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",
@@ -13039,23 +13035,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",
@@ -13088,7 +13067,6 @@
"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",
@@ -13104,7 +13082,6 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
"dev": true,
- "peer": true,
"engines": {
"node": ">=10"
},
@@ -13117,7 +13094,6 @@
"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"
},
@@ -13130,7 +13106,6 @@
"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"
}
diff --git a/package.json b/package.json
index ab5f87b9b..b20393432 100644
--- a/package.json
+++ b/package.json
@@ -55,5 +55,8 @@
"backstop": false,
"cypress": true
}
+ },
+ "dependencies": {
+ "swiper": "^12.0.3"
}
}
diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
deleted file mode 100755
index 8aa07d731..000000000
Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ
diff --git a/src/images/events/picture-1_big.png b/src/images/events/picture-1_big.png
new file mode 100644
index 000000000..231fc33fe
Binary files /dev/null and b/src/images/events/picture-1_big.png differ
diff --git a/src/images/events/picture-1_small.png b/src/images/events/picture-1_small.png
new file mode 100644
index 000000000..9dc455112
Binary files /dev/null and b/src/images/events/picture-1_small.png differ
diff --git a/src/images/events/picture-2_big.png b/src/images/events/picture-2_big.png
new file mode 100644
index 000000000..219f05fab
Binary files /dev/null and b/src/images/events/picture-2_big.png differ
diff --git a/src/images/events/picture-2_small.png b/src/images/events/picture-2_small.png
new file mode 100644
index 000000000..258f35453
Binary files /dev/null and b/src/images/events/picture-2_small.png differ
diff --git a/src/images/events/picture-3_big.png b/src/images/events/picture-3_big.png
new file mode 100644
index 000000000..fd58771cb
Binary files /dev/null and b/src/images/events/picture-3_big.png differ
diff --git a/src/images/events/picture-3_small.png b/src/images/events/picture-3_small.png
new file mode 100644
index 000000000..7d98cb886
Binary files /dev/null and b/src/images/events/picture-3_small.png differ
diff --git a/src/images/favicon_io/about.txt b/src/images/favicon_io/about.txt
new file mode 100644
index 000000000..e367a58d5
--- /dev/null
+++ b/src/images/favicon_io/about.txt
@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Montserrat
+- Font Author: undefined
+- Font Source: https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvC70w-Y3tcoqK5.ttf
+- Font License: undefined)
diff --git a/src/images/favicon_io/android-chrome-192x192.png b/src/images/favicon_io/android-chrome-192x192.png
new file mode 100644
index 000000000..7ef431594
Binary files /dev/null and b/src/images/favicon_io/android-chrome-192x192.png differ
diff --git a/src/images/favicon_io/android-chrome-512x512.png b/src/images/favicon_io/android-chrome-512x512.png
new file mode 100644
index 000000000..ea2dec011
Binary files /dev/null and b/src/images/favicon_io/android-chrome-512x512.png differ
diff --git a/src/images/favicon_io/apple-touch-icon.png b/src/images/favicon_io/apple-touch-icon.png
new file mode 100644
index 000000000..7408c2117
Binary files /dev/null and b/src/images/favicon_io/apple-touch-icon.png differ
diff --git a/src/images/favicon_io/favicon-16x16.png b/src/images/favicon_io/favicon-16x16.png
new file mode 100644
index 000000000..bf876f0be
Binary files /dev/null and b/src/images/favicon_io/favicon-16x16.png differ
diff --git a/src/images/favicon_io/favicon-32x32.png b/src/images/favicon_io/favicon-32x32.png
new file mode 100644
index 000000000..eece89431
Binary files /dev/null and b/src/images/favicon_io/favicon-32x32.png differ
diff --git a/src/images/favicon_io/favicon.ico b/src/images/favicon_io/favicon.ico
new file mode 100644
index 000000000..3a31baadb
Binary files /dev/null and b/src/images/favicon_io/favicon.ico differ
diff --git a/src/images/favicon_io/site.webmanifest b/src/images/favicon_io/site.webmanifest
new file mode 100644
index 000000000..45dc8a206
--- /dev/null
+++ b/src/images/favicon_io/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/src/images/hero-img_desktop.png b/src/images/hero-img_desktop.png
new file mode 100644
index 000000000..87254ac69
Binary files /dev/null and b/src/images/hero-img_desktop.png differ
diff --git a/src/images/hero-img_mobile.png b/src/images/hero-img_mobile.png
new file mode 100644
index 000000000..510ebfb3a
Binary files /dev/null and b/src/images/hero-img_mobile.png differ
diff --git a/src/images/hero-img_tablet.png b/src/images/hero-img_tablet.png
new file mode 100644
index 000000000..e624321c9
Binary files /dev/null and b/src/images/hero-img_tablet.png differ
diff --git a/src/images/icons/icon-arrow_ticket.svg b/src/images/icons/icon-arrow_ticket.svg
new file mode 100644
index 000000000..ad9be9fe3
--- /dev/null
+++ b/src/images/icons/icon-arrow_ticket.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/images/icons/icon-errow-black.svg b/src/images/icons/icon-errow-black.svg
new file mode 100644
index 000000000..4bd4df415
--- /dev/null
+++ b/src/images/icons/icon-errow-black.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/images/icons/icon_arrow-top.svg b/src/images/icons/icon_arrow-top.svg
new file mode 100644
index 000000000..3ac7d7967
--- /dev/null
+++ b/src/images/icons/icon_arrow-top.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/images/logo-NA-MU.svg b/src/images/logo-NA-MU.svg
new file mode 100644
index 000000000..e560af0bd
--- /dev/null
+++ b/src/images/logo-NA-MU.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/images/slides/slide-1_m.png b/src/images/slides/slide-1_m.png
new file mode 100644
index 000000000..4d929a6ce
Binary files /dev/null and b/src/images/slides/slide-1_m.png differ
diff --git a/src/images/slides/slide-1_s.png b/src/images/slides/slide-1_s.png
new file mode 100644
index 000000000..f289f715f
Binary files /dev/null and b/src/images/slides/slide-1_s.png differ
diff --git a/src/images/slides/slide-2_m.png b/src/images/slides/slide-2_m.png
new file mode 100644
index 000000000..d26cd80b9
Binary files /dev/null and b/src/images/slides/slide-2_m.png differ
diff --git a/src/images/slides/slide-2_s.png b/src/images/slides/slide-2_s.png
new file mode 100644
index 000000000..1afdc83cd
Binary files /dev/null and b/src/images/slides/slide-2_s.png differ
diff --git a/src/images/slides/slide-3_m.png b/src/images/slides/slide-3_m.png
new file mode 100644
index 000000000..a07c41031
Binary files /dev/null and b/src/images/slides/slide-3_m.png differ
diff --git a/src/images/slides/slide-3_s.png b/src/images/slides/slide-3_s.png
new file mode 100644
index 000000000..c6ce628ab
Binary files /dev/null and b/src/images/slides/slide-3_s.png differ
diff --git a/src/images/slides/slide-4_m.png b/src/images/slides/slide-4_m.png
new file mode 100644
index 000000000..b20accb7b
Binary files /dev/null and b/src/images/slides/slide-4_m.png differ
diff --git a/src/images/slides/slide-4_s.png b/src/images/slides/slide-4_s.png
new file mode 100644
index 000000000..39f051241
Binary files /dev/null and b/src/images/slides/slide-4_s.png differ
diff --git a/src/images/slides/slide-5_m.png b/src/images/slides/slide-5_m.png
new file mode 100644
index 000000000..519b3dfce
Binary files /dev/null and b/src/images/slides/slide-5_m.png differ
diff --git a/src/images/slides/slide-5_s.png b/src/images/slides/slide-5_s.png
new file mode 100644
index 000000000..dea36b4c9
Binary files /dev/null and b/src/images/slides/slide-5_s.png differ
diff --git a/src/images/subscrip_m.png b/src/images/subscrip_m.png
new file mode 100644
index 000000000..559f0908d
Binary files /dev/null and b/src/images/subscrip_m.png differ
diff --git a/src/images/subscrip_s.png b/src/images/subscrip_s.png
new file mode 100644
index 000000000..559f0908d
Binary files /dev/null and b/src/images/subscrip_s.png differ
diff --git a/src/scripts/main.js b/src/scripts/main.js
index ad9a93a7c..709168f86 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1 +1,62 @@
-'use strict';
+import Swiper from 'swiper/bundle';
+import 'swiper/css/bundle';
+
+const galery = document.querySelector('.galery');
+const slider = galery?.querySelector('.swiper');
+
+let swiperInstance = null;
+
+function iniOrDestroySwiper() {
+ const isDesktop = window.innerWidth >= 1280;
+
+ if (!slider) {
+ return;
+ }
+
+ if (isDesktop && swiperInstance) {
+ swiperInstance.destroy(true, true);
+ swiperInstance = null;
+
+ return;
+ }
+
+ if (!isDesktop && !swiperInstance) {
+ swiperInstance = new Swiper(slider, {
+ slidesPerView: 1,
+ spaceBetween: 20,
+ pagination: {
+ el: galery.querySelector('.swiper-pagination'),
+ clickable: true,
+ },
+ breakpoints: {
+ 640: { slidesPerView: 2},
+ },
+ });
+ }
+}
+iniOrDestroySwiper();
+window.addEventListener('resize', iniOrDestroySwiper);
+
+const burger = document.querySelector('.header-top__burger');
+const menu = document.querySelector('.nav-menu');
+const overlay = document.querySelector('.overlay');
+const body = document.querySelector('.body');
+const navLinks = document.querySelectorAll('.menu__link');
+
+burger.addEventListener('click', () => {
+ burger.classList.toggle('header-top__burger--active');
+ menu.classList.toggle('nav-menu--open');
+ overlay.classList.toggle('overlay--active');
+ body.classList.toggle('body--locked');
+});
+
+function closeMenu() {
+ burger.classList.remove('header-top__burger--active');
+ menu.classList.remove('nav-menu--open');
+ overlay.classList.remove('overlay--active');
+ body.classList.remove('body--locked');
+}
+
+navLinks.forEach((link) => {
+ link.addEventListener('click', closeMenu);
+});
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
deleted file mode 100644
index 45cdd5400..000000000
--- a/src/styles/_fonts.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@font-face {
- font-family: Roboto, Arial, Helvetica, sans-serif;
- src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
- font-weight: normal;
- font-style: normal;
-}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
new file mode 100644
index 000000000..37048d9b3
--- /dev/null
+++ b/src/styles/_reset.scss
@@ -0,0 +1,52 @@
+body {
+ margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+ margin: 0;
+ font-size: inherit;
+ font-weight: inherit;
+}
+
+a {
+ cursor: pointer;
+ display: inline-block;
+ color: inherit;
+ text-decoration: none;
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+span {
+ display: block;
+}
+
+input,
+textarea {
+ resize: none;
+
+ box-sizing: border-box;
+ border: none;
+
+ font-family: inherit;
+
+ background: transparent;
+ outline: none;
+}
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
index 1837eb46e..27b349ed5 100644
--- a/src/styles/_typography.scss
+++ b/src/styles/_typography.scss
@@ -1,3 +1,35 @@
h1 {
- @extend %h1;
+ @extend %h1-title;
+}
+
+h2 {
+ @extend %h2-title;
+
+ @include on-tablet {
+ font-size: 48px;
+ }
+}
+
+h3 {
+ @extend %h3-subtitle;
+
+ @include on-tablet {
+ font-size: 36px;
+ }
+}
+
+p {
+ @extend %ibm-300;
+}
+
+.text-secondary {
+ @extend %ibm-600;
+}
+
+.text-primary {
+ @extend %ibm-400;
+}
+
+.text-primary strong {
+ font-weight: 600;
}
diff --git a/src/styles/blocks/_actual-events.scss b/src/styles/blocks/_actual-events.scss
new file mode 100644
index 000000000..9b2f899f2
--- /dev/null
+++ b/src/styles/blocks/_actual-events.scss
@@ -0,0 +1,119 @@
+.actual-events {
+ & > :first-child {
+ @include content-padding-inline;
+
+ margin-bottom: 40px;
+
+ @include on-tablet {
+ margin-bottom: 48px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 56px;
+ }
+ }
+
+ &__title {
+ color: $color-primary;
+ text-align: center;
+
+ @include on-tablet {
+ text-align: left;
+ }
+ }
+
+ &__cards {
+ & > :not(:last-child) {
+ @include content-padding-inline;
+
+ margin-bottom: 60px;
+
+ @include on-tablet {
+ margin-bottom: 64px;
+ }
+
+ @include on-desktop {
+ display: flex;
+ flex-direction: row;
+ column-gap: 130px;
+ margin-bottom: 104px;
+ }
+ }
+ }
+
+ .actual-events__card--lecture {
+ position: relative;
+ padding-inline: 0;
+
+ @include on-tablet {
+ @include content-padding-inline;
+ }
+
+ @include on-desktop {
+ max-width: none;
+ padding-inline: 0;
+ }
+
+ & > :first-child {
+ margin-bottom: 0;
+ }
+
+ & > :last-child {
+ margin-inline: auto;
+ }
+
+ .card__lecture {
+ transform: translateY(-50%);
+
+ box-sizing: border-box;
+ width: 280px;
+ height: fit-content;
+ padding-block: 20px;
+
+ background-color: #fff;
+ box-shadow: 0 2px 0 0 #1a5a4c40;
+
+ @include on-tablet {
+ width: 470px;
+ padding-block: 45px;
+ padding-inline: 55px;
+ }
+
+ @include on-desktop {
+ width: 570px;
+ padding-inline: 100px;
+ }
+
+ & > :first-child {
+ margin-bottom: 24px;
+
+ @include on-tablet {
+ margin-bottom: 16px;
+ }
+ }
+ }
+
+ .card__event-wrapper {
+ column-gap: 20px;
+ padding-inline: 20px;
+
+ @include on-tablet {
+ column-gap: 150px;
+ padding-inline: 0;
+ }
+
+ @include on-desktop {
+ column-gap: 120px;
+ }
+ }
+
+ .card__subtitle {
+ padding-inline: 0;
+ text-align: center;
+
+ @include on-tablet {
+ text-align: left;
+ }
+ }
+ }
+}
diff --git a/src/styles/blocks/_art-museum.scss b/src/styles/blocks/_art-museum.scss
new file mode 100644
index 000000000..326a1252a
--- /dev/null
+++ b/src/styles/blocks/_art-museum.scss
@@ -0,0 +1,91 @@
+.art-museum {
+ @include on-tablet {
+ // @include grid-layout-g;
+
+ grid-column: 1 / 4;
+ }
+
+ @include on-desktop {
+ @include grid-layout-g;
+
+ grid-column: 1 / -1;
+ }
+
+ @include on-desktop {
+ row-gap: 0;
+ }
+
+ &__title {
+ max-width: 12ch;
+ margin-bottom: 20px;
+ margin-inline: auto;
+
+ text-align: center;
+ text-transform: uppercase;
+
+ @include on-tablet {
+ grid-column: span 3;
+
+ max-width: 12ch;
+ margin-bottom: 38px;
+ margin-inline: 0;
+
+ font-size: 48px;
+ line-height: 120%;
+ text-align: left;
+ }
+
+ @include on-desktop {
+ grid-column: 1 / 6;
+ margin-bottom: 89px;
+ font-size: 72px;
+ }
+ }
+
+ &__btn {
+ display: flex;
+ box-sizing: border-box;
+ border: 1px solid $color-green;
+
+ @include on-tablet {
+ width: 270px;
+ }
+
+ @include on-desktop {
+ grid-column: 3 / 6;
+ }
+
+ @include hover(transform, scale($scale)) {
+ box-shadow: 0 4px 15px rgba(26, 90, 86, 0.4);
+ }
+
+ &:active {
+ transform: scale(1);
+ }
+ }
+
+ &__text {
+ display: grid;
+ place-items: center;
+ width: 100%;
+ }
+
+ &__arrow {
+ display: grid;
+ flex-shrink: 0;
+ place-items: center;
+
+ width: 50px;
+ height: 50px;
+
+ background-color: $color-green;
+ background-image: url(/src/images/icons/icon-arrow_ticket.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+
+ @include on-tablet {
+ width: 70px;
+ height: 70px;
+ }
+ }
+}
diff --git a/src/styles/blocks/_card.scss b/src/styles/blocks/_card.scss
new file mode 100644
index 000000000..8b440bea0
--- /dev/null
+++ b/src/styles/blocks/_card.scss
@@ -0,0 +1,83 @@
+.card {
+ &__img-link {
+ width: 100%;
+ height: 100%;
+
+ @include hover(transform, scale($scale-bilds)) {
+ box-shadow: 0 4px 15px 0 #09423440;
+ }
+ }
+
+ &__img {
+ width: 100%;
+ height: 100%;
+ }
+
+ &__event-wrapper {
+ display: flex;
+ column-gap: 55px;
+ align-items: center;
+ width: fit-content;
+ }
+
+ &__event-name {
+ @extend %ibm-500;
+
+ color: $color-grey;
+ }
+
+ &__event-date {
+ @extend %ibm-700;
+
+ color: $color-green;
+
+ @include hover(transform, scale($scale));
+ }
+
+ &__subtitle-wrapper {
+ display: flex;
+ column-gap: 15px;
+ align-items: center;
+ }
+
+ &__subtitle {
+ color: $color-primary;
+ }
+
+ &__subtitle-deko {
+ width: 10px;
+ height: 10px;
+ background-color: $color-sq-deko;
+ }
+
+ &__img-background {
+
+ @include on-desktop {
+ height: 560px;
+ }
+ }
+
+ &__row {
+ max-width: 460px;
+
+ & > .card__event-wrapper {
+ margin-bottom: 15px;
+
+ @include on-tablet {
+ margin-bottom: 30px;
+ }
+ }
+
+ & > .card__subtitle-wrapper {
+ margin-bottom: 10px;
+
+ @include on-tablet {
+ margin-bottom: 15px;
+ }
+ }
+ }
+
+ & > *.card__img-link {
+ margin-bottom: 20px;
+ }
+}
diff --git a/src/styles/blocks/_deko-line.scss b/src/styles/blocks/_deko-line.scss
new file mode 100644
index 000000000..8c5241771
--- /dev/null
+++ b/src/styles/blocks/_deko-line.scss
@@ -0,0 +1,28 @@
+.deko-line {
+ display: block;
+ width: 100%;
+ height: 1px;
+ background-color: $color-text-header-nav;
+
+ @include on-tablet {
+ flex-shrink: 0;
+ width: 1px;
+ height: auto;
+ }
+
+ &--footer {
+ background-color: rgba(26, 90, 76, 0.5);
+
+ @include on-tablet {
+ width: 100%;
+ max-width: 460px;
+ height: 1px;
+ }
+
+ @include on-desktop {
+ flex-shrink: 0;
+ width: 1px;
+ height: auto;
+ }
+ }
+}
diff --git a/src/styles/blocks/_events.scss b/src/styles/blocks/_events.scss
new file mode 100644
index 000000000..8b1a39374
--- /dev/null
+++ b/src/styles/blocks/_events.scss
@@ -0,0 +1 @@
+// empty
diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss
new file mode 100644
index 000000000..7ed38ba6f
--- /dev/null
+++ b/src/styles/blocks/_footer.scss
@@ -0,0 +1,207 @@
+.footer {
+ @include content-padding-inline;
+
+ padding-block: 32px 56px;
+
+ @include on-tablet {
+ padding-block: 51px 35px;
+ }
+
+ @include on-desktop {
+ padding-block: 41px 35px;
+ }
+
+ &__wrapper {
+ @include on-tablet {
+ display: flex;
+ flex-direction: row;
+ column-gap: 40px;
+ }
+
+ @include on-desktop {
+ column-gap: 130px;
+ }
+ }
+
+ &__top {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 40px;
+
+ @include on-tablet {
+ flex-direction: column;
+ row-gap: 62px;
+ justify-content: start;
+ height: fit-content;
+ margin-bottom: 0;
+ }
+
+ @include on-desktop {
+ align-items: center;
+ }
+ }
+
+ &__inner {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 80px;
+
+ @include on-tablet {
+ column-gap: 40px;
+ margin-bottom: 120px;
+ }
+
+ @include on-desktop {
+ flex-direction: row;
+ column-gap: 65px;
+ margin-bottom: 87px;
+ }
+ }
+
+ &__inner-wrapper {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ column-gap: 20px;
+
+ @include on-desktop {
+ column-gap: 31px;
+ }
+ }
+
+ &__contacts {
+ > a {
+ display: block;
+ }
+ }
+
+ &__contacts-title {
+ margin-bottom: 20px;
+ line-height: 141%;
+ }
+
+ &__contacts-adress {
+ @include hover(transform, scale($scale-bilds));
+ }
+
+ &__contacts-tel {
+ @include hover(transform, scale($scale-bilds));
+ }
+ &__contacts-fax {
+ @include hover(transform, scale($scale-bilds));
+ }
+ &__contacts-email {
+ @include hover(transform, scale($scale-bilds));
+ }
+
+ &__social {
+ display: flex;
+ column-gap: 20px;
+
+ @include on-tablet {
+ column-gap: 32px;
+ }
+
+ @include on-desktop {
+ column-gap: 20px;
+ }
+ }
+
+ &__social-link {
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+
+ @include hover(transform, scale($scale));
+ }
+
+ &__social-icon {
+ width: 100%;
+ height: 100%;
+ color: black;
+
+ @include hover(color, $color-green);
+ }
+
+ &__schedule {
+ @include on-tablet {
+ width: 220px;
+ }
+
+ @include on-desktop {
+ width: 170px;
+ }
+ }
+
+ &__arrow-top {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ transform: translateY(100%);
+
+ box-sizing: border-box;
+ width: 50px;
+ height: 50px;
+ border: 1px solid $color-green;
+ border-radius: 50%;
+
+ @include on-tablet {
+ display: none;
+ }
+ }
+
+ &__arrow {
+ width: 100%;
+ height: 100%;
+
+ background-image: url(/src/images/icons/icon_arrow-top.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ &__deko-line {
+ margin-block: 70px 40px;
+
+ @include on-tablet {
+ margin-block: 64px;
+ }
+
+ @include on-desktop {
+ margin-block: 0;
+ }
+ }
+
+ &__bottom {
+ display: flex;
+ flex-direction: column;
+ row-gap: 10px;
+
+ @include on-tablet {
+ flex-direction: row;
+ row-gap: 0;
+ align-items: center;
+ justify-content: space-between;
+ }
+ }
+
+ &__designer {
+ @extend %ibm-300;
+
+ font-size: 12px;
+ line-height: 141%;
+ color: $color-primary;
+ text-align: center;
+ }
+
+ &__copyright {
+ @extend %ibm-300;
+
+ font-size: 12px;
+ line-height: 141%;
+ color: $color-primary;
+ text-align: center;
+ }
+}
diff --git a/src/styles/blocks/_galery.scss b/src/styles/blocks/_galery.scss
new file mode 100644
index 000000000..3cb16757f
--- /dev/null
+++ b/src/styles/blocks/_galery.scss
@@ -0,0 +1,97 @@
+.galery {
+ @include content-padding-inline;
+
+ .galery__title {
+ margin-bottom: 40px;
+
+ @include on-tablet {
+ margin-bottom: 48px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 56px;
+ }
+ }
+
+ .swiper {
+ --swiper-pagination-bullet-horizontal-gap: 0;
+
+ overflow: visible;
+ }
+
+ .swiper-wrapper {
+ @include on-desktop {
+ @include grid-layout-g;
+ }
+ }
+ .swiper-slide {
+ height: 410px;
+
+ @include on-tablet {
+ height: 543px;
+ }
+
+ @include on-desktop {
+ @include hover(transform, scale(0.97)) {
+ box-shadow: 0 4px 15px rgba(26, 90, 86, 0.4);
+ }
+ }
+
+ &--one {
+ @include on-desktop {
+ grid-column: span 4;
+ height: 600px;
+ }
+ }
+
+ &--two {
+ @include on-desktop {
+ grid-column: 5 / -1;
+ height: 600px;
+ }
+ }
+ &--three {
+ @include on-desktop {
+ grid-column: span 8;
+ height: 360px;
+ }
+ }
+ &--four {
+ @include on-desktop {
+ grid-column: 9 / -1;
+ height: 360px;
+ }
+ }
+ }
+
+ .swiper-pagination {
+ position: static;
+ margin-top: 20px;
+
+ @include on-tablet {
+ margin-top: 32px;
+ }
+
+ @include on-desktop {
+ display: none;
+ }
+
+ .swiper-pagination-bullet:not(:last-child) {
+ margin-right: 22px;
+ }
+ }
+
+ .swiper-pagination-bullet-active {
+ background-color: $color-green;
+ }
+
+ &__img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ &__viewport {
+ overflow: hidden;
+ }
+}
diff --git a/src/styles/blocks/_header-top.scss b/src/styles/blocks/_header-top.scss
new file mode 100644
index 000000000..b26285721
--- /dev/null
+++ b/src/styles/blocks/_header-top.scss
@@ -0,0 +1,107 @@
+.header-top {
+ & > *:first-child {
+ margin-top: 27px;
+
+ @include on-tablet {
+ margin-top: 39px;
+ }
+ }
+
+ & > *:last-child {
+ margin-top: 9px;
+
+ @include on-tablet {
+ margin-top: 15px;
+ }
+ }
+
+ &__burger {
+ cursor: pointer;
+
+ position: relative;
+ z-index: 30;
+
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ border: none;
+
+ background-color: transparent;
+
+ @include hover(transform, scale($scale));
+ }
+
+ &__burger-line {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+
+ width: 100%;
+ height: 3px;
+ border-radius: 2px;
+
+ background-color: $color-primary;
+
+ &::before {
+ content: '';
+
+ position: absolute;
+ top: -7.5px;
+ left: 0;
+
+ width: 100%;
+ height: 3px;
+ border-radius: 2px;
+
+ background-color: $color-primary;
+ }
+
+ &::after {
+ content: '';
+
+ position: absolute;
+ top: 8px;
+ left: 0;
+
+ width: 100%;
+ height: 3px;
+ border-radius: 2px;
+
+ background-color: $color-primary;
+ }
+ }
+
+ .header-top__burger--active {
+ .header-top__burger-line {
+ background-color: transparent;
+
+ &::before {
+ top: 50%;
+ transform: translateY(0) rotate(45deg);
+ background-color: $color-text-header-nav;
+ }
+
+ &::after {
+ top: 50%;
+ transform: translateY(0) rotate(-45deg);
+ background-color: $color-text-header-nav;
+ }
+ }
+ }
+
+ &__logo {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+
+ @include on-tablet {
+ left: calc(50% + 17.5%);
+ }
+
+ @include on-desktop {
+ left: 50%;
+ }
+ }
+}
diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss
new file mode 100644
index 000000000..e1ece873f
--- /dev/null
+++ b/src/styles/blocks/_header.scss
@@ -0,0 +1,89 @@
+.header {
+ @include content-padding-inline;
+
+ position: relative;
+
+
+ .header-top {
+ margin-bottom: 269px;
+
+ @include on-tablet {
+ margin-bottom: 64px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 143px;
+ }
+ }
+
+ .header-bottom {
+ @include on-tablet {
+ @include grid-layout-g;
+ }
+ }
+
+ .hero-img {
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ max-width: 100%;
+ height: 300px;
+
+ @include on-tablet {
+ left: calc(50% + 15px);
+ height: 100%;
+ }
+
+ @include on-desktop {
+ left: calc(50% - 85px);
+ height: 100%;
+ }
+
+ &__img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .nav-menu {
+ position: absolute;
+ }
+
+ &__deko {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+
+ width: fit-content;
+
+ opacity: 0;
+
+ @include on-desktop {
+ position: absolute;
+ bottom: 55px;
+ left: 0;
+ transform: rotate(-90deg);
+
+ opacity: 1;
+ }
+ }
+
+ &__deko-line {
+ width: 70px;
+ height: 1px;
+ background-color: $color-green;
+ }
+
+ &__deko-events {
+ text-align: center;
+ }
+
+ @include on-desktop {
+ min-height: 655px;
+ }
+}
diff --git a/src/styles/blocks/_logo.scss b/src/styles/blocks/_logo.scss
new file mode 100644
index 000000000..04fffa05c
--- /dev/null
+++ b/src/styles/blocks/_logo.scss
@@ -0,0 +1,15 @@
+.logo {
+ width: 55px;
+ height: 61px;
+
+ &__link {
+ width: 100%;
+ height: 100%;
+
+ @include hover(transform, scale($scale));
+ }
+
+ &__img {
+ width: 100%;
+ }
+}
diff --git a/src/styles/blocks/_main-layout.scss b/src/styles/blocks/_main-layout.scss
new file mode 100644
index 000000000..efa0ece2d
--- /dev/null
+++ b/src/styles/blocks/_main-layout.scss
@@ -0,0 +1,25 @@
+.main-layout {
+ .actual-events {
+ margin-bottom: 183px;
+
+ @include on-tablet {
+ margin-bottom: 208px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 302px;
+ }
+ }
+
+ .galery {
+ margin-bottom: 100px;
+
+ @include on-tablet {
+ margin-bottom: 92px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 200px;
+ }
+ }
+}
diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss
new file mode 100644
index 000000000..2eb7f685e
--- /dev/null
+++ b/src/styles/blocks/_menu.scss
@@ -0,0 +1,41 @@
+.menu {
+ padding-inline: 52px 10px;
+
+ @include on-desktop {
+ padding-inline: 102px;
+ }
+
+ &__list {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(100px, 1fr));
+ gap: 24px 22px;
+ }
+
+ &__link {
+ @extend %ibm-500;
+
+ color: $color-text-header-nav;
+
+ @include on-desktop {
+ font-size: 22px;
+ }
+
+ @include hover(transform, scale($scale));
+ }
+
+ &--footer {
+ padding: 0;
+
+ .menu__link {
+ @extend %ibm-400;
+
+ line-height: 100%;
+ color: $color-primary;
+ }
+
+ .menu__list {
+ grid-template-columns: repeat(2, minmax(100px, 360px));
+ gap: 20px 35px;
+ }
+ }
+}
diff --git a/src/styles/blocks/_nav-menu.scss b/src/styles/blocks/_nav-menu.scss
new file mode 100644
index 000000000..622d36683
--- /dev/null
+++ b/src/styles/blocks/_nav-menu.scss
@@ -0,0 +1,37 @@
+.nav-menu {
+ @include content-padding-inline;
+
+ position: fixed;
+ z-index: 20;
+ top: -100%;
+ left: 0;
+
+ display: flex;
+ flex-direction: column;
+ row-gap: 24px;
+ justify-content: center;
+
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 100%;
+ height: fit-content;
+ padding-block: 27px;
+
+ background-color: $color-green;
+
+ transition: $transition;
+
+ @include on-tablet {
+ flex-direction: row;
+ padding-block: 40px;
+ }
+
+ @include on-desktop {
+ padding-bottom: 48px;
+ }
+
+ &--open {
+ top: 0;
+ color: $color-text-header-nav;
+ }
+}
diff --git a/src/styles/blocks/_page.scss b/src/styles/blocks/_page.scss
new file mode 100644
index 000000000..ca1959120
--- /dev/null
+++ b/src/styles/blocks/_page.scss
@@ -0,0 +1,48 @@
+html {
+ scroll-behavior: smooth;
+ position: relative;
+}
+
+.body {
+ overflow-x: hidden;
+
+ > .header {
+ margin-bottom: 70px;
+
+ @include on-tablet {
+ margin-bottom: 107px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 318px;
+ }
+ }
+
+ > .overlay {
+ pointer-events: none;
+
+ position: fixed;
+ z-index: 10;
+ inset: 0;
+
+ opacity: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ }
+
+ > .main-layout {
+ margin-bottom: 18px;
+
+ @include on-tablet {
+ margin-bottom: 0;
+ }
+ }
+
+ > .overlay--active {
+ pointer-events: auto;
+ opacity: 1;
+ }
+
+ &--locked {
+ overflow: hidden;
+ }
+}
diff --git a/src/styles/blocks/_schedule.scss b/src/styles/blocks/_schedule.scss
new file mode 100644
index 000000000..08032b07b
--- /dev/null
+++ b/src/styles/blocks/_schedule.scss
@@ -0,0 +1,84 @@
+.schedule {
+ @include on-tablet {
+ display: flex;
+ flex-direction: row;
+ column-gap: 20px;
+ align-items: flex-end;
+ }
+
+ @include on-desktop {
+ column-gap: 35px;
+ padding-left: 102px;
+ }
+
+ &__title {
+ line-height: 141%;
+ }
+
+ &__inner {
+ height: 100%;
+
+ @include on-tablet {
+ padding-left: 20px;
+ }
+
+ & > .schedule__title {
+ margin-bottom: 20px;
+ }
+ }
+
+ &__closing {
+ @include on-desktop {
+ max-width: 170px;
+ }
+
+ &--footer {
+ width: 130px;
+
+ @include on-tablet {
+ width: 100%;
+ }
+ }
+ }
+
+ &__works {
+ display: flex;
+ column-gap: 5px;
+
+ &--column {
+ flex-direction: column;
+
+ @include on-tablet {
+ flex-direction: row;
+ column-gap: 5px;
+ }
+ }
+ }
+
+ &__hours {
+ white-space: nowrap;
+ }
+
+ & > .schedule__inner {
+ margin-bottom: 14px;
+
+ @include on-tablet {
+ margin-bottom: 0;
+ }
+ }
+
+ &--footer {
+ padding-left: 0;
+
+ > .schedule__inner {
+ height: auto;
+ padding-left: 0;
+ }
+
+ @include on-tablet {
+ flex-direction: column;
+ row-gap: 20px;
+ align-items: start;
+ }
+ }
+}
diff --git a/src/styles/blocks/_subscription.scss b/src/styles/blocks/_subscription.scss
new file mode 100644
index 000000000..b506eb4a0
--- /dev/null
+++ b/src/styles/blocks/_subscription.scss
@@ -0,0 +1,132 @@
+.subscription {
+ position: relative;
+ margin-inline: auto;
+
+ &__title {
+ margin-bottom: 20px;
+ color: $color-text-header-nav;
+ text-align: center;
+
+ @include on-tablet {
+ margin-bottom: 16px;
+ }
+ }
+
+ &__wrapper {
+ @include content-padding-inline;
+
+ max-width: 570px;
+ padding-block: 88px;
+
+ @include on-tablet {
+ padding: 82px 154px;
+ }
+
+ @include on-desktop {
+ padding: 163px 355px;
+ }
+ }
+
+ &__text {
+ margin-bottom: 50px;
+ font-size: 18px;
+ color: $color-text-header-nav;
+ text-align: center;
+
+ @include on-tablet {
+ margin-bottom: 64px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 72px;
+ }
+ }
+
+ &__form {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: space-between;
+ margin-inline: auto;
+
+ @include on-tablet {
+ column-gap: 16px;
+ }
+
+ @include on-desktop {
+ column-gap: 30px;
+ }
+ }
+
+ &__input {
+ flex: 1 1 auto;
+
+ box-sizing: border-box;
+ height: 50px;
+ padding-left: 24px;
+ padding-block: 18px;
+
+ background-color: $color-text-header-nav;
+
+ &::placeholder {
+ @extend %h3-subtitle;
+
+ font-size: 14px;
+ color: $color-grey;
+ }
+
+ @include on-tablet {
+ height: 70px;
+ padding-block: 28px;
+ }
+
+ @include on-desktop {
+ padding-left: 24px;
+ }
+ }
+
+ &__btn {
+ cursor: pointer;
+
+ flex-shrink: 0;
+
+ width: 50px;
+ height: 50px;
+ padding: 0;
+ border: none;
+
+ background-color: $color-sq-deko;
+ background-image: url(/src/images/icons/icon-errow-black.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+
+ transition: transform $transition;
+
+ @include on-tablet {
+ width: 70px;
+ height: 70px;
+ }
+
+ @include hover(transform, scale($scale));
+
+ &:active {
+ transform: scale(1);
+ }
+ }
+
+ &__background {
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 100%;
+ }
+
+ &__background-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index fb9195d12..8e92f7969 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,7 +1,18 @@
-@import 'utils';
-@import 'fonts';
-@import 'typography';
-
-body {
- background: $c-gray;
-}
+@import './reset';
+@import './utils';
+@import './typography';
+@import './blocks/page';
+@import './blocks/header';
+@import './blocks/header-top';
+@import './blocks/logo';
+@import './blocks/art-museum';
+@import './blocks/nav-menu';
+@import './blocks/deko-line';
+@import './blocks/menu';
+@import './blocks/schedule';
+@import './blocks/main-layout';
+@import './blocks/actual-events';
+@import './blocks/card';
+@import './blocks/galery';
+@import './blocks/subscription';
+@import './blocks/footer';
diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss
index d7201e7b3..1badd2a6d 100644
--- a/src/styles/utils/_extends.scss
+++ b/src/styles/utils/_extends.scss
@@ -1,4 +1,54 @@
-%h1 {
- font-family: Roboto, sans-serif;
+%h1-title {
+ font-family: Montserrat, sans-serif;
+ font-size: 36px;
+ font-weight: 700;
+ line-height: 100%;
+}
+
+%h2-title {
+ font-family: Montserrat, sans-serif;
+ font-size: 36px;
+ font-weight: 700;
+ line-height: 100%;
+}
+%h3-subtitle {
+ font-family: Montserrat, sans-serif;
+ font-size: 26px;
+ font-weight: 400;
+ line-height: 100%;
+}
+
+%ibm-700 {
+ font-family: 'IBM Plex Sans', sans-serif;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 150%;
+}
+
+%ibm-600 {
+ font-family: 'IBM Plex Sans', sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 150%;
+}
+
+%ibm-500 {
+ font-family: 'IBM Plex Sans', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 100%;
+}
+
+%ibm-400 {
+ font-family: 'IBM Plex Sans', sans-serif;
+ font-size: 14px;
font-weight: 400;
+ line-height: 150%;
+}
+
+%ibm-300 {
+ font-family: 'IBM Plex Sans', sans-serif;
+ font-size: 16px;
+ font-weight: 300;
+ line-height: 150%;
}
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
index 80c79780d..14c7c2423 100644
--- a/src/styles/utils/_mixins.scss
+++ b/src/styles/utils/_mixins.scss
@@ -1,6 +1,54 @@
@mixin hover($_property, $_toValue) {
- transition: #{$_property} 0.3s;
+ transition: #{$_property} $transform;
&:hover {
#{$_property}: $_toValue;
+ @content;
+ }
+}
+
+// break points
+@mixin on-tablet {
+ @media (min-width: $tablet-size) {
+ @content;
+ }
+}
+
+@mixin on-desktop {
+ @media (min-width: $desktop-size) {
+ @content;
+ }
+}
+
+// page padding inline
+@mixin content-padding-inline {
+ max-width: 1170px;
+ margin-inline: auto;
+ padding-inline: 20px;
+
+ @include on-tablet {
+ padding-inline: 25px;
+ }
+
+ @include on-desktop {
+ padding-inline: 55px;
+ }
+}
+
+// grid-layout
+@mixin grid-layout-g {
+ --colomns: 2;
+
+ display: grid;
+ grid-template-columns: repeat(var(--colomns), 1fr);
+ column-gap: 20px;
+
+ @include on-tablet {
+ --colomns: 6;
+
+ gap: 30px;
+ }
+
+ @include on-desktop {
+ --colomns: 12;
}
}
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
index aeb006ffb..362014334 100644
--- a/src/styles/utils/_vars.scss
+++ b/src/styles/utils/_vars.scss
@@ -1 +1,17 @@
-$c-gray: #eee;
+// color
+$color-primary: #0f0e08;
+$color-green: #1a5a4c;
+$color-grey: #687480;
+$color-text: #4e4e4e;
+$color-text-header-nav: #fff;
+$color-sq-deko: #f14a27;
+
+// break points
+$tablet-size: 640px;
+$desktop-size: 1280px;
+
+// animations
+$transition: 0.3s ease;
+$transform: 0.3s;
+$scale: 1.08;
+$scale-bilds: 1.02;