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 a95e97afe..a42fbd0ff 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,9 @@ # Kickstarter landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** + +Implement landing page according to [Figma design]() - Use BEM and SCSS -Implement landing page according to [Figma design](https://www.figma.com/file/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) - Use BEM and SCSS - The design 1440px - Desktop 1280px - Tablet 640px @@ -18,7 +19,6 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 1. Implement `Questions` block 1. Implement the footer. - ## Github flow 1. **Fork** the repo. @@ -34,7 +34,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 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/Kickstarter/) + [DEMO LINK](https://yana-longstocking.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/package-lock.json b/package-lock.json index 7ff3575da..b2fa9bec1 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", "@parcel/transformer-sass": "^2.15.4", "cypress": "^13.13.0", @@ -1525,6 +1525,76 @@ "darwin" ] }, + "node_modules/@lmdb/lmdb-darwin-x64": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-2.8.5.tgz", + "integrity": "sha512-w/sLhN4T7MW1nB3R/U8WK5BgQLz904wh+/SmA2jD8NnF7BLLoUgflCNxOeSPOWp8geP6nP/+VjWzZVip7rZ1ug==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@lmdb/lmdb-linux-arm": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-2.8.5.tgz", + "integrity": "sha512-c0TGMbm2M55pwTDIfkDLB6BpIsgxV4PjYck2HiOX+cy/JWiBXz32lYbarPqejKs9Flm7YVAKSILUducU9g2RVg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@lmdb/lmdb-linux-arm64": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-2.8.5.tgz", + "integrity": "sha512-vtbZRHH5UDlL01TT5jB576Zox3+hdyogvpcbvVJlmU5PdL3c5V7cj1EODdh1CHPksRl+cws/58ugEHi8bcj4Ww==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@lmdb/lmdb-linux-x64": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-2.8.5.tgz", + "integrity": "sha512-Xkc8IUx9aEhP0zvgeKy7IQ3ReX2N8N1L0WPcQwnZweWmOuKfwpS3GRIYqLtK5za/w3E60zhFfNdS+3pBZPytqQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@lmdb/lmdb-win32-x64": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-2.8.5.tgz", + "integrity": "sha512-4wvrf5BgnR8RpogHhtpCPJMKBmvyZPhhUtEwMJbXh0ni2BucpfF07jlmyM11zRqQ2XIq6PbC2j7W7UCCcm1rRQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@mate-academy/eslint-config": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@mate-academy/eslint-config/-/eslint-config-0.0.29.tgz", @@ -1560,10 +1630,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.1.tgz", - "integrity": "sha512-Tf97p/jZ/ZRsQSPGcZf2FpvxgUCl8DiUOsiDFHj7HBN8gMK0iZOBQEtyqcFsauVUAvPP8Ayo8cAiC12MMp45iQ==", + "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", @@ -2142,6 +2213,76 @@ "darwin" ] }, + "node_modules/@msgpackr-extract/msgpackr-extract-darwin-x64": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.3.tgz", + "integrity": "sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@msgpackr-extract/msgpackr-extract-linux-arm": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.3.tgz", + "integrity": "sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@msgpackr-extract/msgpackr-extract-linux-arm64": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.3.tgz", + "integrity": "sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@msgpackr-extract/msgpackr-extract-linux-x64": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.3.tgz", + "integrity": "sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@msgpackr-extract/msgpackr-extract-win32-x64": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.3.tgz", + "integrity": "sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -3997,6 +4138,27 @@ "@parcel/watcher-win32-x64": "2.4.1" } }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz", + "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/@parcel/watcher-darwin-arm64": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz", @@ -4017,6 +4179,216 @@ "url": "https://opencollective.com/parcel" } }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz", + "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz", + "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz", + "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz", + "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz", + "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz", + "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz", + "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz", + "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz", + "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz", + "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/@parcel/workers": { "version": "2.15.4", "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.15.4.tgz", @@ -4085,90 +4457,243 @@ "type-detect": "4.0.8" } }, - "node_modules/@sinonjs/fake-timers": { - "version": "10.3.0", - "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz", - "integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==", + "node_modules/@sinonjs/fake-timers": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz", + "integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==", + "dev": true, + "dependencies": { + "@sinonjs/commons": "^3.0.0" + } + }, + "node_modules/@sinonjs/samsam": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-5.3.1.tgz", + "integrity": "sha512-1Hc0b1TtyfBu8ixF/tpfSHTVWKwCBLY4QJbkgnE7HcwyvT2xArDxb4K7dMgqRm3szI+LJbzmW/s4xxEhv6hwDg==", + "dev": true, + "dependencies": { + "@sinonjs/commons": "^1.6.0", + "lodash.get": "^4.4.2", + "type-detect": "^4.0.8" + } + }, + "node_modules/@sinonjs/samsam/node_modules/@sinonjs/commons": { + "version": "1.8.6", + "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz", + "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==", + "dev": true, + "dependencies": { + "type-detect": "4.0.8" + } + }, + "node_modules/@sinonjs/text-encoding": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz", + "integrity": "sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==", + "dev": true + }, + "node_modules/@swc/core": { + "version": "1.12.6", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.12.6.tgz", + "integrity": "sha512-TEpta6Gi02X1b2yDIzBOIr7dFprvq9jD8RbEVI2OcMrwklbCUx0Dz9TrAnklSOwRvYvH5JjCx8ht9E94oWiG7A==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@swc/counter": "^0.1.3", + "@swc/types": "^0.1.23" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/swc" + }, + "optionalDependencies": { + "@swc/core-darwin-arm64": "1.12.6", + "@swc/core-darwin-x64": "1.12.6", + "@swc/core-linux-arm-gnueabihf": "1.12.6", + "@swc/core-linux-arm64-gnu": "1.12.6", + "@swc/core-linux-arm64-musl": "1.12.6", + "@swc/core-linux-x64-gnu": "1.12.6", + "@swc/core-linux-x64-musl": "1.12.6", + "@swc/core-win32-arm64-msvc": "1.12.6", + "@swc/core-win32-ia32-msvc": "1.12.6", + "@swc/core-win32-x64-msvc": "1.12.6" + }, + "peerDependencies": { + "@swc/helpers": ">=0.5.17" + }, + "peerDependenciesMeta": { + "@swc/helpers": { + "optional": true + } + } + }, + "node_modules/@swc/core-darwin-arm64": { + "version": "1.12.6", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.12.6.tgz", + "integrity": "sha512-yLiw+XzG+MilfFh0ON7qt67bfIr7UxB9JprhYReVOmLTBDmDVQSC3T4/vIuc+GwlX08ydnHy0ud4lIjTNW4uWg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-darwin-x64": { + "version": "1.12.6", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.12.6.tgz", + "integrity": "sha512-qwg8ux5x5Gd1LmSUtL4s9mbyfzAjr5M6OtjO281dKHwc/GYiSc4j1urb2jNSo9FcMkfT78oAOW2L6HQiWv+j1A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm-gnueabihf": { + "version": "1.12.6", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.12.6.tgz", + "integrity": "sha512-pnkqH59JXBZu+MedaykMAC2or7tlUKeya7GKjzub+hkwxBP0ywWoFd+QYEdzp7QSziOt1VIHc4Wb9iZ2EfnzmA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-gnu": { + "version": "1.12.6", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.12.6.tgz", + "integrity": "sha512-h8+Ltx0NSEzIFHetkOYoQ+UQ59unYLuJ4wF6kCpxzS4HskRLjcngr1HgN0F/PRpptnrmJUPVQmfms/vjN8ndAQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-musl": { + "version": "1.12.6", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.12.6.tgz", + "integrity": "sha512-GZu3MnB/5qtBxKEH46hgVDaplEe4mp3ZmQ1O2UpFCv/u/Ji3Gar5w5g2wHCZoT5AOouAhP1bh7IAEqjG/fbVfg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-gnu": { + "version": "1.12.6", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.12.6.tgz", + "integrity": "sha512-WwJLQFzMW9ufVjM6k3le4HUgBFNunyt2oghjcgn2YjnKj0Ka2LrrBHCxfS7lgFSCQh/shib2wIlKXUnlTEWQJw==", + "cpu": [ + "x64" + ], "dev": true, - "dependencies": { - "@sinonjs/commons": "^3.0.0" + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" } }, - "node_modules/@sinonjs/samsam": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-5.3.1.tgz", - "integrity": "sha512-1Hc0b1TtyfBu8ixF/tpfSHTVWKwCBLY4QJbkgnE7HcwyvT2xArDxb4K7dMgqRm3szI+LJbzmW/s4xxEhv6hwDg==", + "node_modules/@swc/core-linux-x64-musl": { + "version": "1.12.6", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.12.6.tgz", + "integrity": "sha512-rVGPNpI/sm8VVAhnB09Z/23OJP3ymouv6F4z4aYDbq/2JIwxqgpnl8gtMYP+Jw3XqabaFNjQmPiL15TvKCQaxQ==", + "cpu": [ + "x64" + ], "dev": true, - "dependencies": { - "@sinonjs/commons": "^1.6.0", - "lodash.get": "^4.4.2", - "type-detect": "^4.0.8" + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" } }, - "node_modules/@sinonjs/samsam/node_modules/@sinonjs/commons": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz", - "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==", + "node_modules/@swc/core-win32-arm64-msvc": { + "version": "1.12.6", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.12.6.tgz", + "integrity": "sha512-EKDJ1+8vaIlJGMl2yvd2HklV4GNbpKKwNQcUQid6j91tFYz4/aByw+9vh/sDVG7ZNqdmdywSnLRo317UTt0zFg==", + "cpu": [ + "arm64" + ], "dev": true, - "dependencies": { - "type-detect": "4.0.8" + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" } }, - "node_modules/@sinonjs/text-encoding": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz", - "integrity": "sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==", - "dev": true - }, - "node_modules/@swc/core": { + "node_modules/@swc/core-win32-ia32-msvc": { "version": "1.12.6", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.12.6.tgz", - "integrity": "sha512-TEpta6Gi02X1b2yDIzBOIr7dFprvq9jD8RbEVI2OcMrwklbCUx0Dz9TrAnklSOwRvYvH5JjCx8ht9E94oWiG7A==", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.12.6.tgz", + "integrity": "sha512-jnULikZkR2fpZgFUQs7NsNIztavM1JdX+8Y+8FsfChBvMvziKxXtvUPGjeVJ8nzU1wgMnaeilJX9vrwuDGkA0Q==", + "cpu": [ + "ia32" + ], "dev": true, - "hasInstallScript": true, - "dependencies": { - "@swc/counter": "^0.1.3", - "@swc/types": "^0.1.23" - }, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], "engines": { "node": ">=10" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/swc" - }, - "optionalDependencies": { - "@swc/core-darwin-arm64": "1.12.6", - "@swc/core-darwin-x64": "1.12.6", - "@swc/core-linux-arm-gnueabihf": "1.12.6", - "@swc/core-linux-arm64-gnu": "1.12.6", - "@swc/core-linux-arm64-musl": "1.12.6", - "@swc/core-linux-x64-gnu": "1.12.6", - "@swc/core-linux-x64-musl": "1.12.6", - "@swc/core-win32-arm64-msvc": "1.12.6", - "@swc/core-win32-ia32-msvc": "1.12.6", - "@swc/core-win32-x64-msvc": "1.12.6" - }, - "peerDependencies": { - "@swc/helpers": ">=0.5.17" - }, - "peerDependenciesMeta": { - "@swc/helpers": { - "optional": true - } } }, - "node_modules/@swc/core-darwin-arm64": { + "node_modules/@swc/core-win32-x64-msvc": { "version": "1.12.6", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.12.6.tgz", - "integrity": "sha512-yLiw+XzG+MilfFh0ON7qt67bfIr7UxB9JprhYReVOmLTBDmDVQSC3T4/vIuc+GwlX08ydnHy0ud4lIjTNW4uWg==", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.12.6.tgz", + "integrity": "sha512-jL2Dcdcc/QZiQnwByP1uIE4k/mTlapzUng7owtLD2tSBBi1d+jPIdXIefdv+nccYJKRA+lKG3rRB6Tk9GrC7Kg==", "cpu": [ - "arm64" + "x64" ], "dev": true, + "license": "Apache-2.0 AND MIT", "optional": true, "os": [ - "darwin" + "win32" ], "engines": { "node": ">=10" @@ -9865,6 +10390,195 @@ "url": "https://opencollective.com/parcel" } }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz", + "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz", + "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz", + "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz", + "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz", + "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz", + "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz", + "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz", + "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz", + "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/lightningcss/node_modules/detect-libc": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz", diff --git a/package.json b/package.json index 7aaf6ef03..7c2aa257f 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,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", "@parcel/transformer-sass": "^2.15.4", "cypress": "^13.13.0", diff --git a/src/images/img_Desktop/designed.png b/src/images/img_Desktop/designed.png new file mode 100644 index 000000000..366b39661 Binary files /dev/null and b/src/images/img_Desktop/designed.png differ diff --git a/src/images/img_Desktop/luna.png b/src/images/img_Desktop/luna.png new file mode 100644 index 000000000..b92084df3 Binary files /dev/null and b/src/images/img_Desktop/luna.png differ diff --git a/src/images/img_Desktop/luna_eye.png b/src/images/img_Desktop/luna_eye.png new file mode 100644 index 000000000..65768e45c Binary files /dev/null and b/src/images/img_Desktop/luna_eye.png differ diff --git a/src/images/img_Desktop/luna_music.png b/src/images/img_Desktop/luna_music.png new file mode 100644 index 000000000..c411207e9 Binary files /dev/null and b/src/images/img_Desktop/luna_music.png differ diff --git a/src/images/img_Desktop/meet_luna.png b/src/images/img_Desktop/meet_luna.png new file mode 100644 index 000000000..0e76ce664 Binary files /dev/null and b/src/images/img_Desktop/meet_luna.png differ diff --git a/src/images/img_Mobile/designed.png b/src/images/img_Mobile/designed.png new file mode 100644 index 000000000..b89432db4 Binary files /dev/null and b/src/images/img_Mobile/designed.png differ diff --git a/src/images/img_Mobile/luna.png b/src/images/img_Mobile/luna.png new file mode 100644 index 000000000..fd0965b47 Binary files /dev/null and b/src/images/img_Mobile/luna.png differ diff --git a/src/images/img_Mobile/luna_eye.png b/src/images/img_Mobile/luna_eye.png new file mode 100644 index 000000000..b5b2d9550 Binary files /dev/null and b/src/images/img_Mobile/luna_eye.png differ diff --git a/src/images/img_Mobile/luna_music.png b/src/images/img_Mobile/luna_music.png new file mode 100644 index 000000000..ec6ff1a10 Binary files /dev/null and b/src/images/img_Mobile/luna_music.png differ diff --git a/src/images/img_Mobile/meet_luna.png b/src/images/img_Mobile/meet_luna.png new file mode 100644 index 000000000..13c04427a Binary files /dev/null and b/src/images/img_Mobile/meet_luna.png differ diff --git a/src/images/img_Tablet/designed.png b/src/images/img_Tablet/designed.png new file mode 100644 index 000000000..154474c9b Binary files /dev/null and b/src/images/img_Tablet/designed.png differ diff --git a/src/images/img_Tablet/luna.png b/src/images/img_Tablet/luna.png new file mode 100644 index 000000000..d953cc16c Binary files /dev/null and b/src/images/img_Tablet/luna.png differ diff --git a/src/images/img_Tablet/luna_eye.png b/src/images/img_Tablet/luna_eye.png new file mode 100644 index 000000000..8a71c7613 Binary files /dev/null and b/src/images/img_Tablet/luna_eye.png differ diff --git a/src/images/img_Tablet/luna_music.png b/src/images/img_Tablet/luna_music.png new file mode 100644 index 000000000..792ea4ab4 Binary files /dev/null and b/src/images/img_Tablet/luna_music.png differ diff --git a/src/images/img_Tablet/meet_luna.png b/src/images/img_Tablet/meet_luna.png new file mode 100644 index 000000000..c992603cf Binary files /dev/null and b/src/images/img_Tablet/meet_luna.png differ diff --git a/src/images/logo/logo.svg b/src/images/logo/logo.svg new file mode 100644 index 000000000..32ea63fb1 --- /dev/null +++ b/src/images/logo/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/myavatar.png b/src/images/myavatar.png new file mode 100644 index 000000000..6bdae6e83 Binary files /dev/null and b/src/images/myavatar.png differ diff --git a/src/images/svg/Icon-Burger-menu.svg b/src/images/svg/Icon-Burger-menu.svg new file mode 100644 index 000000000..4df42c36f --- /dev/null +++ b/src/images/svg/Icon-Burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/svg/Icon-Close.svg b/src/images/svg/Icon-Close.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/svg/Icon-Close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/svg/arrow-left.svg b/src/images/svg/arrow-left.svg new file mode 100644 index 000000000..cfab7d543 --- /dev/null +++ b/src/images/svg/arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/svg/arrow-right.svg b/src/images/svg/arrow-right.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/svg/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/svg/arrow.svg b/src/images/svg/arrow.svg new file mode 100644 index 000000000..e23b10413 --- /dev/null +++ b/src/images/svg/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/svg/facebook.svg b/src/images/svg/facebook.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/svg/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/svg/favicon.svg b/src/images/svg/favicon.svg new file mode 100644 index 000000000..f8f13f02c --- /dev/null +++ b/src/images/svg/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/svg/favicon_1.svg b/src/images/svg/favicon_1.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/svg/favicon_1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/svg/futuristic_design.svg b/src/images/svg/futuristic_design.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/svg/futuristic_design.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/svg/instagram.svg b/src/images/svg/instagram.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/svg/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/svg/lighting_system.svg b/src/images/svg/lighting_system.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/svg/lighting_system.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/svg/multiroom_system.svg b/src/images/svg/multiroom_system.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/svg/multiroom_system.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/svg/speaker_system.svg b/src/images/svg/speaker_system.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/svg/speaker_system.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/svg/twitter.svg b/src/images/svg/twitter.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/svg/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/svg/vector.svg b/src/images/svg/vector.svg new file mode 100644 index 000000000..71544aa4e --- /dev/null +++ b/src/images/svg/vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..23f68a51e 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,674 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Kickstarter + + -

Hello Mate Academy

+
+
+ + + + + +
+
+
+

Futuristic Wireless Speaker

+

+ Luna’s performance is balanced and smooth in all frequency ranges + which makes the music both naturally pleasant and distinctly more + layered. +

+
+
+ luna +
+
+ +
+ +
+
+
+
+ futuristic_design +

Futuristic Design

+

+ To give Luna a truly flawless look, we specifically picked + aircraft grade aluminum as its material and adopted both + three-dimensional stretch-bending technology and a high precision + cold forging technique. +

+
+
+ speaker_system +

Tweeter Speaker System

+

+ To deliver a more layered sound performance better than a sole + full-range speaker, our team equipped Luna with one more tweeter + speaker responsible for high-frequency sound independently. +

+
+
+ multiroom_system +

Multiroom System

+

+ Luna is natively compatible with your home Wi-Fi. Set up multiple + speakers in different rooms to expand your music experience into + the entire house. +

+
+ +
+ lighting_system +

Intuitive Lighting System

+

+ An intuitive user interface allows you to adjust the hue and + saturation of color for lighting that fits any mood and situation. +

+
+
+
+
+ +
+
+ meet-luna +
+
+ +
+
+
+
+ designed +
+
+

Designed for the future

+

+ In 2014, a group of geeky industrial designers, engineering + veterans and acoustic experts formed crazybaby. This is a bunch of + passionate people who are crazy enough to think they can challenge + the industry with disruptive audio products. +

+ + See more About us + +
+
+ +
+
+

Luna Eye

+

+ Luna Eye is to the essence of this innovative light and audio + system. It comprises an independent tweeter speaker, a light + guiding component, a dome and a ring ornament. +

+ + See more About us + +
+ +
+ designed +
+
+
+
+ +
+
+
+ vector +
+
+

+ It really took me by surprise honestly to have such full beautiful + sound that coming out of this small compact device. And with the + brush aluminum surface, it feels so familiar. Like my iPhone. +

+ avatar_garrett_martin +
Garrett Martin
+
Creative Director
+
+
+
+ +
+
+

Features

+ + + + + +
+
+
+
+

Connectivity

+
    +
  • Hands Free Wireless Audio
    • +
  • Bluetooth 4.0 LE
    • +
  • + Wi-Fi 2.4 GHz (802.11 b/g/n) +
    • +
  • + Smart Multiroom System Set Up +
    • +
  • + Party Mode with 6.0 Units and above +
    • +
  • + MESHNET Multi Speaker Network +
    • +
+
+ +
+

Sound & Music

+ +
    +
  • Feel-in-chest Base Power
    • +
  • + Lossless Digital Audio Transmission +
    • +
  • + Easy & Stable Stereo Pairing +
    • +
  • + Crisp and Clear High Frequency Sound +
    • +
  • + Streams from Cloud Music and Local Library +
    • +
  • + Auto Music Playback from Last Song Stopped +
    • +
+
+ +
+

App Features

+
    +
  • Customize Music Schedule
    • +
  • + Wake Up with Favorite Songs +
    • +
  • + Home Detection Auto Wake Up +
    • +
  • Color Wheel
    • +
+
+
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ 01 + / + 03 +
+ +
+ 02 + / + 03 +
+ +
+ 03 + / + 03 +
+
+ +
+ luna_music +
+
+
+
+ +
+
+
+
+

Do you have any questions?

+
+ +
+
+ + + +
+
+
+
+
+ +
+
+
+
+
+ + + +
+ +
+ + arrow + +
+
+
+ + + +
+

+ © 2019 All rights reserved. Terms of Use & Privacy Policy +

+
+
+
+ diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..96b31de8b 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,13 @@ @import 'utils/vars'; @import 'utils/mixins'; @import 'utils/extends'; +@import 'utils/body'; +@import 'utils/header'; +@import 'utils/nav'; +@import 'utils/benefits'; +@import 'utils/presentation'; +@import 'utils/about-us'; +@import 'utils/technology'; +@import 'utils/features'; +@import 'utils/questions'; +@import 'utils/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..276af6333 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,66 @@ @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; + &:hover { #{$_property}: $_toValue; } } + +@mixin on-mobile { + @media (min-width: $mobile-min-width) { + @content; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-the-design { + @media (min-width: $the-design) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 30px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + margin-inline: auto; + padding-inline: 123px; + } +} + +.container { + @include content-padding-inline; +} + +@mixin page-grid { + --columns: 4; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 8; + } + + @include on-desktop { + --columns: 12; + + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..fb95d0e3f 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,17 @@ -$c-gray: #eee; +$c-gray: #f7f7f7; +$c-dark-gray: #333; +$c-text-gray: #bdbdbd; +$c-text-dark-gray: #4f4f4f; +$c-gray-text: #7c7c7c; +$c-white: #fff; +$c-color-text: #828282; +$hover-button-color: #131313; +$the-design: 1440px; +$desktop-min-width: 1280px; +$tablet-min-width: 640px; +$mobile-min-width: 320px; +$transition-duration: 0.3s; +$transition-scale: scale(1.2); +$c-link-green: #0db2b3; +$c-background-features: #d6ecec; +$c-subtitle-features: #0c797a; diff --git a/src/styles/utils/about-us.scss b/src/styles/utils/about-us.scss new file mode 100644 index 000000000..a2f4c77c8 --- /dev/null +++ b/src/styles/utils/about-us.scss @@ -0,0 +1,256 @@ +.about-us { + padding-bottom: 110px; + + @include on-tablet { + padding-bottom: 140px; + } + + @include on-desktop { + padding-bottom: 170px; + } + + &__wrapper { + @include page-grid; + + padding-bottom: 110px; + + @include on-tablet { + padding-bottom: 140px; + } + + @include on-desktop { + padding-bottom: 170px; + } + } + + &__content { + grid-column: 1 / -1; + grid-row: 2; + padding-bottom: 20px; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: auto; + padding-bottom: 0; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: contain; + transition: + transform $transition-duration ease, + filter $transition-duration ease; + + @include on-tablet { + display: block; + width: calc(100% + 34px); + margin-left: -34px; + height: 415px; + + object-fit: cover; + } + + @include on-desktop { + width: 100%; + height: 100%; + object-fit: contain; + margin-left: 0; + + &:hover { + transform: translateY(-10px) scale(1.03); + filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.12)); + } + } + } + + &__text { + display: contents; + + @include on-tablet { + display: block; + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__title { + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + color: $c-dark-gray; + text-transform: uppercase; + padding-bottom: 30px; + + grid-column: 1 / -1; + grid-row: 1; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &__description { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-gray-text; + padding-bottom: 30px; + grid-column: 1 / -1; + grid-row: 3; + + @include on-tablet { + padding-bottom: 50px; + } + } + + &__link { + position: relative; + display: inline-block; + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + color: $c-link-green; + text-decoration: none; + text-transform: uppercase; + grid-column: 1 / -1; + grid-row: 4; + + &::after { + content: ''; + position: absolute; + left: -12px; + bottom: -8px; + width: 130px; + height: 2px; + background-color: $c-link-green; + opacity: 0; + transform: translateX(0) scaleX(0); + transform-origin: left; + transition: + transform $transition-duration, + opacity $transition-duration; + } + + &:hover::after { + opacity: 1; + transform: translateX(12px) scaleX(1); + } + } + + &__wrapper-reverse { + @include page-grid; + } + + &__text-reverse { + grid-column: 1 / -1; + display: contents; + + @include on-tablet { + grid-column: 1 / 5; + display: block; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__title-reverse { + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + color: $c-dark-gray; + text-transform: uppercase; + padding-bottom: 30px; + + grid-column: 1 / -1; + grid-row: 1; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &__description-reverse { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-gray-text; + padding-bottom: 30px; + grid-column: 1 / -1; + grid-row: 3; + + @include on-tablet { + padding-bottom: 60px; + } + } + + &__content-reverse { + grid-column: 1 / -1; + grid-row: 2; + padding-bottom: 30px; + + @include on-tablet { + grid-column: 5 / -1; + grid-row: auto; + padding-bottom: 0; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__image-reverse { + width: 100%; + height: 100%; + object-fit: contain; + transition: + transform $transition-duration ease, + filter $transition-duration ease; + + @include on-tablet { + width: calc(100% + 34px); + margin-right: -34px; + height: 417px; + object-fit: cover; + } + + @include on-desktop { + width: 100%; + height: 100%; + object-fit: contain; + + &:hover { + transform: translateY(-10px) scale(1.03); + filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.12)); + } + } + } +} diff --git a/src/styles/utils/benefits.scss b/src/styles/utils/benefits.scss new file mode 100644 index 000000000..f4517bfb5 --- /dev/null +++ b/src/styles/utils/benefits.scss @@ -0,0 +1,97 @@ +.benefits { + &__wrapper { + @include page-grid; + + row-gap: 40px; + padding-bottom: 110px; + + @include on-desktop { + display: flex; + gap: 30px; + } + } + + &__card { + grid-column: 1 / -1; + transition: transform $transition-duration ease; + + @include on-tablet { + grid-column: span 4; + padding-bottom: 64px; + } + + @include on-desktop { + width: 100%; + } + + &:hover { + transform: translateY(-8px); + } + } + + &__icon { + display: block; + margin: auto; + width: 70px; + height: 50px; + object-fit: contain; + padding-bottom: 40px; + + @include on-tablet { + padding-bottom: 50px; + } + + @include on-desktop { + padding-bottom: 34px; + } + } + + &__title { + font-family: Inter, sans-serif; + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-align: center; + padding-bottom: 20px; + text-transform: uppercase; + color: $c-dark-gray; + + @include on-tablet { + padding-bottom: 20px; + } + + @include on-desktop { + padding-bottom: 52px; + } + } + + &__description { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: $c-gray-text; + } + + &__title--column { + font-family: Inter, sans-serif; + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-align: center; + text-transform: uppercase; + color: $c-dark-gray; + padding-bottom: 24px; + + @include on-tablet { + font-size: 20px; + padding-bottom: 19px; + } + + @include on-desktop { + font-size: 22px; + padding-bottom: 24px; + } + } +} diff --git a/src/styles/utils/body.scss b/src/styles/utils/body.scss new file mode 100644 index 000000000..e84102f9b --- /dev/null +++ b/src/styles/utils/body.scss @@ -0,0 +1,15 @@ +html, +body { + scroll-behavior: smooth; + margin: 0; + padding: 0; + overflow-x: hidden; +} + +h1, +h2, +h3, +p { + margin: 0; + padding: 0; +} diff --git a/src/styles/utils/features.scss b/src/styles/utils/features.scss new file mode 100644 index 000000000..4a71ab651 --- /dev/null +++ b/src/styles/utils/features.scss @@ -0,0 +1,341 @@ +.features { + padding-bottom: 110px; + + @include on-tablet { + padding-bottom: 140px; + } + + @include on-desktop { + padding-bottom: 170px; + } + + &__title { + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + color: $c-dark-gray; + text-transform: uppercase; + padding-bottom: 32px; + + @include on-tablet { + padding-bottom: 30px; + } + } + + &__subtitle { + display: block; + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 22px; + color: $c-subtitle-features; + text-transform: uppercase; + padding-bottom: 20px; + + @include on-tablet { + padding-bottom: 24px; + } + + @include on-desktop { + font-size: 34px; + line-height: 42px; + padding-bottom: 30px; + } + } + + &__control { + display: none; + } + + &__wrapper { + margin-inline: -30px; + background-color: $c-background-features; + padding-top: 30px; + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + margin-inline: 0; + padding-top: 60px; + padding-bottom: 0; + flex-direction: row; + gap: 0; + } + + @include on-desktop { + @include page-grid; + + padding-top: 80px; + padding-bottom: 0; + grid-template-rows: auto 1fr; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 10px; + margin: 0; + padding: 0; + padding-bottom: 20px; + padding-left: 15px; + + @include on-desktop { + padding-bottom: 56px; + } + } + + &__item-list { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: $c-text-dark-gray; + + @include on-desktop { + font-size: 16px; + line-height: 24px; + } + } + + &__arrows { + display: none; + justify-content: center; + align-items: center; + padding-bottom: 12px; + + @include on-tablet { + justify-content: flex-start; + } + + @include on-desktop { + display: none !important; + } + } + + &__arrow-icon { + display: inline-block; + width: 48px; + height: 14px; + background-color: $c-text-gray; + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + -webkit-mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + transition: background-color $transition-duration ease; + + &--left { + mask-image: url('../images/svg/arrow-left.svg'); + -webkit-mask-image: url('../images/svg/arrow-left.svg'); + } + + &--right { + background-color: $c-dark-gray; + mask-image: url('../images/svg/arrow-right.svg'); + -webkit-mask-image: url('../images/svg/arrow-right.svg'); + } + } + + &__arrow-button:hover &__arrow-icon, + &__arrow-button:active &__arrow-icon, + &__arrow-button:focus-visible &__arrow-icon { + background-color: $c-subtitle-features; + } + + &__number { + display: none; + justify-content: center; + align-items: center; + gap: 4px; + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-text-dark-gray; + + @include on-tablet { + justify-content: flex-start; + padding-bottom: 125px; + } + + @include on-desktop { + display: none !important; + } + } + + &__number-separator { + color: $c-subtitle-features; + + display: inline-block; + transform: translateY(7px); + } + + &__number-total { + font-size: 11px; + color: $c-subtitle-features; + display: inline-block; + transform: translateY(7px); + } + + &__picture { + display: flex; + justify-content: center; + + @include on-tablet { + flex: 1; + min-width: 0; + justify-content: flex-end; + align-items: flex-end; + } + + @include on-desktop { + grid-column: 7 / 12; + grid-row: 2; + align-self: end; + } + } + + &__image { + width: 100%; + object-fit: contain; + + @include on-tablet { + width: 435px; + height: 226px; + } + + @include on-desktop { + width: 100%; + height: 100%; + } + } + + &__content { + padding-inline: 30px; + + @include on-tablet { + margin-left: 60px; + padding-inline: 0; + flex: 1; + min-width: 0; + align-self: flex-start; + } + + @include on-desktop { + display: contents; + } + } + + &__slides { + position: relative; + min-height: 275px; + + @include on-tablet { + width: 260px; + min-height: 303px; + } + + @include on-desktop { + display: contents; + position: static; + width: auto; + min-height: auto; + } + } + + &__slide { + position: absolute; + inset: 0; + opacity: 0; + transform: translateX(16px); + pointer-events: none; + transition: + opacity $transition-duration, + transform $transition-duration; + + @include on-desktop { + position: static; + opacity: 1; + transform: none; + pointer-events: auto; + } + } + + &__arrow-button { + cursor: pointer; + display: flex; + align-items: center; + } + + @include on-desktop { + &__slide--1 { + grid-column: 2 / 7; + grid-row: 1; + padding-inline: 0; + } + + &__slide--2 { + grid-column: 2 / 7; + grid-row: 2; + padding-inline: 0; + } + + &__slide--3 { + grid-column: 7 / -1; + grid-row: 1; + padding-inline: 0; + } + } + + .features-slide-1:checked ~ .features__wrapper { + .features__slide--1 { + opacity: 1; + transform: translateX(0); + pointer-events: auto; + } + + .features__arrows--1 { + display: flex; + } + + .features__number--1 { + display: flex; + } + } + + .features-slide-2:checked ~ .features__wrapper { + .features__slide--2 { + opacity: 1; + transform: translateX(0); + pointer-events: auto; + } + + .features__arrows--2 { + display: flex; + } + + .features__number--2 { + display: flex; + } + } + + .features-slide-3:checked ~ .features__wrapper { + .features__slide--3 { + opacity: 1; + transform: translateX(0); + pointer-events: auto; + } + + .features__arrows--3 { + display: flex; + } + + .features__number--3 { + display: flex; + } + } +} diff --git a/src/styles/utils/footer.scss b/src/styles/utils/footer.scss new file mode 100644 index 000000000..9e1c033b7 --- /dev/null +++ b/src/styles/utils/footer.scss @@ -0,0 +1,125 @@ +.footer { + @include on-tablet { + padding-bottom: 20px; + + @include on-desktop { + padding-bottom: 30px; + } + } + + &__wrapper { + @include on-tablet { + padding-bottom: 60px; + } + } + + &__content { + @include on-tablet { + display: flex; + align-items: center; + } + } + + &__left { + display: none; + + @include on-tablet { + display: block; + margin-left: auto; + margin-right: auto; + } + } + + &__right { + display: none; + + @include on-tablet { + display: block; + } + } + + &__logo { + object-fit: contain; + + @include on-tablet { + width: 161px; + height: 26px; + } + + &:hover { + transform: $transition-scale; + transition: $transition-duration; + } + } + + &__arrow { + @include on-tablet { + width: 50px; + height: 50px; + } + + @include on-desktop { + width: 24px; + height: 24px; + } + + &:hover { + transform: $transition-scale; + transition: $transition-duration; + } + } + + &__social { + width: 161px; + display: flex; + + align-items: center; + margin-left: auto; + margin-right: auto; + gap: 40px; + padding-bottom: 30px; + + @include on-tablet { + gap: 32px; + + padding-bottom: 60px; + } + + @include on-desktop { + gap: 40px; + } + } + + &__social-link { + display: block; + width: 24px; + height: 24px; + + &:hover { + transform: $transition-scale; + transition: $transition-duration; + opacity: 0.6; + } + } + + &__copyright { + text-align: center; + } + + &__copyright-text { + font-family: Inter, sans-serif; + font-size: 15px; + font-weight: 400; + line-height: 21px; + color: $c-text-gray; + + @include on-tablet { + font-size: 14px; + font-weight: 300; + } + + @include on-desktop { + font-weight: 400; + } + } +} diff --git a/src/styles/utils/header.scss b/src/styles/utils/header.scss new file mode 100644 index 000000000..24467a00a --- /dev/null +++ b/src/styles/utils/header.scss @@ -0,0 +1,270 @@ +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 25px 0; + + @include on-tablet { + padding: 40px 0 142px; + } + + @include on-desktop { + padding: 42px 0 90px; + } + + &__logo { + display: block; + width: 161px; + height: 26px; + + &:hover { + transform: $transition-scale; + transition: $transition-duration; + } + } + + &__container { + @include page-grid; + + padding-bottom: 170px; + } + + &__content { + grid-column: 1 / -1; + order: 2; + + @include on-tablet { + grid-column: 1 / 4; + order: 1; + } + + @include on-desktop { + grid-column: 1 / 4; + order: 1; + } + } + + &__title { + font-family: Inter, sans-serif; + text-transform: uppercase; + font-weight: 700; + + font-size: 40px; + line-height: 52px; + color: $c-dark-gray; + + padding-bottom: 20px; + + @include on-tablet { + font-size: 40px; + line-height: 64px; + padding-bottom: 30px; + } + + @include on-desktop { + font-size: 60px; + line-height: 78px; + } + + @include on-the-design { + font-size: 62px; + } + } + + &__description { + font-family: Inter, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 300; + color: $c-text-dark-gray; + + @include on-tablet { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 15px; + } + } + + &__image { + grid-column: 1 / -1; + order: 1; + width: calc(100% + 136px); + + @include on-tablet { + grid-column: 4 / -1; + order: 2; + } + + @include on-desktop { + grid-column: 5 / -1; + order: 2; + width: 100%; + } + } + + &__image-img { + width: 100%; + height: 100%; + object-fit: contain; + } + + &__article { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: $c-gray; + z-index: 1000; + transform: translateX(-100%); + transition: transform $transition-duration ease-in-out; + overflow: hidden; + + @include on-desktop { + position: static; + background: none; + transform: none; + padding-bottom: 90px; + overflow: visible; + } + } + + &__article:target { + transform: translateX(0); + } + + &__article-close { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + cursor: pointer; + + @include on-desktop { + display: none; + } + } + + &__article-wrapper { + position: relative; + padding: 24px 30px; + z-index: 2; + display: flex; + flex-direction: column; + pointer-events: auto; + + @include on-tablet { + padding: 24px 34px; + } + } + + &__article-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 50px; + position: relative; + z-index: 3; + pointer-events: auto; + + @include on-tablet { + margin-bottom: 64px; + } + + @include on-desktop { + display: none; + } + + a { + pointer-events: auto; + } + } + + &__article-close-btn { + display: none; + width: 24px; + height: 24px; + background-image: url('../images/svg/Icon-Close.svg'); + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + + &:hover { + transform: $transition-scale; + transition: $transition-duration; + } + } + + .header__article:target &__article-close-btn { + display: block; + } + + &__article-list { + text-transform: uppercase; + display: flex; + flex-direction: column; + gap: 25px; + margin: 0; + padding: 0; + list-style: none; + flex: 1; + position: relative; + z-index: 3; + pointer-events: auto; + + @include on-desktop { + flex-direction: row; + justify-content: center; + gap: 47px; + } + } + + &__article-item { + font-family: Inter, sans-serif; + font-size: 14px; + line-height: 20px; + font-weight: 400; + color: $c-dark-gray; + list-style: none; + cursor: pointer; + text-transform: uppercase; + pointer-events: auto; + } + + &__article-link { + text-decoration: none; + color: $c-dark-gray; + pointer-events: auto; + display: block; + + &:hover { + font-weight: 700; + color: $hover-button-color; + transition: $transition-duration; + } + } + + &__article-footer { + display: flex; + flex-direction: column; + gap: 30px; + padding-top: 50px; + + @include on-tablet { + display: none; + } + } + + &__article-specs { + display: flex; + align-items: center; + gap: 8px; + font-family: Inter, sans-serif; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + padding-bottom: 132px; + } +} diff --git a/src/styles/utils/nav.scss b/src/styles/utils/nav.scss new file mode 100644 index 000000000..2dfa0003f --- /dev/null +++ b/src/styles/utils/nav.scss @@ -0,0 +1,130 @@ +.nav { + display: flex; + align-items: center; + + &__list { + display: flex; + gap: 20px; + align-items: center; + list-style: none; + margin: 0; + padding: 0; + + @include on-desktop { + gap: 30px; + } + + @include on-desktop { + gap: 47px; + } + } + + &__item { + font-family: Helvetica, sans-serif; + text-transform: uppercase; + + @include on-tablet { + font-family: Inter, sans-serif; + } + + &--burger { + display: block; + + @include on-desktop { + display: none; + } + } + + &:not(&--burger) { + display: none; + + @include on-tablet { + display: block; + } + } + } + + &__link { + text-decoration: none; + + font-weight: 300; + font-size: 14px; + line-height: 100%; + + color: $c-text-dark-gray; + + @include on-desktop { + font-weight: 400; + line-height: 20px; + } + &:hover { + color: $hover-button-color; + transition: $transition-duration; + } + } + + &__lang { + text-decoration: none; + + font-size: 14px; + font-weight: 400; + color: $c-color-text; + line-height: 18px; + + &:hover { + color: $c-dark-gray; + transition: $transition-duration; + } + + @include on-desktop { + line-height: 20px; + color: $c-text-gray; + } + } + + &__button { + width: 260px; + height: 48px; + border: 1px solid $c-dark-gray; + background-color: $c-dark-gray; + text-transform: uppercase; + color: $c-white; + font-weight: 500; + font-size: 12px; + line-height: 100%; + cursor: pointer; + + @include on-tablet { + width: 100px; + } + + @include on-desktop { + width: 102px; + font-weight: 700; + + line-height: 14px; + } + + &:hover { + background-color: $hover-button-color; + transition: $transition-duration; + } + } + + &__target { + display: block; + width: 24px; + height: 24px; + background-image: url('../images/svg/Icon-Burger-menu.svg'); + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + align-items: center; + + &:hover { + transform: $transition-scale; + + transition: $transition-duration; + } + } +} diff --git a/src/styles/utils/presentation.scss b/src/styles/utils/presentation.scss new file mode 100644 index 000000000..3ca6b8d76 --- /dev/null +++ b/src/styles/utils/presentation.scss @@ -0,0 +1,24 @@ +.presentation { + padding-bottom: 110px; + + @include on-tablet { + padding-bottom: 140px; + } + + @include on-desktop { + padding-bottom: 170px; + } + + &__image { + display: block; + margin-left: auto; + margin-right: auto; + width: 100%; + height: 100%; + object-fit: contain; + + @include on-desktop { + width: auto; + } + } +} diff --git a/src/styles/utils/questions.scss b/src/styles/utils/questions.scss new file mode 100644 index 000000000..de5234787 --- /dev/null +++ b/src/styles/utils/questions.scss @@ -0,0 +1,169 @@ +.questions { + padding-bottom: 110px; + + @include on-tablet { + padding-bottom: 140px; + } + + @include on-desktop { + padding-bottom: 170px; + } + + &__wrapper { + @include page-grid; + } + + &__left { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 6; + } + } + + &__right { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__form { + display: flex; + flex-direction: column; + + gap: 20px; + + @include on-desktop { + gap: 31px; + } + } + + &__title { + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + color: $c-dark-gray; + text-transform: uppercase; + margin-bottom: 27px; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &__input { + font-family: Helvetica, sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 24px; + color: $c-dark-gray; + padding: 12px 20px; + border: 1px solid $c-gray-text; + outline: none; + transition: border-color $transition-duration ease; + + &:focus { + border-color: $c-subtitle-features; + } + + &:invalid:not(:placeholder-shown) { + border-color: #eb5757; + color: #eb5757; + background-color: $c-white; + } + + @include on-tablet { + padding: 12px 30px; + } + + @include on-desktop { + padding: 12px 36px; + } + + &::placeholder { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-text-gray; + } + } + + &__textarea { + border: 1px solid $c-gray-text; + padding: 12px 20px; + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 24px; + color: $c-dark-gray; + margin-bottom: 30px; + height: 128px; + resize: none; + outline: none; + border-color: $c-gray-text; + + &:focus { + border-color: $c-subtitle-features; + } + + @include on-tablet { + padding: 12px 30px; + height: 200px; + } + + @include on-desktop { + padding: 16px 36px; + height: 128px; + } + + &::placeholder { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-text-gray; + } + } + + &__button { + width: 102px; + height: 40px; + background-color: $c-link-green; + color: $c-white; + border: none; + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + cursor: pointer; + text-transform: uppercase; + + @include on-desktop { + width: 126px; + height: 48px; + } + + &:hover { + background-color: $c-subtitle-features; + transition: $transition-duration; + } + } +} diff --git a/src/styles/utils/technology.scss b/src/styles/utils/technology.scss new file mode 100644 index 000000000..d6b467b12 --- /dev/null +++ b/src/styles/utils/technology.scss @@ -0,0 +1,86 @@ +.technology { + position: relative; + padding-bottom: 110px; + display: flex; + align-items: center; + justify-content: center; + + @include on-tablet { + padding-bottom: 140px; + } + + @include on-desktop { + padding-bottom: 170px; + } + + &__image { + position: absolute; + top: 0; + } + + &__wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + z-index: 1; + } + + &__description { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + color: $hover-button-color; + padding-bottom: 30px; + width: 260px; + padding-top: 50px; + text-align: center; + + @include on-tablet { + width: 650px; + font-size: 24px; + line-height: 36px; + padding-bottom: 40px; + padding-top: 60px; + } + + @include on-desktop { + width: 768px; + padding-bottom: 30px; + padding-top: 42px; + } + } + + &__avatar { + display: block; + width: 62px; + height: 62px; + + padding-bottom: 10px; + + @include on-tablet { + padding-bottom: 20px; + } + } + + &__name { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 22px; + color: $hover-button-color; + text-align: center; + padding-bottom: 5px; + } + + &__position { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: $c-gray-text; + text-align: center; + } +}