diff --git a/source/favicon.ico b/source/favicon.ico new file mode 100644 index 00000000..aa135f93 Binary files /dev/null and b/source/favicon.ico differ diff --git a/source/favicons/180.png b/source/favicons/180.png new file mode 100644 index 00000000..48501e67 Binary files /dev/null and b/source/favicons/180.png differ diff --git a/source/favicons/180.webp b/source/favicons/180.webp new file mode 100644 index 00000000..b21c1aa8 Binary files /dev/null and b/source/favicons/180.webp differ diff --git a/source/favicons/192.png b/source/favicons/192.png new file mode 100644 index 00000000..61a11f9a Binary files /dev/null and b/source/favicons/192.png differ diff --git a/source/favicons/192.webp b/source/favicons/192.webp new file mode 100644 index 00000000..ad243f85 Binary files /dev/null and b/source/favicons/192.webp differ diff --git a/source/favicons/512.png b/source/favicons/512.png new file mode 100644 index 00000000..c935ba26 Binary files /dev/null and b/source/favicons/512.png differ diff --git a/source/favicons/512.webp b/source/favicons/512.webp new file mode 100644 index 00000000..bde8e5a2 Binary files /dev/null and b/source/favicons/512.webp differ diff --git a/source/favicons/favicon.svg b/source/favicons/favicon.svg new file mode 100644 index 00000000..acd4874d --- /dev/null +++ b/source/favicons/favicon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/source/fonts/alumnisans/AlumniSans-ExtraBold.woff b/source/fonts/alumnisans/AlumniSans-ExtraBold.woff new file mode 100644 index 00000000..85993f0e Binary files /dev/null and b/source/fonts/alumnisans/AlumniSans-ExtraBold.woff differ diff --git a/source/fonts/alumnisans/AlumniSans-ExtraBold.woff2 b/source/fonts/alumnisans/AlumniSans-ExtraBold.woff2 new file mode 100644 index 00000000..00cab50c Binary files /dev/null and b/source/fonts/alumnisans/AlumniSans-ExtraBold.woff2 differ diff --git a/source/fonts/alumnisans/AlumniSans-SemiBold.woff b/source/fonts/alumnisans/AlumniSans-SemiBold.woff new file mode 100644 index 00000000..799ac39b Binary files /dev/null and b/source/fonts/alumnisans/AlumniSans-SemiBold.woff differ diff --git a/source/fonts/alumnisans/AlumniSans-SemiBold.woff2 b/source/fonts/alumnisans/AlumniSans-SemiBold.woff2 new file mode 100644 index 00000000..a2f46a6f Binary files /dev/null and b/source/fonts/alumnisans/AlumniSans-SemiBold.woff2 differ diff --git a/source/fonts/robotocondensed/RobotoCondensed-Bold.woff b/source/fonts/robotocondensed/RobotoCondensed-Bold.woff new file mode 100644 index 00000000..86f38da1 Binary files /dev/null and b/source/fonts/robotocondensed/RobotoCondensed-Bold.woff differ diff --git a/source/fonts/robotocondensed/RobotoCondensed-Bold.woff2 b/source/fonts/robotocondensed/RobotoCondensed-Bold.woff2 new file mode 100644 index 00000000..666ef2cf Binary files /dev/null and b/source/fonts/robotocondensed/RobotoCondensed-Bold.woff2 differ diff --git a/source/fonts/robotocondensed/RobotoCondensed-Light.woff b/source/fonts/robotocondensed/RobotoCondensed-Light.woff new file mode 100644 index 00000000..9c1c3855 Binary files /dev/null and b/source/fonts/robotocondensed/RobotoCondensed-Light.woff differ diff --git a/source/fonts/robotocondensed/RobotoCondensed-Light.woff2 b/source/fonts/robotocondensed/RobotoCondensed-Light.woff2 new file mode 100644 index 00000000..8fb83267 Binary files /dev/null and b/source/fonts/robotocondensed/RobotoCondensed-Light.woff2 differ diff --git a/source/fonts/robotocondensed/RobotoCondensed-Regular.woff b/source/fonts/robotocondensed/RobotoCondensed-Regular.woff new file mode 100644 index 00000000..dd4ebd45 Binary files /dev/null and b/source/fonts/robotocondensed/RobotoCondensed-Regular.woff differ diff --git a/source/fonts/robotocondensed/RobotoCondensed-Regular.woff2 b/source/fonts/robotocondensed/RobotoCondensed-Regular.woff2 new file mode 100644 index 00000000..ddfeeeac Binary files /dev/null and b/source/fonts/robotocondensed/RobotoCondensed-Regular.woff2 differ diff --git a/source/img/faq-img-desktop-1x.png b/source/img/faq-img-desktop-1x.png new file mode 100644 index 00000000..63663639 Binary files /dev/null and b/source/img/faq-img-desktop-1x.png differ diff --git a/source/img/faq-img-desktop-1x.webp b/source/img/faq-img-desktop-1x.webp new file mode 100644 index 00000000..1c3d4343 Binary files /dev/null and b/source/img/faq-img-desktop-1x.webp differ diff --git a/source/img/faq-img-desktop-2x.png b/source/img/faq-img-desktop-2x.png new file mode 100644 index 00000000..17146af2 Binary files /dev/null and b/source/img/faq-img-desktop-2x.png differ diff --git a/source/img/faq-img-desktop-2x.webp b/source/img/faq-img-desktop-2x.webp new file mode 100644 index 00000000..2ac207d7 Binary files /dev/null and b/source/img/faq-img-desktop-2x.webp differ diff --git a/source/img/faq-img-mobile-1x.png b/source/img/faq-img-mobile-1x.png new file mode 100644 index 00000000..0c6268b5 Binary files /dev/null and b/source/img/faq-img-mobile-1x.png differ diff --git a/source/img/faq-img-mobile-1x.webp b/source/img/faq-img-mobile-1x.webp new file mode 100644 index 00000000..b3d9f6fc Binary files /dev/null and b/source/img/faq-img-mobile-1x.webp differ diff --git "a/source/img/faq-img-mobile-1\321\205.webp" "b/source/img/faq-img-mobile-1\321\205.webp" new file mode 100644 index 00000000..b3d9f6fc Binary files /dev/null and "b/source/img/faq-img-mobile-1\321\205.webp" differ diff --git a/source/img/faq-img-mobile-2x.png b/source/img/faq-img-mobile-2x.png new file mode 100644 index 00000000..72cf56de Binary files /dev/null and b/source/img/faq-img-mobile-2x.png differ diff --git a/source/img/faq-img-mobile-2x.webp b/source/img/faq-img-mobile-2x.webp new file mode 100644 index 00000000..96fe1dca Binary files /dev/null and b/source/img/faq-img-mobile-2x.webp differ diff --git a/source/img/faq-img-tablet-1x.png b/source/img/faq-img-tablet-1x.png new file mode 100644 index 00000000..698fc4c4 Binary files /dev/null and b/source/img/faq-img-tablet-1x.png differ diff --git a/source/img/faq-img-tablet-1x.webp b/source/img/faq-img-tablet-1x.webp new file mode 100644 index 00000000..d064e8c5 Binary files /dev/null and b/source/img/faq-img-tablet-1x.webp differ diff --git a/source/img/faq-img-tablet-2x.png b/source/img/faq-img-tablet-2x.png new file mode 100644 index 00000000..5fbddea2 Binary files /dev/null and b/source/img/faq-img-tablet-2x.png differ diff --git a/source/img/faq-img-tablet-2x.webp b/source/img/faq-img-tablet-2x.webp new file mode 100644 index 00000000..c79e154b Binary files /dev/null and b/source/img/faq-img-tablet-2x.webp differ diff --git a/source/img/games-desktop-1x.jpg b/source/img/games-desktop-1x.jpg new file mode 100644 index 00000000..2730c1c8 Binary files /dev/null and b/source/img/games-desktop-1x.jpg differ diff --git a/source/img/games-desktop-1x.webp b/source/img/games-desktop-1x.webp new file mode 100644 index 00000000..14f107ec Binary files /dev/null and b/source/img/games-desktop-1x.webp differ diff --git "a/source/img/games-desktop-1\321\205.webp" "b/source/img/games-desktop-1\321\205.webp" new file mode 100644 index 00000000..14f107ec Binary files /dev/null and "b/source/img/games-desktop-1\321\205.webp" differ diff --git a/source/img/games-desktop-2x.jpg b/source/img/games-desktop-2x.jpg new file mode 100644 index 00000000..81f96ae7 Binary files /dev/null and b/source/img/games-desktop-2x.jpg differ diff --git a/source/img/games-desktop-2x.webp b/source/img/games-desktop-2x.webp new file mode 100644 index 00000000..38b030f4 Binary files /dev/null and b/source/img/games-desktop-2x.webp differ diff --git a/source/img/games-mobile-1x.jpg b/source/img/games-mobile-1x.jpg new file mode 100644 index 00000000..f75856c7 Binary files /dev/null and b/source/img/games-mobile-1x.jpg differ diff --git a/source/img/games-mobile-1x.webp b/source/img/games-mobile-1x.webp new file mode 100644 index 00000000..940119ad Binary files /dev/null and b/source/img/games-mobile-1x.webp differ diff --git a/source/img/games-mobile-2x.jpg b/source/img/games-mobile-2x.jpg new file mode 100644 index 00000000..e0b46c9b Binary files /dev/null and b/source/img/games-mobile-2x.jpg differ diff --git a/source/img/games-mobile-2x.webp b/source/img/games-mobile-2x.webp new file mode 100644 index 00000000..de4f9763 Binary files /dev/null and b/source/img/games-mobile-2x.webp differ diff --git a/source/img/games-tablet-1x.jpg b/source/img/games-tablet-1x.jpg new file mode 100644 index 00000000..2ac23d62 Binary files /dev/null and b/source/img/games-tablet-1x.jpg differ diff --git a/source/img/games-tablet-1x.webp b/source/img/games-tablet-1x.webp new file mode 100644 index 00000000..011ada90 Binary files /dev/null and b/source/img/games-tablet-1x.webp differ diff --git a/source/img/games-tablet-2x.jpg b/source/img/games-tablet-2x.jpg new file mode 100644 index 00000000..a67e3ab4 Binary files /dev/null and b/source/img/games-tablet-2x.jpg differ diff --git a/source/img/games-tablet-2x.webp b/source/img/games-tablet-2x.webp new file mode 100644 index 00000000..c39a3e48 Binary files /dev/null and b/source/img/games-tablet-2x.webp differ diff --git a/source/img/girl-img-desktop-1x.jpg b/source/img/girl-img-desktop-1x.jpg new file mode 100644 index 00000000..f523d3d3 Binary files /dev/null and b/source/img/girl-img-desktop-1x.jpg differ diff --git a/source/img/girl-img-desktop-1x.webp b/source/img/girl-img-desktop-1x.webp new file mode 100644 index 00000000..988fbbd4 Binary files /dev/null and b/source/img/girl-img-desktop-1x.webp differ diff --git a/source/img/girl-img-desktop-2x.jpg b/source/img/girl-img-desktop-2x.jpg new file mode 100644 index 00000000..b0ccd39e Binary files /dev/null and b/source/img/girl-img-desktop-2x.jpg differ diff --git a/source/img/girl-img-desktop-2x.webp b/source/img/girl-img-desktop-2x.webp new file mode 100644 index 00000000..5165600b Binary files /dev/null and b/source/img/girl-img-desktop-2x.webp differ diff --git a/source/img/girl-img-mobile-1x.jpg b/source/img/girl-img-mobile-1x.jpg new file mode 100644 index 00000000..88cffd95 Binary files /dev/null and b/source/img/girl-img-mobile-1x.jpg differ diff --git a/source/img/girl-img-mobile-1x.webp b/source/img/girl-img-mobile-1x.webp new file mode 100644 index 00000000..a492e7fe Binary files /dev/null and b/source/img/girl-img-mobile-1x.webp differ diff --git a/source/img/girl-img-mobile-2x.jpg b/source/img/girl-img-mobile-2x.jpg new file mode 100644 index 00000000..1ebe8d38 Binary files /dev/null and b/source/img/girl-img-mobile-2x.jpg differ diff --git a/source/img/girl-img-mobile-2x.webp b/source/img/girl-img-mobile-2x.webp new file mode 100644 index 00000000..febc2538 Binary files /dev/null and b/source/img/girl-img-mobile-2x.webp differ diff --git a/source/img/girl-img-tablet-1x.jpg b/source/img/girl-img-tablet-1x.jpg new file mode 100644 index 00000000..20fa0047 Binary files /dev/null and b/source/img/girl-img-tablet-1x.jpg differ diff --git a/source/img/girl-img-tablet-1x.webp b/source/img/girl-img-tablet-1x.webp new file mode 100644 index 00000000..c32973ef Binary files /dev/null and b/source/img/girl-img-tablet-1x.webp differ diff --git a/source/img/girl-img-tablet-2x.jpg b/source/img/girl-img-tablet-2x.jpg new file mode 100644 index 00000000..9a7acd81 Binary files /dev/null and b/source/img/girl-img-tablet-2x.jpg differ diff --git a/source/img/girl-img-tablet-2x.webp b/source/img/girl-img-tablet-2x.webp new file mode 100644 index 00000000..a8b649cf Binary files /dev/null and b/source/img/girl-img-tablet-2x.webp differ diff --git a/source/img/hero-img-desktop-1x.jpg b/source/img/hero-img-desktop-1x.jpg new file mode 100644 index 00000000..433bc0e0 Binary files /dev/null and b/source/img/hero-img-desktop-1x.jpg differ diff --git a/source/img/hero-img-desktop-1x.webp b/source/img/hero-img-desktop-1x.webp new file mode 100644 index 00000000..a1712f4c Binary files /dev/null and b/source/img/hero-img-desktop-1x.webp differ diff --git "a/source/img/hero-img-desktop-1\321\205.webp" "b/source/img/hero-img-desktop-1\321\205.webp" new file mode 100644 index 00000000..a1712f4c Binary files /dev/null and "b/source/img/hero-img-desktop-1\321\205.webp" differ diff --git a/source/img/hero-img-desktop-2x.jpg b/source/img/hero-img-desktop-2x.jpg new file mode 100644 index 00000000..f021f275 Binary files /dev/null and b/source/img/hero-img-desktop-2x.jpg differ diff --git a/source/img/hero-img-desktop-2x.webp b/source/img/hero-img-desktop-2x.webp new file mode 100644 index 00000000..e9b4dd46 Binary files /dev/null and b/source/img/hero-img-desktop-2x.webp differ diff --git a/source/img/hero-img-tablet-1x.jpg b/source/img/hero-img-tablet-1x.jpg new file mode 100644 index 00000000..b69a8125 Binary files /dev/null and b/source/img/hero-img-tablet-1x.jpg differ diff --git a/source/img/hero-img-tablet-1x.webp b/source/img/hero-img-tablet-1x.webp new file mode 100644 index 00000000..56af68a7 Binary files /dev/null and b/source/img/hero-img-tablet-1x.webp differ diff --git a/source/img/hero-img-tablet-2x.jpg b/source/img/hero-img-tablet-2x.jpg new file mode 100644 index 00000000..f449d6c3 Binary files /dev/null and b/source/img/hero-img-tablet-2x.jpg differ diff --git a/source/img/hero-img-tablet-2x.webp b/source/img/hero-img-tablet-2x.webp new file mode 100644 index 00000000..e85335c4 Binary files /dev/null and b/source/img/hero-img-tablet-2x.webp differ diff --git a/source/img/juri-1.jpg b/source/img/juri-1.jpg new file mode 100644 index 00000000..ca7e5003 Binary files /dev/null and b/source/img/juri-1.jpg differ diff --git a/source/img/juri-1.webp b/source/img/juri-1.webp new file mode 100644 index 00000000..2034a9c7 Binary files /dev/null and b/source/img/juri-1.webp differ diff --git a/source/img/juri-1@2x.jpg b/source/img/juri-1@2x.jpg new file mode 100644 index 00000000..c87d83d7 Binary files /dev/null and b/source/img/juri-1@2x.jpg differ diff --git a/source/img/juri-1@2x.webp b/source/img/juri-1@2x.webp new file mode 100644 index 00000000..2e526d7e Binary files /dev/null and b/source/img/juri-1@2x.webp differ diff --git a/source/img/juri-2.jpg b/source/img/juri-2.jpg new file mode 100644 index 00000000..dcfacd71 Binary files /dev/null and b/source/img/juri-2.jpg differ diff --git a/source/img/juri-2.webp b/source/img/juri-2.webp new file mode 100644 index 00000000..3c292722 Binary files /dev/null and b/source/img/juri-2.webp differ diff --git a/source/img/juri-2@2x.jpg b/source/img/juri-2@2x.jpg new file mode 100644 index 00000000..cdb93cc8 Binary files /dev/null and b/source/img/juri-2@2x.jpg differ diff --git a/source/img/juri-2@2x.webp b/source/img/juri-2@2x.webp new file mode 100644 index 00000000..99be857e Binary files /dev/null and b/source/img/juri-2@2x.webp differ diff --git a/source/img/juri-3.jpg b/source/img/juri-3.jpg new file mode 100644 index 00000000..349427ac Binary files /dev/null and b/source/img/juri-3.jpg differ diff --git a/source/img/juri-3.webp b/source/img/juri-3.webp new file mode 100644 index 00000000..8e3e7e23 Binary files /dev/null and b/source/img/juri-3.webp differ diff --git a/source/img/juri-3@2x.jpg b/source/img/juri-3@2x.jpg new file mode 100644 index 00000000..a591fd8e Binary files /dev/null and b/source/img/juri-3@2x.jpg differ diff --git a/source/img/juri-3@2x.webp b/source/img/juri-3@2x.webp new file mode 100644 index 00000000..b376cab5 Binary files /dev/null and b/source/img/juri-3@2x.webp differ diff --git a/source/img/juri-4.jpg b/source/img/juri-4.jpg new file mode 100644 index 00000000..99090d85 Binary files /dev/null and b/source/img/juri-4.jpg differ diff --git a/source/img/juri-4.webp b/source/img/juri-4.webp new file mode 100644 index 00000000..acbbcce5 Binary files /dev/null and b/source/img/juri-4.webp differ diff --git a/source/img/juri-4@2x.jpg b/source/img/juri-4@2x.jpg new file mode 100644 index 00000000..0efe8d72 Binary files /dev/null and b/source/img/juri-4@2x.jpg differ diff --git a/source/img/juri-4@2x.webp b/source/img/juri-4@2x.webp new file mode 100644 index 00000000..bebb66ec Binary files /dev/null and b/source/img/juri-4@2x.webp differ diff --git a/source/img/logo.svg b/source/img/logo.svg new file mode 100644 index 00000000..f2ead4cf --- /dev/null +++ b/source/img/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/source/img/main-img-desktop-1x.jpg b/source/img/main-img-desktop-1x.jpg new file mode 100644 index 00000000..8c1ec7f8 Binary files /dev/null and b/source/img/main-img-desktop-1x.jpg differ diff --git a/source/img/main-img-desktop-1x.webp b/source/img/main-img-desktop-1x.webp new file mode 100644 index 00000000..5add1238 Binary files /dev/null and b/source/img/main-img-desktop-1x.webp differ diff --git a/source/img/main-img-desktop-2x.jpg b/source/img/main-img-desktop-2x.jpg new file mode 100644 index 00000000..71bfc653 Binary files /dev/null and b/source/img/main-img-desktop-2x.jpg differ diff --git a/source/img/main-img-desktop-2x.webp b/source/img/main-img-desktop-2x.webp new file mode 100644 index 00000000..90b3cd16 Binary files /dev/null and b/source/img/main-img-desktop-2x.webp differ diff --git a/source/img/main-img-mobile-1x.jpg b/source/img/main-img-mobile-1x.jpg new file mode 100644 index 00000000..b4188bd0 Binary files /dev/null and b/source/img/main-img-mobile-1x.jpg differ diff --git a/source/img/main-img-mobile-1x.webp b/source/img/main-img-mobile-1x.webp new file mode 100644 index 00000000..a68860e5 Binary files /dev/null and b/source/img/main-img-mobile-1x.webp differ diff --git a/source/img/main-img-mobile-2x.jpg b/source/img/main-img-mobile-2x.jpg new file mode 100644 index 00000000..308f9b29 Binary files /dev/null and b/source/img/main-img-mobile-2x.jpg differ diff --git a/source/img/main-img-mobile-2x.webp b/source/img/main-img-mobile-2x.webp new file mode 100644 index 00000000..dc273c00 Binary files /dev/null and b/source/img/main-img-mobile-2x.webp differ diff --git a/source/img/main-img-tablet-1x.jpg b/source/img/main-img-tablet-1x.jpg new file mode 100644 index 00000000..b313a3da Binary files /dev/null and b/source/img/main-img-tablet-1x.jpg differ diff --git a/source/img/main-img-tablet-1x.webp b/source/img/main-img-tablet-1x.webp new file mode 100644 index 00000000..bd93918a Binary files /dev/null and b/source/img/main-img-tablet-1x.webp differ diff --git a/source/img/main-img-tablet-2x.jpg b/source/img/main-img-tablet-2x.jpg new file mode 100644 index 00000000..e355fd2c Binary files /dev/null and b/source/img/main-img-tablet-2x.jpg differ diff --git a/source/img/main-img-tablet-2x.webp b/source/img/main-img-tablet-2x.webp new file mode 100644 index 00000000..be0bd4c4 Binary files /dev/null and b/source/img/main-img-tablet-2x.webp differ diff --git a/source/img/price-decor-desktop-1x.png b/source/img/price-decor-desktop-1x.png new file mode 100644 index 00000000..198dd5de Binary files /dev/null and b/source/img/price-decor-desktop-1x.png differ diff --git a/source/img/price-decor-desktop-1x.webp b/source/img/price-decor-desktop-1x.webp new file mode 100644 index 00000000..01faa603 Binary files /dev/null and b/source/img/price-decor-desktop-1x.webp differ diff --git a/source/img/price-decor-desktop-2x.png b/source/img/price-decor-desktop-2x.png new file mode 100644 index 00000000..ae5e9da1 Binary files /dev/null and b/source/img/price-decor-desktop-2x.png differ diff --git a/source/img/price-decor-desktop-2x.webp b/source/img/price-decor-desktop-2x.webp new file mode 100644 index 00000000..fd91f7dd Binary files /dev/null and b/source/img/price-decor-desktop-2x.webp differ diff --git a/source/img/price-decor-tablet-1x.png b/source/img/price-decor-tablet-1x.png new file mode 100644 index 00000000..5d1e944c Binary files /dev/null and b/source/img/price-decor-tablet-1x.png differ diff --git a/source/img/price-decor-tablet-1x.webp b/source/img/price-decor-tablet-1x.webp new file mode 100644 index 00000000..54405879 Binary files /dev/null and b/source/img/price-decor-tablet-1x.webp differ diff --git "a/source/img/price-decor-tablet-1\321\205.webp" "b/source/img/price-decor-tablet-1\321\205.webp" new file mode 100644 index 00000000..54405879 Binary files /dev/null and "b/source/img/price-decor-tablet-1\321\205.webp" differ diff --git a/source/img/price-decor-tablet-2x.png b/source/img/price-decor-tablet-2x.png new file mode 100644 index 00000000..ae72f246 Binary files /dev/null and b/source/img/price-decor-tablet-2x.png differ diff --git a/source/img/price-decor-tablet-2x.webp b/source/img/price-decor-tablet-2x.webp new file mode 100644 index 00000000..e107f4e6 Binary files /dev/null and b/source/img/price-decor-tablet-2x.webp differ diff --git a/source/img/sprite/logo.svg b/source/img/sprite/logo.svg deleted file mode 100644 index aee2e13c..00000000 --- a/source/img/sprite/logo.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/source/img/sprite/next-button.svg b/source/img/sprite/next-button.svg new file mode 100644 index 00000000..55b80cbe --- /dev/null +++ b/source/img/sprite/next-button.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/sprite/ok.svg b/source/img/sprite/ok.svg new file mode 100644 index 00000000..21ad7d2e --- /dev/null +++ b/source/img/sprite/ok.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/sprite/play-button-ellipse.svg b/source/img/sprite/play-button-ellipse.svg new file mode 100644 index 00000000..85421848 --- /dev/null +++ b/source/img/sprite/play-button-ellipse.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/source/img/sprite/play-button.svg b/source/img/sprite/play-button.svg new file mode 100644 index 00000000..56ea3bd6 --- /dev/null +++ b/source/img/sprite/play-button.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/sprite/prev-button.svg b/source/img/sprite/prev-button.svg new file mode 100644 index 00000000..81ef20cc --- /dev/null +++ b/source/img/sprite/prev-button.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/sprite/price-icon.svg b/source/img/sprite/price-icon.svg new file mode 100644 index 00000000..49c87754 --- /dev/null +++ b/source/img/sprite/price-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/source/img/sprite/reddit.svg b/source/img/sprite/reddit.svg new file mode 100644 index 00000000..84a255ea --- /dev/null +++ b/source/img/sprite/reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/sprite/user.svg b/source/img/sprite/user.svg deleted file mode 100644 index 6873ae6e..00000000 --- a/source/img/sprite/user.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/source/img/sprite/vk.svg b/source/img/sprite/vk.svg new file mode 100644 index 00000000..0edd2fcd --- /dev/null +++ b/source/img/sprite/vk.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/video-img-desktop-1x.jpg b/source/img/video-img-desktop-1x.jpg new file mode 100644 index 00000000..60c0c7a2 Binary files /dev/null and b/source/img/video-img-desktop-1x.jpg differ diff --git a/source/img/video-img-desktop-1x.webp b/source/img/video-img-desktop-1x.webp new file mode 100644 index 00000000..0ab09cdd Binary files /dev/null and b/source/img/video-img-desktop-1x.webp differ diff --git a/source/img/video-img-desktop-2x.jpg b/source/img/video-img-desktop-2x.jpg new file mode 100644 index 00000000..68eb1d64 Binary files /dev/null and b/source/img/video-img-desktop-2x.jpg differ diff --git a/source/img/video-img-desktop-2x.webp b/source/img/video-img-desktop-2x.webp new file mode 100644 index 00000000..abad4607 Binary files /dev/null and b/source/img/video-img-desktop-2x.webp differ diff --git "a/source/img/video-img-mobile-1\321\205.jpg" "b/source/img/video-img-mobile-1\321\205.jpg" new file mode 100644 index 00000000..8cbc2ebf Binary files /dev/null and "b/source/img/video-img-mobile-1\321\205.jpg" differ diff --git "a/source/img/video-img-mobile-1\321\205.webp" "b/source/img/video-img-mobile-1\321\205.webp" new file mode 100644 index 00000000..173d344a Binary files /dev/null and "b/source/img/video-img-mobile-1\321\205.webp" differ diff --git a/source/img/video-img-mobile-2x.jpg b/source/img/video-img-mobile-2x.jpg new file mode 100644 index 00000000..ffd23b44 Binary files /dev/null and b/source/img/video-img-mobile-2x.jpg differ diff --git a/source/img/video-img-mobile-2x.webp b/source/img/video-img-mobile-2x.webp new file mode 100644 index 00000000..7a7f881d Binary files /dev/null and b/source/img/video-img-mobile-2x.webp differ diff --git a/source/img/video-img-tablet-1x.jpg b/source/img/video-img-tablet-1x.jpg new file mode 100644 index 00000000..2f9beb64 Binary files /dev/null and b/source/img/video-img-tablet-1x.jpg differ diff --git a/source/img/video-img-tablet-1x.webp b/source/img/video-img-tablet-1x.webp new file mode 100644 index 00000000..0be2c153 Binary files /dev/null and b/source/img/video-img-tablet-1x.webp differ diff --git a/source/img/video-img-tablet-2x.jpg b/source/img/video-img-tablet-2x.jpg new file mode 100644 index 00000000..40c247f0 Binary files /dev/null and b/source/img/video-img-tablet-2x.jpg differ diff --git a/source/img/video-img-tablet-2x.webp b/source/img/video-img-tablet-2x.webp new file mode 100644 index 00000000..4a311d4b Binary files /dev/null and b/source/img/video-img-tablet-2x.webp differ diff --git a/source/index.html b/source/index.html index efa99257..09187f5e 100644 --- a/source/index.html +++ b/source/index.html @@ -5,27 +5,651 @@ SUPERGYM + + + + + + + + + + + + + + +
+ + +
+ +
+ + + + Логотип фитнес-центра SUPERGYM. + + 8 800 555-55-55 +
+ +
+ +
+

Омск

+
+
    +
  • Тренажёрный зал
    • +
  • Групповые занятия
    • +
  • Кардио-зона
    • +
+

Фитнес
центр

+
+
+ + Купить абонемент + +
+
+ + +
+
+

Тренажёрный зал

+

Просторный зал площадью 900 кв/м

+

Supergym – самый большой фитнес центр за Уралом и идеальное место для укрепления тела и здоровья. Тренажёрный зал оснащён всем необходимым современным оборудованием для всех спортсменов.

+

В зале расположены отдельная зона для Crossfit и кардио-зона с 40 тренажёрами. Также в фитнес центре есть несколько оборудованных залов для различных видов групповых занятий.

+
+ + + + + + + + Спортивное оборудование тренажерного зала. + + +
+ + + + + + + Видео-ролик тренажерного зала. + + + + +
+
+ + +
+
+

Абонементы

+
    +
  • 1 месяц
    • +
  • 6 месяцев
    • +
  • 12 месяцев
    • +
+ + + + + + +
+
+ + +
+
+
+
+

SUPER GAMES

+
+
+
Дата
+
7
+
Марта
+
2019
+
+
+
Время
+
12:00
+
+
+
+

Ежегодные соревнования по CrossFit

+ заполнить заявку +
+
+
+ + +
+

Жюри

+ +
+ + +
+
+ + +
+

Наши преимущества

+ +
+ + +
+

Акции

+
+
+

Год

+

4999

+

Безлимитный абонемент
в тренажёрный зал

+ подробнее +
+
+ + +
+ + +
+

Вопросы и ответы

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

    Как стать членом
    фитнес центра?

    + +

    При первом посещении и покупке абонемента, необходимо заполнить анкету и подписать договор. При покупке абонемента онлайн, анкета также заполняется онлайн и договор придёт вам на почту.

    +
    • + +
  • +

    Где можно посмотреть расписание?

    + +

    +
    • + +
  • +

    Есть кулеры в центре? Предоставляются полотенца?

    + +

    +
    • + +
  • +

    Сколько тренеров работает в клубе и какова их квалификация?

    + +

    +
    • +
+ +
    +
  • +

    Занятия с тренером входят в абонемент?

    + +

    При посещении тренажерного зала вам необходимо оплатить занятия с тренером отдельно. В зале всегда присутствует дежурный тренер, которому можно задать вопрос, получить небольшую консультацию по тренажеру или технике выполнения упражнения.

    +
    • +
  • +

    Можно ли заморозить абонемент?

    + +

    +
    • +
  • +

    Есть ли лимит по посещениям тренажерного зала и групповых занятий?

    + +

    +
    • +
  • +

    Что такое семейный доступ и доступ для друзей?

    + +

    +
    • +
+ +
    +
  • +

    Предлагает ли клуб услуги по консультированию по вопросам питания?

    + +

    Да. Вы можете обратиться как к своему тренеру, так и к нашему нутрициологу. Специалист уточнит ваши данные, цели и предложит программу питания.

    +
    • +
  • +

    Проводятся ли в клубе какие-либо мероприятия или соревнования?

    + +

    +
    • +
  • +

    Можно ли приобрести в центре спортивное питание?

    + +

    +
    • +
  • +

    Есть ли в центре детская комната?

    + +

    +
    • +
+ +
    +
  • +

    Есть в фитнес-центре дресс-код?

    + +

    Для тренировок необходимо иметь предназначенную для этого закрытую спортивную обувь и одежду. Верхняя и нижняя части тела должны быть закрыты (используйте футболки, майки, спортивные брюки, шорты, кроссовки). В целях безопасности, запрещается тренироваться босиком, в пляжных или домашних тапочках и т. п., исключения составляют специальные классы (например, йога, пилатес).

    +
    • +
  • +

    Можно ли приводить с собой детей на тренировки?

    + +

    +
    • +
  • +

    Какие дополнительные правила посещения центра?

    + +

    +
    • +
  • +

    Нужна ли медицинская справка для посещения залов и бассейна?

    + +

    +
    • +
+
+ +
+
+ + +
+

Отзывы

+ +
+ + +
+
+ + +
+
+

Бесплатное занятие

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

Контакты

+
    +
  • +

    Адрес:

    +
    г. Омск, ул. 60 лет Октября, 7
    +
    • +
  • +

    График работы:

    +

    Пн-Вс: с 8:00 до 22:00

    +
    • +
  • +

    Телефон:

    +

    + 8 800 555-55-55 +

    +
    • +
  • +

    Email:

    +

    + oмск@supergym.ru +

    +
    • +
+
+
+ +
+ + + - Это спрайт + + -
hero
-
about
-
price
-
games
-
juri
-
features
-
offers
-
faq
-
reviews
-
form
-
footer
+ + + + + + + + + + diff --git a/source/manifest.webmanifest b/source/manifest.webmanifest new file mode 100644 index 00000000..128631fa --- /dev/null +++ b/source/manifest.webmanifest @@ -0,0 +1,6 @@ +{ + "icons": [ + { "src": "favicons/192.png", "type": "image/png", "sizes": "192x192" }, + { "src": "favicons/512.png", "type": "image/png", "sizes": "512x512" } + ] +} diff --git a/source/public/favicon.ico b/source/public/favicon.ico deleted file mode 100644 index c91ede97..00000000 Binary files a/source/public/favicon.ico and /dev/null differ diff --git a/source/public/robots.txt b/source/public/robots.txt deleted file mode 100644 index c2a49f4f..00000000 --- a/source/public/robots.txt +++ /dev/null @@ -1,2 +0,0 @@ -User-agent: * -Allow: / diff --git a/source/sass/blocks/about.scss b/source/sass/blocks/about.scss new file mode 100644 index 00000000..8665e14f --- /dev/null +++ b/source/sass/blocks/about.scss @@ -0,0 +1,258 @@ +.about { + background-color: $white-color; + padding-top: 40px; + padding-bottom: 40px; + + display: flex; + flex-direction: column; + gap: 36px; + + img { + padding: 0; + width: 100%; + } +} + +.about__text-wrap { + h2 { + text-align: left; + margin-bottom: 12px; + } + + h3 { + padding: 0; + margin: 0; + + font-family: $secondary-ff; + font-size: 18px; + line-height: 20px; + font-weight: 400; + + margin-bottom: 36px; + } + + p { + padding: 0; + margin: 0; + + &:nth-of-type(2) { + display: none; + } + } +} + +.about__video-wrap { + position: relative; + padding: 0; +} + +.about__video-button { + width: 72px; + height: 72px; + + position: absolute; + border: 2px solid $red-border; + border-radius: 50%; + background-color: transparent; + top: 29%; + right: 39%; + z-index: 1; + + &::before { + content: ""; + position: absolute; + top: 12%; + left: 13%; + width: 52px; + height: 52px; + border-radius: 50%; + background-image: $bg-button; + } + + &::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + top: 42%; + left: 45%; + mask-image: url("/__spritemap#sprite-play-button-view"); + mask-size: 12px 12px; + mask-repeat: no-repeat; + background-color: $white-color; + } +} + +@media (min-width: $tablet-width) { + .about { + padding: 61px 45px 0; + margin-bottom: -50px; + + gap: 0; + } + + .about__text-wrap { + margin: 0; + padding: 0; + text-align: center; + + h2 { + text-align: center; + margin-bottom: 20px; + } + + h3 { + font-size: 20px; + } + + p { + margin: 0 89px 36px; + } + } + + .about__video-wrap { + z-index: 2; + bottom: 85px; + width: fit-content; + margin: 0 auto; + } + + .about__video-button { + left: 37%; + right: 0; + + &::before { + left: 10%; + } + + &::after { + left: 40%; + top: 40%; + } + } +} + +@media (min-width: $desktop-width) { + .about { + padding: 120px 103px 123px; + margin-bottom: 115px; + + display: flex; + flex-direction: row; + gap: 145px; + + position: relative; + + img { + width: auto; + } + } + + .about__text-wrap { + text-align: left; + + h2 { + text-align: left; + + margin-bottom: 26px; + } + + h3 { + text-align: left; + font-size: 22px; + margin-bottom: 95px; + } + + p { + margin: 0; + + &:nth-of-type(2) { + display: block; + padding-top: 8px; + } + } + } + + .about__video-wrap { + z-index: 2; + bottom: 10px; + left: 503px; + + position: absolute; + } + + .about__video-button { + width: 100px; + height: 100px; + top: 28%; + left: 36%; + + &::before { + top: 14%; + left: 14%; + width: 72px; + height: 72px; + } + + &::after { + mask-size: 17px 17px; + left: 45%; + top: 42%; + } + + &:hover { + cursor: pointer; + border-color: $grey-opacity; + + &::before { + background-image: none; + background-color: $white-color; + } + + &::after { + background-color: $grey-opacity; + } + } + + &:focus { + border-color: $primary-color; + + &::before { + background-image: none; + background-color: $grey-border2; + } + + &::after { + background-color: $primary-color; + } + } + + &:active { + border-color: $primary-color; + + &::before { + background-image: none; + background-color: $white-color; + } + + &::after { + background-color: $primary-color; + } + } + + &:disabled { + border-color: $primary-color; + opacity: 0.4; + + &::before { + background-image: none; + background-color: $white-color; + } + + &::after { + background-color: $primary-color; + } + } + } +} + diff --git a/source/sass/blocks/block-title.scss b/source/sass/blocks/block-title.scss new file mode 100644 index 00000000..408b4f67 --- /dev/null +++ b/source/sass/blocks/block-title.scss @@ -0,0 +1,20 @@ +.block-title { + padding: 0; + margin: 0; + + font-family: $primary-ff; + font-size: 32px; + line-height: 32px; + font-weight: 600; + text-align: center; + + @media (min-width: $tablet-width) { + font-size: 42px; + line-height: 42px; + } + + @media (min-width: $desktop-width) { + font-size: 54px; + line-height: 54px; + } +} diff --git a/source/sass/blocks/contacts.scss b/source/sass/blocks/contacts.scss new file mode 100644 index 00000000..c48f738f --- /dev/null +++ b/source/sass/blocks/contacts.scss @@ -0,0 +1,110 @@ +.contacts { + padding: 38px 15px 41px; +} + +.contacts__list { + list-style: none; + padding: 0; + margin: 0; + + display: flex; + flex-direction: column; + gap: 28px; + + li { + display: flex; + flex-direction: column; + gap: 12px; + } + + h3 { + padding: 0; + margin: 0; + + font-size: 20px; + line-height: 20px; + font-weight: 400; + } + + p { + margin: 0; + line-height: 20px; + font-weight: 400; + } + + address { + line-height: 20px; + font-weight: 400; + font-style: normal; + } + + a { + color: $primary-color; + } +} + +@media (min-width: $tablet-width) { + .contacts { + padding: 60px 164px 59px; + } + + .contacts__list { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px 60px; + + position: relative; + + &::before { + content: ""; + position: absolute; + border-right: 1px solid $grey-secondary; + width: 100%; + height: 100%; + top: 0; + left: -50%; + } + + li { + gap: 5px; + + &:nth-child(2) { + grid-column: 1/2; + } + + &:nth-child(3) { + grid-column: 2/-1; + grid-row: 1/2; + } + + &:nth-child(4) { + grid-column: 2/-1; + } + } + + h3 { + font-size: 24px; + line-height: 24px; + } + + p, + address { + font-size: 14px; + line-height: 22px; + } + } +} + +@media (min-width: $desktop-width) { + .contacts { + padding: 60px 103px; + + h2 { + text-align: left; + } + } + + .contacts__list { + column-gap: 120px; + } +} diff --git a/source/sass/blocks/container.scss b/source/sass/blocks/container.scss new file mode 100644 index 00000000..ae9b6a9b --- /dev/null +++ b/source/sass/blocks/container.scss @@ -0,0 +1,18 @@ +.container { + width: 100%; + margin: 0 auto; + padding-left: 15px; + padding-right: 15px; + + @media (min-width: $tablet-width) { + padding-left: 45px; + padding-right: 45px; + } + + @media (min-width: $desktop-width) { + // width: 1366px; + // padding: 0; + padding-left: 103px; + padding-right: 103px; + } +} diff --git a/source/sass/blocks/faq.scss b/source/sass/blocks/faq.scss new file mode 100644 index 00000000..288b7269 --- /dev/null +++ b/source/sass/blocks/faq.scss @@ -0,0 +1,318 @@ +.faq { + padding-top: 70px; + padding-bottom: 70px; + background-color: $bg-secondary; + + h2 { + margin-bottom: 35px; + } +} + +.faq__slider-wrap { + ul { + list-style: none; + padding: 0; + margin: 0; + + &:not(:first-child) { + display: none; + } + } + + li { + border-top: 1px solid $grey-secondary; + padding-top: 20px; + padding-bottom: 20px; + + display: grid; + grid-template-columns: 1fr min-content; + column-gap: 22px; + row-gap: 20px; + + &:last-child { + border-bottom: 1px solid $grey-secondary; + } + } + + h3 { + padding: 0; + margin: 0; + + font-size: 20px; + line-height: 20px; + font-weight: 400; + + grid-column: 1/2; + } + + p { + margin: 0; + padding: 0; + + font-size: 16px; + line-height: 20px; + + grid-column: 1/2; + } + + li:not(:first-child) p { + display: none; + } +} + +.faq__button-list { + list-style: none; + padding: 0; + margin: 0; + margin-bottom: 35px; + + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.faq__button { + border: 1px solid $grey-border; + background-color: $white-color; + + font-family: $secondary-ff; + color: $primary-color; + font-size: 16px; + line-height: 16px; + font-weight: 400; + + padding: 14px 15px; + width: 140px; + + &--current { + color: $white-color; + background-image: $bg-button; + border: none; + + padding: 15px; + } + + &:focus { + border-color: $primary-color; + } + + &:active { + color: $white-color; + background-image: $bg-button; + border: none; + } + + &:disabled { + opacity: 0.2; + } +} + +.faq__toggle { + padding: 0; + background-color: $white-color; + border: 1px solid $bg-blue; + border-radius: 50%; + align-self: center; + width: 30px; + height: 30px; + position: relative; + + grid-column: 2/-1; + + &::before { + position: absolute; + content: ""; + width: 14px; + height: 100%; + border-top: 1px solid $bg-blue; + left: 25%; + } + + &::after { + position: absolute; + content: ""; + width: 100%; + height: 14px; + border-left: 1px solid $bg-blue; + top: 25%; + } + + &--active { + background-color: $bg-blue; + } + + &--active::before { + border-color: $white-color; + } + + &--active::after { + content: none; + } + + &:focus { + cursor: pointer; + background-color: $grey-secondary; + border-color: $bg-blue; + } + + &:focus::before, + &:focus::after { + border-color: $white-color; + } + + &:disabled { + opacity: 0.3; + } +} + +@media (min-width: $tablet-width) { + .faq { + padding: 61px 45px 60px; + + h2 { + margin-bottom: 45px; + } + } + + .faq__slider-wrap { + li { + column-gap: 79px; + row-gap: 10px; + padding-top: 23px; + padding-bottom: 23px; + } + + h3 { + font-size: 22px; + line-height: 22px; + + min-height: 40px; + align-content: center; + + br { + display: none; + } + } + + p { + font-size: 18px; + line-height: 24px; + } + } + + .faq__button-list { + margin-bottom: 44px; + + display: flex; + flex-wrap: wrap; + } + + .faq__button { + font-size: 18px; + line-height: 18px; + + padding: 18px; + width: 162px; + } + + .faq__toggle { + width: 40px; + height: 40px; + + &::before { + width: 20px; + } + + &::after { + height: 20px; + } + } +} + +@media (min-width: $desktop-width) { + .faq { + padding: 100px 103px; + + h2 { + margin-bottom: 50px; + text-align: left; + } + } + + .faq__wrap { + display: flex; + justify-content: space-between; + gap: 40px; + + dt { + font-size: 24px; + line-height: 24px; + + display: grid; + grid-template-columns: auto min-content; + gap: 160px; + + &:nth-child(1) { + border-top: 1px solid $grey-secondary; + padding-top: 23px; + margin-bottom: 10px; + } + } + + dd { + padding-right: 200px; + padding-bottom: 23px; + + line-height: 24px; + } + } + + .faq__button-list { + margin-bottom: 0; + + display: flex; + flex-direction: column; + flex-wrap: wrap; + } + + .faq__button { + width: 260px; + + &:hover { + cursor: pointer; + border-color: $primary-color; + } + } + + .faq__slider-wrap { + li { + row-gap: 23px; + padding-top: 22px; + } + + h3 { + font-size: 24px; + line-height: 24px; + + br { + display: none; + } + } + + p { + margin-right: 121px; + } + } + + .faq__toggle { + &:hover { + cursor: pointer; + background-color: $bg-blue; + } + + &:hover::before, + &:hover::after { + border-color: $white-color; + } + } +} diff --git a/source/sass/blocks/features.scss b/source/sass/blocks/features.scss new file mode 100644 index 00000000..6e7dfc2b --- /dev/null +++ b/source/sass/blocks/features.scss @@ -0,0 +1,213 @@ +.features { + background-color: $bg-secondary; + text-align: center; + + padding: 40px 0; + + h2 { + margin-bottom: 40px; + } + + ul { + list-style: none; + padding: 0; + margin: 0; + + display: flex; + flex-direction: column; + gap: 35px; + } + + li { + padding-left: 30px; + padding-right: 30px; + width: 290px; + margin: 0 auto; + + &:nth-child(3) { + width: 100%; + padding: 30px 75px 41px; + margin-top: 4px; + margin-bottom: 5px; + + background-color: $bg-blue; + color: $white-color; + } + + &:nth-child(3) p:nth-child(1) { + background-image: linear-gradient($white-color, $white-color); + margin-bottom: 5px; + } + + &:nth-child(3) h3 { + font-size: 22px; + line-height: 22px; + font-weight: 700; + + margin-bottom: 20px; + } + } + + p { + padding: 0; + margin: 0; + + &:nth-child(1) { + font-size: 64px; + line-height: 64px; + font-weight: 700; + + background-image: $price-color; + background-clip: text; + + // -webkit-background-clip: text;не удалять!!! + -webkit-text-fill-color: transparent; + } + } + + div { + &:nth-child(1) p:nth-child(2) { + color: $blue-secondary; + line-height: 20px; + font-weight: 400; + + margin-bottom: 12px; + } + } + + h3 { + padding: 0; + margin: 0; + margin-bottom: 12px; + + font-size: 18px; + line-height: 20px; + font-weight: 400; + } +} + +@media (min-width: $tablet-width) { + .features { + padding: 60px 45px; + + h2 { + margin-bottom: 50px; + } + + ul { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px 30px; + } + + li { + padding: 0; + text-align: left; + + display: flex; + gap: 15px; + width: 100%; + + &:nth-child(3) { + grid-column: 1/-1; + margin: 0 auto; + width: 320px; + + flex-direction: column; + gap: 25px; + text-align: center; + padding: 35px; + + h3 { + font-size: 24px; + line-height: 24px; + + margin-bottom: 0; + } + } + + &:nth-child(3) p:nth-child(1) { + margin-bottom: 0; + } + } + + p { + &:nth-child(1) { + font-size: 70px; + line-height: 70px; + } + + &:nth-child(2) { + margin-bottom: 0; + } + } + + h3 { + font-size: 20px; + } + + div { + &:nth-child(1) p:nth-child(2) { + line-height: 22px; + font-size: 14px; + + margin-bottom: 0; + } + } + } +} + +@media (min-width: $desktop-width) { + .features { + padding: 100px 103px; + + ul { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + column-gap: 40px; + row-gap: 0; + } + + li { + gap: 0; + justify-content: space-between; + + padding-top: 40px; + + &:nth-child(1), + &:nth-child(2) { + border-bottom: 2px solid $red-border; + padding-bottom: 40px; + padding-top: 0; + } + + &:nth-child(3) { + grid-column: 2/3; + grid-row: 1/3; + margin: 0 auto; + width: 360px; + padding: 58px 40px 56px; + gap: 0; + + h3 { + margin-top: 10px; + margin-bottom: 30px; + + font-size: 26px; + line-height: 26px; + } + } + + div:last-child { + width: 210px; + } + } + + h3 { + font-size: 22px; + + padding-top: 2px; + margin-bottom: 8px; + } + } +} diff --git a/source/sass/blocks/footer.scss b/source/sass/blocks/footer.scss new file mode 100644 index 00000000..8b051551 --- /dev/null +++ b/source/sass/blocks/footer.scss @@ -0,0 +1,171 @@ +.footer { + padding-top: 40px; + padding-bottom: 40px; + background-color: $dark; + + display: flex; + flex-direction: column; + gap: 29px; +} + +.footer__list { + list-style: none; + padding: 0; + margin: 0; + + display: flex; + flex-wrap: wrap; + gap: 15px 34px; + + a { + color: $white-color; + line-height: 20px; + font-weight: 400; + } +} + +.footer__item { + border: 1px solid $dark; + + &:focus { + border-color: $white-color; + } + + &:disabled { + opacity: 0.4; + } +} + +.footer__list--social { + gap: 20px; + align-items: center; +} + +.footer__social-link { + display: block; + background-color: $white-color; + border-radius: 50%; + position: relative; + width: 25px; + height: 25px; + + &::before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + border-radius: 50%; + mask-repeat: no-repeat; + mask-position: center; + background-color: $dark; + } + + &--vk::before { + mask-image: url("/__spritemap#sprite-vk-view"); + mask-size: 13px 8px; + } + + &--ok::before { + mask-image: url("/__spritemap#sprite-ok-view"); + mask-size: 10px 17px; + } + + &--reddit::before { + mask-image: url("/__spritemap#sprite-reddit-view"); + mask-size: 15px 15px; + } + + &:focus { + background-color: $blue-color; + } + + &:focus::before { + background-color: $white-color; + } + + &:active { + background-color: $bg-blue; + } + + &:active::before { + background-color: $white-color; + } + + &:disabled { + background-color: $white-opacity2; + } + + &:disabled::before { + background-color: $dark; + } +} + +@media (min-width: $tablet-width) { + .footer { + padding: 45px; + + flex-direction: row; + gap: 0; + } + + .footer__list { + gap: 30px; + margin: 0 auto; + + &--nav { + margin-top: -2px; + } + } + + .footer__list--social { + gap: 15px; + margin: 0; + } + + .footer__item { + a { + font-size: 14px; + line-height: 22px; + font-weight: 300; + } + } +} + +@media (min-width: $desktop-width) { + .footer { + padding: 40px 103px; + justify-content: space-between; + align-items: center; + } + + .footer__list { + gap: 82px; + align-items: center; + } + + .footer__list--social { + gap: 10px; + } + + .footer__item { + a { + line-height: 23px; + } + + &:hover { + border-bottom: 1px solid $white-color; + } + } + + .footer__social-link { + &:hover { + cursor: pointer; + background-color: $grey-color; + } + + &:hover::before { + background-color: $white-color; + } + } +} + diff --git a/source/sass/blocks/form.scss b/source/sass/blocks/form.scss new file mode 100644 index 00000000..e4a294a3 --- /dev/null +++ b/source/sass/blocks/form.scss @@ -0,0 +1,124 @@ +.form { + form { + padding: 70px 15px; + background-color: $primary-color; + + color: $white-color; + } + + h2 { + text-align: left; + margin-bottom: 36px; + } +} + +.form__list { + list-style: none; + padding: 0; + margin: 0; + + display: flex; + flex-direction: column; + gap: 35px; + margin-bottom: 36px; + + input { + border: none; + padding: 0; + padding-bottom: 4px; + background-color: transparent; + height: 27px; + border-bottom: 1px solid $grey-secondary; + width: 100%; + + color: $white-color; + + &:focus { + border: 1px solid $white-color; + } + + &:disabled { + opacity: 0.4; + } + } + + // input::-webkit-outer-spin-button, + // input::-webkit-inner-spin-button { + // appearance: none; + // margin: 0; + // } +} + +.form__button { + border: 2px solid $white-color; + background-color: transparent; + width: 100%; + padding: 22px 15px; + + font-family: $secondary-ff; + color: $white-color; + font-size: 12px; + line-height: 12px; + font-weight: 700; + text-transform: uppercase; +} + +@media (min-width: $tablet-width) { + .form { + form { + padding: 60px 164px 61px; + } + + h2 { + text-align: center; + font-family: $primary-ff; + font-size: 54px; + line-height: 54px; + font-weight: 600; + } + } + + .form__list { + flex-direction: row; + justify-content: space-between; + gap: 30px; + + margin-bottom: 35px; + + li { + width: 100%; + } + + input { + padding-bottom: 0; + } + } + + .form__button { + padding: 25px 20px; + } +} + +@media (min-width: $desktop-width) { + .form { + display: grid; + grid-template-columns: 1fr 1fr; + + form { + padding: 60px 103px; + + h2 { + text-align: left; + } + } + } + + .form__list { + input { + &:hover { + color: $white-color; + border-color: $white-color; + } + } + } +} diff --git a/source/sass/blocks/games.scss b/source/sass/blocks/games.scss new file mode 100644 index 00000000..247c5b04 --- /dev/null +++ b/source/sass/blocks/games.scss @@ -0,0 +1,253 @@ +.games { + padding-top: 25px; + padding-bottom: 25px; +} + +.games__wrap { + background-color: $red-color; + + min-height: 610px; + display: flex; + flex-direction: column; + background-image: + image-set( + url("../../img/games-mobile-1x.webp") type("image/webp") 1x, + url("../../img/games-mobile-2x.webp") type("image/webp") 2x, + url("../../img/games-mobile-1x.jpg") type("image/jpg") 1x, + url("../../img/games-mobile-2x.jpg") type("image/jpg") 2x,); + background-repeat: no-repeat; + background-position: bottom; +} + +.games__text-wrap { + color: $white-color; + + display: flex; + flex-wrap: wrap; + gap: 16px; + padding: 40px; + + h2 { + padding: 0; + margin: 0; + + font-family: $primary-ff; + font-size: 48px; + line-height: 54px; + font-weight: 600; + } +} + +.games__list { + padding: 0; + margin: 0; + + display: flex; + flex-direction: column; + gap: 5px; +} + +.games__item { + display: grid; + grid-template-columns: auto 1fr; + + dt { + font-size: 16px; + line-height: 19px; + border-bottom: 1px solid $white-color; + + grid-column: 1/-1; + padding-bottom: 2px; + margin-bottom: 3px; + } + + dd { + padding: 0; + margin: 0; + + &:nth-child(2) { + grid-column: 1/2; + grid-row: 2/4; + align-self: center; + margin-right: 3px; + + font-size: 24px; + line-height: 24px; + font-weight: 700; + } + + &:nth-child(3), + &:nth-child(4) { + font-size: 12px; + line-height: 12px; + font-weight: 400; + } + + &:nth-child(6) { + grid-column: 1/-1; + font-size: 24px; + line-height: 24px; + font-weight: 700; + } + } +} + +.games__title-wrap { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 56px; +} + +.games__desc { + padding: 0; + margin: 0; + + font-size: 16px; + line-height: 20px; +} + +.games__button { + border-color: $white-color; + color: $white-color; + + padding: 22px 10px; + width: 220px; + align-self: flex-end; +} + +@media (min-width: $tablet-width) { + .games { + padding-top: 60px; + padding-bottom: 60px; + } + + .games__wrap { + min-height: 348px; + flex-direction: row; + background-image: + image-set( + url("../../img/games-tablet-1x.webp") type("image/webp") 1x, + url("../../img/games-tablet-2x.webp") type("image/webp") 2x, + url("../../img/games-tablet-1x.jpg") type("image/jpg") 1x, + url("../../img/games-tablet-2x.jpg") type("image/jpg") 2x,); + background-position: right top; + } + + .games__text-wrap { + padding: 40px; + width: 300px; + + gap: 8px; + } + + .games__title-wrap { + gap: 22px; + } + + .games__list { + gap: 10px; + } + + .games__item { + dt { + font-size: 18px; + line-height: 24px; + + margin-bottom: 0; + } + + dd { + &:nth-child(3), + &:nth-child(4) { + font-size: 14px; + line-height: 22px; + } + + &:nth-child(2) { + line-height: 28px; + } + } + } + + .games__desc { + font-size: 18px; + line-height: 24px; + } + + .games__button { + padding: 26px 15px 25px; + } +} + +@media (min-width: $desktop-width) { + .games { + padding: 100px 103px; + } + + .games__wrap { + min-height: 500px; + background-image: + image-set( + url("../../img/games-desktop-1x.webp") type("image/webp") 1x, + url("../../img/games-desktop-2x.webp") type("image/webp") 2x, + url("../../img/games-desktop-1x.jpg") type("image/jpg") 1x, + url("../../img/games-desktop-2x.jpg") type("image/jpg") 2x,); + background-position: right top; + } + + .games__text-wrap { + width: 500px; + padding: 60px 80px 95px; + + gap: 30px; + } + + .games__title-wrap { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 77px; + + h2 { + font-size: 82px; + line-height: 96px; + } + + dd { + &:nth-child(2), + &:nth-child(6) { + font-size: 40px; + line-height: 40px; + font-weight: 700; + } + } + } + + .games__list { + gap: 20px; + } + + .games__item { + dt { + padding-bottom: 6px; + margin-bottom: 3px; + } + + dd { + &:nth-child(2) { + margin-right: 7px; + + line-height: 46px; + } + } + } + + .games__desc { + font-size: 18px; + line-height: 24px; + } + + .games__button { + padding: 27px 15px; + width: 100%; + } +} diff --git a/source/sass/blocks/hero.scss b/source/sass/blocks/hero.scss new file mode 100644 index 00000000..8e489c09 --- /dev/null +++ b/source/sass/blocks/hero.scss @@ -0,0 +1,237 @@ +.hero { + background-image: $bg-color; + color: $white-color; +} + +.hero__header { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + padding-top: 16px; + padding-bottom: 16px; +} + +.hero__phone-number { + color: $white-color; + font-family: $secondary-ff; + font-size: 22px; + line-height: 22px; + font-weight: 700; + border-bottom: 1px solid transparent; + padding-bottom: 6px; + + &:focus { + color: $bg-blue; + } + + &:active { + color: $primary-color; + border-color: $primary-color; + } + + &:disabled { + color: $bg-secondary; + } +} + +.hero__promo-wrap { + margin-left: 15px; + margin-right: 15px; + padding: 41px 0 32px; +} + +.hero__text-wrap { + margin-bottom: 48px; + + p { + padding: 0; + margin: 0; + margin-bottom: 14px; + + font-family: $primary-ff; + font-size: 32px; + line-height: 32px; + font-weight: 600; + text-align: right; + } +} + +.hero__wrap { + display: flex; + justify-content: space-between; + align-items: flex-end; + + h1 { + padding: 0; + margin: 0; + + font-family: $primary-ff; + font-size: 62px; + line-height: 62px; + font-weight: 800; + letter-spacing: 1px; + text-align: right; + text-transform: uppercase; + } +} + +.hero__list { + list-style: none; + padding: 0; + margin: 0; + + font-size: 14px; + line-height: 20px; + font-weight: 400; + text-align: right; +} + +.hero__button { + width: 290px; + padding-top: 23px; + padding-bottom: 22px; +} + +@media (min-width: $tablet-width) { + .hero { + padding-bottom: 100px; + } + + .hero__header { + padding-top: 30px; + padding-bottom: 23px; + + img { + width: 110px; + height: 22px; + } + } + + .hero__phone-number { + font-size: 24px; + line-height: 24px; + } + + .hero__promo-wrap { + margin-left: 45px; + margin-right: 45px; + padding: 31px 0; + + background-image: + image-set( + url("../../img/hero-img-tablet-1x.webp") type("image/webp") 1x, + url("../../img/hero-img-tablet-2x.webp") type("image/webp") 2x, + url("../../img/hero-img-tablet-1x.jpg") type("image/jpg") 1x, + url("../../img/hero-img-tablet-2x.jpg") type("image/jpg") 2x,); + background-repeat: no-repeat; + background-position: right; + } + + .hero__text-wrap { + width: 324px; + margin-bottom: 50px; + + p { + font-size: 42px; + line-height: 42px; + + margin-bottom: 10px; + } + } + + .hero__wrap { + align-items: normal; + + h1 { + font-size: 72px; + line-height: 85px; + letter-spacing: 2px; + } + } + + .hero__list { + line-height: 22px; + + margin-top: 79px; + } + + .hero__button { + width: 185px; + + margin-bottom: 0; + margin-left: 139px; + padding: 20px 15px; + } +} + +@media (min-width: $desktop-width) { + .hero { + padding-bottom: 120px; + } + + .hero__header { + padding-top: 30px; + padding-bottom: 22px; + margin-bottom: 30px; + + img { + width: 130px; + height: 26px; + } + } + + .hero__phone-number { + font-size: 26px; + line-height: 26px; + + &:hover { + cursor: pointer; + color: $blue-opacity; + } + } + + .hero__promo-wrap { + margin-left: 252px; + margin-right: 175px; + padding: 52px 0; + + background-image: + image-set( + url("../../img/hero-img-desktop-1x.webp") type("image/webp") 1x, + url("../../img/hero-img-desktop-2x.webp") type("image/webp") 2x, + url("../../img/hero-img-desktop-1x.jpg") type("image/jpg") 1x, + url("../../img/hero-img-desktop-2x.jpg") type("image/jpg") 2x,); + } + + .hero__text-wrap { + width: 383px; + margin-bottom: 40px; + + p { + font-size: 54px; + line-height: 54px; + + margin-bottom: 40px; + } + } + + .hero__wrap { + h1 { + font-size: 92px; + line-height: 110px; + letter-spacing: 4px; + } + } + + .hero__list { + margin-top: 85px; + } + + .hero__button { + width: 270px; + + margin-left: 12%; + padding: 27px; + } +} diff --git a/source/sass/blocks/juri.scss b/source/sass/blocks/juri.scss new file mode 100644 index 00000000..a9cf1f17 --- /dev/null +++ b/source/sass/blocks/juri.scss @@ -0,0 +1,166 @@ +.juri { + background-color: $white-color; + padding-top: 40px; + padding-bottom: 40px; + + position: relative; + + width: 100%; + height: 432px; + overflow: hidden; + + h2 { + margin: 0 20px 20px; + } +} + +.juri__list { + list-style: none; + padding: 0; + margin: 0; + + text-align: center; + + li { + margin: 0 15px 40px; + position: relative; + } + + span { + display: block; + position: absolute; + bottom: 8%; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + + color: $white-color; + font-size: 22px; + line-height: 22px; + font-weight: 400; + } +} + +.juri__info-wrap { + display: none; + + h3 { + padding: 0; + margin: 0; + margin-bottom: 34px; + + font-size: 16px; + line-height: 24px; + font-weight: 300; + color: $text-color; + text-align: center; + } +} + +.juri__info-list { + padding: 0; + margin: 0; + list-style: initial; + padding-left: 10px; + + color: $white-color; + font-size: 14px; + line-height: 22px; + font-weight: 400; + + display: flex; + flex-direction: column; + gap: 12px; +} + +.juri__list li:hover, +.juri__list li:focus { + .juri__info-wrap { + display: block; + + background-color: $bg; + padding: 77px 50px 51px 56px; + + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + } + + span { + bottom: 76%; + z-index: 1; + } +} + +.juri__button-wrap { + display: none; +} + +@media (min-width: $tablet-width) { + .juri { + padding: 30px 51px 60px; + height: auto; + + position: relative; + + h2 { + margin: 0; + margin-bottom: 45px; + + font-size: 54px; + line-height: 54px; + } + } + + .juri__list { + display: flex; + gap: 40px; + margin: 0 auto; + width: 560px; + overflow: hidden; + + li { + margin: 0; + } + } + + .juri__button-wrap { + display: block; + + .slider-buttons__button--prev { + left: 34px; + top: 52%; + } + + .slider-buttons__button--next { + right: 34px; + top: 52%; + } + } +} + +@media (min-width: $desktop-width) { + .juri { + padding: 100px 103px; + } + + .juri__list { + display: flex; + gap: 40px; + width: 1160px; + } + + .juri__button-wrap { + .slider-buttons__button--prev { + left: 34px; + top: 54%; + } + + .slider-buttons__button--next { + right: 34px; + top: 54%; + } + } +} diff --git a/source/sass/blocks/link-button.scss b/source/sass/blocks/link-button.scss new file mode 100644 index 00000000..cc7f1b81 --- /dev/null +++ b/source/sass/blocks/link-button.scss @@ -0,0 +1,71 @@ +.link-button { + color: $primary-color; + font-size: 12px; + line-height: 12px; + font-weight: 700; + text-transform: uppercase; + text-align: center; + + border: 2px solid $primary-color; + + display: inline-block; + width: 206px; + padding: 25px 10px; + + &:focus { + color: $white-color; + background-image: $bg-focus; + border-color: $black; + } + + &:active { + color: $white-opacity; + background-image: $bg-button; + border: none; + } + + &:disabled { + opacity: 0.3; + } + + @media (min-width: $desktop-width) { + &:hover { + color: $white-color; + background-image: $bg-button; + border: none; + + cursor: pointer; + } + } +} + +.link-button--secondary { + color: $white-color; + border-color: $white-color; + + &:focus { + color: $blue-color; + background-color: $white-focus; + background-image: none; + border-color: $black; + } + + &:active { + color: $primary-color; + background-color: $white-color; + background-image: none; + } + + &:disabled { + opacity: 0.5; + } + + @media (min-width: $desktop-width) { + &:hover { + color: $blue-color; + background-color: $white-color; + background-image: none; + border: none; + } + } +} diff --git a/source/sass/blocks/link-details.scss b/source/sass/blocks/link-details.scss new file mode 100644 index 00000000..c28cb558 --- /dev/null +++ b/source/sass/blocks/link-details.scss @@ -0,0 +1,48 @@ +.link-details { + color: $white-color; + font-size: 14px; + line-height: 14px; + font-weight: 700; + text-transform: uppercase; + + border-bottom: 1px solid $white-color; + padding-bottom: 5px; + width: 73px; + + &:focus { + border: 1px solid $white-color; + } + + &:disabled { + opacity: 0.3; + } + + @media (min-width: $desktop-width) { + &:hover { + opacity: 0.8; + + cursor: pointer; + } + } +} + + +.link-details--others { + color: $bg-blue; + border-bottom: 1px solid $grey-secondary; + width: 73px; + + &:focus { + border: 1px solid $bg-blue; + } + + &:active { + border-color: $bg-blue; + } + + @media (min-width: $desktop-width) { + &:hover { + border-color: $bg-blue; + } + } +} diff --git a/source/sass/blocks/offers.scss b/source/sass/blocks/offers.scss new file mode 100644 index 00000000..346c8a4c --- /dev/null +++ b/source/sass/blocks/offers.scss @@ -0,0 +1,284 @@ +.offers { + background-color: $white-color; + padding-top: 40px; + padding-bottom: 40px; + + h2 { + margin: 0; + padding: 0; + margin-bottom: 40px; + } +} + +.offers__wrap { + min-height: 630px; + background-color: $red-color; + background-image: + image-set( + url("../../img/girl-img-mobile-1x.webp") type("image/webp") 1x, + url("../../img/girl-img-mobile-2x.webp") type("image/webp") 2x, + url("../../img/girl-img-mobile-1x.jpg") type("image/jpg") 1x, + url("../../img/girl-img-mobile-2x.jpg") type("image/jpg") 2x,); + background-repeat: no-repeat; + background-position: bottom; + + display: flex; + flex-direction: column; + flex-wrap: wrap; + + margin-bottom: 40px; +} + +.offers__text-wrap { + color: $white-color; + text-align: center; + + display: flex; + flex-direction: column; + flex-wrap: wrap; + + padding: 30px; + + p { + padding: 0; + margin: 0; + + &:nth-child(1) { + font-size: 22px; + line-height: 22px; + font-weight: 700; + + margin-bottom: 9px; + } + + &:nth-child(2) { + font-size: 64px; + line-height: 64px; + font-weight: 700; + + margin-bottom: 28px; + } + + &:nth-child(3) { + font-size: 16px; + line-height: 20px; + + margin-bottom: 28px; + } + } +} + +.offers__link { + margin: 0 auto; +} + +.offers__list { + list-style: none; + + display: flex; + flex-direction: column; + gap: 30px; +} + +.offers__item { + color: $bg-blue; + text-align: center; + + border: 7px solid transparent; + border-image: $border-color; + border-image-slice: 1; + + padding: 21px; + display: flex; + flex-direction: column; + gap: 20px; + + h3 { + padding: 0; + margin: 0; + + font-size: 22px; + line-height: 22px; + font-weight: 700; + } + + p { + padding: 0; + margin: 0; + } +} + +@media (min-width: $tablet-width) { + .offers { + padding: 60px 45px; + + display: grid; + grid-template-columns: 1fr 1fr; + gap: 35px 30px; + + h2 { + grid-column: 1/-1; + margin-bottom: 0; + } + } + + .offers__wrap { + min-height: 462px; + grid-column: 1/-1; + background-image: + image-set( + url("../../img/girl-img-tablet-1x.webp") type("image/webp") 1x, + url("../../img/girl-img-tablet-2x.webp") type("image/webp") 2x, + url("../../img/girl-img-tablet-1x.jpg") type("image/jpg") 1x, + url("../../img/girl-img-tablet-2x.jpg") type("image/jpg") 2x,); + background-position: right; + background-size: contain; + padding: 0; + margin: 0; + + flex-direction: row; + } + + .offers__text-wrap { + padding: 40px 25px; + width: 278px; + + text-align: left; + + p { + &:nth-child(1) { + font-size: 24px; + line-height: 24px; + + margin-bottom: 20px; + } + + &:nth-child(2) { + font-size: 70px; + line-height: 70px; + + margin-bottom: 40px; + } + + &:nth-child(3) { + font-size: 18px; + line-height: 24px; + + margin-bottom: 160px; + } + } + } + + .offers__link { + margin: 0; + } + + .offers__list { + margin: 0; + padding: 0; + flex-direction: row; + + grid-column: 1/-1; + } + + .offers__item { + text-align: left; + + padding: 20px; + display: flex; + flex-direction: column; + gap: 0; + width: 324px; + + h3 { + margin-bottom: 10px; + + font-size: 26px; + line-height: 26px; + } + + p { + margin-bottom: 30px; + } + + &:nth-child(2) p { + padding-bottom: 24px; + } + } +} + +@media (min-width: $desktop-width) { + .offers { + padding: 100px 103px; + + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0 40px; + + h2 { + grid-column: 1/-1; + margin: 0; + margin-bottom: 70px; + } + + div { + &:nth-child(3) { + margin-top: 82px; + } + } + } + + .offers__wrap { + min-height: 460px; + grid-column: 1/2; + grid-row: 2/4; + background-image: + image-set( + url("../../img/girl-img-desktop-1x.webp") type("image/webp") 1x, + url("../../img/girl-img-desktop-2x.webp") type("image/webp") 2x, + url("../../img/girl-img-desktop-1x.jpg") type("image/jpg") 1x, + url("../../img/girl-img-desktop-2x.jpg") type("image/jpg") 2x,); + } + + .offers__text-wrap { + width: 280px; + padding: 40px 45px; + + p { + &:nth-child(1) { + margin-bottom: 22px; + } + + &:nth-child(3) { + margin-bottom: 156px; + } + } + } + + .offers__list { + grid-column: 2/-1; + + flex-direction: column; + margin-top: 82px; + } + + .offers__item { + width: 100%; + + h3 { + margin-bottom: 12px; + } + + &:nth-child(2) p { + padding-bottom: 0; + } + + p { + margin-bottom: 40px; + } + + p br { + display: none; + } + } +} diff --git a/source/sass/blocks/price.scss b/source/sass/blocks/price.scss new file mode 100644 index 00000000..b138aefe --- /dev/null +++ b/source/sass/blocks/price.scss @@ -0,0 +1,343 @@ +.price { + background-color: $bg-secondary; + padding-top: 40px; + padding-bottom: 40px; +} + +.price__wrap { + h2 { + margin-bottom: 30px; + } +} + +.price__buttons-list { + list-style: none; + padding: 0; + margin: 0; + + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-bottom: 8px; + margin-bottom: 31px; + + border-bottom: 2px solid $grey-color; + color: $primary-opacity; + + font-size: 16px; + line-height: 16px; + font-weight: 400; +} + +.price__buttons-list li { + &:focus { + color: $primary-color; + position: relative; + + &::after { + content: ""; + position: absolute; + width: 100%; + border-bottom: 2px solid $primary-color; + bottom: -10px; + left: 0; + } + } + + &:active { + position: relative; + color: $primary-color; + + &::after { + content: ""; + position: absolute; + width: 100%; + border-bottom: 2px solid $dark-red; + bottom: -10px; + left: 0; + } + } + + &:disabled { + color: $primary-color; + border-color: $primary-color; + opacity: 0.3; + } +} + +.price__current-button { + position: relative; + color: $primary-color; + + &::after { + content: ""; + position: absolute; + width: 100%; + border-bottom: 2px solid $dark-red; + bottom: -10px; + left: 0; + } +} + +.price__card-list { + display: none; +} + +.price__card-list--active { + list-style: none; + padding: 0; + margin: 0; + + display: flex; + flex-direction: column; + gap: 35px; + + h3 { + padding: 0; + margin: 0; + + font-size: 22px; + line-height: 22px; + font-weight: 700; + } +} + +.price__card-item { + background-color: $white-color; + padding: 44px 35px 45px; + + display: flex; + flex-direction: column; + gap: 18px; + align-items: center; + + border: 7px solid transparent; + border-image-slice: 1; + + &:hover, + &:focus { + border-image-source: $border-color; + } + + &:hover .price__button, + &:focus .price__button { + color: $white-color; + background-image: $bg-button; + border: none; + } +} + +.price__desc { + padding: 0; + margin: 0; +} + +.price__card-wrap { + position: relative; +} + +.price__value { + padding: 0; + margin: 0; + margin-right: 35px; + padding-top: 47px; + + font-size: 48px; + font-weight: 700; + line-height: 72px; + color: $blue-color; + + position: relative; + z-index: 1; + + &::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: url("../../img/sprite/price-icon.svg"); + background-repeat: no-repeat; + background-position: 15% 23%; + } +} + +.price__value-shadow { + padding: 0; + + font-size: 80px; + font-weight: 700; + line-height: 120px; + color: $grey-price; + + position: absolute; + width: fit-content; + margin: auto 0; + left: -15px; + top: 0; +} + +@media (min-width: $tablet-width) { + .price { + padding: 60px 194px 58px; + + background-image: + image-set( + url("../../img/price-decor-tablet-1x.webp") type("image/webp") 1x, + url("../../img/price-decor-tablet-2x.webp") type("image/webp") 2x, + url("../../img/price-decor-tablet-1x.png") type("image/jpg") 1x, + url("../../img/price-decor-tablet-2x.png") type("image/jpg") 2x,); + background-repeat: no-repeat; + background-position: bottom right; + } + + .price__wrap { + padding: 0; + + h2 { + margin-bottom: 38px; + } + } + + .price__buttons-list { + margin: 0 auto; + margin-bottom: 45px; + padding-bottom: 5px; + width: 310px; + + font-size: 18px; + line-height: 18px; + } + + .price__buttons-list li { + &:active { + &::after { + bottom: -7px; + } + } + } + + .price__current-button { + &::after { + bottom: -7px; + } + } + + .price__card-list--active { + gap: 37px; + } + + .price__card-item { + padding: 60px; + gap: 20px; + + h3 { + font-size: 24px; + line-height: 24px; + } + } + + .price__value { + font-size: 60px; + line-height: 90px; + + margin-right: 45px; + padding-top: 63px; + + &::after { + background-size: 30px 43px; + background-position: 15% 21%; + } + } + + .price__value-shadow { + font-size: 100px; + line-height: 150px; + + left: -18px; + top: 2px; + } + + .price__button { + width: 100%; + padding: 27px 15px; + } +} + +@media (min-width: $desktop-width) { + .price { + padding: 100px 103px; + + background-image: + image-set( + url("../../img/price-decor-desktop-1x.webp") type("image/webp") 1x, + url("../../img/price-decor-desktop-2x.webp") type("image/webp") 2x, + url("../../img/price-decor-desktop-1x.png") type("image/jpg") 1x, + url("../../img/price-decor-desktop-2x.png") type("image/jpg") 2x,); + } + + .price__wrap { + h2 { + margin-bottom: 20px; + } + } + + .price__buttons-list { + font-size: 20px; + line-height: 20px; + + width: 350px; + padding-bottom: 8px; + margin-bottom: 40px; + } + + .price__buttons-list li { + &:hover { + color: $primary-color-opacity; + position: relative; + + &::after { + content: ""; + position: absolute; + width: 100%; + border-bottom: 2px solid $grey-border-secondary; + bottom: -11px; + left: 0; + } + } + } + + .price__current-button { + &::after { + bottom: -9px; + } + } + + .price__card-list--active { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px; + } + + .price__card-item { + gap: 17px; + padding: 60px 59px; + + h3 { + font-size: 26px; + line-height: 26px; + } + } + + .price__value { + padding-top: 60px; + } + + .price__value-shadow { + left: -18px; + top: -1px; + } + + .price__button { + padding: 26px 15px 24px; + } +} diff --git a/source/sass/blocks/reviews.scss b/source/sass/blocks/reviews.scss new file mode 100644 index 00000000..0d71d72b --- /dev/null +++ b/source/sass/blocks/reviews.scss @@ -0,0 +1,173 @@ +.reviews { + padding: 40px; + + h2 { + margin-bottom: 40px; + } + + ul { + list-style: none; + padding: 0; + margin: 0; + + height: 328px; + overflow: hidden; + background-color: $bg-blue; + color: $white-color; + text-align: center; + } + + h3 { + padding: 0; + margin: 0; + margin-bottom: 16px; + + font-size: 18px; + line-height: 20px; + font-weight: 400; + } + + p { + padding: 0; + margin: 0; + margin-bottom: 30px; + } +} + +.reviews li { + padding: 108px 25px 30px; + + position: relative; + + &::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + top: 30px; + left: calc((100% - 68px) / 2); + background-image: + image-set( + url("../../img/faq-img-mobile-1x.webp") type("image/webp") 1x, + url("../../img/faq-img-mobile-2x.webp") type("image/webp") 2x, + url("../../img/faq-img-mobile-1x.jpg") type("image/jpg") 1x, + url("../../img/faq-img-mobile-2x.jpg") type("image/jpg") 2x,); + background-repeat: no-repeat; + } +} + +.reviews__button-wrap { + display: none; +} + +@media (min-width: $tablet-width) { + .reviews { + padding: 60px 45px; + position: relative; + + h2 { + margin-bottom: 36px; + + font-size: 54px; + line-height: 54px; + font-weight: 600; + } + + ul { + height: 242px; + text-align: left; + + margin-left: 89px; + margin-right: 89px; + } + + h3 { + margin-bottom: 20px; + + font-size: 22px; + line-height: 22px; + } + + p { + margin-bottom: 0; + } + } + + .reviews li { + padding: 40px 30px 40px 150px; + + &::before { + content: ""; + top: 40px; + left: 30px; + background-image: + image-set( + url("../../img/faq-img-tablet-1x.webp") type("image/webp") 1x, + url("../../img/faq-img-tablet-2x.webp") type("image/webp") 2x, + url("../../img/faq-img-tablet-1x.jpg") type("image/jpg") 1x, + url("../../img/faq-img-tablet-2x.jpg") type("image/jpg") 2x,); + } + } + + .reviews__button-wrap { + display: block; + + .slider-buttons__button--prev { + left: 28px; + } + + .slider-buttons__button--next { + right: 28px; + } + } + + .reviews__button-wrap .slider-button__button--prev::before { + background-color: $primary-opacity2; + } +} + +@media (min-width: $desktop-width) { + .reviews { + padding-top: 100px; + padding-bottom: 100px; + + h2 { + margin-bottom: 75px; + } + + ul { + height: 258px; + width: 560px; + margin: 0 auto; + } + } + + .reviews li { + padding: 60px 62px 60px 170px; + + &::before { + content: ""; + background-image: + image-set( + url("../../img/faq-img-desktop-1x.webp") type("image/webp") 1x, + url("../../img/faq-img-desktop-2x.webp") type("image/webp") 2x, + url("../../img/faq-img-desktop-1x.jpg") type("image/jpg") 1x, + url("../../img/faq-img-desktop-2x.jpg") type("image/jpg") 2x,); + background-repeat: no-repeat; + left: 60px; + top: 60px; + } + } + + .reviews__button-wrap { + .slider-buttons__button--prev { + left: 282px; + top: 57%; + } + + .slider-buttons__button--next { + right: 282px; + top: 57%; + } + } +} diff --git a/source/sass/blocks/slider-buttons.scss b/source/sass/blocks/slider-buttons.scss new file mode 100644 index 00000000..69e2198d --- /dev/null +++ b/source/sass/blocks/slider-buttons.scss @@ -0,0 +1,57 @@ +.slider-buttons__button { + border: 1px solid transparent; + border-radius: 50%; + background-color: transparent; + padding: 0; + position: absolute; + width: 50px; + height: 50px; + top: 55%; + + &::before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + mask-size: 18px 32px; + mask-repeat: no-repeat; + mask-position: center; + background-color: $bg-blue; + left: 0; + bottom: 0; + } + + &--prev::before { + mask-image: url("/__spritemap#sprite-prev-button-view"); + } + + &--next::before { + mask-image: url("/__spritemap#sprite-next-button-view"); + } + + &:focus { + border-color: $primary-color; + background-color: $grey-price; + } + + &:active { + background-color: $primary-color; + } + + &:active::before { + background-color: $white-color; + } + + &:disabled::before { + background-color: $primary-opacity2; + } +} + +@media (min-width: $desktop-width) { + .slider-buttons__button { + &:hover { + cursor: pointer; + border-color: $primary-color; + } + } +} diff --git a/source/sass/global/fonts.scss b/source/sass/global/fonts.scss new file mode 100644 index 00000000..70f59085 --- /dev/null +++ b/source/sass/global/fonts.scss @@ -0,0 +1,10 @@ +@include font-face("Alumni Sans", 600, normal, url("../../fonts/alumnisans/AlumniSans-SemiBold.woff2") format("woff2")); +@include font-face("Alumni Sans", 600, normal, url("../../fonts/alumnisans/AlumniSans-SemiBold.woff") format("woff")); +@include font-face("Alumni Sans", 800, normal, url("../../fonts/alumnisans/AlumniSans-ExtraBold.woff2") format("woff2")); +@include font-face("Alumni Sans", 800, normal, url("../../fonts/alumnisans/AlumniSans-ExtraBold.woff") format("woff")); +@include font-face("Roboto Condensed", 300, normal, url("../../fonts/robotocondensed/RobotoCondensed-Light.woff2") format("woff2")); +@include font-face("Roboto Condensed", 300, normal, url("../../fonts/robotocondensed/RobotoCondensed-Light.woff") format("woff")); +@include font-face("Roboto Condensed", 400, normal, url("../../fonts/robotocondensed/RobotoCondensed-Regular.woff2") format("woff2")); +@include font-face("Roboto Condensed", 400, normal, url("../../fonts/robotocondensed/RobotoCondensed-Regular.woff") format("woff")); +@include font-face("Roboto Condensed", 700, normal, url("../../fonts/robotocondensed/RobotoCondensed-Bold.woff2") format("woff2")); +@include font-face("Roboto Condensed", 700, normal, url("../../fonts/robotocondensed/RobotoCondensed-Bold.woff") format("woff")); diff --git a/source/sass/global/global.scss b/source/sass/global/global.scss new file mode 100644 index 00000000..b950dcff --- /dev/null +++ b/source/sass/global/global.scss @@ -0,0 +1,46 @@ +body { + font-family: $secondary-ff; + font-style: normal; + font-weight: 300; + font-size: 14px; + line-height: 22px; + color: $primary-color; + + margin: 0; + + @media (min-width: $tablet-width) { + font-size: 16px; + line-height: 24px; + } +} + + +img { + height: auto; + object-fit: contain; + display: block; +} + +a { + text-decoration: none; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +::placeholder { + color: $white-color; + font-family: $secondary-ff; + font-size: 14px; + font-style: normal; + font-weight: 300; + line-height: 22px; + opacity: 0.4; + + @media (min-width: $tablet-width) { + font-weight: 400; + } +} diff --git a/source/sass/global/mixins.scss b/source/sass/global/mixins.scss new file mode 100644 index 00000000..802cc286 --- /dev/null +++ b/source/sass/global/mixins.scss @@ -0,0 +1,9 @@ +@mixin font-face($font-family, $font-weight, $font-style, $font-src) { + @font-face { + font-family: $font-family; + font-weight: $font-weight; + font-style: $font-style; + font-display: swap; + src: $font-src; + } +} diff --git a/source/sass/global/variables.scss b/source/sass/global/variables.scss new file mode 100644 index 00000000..b203dbe6 --- /dev/null +++ b/source/sass/global/variables.scss @@ -0,0 +1,38 @@ +$primary-ff: "Alumni Sans", "Arial", sans-serif; +$secondary-ff: "Roboto Condensed", "Arial", sans-serif; +$tablet-width: 768px; +$desktop-width: 1366px; +$mobile-width-only: 767px; +$primary-color: #102654; +$primary-color-opacity: rgba(16, 38, 84, 0.7); +$bg: rgba(16, 38, 84, 0.89); +$primary-opacity: rgba(16, 38, 84, 0.5); +$primary-opacity2: rgba(16, 38, 84, 0.3); +$white-color: #ffffff; +$white-opacity: rgba(255, 255, 255, 0.7); +$white-opacity2: rgba(255, 255, 255, 0.3); +$white-focus: rgba(255, 255, 255, 0.8); +$blue-color: #103aae; +$blue-secondary: #2e35ac; +$blue-opacity: rgba(28, 51, 116, 0.5); +$bg-blue: #1c3374; +$bg-secondary: #f8f9fc; +$bg-color: linear-gradient(90deg, #1c3477 0%, #1c3477 0.01%, #1a3578 39.11%, #73184b 75.5%, #b4022a 100%); +$price-color: linear-gradient(127.61deg, #d10a42 0%, #0041ca 45.58%); +$border-color: linear-gradient(148.82deg, #d10a42 0.85%, #00359f 100%); +$bg-button: linear-gradient(97.05deg, #ed0233 17.6%, #003eb7 95.31%); +$bg-focus: linear-gradient(97.05deg, rgba(237, 2, 51, 0.8) 17.6%, rgba(0, 62, 183, 0.8) 95.31%); +$red-color: #ed0233; +$dark-red: #d10a42; +$red-border: rgba(209, 10, 66, 0.2); +$grey-color: rgba(120, 120, 120, 0.2); +$grey-secondary: #74819c; +$grey-border: rgba(16, 38, 84, 0.2); +$grey-price: #e8e8e8; +$dark: #030a1a; +$black: #000000; +$grey-button: rgba(16, 38, 84, 0.3); +$grey-opacity: rgba(16, 38, 84, 0.6); +$grey-border-secondary: #787878; +$grey-border2: #c8c9cc; +$text-color: #b6bdcc; diff --git a/source/sass/global/visually-hidden.scss b/source/sass/global/visually-hidden.scss new file mode 100644 index 00000000..03cece1e --- /dev/null +++ b/source/sass/global/visually-hidden.scss @@ -0,0 +1,10 @@ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: none; + clip: rect(0 0 0 0); + overflow: hidden; +} diff --git a/source/sass/style.scss b/source/sass/style.scss index 96467369..7d6b7d5f 100644 --- a/source/sass/style.scss +++ b/source/sass/style.scss @@ -1,4 +1,30 @@ // Vendor // --------------------------------- -@import "vendor/normalize"; +// @import "vendor/normalize"; + +/* GLOBAL */ +@import "global/variables"; +@import "global/mixins"; +@import "global/fonts"; +@import "global/global"; +@import "global/visually-hidden"; + +/* BLOCKS */ +@import "blocks/link-button"; +@import "blocks/slider-buttons"; +@import "blocks/link-details"; +@import "blocks/container"; +@import "blocks/block-title"; +@import "blocks/hero"; +@import "blocks/about"; +@import "blocks/price"; +@import "blocks/games"; +@import "blocks/juri"; +@import "blocks/features"; +@import "blocks/offers"; +@import "blocks/faq"; +@import "blocks/reviews"; +@import "blocks/form"; +@import "blocks/contacts"; +@import "blocks/footer";