diff --git a/package-lock.json b/package-lock.json index e6c0aff679c..2863bef0f36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -203,78 +203,84 @@ } }, "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-2.0.2.tgz", - "integrity": "sha512-FMX5i7a+ojIguHpWbzh5MCsCouJkwf4z4ejdUY/fsgB9Vkdak4ZnoIEskOyOUMMB4lctiZFGszFQJXUeFL8tRg==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.3.tgz", + "integrity": "sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" ] }, "node_modules/@msgpackr-extract/msgpackr-extract-darwin-x64": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-2.0.2.tgz", - "integrity": "sha512-DznYtF3lHuZDSRaIOYeif4JgO0NtO2Xf8DsngAugMx/bUdTFbg86jDTmkVJBNmV+cxszz6OjGvinnS8AbJ342g==", + "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": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-2.0.2.tgz", - "integrity": "sha512-Gy9+c3Wj+rUlD3YvCZTi92gs+cRX7ZQogtwq0IhRenloTTlsbpezNgk6OCkt59V4ATEWSic9rbU92H/l7XsRvA==", + "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": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-2.0.2.tgz", - "integrity": "sha512-b0jMEo566YdM2K+BurSed7bswjo3a6bcdw5ETqoIfSuxKuRLPfAiOjVbZyZBgx3J/TAM/QrvEQ/VN89A0ZAxSg==", + "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": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-2.0.2.tgz", - "integrity": "sha512-zrBHaePwcv4cQXxzYgNj0+A8I1uVN97E7/3LmkRocYZ+rMwUsnPpp4RuTAHSRoKlTQV3nSdCQW4Qdt4MXw/iHw==", + "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": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-2.0.2.tgz", - "integrity": "sha512-fpnI00dt+yO1cKx9qBXelKhPBdEgvc8ZPav1+0r09j0woYQU2N79w/jcGawSY5UGlgQ3vjaJsFHnGbGvvqdLzg==", + "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" @@ -1665,12 +1671,13 @@ "dev": true }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, + "license": "MIT", "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -1721,9 +1728,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001346", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001346.tgz", - "integrity": "sha512-q6ibZUO2t88QCIPayP/euuDREq+aMAxFE5S70PkrLh0iTDj/zEhgvJRKC2+CvXY6EWc6oQwUR48lL5vCW6jiXQ==", + "version": "1.0.30001655", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz", + "integrity": "sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==", "dev": true, "funding": [ { @@ -1733,8 +1740,13 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/chalk": { "version": "4.1.2", @@ -2061,10 +2073,11 @@ "dev": true }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, + "license": "MIT", "dependencies": { "to-regex-range": "^5.0.1" }, @@ -2269,6 +2282,7 @@ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "dev": true, + "license": "MIT", "engines": { "node": ">=0.12.0" } @@ -2286,10 +2300,11 @@ "dev": true }, "node_modules/json5": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", - "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "dev": true, + "license": "MIT", "bin": { "json5": "lib/cli.js" }, @@ -2426,12 +2441,13 @@ } }, "node_modules/micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, + "license": "MIT", "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { @@ -2450,43 +2466,63 @@ } }, "node_modules/msgpackr": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.1.tgz", - "integrity": "sha512-Je+xBEfdjtvA4bKaOv8iRhjC8qX2oJwpYH4f7JrG4uMVJVmnmkAT4pjKdbztKprGj3iwjcxPzb5umVZ02Qq3tA==", + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.0.tgz", + "integrity": "sha512-I8qXuuALqJe5laEBYoFykChhSXLikZmUhccjGsPuSJ/7uPip2TJ7lwdIQwWSAi0jGZDXv4WOP8Qg65QZRuXxXw==", "dev": true, + "license": "MIT", "optionalDependencies": { - "msgpackr-extract": "^2.0.2" + "msgpackr-extract": "^3.0.2" } }, "node_modules/msgpackr-extract": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-2.0.2.tgz", - "integrity": "sha512-coskCeJG2KDny23zWeu+6tNy7BLnAiOGgiwzlgdm4oeSsTpqEJJPguHIuKZcCdB7tzhZbXNYSg6jZAXkZErkJA==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-3.0.3.tgz", + "integrity": "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==", "dev": true, "hasInstallScript": true, + "license": "MIT", "optional": true, "dependencies": { - "node-gyp-build-optional-packages": "5.0.2" + "node-gyp-build-optional-packages": "5.2.2" + }, + "bin": { + "download-msgpackr-prebuilds": "bin/download-prebuilds.js" }, "optionalDependencies": { - "@msgpackr-extract/msgpackr-extract-darwin-arm64": "2.0.2", - "@msgpackr-extract/msgpackr-extract-darwin-x64": "2.0.2", - "@msgpackr-extract/msgpackr-extract-linux-arm": "2.0.2", - "@msgpackr-extract/msgpackr-extract-linux-arm64": "2.0.2", - "@msgpackr-extract/msgpackr-extract-linux-x64": "2.0.2", - "@msgpackr-extract/msgpackr-extract-win32-x64": "2.0.2" + "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.3", + "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.3" + } + }, + "node_modules/msgpackr-extract/node_modules/detect-libc": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", + "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "engines": { + "node": ">=8" } }, "node_modules/msgpackr-extract/node_modules/node-gyp-build-optional-packages": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.0.2.tgz", - "integrity": "sha512-PiN4NWmlQPqvbEFcH/omQsswWQbe5Z9YK/zdB23irp5j2XibaA2IrGvpSWmVVG4qMZdmPdwPctSy4a86rOMn6g==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz", + "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==", "dev": true, + "license": "MIT", "optional": true, + "dependencies": { + "detect-libc": "^2.0.1" + }, "bin": { - "node-gyp-build-optional": "optional.js", "node-gyp-build-optional-packages": "bin.js", - "node-gyp-build-test": "build-test.js" + "node-gyp-build-optional-packages-optional": "optional.js", + "node-gyp-build-optional-packages-test": "build-test.js" } }, "node_modules/nan": { @@ -2906,10 +2942,11 @@ } }, "node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true, + "license": "ISC", "bin": { "semver": "bin/semver" } @@ -3028,6 +3065,7 @@ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "dev": true, + "license": "MIT", "dependencies": { "is-number": "^7.0.0" }, @@ -3245,44 +3283,44 @@ } }, "@msgpackr-extract/msgpackr-extract-darwin-arm64": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-2.0.2.tgz", - "integrity": "sha512-FMX5i7a+ojIguHpWbzh5MCsCouJkwf4z4ejdUY/fsgB9Vkdak4ZnoIEskOyOUMMB4lctiZFGszFQJXUeFL8tRg==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.3.tgz", + "integrity": "sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==", "dev": true, "optional": true }, "@msgpackr-extract/msgpackr-extract-darwin-x64": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-2.0.2.tgz", - "integrity": "sha512-DznYtF3lHuZDSRaIOYeif4JgO0NtO2Xf8DsngAugMx/bUdTFbg86jDTmkVJBNmV+cxszz6OjGvinnS8AbJ342g==", + "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==", "dev": true, "optional": true }, "@msgpackr-extract/msgpackr-extract-linux-arm": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-2.0.2.tgz", - "integrity": "sha512-Gy9+c3Wj+rUlD3YvCZTi92gs+cRX7ZQogtwq0IhRenloTTlsbpezNgk6OCkt59V4ATEWSic9rbU92H/l7XsRvA==", + "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==", "dev": true, "optional": true }, "@msgpackr-extract/msgpackr-extract-linux-arm64": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-2.0.2.tgz", - "integrity": "sha512-b0jMEo566YdM2K+BurSed7bswjo3a6bcdw5ETqoIfSuxKuRLPfAiOjVbZyZBgx3J/TAM/QrvEQ/VN89A0ZAxSg==", + "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==", "dev": true, "optional": true }, "@msgpackr-extract/msgpackr-extract-linux-x64": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-2.0.2.tgz", - "integrity": "sha512-zrBHaePwcv4cQXxzYgNj0+A8I1uVN97E7/3LmkRocYZ+rMwUsnPpp4RuTAHSRoKlTQV3nSdCQW4Qdt4MXw/iHw==", + "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==", "dev": true, "optional": true }, "@msgpackr-extract/msgpackr-extract-win32-x64": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-2.0.2.tgz", - "integrity": "sha512-fpnI00dt+yO1cKx9qBXelKhPBdEgvc8ZPav1+0r09j0woYQU2N79w/jcGawSY5UGlgQ3vjaJsFHnGbGvvqdLzg==", + "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==", "dev": true, "optional": true }, @@ -4128,12 +4166,12 @@ "dev": true }, "braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, "requires": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" } }, "browserslist": { @@ -4162,9 +4200,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001346", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001346.tgz", - "integrity": "sha512-q6ibZUO2t88QCIPayP/euuDREq+aMAxFE5S70PkrLh0iTDj/zEhgvJRKC2+CvXY6EWc6oQwUR48lL5vCW6jiXQ==", + "version": "1.0.30001655", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz", + "integrity": "sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==", "dev": true }, "chalk": { @@ -4402,9 +4440,9 @@ "dev": true }, "fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, "requires": { "to-regex-range": "^5.0.1" @@ -4541,9 +4579,9 @@ "dev": true }, "json5": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", - "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "dev": true }, "lines-and-columns": { @@ -4635,12 +4673,12 @@ "dev": true }, "micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "requires": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" } }, @@ -4650,36 +4688,46 @@ "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==" }, "msgpackr": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.1.tgz", - "integrity": "sha512-Je+xBEfdjtvA4bKaOv8iRhjC8qX2oJwpYH4f7JrG4uMVJVmnmkAT4pjKdbztKprGj3iwjcxPzb5umVZ02Qq3tA==", + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.0.tgz", + "integrity": "sha512-I8qXuuALqJe5laEBYoFykChhSXLikZmUhccjGsPuSJ/7uPip2TJ7lwdIQwWSAi0jGZDXv4WOP8Qg65QZRuXxXw==", "dev": true, "requires": { - "msgpackr-extract": "^2.0.2" + "msgpackr-extract": "^3.0.2" } }, "msgpackr-extract": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-2.0.2.tgz", - "integrity": "sha512-coskCeJG2KDny23zWeu+6tNy7BLnAiOGgiwzlgdm4oeSsTpqEJJPguHIuKZcCdB7tzhZbXNYSg6jZAXkZErkJA==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-3.0.3.tgz", + "integrity": "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==", "dev": true, "optional": true, "requires": { - "@msgpackr-extract/msgpackr-extract-darwin-arm64": "2.0.2", - "@msgpackr-extract/msgpackr-extract-darwin-x64": "2.0.2", - "@msgpackr-extract/msgpackr-extract-linux-arm": "2.0.2", - "@msgpackr-extract/msgpackr-extract-linux-arm64": "2.0.2", - "@msgpackr-extract/msgpackr-extract-linux-x64": "2.0.2", - "@msgpackr-extract/msgpackr-extract-win32-x64": "2.0.2", - "node-gyp-build-optional-packages": "5.0.2" + "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.3", + "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.3", + "node-gyp-build-optional-packages": "5.2.2" }, "dependencies": { - "node-gyp-build-optional-packages": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.0.2.tgz", - "integrity": "sha512-PiN4NWmlQPqvbEFcH/omQsswWQbe5Z9YK/zdB23irp5j2XibaA2IrGvpSWmVVG4qMZdmPdwPctSy4a86rOMn6g==", + "detect-libc": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", + "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==", "dev": true, "optional": true + }, + "node-gyp-build-optional-packages": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz", + "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==", + "dev": true, + "optional": true, + "requires": { + "detect-libc": "^2.0.1" + } } } }, @@ -4969,9 +5017,9 @@ } }, "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true }, "source-map": { diff --git a/src/images/1st-review-img.jpg b/src/images/1st-review-img.jpg new file mode 100644 index 00000000000..0d882e86455 Binary files /dev/null and b/src/images/1st-review-img.jpg differ diff --git a/src/images/2nd-review-img.jpg b/src/images/2nd-review-img.jpg new file mode 100644 index 00000000000..819ff29c4a0 Binary files /dev/null and b/src/images/2nd-review-img.jpg differ diff --git a/src/images/3rd-review-img.jpg b/src/images/3rd-review-img.jpg new file mode 100644 index 00000000000..8f3a94ba99f Binary files /dev/null and b/src/images/3rd-review-img.jpg differ diff --git a/src/images/Cow-image.png b/src/images/Cow-image.png new file mode 100644 index 00000000000..2614ff8527d Binary files /dev/null and b/src/images/Cow-image.png differ diff --git a/src/images/arrow-right.svg b/src/images/arrow-right.svg new file mode 100644 index 00000000000..fae12c9df53 --- /dev/null +++ b/src/images/arrow-right.svg @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/src/images/buy-now-ice-coffee.jpg b/src/images/buy-now-ice-coffee.jpg new file mode 100644 index 00000000000..4f729e576e9 Binary files /dev/null and b/src/images/buy-now-ice-coffee.jpg differ diff --git a/src/images/buy-now-ice-cream.jpg b/src/images/buy-now-ice-cream.jpg new file mode 100644 index 00000000000..a47a615512b Binary files /dev/null and b/src/images/buy-now-ice-cream.jpg differ diff --git a/src/images/buy-now-milkshake.jpg b/src/images/buy-now-milkshake.jpg new file mode 100644 index 00000000000..2d35365d09f Binary files /dev/null and b/src/images/buy-now-milkshake.jpg differ diff --git a/src/images/close-play-modal.svg b/src/images/close-play-modal.svg new file mode 100644 index 00000000000..8cc1a9416a0 --- /dev/null +++ b/src/images/close-play-modal.svg @@ -0,0 +1,10 @@ + diff --git a/src/images/cow-weight-icecream.svg b/src/images/cow-weight-icecream.svg new file mode 100644 index 00000000000..11c8dce5478 --- /dev/null +++ b/src/images/cow-weight-icecream.svg @@ -0,0 +1,38 @@ + \ No newline at end of file diff --git a/src/images/horizontal-line.jpg b/src/images/horizontal-line.jpg new file mode 100644 index 00000000000..f578fa94d35 Binary files /dev/null and b/src/images/horizontal-line.jpg differ diff --git a/src/images/ice-cream-background-desktop.jpg b/src/images/ice-cream-background-desktop.jpg new file mode 100644 index 00000000000..5b14a0877bb Binary files /dev/null and b/src/images/ice-cream-background-desktop.jpg differ diff --git a/src/images/ice-cream-background-mobile.jpg b/src/images/ice-cream-background-mobile.jpg new file mode 100644 index 00000000000..91a757cbbe6 Binary files /dev/null and b/src/images/ice-cream-background-mobile.jpg differ diff --git a/src/images/ice-cream-background-tablet.jpg b/src/images/ice-cream-background-tablet.jpg new file mode 100644 index 00000000000..9a79667e0c6 Binary files /dev/null and b/src/images/ice-cream-background-tablet.jpg differ diff --git a/src/images/ice-cream-background.jpg b/src/images/ice-cream-background.jpg new file mode 100644 index 00000000000..debf4c4f520 Binary files /dev/null and b/src/images/ice-cream-background.jpg differ diff --git a/src/images/ice-cream-overlap-picture.jpg b/src/images/ice-cream-overlap-picture.jpg new file mode 100644 index 00000000000..f7fe2ab2cd0 Binary files /dev/null and b/src/images/ice-cream-overlap-picture.jpg differ diff --git a/src/images/icecream-480rez.png b/src/images/icecream-480rez.png new file mode 100644 index 00000000000..ccca468497c Binary files /dev/null and b/src/images/icecream-480rez.png differ diff --git a/src/images/icecream-desktoprez.png b/src/images/icecream-desktoprez.png new file mode 100644 index 00000000000..b41dcbf0be4 Binary files /dev/null and b/src/images/icecream-desktoprez.png differ diff --git a/src/images/icecream-mobile.png b/src/images/icecream-mobile.png new file mode 100644 index 00000000000..9fe78ed1a49 Binary files /dev/null and b/src/images/icecream-mobile.png differ diff --git a/src/images/icecream-plate-desktop.png b/src/images/icecream-plate-desktop.png new file mode 100644 index 00000000000..3d588eb40cf Binary files /dev/null and b/src/images/icecream-plate-desktop.png differ diff --git a/src/images/icecream-plate.png b/src/images/icecream-plate.png new file mode 100644 index 00000000000..9e0baa4532e Binary files /dev/null and b/src/images/icecream-plate.png differ diff --git a/src/images/icecream-tabletrez.png b/src/images/icecream-tabletrez.png new file mode 100644 index 00000000000..988e3d19d57 Binary files /dev/null and b/src/images/icecream-tabletrez.png differ diff --git a/src/images/icons-products.svg b/src/images/icons-products.svg new file mode 100644 index 00000000000..cd1e81367ab --- /dev/null +++ b/src/images/icons-products.svg @@ -0,0 +1,10 @@ + diff --git a/src/images/modal-products-ice-cream.jpg b/src/images/modal-products-ice-cream.jpg new file mode 100644 index 00000000000..72379911070 Binary files /dev/null and b/src/images/modal-products-ice-cream.jpg differ diff --git a/src/images/products-ice-coffee.jpg b/src/images/products-ice-coffee.jpg new file mode 100644 index 00000000000..04f5ad4866b Binary files /dev/null and b/src/images/products-ice-coffee.jpg differ diff --git a/src/images/products-ice-cream.jpg b/src/images/products-ice-cream.jpg new file mode 100644 index 00000000000..77d59feeb68 Binary files /dev/null and b/src/images/products-ice-cream.jpg differ diff --git a/src/images/products-milkshakes.jpg b/src/images/products-milkshakes.jpg new file mode 100644 index 00000000000..616687d3045 Binary files /dev/null and b/src/images/products-milkshakes.jpg differ diff --git a/src/images/symbol-defs.svg b/src/images/symbol-defs.svg new file mode 100644 index 00000000000..34231f7e479 --- /dev/null +++ b/src/images/symbol-defs.svg @@ -0,0 +1,443 @@ + diff --git a/src/images/yellow-circle.png b/src/images/yellow-circle.png new file mode 100644 index 00000000000..8df2684a840 Binary files /dev/null and b/src/images/yellow-circle.png differ diff --git a/src/index.html b/src/index.html index 92da07de4e6..ebe95e2d124 100755 --- a/src/index.html +++ b/src/index.html @@ -3,13 +3,30 @@ + + + + + + Page title -

Example title

- + + + + + + + diff --git a/src/index.js b/src/index.js index e69de29bb2d..3e974828d52 100755 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,179 @@ +// Header hamburger menu + +const menuButton = document.querySelector('.menu-open-btn'); +const menuBackdrop = document.querySelector('.hamburger-menu'); + +menuButton.addEventListener('click', toggleMenu); + +menuBackdrop.addEventListener('click', e => { + const target = e.target.closest('.menu-close-btn'); + if (!target) { + return; + } + toggleMenu(); +}); + +function toggleMenu() { + menuBackdrop.classList.toggle('is-open'); +} + +//opens Buy Now modal window for Buy button + +const buyButton = document.querySelector('.buy-now-btn'); +const buyBackdrop = document.querySelector('.modal-buy-now'); + +buyButton.addEventListener('click', toggleBuyModal); + +buyBackdrop.addEventListener('click', e => { + const target = e.target.closest('.menu-close-btn'); + if (!target) { + return; + } + toggleBuyModal(); +}); + +function toggleBuyModal() { + buyBackdrop.classList.toggle('is-open'); +} + +// Section Contacts JS +// opens modal window for franchise button +const button = document.querySelector('.franchise-btn'); +const franchiseBackdrop = document.querySelector('.franchise'); + + +button.addEventListener('click', toggleFranchiseModal); + + +button.addEventListener('click', toggleFranchiseModal); + +franchiseBackdrop.addEventListener('click', e => { + const target = e.target.closest('.modal-close-btn-contacts'); + if (!target) { + return; + } + toggleFranchiseModal(); +}); + + +function toggleFranchiseModal() { + franchiseBackdrop.classList.toggle('is-open'); + document.querySelector('.contact-container').classList.toggle('opaq-bg'); + document + .querySelector('.contact-container') + .scrollIntoView({ behavior: 'smooth' }); +} +// opens modal window for locations button +const locationBtn = document.querySelector('.location-btn'); +const locationBackdrop = document.querySelector('.location'); +locationBtn.addEventListener('click', toggleLocationModal); +locationBtn.addEventListener('click', function () { + console.log(2000); +}); +locationBackdrop.addEventListener('click', e => { + const target = e.target.closest('.modal-close-btn-contacts'); + if (!target) { + return; + } + toggleLocationModal(); +}); +function toggleLocationModal() { + locationBackdrop.classList.toggle('is-open'); + document.querySelector('.contact-container').classList.toggle('opaq-bg'); + document + .querySelector('.contact-container') + .scrollIntoView({ behavior: 'smooth' }); +} + + +//<--------------Customer Review JS-----------> +document.addEventListener('DOMContentLoaded', () => { + let currentSlideIndex = 0; + const slides = document.querySelectorAll('.carousel-item'); + const dots = document.querySelectorAll('.dot'); + function showSlide(index) { + // Hide all slides and deactivate dots + slides.forEach((slide, i) => { + slide.classList.remove('active'); + dots[i].classList.remove('active'); + }); + // Show the selected slide and activate the dot + slides[index].classList.add('active'); + dots[index].classList.add('active'); + } + function nextSlide() { + currentSlideIndex = (currentSlideIndex + 1) % slides.length; + showSlide(currentSlideIndex); + } + function prevSlide() { + currentSlideIndex = (currentSlideIndex - 1 + slides.length) % slides.length; + showSlide(currentSlideIndex); + } + function goToSlide(index) { + currentSlideIndex = index; + showSlide(currentSlideIndex); + } + // Initialize the first slide + showSlide(currentSlideIndex); + // Assign event listeners to buttons + document.querySelector('.prev-btn').addEventListener('click', prevSlide); + document.querySelector('.next-btn').addEventListener('click', nextSlide); + dots.forEach((dot, index) => { + dot.addEventListener('click', () => goToSlide(index)); + }); +}); + +// About section JS +// opens modal window for read more button + + +const aboutButton = document.querySelector('.read-more-btn'); +const aboutBackdrop = document.querySelector('.modal-box'); +aboutButton.addEventListener('click', toggleModal); + +aboutButton.addEventListener('click', function () { + console.log(230924928); +}); + +aboutBackdrop.addEventListener('click', e => { + const target = e.target.closest('.close-modal-box'); + if (!target) { + return; + } + toggleModal(); +}); +function toggleModal() { + aboutBackdrop.classList.toggle('is-open'); + document.querySelector('.about-container-box').classList.toggle('opaq-bg'); + document + .querySelector('.about-container-box') + .scrollIntoView({ behavior: 'smooth' }); +} + + + + +//<-------------- Section Products JS -----------> +// opens/closes modal window for products ingredients + +const ingredientsButtons = document.querySelectorAll('.product-card-arrow-button'); +const ingredientsBackdrop = document.querySelector('.modal-window-ingredients'); + +ingredientsButtons.forEach(button => { + button.addEventListener('click', toggleIngredientsModal); +}); + +ingredientsBackdrop.addEventListener('click', (e) => { + const closeButton = e.target.closest(".modal-close-button"); + const submitButton = e.target.closest(".modal-window-ingredients-submit-button"); + + if (closeButton || submitButton) { + toggleIngredientsModal(); + } +}); + +function toggleIngredientsModal() { + ingredientsBackdrop.classList.toggle("is-open"); +} + + diff --git a/src/partials/about.html b/src/partials/about.html new file mode 100644 index 00000000000..f3768fed823 --- /dev/null +++ b/src/partials/about.html @@ -0,0 +1,102 @@ + +
+
+
+

TRADITION AND LOVE

+

HOW IT'S MADE?

+
+
+
+ Cow eating grass +
+ +
+

+ Ice is a place where you will become not only a little happier, but + also healthier. Health is the main value for us, and we follow it when + creating our handmade desserts. +

+

+ We use traditional recipes and 100% natural ingredients. Our products + are so natural that they can be given to children from the age of + three years. Sweets lovers can expect 55 types of ice cream, 15 types + of coffee and 23 milkshakes. +

+

+ This is enough to choose ice cream and coffee for any mood! +

+
+
+ +
+ +
+
+
    +
  • +
    + + + +

    721

    +

    + Aliquam ac dui vel dui vulputate consectetur. Mauris massa. +

    +
    +
    • +
  • +
    + + + +

    16KG

    +

    + Aliquam ac dui vel dui vulputate consectetur. Mauris massa. +

    +
    +
    • +
  • +
    + + + +

    84

    +

    + Aliquam ac dui vel dui vulputate consectetur. Mauris massa. +

    +
    +
    • +
+
+
+
+
+ +

How it's made?

+
+ + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur + adipiscing elit, sed do eiusmod tempor incididunt ut labore et +

+
+
+
diff --git a/src/partials/contacts.html b/src/partials/contacts.html new file mode 100644 index 00000000000..114bf0146bc --- /dev/null +++ b/src/partials/contacts.html @@ -0,0 +1,245 @@ +
+
+ +
+ + +
+
+
+ +
+

Our Locations

+
+ +
+ Open map +
+
+
+ +

+ Thank you for your interest in owning an Ice Cream shop +

+

+ Due to the overwhelming volume of franchise requests we are not accepting + new franchisee applications at this time. Once the application process + resumes, we will contact you for further information. Please fill out the + contact information below and we will reach out for additional + information. We appreciate your patience. +

+
+ + + + + +
+
+
\ No newline at end of file diff --git a/src/partials/customer-reviews.html b/src/partials/customer-reviews.html new file mode 100644 index 00000000000..4d8d1c11a79 --- /dev/null +++ b/src/partials/customer-reviews.html @@ -0,0 +1,75 @@ +
+
+ picture with many icecream cones +
+
+
+ + +
+
+ +
+ reviewer's photo +
+

+ I love visiting your cafe. You prepare the most delicious ice + cream in Los Angeles! In addition, you have beautiful serving, + cozy atmosphere and polite staff. +

+
+

Emily, Los Angeles

+
+ + +
+ reviewer's photo +
+

+ Every day we come to you with friends after classes in college. + We love your ice cream and casual atmosphere! +

+
+

Bryan, New-York

+
+ + +
+ reviewer's photo +
+

+ Ice cream is my passion! I love your chocolate hazelnut ice + cream! And I really like the excellent service - always served + politely and quickly! +

+
+

Diana, Chicago

+
+
+ + +
+ + + +
+
+
+
+
diff --git a/src/partials/example.html b/src/partials/example.html index f7f444c97e2..44a8533effc 100755 --- a/src/partials/example.html +++ b/src/partials/example.html @@ -1,10 +1,10 @@ -
+ +

@@ -34,4 +34,8 @@

HTML-partials

-
+ --> + +
+

sdjkcnsdjkc

+
diff --git a/src/partials/footer.html b/src/partials/footer.html new file mode 100644 index 00000000000..7166daceb15 --- /dev/null +++ b/src/partials/footer.html @@ -0,0 +1,56 @@ + +
+

Feel free to contact

+
+
  • + +61 (0) 383 766 284 +
    • +
    +
    + + + +

    © 2022 - IceCream. + All Rights Reserved.

    + + + diff --git a/src/partials/hero-section.html b/src/partials/hero-section.html new file mode 100644 index 00000000000..3e76ac53646 --- /dev/null +++ b/src/partials/hero-section.html @@ -0,0 +1,73 @@ +
    +
    +

    + ICE CREAM MADE WITH + PASSION +

    + + + + + + ice-cream + ice-cream + ice-cream + icecream-plate + + ice-cream + icecream-plate + +

    + Indulge in a scoop of ice cream made with passion and treat your taste + buds to an unforgettable experience! +

    + +

    cafes

    +

    food trucks

    + + + + + + + + + + + + + + + + + + + + + +
    +
    diff --git a/src/partials/nav-header.html b/src/partials/nav-header.html new file mode 100644 index 00000000000..82211eafbdb --- /dev/null +++ b/src/partials/nav-header.html @@ -0,0 +1,218 @@ + +
    +
    +
    + + + + + +
    + + +
    +
    +
    + + + + + + + +
    + + +
    +
    + +
    + +

    Buy now

    +
      +
    • +
      + Ice Cream product image +

      ice cream

      +
      +
      • +
    • +
      + Ice Coffee product image +

      ice coffee

      +
      +
      • +
    • +
      + Milkshake product image +

      milkshake

      +
      +
      • +
    + +
    +
    + + + + + +
    +
    +
    + + + + + +
    + diff --git a/src/partials/products.html b/src/partials/products.html new file mode 100644 index 00000000000..fde20f2a8c9 --- /dev/null +++ b/src/partials/products.html @@ -0,0 +1,141 @@ +
    +
    +
    + 100% natural +

    products

    +
    + +
    +
      +
    • +
      +

      ice cream

      +

      + Soft ice cream with a delicate taste. Made with milk, cream, sugar + and natural stabilizer +

      + +
      +
      • +
    • +
      +

      ice coffee

      +

      + Fragrant invigorating drink created from 100% natural ingredients + without the use of preservatives and flavor enhancers +

      + +
      +
      • +
    • +
      +

      milkshakes

      +

      + Sweet drinks based on milk and ice cream, supplemented with + syrups, fruits, berries and other sweets of your choice +

      + +
      +
      • +
    +
    +
    + +
    + +
    +

    Chololate icecream

    + ice-cream +
    +
    +
    320
    +
    kcal
    +
    +
    +
    4g
    +
    Prote...
    +
    +
    +
    8,2g
    +
    Fats
    +
    +
    +
    40,4g
    +
    Carbs
    +
    +
    +

    Ingredients

    +
      +
    • + Milk + 100ml +
      • +
    • + Belgian chocolate + 20g +
      • +
    • + Cream + 150 ml +
      • +
    • + Cocoa powder + 30g +
      • +
    • + Sugar + 40g +
      • +
    • + Vanilla sugar + 10g +
      • +
    +
    + + + + +
    +
    +
    +
    diff --git a/src/sass/_about.scss b/src/sass/_about.scss new file mode 100644 index 00000000000..00f88acd37f --- /dev/null +++ b/src/sass/_about.scss @@ -0,0 +1,491 @@ +/*----- Mobile screen width(320px) -------*/ +section.about-container { + background: rgba(132, 161, 120, 1); + min-width: 320px; + margin: 0 auto; +} + +/*----- 480 width screen -------*/ +@media (min-width: 480px) { + .about-container { + min-width: 480px; + } +} + +/*----- Tablet screen width -------*/ +@media (min-width: 768px) { + .about-container { + min-width: 768px; + } +} +/*----- Desktop screen width -------*/ + +@media (min-width: 1200px) { + .about-container { + min-width: 1200px; + } +} + +/*----- Mobile screen width(320px) -------*/ +.about-title { + margin-left: 55px; + padding-top: 61px; + margin-right: 55px; + text-align: center; +} + +.tradition { + font-family: 'Montserrat', sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 21.94px; + text-align: center; + color: rgba(252, 252, 252, 1); +} + +.how-is-title { + font-family: 'Seymour One', sans-serif; + font-size: 30px; + font-weight: 400; + line-height: 37.71px; + letter-spacing: 0.04em; + text-align: center; + color: rgba(252, 252, 252, 1); + margin: 12px 5px; +} + +.images { + margin: 22px 1px; + display: flex; + justify-content: center; +} + +.cow-image { + margin-top: 35px; + max-width: 279px; + height: 278px; + top: 263px; + left: 21px; + border-radius: 140px; + opacity: 1px; + box-shadow: 0px -22px 0px #f8d24eb2; + background: linear-gradient(0deg, #d9d9d9, #d9d9d9), + linear-gradient(0deg, rgba(248, 210, 78, 0.7), rgba(248, 210, 78, 0.7)); +} + +.first-paragraph { + margin: auto 50px; + font-family: 'Montserrat', sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 21.12px; + letter-spacing: 0.04em; + gap: 4px; + text-align: center; + color: rgba(252, 252, 252, 1); + display: flex; + flex-wrap: wrap; +} + +.second-paragraph { + margin: auto 50px; + font-family: 'Montserrat', sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 19.44px; + gap: 4px; + text-align: center; + color: rgba(252, 252, 252, 1); + display: flex; + flex-wrap: wrap; +} + +.read-btn-container { + margin: 28px auto; + display: flex; + align-items: center; + justify-content: center; + color: rgba(252, 252, 252, 1); +} + +.read-more-btn { + display: flex; + justify-content: center; + align-items: center; + padding: 12px 51px 12px 34px; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 18px; + text-align: center; + background: rgba(248, 210, 78, 1); + cursor: pointer; + border: none; + border-radius: 10px; +} + +.advantages-list { + display: flex; + flex-direction: column; + justify-content: center; + margin: 50px 0 68px 0; + gap: 16px; + color: rgba(252, 252, 252, 1); +} + +.advantages-icon-list { + text-align: center; +} + +.advantages-svg { + width: 50px; + height: 50px; + border-radius: 25px; + background: rgba(248, 210, 78, 1); + margin-bottom: 32px; +} + +.advantages-title { + font-family: 'Montserrat', sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 43.88px; + letter-spacing: 0.04em; + text-align: center; +} + +.advantages-list:last-child { + gap: 22px; +} + +.advantages-paragraph { + font-family: 'Montserrat', sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 20.4px; + text-align: center; + position: relative; + margin-bottom: 50px; + margin-left: 45px; + margin-right: 45px; +} + +.about-container { + position: relative; +} + +.about-container-box.opaq-bg { + filter: blur(5px); + opacity: 0.4; +} + +.modal-box { + position: absolute; + top: 20px; + left: 20px; + width: 280px; + height: 449px; + // gap: 0px; + border-radius: 10px; + // border: 2px 0px 0px 0px; + visibility: hidden; + opacity: 0; + display: none; + width: 280px; + height: 459px; + gap: 0px; + border-radius: 10px 0px 0px 0px; + border: 2px 0px 0px 0px; + opacity: 0px; + background: rgba(252, 252, 252, 1); + border: 2px solid rgba(248, 210, 78, 1); + padding: 28px; + +} + + +.modal-box.is-open { + visibility: visible; + opacity: 1; + z-index: 9999; +} + +.close-modal-box { + position: absolute; + top: 12px; + right: 12px; + // opacity: 0px; + background: rgba(252, 252, 252, 1); + display: flex; + justify-content: left; + align-items: center; + text-align: center; +} + + .modal-backdrop { + visibility: hidden; + opacity: 0; + } + +.modal-backdrop.is-open { + visibility: visible; + opacity: 1; +} + +.modal-title { + // width: 322px; + // height: 28px; + // margin-left: 123px; + // gap: 0px; + // opacity: 0px; + font-family: 'Seymour One', sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: center; + +} + +.black-box { + // width: 448px; + // height: 205px; + width: 224px; + height: 199px; + margin-top: 20px; + // margin-top: 32px; + // margin-left: 60px; + gap: 0px; + border-radius: 10px; + opacity: 0px; + background: rgba(0, 0, 0, 1); + display: flex; + justify-content: center; + align-items: center; +} + +.modal-paragraph { + // width: 448px; + // height: 88px; + margin-top: 20px; + // margin-top: 32px; + // margin-left: 60px; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + + color: rgba(19, 19, 19, 1); + display: flex; + justify-content: center; +} + +@media (min-width: 480px) { + .about-title { + padding-top: 60px; + gap: 12px; + text-align: center; + } + + .first-paragraph, + .second-paragraph { + text-align: center; + padding-left: 30px; + margin: auto 80px; + } + + .advantages-paragraph { + text-align: center; + margin: auto 125px; + } + + .read-btn-container { + padding-left: 28px; + } +} + +@media (min-width: 768px) { + .modal-box { + width: 568px; + padding: 32px 60px; + } + + .content-box { + display: flex; + justify-content: space-between; + flex-direction: row; + align-items: center; + margin-left: 38px; + } + + .cow-image { + margin-right: 32px; + } + .tradition { + font-size: 22px; + font-weight: 800; + line-height: 26.82px; + letter-spacing: 0.04em; + text-align: center; + } + + .how-is-title { + font-size: 34px; + font-weight: 400; + line-height: 42.73px; + letter-spacing: 0.06em; + text-align: center; + } + + .first-paragraph, + .second-paragraph { + font-family: 'Montserrat', sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 21.12px; + letter-spacing: 0.04em; + text-align: left; + } + + .special-paragraph { + font-family: 'Montserrat', sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 21.12px; + letter-spacing: 0.04em; + text-align: left; + } + + .advantages-list { + justify-content: space-between; + flex-direction: row; + } + + .advantages-svg { + width: 50px; + height: 50px; + border-radius: 25px; + background: rgba(248, 210, 78, 1); + margin-bottom: 32px; + } + + .advantages-title { + font-family: 'Montserrat', sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 43.88px; + letter-spacing: 0.04em; + text-align: center; + } + + .advantages-list:last-child { + gap: 22px; + } + + .advantages-title { + font-size: 48px; + font-weight: 700; + line-height: 58.51px; + letter-spacing: 0.04em; + text-align: center; + } + + .advantages-paragraph { + font-size: 14px; + font-weight: 400; + line-height: 24.36px; + text-align: center; + margin: auto 70px; + } + + .read-btn-container { + margin-left: 36px; + } + + .close-modal-svg { + width: 24px; + height: 24px; + } + + .modal-title { + font-size: 20px; + font-weight: 400; + line-height: 28px; + text-align: center; + + } + + .black-box { + width: 448px; + height: 205px; + } + + .modal-paragraph { + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-align: left; + } +} + +@media (min-width: 1200px) { + .content-box { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 109px; + } + + .tradition { + font-size: 22px; + font-weight: 800; + line-height: 26.82px; + letter-spacing: 0.04em; + text-align: center; + } + + .how-is-title { + font-size: 34px; + font-weight: 400; + line-height: 42.73px; + letter-spacing: 0.06em; + text-align: center; + } + + .all-paragraphs { + margin-top: 135px; + margin-right: 121px; + } + + .first-paragraph { + font-size: 16px; + font-weight: 400; + line-height: 28.16px; + letter-spacing: 0.04em; + text-align: left; + } + + .second-paragraph { + font-size: 14px; + font-weight: 400; + line-height: 27.16px; + letter-spacing: 0.04em; + text-align: left; + } + + .advantages-title { + font-size: 58px; + font-weight: 700; + line-height: 70.7px; + letter-spacing: 0.04em; + text-align: center; + } + + .advantages-paragraph { + font-size: 16px; + font-weight: 400; + line-height: 28.16px; + letter-spacing: 0.02em; + text-align: center; + margin: auto 16px; + } +} \ No newline at end of file diff --git a/src/sass/_contacts.scss b/src/sass/_contacts.scss new file mode 100644 index 00000000000..da1ddec06ba --- /dev/null +++ b/src/sass/_contacts.scss @@ -0,0 +1,413 @@ +body { + margin: 0 auto; + background-color: #84a178; + font-family: 'Montserrat', sans-serif; +} +/* ----- Mobile container width ----- */ +.container { + width: 320px; + margin: 0 auto; + padding: 0 20px; +} +@media (min-width: 480px) { + .container { + width: 480px; + padding: 0 100px; + } +} +@media (min-width: 768px) { + .container { + min-width: 768px; + padding: 0 16px; + } +} +@media (min-width: 1200px) { + .container { + min-width: 1200px; + padding: 0 16px; + } +} +/* ----- Contact section ----- */ +.section-contact { + background-color: #84a178; +} +.contact-container { + padding-bottom: 60px; +} +.contact-card-list { + display: flex; + flex-wrap: wrap; + gap: 16px; + margin-bottom: 20px; +} +.contact-card-item { + width: 280px; + background-color: #fff; + padding: 40px 36px 20px 32px; + border-radius: 24px; +} +.card-location-type { + width: 80px; + padding: 4px 22px; + text-align: center; + border-radius: 4px; + text-transform: uppercase; + background-color: #f8d24e; +} +.card-foodtruck { + width: 130px; +} +.card-title { + font-size: 12px; + font-weight: 500; + line-height: 14.4px; + letter-spacing: 0.04em; + text-align: center; + margin-bottom: 20px; +} +.card-location-list, +.card-week-list { + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 24px; +} +.card-location-text:hover { + text-decoration: underline; + color: #d6936d; + cursor: context-menu; +} +.card-location-text, +.card-week, +.address-link { + font-size: 12px; + font-weight: 500; + line-height: 22.32px; + letter-spacing: 0.04em; + text-align: left; +} +.street > .card-location-text { + color: #d6936d; +} +.horizontal-line { + width: 216px; + border-radius: 1px; + margin-bottom: 24px; +} +.hours { + color: #ababab; +} +.card-address { + display: flex; + flex-direction: column; + gap: 6px; +} +.address-link { + line-height: 19.2px; +} +.contact-btn-box { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 16px; +} +.location-btn, +.franchise-btn { + display: flex; + align-items: center; + width: 196px; + border-radius: 10px; + background-color: #f8d24e; + margin-bottom: 16px; + padding: 12px 0px 12px 40px; + font-family: inherit; + font-size: 14px; + font-weight: 600; + line-height: 18px; + text-align: left; +} +.location-btn svg, +.franchise-btn svg { + margin-left: 4px; +} +.franchise-btn { + padding-left: 55px; + background-color: #84a178; + border: 2px solid #f8d24e; +} +.location-btn:hover { + background-color: #0a8817; +} +.location-btn:focus, +.location-btn:active { + background-color: #0a8817; + color: #fff; +} +.franchise-btn:hover { + border-color: #0a8817; +} +.franchise-btn:focus, +.franchise-btn:active { + border-color: #0a8817; + color: #fff; +} +.location-btn:focus, +.location-btn:active, +.franchise-btn:focus svg, +.franchise-btn:active svg { + fill: #fff; +} +.location-btn:disabled, +.franchise-btn:disabled { + background-color: #ababab; +} +@media (min-width: 768px) { + .contact-card-list { + margin-bottom: 40px; + } + .contact-card-item { + flex-basis: calc((100% - 32px) / 3); + padding-right: 41px; + } + .contact-btn-box { + flex-direction: row; + } + .card-title { + font-size: 16px; + font-weight: 500; + line-height: 22.4px; + letter-spacing: 0.04em; + text-align: center; + padding: 4px 13px; + } + .card-foodtruck { + width: 138px; + } + .card-location-text, + .card-week, + .address-link { + font-size: 14px; + font-weight: 500; + line-height: 26.04px; + letter-spacing: 0.04em; + text-align: left; + } + .horizontal-line { + width: 176px; + } + .location-btn, + .franchise-btn { + font-size: 14px; + font-weight: 600; + line-height: 18px; + text-align: center; + } +} +@media (min-width: 1200px) { + .contact-card-list { + gap: 32px; + margin-bottom: 60px; + } + .contact-card-item { + flex-basis: calc((100% - 64px) / 3); + } + .card-location-text, + .card-week, + .address-link { + font-size: 16px; + font-weight: 500; + line-height: 29.76px; + letter-spacing: 0.04em; + text-align: left; + } + .horizontal-line { + width: 288px; + } +} +/* .gallery-container { + background-color: #84A178; +} */ +.contact-container { + position: relative; +} +.contact-container.opaq-bg { + filter: blur(5px); + opacity: 0.4; +} +.modal-window { + position: absolute; + top: 420%; + top: 480 left 50%; + transform: translate(-50%, -50%); + height: 674px; + width: 280px; + padding: 4px 28px 28px; + background-color: #fff; + border: 2px solid #f8d24e; + border-radius: 10px; + visibility: hidden; + opacity: 0; +} +.modal-window.location { + /* height: 45%; */ + height: 365px; + top: 400%; +} +.modal-window.franchise.is-open, +.modal-window.location.is-open { + visibility: visible; + opacity: 1; +} + +.modal-close-btn-contacts { + position: absolute; + top: 2%; + right: 5%; + background-color: transparent; +} +.modal-close-icon { + fill: #131313; +} +.modal-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.google-map { + border-radius: 10px; +} +.google-map iframe { + height: 199px; + width: 224px; +} +.open-map-btn { + display: inline-block; + margin-top: 24px; + background-color: #f8d24e; + padding: 12px 34px; + border-radius: 10px; + font-size: 12px; + font-weight: 600; + line-height: 14.63px; +} + +.modal-franchise-form, +.modal-reusable-form { + /* max-width: 224px; */ + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 12px; + margin-top: 24px; +} + +.modal-title-contacts { + font-family: 'Seymour One', sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: center; + margin-bottom: 20px; + margin-top: 24px; +} +.modal-info { + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; +} +.franchise-form-input, +.franchise-form-textarea, +.reusable-form-input, +.reusable-form-textarea { + background-color: #f8d24e1a; + border: 1px solid #84a178; + border-radius: 10px; + padding: 8px 12px 7px; + font-size: 12px; + font-weight: 400; + line-height: 16.8px; + text-align: left; +} +.franchise-form-textarea { + padding: 8px 12px 0; +} +.franchise-form-input::placeholder, +.franchise-form-textarea::placeholder { + color: #131313; + opacity: 1; +} + +.franchise-form-btn, +.reusable-form-btn { + width: 55%; + margin-top: 24px; + background-color: #f8d24e; + padding: 12px 34px; + border-radius: 10px; + align-self: center; + font-size: 12px; + font-weight: 600; + line-height: 14.63px; + text-align: center; +} + +@media (min-width: 768px) { + .modal-window { + top: 380%; + } + .modal-window.location { + top: 380%; + } +} + +@media (min-width: 1200px) { + .modal-window { + top: 300%; + } + .modal-window.franchise { + height: 668px; + width: 568px; + padding: 4px 60px 32px; + } + .modal-window.location { + height: 458px; + width: 568px; + padding: 4px 60px 32px; + } + .google-map iframe { + width: 448px; + height: 260px; + } + .open-map-btn { + font-size: 14px; + font-weight: 600; + line-height: 17.07px; + text-align: center; + } + .modal-title-contacts { + font-size: 20px; + font-weight: 400; + line-height: 28px; + text-align: center; + } + .modal-info { + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-align: left; + } + .franchise-form-input, + .franchise-form-textarea { + padding: 11px 16px; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + } + .franchise-form-textarea { + padding: 11px 16px; + } +} diff --git a/src/sass/_customer-reviews.scss b/src/sass/_customer-reviews.scss new file mode 100644 index 00000000000..990182ed677 --- /dev/null +++ b/src/sass/_customer-reviews.scss @@ -0,0 +1,193 @@ +body { + margin: 0 auto; + background-color: rgba(132, 161, 120, 1);; + font-family: 'Montserrat', sans-serif; +} + +/* ----- Mobile container width ----- */ +.container { + width: 320px; + margin: 0 auto; + padding: 0 20px; +} + +.customer-review-article { + background-color: #fff; + position: relative; + z-index: 1; +} + +.top-image-container { + width: 280px; + height: 130px; + left: 20px; + gap: 0px; + border-radius: 8px 0px 0px 0px; + opacity: 0px; + transform: translateY(-75%); + z-index: 2; + text-align: center; +} + +.top-image { + z-index: 2; + gap: 0px; + border-radius: 8px 0px 0px 0px; +} + +@media (min-width: 480px) { + .container { + width: 480px; + padding: 0 100px; + } +} + +@media (min-width: 768px) { + .container { + min-width: 768px; + padding: 0 16px; + } +} + +@media (min-width: 1200px) { + .container { + min-width: 1200px; + padding: 0 16px; + } +} +/* ----- Mobile container width ----- */ + +.customer-review-container { + padding-bottom: 60px; +} + +.customer-section { + background-image: url(/src/images/ice-cream-background.jpg); + background-size: cover; + background-repeat: no-repeat; + width: 100%; + max-width: 100%; +} + +// <------Carousel part-------> + +.carousel { + position: relative; + width: 100%; + max-width: 100%; + overflow: hidden; +} + +.carousel-inner { + display: flex; + transition: transform 0.5s ease; +} + +.carousel-item { + min-width: 100%; + text-align: center; + padding: 20px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + display: none; +} + +.carousel-item.active { + display: flex; +} + +.review-image { + width: 85px; + height: 85px; + border-radius: 50%; + object-fit: cover; + object-position: top; + margin-bottom: 32px; +} + +.review-paragraph { + font-size: 12px; + font-weight: 400; + line-height: 30.6px; + text-align: center; + padding: 35px 39px 35px 39px; +} + +.review-container { + width: 280px; + height: 256px; + left: 20px; + top: 327px; + background: #84a178; + border-radius: 10px; + color: #fcfcfc; + font-family: Montserrat; + font-size: 12px; + font-weight: 400; + line-height: 30.6px; + text-align: center; +} + +.location-paragraph { + font-family: Montserrat; + font-size: 20px; + font-weight: 500; + line-height: 37.2px; + text-align: center; + padding-top: 32px; +} +p { + margin: 0; +} + +/* Navigation Buttons */ +.prev-btn, +.next-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + background-color: #fff; + border: none; + font-size: 20px; + cursor: pointer; + padding: 8px; + z-index: 10; + border-radius: 50%; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + display: none; +} + +.prev-btn { + left: 5px; +} + +.next-btn { + right: 5px; +} + +/* Dots Navigation */ +.carousel-dots { + display: flex; + justify-content: center; + gap: 18px; + padding: 10px 0; + padding-top: 12px; +} + +.dot { + height: 12px; + width: 12px; + margin: 0 4px; + background-color: #d9d9d9; + border-radius: 50%; + display: inline-block; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.dot.active { + background-color: #84a178; +} diff --git a/src/sass/_example.scss b/src/sass/_example.scss index 05c89b464f5..61703062ddb 100755 --- a/src/sass/_example.scss +++ b/src/sass/_example.scss @@ -1,28 +1,28 @@ -.example { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, - Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - line-height: 1.5; - background-color: #fff; - color: #2f2f37; - max-width: 960px; - padding: 16px; -} +// .example { +// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, +// Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +// line-height: 1.5; +// background-color: #fff; +// color: #2f2f37; +// max-width: 960px; +// padding: 16px; +// } -.example code { - font-family: monospace; - font-size: 16px; - font-weight: 700; - background-color: #ff6b0a; - color: #fff; - padding: 2px 6px; - border-radius: 2px; -} +// .example code { +// font-family: monospace; +// font-size: 16px; +// font-weight: 700; +// background-color: #ff6b0a; +// color: #fff; +// padding: 2px 6px; +// border-radius: 2px; +// } -.example .background { - height: 240px; - // ❗️❗️❗️ The path to images from a SASS file - // is always the same as from the css folder. - background-image: url('../images/logo.png'); - background-size: cover; - background-position: center; -} +// .example .background { +// height: 240px; +// // ❗️❗️❗️ The path to images from a SASS file +// // is always the same as from the css folder. +// background-image: url('../images/logo.png'); +// background-size: cover; +// background-position: center; +// } diff --git a/src/sass/_footer.scss b/src/sass/_footer.scss new file mode 100644 index 00000000000..2f1a030bf1a --- /dev/null +++ b/src/sass/_footer.scss @@ -0,0 +1,70 @@ +.footer-container{ + background-color: #84A178; + width: 320px; + margin: 0 auto; +} + +.first-p { + font-weight: 700; + font-size: 18px; + line-height: 21.94px; + text-transform: uppercase; + width: 232px; + color: #FCFCFC; + + margin-bottom: 16px; + padding: 60px 66px 16px 22px; +} + +.second-p { + font-weight: 700; + font-size: 34px; + line-height: 41.45px; + width: 200; + color: #FCFCFC; + text-transform: uppercase; + padding: 16px 0 60px 20px; + letter-spacing: 0.04em; +} + +.footer-svg { + display: flex; + gap: 20px; + justify-content: end; +} + +.footer-contact{ + text-align: right; +} + +.footer-p { + font-weight: 700; + font-size: 12px; + line-height: 22px; + + color: #131313; +} + +.contact-tel { + font-weight: 700; + font-size: 12px; + line-height: 22px; + + color: #FCFCFC; +} + +.footer-line { + width: 320px; + border: 2px solid #E1E1E1; +} + +.footer-bottom-p { + font-weight: 700; + font-size: 14px; + line-height: 21.28px; + text-align: center; + width: 280; + color: #7a7a7a; + padding: 20px 20px 40px 56px; +} + diff --git a/src/sass/_hero-section.scss b/src/sass/_hero-section.scss new file mode 100644 index 00000000000..cff167572ce --- /dev/null +++ b/src/sass/_hero-section.scss @@ -0,0 +1,588 @@ +.hero-container { + min-width: 320px; + margin: 0 auto; + padding: 0 20px; + padding-top: 50px; +} + +.hero-section { + height: 502px; + gap: 0px; + opacity: 0px; + background-color: #84a178; +} + +.hero-section-header { + width: 247px; + height: 97px; + top: 99px; + left: 20px; + gap: 0px; + opacity: 0px; + font-family: Seymour One; + font-size: 26px; + font-weight: 400; + line-height: 32.68px; + letter-spacing: 0.04em; + text-align: left; + color: #fcfcfc; +} + +.hero-header-span { + font-family: Seymour One; + font-size: 34px; + font-weight: 400; + line-height: 32.81px; + text-align: left; +} + +.hero-section-button:hover { + border: 2px solid #0a8817; +} + +.hero-section-button:focus { + border: 2px solid #0a8817; + color: #fcfcfc; +} + +.hero-section-button2:hover { + color: #0a8817; +} + +.hero-section-button2:focus { + color: #fcfcfc; +} + +.hero-section-button { + height: 38px; + top: 228px; + left: 20px; + gap: 0px; + opacity: 0px; + margin-top: 32px; + font-family: Montserrat; + font-size: 12px; + font-weight: 600; + line-height: 14.63px; + text-align: center; + width: 108px; + height: 38px; + gap: 0px; + border: 2px solid #f8d24e; + border-radius: 8px; + background-color: #84a178; +} + +.hero-section-button2 { + height: 24px; + top: 235px; + left: 140px; + gap: 0px; + opacity: 0px; + font-family: Montserrat; + font-size: 12px; + font-weight: 600; + line-height: 14.63px; + text-align: center; + margin-top: 39px; + margin-left: 12px; + background-color: #84a178; + color: #f8d24e; + text-decoration: underline; +} + +.hero-paragraph { + width: 165px; + height: 68px; + top: 278px; + left: 216px; + gap: 0px; + opacity: 0px; + font-family: DM Sans; + font-size: 12px; + font-weight: 400; + line-height: 16.8px; + text-align: left; + color: #ffffff; + display: none; +} + +.icecream-mobile { + height: 217px; + top: 285px; + left: 83px; + gap: 0px; + opacity: 0px; + position: absolute; +} + +.icecream-tabletrez { + display: none; +} + +.icecream-plate { + display: none; +} + +.icecream-effect { + position: absolute; + height: 50px; + top: 452px; + left: 0%; + gap: 0px; + opacity: 0px; +} + +.icecream-480rez { + display: none; +} + +.icon-arrow { + display: none; +} + +.icon-16 { + display: none; +} + +.icon-23 { + display: none; +} + +.icon-tablet-effect { + display: none; +} + +.icon-desktop-effect { + display: none; +} + +.icon16-text { + display: none; +} + +.icon23-text { + display: none; +} + +.icecream-desktop { + display: none; +} + +.icecream-plate-desktop { + display: none; +} + +// 480 Resolution // + +@media (min-width: 480px) { + .hero-section { + min-width: 480px; + height: 415px; + gap: 0px; + opacity: 0px; + background-color: #84a178; + } + + .hero-section-header { + height: 97px; + top: 98px; + left: 20px; + gap: 0px; + opacity: 0px; + } + + .icecream-mobile { + display: none; + } + .icecream-480rez { + display: initial; + position: absolute; + + height: 267px; + top: 148px; + left: 242px; + gap: 0px; + opacity: 0px; + } + + .icecream-effect { + width: 330px; + height: 52px; + top: 363px; + left: 150px; + padding: 0.93px 0px 0.5px 9px; + gap: 0px; + opacity: 0px; + } +} + +// Tablet Resolution // + +@media (min-width: 768px) { + .hero-container { + min-width: 768px; + margin: 0 auto; + padding: 0 32px; + padding-top: 80px; + } + + .hero-section { + min-width: 768px; + height: 415px; + gap: 0px; + opacity: 0px; + } + + .hero-section-header { + height: 97px; + top: 80px; + left: 32px; + gap: 0px; + opacity: 0px; + font-family: Seymour One; + font-size: 26px; + font-weight: 400; + line-height: 32.68px; + letter-spacing: 0.04em; + text-align: left; + } + + .hero-header-span { + font-family: Seymour One; + font-size: 34px; + font-weight: 400; + line-height: 32.81px; + text-align: left; + } + + .hero-section-button { + height: 38px; + top: 201px; + left: 32px; + gap: 0px; + opacity: 0px; + font-family: Montserrat; + font-size: 12px; + font-weight: 600; + line-height: 14.63px; + text-align: center; + } + + .hero-section-button2 { + height: 24px; + top: 208px; + left: 152px; + gap: 0px; + opacity: 0px; + font-family: Montserrat; + font-size: 12px; + font-weight: 600; + line-height: 14.63px; + text-align: center; + } + + .hero-paragraph { + display: inherit; + position: absolute; + } + .icecream-480rez { + display: none; + } + + .icecream-plate { + display: inherit; + position: absolute; + width: 152px; + height: 152px; + top: 251px; + left: 32px; + gap: 0px; + opacity: 0px; + z-index: 1; + } + + .icecream-tabletrez { + display: inherit; + position: absolute; + width: 268px; + height: 329px; + top: 86px; + left: 408px; + gap: 0px; + opacity: 0px; + } + + .icecream-effect { + display: none; + } + + .icon-tablet-effect { + display: inherit; + position: absolute; + width: 768px; + height: 67.79px; + top: 345.95px; + gap: 0px; + opacity: 0px; + right: 0.5%; + } + + .icon-arrow { + display: inherit; + position: absolute; + width: 40px; + height: 16px; + top: 375px; + left: 216px; + gap: 0px; + opacity: 0px; + } + + .icon-16 { + display: inherit; + position: absolute; + width: 32px; + height: 34px; + top: 94px; + left: 704px; + gap: 0px; + opacity: 0px; + } + + .icon-23 { + display: inherit; + position: absolute; + width: 36px; + height: 34px; + top: 162px; + left: 700px; + gap: 0px; + opacity: 0px; + } + + .icon16-text { + display: inherit; + position: absolute; + width: 21px; + height: 10px; + top: 132px; + left: 715px; + gap: 0px; + opacity: 0px; + font-family: Montserrat; + font-size: 8px; + font-weight: 400; + line-height: 9.75px; + text-align: right; + color: #fcfcfc; + } + + .icon23-text { + display: inherit; + position: absolute; + width: 46px; + height: 10px; + top: 200px; + left: 690px; + gap: 0px; + opacity: 0px; + font-family: Montserrat; + font-size: 8px; + font-weight: 400; + line-height: 9.75px; + text-align: right; + color: #fcfcfc; + } +} + +@media (min-width: 1200px) { + .hero-container { + min-width: 1200px; + margin: 0 auto; + padding: 0 16px; + padding-top: 118px; + } + + .hero-section { + min-width: 1200px; + height: 664px; + gap: 0px; + opacity: 0px; + } + + .icecream-tabletrez { + display: none; + } + + .icecream-plate { + display: none; + } + + .icon-tablet-effect { + display: none; + } + + .hero-section-header { + position: absolute; + width: 367px; + height: 144px; + top: 118px; + left: 16px; + gap: 0px; + opacity: 0px; + font-family: Seymour One; + font-size: 38px; + font-weight: 400; + line-height: 47.76px; + letter-spacing: 0.04em; + text-align: left; + } + + .hero-header-span { + font-family: Seymour One; + font-size: 38px; + font-weight: 400; + line-height: 47.76px; + letter-spacing: 0.04em; + text-align: left; + } + + .hero-section-button { + position: absolute; + width: 134px; + height: 42px; + top: 290px; + left: 16px; + gap: 0px; + opacity: 0px; + font-family: Montserrat; + font-size: 14px; + font-weight: 600; + line-height: 18px; + text-align: center; + margin-top: 18px; + + z-index: 1; + } + + .hero-section-button2 { + position: absolute; + width: 154px; + height: 40px; + top: 290px; + left: 162px; + gap: 0px; + opacity: 0px; + font-family: Montserrat; + font-size: 14px; + font-weight: 600; + line-height: 17.07px; + text-align: center; + margin-top: 20px; + z-index: 2; + } + + .hero-paragraph { + position: absolute; + width: 200px; + height: 80px; + top: 450px; + left: 257px; + gap: 0px; + opacity: 0px; + font-family: DM Sans; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + color: #ffffff; + } + + .icecream-desktop { + display: inherit; + position: absolute; + width: 456px; + height: 560px; + top: 104px; + left: 652px; + gap: 0px; + opacity: 0px; + + z-index: 2; + } + + .icecream-plate-desktop { + display: inherit; + position: absolute; + width: 225px; + height: 225px; + top: 374px; + left: 16px; + gap: 0px; + opacity: 0px; + } + + .icon-arrow { + position: absolute; + width: 40px; + height: 16px; + top: 545px; + left: 257px; + gap: 0px; + opacity: 0px; + } + + .icon-desktop-effect { + display: inherit; + position: absolute; + width: 1195px; + height: 383.46px; + top: 279.49px; + gap: 0px; + opacity: 0px; + right: 0.5%; + } + + .icon-16 { + position: absolute; + width: 52px; + height: 56px; + top: 126px; + left: 1132px; + gap: 0px; + opacity: 0px; + } + + .icon-23 { + position: absolute; + width: 59px; + height: 56px; + top: 219px; + left: 1125px; + gap: 0px; + opacity: 0px; + } + + .icon16-text { + position: absolute; + width: 37px; + height: 17px; + top: 186px; + left: 1147px; + gap: 0px; + opacity: 0px; + color: #fcfcfc; + } + + .icon23-text { + position: absolute; + width: 79px; + height: 17px; + top: 279px; + left: 1105px; + gap: 0px; + opacity: 0px; + color: #fcfcfc; + } +} diff --git a/src/sass/_nav-header.scss b/src/sass/_nav-header.scss new file mode 100644 index 00000000000..155f1aba872 --- /dev/null +++ b/src/sass/_nav-header.scss @@ -0,0 +1,384 @@ +.header-container { + background-color: #84a178; + min-width: 320px; + margin: 0 auto; +} + +.header-nav { + background-color: #84a178; +} + +.header-nav-list { + font-weight: 700; + font-size: 32px; + line-height: 39px; + text-align: center; +} + +.nav-bar-list { + display: flex; + flex-direction: column; + gap: 32px; + justify-content: center; + align-items: center; + margin-bottom: 110px; +} + +.nav-bar-list .how-its-made { + color: #fff; +} + +.menu-open-btn, +.menu-close-btn { + background-color: inherit; +} + +.buy-now-btn.tablet-btn { + display: none; +} + +.buy-now-btn { + font-size: 14px; + font-weight: 600; + line-height: 17.07px; + text-align: center; + padding: 12px 51px 12px 36px; + display: flex; + align-items: center; + margin: 0 auto; + border-radius: 10px; + background-color: #f8d24e; +} + +.buy-now-image-box { + width: 100%; + height: 100%; + position: relative; + outline: 2px solid #96af8c; + border-radius: 15px; + margin-top: 72px; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 72px; +} + +.buy-now-image-box .box-ice-coffee { + background-color: #efd478; + outline-color: #efd478; +} + +.hamburger-menu { + position: fixed; + visibility: hidden; + opacity: 0; + top: 0; + left: 0; + width: 320px; + height: 100vh; + background-color: #84a178; + padding: 12px 16px 40px 16px; + + transform: translateY(-100%); + z-index: 999; + transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), + transform 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.hamburger-menu.is-open { + visibility: visible; + opacity: 1; + transform: translateY(0); +} +.hamburger-menu-bar { + display: flex; + justify-content: space-between; + margin-bottom: 50px; +} +.mobile-menu { + display: flex; + justify-content: space-between; + padding: 12px 16px 0; +} +.buy-button { + display: none; +} + +@media (min-width: 480px) { + .hamburger-menu { + width: 480px; + } + .logo-icon { + width: 48px; + height: 44px; + } +} + +@media (min-width: 768px) { + .mobile-menu { + padding-top: 20px; + } + .buy-now-btn.tablet-btn { + display: inline-block; + } + + .menu-buttons { + .header-container { + background-color: #84a178; + width: 320px; + margin: 0 auto; + } + + .header-nav { + background-color: #84a178; + } + + .header-nav-list { + font-weight: 700; + font-size: 32px; + line-height: 39px; + text-align: center; + } + + .home { + font-weight: 700; + font-size: 32px; + line-height: 39px; + text-align: center; + width: 101px; + color: #fcfcfc; + padding: 51px 0 32px 110px; + } + + .how-its-made { + font-weight: 700; + font-size: 32px; + line-height: 39px; + text-align: center; + width: 257px; + color: #131313; + padding: 32px 0 32px 32px; + } + + .our-products { + font-weight: 700; + font-size: 32px; + line-height: 39px; + text-align: center; + width: 223px; + color: #fcfcfc; + padding: 32px 0 32px 49px; + } + + .contact { + font-weight: 700; + font-size: 32px; + line-height: 39px; + text-align: center; + width: 133px; + color: #fcfcfc; + padding: 32px 0 216px 32px; + } + + .buy-now-btn { + background-color: #f8d24e; + display: flex; + justify-content: center; + align-items: center; + margin-top: 110px; + padding: 12px 51px 12px 36px; + border-radius: 10px; + font-size: 14px; + font-weight: 600; + line-height: 17.07px; + cursor: pointer; + text-align: center; + gap: 4px; + } + + .modal-buy-now { + width: 280px; + } + + .buy-now-image-box { + width: 100%; + height: 100%; + position: relative; + outline: 2px solid #96af8c; + border-radius: 15px; + margin-top: 72px; + display: flex; + justify-content: center; + align-items: center; + } + + .menu-open-btn { + align-self: center; + margin-right: 32px; + text-align: center; + } + + .menu-open-btn svg { + fill: #fff; + } + } + + .modal-buy-now { + position: absolute; + visibility: hidden; + opacity: 0; + top: 0; + left: 20px; + width: 280px; + height: 135vh; + background-color: #fff; + border: 2px solid #f8d24e; + border-radius: 10px; + padding: 0 16px 40px 16px; + transform: translateY(-100%); + z-index: 1000; + transition: opacity; + display: flex; + flex-direction: column; + gap: 20px; + } + + .modal-buy-now .menu-close-btn { + position: absolute; + top: 12px; + right: 12px; + } + + .modal-buy-now .modal-title { + margin: 0; + width: auto; + height: auto; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: center; + margin-top: 28px; + } + + .buy-now-image-box .box-ice-coffee { + background-color: #efd478; + outline-color: #efd478; + } + + .buy-now-image-box .box-milkshake { + outline-color: #d6936d; + } + + .buy-now-product-img { + /* width: 132px; */ + border-radius: 50%; + position: absolute; + transform: translateY(-50%); + box-shadow: 0px 10px 0px #9cbe8fb2, 0px 15px 20px 0px #0a881740; + } + + .buy-now-product-img .ice-coffee { + box-shadow: 0px 10px 0px #f8d24eb2, 0px 15px 20px 0px #99721740; + } + + .product-image .milkshake { + box-shadow: 0px 10px 0px #d5753fb2, 0px 15px 20px 0px #00000040; + } + + .buy-now-card-title { + position: absolute; + bottom: 20px; + align-self: center; + font-size: 16px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 0.04em; + text-transform: uppercase; + } + + .product-card-list { + display: flex; + flex-direction: column; + } + + .modal-buy-now { + background-color: #84a178; + } + + .modal-buy-now.is-open { + visibility: visible; + opacity: 1; + transform: translateY(0); + } + + .product-card-list { + display: flex; + // flex-direction: column; + justify-content: center; + align-items: center; + gap: 84px; + flex-wrap: wrap; + + margin-bottom: 84px; + } + + .product-card-list li { + // width: 55%; + width: 132px; + height: 135px; + } + + .image-box { + width: 100%; + height: 100%; + position: relative; + outline: 2px solid #96af8c; + border-radius: 15px; + margin-top: 64px; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 72px; + } + + .image-box.box-ice-coffee { + background-color: #efd478; + outline-color: #efd478; + } + + .image-box.box-milkshake { + outline-color: #d6936d; + } + + .product-image { + // width: 132px; + // height: 139px; + border-radius: 50%; + position: absolute; + transform: translateY(-45%); + box-shadow: 0px 10px 0px #9cbe8fb2, 0px 15px 20px 0px #0a881740; + } + + .product-image.ice-coffee { + box-shadow: 0px 10px 0px #f8d24eb2, 0px 15px 20px 0px #99721740; + } + + .product-image.milkshake { + box-shadow: 0px 10px 0px #d5753fb2, 0px 15px 20px 0px #00000040; + } + + .product-card-title { + position: absolute; + bottom: 20px; + align-self: center; + font-size: 16px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 0.04em; + text-transform: uppercase; + } + + .buy-now-form .modal-reusable-form { + margin: 0 auto; + } +} diff --git a/src/sass/_products.scss b/src/sass/_products.scss new file mode 100644 index 00000000000..9b9867824e8 --- /dev/null +++ b/src/sass/_products.scss @@ -0,0 +1,623 @@ +body { + margin: 0 auto; + font-family: 'Montserrat', sans-serif; + } + + /* ----- Mobile container width ----- */ + + .container { + width: 320px; + margin: 0 auto; + padding: 0 20px; + } + + @media (min-width: 480px) { + .container { + width: 480px; + padding: 0 80px; + } + } + + @media (min-width: 768px) { + .container { + min-width: 768px; + padding: 0 32px; + } + } + + @media (min-width: 1200px) { + .container { + min-width: 1200px; + padding: 0 16px; + } + } + + /* ----- Products section ----- */ + + .section-products { + background-image: url(../images/ice-cream-background-mobile.jpg); + background-position: 535px -120px; + position: relative; + } + + .section-products-header { + display: block; + padding-top: 60px; + text-align: center; + margin-bottom: 148px; + } + + .section-products-header-span { + font-size: 18px; + font-weight: 800; + line-height: 1.218; + text-align: center; + color: #131313; + text-transform: uppercase; + } + + .section-products-header-title { + padding-top: 12px; + font-family: 'Seymour One', sans-serif; + font-size: 30px; + font-weight: 400; + line-height: 1.257; + letter-spacing: 0.04em; + text-align: center; + text-transform: uppercase; + color: #131313; + } + + .products-grid-list { + flex-wrap: wrap; + gap: 14.5px; + display: flex; + } + + .product-card-item { + width: 280px; + height: 420px; + border-radius: 24px; + position: relative; + } + + .ice-cream-container { + background-color: #AEC6A5; + position: relative; + display: flex; + justify-content: center; + } + + .ice-cream-container::after { + content: ''; + display: block; + background-image: url('../images/products-ice-cream.jpg'); + background-size: cover; + background-position: center; + width: 200px; + height: 200px; + border-radius: 100px; + position: absolute; + top: -25%; + } + + .ice-cream-container::before { + content: ''; + display: block; + width: 200px; + height: 200px; + border-radius: 50%; + background-color: #AEC6A5; + position: absolute; + top: -193px; + left: 50%; + transform: translate(-50%, 50%); + box-shadow: 0px 5.34px 20.03px 0px #0A881740; + } + + .ice-coffee-container { + background-color: #EFD478; + position: relative; + display: flex; + justify-content: center; + margin-top: 168px; + } + + .ice-coffee-container::after { + content: ''; + display: block; + background-image: url('../images/products-ice-coffee.jpg'); + background-size: cover; + background-position: center; + width: 200px; + height: 200px; + border-radius: 100px; + position: absolute; + top: -25%; + } + + .ice-coffee-container::before { + content: ''; + display: block; + width: 200px; + height: 200px; + border-radius: 50%; + background-color: #EFD478; + position: absolute; + top: -193px; + left: 50%; + transform: translate(-50%, 50%); + box-shadow: 0px 5.4px 20.26px 0px #99721740; + } + + .milkshakes-container { + background-color: #D6936D; + position: relative; + display: flex; + justify-content: center; + margin-top: 168px; + margin-bottom: 60px; + } + + .milkshakes-container::after { + content: ''; + display: block; + background-image: url('../images/products-milkshakes.jpg'); + background-size: cover; + background-position: center; + width: 200px; + height: 200px; + border-radius: 100px; + position: absolute; + top: -25%; + } + + .milkshakes-container::before { + content: ''; + display: block; + width: 200px; + height: 200px; + border-radius: 50%; + background-color: #D6936D; + position: absolute; + top: -193px; + left: 50%; + transform: translate(-50%, 50%); + box-shadow: 0px 5.41px 20.3px 0px #00000040; + } + + .product-card-title { + font-size: 20px; + font-weight: 700; + line-height: 1.219; + letter-spacing: 0.04em; + text-align: center; + text-transform: uppercase; + color: #131313; + margin-bottom: 40px; + padding-top: 123px; + } + + .product-card-paragraph { + width: 200px; + font-size: 14px; + font-weight: 400; + line-height: 1.76; + letter-spacing: 0.04em; + text-align: center; + color: #131313; + } + + .product-card-arrow-button { + display: flex; + background-color: transparent; + align-items: center; + cursor: pointer; + bottom: 16px; + position: absolute; + transform: translateX(136%); + } + + .products-container { + position: relative; + } + + .container.opaq-bg { + filter: blur(5px); + opacity: 0.4; + } + + /* ----- Modal window Ingredients ----- */ + + .modal-window-ingredients { + position: absolute; + top: 32%; + left: 50%; + transform: translate(-50%, -50%); + height: 968px; + width: 280px; + padding: 4px 28px 28px; + background-color: #FCFCFC; + border: 2px solid #F8D24E; + border-radius: 10px; + cursor: pointer; + + visibility: hidden; + opacity: 0; + } + + .modal-window-ingredients.is-open { + visibility: visible; + opacity: 1; + } + + .modal-close-button { + position: absolute; + top: 12px; + right: 12px; + background-color: transparent; + cursor: pointer; + } + + .modal-close-icon { + fill: #131313; + } + + .modal-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .modal-title-ingredients { + font-family: 'Seymour One', sans-serif; + font-size: 20px; + font-weight: 400; + line-height: 1.4; + text-align: center; + margin-bottom: 20px; + margin-top: 28px; + color: #131313; + width: 142px; + } + + .modal-window-ingredients-img { + display: flex; + justify-content: center; + width: 132px; + height: 132px; + border-radius: 50%; + position: relative; + box-shadow: + 0px 7px 0px #9CBE8FB2, + 0px 12.26px 19.73px 0px #0A881740; + } + + .modal-window-quantities-container { + display: flex; + justify-content: space-around; + align-items: center; + gap: 9px; + padding-top: 22px; + } + + .modal-window-quantities-item { + display: flex; + flex-direction: column; + align-items: center; + + position: relative; + padding-top: 21.5px; + } + + .modal-window-quantities-circle { + width: 43px; + height: 43px; + border-radius: 50%; + background-color: #9CBE8F; + border: 2px solid #9CBE8F; + box-shadow: 0px 6px 20px 0px #0A881740; + display: flex; + justify-content: center; + align-items: center; + font-weight: 500; + font-size: 10px; + color: #131313; + line-height: 2.8; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: 1; + } + + .modal-window-quantities-label { + font-weight: 400; + font-size: 10px; + line-height: 1.219; + color: #131313; + border: 2px solid #9CBE8F; + width: 53px; + height: 72px; + border-radius: 40px; + display: flex; + justify-content: center; + align-items: flex-end; + padding-bottom: 8px; + margin-top: -22px; + } + + .modal-window-ingredients-subtitle { + font-size: 20px; + font-weight: 500; + line-height: 1.4; + text-align: center; + color: #131313; + padding-top: 40px; + } + + .modal-window-ingredients-list { + padding-top: 24px; + } + + .modal-window-ingredients-list-item { + display: flex; + justify-content: space-between; + margin-bottom: 11px; + font-weight: 400; + font-size: 14px; + line-height: 1.76; + letter-spacing: 0.04em; + text-align: center; + color: #131313; + } + + .ingredient-name { + margin-right: 56px; + } + + .modal-window-ingredients-form { + margin-top: 40px; + } + + .modal-window-ingredients-form-element { + background-color: #F8D24E1A; + border: 1px solid #84A178; + width: 240px; + height: 42px; + border-radius: 10px; + margin-bottom: 16px; + font-weight: 400; + font-size: 14px; + line-height: 1.4; + color: #131313; + align-items: center; + padding-left: 10.43px; + } + + textarea.modal-window-ingredients-form-element { + height: 84px; + padding-top: 11px; + } + + .modal-window-ingredients-submit-button { + display: block; + min-width: 132px; + height: 42px; + margin: auto; + border-radius: 10px; + background-color: #F8D24E; + font-weight: 600; + font-size: 14px; + line-height: 1.219; + } + + /* ----- End Modal window Ingredients ----- */ + + @media (min-width: 480px) { + .section-products { + background-image: url(../images/ice-cream-background-mobile.jpg); + background-position: 590px -140px; + } + + .product-card-item { + min-width: 320px; + height: 428px; + } + + .products-grid-list { + align-items: center; + justify-content: center; + } + + .product-card-title { + padding-top: 126px; + } + } + + @media (min-width: 768px) { + .section-products { + background-image: url(../images/ice-cream-background-tablet.jpg); + background-size: 125%; + background-position: -30px -122px; + } + + .section-products-header { + margin-bottom: 200px; + } + + .section-products-header-span { + font-size: 22px; + line-height: 1.219; + } + + .section-products-header-title { + font-size: 34px; + line-height: 1.256; + } + + .product-card-item { + flex: calc(33.333% - 16px); + min-width: 224px; + } + + .products-grid-list { + align-items: flex-start; + } + + .ice-coffee-container, + .milkshakes-container { + margin-top: 0; + } + + .product-card-title { + font-size: 22px; + padding-top: 108px; + } + + .product-card-paragraph { + width: 172px; + } + } + + @media (min-width: 1200px) { + .section-products { + background-image: url(../images/ice-cream-background-desktop.jpg); + background-size: cover; + background-position: 0 0; + background-repeat: no-repeat; + } + + .section-products-header { + padding-bottom: 120px; + } + + .section-products-header-span { + font-size: 30px; + } + + .section-products-header-title { + font-size: 36px; + line-height: 1.173; + letter-spacing: 0.06em; + } + + .products-grid-list { + gap: 29px; + } + + .product-card-item { + flex-basis: calc((100% - 58px) / 3); + min-width: 370px; + height: 536px; + } + + .ice-cream-container { + box-shadow: 0px 8px 30px 0px #D414431A; + } + + .product-card-title { + font-size: 30px; + padding-top: 165px; + } + + .product-card-paragraph { + width: 246px; + font-size: 16px; + } + + .product-card-arrow-button { + bottom: 60px; + transform: translateX(180%); + } + + .ice-cream-container::after, + .ice-coffee-container::after, + .milkshakes-container::after { + width: 302px; + height: 302px; + border-radius: 150px; + top: -34%; + } + + .ice-cream-container::before, + .ice-coffee-container::before, + .milkshakes-container::before { + width: 302px; + height: 302px; + border-radius: 50%; + top: -318px; + } + + .ice-cream-container::before { + box-shadow: 0px 8px 30px 0px #0A881740; + } + + .ice-coffee-container::before { + box-shadow: 0px 8px 30px 0px #99721740; + } + + .milkshakes-container::before { + box-shadow: 0px 8px 30px 0px #00000040; + } + + .modal-window-ingredients { + width: 568px; + height: 996px; + } + + .modal-close-button { + width: 13.33px; + height: 13.33px; + } + + .modal-title-ingredients { + width: 273px; + margin-top: 32px; + margin-bottom: 24px; + white-space: nowrap; + } + + .modal-window-quantities-container { + gap: 20px; + padding-top: 24px; + } + + .modal-window-quantities-circle { + width: 53px; + height: 53px; + font-size: 12px; + line-height: 2.33; + } + + .modal-window-quantities-label { + font-size: 12px; + line-height: 1.219; + width: 65px; + height: 90px; + } + + .modal-window-ingredients-subtitle { + padding-top: 48px; + } + + .ingredient-name { + margin-right: 330px; + } + + .modal-window-ingredients-form { + padding: 0 100px; + } + + .modal-window-ingredients-form-element { + width: 368px; + padding-left: 16px; + } + + .modal-window-ingredients-submit-button { + min-width: 121px; + margin-top: 12px; + } + + } \ No newline at end of file diff --git a/src/sass/_reset.scss b/src/sass/_reset.scss new file mode 100644 index 00000000000..d061873c657 --- /dev/null +++ b/src/sass/_reset.scss @@ -0,0 +1,64 @@ +/* Style reset */ + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +html { + box-sizing: border-box; +} + +*, +*::after, +*::before { + box-sizing: inherit; +} + +img { + display: block; + max-width: 100%; + height: auto; +} + +address { + font-style: normal; +} + +.link { + text-decoration: none; + color: inherit; +} + +.list, +ul, +ol { + list-style: none; + padding: 0; + margin: 0; + outline: none; + border: none; +} + +button { + cursor: pointer; + border: none; +} + +input { + font-family: inherit; +} + +a { + text-decoration: none; + color: #000; +} +div { + outline: none; +} +/* End style reset */ \ No newline at end of file diff --git a/src/sass/index.scss b/src/sass/index.scss index 8d1a014a6b5..d4e932563d4 100755 --- a/src/sass/index.scss +++ b/src/sass/index.scss @@ -1,2 +1,9 @@ +@import './reset'; @import './common'; -@import './example'; +@import './nav-header'; +@import './hero-section'; +@import './products'; +@import './about'; +@import './customer-reviews'; +@import './contacts'; +@import './footer';