diff --git a/package-lock.json b/package-lock.json index e6c0aff679c..5f171b3a11c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -203,9 +203,9 @@ } }, "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.2.tgz", + "integrity": "sha512-9bfjwDxIDWmmOKusUcqdS4Rw+SETlp9Dy39Xui9BEGEk19dDwH0jhipwFzEff/pFg95NKymc6TOTbRKcWeRqyQ==", "cpu": [ "arm64" ], @@ -216,9 +216,9 @@ ] }, "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.2.tgz", + "integrity": "sha512-lwriRAHm1Yg4iDf23Oxm9n/t5Zpw1lVnxYU3HnJPTi2lJRkKTrps1KVgvL6m7WvmhYVt/FIsssWay+k45QHeuw==", "cpu": [ "x64" ], @@ -229,9 +229,9 @@ ] }, "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.2.tgz", + "integrity": "sha512-MOI9Dlfrpi2Cuc7i5dXdxPbFIgbDBGgKR5F2yWEa6FVEtSWncfVNKW5AKjImAQ6CZlBK9tympdsZJ2xThBiWWA==", "cpu": [ "arm" ], @@ -242,9 +242,9 @@ ] }, "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.2.tgz", + "integrity": "sha512-FU20Bo66/f7He9Fp9sP2zaJ1Q8L9uLPZQDub/WlUip78JlPeMbVL8546HbZfcW9LNciEXc8d+tThSJjSC+tmsg==", "cpu": [ "arm64" ], @@ -255,9 +255,9 @@ ] }, "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.2.tgz", + "integrity": "sha512-gsWNDCklNy7Ajk0vBBf9jEx04RUxuDQfBse918Ww+Qb9HCPoGzS+XJTLe96iN3BVK7grnLiYghP/M4L8VsaHeA==", "cpu": [ "x64" ], @@ -268,9 +268,9 @@ ] }, "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.2.tgz", + "integrity": "sha512-O+6Gs8UeDbyFpbSh2CPEz/UOrrdWPTBYNblZK5CxxLisYt4kGX3Sc+czffFonyjiGSq3jWLwJS/CCJc7tBr4sQ==", "cpu": [ "x64" ], @@ -2286,9 +2286,9 @@ "dev": true }, "node_modules/json5": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", - "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "dev": true, "bin": { "json5": "lib/cli.js" @@ -2450,43 +2450,46 @@ } }, "node_modules/msgpackr": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.1.tgz", - "integrity": "sha512-Je+xBEfdjtvA4bKaOv8iRhjC8qX2oJwpYH4f7JrG4uMVJVmnmkAT4pjKdbztKprGj3iwjcxPzb5umVZ02Qq3tA==", + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.10.1.tgz", + "integrity": "sha512-r5VRLv9qouXuLiIBrLpl2d5ZvPt8svdQTl5/vMvE4nzDMyEX4sgW5yWhuBBj5UmgwOTWj8CIdSXn5sAfsHAWIQ==", "dev": true, "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.2", + "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-3.0.2.tgz", + "integrity": "sha512-SdzXp4kD/Qf8agZ9+iTu6eql0m3kWm1A2y1hkpTeVNENutaB0BwHlSvAIaMxwntmRUAUjon2V4L8Z/njd0Ct8A==", "dev": true, "hasInstallScript": true, "optional": true, "dependencies": { - "node-gyp-build-optional-packages": "5.0.2" + "node-gyp-build-optional-packages": "5.0.7" + }, + "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.2", + "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.2", + "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.2", + "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.2", + "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.2", + "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.2" } }, "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.0.7", + "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.0.7.tgz", + "integrity": "sha512-YlCCc6Wffkx0kHkmam79GKvDQ6x+QZkMjFGrIMxgFNILFvGSbCp2fCBC55pGTT9gVaz8Na5CLmxt/urtzRv36w==", "dev": true, "optional": true, "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,9 +2909,9 @@ } }, "node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true, "bin": { "semver": "bin/semver" @@ -3245,44 +3248,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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.2.tgz", + "integrity": "sha512-9bfjwDxIDWmmOKusUcqdS4Rw+SETlp9Dy39Xui9BEGEk19dDwH0jhipwFzEff/pFg95NKymc6TOTbRKcWeRqyQ==", "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.2.tgz", + "integrity": "sha512-lwriRAHm1Yg4iDf23Oxm9n/t5Zpw1lVnxYU3HnJPTi2lJRkKTrps1KVgvL6m7WvmhYVt/FIsssWay+k45QHeuw==", "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.2.tgz", + "integrity": "sha512-MOI9Dlfrpi2Cuc7i5dXdxPbFIgbDBGgKR5F2yWEa6FVEtSWncfVNKW5AKjImAQ6CZlBK9tympdsZJ2xThBiWWA==", "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.2.tgz", + "integrity": "sha512-FU20Bo66/f7He9Fp9sP2zaJ1Q8L9uLPZQDub/WlUip78JlPeMbVL8546HbZfcW9LNciEXc8d+tThSJjSC+tmsg==", "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.2.tgz", + "integrity": "sha512-gsWNDCklNy7Ajk0vBBf9jEx04RUxuDQfBse918Ww+Qb9HCPoGzS+XJTLe96iN3BVK7grnLiYghP/M4L8VsaHeA==", "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.2", + "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.2.tgz", + "integrity": "sha512-O+6Gs8UeDbyFpbSh2CPEz/UOrrdWPTBYNblZK5CxxLisYt4kGX3Sc+czffFonyjiGSq3jWLwJS/CCJc7tBr4sQ==", "dev": true, "optional": true }, @@ -4541,9 +4544,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": { @@ -4650,34 +4653,34 @@ "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.10.1", + "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.10.1.tgz", + "integrity": "sha512-r5VRLv9qouXuLiIBrLpl2d5ZvPt8svdQTl5/vMvE4nzDMyEX4sgW5yWhuBBj5UmgwOTWj8CIdSXn5sAfsHAWIQ==", "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.2", + "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-3.0.2.tgz", + "integrity": "sha512-SdzXp4kD/Qf8agZ9+iTu6eql0m3kWm1A2y1hkpTeVNENutaB0BwHlSvAIaMxwntmRUAUjon2V4L8Z/njd0Ct8A==", "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.2", + "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.2", + "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.2", + "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.2", + "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.2", + "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.2", + "node-gyp-build-optional-packages": "5.0.7" }, "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==", + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.0.7.tgz", + "integrity": "sha512-YlCCc6Wffkx0kHkmam79GKvDQ6x+QZkMjFGrIMxgFNILFvGSbCp2fCBC55pGTT9gVaz8Na5CLmxt/urtzRv36w==", "dev": true, "optional": true } @@ -4969,9 +4972,9 @@ } }, "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true }, "source-map": { diff --git a/package.json b/package.json index efbc9f63d06..59334f4cec9 100755 --- a/package.json +++ b/package.json @@ -2,10 +2,10 @@ "name": "parcel-project-template", "version": "2.0.0", "description": "", - "homepage": "https://goitacademy.github.io/parcel-project-template", + "homepage": "https://github.com/MatacheAlexandru/Project-TeamWork.git", "scripts": { "start": "parcel src/*.html", - "build": "parcel build src/*.html --public-url /parcel-project-template/" + "build": "parcel build src/*.html --public-url /Project-TeamWork/" }, "repository": { "type": "git", diff --git a/src/about-modal.js b/src/about-modal.js new file mode 100644 index 00000000000..03e08dab2ab --- /dev/null +++ b/src/about-modal.js @@ -0,0 +1,13 @@ +document.addEventListener('DOMContentLoaded', function() { + const openModalBtn = document.querySelector(".read-more-btn"); + const closeModalBtn = document.querySelector(".close-btn"); + const modal = document.querySelector("[data-modal-target]"); + + openModalBtn.addEventListener("click", function() { + modal.classList.remove("hidden-modal"); + }); + + closeModalBtn.addEventListener("click", function() { + modal.classList.add("hidden-modal"); + }); +}); diff --git a/src/header-hero.js b/src/header-hero.js new file mode 100644 index 00000000000..e5878ab870b --- /dev/null +++ b/src/header-hero.js @@ -0,0 +1,54 @@ +// (() => { +// const mobileMenu = document.querySelector('.js-menu-container'); +// const openMenuBtn = document.querySelector('.js-open-menu'); +// const closeMenuBtn = document.querySelector('.js-close-menu'); + +// const toggleMenu = () => { +// const isMenuOpen = +// openMenuBtn.getAttribute('aria-expanded') === 'true' || false; +// openMenuBtn.setAttribute('aria-expanded', !isMenuOpen); +// mobileMenu.classList.toggle('is-open'); + +// const scrollLockMethod = !isMenuOpen +// ? 'disableBodyScroll' +// : 'enableBodyScroll'; +// bodyScrollLock[scrollLockMethod](document.body); +// }; + + +// openMenuBtn.addEventListener('click', toggleMenu); +// closeMenuBtn.addEventListener('click', toggleMenu); + +// // Close the mobile menu on wider screens if the device orientation changes +// window.matchMedia('(min-width: 768px)').addEventListener('change', e => { +// if (!e.matches) return; +// mobileMenu.classList.remove('is-open'); +// openMenuBtn.setAttribute('aria-expanded', false); +// bodyScrollLock.enableBodyScroll(document.body); +// }); +// })(); + +document.addEventListener("DOMContentLoaded", function() { + const mobileMenu = document.querySelector('.js-menu-container'); + const openMenuBtn = document.querySelector('.js-open-menu'); + const closeMenuBtn = document.querySelector('.js-close-menu'); + + const toggleMenu = () => { + const isMenuOpen = openMenuBtn.getAttribute('aria-expanded') === 'true' || false; + openMenuBtn.setAttribute('aria-expanded', !isMenuOpen); + mobileMenu.classList.toggle('is-open'); + + const scrollLockMethod = !isMenuOpen ? 'disableBodyScroll' : 'enableBodyScroll'; + bodyScrollLock[scrollLockMethod](document.body); + }; + + openMenuBtn.addEventListener('click', toggleMenu); + closeMenuBtn.addEventListener('click', toggleMenu); + + + window.matchMedia('(min-width: 768px)').addEventListener('change', () => { + mobileMenu.classList.remove('is-open'); + openMenuBtn.setAttribute('aria-expanded', false); + bodyScrollLock.enableBodyScroll(document.body); + }); +}); diff --git a/src/images/about-modal-bg.jpg b/src/images/about-modal-bg.jpg new file mode 100644 index 00000000000..e0db1cafc6f Binary files /dev/null and b/src/images/about-modal-bg.jpg differ diff --git a/src/images/about-section-bg.png b/src/images/about-section-bg.png new file mode 100644 index 00000000000..affaaecc232 Binary files /dev/null and b/src/images/about-section-bg.png differ diff --git a/src/images/advantages-icon1.svg b/src/images/advantages-icon1.svg new file mode 100644 index 00000000000..da4684aa60d --- /dev/null +++ b/src/images/advantages-icon1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/advantages-icon2.svg b/src/images/advantages-icon2.svg new file mode 100644 index 00000000000..e9cb47f5818 --- /dev/null +++ b/src/images/advantages-icon2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/advantages-icon3.svg b/src/images/advantages-icon3.svg new file mode 100644 index 00000000000..bb48762334d --- /dev/null +++ b/src/images/advantages-icon3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/arrow-right 3 (1).png b/src/images/arrow-right 3 (1).png new file mode 100644 index 00000000000..ff53c34a3c5 Binary files /dev/null and b/src/images/arrow-right 3 (1).png differ diff --git a/src/images/arrow-right.svg b/src/images/arrow-right.svg new file mode 100644 index 00000000000..1f72ac1098f --- /dev/null +++ b/src/images/arrow-right.svg @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/src/images/contacts-section-divider.png b/src/images/contacts-section-divider.png new file mode 100644 index 00000000000..030cf14550d Binary files /dev/null and b/src/images/contacts-section-divider.png differ diff --git a/src/images/cow png.png b/src/images/cow png.png new file mode 100644 index 00000000000..0474698e2ef Binary files /dev/null and b/src/images/cow png.png differ diff --git a/src/images/customers-icons.svg b/src/images/customers-icons.svg new file mode 100644 index 00000000000..02cab4a95b3 --- /dev/null +++ b/src/images/customers-icons.svg @@ -0,0 +1,17 @@ + diff --git a/src/images/gallery@1x-1280x430.jpg b/src/images/gallery@1x-1280x430.jpg new file mode 100644 index 00000000000..2735668de8d Binary files /dev/null and b/src/images/gallery@1x-1280x430.jpg differ diff --git a/src/images/gallery@2x-2560x860.jpg b/src/images/gallery@2x-2560x860.jpg new file mode 100644 index 00000000000..20046b5a490 Binary files /dev/null and b/src/images/gallery@2x-2560x860.jpg differ diff --git a/src/images/ice-coffe.png b/src/images/ice-coffe.png new file mode 100644 index 00000000000..fd555aab3ba Binary files /dev/null and b/src/images/ice-coffe.png differ diff --git a/src/images/ice-cream.png b/src/images/ice-cream.png new file mode 100644 index 00000000000..e1ba4d19408 Binary files /dev/null and b/src/images/ice-cream.png differ diff --git a/src/images/icon-about.svg b/src/images/icon-about.svg new file mode 100644 index 00000000000..a48c8ebd1ba --- /dev/null +++ b/src/images/icon-about.svg @@ -0,0 +1,579 @@ + \ No newline at end of file diff --git a/src/images/logo-header.svg b/src/images/logo-header.svg new file mode 100644 index 00000000000..1a19c930435 --- /dev/null +++ b/src/images/logo-header.svg @@ -0,0 +1,21 @@ + diff --git a/src/images/logo.png b/src/images/logo.png old mode 100755 new mode 100644 index a6ce6517853..11c2f5d47ff Binary files a/src/images/logo.png and b/src/images/logo.png differ diff --git a/src/images/milkshakes.png b/src/images/milkshakes.png new file mode 100644 index 00000000000..47d4edbe2c7 Binary files /dev/null and b/src/images/milkshakes.png differ diff --git a/src/images/products-svg.svg b/src/images/products-svg.svg new file mode 100644 index 00000000000..c0dec3078ae --- /dev/null +++ b/src/images/products-svg.svg @@ -0,0 +1,21 @@ + \ No newline at end of file diff --git a/src/images/slider-pic4-1.png b/src/images/slider-pic4-1.png new file mode 100644 index 00000000000..4b4703f1320 Binary files /dev/null and b/src/images/slider-pic4-1.png differ diff --git a/src/images/slider-pic5-1.png b/src/images/slider-pic5-1.png new file mode 100644 index 00000000000..5c01c556d99 Binary files /dev/null and b/src/images/slider-pic5-1.png differ diff --git a/src/images/slider-pic7-1.png b/src/images/slider-pic7-1.png new file mode 100644 index 00000000000..faf6ff15e4c Binary files /dev/null and b/src/images/slider-pic7-1.png differ diff --git a/src/images/symbol-footer.svg b/src/images/symbol-footer.svg new file mode 100644 index 00000000000..4cb53bf1936 --- /dev/null +++ b/src/images/symbol-footer.svg @@ -0,0 +1,13 @@ + diff --git a/src/images/testimonials1-1.png b/src/images/testimonials1-1.png new file mode 100644 index 00000000000..8039c035c68 Binary files /dev/null and b/src/images/testimonials1-1.png differ diff --git a/src/index.html b/src/index.html index 92da07de4e6..68a479fafd6 100755 --- a/src/index.html +++ b/src/index.html @@ -3,13 +3,29 @@ + + + Page title - - + + + + + + + + -

Example title

- - + + + + + + + diff --git a/src/index.js b/src/index.js index e69de29bb2d..8b137891791 100755 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1 @@ + diff --git a/src/modal_section_contacts.js b/src/modal_section_contacts.js new file mode 100644 index 00000000000..45ca0c69a1f --- /dev/null +++ b/src/modal_section_contacts.js @@ -0,0 +1,14 @@ +(() => { + const refs = { + openModalBtn: document.querySelector("[data-modal-open]"), + closeModalBtn: document.querySelector("[data-modal-close]"), + modal: document.querySelector("[data-modal]"), + }; + + refs.openModalBtn.addEventListener("click", toggleModal); + refs.closeModalBtn.addEventListener("click", toggleModal); + + function toggleModal() { + refs.modal.classList.toggle("is-hidden"); + } +})(); \ No newline at end of file diff --git a/src/partials/about.html b/src/partials/about.html new file mode 100644 index 00000000000..148b51b5658 --- /dev/null +++ b/src/partials/about.html @@ -0,0 +1,121 @@ +
+
+

TRADITION AND LOVE

+

HOW IT'S MADE?

+
+
+  cow and milk +
+
+
+

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

+
+
+ +
+ +
+
+
+ +
diff --git a/src/partials/contacts.html b/src/partials/contacts.html new file mode 100644 index 00000000000..a97417370cd --- /dev/null +++ b/src/partials/contacts.html @@ -0,0 +1,170 @@ +
+
+ +
+
+ + +
+ + +
+ diff --git a/src/partials/customers.html b/src/partials/customers.html new file mode 100644 index 00000000000..e776ba38e1d --- /dev/null +++ b/src/partials/customers.html @@ -0,0 +1,49 @@ +
+
+
+
+ image-customers +
+
+
+ + + + +
+
+

+ 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

+
+
+ + + + + />> + + +
+
+
+
diff --git a/src/partials/example.html b/src/partials/example.html index f7f444c97e2..29343e12d81 100755 --- a/src/partials/example.html +++ b/src/partials/example.html @@ -5,7 +5,7 @@

HTML-partials

❗️❗️❗️ The path to images from the HTML partial is the same as from the index.html file --> - +

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

diff --git a/src/partials/gallery.html b/src/partials/gallery.html new file mode 100644 index 00000000000..acc0fc300d9 --- /dev/null +++ b/src/partials/gallery.html @@ -0,0 +1,62 @@ + diff --git a/src/partials/header-hero.html b/src/partials/header-hero.html new file mode 100644 index 00000000000..61940827a40 --- /dev/null +++ b/src/partials/header-hero.html @@ -0,0 +1,140 @@ +
+ + + +
+ +
+
+
+
+ + + +
+ + + + + + +
+
+ +
+
+
+

ICE CREAM MADE WITH

+

PASSION

+
+
+ + +
+
+
+ milk +
+
+
+

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

+
+
+ + + +
+
+
+
+ +
+
+
+ ice cream cone +
+
+
+
+ +
+
+
+

16

+

cafes

+
+
+ +
+

23

+

food trucks

+
+
+ +
+ girl tasting ice cream +
+
+
+
+
+ + + diff --git a/src/partials/products.html b/src/partials/products.html new file mode 100644 index 00000000000..3649f555015 --- /dev/null +++ b/src/partials/products.html @@ -0,0 +1,68 @@ +
+
+
+

100% natural

+

products

+
+ + +
+
\ No newline at end of file diff --git a/src/sass/about.scss b/src/sass/about.scss new file mode 100644 index 00000000000..d504626b46d --- /dev/null +++ b/src/sass/about.scss @@ -0,0 +1,300 @@ +:root { + --font-dm-sans: 'DM Sans'; + --font-titan-one: 'Titan One'; + --background-section2-section3-rozDeschis: #ffb8ca; + --background-section2-roz-inchis: #ffa5ba; + --background-section3-section7-bej: #f0d1a5; + --background-section3-section7-verde: #c2e297; + --backround-sec4-sec5-sec7-sec8-rozAlbit: #fff5f6; + --bacground-buttonWhite-sec1-sec2-sec4-sec7: #ffffff; + --background-buttonRed-section2-section7: #d41443; + --backgoundSVG-footer: #fea5bb; + --background-modal: #e18298; + --underline-color: #e1e1e1; + --font-color-white: #ffffff; + --font-color-red: #d41443; + --font-color-pink: #ffa5ba; + --font-color-footer-Grey: #907e82; +} + +.about-section { + display: flex; + flex-direction: column; + width: auto; +} +.container-about { + max-width: 1200px; + margin: 0 auto; + height: auto; + background-color: var(--backround-sec4-sec5-sec7-sec8-rozAlbit); + padding-bottom: 140px; +} + +.cow-img img { + background: transparent; + width: 280px; + height: 279px; +} +.main-div { + display: flex; + flex-direction: column; + align-items: center; + max-width: 1200px; + + height: 521px; +} +.paragrafs { + height: auto; + display: flex; + flex-direction: column; + background-image: url(../images/about-section-bg.png); + background-size: contain; + background-position-y: center; + background-repeat: no-repeat; + max-width: 100%; +} + +.paragrafs :nth-child(1) { + font-family: var(--font-dm-sans); + font-weight: 500; + font-size: 12px; + line-height: 19.44px; + letter-spacing: 0.04em; + color: #000; + margin-top: 40px; + max-width: 70%; +} +.paragrafs :nth-child(2) { + font-family: var(--font-dm-sans); + font-weight: 500; + font-size: 14px; + line-height: 194%; + letter-spacing: 0.04em; + color: #907e82; + max-width: 70%; + line-height: 19.44px; +} +.about-h3 { + font-family: var(--font-titan-one); + font-weight: 400; + font-size: 30px; + letter-spacing: 0.04em; + text-transform: uppercase; + text-align: center; + color: var(--font-color-pink); + margin-top: 60px; + margin-bottom: 0; +} +.about-h1 { + font-family: var(--font-titan-one); + font-weight: 400; + font-size: 58px; + letter-spacing: 0.06em; + text-transform: uppercase; + text-align: center; + color: var(--font-color-red); + margin-top: 16px; +} +.read-more-btn { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 176px; + height: 44px; + background-color: #fff; + border-radius: 22px; + border: none; + margin-left: 20px; + font-family: var(--font-dm-sans); + font-weight: 700; + font-size: 14px; + text-align: center; + color: var(--font-color-red); + margin-top: 20px; + padding-left: 37px; +} +.read-more-btn svg { + margin-left: 14px; + width: 10px; + height: 10px; +} +.read-more-btn:hover { + color: var(--font-color-white); + cursor: pointer; + background-color: #d41443; +} +.read-more-btn:hover #svg-btn { + stroke: var(--font-color-white); + cursor: pointer; +} + +.read-more-btn svg { + stroke: #d41443; +} + +/* Stilizare tableta 768px*/ +@media screen and (min-width: 768px) { + .main-div { + display: flex; + flex-direction: row; + background: none; + margin-top: 40px; + height: auto; + } + .about-h1 { + margin-bottom: 0; + } + .cow-img img { + width: 336px; + height: 335px; + } + .paragrafs { + height: auto; + margin-top: 40px; + margin-left: 32px; + background-image: none; + } + .paragrafs :nth-child(1) { + margin-bottom: 14px; + font-size: 16px; + line-height: 24.36px; + } + .paragrafs :nth-child(2) { + font-size: 14px; + line-height: 27.16px; + } + .read-more-btn { + margin-left: 99px; + font-size: 16px; + } + .container-about { + padding-bottom: 0; + } +} + +/* Stilizare desktop 1158px */ +@media screen and (min-width: 1158px) { + .main-div { + display: flex; + flex-direction: row; + background-image: url(../images/about-section-bg.png); + + background-repeat: no-repeat; + background-position: center; + } + + .cow-img img { + width: 501px; + height: 501px; + } + .paragrafs { + background-image: none; + max-width: 70%; + } + .paragrafs :nth-child(1) { + margin-left: 80px; + margin-top: 20px; + margin-bottom: 16px; + font-size: 16px; + line-height: 28.16px; + max-width: none; + } + .paragrafs :nth-child(2) { + margin-left: 80px; + margin-top: 16px; + font-size: 14px; + line-height: 27.16px; + max-width: none; + } + .read-more-btn { + margin-left: 99px; + font-size: 16px; + } + .container-about { + padding-bottom: 0; + } +} + +.custom-modal .modal-data { + margin: 0 auto; + padding-top: 50px; + width: 400px; + height: 600px; + background-image: url(../images/about-modal-bg.jpg); + background-repeat: no-repeat; + background-size: cover; + position: relative; + border: 1px solid transparent; + border-radius: 4px; +} + +.custom-modal { + position: fixed; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + background-color: rgba(255, 184, 202, 0.4); + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12), + 0 2px 1px 0 rgba(0, 0, 0, 0.2); +} + +.hidden-modal { + display: none; + visibility: hidden; + transform: scale(1.2); + transition: visibility 0s, transform 0.5s; +} +.close-btn { + display: flex; + justify-content: center; + align-items: center; + background-color: rgb(255, 184, 202, 40%); + border-radius: 50%; + color: #2e2f42; + width: 24px; + height: 24px; + outline: none; + position: absolute; + right: 24px; + top: 24px; + border-color: transparent; +} +.close-icon { + width: 15px; + height: 15px; + stroke: #000; +} + +.custom-modal p { + color: red; + text-indent: 5px; + margin-bottom: 0; +} + +.modal-svg-ice-cream { + width: 25px; + height: 25px; + animation: rotate 2s linear infinite; + background-color: transparent; +} +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.about-modal-div { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-top: 20px; + align-items: baseline; +} diff --git a/src/sass/contacts.scss b/src/sass/contacts.scss new file mode 100644 index 00000000000..49b49aeb0a9 --- /dev/null +++ b/src/sass/contacts.scss @@ -0,0 +1,253 @@ +:root { + --background-section2-section3-rozDeschis: #ffb8ca; + --background-section2-roz-inchis: #ffa5ba; + --background-section3-section7-bej: #f0d1a5; + --background-section3-section7-verde: #c2e297; + --backround-sec4-sec5-sec7-sec8-rozAlbit: #fff5f6; + --bacground-buttonWhite-sec1-sec2-sec4-sec7: #ffffff; + --background-buttonRed-section2-section7: #d41443; + --backgoundSVG-footer: #fea5bb; + --background-modal: #e18298; + --underline-color: #e1e1e1; + + --font-color-white: #ffffff; + --font-color-red: #d41443; + --font-color-pink: #ffa5ba; + --font-color-footer-Grey: #907e82; + + --primary-font-family: 'DM Sans', sans-serif; + --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.contacts-section { + font-family: 'DM Sans', sans-serif; + font-size: 12px; + font-weight: 500; + text-align: left; + margin-bottom: -80px; + @media screen and (min-width: 768px) { + font-size: 14px; + margin-bottom: -10px; + } + + @media screen and (min-width: 1200px) { + font-size: 16px; + margin-bottom: -10px; + } +} + +.country-contacts-container { + max-width: 1200px; + width: 100%; + margin: 0 auto; + height: auto; + position: relative; +} + +.country-contacts-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #fff5f6; + z-index: -1; + border-radius: 5% 5% 0 0; + margin-top: 50px; +} + +.country-contacts-container::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 50px; + background-color: rgb(255, 255, 255); + z-index: -1; +} + +.list-country-contacts { + list-style-type: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 32px; + padding: 0; +} + +.contacts-item-container { + padding: 32px; + @media screen and (min-width: 768px) { + padding: 40px 32px; + } +} + +.contacts-separator { + max-width: 100%; +} + +.list-country-contacts li { + border-radius: 24px; + background-color: #ffffff; + box-shadow: 0px 8px 30px 0px rgba(212, 20, 67, 0.1); + width: 280px; + height: 412px; + @media screen and (min-width: 768px) { + width: 224px; + height: 528px; + } + + @media screen and (min-width: 1200px) { + width: 368px; + height: 538px; + } +} + +.orange-contacts-title { + background: var(--background-section3-section7-bej); + border-radius: 6px; + color: var(--font-color-white); + text-align: center; + width: 25%; + padding: 5px 0px; +} + +.green-contacts-title { + background: var(--background-section3-section7-verde); + border-radius: 6px; + color: var(--font-color-white); + text-align: center; + width: 50%; + padding: 5px 0px; +} + +.city-description-container, +.timetable-container, +.contacts-info-container { + margin-top: 32px; +} + +.contacts-description { + color: #907e82; +} + +.contacts-titles { + color: #000; +} +.contacts-timetable { + color: var(--background-section2-roz-inchis); +} + +.contacts { + color: #907e82; + text-decoration: none; + display: block; +} + +/* Button section */ +.contacts-buttons { + align-items: center; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 12px; +} + +.contacts-buttons .button { + border-radius: 22px; + width: 168px; + height: 44px; + background: #ffffff; + border: solid #ffffff; + color: var(--background-buttonRed-section2-section7); + text-align: center; + font-weight: 700; + align-items: center; +} + +.contacts-buttons .button:hover, +.contacts-buttons .button:focus { + background: var(--background-buttonRed-section2-section7); + color: var(--font-color-white); + border: solid var(--background-buttonRed-section2-section7); +} + +.contacts-buttons .arrow { + border: solid var(--background-buttonRed-section2-section7); + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); +} + +.contacts-buttons .button:hover .arrow, +.contacts-buttons .button:focus .arrow { + border-color: var(--font-color-white); +} + +/* modal part - not complete */ +.is-hidden { + visibility: hidden; + scale: 1.05; +} + +.modal-contacts { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + + transition: transform var(--transition); +} + +.modal-contacts .modal-content { + position: relative; + background-color: var(--background-modal); + border-radius: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12), + 0 1px 2px 0 rgba(0, 0, 0, 0.2); + padding: 24px; + width: 408px; + height: 584px; + display: flex; + flex-direction: column; + align-items: center; +} + +.modal-contacts .close-btn { + position: absolute; + top: 24px; + right: 24px; + border-radius: 50%; + width: 24px; + height: 24px; + color: #907e82; + background-color: #ffffff; + display: flex; + justify-content: center; + align-items: center; + outline: none; + border-style: none; + margin-bottom: 24px; + cursor: pointer; +} + + + +.modal-contacts .modal-heading { + font-weight: 500; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.02em; + text-align: center; + color: #ffffff; + margin-top: 40px; + margin-bottom: 16px; +} diff --git a/src/sass/customers.css b/src/sass/customers.css new file mode 100644 index 00000000000..5e2e57ffcd6 --- /dev/null +++ b/src/sass/customers.css @@ -0,0 +1,228 @@ +@media screen and (min-width: 769px) { + .container { + width: 100%; + margin: 0 auto; + height: auto; + } + + .customers-img { + border-radius: 44px; + width: 85px; + height: 85px; + padding-top: 120px; + padding-bottom: 10px; + } + + .customers-ghilimele { + padding-left: 73px; + padding-right: 15px; + } + + .customers-ghilimele-paragraf { + display: flex; + background-color: #fafafa; + padding: 32px; + padding-left: 73px; + padding-right: 73px; + margin-bottom: 16px; + margin-left: 116px; + margin-right: 116px; + } + + .customers-comment p { + font-family: 'DM Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 1.86; + letter-spacing: 0.04em; + text-align: center; + color: #000; + background-image: repeating-linear-gradient(to top, + #e1e1e1, + #e1e1e1 1px, + transparent 1px, + transparent 32px); + } + + .customers-comment { + max-width: 968px; + width: 100%; + } + + .customers-reviews-name-city p { + font-family: 'DM Sans', sans-serif; + font-weight: 500; + font-size: 20px; + line-height: 1.86; + text-align: center; + color: #000; + padding-top: 16px; + padding-bottom: 32px; + } + + .customers-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } +} + +/* Stilizare desktop sfarsit */ + +/* Stilizare pentru tableta */ + +@media screen and (min-width: 321px) and (max-width: 768px) { + .container { + width: 100%; + height: auto; + margin: 0 auto; + } + + .customers-img { + border-radius: 44px; + width: 85px; + height: 85px; + padding-top: 120px; + padding-bottom: 32px; + } + + .customers-ghilimele { + padding-left: 74px; + padding-top: 20px; + padding-bottom: 104px; + } + + .customers-ghilimele-paragraf { + display: flex; + background-color: #fafafa; + padding-top: 32px; + margin-bottom: 4px; + margin-left: 74px; + margin-right: 74px; + } + + .customers-comment p { + font-family: 'DM Sans', sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 29.96px; + letter-spacing: 4%; + text-align: center; + color: #000; + padding-bottom: 36px; + padding-top: 20px; + padding-right: 70px; + } + + .customers-puncte { + margin: 0px; + } + + .customers-comment { + max-width: 620px; + width: 100%; + } + + .customers-reviews-name-city p { + font-family: 'DM Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 29.76px; + text-align: center; + color: #000; + margin-bottom: 0px; + } + + .customers-list { + padding-top: 32px; + } + + .customers-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } +} + +/* Stilizare pentru tableta sfarsit */ + +/* Stilizare pentru mobile */ + +@media screen and (max-width: 320px) { + .container { + width: 100%; + height: auto; + margin: 0 auto; + } + + .customers-img { + border-radius: 44px; + width: 85px; + height: 85px; + padding-top: 60px; + padding-bottom: 32px; + padding-left: 115px; + padding-right: 115px; + } + + .customers-ghilimele { + padding-left: 53px; + } + + .customers-ghilimele-paragraf { + display: flex; + background-color: #fafafa; + padding-top: 47px; + margin-bottom: 4px; + padding-left: 20px; + margin-right: 20px; + } + + .customers-comment p { + font-family: 'DM Sans', sans-serif; + font-weight: 500; + font-size: 12px; + line-height: 31.2px; + letter-spacing: 4%; + text-align: center; + color: #000; + padding-bottom: 36px; + margin-left: -38px; + padding-right: 58px; + } + + .customers-comment { + max-width: 280px; + width: 100%; + } + + .customers-puncte { + padding-top: 16px; + } + + .customers-reviews-name-city p { + font-family: 'DM Sans', sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 26.04px; + text-align: center; + color: #000; + padding-top: 16px; + margin-bottom: 0px; + } + + .customers-list { + padding-top: 16px; + } + + .customers-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } +} + + diff --git a/src/sass/footer.scss b/src/sass/footer.scss new file mode 100644 index 00000000000..3febe42f1a7 --- /dev/null +++ b/src/sass/footer.scss @@ -0,0 +1,308 @@ +:root { + /* --background-color: #fff5f6; */ + --font-dm-sans: 'DM Sans'; +} + +.footer-container { + background-color: #fff5f6; + padding-top: 30px; +} + +.footer-media { + padding-right: 20px; +} + +.footer-texts { + padding-left: 20px; +} + +.titan-one-regular { + font-family: 'Titan One', sans-serif; + font-weight: 400; + font-style: normal; +} + +.dm-sans-uniquifier { + font-family: 'DM Sans', sans-serif; + font-optical-sizing: auto; + font-style: normal; +} + +.footer-text1 { + font-family: 'Titan One'; + font-weight: 400; + size: 30px; + color: #ffa5ba; + letter: 4%; + margin: 0; +} + +.footer-text2 { + font-family: 'Titan One'; + font-weight: 400; + font-size: xx-large; + color: #d41443; + letter: 6%; + height: 66px; +} + +.svg-footer { + background-color: #fea5bb; + width: 34px; + height: 34px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.svg-footer svg { + width: 20px; + height: 20px; +} + +.footer-contact { + text-decoration: none; + color: black; + font-family: 'DM Sans'; + size: 16px; + letter: 2%; +} + +.footer-contact::after { + content: '+60(0)383766284'; + color: red; +} + +.footer-line { + width: 100%; + height: 1px; + background-color: #e1e1e1; +} + +/* Stilizare Mobile */ + +@media screen and (max-width: 320px) { + .footer-container { + max-width: 320px; + width: 100%; + height: auto; + margin: 0 auto; + } + + .footer-texts { + padding-top: 70px; + } + + .footer-text1 { + display: block; + width: 70%; + text-align: left; + } + + .footer-text2 { + display: block; + width: 70%; + text-align: left; + letter-spacing: 2px; + } + + .footer-media { + display: flex; + flex-direction: column; + text-align: right; + align-content: flex-end; + } + + .svglist-footer { + display: flex; + gap: 15px; + margin-bottom: 30px; + align-content: flex-end; + justify-content: flex-end; + } + + .footer-rights1 { + font-family: 'DM Sans'; + color: #907e82; + font-weight: 700; + font-size: 14px; + display: flex; + text-align: center; + justify-content: center; + align-items: center; + } + + .footer-contact { + font-size: 12px; + overflow: visible; + display: flex; + align-content: flex-end; + justify-content: flex-end; + } + + .footer-rights1 { + display: block; + } + + .footer-rights { + display: none; + } +} + +/* Stilizare tableta */ + +@media screen and (min-width: 321px) and (max-width: 768px) { + .footer-container { + max-width: 768px; + width: 100%; + height: auto; + margin: 0 auto; + } + + .footer-texts { + position: relative; + top: 60px; + } + + .footer-text1 { + display: block; + width: 80%; + text-align: left; + margin-top: auto; + } + + .footer-text2 { + display: block; + width: 70%; + text-align: left; + letter-spacing: 2px; + margin-top: 12px; + } + + .svglist-footer { + display: flex; + gap: 35px; + margin-bottom: 30px; + margin-top: 30px; + align-content: flex-end; + justify-content: flex-end; + } + + .footer-media { + display: flex; + flex-direction: column; + align-items: flex-end; + position: relative; + top: 20px; + } + + .footer-content { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + align-content: center; + } + + .footer-contact { + margin-bottom: 40px; + } + + .footer-rights { + display: flex; + justify-content: center; + align-items: center; + align-content: center; + width: 100%; + color: #907e82; + } + + .footer-rights1 { + display: none; + } + .footer-line { + margin-top: 40px; + } +} + +/* Stilizare Desktop */ + +@media screen and (min-width: 769px) { + .footer-container { + max-width: 1200px; + width: 100%; + height: auto; + margin: 0 auto; + } + + .footer-text1 { + margin-bottom: 16px; + margin-top: 20px; + display: block; + } + + .footer-text2 { + margin-top: 0; + display: block; + } + + .footer-texts { + display: flex; + flex-direction: column; + align-items: flex-start; + align-content: flex-start; + } + + .footer-media { + display: flex; + flex-direction: column; + align-items: flex-end; + } + + .svglist-footer { + display: flex; + gap: 30px; + margin-bottom: 16px; + justify-content: flex-end; + align-items: flex-start; + } + + .footer-rights { + display: flex; + justify-content: center; + align-items: center; + align-content: center; + width: 100%; + color: #907e82; + } + + .footer-contact { + font-size: 16px; + margin-bottom: 30px; + display: flex; + align-content: flex-end; + justify-content: flex-end; + font-family: 'DM Sans'; + color: black; + } + + .footer-content { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + align-content: center; + } + + .footer-rights1 { + display: none; + } + + .footer-text3 { + display: flex; + justify-content: center; + } +} diff --git a/src/sass/gallery.scss b/src/sass/gallery.scss new file mode 100644 index 00000000000..bf5500bb34a --- /dev/null +++ b/src/sass/gallery.scss @@ -0,0 +1,146 @@ +.container { + max-width: 1200px; + margin: 0 auto; + + width: 100%; +} +.advantages-gallery { + height: auto; + flex-wrap: wrap; +} + +.advantages { + flex-wrap: wrap; + padding-top: 125px; + background-color: #fff5f6; + height: auto; +} +.advantages .header-h3 { + display: none; +} +.advantages-list { + list-style: none; + display: flex; + background-color: #fff5f6; + justify-content: space-evenly; + flex-wrap: wrap; + margin: 0; +} +.advantages-item { + width: 100%; +} +.advantages-number { + font-family: 'Titan One'; + color: #d41443; + font-weight: 400; + font-size: 58px; + line-height: 41px; + letter-spacing: 0.04em; + text-transform: uppercase; +} +.advantages-description { + font-family: 'DM Sans', sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 170%; + color: #000; +} + +@media screen and (min-width: 768px) { + .advantages-gallery { + height: auto; + flex-wrap: wrap; + } + + .advantages-list { + list-style: none; + display: flex; + background-color: #fff5f6; + justify-content: space-evenly; + flex-wrap: wrap; + } + .advantages { + background-color: #fff5f6; + height: auto; + flex-wrap: wrap; + } + .advantages-item { + width: 33.3333333333%; + } + .advantages-number { + font-size: 48px; + line-height: 55px; + text-transform: none; + } + .advantages-description { + font-size: 14px; + line-height: 174%; + } +} +@media screen and (min-width: 1200px) { + .advantages-gallery { + height: auto; + flex-wrap: wrap; + } + + .advantages-list { + list-style: none; + display: flex; + background-color: #fff5f6; + justify-content: space-evenly; + flex-wrap: wrap; + } + .advantages { + background-color: #fff5f6; + height: auto; + flex-wrap: wrap; + } + .advantages-number { + font-size: 58px; + line-height: 66px; + text-transform: none; + } + .advantages-description { + font-size: 16px; + line-height: 176%; + letter-spacing: 0.02em; + } +} +.gallery { + flex-wrap: wrap; + background-color: #fff5f6; + display: flex; + justify-content: center; + height: auto; +} + +.header-h2 { + font-family: 'Titan One'; + font-style: normal; + font-weight: 400; + font-size: 34px; + line-height: 1.147; + letter-spacing: 0.04em; + text-transform: uppercase; + color: #d41443; +} +.header-h2--hidden { + display: none; +} +.img { + display: block; + max-width: 100%; +} +@media screen and (min-width: 768px) { + .gallery { + background-color: #fff5f6; + height: auto; + } +} + +@media screen and (min-width: 1200px) { + .gallery { + background-color: #fff5f6; + height: auto; + } +} diff --git a/src/sass/header-hero.scss b/src/sass/header-hero.scss new file mode 100644 index 00000000000..49154214657 --- /dev/null +++ b/src/sass/header-hero.scss @@ -0,0 +1,818 @@ +:root { + --background-section2-section3-rozDeschis: #ffb8ca; + --background-section2-roz-inchis: #ffa5ba; + --background-section3-section7-bej: #f0d1a5; + --background-section3-section7-verde: #c2e297; + --backround-sec4-sec5-sec7-sec8-rozAlbit: #fff5f6; + --bacground-buttonWhite-sec1-sec2-sec4-sec7: #ffffff; + --background-buttonRed-section2-section7: #d41443; + --backgoundSVG-footer: #fea5bb; + --background-modal: #e18298; + --underline-color: #e1e1e1; + + --font-color-white: #ffffff; + --font-color-red: #d41443; + --font-color-pink: #ffa5ba; + --font-color-footer-Grey: #907e82; +} + +/* @font-face { + font-family: "DM Sans"; + src: url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); + +} + +@font-face { + font-family: "Titan One"; + src: url('https: //fonts.googleapis.com/css2?family=Titan+One&display=swap'); +} */ + +.container-hero { + max-width: 1200px; + min-width: 300px; + width: 100%; + margin: 0 auto; + background-color: var(--background-section2-section3-rozDeschis); +} + +.header { + height: 80px; + background-color: transparent; + position: relative; + z-index: 2; +} + +.antet { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 40px; + padding-left: 16px; + padding-right: 16px; +} + +.logo-header { + width: 199px; + height: 50px; +} + +.navigation-menu { + font-family: 'DM Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 20.83px; + max-width: 600px; + min-width: 300px; + width: 100%; +} + +.navigation-menu ul { + list-style: none; + display: flex; + justify-content: space-between; + padding: 0; +} + +.navigation-menu li { + display: flex; + justify-content: space-between; +} + +.navigation-menu ul li a { + text-decoration: none; + color: var(--font-color-white); +} + +.navigation-menu ul li a:hover { + text-decoration: none; + color: var(--font-color-red); +} + +.buy-now-bttn { + width: 159px; + height: 44px; + border-radius: 22px 22px 22px 22px; + background-color: #ffffff; + border: 2px; + color: var(--font-color-red); + font-family: 'DM Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 20.83px; + text-align: center; +} + +.menu-icon-button { + display: flex; +} + +.menu-icon-button { + display: block; + cursor: pointer; + margin-top: 12px; + margin-right: 12px; +} + +.menu-icon-button svg { + width: 24px; + height: 24px; +} + +/* Stiluri pentru modal */ + +.js-open-menu { + background: none; + border: none; + display: flex; + +} + + +.menu-list { + list-style: none; + padding: 0; +} + +.menu-list li { + margin-bottom: 10px; +} + +.menu-list li a { + text-decoration: none; + color: #333; + font-size: 18px; +} + +.hero-section { + display: flex; + height: 610px; + justify-content: space-between; +} + +.left-hero { + position: absolute; + padding-left: 16px; + z-index: 3; +} + +.middle-hero { + display: flex; + justify-content: center; +} + +.container-hero { + position: relative; + max-width: 1200px; +} + +.ice-cream-cone { + position: absolute; + top: 60%; + left: 62%; + transform: translate(-50%, -50%); + width: 100%; + height: auto; + max-width: 236px; + z-index: 1; +} + +.circle-background { + background-color: var(--background-section2-roz-inchis); + height: 534px; + width: 534px; + border-radius: 50%; + position: absolute; + top: 47%; + left: 62%; + transform: translate(-50%, -50%); + z-index: 0; +} + +.right-hero { + position: relative; + top: -7.5%; +} + +.hero-motto { + width: 277px; + padding-top: 40px; +} + +.tasty-ice-cream { + left: 20px; +} + +.hero-motto h2 { + font-family: 'Titan One'; + font-size: 38px; + font-weight: 400; + line-height: 43.51px; + letter-spacing: 0.04em; + text-align: left; + color: var(--font-color-white); + display: block; + margin-bottom: 0px; +} + +.hero-motto h1 { + font-family: 'Titan One'; + font-size: 58px; + font-weight: 400; + line-height: 52.49px; + letter-spacing: 0.04em; + text-align: left; + color: var(--font-color-red); + margin-top: 0px; + margin-bottom: 24px; +} + +.buttons-hero { + display: flex; + gap: 12px; + margin: 0 auto; +} + +.products-bttn { + width: 107px; + height: 40px; + border-radius: 20px 20px 20px 20px; + background-color: var(--font-color-white); + border: none; + font-family: 'DM Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 18.23px; + text-align: center; + color: var(--background-buttonRed-section2-section7); +} + +.how-its-made-bttn { + width: 138px; + height: 40px; + border-radius: 20px 20px 20px 20px; + background-color: var(--bacground-buttonWhite-sec1-sec2-sec4-sec7); + border: none; + font-family: 'DM Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 18.23px; + text-align: center; + color: var(--font-color-red); +} + +.milk-and-recipe { + display: flex; + gap: 0px; + position: relative; + top: 40px; +} + +.milk-cup img { + width: 213px; + height: 216px; + top: 388px; +} + +.text-recipe { + display: flex; + flex-direction: column; + justify-content: center; +} + +.recipe { + width: 200px; + height: 78px; + font-family: 'DM Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + color: var(--font-color-white); +} + +.arrow-hero { + margin-top: 24px; + width: 26px; + height: 26px; + background-color: var(--bacground-buttonWhite-sec1-sec2-sec4-sec7); + border-radius: 50%; +} + +.arrow-hero svg { + fill: var(--font-color-red); + width: 14px; + height: 14px; + position: relative; + top: 6px; + left: 6px; +} + +.arrow-hero svg:hover { + fill: white; + cursor: pointer; +} + +.arrow-hero:hover { + cursor: pointer; + transition: box-shadow 0.3s ease; + background-color: var(--font-color-red); +} + +.numbers { + position: relative; + top: 68px; + right: 56px; + z-index: 1; +} + +.circle-white { + width: 30px; + height: 30px; + background-color: var(--bacground-buttonWhite-sec1-sec2-sec4-sec7); + border-radius: 50%; + position: relative; + left: 290px; + top: -90px; + z-index: -1; +} + +.title-big { + font-family: Titan One; + font-size: 46px; + font-weight: 400; + line-height: 52.67px; + letter-spacing: 0.04em; + text-align: right; + color: var(--font-color-red); + margin-bottom: 0px; +} + +.title-small { + font-family: 'DM Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 18.23px; + text-align: right; + color: var(--font-color-white); + margin-top: 2px; + text-transform: lowercase; +} + +.tasty-ice-cream { + position: relative; + top: -10px; + right: -50px; +} + +.products-bttn:hover, +.how-its-made-bttn:hover { + box-shadow: 0 0 5px rgb(224, 103, 103); + cursor: pointer; + transition: box-shadow 0.3s ease; + background-color: var(--background-buttonRed-section2-section7); + color: white; +} + +.buy-now-bttn:hover { + box-shadow: 0 0 5px rgb(224, 103, 103); + cursor: pointer; + transition: box-shadow 0.3s ease; + background-color: var(--background-buttonRed-section2-section7); + color: white; +} + + +.js-menu-container { + display: none; +} + +.js-open-menu { + display: none; +} + +@media screen and (min-width: 521px) and (max-width: 768px) { + + + .js-menu-container { + display: none; + position: fixed; + z-index: 1000; + background-color: var(--background-modal); + padding-left: 0px; + right: 0; + width: 254px; + height: 1020px; + padding-left: 40px; + } + + .js-close-menu { + display: flex; + background-color: none; + color: #ffffff; + border: none; + position: relative; + right: -160px; + top: -450px; + background: none; + } + + .mobile-navigation-menu { + position: absolute; + top: 135px; + left: 0px; + } + + .menu-list-mobile { + list-style: none; + font-family: 'DM Sans', sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 18.23px; + text-align: left; + outline: none; + justify-content: left; + width: 254px; + border-bottom: 1px solid; + border-color: rgb(234, 224, 224, 0.5); + + } + + + .menu-list-mobile li { + padding-bottom: 11px; + padding-top: 11px; + border-top: 1px solid; + border-color: rgb(234, 224, 224, 0.3); + } + + .buy-now-bttn-mobile { + width: 186px; + height: 44px; + border-radius: 22px 22px 22px 22px; + background-color: #ffffff; + border: 2px; + color: var(--font-color-red); + font-family: 'DM Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 20.83px; + text-align: center; + position: relative; + top: -430px; + } + + .menu-list-mobile li a { + color: var(--font-color-white); + text-decoration: none; + } + + .menu-list-mobile li a:hover { + color: var(--font-color-red); + } + + + + + + .js-menu-container.is-open { + display: flex; + flex-direction: column; + background-color: #e17992; + width: 254px; + height: 1020px; + z-index: 1000; + justify-content: center; + align-items: start; + height: 1020px + } + + + /* Stiluri pentru tablete */ + .js-open-menu { + display: flex; + position: absolute; + right: 170px; + top: 55px; + } + + .navigation-menu { + display: none; + } + + .hero-section { + display: flex; + height: 416px; + justify-content: space-between; + } + + .ice-cream-cone img { + width: 143px; + height: 336px; + top: 40%; + left: 62%; + } + + .ice-cream-cone { + position: absolute; + top: 66.5%; + left: 65%; + transform: translate(-50%, -50%); + width: 100%; + height: auto; + max-width: 236px; + z-index: 1; + } + + .tasty-ice-cream img { + width: 190px; + height: 150px; + margin-top: 0px; + } + + .hero-motto { + width: 162px; + height: 80px; + margin-top: 30px; + } + + .hero-motto h1 { + margin: 0; + width: 162px; + font-size: 34px; + line-height: 30.77px; + letter-spacing: 0.04em; + } + + .hero-motto h2 { + width: 162px; + font-size: 22px; + line-height: 25.19px; + letter-spacing: 0.04em; + } + + .circle-background { + background-color: var(--background-section2-roz-inchis); + height: 335px; + width: 333px; + border-radius: 50%; + position: absolute; + top: 47%; + left: 62%; + transform: translate(-50%, -50%); + z-index: 0; + } + + .background-hero { + height: 416px; + } + + .buttons-hero { + margin-top: 40px; + } + + .products-bttn { + width: 62.4px; + height: 24px; + font-size: 8px; + line-height: 10.42px; + } + + .how-its-made-bttn { + width: 82.8px; + height: 24px; + font-size: 8px; + line-height: 10.42px; + } + + .milk-cup img { + width: 152px; + height: 154px; + } + + .recipe { + width: 114px; + height: 48px; + font-size: 8px; + line-height: 12px; + } + + .arrow-hero { + width: 18px; + height: 18px; + } + + .arrow-hero svg { + width: 10px; + height: 10px; + top: 0px; + left: 4px; + } + + .numbers { + margin: 0 auto; + } + + .title-big { + font-size: 28px; + line-height: 32.06px; + letter-spacing: 0.04em; + } + + .title-small { + font-size: 8px; + line-height: 10.42px; + text-align: right; + } +} + +@media screen and (max-width: 520px) { + + .js-menu-container { + display: none; + position: fixed; + z-index: 1000; + background-color: var(--background-modal); + padding-left: 0px; + right: 0; + padding-left: 30px; + } + + .js-close-menu { + display: flex; + background-color: none; + color: #ffffff; + border: none; + position: relative; + right: -170px; + top: -190px; + background: none; + } + + .mobile-navigation-menu { + position: absolute; + top: 135px; + left: 0px; + } + + .menu-list-mobile { + list-style: none; + font-family: 'DM Sans', sans-serif; + width: 250px; + font-size: 14px; + font-weight: 700; + line-height: 18.23px; + text-align: left; + outline: none; + border-bottom: 1px solid; + border-color: rgb(234, 224, 224, 0.3); + } + + .menu-list-mobile li { + padding-bottom: 11px; + padding-top: 11px; + border-top: 1px solid; + border-color: rgb(234, 224, 224, 0.3); + } + + .buy-now-bttn-mobile { + width: 209px; + height: 44px; + border-radius: 22px 22px 22px 22px; + background-color: #ffffff; + border: 2px; + color: var(--font-color-red); + font-family: 'DM Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 20.83px; + text-align: center; + position: relative; + top: -170px; + justify-content: center; + } + + .menu-list-mobile li a { + color: var(--font-color-white); + text-decoration: none; + } + + .menu-list-mobile li a:hover { + color: var(--font-color-red); + } + + + + .js-menu-container.is-open { + display: flex; + flex-direction: column; + background-color: #e17992; + width: 250px; + height: 502px; + z-index: 1000; + justify-content: center; + align-items: start; + } + /* Stiluri pentru telefoane mobile */ + .js-open-menu { + display: flex; + } + + .navigation-menu { + display: none; + } + + .buy-now-bttn { + display: none; + } + + .hero-section { + height: 502px; + justify-content: space-between; + } + + .ice-cream-cone img { + width: 171px; + height: 410px; + top: 80px; + left: 117px; + gap: 0px; + opacity: 0px; + } + + .ice-cream-cone { + position: absolute; + top: 65%; + left: 65%; + transform: translate(-50%, -50%); + width: 100%; + height: auto; + max-width: 236px; + z-index: 1; + } + + .hero-motto { + width: 218px; + height: 106px; + margin-top: 120px; + } + + .hero-motto h1 { + margin: 0; + font-size: 48px; + font-weight: 400; + line-height: 46.32px; + } + + .hero-motto h2 { + font-size: 26px; + line-height: 29.77px; + letter-spacing: 0.04em; + } + + .circle-background { + background-color: var(--background-section2-roz-inchis); + height: 344px; + width: 344px; + border-radius: 50%; + position: absolute; + top: 55%; + left: 62%; + transform: translate(-50%, -50%); + z-index: 0; + display: none; + } + + .background-hero { + height: 502px; + } + + .buttons-hero { + margin-top: 40px; + } + + .products-bttn { + width: 62.4px; + height: 24px; + font-size: 8px; + line-height: 10.42px; + } + + .how-its-made-bttn { + width: 82.8px; + height: 24px; + font-size: 8px; + line-height: 10.42px; + } + + .milk-and-recipe { + display: none; + } + + .right-hero { + display: none; + } + + .modal { + display: flex; + } +} \ No newline at end of file diff --git a/src/sass/products.scss b/src/sass/products.scss new file mode 100644 index 00000000000..e66e133d50f --- /dev/null +++ b/src/sass/products.scss @@ -0,0 +1,224 @@ +:root { + --font-dm-sans: 'DM Sans', sans-serif; + --font-titan-one: 'Titan One', sans-serif; + --background-section2-section3-rozDeschis: #ffb8ca; + --background-section2-roz-inchis: #ffa5ba; + --background-section3-section7-bej: #f0d1a5; + --background-section3-section7-verde: #c2e297; + --backround-sec4-sec5-sec7-sec8-rozAlbit: #fff5f6; + --bacground-buttonWhite-sec1-sec2-sec4-sec7: #ffffff; + --background-buttonRed-section2-section7: #d41443; + --backgoundSVG-footer: #fea5bb; + --background-modal: #e18298; + --underline-color: #e1e1e1; + --font-color-white: #ffffff; + --font-color-red: #d41443; + --font-color-pink: #ffa5ba; + --font-color-footer-Grey: #907e82; +} + +.container-products h2, +h3 { + font-family: var(--font-titan-one); + font-weight: 400; + text-transform: uppercase; + text-align: center; +} + +.container-products { + max-width: 1200px; + width: 100%; + margin: 0 auto; + height: auto; +} + +.title-products h3 { + font-family: var(--font-titan-one); + color: var(--font-color-pink); + font-weight: 400; + font-size: 18px; + letter-spacing: 0.04em; + text-transform: uppercase; + text-align: center; + @media screen and (min-width: 768px) { + font-size: 26px; + } + + @media screen and (min-width: 1200px) { + font-size: 30px; + } +} + +.title-products h2 { + font-family: var(--font-titan-one); + color: var(--font-color-red); + font-weight: 400; + font-size: 34px; + letter-spacing: 0.06em; + text-transform: uppercase; + text-align: center; + margin-top: 5px; + @media screen and (min-width: 768px) { + font-size: 48px; + } + + @media screen and (min-width: 1200px) { + font-size: 58px; + + } +} + +.card-products { + list-style-type: none; + display: flex; + text-align: center; + justify-content: center; + gap: 16px; + flex-wrap: wrap; + padding: 0; + margin-top:200px; + @media screen and (min-width: 1200px) { + gap: 32px; + margin-top: 320px; + } +} + +.product-card-list { + width: 280px; + height: 629px; + position: relative; + margin-bottom: 40px; + @media screen and (min-width: 768px) { + width: 224px; + height: 611px; + } + + @media screen and (min-width: 1200px) { + width: 368px; + height: 796px; + } +} + +.product-content-card { + border-radius: 24px; + width: 280px; + height: 380px; + padding-top: 35%; + + @media screen and (min-width: 768px) { + width: 224px; + height: 473px; + } + + @media screen and (min-width: 1200px) { + width: 368px; + height: 535px; + } +} + +.card1 { + background-color: var(--background-section2-section3-rozDeschis); +} + +.card2 { + background-color: var(--background-section3-section7-bej); +} + +.card3 { + background-color: var(--background-section3-section7-verde); +} + + + +.container-products p { + font-family: var(--font-dm-sans); + font-weight: 700; + font-size: 14px; + line-height: 176%; + text-align: center; + color: var(--font-color-white); + height: 150px; + padding: 0px 18px; + @media screen and (min-width: 1200px) { + font-size: 16px; + padding: 0px 32px; + height: 134px; + } +} + +.product-content-card h3 { + letter-spacing: 0.04em; + color: var(--font-color-white); + line-height: 34.35px; + font-size: 20px; + @media screen and (min-width: 1200px) { + font-size: 30px; + } +} + +.product-content-card h3::after { + content: '\a...'; + white-space: pre; + color: var(--font-color-white); + height: 26px; + width: 6px; +} + +.product-images { + width: 100%; + height: auto; + width: 280px; + height: 280px; + margin-top: -180px; + margin-left: -135px; + position: absolute; + @media screen and (min-width: 768px) { + width: 224px; + height: 224px; + margin-top: -140px; + margin-left: -110px; + } + + @media screen and (min-width: 1200px) { + width: 368px; + height: 394px; + margin-top: -260px; + margin-left: -180px; + } +} + +.arrow-products { + width: 20px; + height: 13px; + fill: var(--font-color-red); +} + +.product-arrow-button { + background-color: var(--bacground-buttonWhite-sec1-sec2-sec4-sec7); + border: solid var(--bacground-buttonWhite-sec1-sec2-sec4-sec7); + width: 40px; + height: 40px; + border-radius: 50%; + cursor: pointer; + position: relative; + top: 0px; + @media screen and (min-width: 768px) { + position: relative; + top: 70px; + + } + +} + + + +.product-arrow-button:hover, +.product-arrow-button:active { + background-color: var(--background-buttonRed-section2-section7); + +} + +.product-arrow-button:hover .arrow-products, +.product-arrow-button:active .arrow-products { + fill: var(--font-color-white); +} \ No newline at end of file