diff --git a/source/favicon.ico b/source/favicon.ico new file mode 100644 index 00000000..f1b96964 Binary files /dev/null and b/source/favicon.ico differ diff --git a/source/fonts/manrope-200.woff b/source/fonts/manrope-200.woff new file mode 100644 index 00000000..be989969 Binary files /dev/null and b/source/fonts/manrope-200.woff differ diff --git a/source/fonts/manrope-200.woff2 b/source/fonts/manrope-200.woff2 new file mode 100644 index 00000000..bf5f3704 Binary files /dev/null and b/source/fonts/manrope-200.woff2 differ diff --git a/source/fonts/manrope-300.woff b/source/fonts/manrope-300.woff new file mode 100644 index 00000000..548625ff Binary files /dev/null and b/source/fonts/manrope-300.woff differ diff --git a/source/fonts/manrope-300.woff2 b/source/fonts/manrope-300.woff2 new file mode 100644 index 00000000..477ba081 Binary files /dev/null and b/source/fonts/manrope-300.woff2 differ diff --git a/source/fonts/manrope-400.woff b/source/fonts/manrope-400.woff new file mode 100644 index 00000000..12fd5b9b Binary files /dev/null and b/source/fonts/manrope-400.woff differ diff --git a/source/fonts/manrope-400.woff2 b/source/fonts/manrope-400.woff2 new file mode 100644 index 00000000..0db37afa Binary files /dev/null and b/source/fonts/manrope-400.woff2 differ diff --git a/source/fonts/manrope-500.woff b/source/fonts/manrope-500.woff new file mode 100644 index 00000000..5ce3a9a6 Binary files /dev/null and b/source/fonts/manrope-500.woff differ diff --git a/source/fonts/manrope-500.woff2 b/source/fonts/manrope-500.woff2 new file mode 100644 index 00000000..c84a8006 Binary files /dev/null and b/source/fonts/manrope-500.woff2 differ diff --git a/source/fonts/manrope-600.woff b/source/fonts/manrope-600.woff new file mode 100644 index 00000000..ab64ae2a Binary files /dev/null and b/source/fonts/manrope-600.woff differ diff --git a/source/fonts/manrope-600.woff2 b/source/fonts/manrope-600.woff2 new file mode 100644 index 00000000..e2284eba Binary files /dev/null and b/source/fonts/manrope-600.woff2 differ diff --git a/source/fonts/manrope-700.woff b/source/fonts/manrope-700.woff new file mode 100644 index 00000000..694858c2 Binary files /dev/null and b/source/fonts/manrope-700.woff differ diff --git a/source/fonts/manrope-700.woff2 b/source/fonts/manrope-700.woff2 new file mode 100644 index 00000000..808ebb3e Binary files /dev/null and b/source/fonts/manrope-700.woff2 differ diff --git a/source/fonts/manrope-800.woff b/source/fonts/manrope-800.woff new file mode 100644 index 00000000..9930b45f Binary files /dev/null and b/source/fonts/manrope-800.woff differ diff --git a/source/fonts/manrope-800.woff2 b/source/fonts/manrope-800.woff2 new file mode 100644 index 00000000..126896cf Binary files /dev/null and b/source/fonts/manrope-800.woff2 differ diff --git a/source/img/background/form-desktop@1x.jpg b/source/img/background/form-desktop@1x.jpg new file mode 100644 index 00000000..bedcb148 Binary files /dev/null and b/source/img/background/form-desktop@1x.jpg differ diff --git a/source/img/background/form-desktop@2x.jpg b/source/img/background/form-desktop@2x.jpg new file mode 100644 index 00000000..d6ef743e Binary files /dev/null and b/source/img/background/form-desktop@2x.jpg differ diff --git a/source/img/background/form-mobile@1x.jpg b/source/img/background/form-mobile@1x.jpg new file mode 100644 index 00000000..1efb4373 Binary files /dev/null and b/source/img/background/form-mobile@1x.jpg differ diff --git a/source/img/background/form-mobile@2x.jpg b/source/img/background/form-mobile@2x.jpg new file mode 100644 index 00000000..97d98f48 Binary files /dev/null and b/source/img/background/form-mobile@2x.jpg differ diff --git a/source/img/background/form-tablet@1x.jpg b/source/img/background/form-tablet@1x.jpg new file mode 100644 index 00000000..cf99fe70 Binary files /dev/null and b/source/img/background/form-tablet@1x.jpg differ diff --git a/source/img/background/form-tablet@2x.jpg b/source/img/background/form-tablet@2x.jpg new file mode 100644 index 00000000..a01b4e28 Binary files /dev/null and b/source/img/background/form-tablet@2x.jpg differ diff --git a/source/img/background/hero-major-companies-desktop@1x.jpg b/source/img/background/hero-major-companies-desktop@1x.jpg new file mode 100644 index 00000000..6f01d597 Binary files /dev/null and b/source/img/background/hero-major-companies-desktop@1x.jpg differ diff --git a/source/img/background/hero-major-companies-desktop@2x.jpg b/source/img/background/hero-major-companies-desktop@2x.jpg new file mode 100644 index 00000000..29b68147 Binary files /dev/null and b/source/img/background/hero-major-companies-desktop@2x.jpg differ diff --git a/source/img/background/hero-major-companies-mobile@1x.jpg b/source/img/background/hero-major-companies-mobile@1x.jpg new file mode 100644 index 00000000..ecf0cc7b Binary files /dev/null and b/source/img/background/hero-major-companies-mobile@1x.jpg differ diff --git a/source/img/background/hero-major-companies-mobile@2x.jpg b/source/img/background/hero-major-companies-mobile@2x.jpg new file mode 100644 index 00000000..82bf95d5 Binary files /dev/null and b/source/img/background/hero-major-companies-mobile@2x.jpg differ diff --git a/source/img/background/hero-major-companies-tablet@1x.jpg b/source/img/background/hero-major-companies-tablet@1x.jpg new file mode 100644 index 00000000..75e7de8e Binary files /dev/null and b/source/img/background/hero-major-companies-tablet@1x.jpg differ diff --git a/source/img/background/hero-major-companies-tablet@2x.jpg b/source/img/background/hero-major-companies-tablet@2x.jpg new file mode 100644 index 00000000..9c6be0b0 Binary files /dev/null and b/source/img/background/hero-major-companies-tablet@2x.jpg differ diff --git a/source/img/background/hero-society-contribution-desktop@1x.jpg b/source/img/background/hero-society-contribution-desktop@1x.jpg new file mode 100644 index 00000000..22c72e11 Binary files /dev/null and b/source/img/background/hero-society-contribution-desktop@1x.jpg differ diff --git a/source/img/background/hero-society-contribution-desktop@2x.jpg b/source/img/background/hero-society-contribution-desktop@2x.jpg new file mode 100644 index 00000000..c727526b Binary files /dev/null and b/source/img/background/hero-society-contribution-desktop@2x.jpg differ diff --git a/source/img/background/hero-society-contribution-mobile@1x.jpg b/source/img/background/hero-society-contribution-mobile@1x.jpg new file mode 100644 index 00000000..83b46318 Binary files /dev/null and b/source/img/background/hero-society-contribution-mobile@1x.jpg differ diff --git a/source/img/background/hero-society-contribution-mobile@2x.jpg b/source/img/background/hero-society-contribution-mobile@2x.jpg new file mode 100644 index 00000000..a141c390 Binary files /dev/null and b/source/img/background/hero-society-contribution-mobile@2x.jpg differ diff --git a/source/img/background/hero-society-contribution-tablet@1x.jpg b/source/img/background/hero-society-contribution-tablet@1x.jpg new file mode 100644 index 00000000..3cc57897 Binary files /dev/null and b/source/img/background/hero-society-contribution-tablet@1x.jpg differ diff --git a/source/img/background/hero-society-contribution-tablet@2x.jpg b/source/img/background/hero-society-contribution-tablet@2x.jpg new file mode 100644 index 00000000..fe81abd1 Binary files /dev/null and b/source/img/background/hero-society-contribution-tablet@2x.jpg differ diff --git a/source/img/background/hero-studying-abroad-desktop@1x.jpg b/source/img/background/hero-studying-abroad-desktop@1x.jpg new file mode 100644 index 00000000..db3c14d1 Binary files /dev/null and b/source/img/background/hero-studying-abroad-desktop@1x.jpg differ diff --git a/source/img/background/hero-studying-abroad-desktop@2x.jpg b/source/img/background/hero-studying-abroad-desktop@2x.jpg new file mode 100644 index 00000000..ee38867e Binary files /dev/null and b/source/img/background/hero-studying-abroad-desktop@2x.jpg differ diff --git a/source/img/background/hero-studying-abroad-mobile@1x.jpg b/source/img/background/hero-studying-abroad-mobile@1x.jpg new file mode 100644 index 00000000..168e20b6 Binary files /dev/null and b/source/img/background/hero-studying-abroad-mobile@1x.jpg differ diff --git a/source/img/background/hero-studying-abroad-mobile@2x.jpg b/source/img/background/hero-studying-abroad-mobile@2x.jpg new file mode 100644 index 00000000..0ac2da2c Binary files /dev/null and b/source/img/background/hero-studying-abroad-mobile@2x.jpg differ diff --git a/source/img/background/hero-studying-abroad-tablet@1x.jpg b/source/img/background/hero-studying-abroad-tablet@1x.jpg new file mode 100644 index 00000000..9f9c7581 Binary files /dev/null and b/source/img/background/hero-studying-abroad-tablet@1x.jpg differ diff --git a/source/img/background/hero-studying-abroad-tablet@2x.jpg b/source/img/background/hero-studying-abroad-tablet@2x.jpg new file mode 100644 index 00000000..b2042517 Binary files /dev/null and b/source/img/background/hero-studying-abroad-tablet@2x.jpg differ diff --git a/source/img/background/programs-internships-desktop@1x.jpg b/source/img/background/programs-internships-desktop@1x.jpg new file mode 100644 index 00000000..70b088b2 Binary files /dev/null and b/source/img/background/programs-internships-desktop@1x.jpg differ diff --git a/source/img/background/programs-internships-desktop@2x.jpg b/source/img/background/programs-internships-desktop@2x.jpg new file mode 100644 index 00000000..42079148 Binary files /dev/null and b/source/img/background/programs-internships-desktop@2x.jpg differ diff --git a/source/img/background/programs-internships-mobile@1x.jpg b/source/img/background/programs-internships-mobile@1x.jpg new file mode 100644 index 00000000..6906f698 Binary files /dev/null and b/source/img/background/programs-internships-mobile@1x.jpg differ diff --git a/source/img/background/programs-internships-mobile@2x.jpg b/source/img/background/programs-internships-mobile@2x.jpg new file mode 100644 index 00000000..2b71d69c Binary files /dev/null and b/source/img/background/programs-internships-mobile@2x.jpg differ diff --git a/source/img/background/programs-internships-tablet@1x.jpg b/source/img/background/programs-internships-tablet@1x.jpg new file mode 100644 index 00000000..4acfe9f7 Binary files /dev/null and b/source/img/background/programs-internships-tablet@1x.jpg differ diff --git a/source/img/background/programs-internships-tablet@2x.jpg b/source/img/background/programs-internships-tablet@2x.jpg new file mode 100644 index 00000000..93509ecd Binary files /dev/null and b/source/img/background/programs-internships-tablet@2x.jpg differ diff --git a/source/img/background/programs-studies-desktop@1x.jpg b/source/img/background/programs-studies-desktop@1x.jpg new file mode 100644 index 00000000..941471ed Binary files /dev/null and b/source/img/background/programs-studies-desktop@1x.jpg differ diff --git a/source/img/background/programs-studies-desktop@2x.jpg b/source/img/background/programs-studies-desktop@2x.jpg new file mode 100644 index 00000000..8674b0dd Binary files /dev/null and b/source/img/background/programs-studies-desktop@2x.jpg differ diff --git a/source/img/background/programs-studies-mobile@1x.jpg b/source/img/background/programs-studies-mobile@1x.jpg new file mode 100644 index 00000000..ee589b0f Binary files /dev/null and b/source/img/background/programs-studies-mobile@1x.jpg differ diff --git a/source/img/background/programs-studies-mobile@2x.jpg b/source/img/background/programs-studies-mobile@2x.jpg new file mode 100644 index 00000000..a0f41466 Binary files /dev/null and b/source/img/background/programs-studies-mobile@2x.jpg differ diff --git a/source/img/background/programs-studies-tablet@1x.jpg b/source/img/background/programs-studies-tablet@1x.jpg new file mode 100644 index 00000000..1d9efd3f Binary files /dev/null and b/source/img/background/programs-studies-tablet@1x.jpg differ diff --git a/source/img/background/programs-studies-tablet@2x.jpg b/source/img/background/programs-studies-tablet@2x.jpg new file mode 100644 index 00000000..62bd1d7a Binary files /dev/null and b/source/img/background/programs-studies-tablet@2x.jpg differ diff --git a/source/img/background/programs-volunteering-desktop@1x.jpg b/source/img/background/programs-volunteering-desktop@1x.jpg new file mode 100644 index 00000000..cf301e9f Binary files /dev/null and b/source/img/background/programs-volunteering-desktop@1x.jpg differ diff --git a/source/img/background/programs-volunteering-desktop@2x.jpg b/source/img/background/programs-volunteering-desktop@2x.jpg new file mode 100644 index 00000000..d4e6bd69 Binary files /dev/null and b/source/img/background/programs-volunteering-desktop@2x.jpg differ diff --git a/source/img/background/programs-volunteering-mobile@1x.jpg b/source/img/background/programs-volunteering-mobile@1x.jpg new file mode 100644 index 00000000..07631355 Binary files /dev/null and b/source/img/background/programs-volunteering-mobile@1x.jpg differ diff --git a/source/img/background/programs-volunteering-mobile@2x.jpg b/source/img/background/programs-volunteering-mobile@2x.jpg new file mode 100644 index 00000000..b9eb7f3b Binary files /dev/null and b/source/img/background/programs-volunteering-mobile@2x.jpg differ diff --git a/source/img/background/programs-volunteering-tablet@1x.jpg b/source/img/background/programs-volunteering-tablet@1x.jpg new file mode 100644 index 00000000..8a637b7b Binary files /dev/null and b/source/img/background/programs-volunteering-tablet@1x.jpg differ diff --git a/source/img/background/programs-volunteering-tablet@2x.jpg b/source/img/background/programs-volunteering-tablet@2x.jpg new file mode 100644 index 00000000..c74410a7 Binary files /dev/null and b/source/img/background/programs-volunteering-tablet@2x.jpg differ diff --git a/source/img/content/conditions-road-sign-desktop@1x.jpg b/source/img/content/conditions-road-sign-desktop@1x.jpg new file mode 100644 index 00000000..4bef74e4 Binary files /dev/null and b/source/img/content/conditions-road-sign-desktop@1x.jpg differ diff --git a/source/img/content/conditions-road-sign-desktop@1x.webp b/source/img/content/conditions-road-sign-desktop@1x.webp new file mode 100644 index 00000000..599c6a8f Binary files /dev/null and b/source/img/content/conditions-road-sign-desktop@1x.webp differ diff --git a/source/img/content/conditions-road-sign-desktop@2x.jpg b/source/img/content/conditions-road-sign-desktop@2x.jpg new file mode 100644 index 00000000..cb28d950 Binary files /dev/null and b/source/img/content/conditions-road-sign-desktop@2x.jpg differ diff --git a/source/img/content/conditions-road-sign-desktop@2x.webp b/source/img/content/conditions-road-sign-desktop@2x.webp new file mode 100644 index 00000000..54cacafa Binary files /dev/null and b/source/img/content/conditions-road-sign-desktop@2x.webp differ diff --git a/source/img/content/conditions-road-sign-mobile@1x.jpg b/source/img/content/conditions-road-sign-mobile@1x.jpg new file mode 100644 index 00000000..ac0f657a Binary files /dev/null and b/source/img/content/conditions-road-sign-mobile@1x.jpg differ diff --git a/source/img/content/conditions-road-sign-mobile@1x.webp b/source/img/content/conditions-road-sign-mobile@1x.webp new file mode 100644 index 00000000..58a20b7c Binary files /dev/null and b/source/img/content/conditions-road-sign-mobile@1x.webp differ diff --git a/source/img/content/conditions-road-sign-mobile@2x.jpg b/source/img/content/conditions-road-sign-mobile@2x.jpg new file mode 100644 index 00000000..47755ccd Binary files /dev/null and b/source/img/content/conditions-road-sign-mobile@2x.jpg differ diff --git a/source/img/content/conditions-road-sign-mobile@2x.webp b/source/img/content/conditions-road-sign-mobile@2x.webp new file mode 100644 index 00000000..34637c0b Binary files /dev/null and b/source/img/content/conditions-road-sign-mobile@2x.webp differ diff --git a/source/img/content/conditions-road-sign-tablet@1x.jpg b/source/img/content/conditions-road-sign-tablet@1x.jpg new file mode 100644 index 00000000..ad258bd8 Binary files /dev/null and b/source/img/content/conditions-road-sign-tablet@1x.jpg differ diff --git a/source/img/content/conditions-road-sign-tablet@1x.webp b/source/img/content/conditions-road-sign-tablet@1x.webp new file mode 100644 index 00000000..40c197f4 Binary files /dev/null and b/source/img/content/conditions-road-sign-tablet@1x.webp differ diff --git a/source/img/content/conditions-road-sign-tablet@2x.jpg b/source/img/content/conditions-road-sign-tablet@2x.jpg new file mode 100644 index 00000000..e47ef587 Binary files /dev/null and b/source/img/content/conditions-road-sign-tablet@2x.jpg differ diff --git a/source/img/content/conditions-road-sign-tablet@2x.webp b/source/img/content/conditions-road-sign-tablet@2x.webp new file mode 100644 index 00000000..dc101532 Binary files /dev/null and b/source/img/content/conditions-road-sign-tablet@2x.webp differ diff --git a/source/img/content/map-desktop@1x.png b/source/img/content/map-desktop@1x.png new file mode 100644 index 00000000..181cc090 Binary files /dev/null and b/source/img/content/map-desktop@1x.png differ diff --git a/source/img/content/map-desktop@1x.webp b/source/img/content/map-desktop@1x.webp new file mode 100644 index 00000000..535d3873 Binary files /dev/null and b/source/img/content/map-desktop@1x.webp differ diff --git a/source/img/content/map-desktop@2x.png b/source/img/content/map-desktop@2x.png new file mode 100644 index 00000000..c9bb3c8b Binary files /dev/null and b/source/img/content/map-desktop@2x.png differ diff --git a/source/img/content/map-desktop@2x.webp b/source/img/content/map-desktop@2x.webp new file mode 100644 index 00000000..2b0fbe5c Binary files /dev/null and b/source/img/content/map-desktop@2x.webp differ diff --git a/source/img/content/map-mobile@1x.png b/source/img/content/map-mobile@1x.png new file mode 100644 index 00000000..4927ea0e Binary files /dev/null and b/source/img/content/map-mobile@1x.png differ diff --git a/source/img/content/map-mobile@1x.webp b/source/img/content/map-mobile@1x.webp new file mode 100644 index 00000000..b7e49a70 Binary files /dev/null and b/source/img/content/map-mobile@1x.webp differ diff --git a/source/img/content/map-mobile@2x.png b/source/img/content/map-mobile@2x.png new file mode 100644 index 00000000..58b9a80a Binary files /dev/null and b/source/img/content/map-mobile@2x.png differ diff --git a/source/img/content/map-mobile@2x.webp b/source/img/content/map-mobile@2x.webp new file mode 100644 index 00000000..d15dc7f0 Binary files /dev/null and b/source/img/content/map-mobile@2x.webp differ diff --git a/source/img/content/map-tablet@1x.png b/source/img/content/map-tablet@1x.png new file mode 100644 index 00000000..fbe37c9d Binary files /dev/null and b/source/img/content/map-tablet@1x.png differ diff --git a/source/img/content/map-tablet@1x.webp b/source/img/content/map-tablet@1x.webp new file mode 100644 index 00000000..16b9611d Binary files /dev/null and b/source/img/content/map-tablet@1x.webp differ diff --git a/source/img/content/map-tablet@2x.png b/source/img/content/map-tablet@2x.png new file mode 100644 index 00000000..6392c53c Binary files /dev/null and b/source/img/content/map-tablet@2x.png differ diff --git a/source/img/content/map-tablet@2x.webp b/source/img/content/map-tablet@2x.webp new file mode 100644 index 00000000..82bebacd Binary files /dev/null and b/source/img/content/map-tablet@2x.webp differ diff --git a/source/img/content/review-alex-mobile@1x.jpg b/source/img/content/review-alex-mobile@1x.jpg new file mode 100644 index 00000000..a0ef3de9 Binary files /dev/null and b/source/img/content/review-alex-mobile@1x.jpg differ diff --git a/source/img/content/review-alex-mobile@1x.webp b/source/img/content/review-alex-mobile@1x.webp new file mode 100644 index 00000000..c4d90995 Binary files /dev/null and b/source/img/content/review-alex-mobile@1x.webp differ diff --git a/source/img/content/review-alex-mobile@2x.jpg b/source/img/content/review-alex-mobile@2x.jpg new file mode 100644 index 00000000..96c5c49a Binary files /dev/null and b/source/img/content/review-alex-mobile@2x.jpg differ diff --git a/source/img/content/review-alex-mobile@2x.webp b/source/img/content/review-alex-mobile@2x.webp new file mode 100644 index 00000000..aaf880be Binary files /dev/null and b/source/img/content/review-alex-mobile@2x.webp differ diff --git a/source/img/content/review-alex-tablet@1x.jpg b/source/img/content/review-alex-tablet@1x.jpg new file mode 100644 index 00000000..983f6158 Binary files /dev/null and b/source/img/content/review-alex-tablet@1x.jpg differ diff --git a/source/img/content/review-alex-tablet@1x.webp b/source/img/content/review-alex-tablet@1x.webp new file mode 100644 index 00000000..373c7590 Binary files /dev/null and b/source/img/content/review-alex-tablet@1x.webp differ diff --git a/source/img/content/review-alex-tablet@2x.jpg b/source/img/content/review-alex-tablet@2x.jpg new file mode 100644 index 00000000..900e1d95 Binary files /dev/null and b/source/img/content/review-alex-tablet@2x.jpg differ diff --git a/source/img/content/review-alex-tablet@2x.webp b/source/img/content/review-alex-tablet@2x.webp new file mode 100644 index 00000000..c7861055 Binary files /dev/null and b/source/img/content/review-alex-tablet@2x.webp differ diff --git a/source/img/content/review-ivanov-mobile@1x.jpg b/source/img/content/review-ivanov-mobile@1x.jpg new file mode 100644 index 00000000..fd639613 Binary files /dev/null and b/source/img/content/review-ivanov-mobile@1x.jpg differ diff --git a/source/img/content/review-ivanov-mobile@1x.webp b/source/img/content/review-ivanov-mobile@1x.webp new file mode 100644 index 00000000..2ec8d4fc Binary files /dev/null and b/source/img/content/review-ivanov-mobile@1x.webp differ diff --git a/source/img/content/review-ivanov-mobile@2x.jpg b/source/img/content/review-ivanov-mobile@2x.jpg new file mode 100644 index 00000000..664291b7 Binary files /dev/null and b/source/img/content/review-ivanov-mobile@2x.jpg differ diff --git a/source/img/content/review-ivanov-mobile@2x.webp b/source/img/content/review-ivanov-mobile@2x.webp new file mode 100644 index 00000000..93bd52d9 Binary files /dev/null and b/source/img/content/review-ivanov-mobile@2x.webp differ diff --git a/source/img/content/review-ivanov-tablet@1x.jpg b/source/img/content/review-ivanov-tablet@1x.jpg new file mode 100644 index 00000000..083e3bb1 Binary files /dev/null and b/source/img/content/review-ivanov-tablet@1x.jpg differ diff --git a/source/img/content/review-ivanov-tablet@1x.webp b/source/img/content/review-ivanov-tablet@1x.webp new file mode 100644 index 00000000..da4a98c0 Binary files /dev/null and b/source/img/content/review-ivanov-tablet@1x.webp differ diff --git a/source/img/content/review-ivanov-tablet@2x.jpg b/source/img/content/review-ivanov-tablet@2x.jpg new file mode 100644 index 00000000..fa3c60c5 Binary files /dev/null and b/source/img/content/review-ivanov-tablet@2x.jpg differ diff --git a/source/img/content/review-ivanov-tablet@2x.webp b/source/img/content/review-ivanov-tablet@2x.webp new file mode 100644 index 00000000..e37e71d2 Binary files /dev/null and b/source/img/content/review-ivanov-tablet@2x.webp differ diff --git a/source/img/favicons/192.png b/source/img/favicons/192.png new file mode 100644 index 00000000..0ee718de Binary files /dev/null and b/source/img/favicons/192.png differ diff --git a/source/img/favicons/512.png b/source/img/favicons/512.png new file mode 100644 index 00000000..b9673795 Binary files /dev/null and b/source/img/favicons/512.png differ diff --git a/source/img/favicons/favicon.png b/source/img/favicons/favicon.png new file mode 100644 index 00000000..f1b96964 Binary files /dev/null and b/source/img/favicons/favicon.png differ diff --git a/source/img/favicons/favicon.svg b/source/img/favicons/favicon.svg new file mode 100644 index 00000000..1e81ea74 --- /dev/null +++ b/source/img/favicons/favicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/source/img/favicons/icon-180.png b/source/img/favicons/icon-180.png new file mode 100644 index 00000000..e914a440 Binary files /dev/null and b/source/img/favicons/icon-180.png differ diff --git a/source/img/news/career-large-wide@1x.jpg b/source/img/news/career-large-wide@1x.jpg new file mode 100644 index 00000000..ffc15dfd Binary files /dev/null and b/source/img/news/career-large-wide@1x.jpg differ diff --git a/source/img/news/career-large-wide@1x.webp b/source/img/news/career-large-wide@1x.webp new file mode 100644 index 00000000..d63ad26a Binary files /dev/null and b/source/img/news/career-large-wide@1x.webp differ diff --git a/source/img/news/career-large-wide@2x.jpg b/source/img/news/career-large-wide@2x.jpg new file mode 100644 index 00000000..2e699cd2 Binary files /dev/null and b/source/img/news/career-large-wide@2x.jpg differ diff --git a/source/img/news/career-large-wide@2x.webp b/source/img/news/career-large-wide@2x.webp new file mode 100644 index 00000000..6017e78c Binary files /dev/null and b/source/img/news/career-large-wide@2x.webp differ diff --git a/source/img/news/career-large@1x.jpg b/source/img/news/career-large@1x.jpg new file mode 100644 index 00000000..d362c4fb Binary files /dev/null and b/source/img/news/career-large@1x.jpg differ diff --git a/source/img/news/career-large@1x.webp b/source/img/news/career-large@1x.webp new file mode 100644 index 00000000..442b2430 Binary files /dev/null and b/source/img/news/career-large@1x.webp differ diff --git a/source/img/news/career-large@2x.jpg b/source/img/news/career-large@2x.jpg new file mode 100644 index 00000000..d41479e3 Binary files /dev/null and b/source/img/news/career-large@2x.jpg differ diff --git a/source/img/news/career-large@2x.webp b/source/img/news/career-large@2x.webp new file mode 100644 index 00000000..c23ffa45 Binary files /dev/null and b/source/img/news/career-large@2x.webp differ diff --git a/source/img/news/career-medium@1x.jpg b/source/img/news/career-medium@1x.jpg new file mode 100644 index 00000000..5ab2e31c Binary files /dev/null and b/source/img/news/career-medium@1x.jpg differ diff --git a/source/img/news/career-medium@1x.webp b/source/img/news/career-medium@1x.webp new file mode 100644 index 00000000..4635d6bf Binary files /dev/null and b/source/img/news/career-medium@1x.webp differ diff --git a/source/img/news/career-medium@2x.jpg b/source/img/news/career-medium@2x.jpg new file mode 100644 index 00000000..2dc5806b Binary files /dev/null and b/source/img/news/career-medium@2x.jpg differ diff --git a/source/img/news/career-medium@2x.webp b/source/img/news/career-medium@2x.webp new file mode 100644 index 00000000..ce875a86 Binary files /dev/null and b/source/img/news/career-medium@2x.webp differ diff --git a/source/img/news/career-small@1x.jpg b/source/img/news/career-small@1x.jpg new file mode 100644 index 00000000..36bd425b Binary files /dev/null and b/source/img/news/career-small@1x.jpg differ diff --git a/source/img/news/career-small@1x.webp b/source/img/news/career-small@1x.webp new file mode 100644 index 00000000..1b0ab299 Binary files /dev/null and b/source/img/news/career-small@1x.webp differ diff --git a/source/img/news/career-small@2x.jpg b/source/img/news/career-small@2x.jpg new file mode 100644 index 00000000..25ba7ddd Binary files /dev/null and b/source/img/news/career-small@2x.jpg differ diff --git a/source/img/news/career-small@2x.webp b/source/img/news/career-small@2x.webp new file mode 100644 index 00000000..6ebd7651 Binary files /dev/null and b/source/img/news/career-small@2x.webp differ diff --git a/source/img/news/interview-large-wide@1x.jpg b/source/img/news/interview-large-wide@1x.jpg new file mode 100644 index 00000000..8921bc22 Binary files /dev/null and b/source/img/news/interview-large-wide@1x.jpg differ diff --git a/source/img/news/interview-large-wide@1x.webp b/source/img/news/interview-large-wide@1x.webp new file mode 100644 index 00000000..ea0128ea Binary files /dev/null and b/source/img/news/interview-large-wide@1x.webp differ diff --git a/source/img/news/interview-large-wide@2x.jpg b/source/img/news/interview-large-wide@2x.jpg new file mode 100644 index 00000000..c4238117 Binary files /dev/null and b/source/img/news/interview-large-wide@2x.jpg differ diff --git a/source/img/news/interview-large-wide@2x.webp b/source/img/news/interview-large-wide@2x.webp new file mode 100644 index 00000000..8fcd11f2 Binary files /dev/null and b/source/img/news/interview-large-wide@2x.webp differ diff --git a/source/img/news/interview-large@1x.jpg b/source/img/news/interview-large@1x.jpg new file mode 100644 index 00000000..af645c42 Binary files /dev/null and b/source/img/news/interview-large@1x.jpg differ diff --git a/source/img/news/interview-large@1x.webp b/source/img/news/interview-large@1x.webp new file mode 100644 index 00000000..ee9c4732 Binary files /dev/null and b/source/img/news/interview-large@1x.webp differ diff --git a/source/img/news/interview-large@2x.jpg b/source/img/news/interview-large@2x.jpg new file mode 100644 index 00000000..424e1120 Binary files /dev/null and b/source/img/news/interview-large@2x.jpg differ diff --git a/source/img/news/interview-large@2x.webp b/source/img/news/interview-large@2x.webp new file mode 100644 index 00000000..71db53dc Binary files /dev/null and b/source/img/news/interview-large@2x.webp differ diff --git a/source/img/news/interview-medium@1x.jpg b/source/img/news/interview-medium@1x.jpg new file mode 100644 index 00000000..ef96cde2 Binary files /dev/null and b/source/img/news/interview-medium@1x.jpg differ diff --git a/source/img/news/interview-medium@1x.webp b/source/img/news/interview-medium@1x.webp new file mode 100644 index 00000000..c009442e Binary files /dev/null and b/source/img/news/interview-medium@1x.webp differ diff --git a/source/img/news/interview-medium@2x.jpg b/source/img/news/interview-medium@2x.jpg new file mode 100644 index 00000000..db044fa6 Binary files /dev/null and b/source/img/news/interview-medium@2x.jpg differ diff --git a/source/img/news/interview-medium@2x.webp b/source/img/news/interview-medium@2x.webp new file mode 100644 index 00000000..0699e957 Binary files /dev/null and b/source/img/news/interview-medium@2x.webp differ diff --git a/source/img/news/interview-small@1x.jpg b/source/img/news/interview-small@1x.jpg new file mode 100644 index 00000000..377da23e Binary files /dev/null and b/source/img/news/interview-small@1x.jpg differ diff --git a/source/img/news/interview-small@1x.webp b/source/img/news/interview-small@1x.webp new file mode 100644 index 00000000..76b73c8d Binary files /dev/null and b/source/img/news/interview-small@1x.webp differ diff --git a/source/img/news/interview-small@2x.jpg b/source/img/news/interview-small@2x.jpg new file mode 100644 index 00000000..07363309 Binary files /dev/null and b/source/img/news/interview-small@2x.jpg differ diff --git a/source/img/news/interview-small@2x.webp b/source/img/news/interview-small@2x.webp new file mode 100644 index 00000000..6c87da86 Binary files /dev/null and b/source/img/news/interview-small@2x.webp differ diff --git a/source/img/news/travel-large-wide@1x.jpg b/source/img/news/travel-large-wide@1x.jpg new file mode 100644 index 00000000..e93beadb Binary files /dev/null and b/source/img/news/travel-large-wide@1x.jpg differ diff --git a/source/img/news/travel-large-wide@1x.webp b/source/img/news/travel-large-wide@1x.webp new file mode 100644 index 00000000..58a32403 Binary files /dev/null and b/source/img/news/travel-large-wide@1x.webp differ diff --git a/source/img/news/travel-large-wide@2x.jpg b/source/img/news/travel-large-wide@2x.jpg new file mode 100644 index 00000000..86f4a1d5 Binary files /dev/null and b/source/img/news/travel-large-wide@2x.jpg differ diff --git a/source/img/news/travel-large-wide@2x.webp b/source/img/news/travel-large-wide@2x.webp new file mode 100644 index 00000000..f328c2a3 Binary files /dev/null and b/source/img/news/travel-large-wide@2x.webp differ diff --git a/source/img/news/travel-large@1x.jpg b/source/img/news/travel-large@1x.jpg new file mode 100644 index 00000000..9d6c0e70 Binary files /dev/null and b/source/img/news/travel-large@1x.jpg differ diff --git a/source/img/news/travel-large@1x.webp b/source/img/news/travel-large@1x.webp new file mode 100644 index 00000000..4e5b99b1 Binary files /dev/null and b/source/img/news/travel-large@1x.webp differ diff --git a/source/img/news/travel-large@2x.jpg b/source/img/news/travel-large@2x.jpg new file mode 100644 index 00000000..1f34002c Binary files /dev/null and b/source/img/news/travel-large@2x.jpg differ diff --git a/source/img/news/travel-large@2x.webp b/source/img/news/travel-large@2x.webp new file mode 100644 index 00000000..186d09f4 Binary files /dev/null and b/source/img/news/travel-large@2x.webp differ diff --git a/source/img/news/travel-medium@1x.jpg b/source/img/news/travel-medium@1x.jpg new file mode 100644 index 00000000..61c7420b Binary files /dev/null and b/source/img/news/travel-medium@1x.jpg differ diff --git a/source/img/news/travel-medium@1x.webp b/source/img/news/travel-medium@1x.webp new file mode 100644 index 00000000..5d110d1c Binary files /dev/null and b/source/img/news/travel-medium@1x.webp differ diff --git a/source/img/news/travel-medium@2x.jpg b/source/img/news/travel-medium@2x.jpg new file mode 100644 index 00000000..e11ced89 Binary files /dev/null and b/source/img/news/travel-medium@2x.jpg differ diff --git a/source/img/news/travel-medium@2x.webp b/source/img/news/travel-medium@2x.webp new file mode 100644 index 00000000..5b546d14 Binary files /dev/null and b/source/img/news/travel-medium@2x.webp differ diff --git a/source/img/news/travel-small@1x.jpg b/source/img/news/travel-small@1x.jpg new file mode 100644 index 00000000..21687dff Binary files /dev/null and b/source/img/news/travel-small@1x.jpg differ diff --git a/source/img/news/travel-small@1x.webp b/source/img/news/travel-small@1x.webp new file mode 100644 index 00000000..338027df Binary files /dev/null and b/source/img/news/travel-small@1x.webp differ diff --git a/source/img/news/travel-small@2x.jpg b/source/img/news/travel-small@2x.jpg new file mode 100644 index 00000000..6649e742 Binary files /dev/null and b/source/img/news/travel-small@2x.jpg differ diff --git a/source/img/news/travel-small@2x.webp b/source/img/news/travel-small@2x.webp new file mode 100644 index 00000000..1d22f9d5 Binary files /dev/null and b/source/img/news/travel-small@2x.webp differ diff --git a/source/img/news/volunteering-large-wide@1x.jpg b/source/img/news/volunteering-large-wide@1x.jpg new file mode 100644 index 00000000..b1d1d82e Binary files /dev/null and b/source/img/news/volunteering-large-wide@1x.jpg differ diff --git a/source/img/news/volunteering-large-wide@1x.webp b/source/img/news/volunteering-large-wide@1x.webp new file mode 100644 index 00000000..deaac9f0 Binary files /dev/null and b/source/img/news/volunteering-large-wide@1x.webp differ diff --git a/source/img/news/volunteering-large-wide@2x.jpg b/source/img/news/volunteering-large-wide@2x.jpg new file mode 100644 index 00000000..7566fbe8 Binary files /dev/null and b/source/img/news/volunteering-large-wide@2x.jpg differ diff --git a/source/img/news/volunteering-large-wide@2x.webp b/source/img/news/volunteering-large-wide@2x.webp new file mode 100644 index 00000000..67d8090b Binary files /dev/null and b/source/img/news/volunteering-large-wide@2x.webp differ diff --git a/source/img/news/volunteering-large@1x.jpg b/source/img/news/volunteering-large@1x.jpg new file mode 100644 index 00000000..f9cb2c60 Binary files /dev/null and b/source/img/news/volunteering-large@1x.jpg differ diff --git a/source/img/news/volunteering-large@1x.webp b/source/img/news/volunteering-large@1x.webp new file mode 100644 index 00000000..9c1f2dba Binary files /dev/null and b/source/img/news/volunteering-large@1x.webp differ diff --git a/source/img/news/volunteering-large@2x.jpg b/source/img/news/volunteering-large@2x.jpg new file mode 100644 index 00000000..ba3b1129 Binary files /dev/null and b/source/img/news/volunteering-large@2x.jpg differ diff --git a/source/img/news/volunteering-large@2x.webp b/source/img/news/volunteering-large@2x.webp new file mode 100644 index 00000000..78fd3739 Binary files /dev/null and b/source/img/news/volunteering-large@2x.webp differ diff --git a/source/img/news/volunteering-medium@1x.jpg b/source/img/news/volunteering-medium@1x.jpg new file mode 100644 index 00000000..116a0a47 Binary files /dev/null and b/source/img/news/volunteering-medium@1x.jpg differ diff --git a/source/img/news/volunteering-medium@1x.webp b/source/img/news/volunteering-medium@1x.webp new file mode 100644 index 00000000..cdb4e86b Binary files /dev/null and b/source/img/news/volunteering-medium@1x.webp differ diff --git a/source/img/news/volunteering-medium@2x.jpg b/source/img/news/volunteering-medium@2x.jpg new file mode 100644 index 00000000..d7571c51 Binary files /dev/null and b/source/img/news/volunteering-medium@2x.jpg differ diff --git a/source/img/news/volunteering-medium@2x.webp b/source/img/news/volunteering-medium@2x.webp new file mode 100644 index 00000000..999c8390 Binary files /dev/null and b/source/img/news/volunteering-medium@2x.webp differ diff --git a/source/img/news/volunteering-small@1x.jpg b/source/img/news/volunteering-small@1x.jpg new file mode 100644 index 00000000..3d616e98 Binary files /dev/null and b/source/img/news/volunteering-small@1x.jpg differ diff --git a/source/img/news/volunteering-small@1x.webp b/source/img/news/volunteering-small@1x.webp new file mode 100644 index 00000000..76100152 Binary files /dev/null and b/source/img/news/volunteering-small@1x.webp differ diff --git a/source/img/news/volunteering-small@2x.jpg b/source/img/news/volunteering-small@2x.jpg new file mode 100644 index 00000000..d1e194a3 Binary files /dev/null and b/source/img/news/volunteering-small@2x.jpg differ diff --git a/source/img/news/volunteering-small@2x.webp b/source/img/news/volunteering-small@2x.webp new file mode 100644 index 00000000..c3525675 Binary files /dev/null and b/source/img/news/volunteering-small@2x.webp differ diff --git a/source/img/sprite/angle.svg b/source/img/sprite/angle.svg new file mode 100644 index 00000000..52a3c345 --- /dev/null +++ b/source/img/sprite/angle.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/arrow-down-dark.svg b/source/img/sprite/arrow-down-dark.svg new file mode 100644 index 00000000..e972977d --- /dev/null +++ b/source/img/sprite/arrow-down-dark.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/arrow-down.svg b/source/img/sprite/arrow-down.svg new file mode 100644 index 00000000..fc88272a --- /dev/null +++ b/source/img/sprite/arrow-down.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/arrow-right-slider.svg b/source/img/sprite/arrow-right-slider.svg new file mode 100644 index 00000000..3bb51921 --- /dev/null +++ b/source/img/sprite/arrow-right-slider.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/arrow-right.svg b/source/img/sprite/arrow-right.svg new file mode 100644 index 00000000..ee94adce --- /dev/null +++ b/source/img/sprite/arrow-right.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/arrow-up-dark.svg b/source/img/sprite/arrow-up-dark.svg new file mode 100644 index 00000000..09085527 --- /dev/null +++ b/source/img/sprite/arrow-up-dark.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/arrow-up.svg b/source/img/sprite/arrow-up.svg new file mode 100644 index 00000000..1d50a72b --- /dev/null +++ b/source/img/sprite/arrow-up.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/burger.svg b/source/img/sprite/burger.svg new file mode 100644 index 00000000..fcf9c8c6 --- /dev/null +++ b/source/img/sprite/burger.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/source/img/sprite/check.svg b/source/img/sprite/check.svg new file mode 100644 index 00000000..1282632e --- /dev/null +++ b/source/img/sprite/check.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/cross.svg b/source/img/sprite/cross.svg new file mode 100644 index 00000000..56506b75 --- /dev/null +++ b/source/img/sprite/cross.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/logo.svg b/source/img/sprite/logo.svg index aee2e13c..efe6f79b 100644 --- a/source/img/sprite/logo.svg +++ b/source/img/sprite/logo.svg @@ -1,15 +1 @@ - - - - - - - - - - - - - - - + diff --git a/source/img/sprite/social-ok.svg b/source/img/sprite/social-ok.svg new file mode 100644 index 00000000..9e0954e2 --- /dev/null +++ b/source/img/sprite/social-ok.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/social-reddit.svg b/source/img/sprite/social-reddit.svg new file mode 100644 index 00000000..07c32caf --- /dev/null +++ b/source/img/sprite/social-reddit.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/social-vk.svg b/source/img/sprite/social-vk.svg new file mode 100644 index 00000000..7dfca1f9 --- /dev/null +++ b/source/img/sprite/social-vk.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/star.svg b/source/img/sprite/star.svg new file mode 100644 index 00000000..b0461d0c --- /dev/null +++ b/source/img/sprite/star.svg @@ -0,0 +1 @@ + diff --git a/source/index.html b/source/index.html index 72717790..c161973a 100644 --- a/source/index.html +++ b/source/index.html @@ -1,31 +1,594 @@ - - - - Internship - - + + + + - - - Это спрайт - - - - -
hero
-
about
-
programs
-
grant
-
news
-
FAQ
-
reviews
-
contacts
-
form
-
footer
- - + Internship | Программы стажировок + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
+

Проект «Стажировка».

+
+

Что даст вам участие в этом проекте?

+ +
+
+
+
+

О проекте «Стажировка»

+ «Стажировка» — совместный проект правительств и волонтёрских бригад. +
+
+

Наша цель

+

Наша деятельность направлена на повышение квалификации молодых специалистов на ранних и средних стадиях карьеры, предоставляя им инструменты для решения сложных проблем, с которыми сталкиваются в мире. Цель центра — наделить этих людей способностью инициировать значимые изменения.

+ + Подробнее о проекте +
+
    +
  • + Более 250 программ +

    учебных и рабочих, разной длительностью от 3 месяцев до 1 года

    +
  • +
  • + Более 3000 участников +

    уже успешно прошли программу от «Стажировка» и остались в разных странах

    +
  • +
  • + участники из 60 стран +

    студенты со всего мира приезжают на программу «Стажировки» от 3 месяцев до 1 года

    +
  • +
  • + от 4 200 $
    до 8 400 $
    +

    грант всем участникам для комфортного прохождения программы

    +
  • +
+
+
+
+
+

Программы

+ Все программы +
+
+
+ + +
+ +
+
+
+
+
+
+
+
+

Как поехать

+

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

+
+ + + + + + + Указатели на разные страны мира. + +
+
+
+

Чтобы получить грант на обучение, вам нужно:

+
    +
  • Быть в возрасте от 16 до 30 лет
  • +
  • Иметь оконченное среднее образование
  • +
  • Иметь документально подтверждённое отсутствие судимости и пройти консульскую проверку
  • +
  • За последние 2 года быть не больше 3х месяцев подряд непрерывно в одной стране
  • +
+
+
+
+
+
+

Новости и материалы

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

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

    +
      +
    • + +
      +

      Организатором программы является проект «Стажировка» в сотрудничестве с образовательными учреждениями. Сроки программы обмена могут варьироваться от одного семестра до года.

      +
      +
    • +
    • + +
      +

      Грант на обучение — это финансовая поддержка, которую предоставляет организатор программы обмена студентами для оплаты учебных расходов

      +
      +
    • +
    • + +
      +

      Полная стоимость определяется организаторами в зависимости от направления. В большинстве случаев грант «Стажировка» не покрывает полную стоимость программы, и поэтому предусматривается определённая доля личного участия.

      +
      +
    • +
    • + +
      +

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

      +
      +
    • +
    • + +
      +

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

      +
      +
    • +
    +
    +
    +
    +
    +

    Отзывы

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

      Лола
      Алекс

      +
      +
      +
      +
      Программа
      +
      Masa Art Challenge
      +
      +
      +
      Дата
      +
      Осень 2022
      +
      +
      + Я могу с уверенностью сказать, что это был один из самых незабываемых опытов в жизни! +

      Я рекомендую программу «Стажировка» всем студентам, желающим получить незабываемые впечатления. Сочетание путешествий, общения и значимой работы действительно отличает её от других программ, и я чувствую огромную благодарность за предоставленную мне возможность.

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

      Давид
      Иванов

      +
      +
      +
      +
      Программа
      +
      Volunteer Chance
      +
      +
      +
      Дата
      +
      Лето 2022
      +
      +
      + Благодаря опыту стажировки я узнал так много нового о себе и об окружающем мире. +

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

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

      Лола
      Алекс-2

      +
      +
      +
      +
      Программа
      +
      Masa Art Challenge
      +
      +
      +
      Дата
      +
      Весна 2022
      +
      +
      + Я могу с уверенностью сказать, что это был один из самых незабываемых опытов в жизни! +

      Всё прекрасно!

      +
      +
    • +
    +
    +
    +
    +
    +
    +

    Контакты

    +
    +
      +
    • +

      Центральный офис

      +

      г. Новосибирск, ул. Щетинкина 68, культурный центр

      +
    • +
    • +

      Телефон

      + +7 963 876 876 76 +
    • +
    • +

      Email

      + Info@stazh.ru +
    • +
    +
    +
    + + + + + + + Наш адрес на карте: г. Новосибирск, ул. Щетинкина 68, культурный центр. + +
    +
    +
    +
    + +
    +
    + + + + + diff --git a/source/js/main.js b/source/js/main.js index 70fde252..addfa9e4 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,4 +1,23 @@ -// https://swiperjs.com/get-started#installation -// import Swiper from "swiper"; -// import {Navigation, Pagination} from "swiper/modules"; -// import 'swiper/css'; + +import './modules/hero-slider.js'; +import { checkWebPSupport } from './utils/checkwebp.js'; +import { initHeader } from './modules/header.js'; +import { createModal } from './modules/modal.js'; +import { initProgramsSlider } from './modules/programs.js'; +import { initNews } from './modules/news/control.js'; +import { newsData } from './news-data.js'; +import { initFaq } from './modules/faq.js'; +import { initReviewsSlider } from './modules/reviews.js'; +import { initForm } from './modules/form.js'; + +const modalFeedback = document.querySelector('.modal--feedback'); +const feedbackOpenButton = document.querySelector('.about__button'); + +checkWebPSupport(); +initHeader(); +createModal(modalFeedback, feedbackOpenButton); +initProgramsSlider(); +initNews(newsData); +initFaq(); +initReviewsSlider(); +initForm(); diff --git a/source/js/modules/faq.js b/source/js/modules/faq.js new file mode 100644 index 00000000..4e5162f8 --- /dev/null +++ b/source/js/modules/faq.js @@ -0,0 +1,11 @@ +import { createAccordions } from '../utils/accordions.js'; + +const CURRENT_TAB = 2; +const buttons = document.querySelectorAll('.faq__question'); + +const initFaq = () => { + createAccordions(buttons); + buttons[CURRENT_TAB].click(); +}; + +export {initFaq}; diff --git a/source/js/modules/form.js b/source/js/modules/form.js new file mode 100644 index 00000000..0d942466 --- /dev/null +++ b/source/js/modules/form.js @@ -0,0 +1,13 @@ +import { initPhoneMask } from '../utils/phone-mask.js'; +import { initValidation } from './validation.js'; + +const feedbackForm = document.forms['feedback']; +const feedbackModalForm = document.forms['feedback-modal']; + +const initForm = () => { + initPhoneMask(); + initValidation(feedbackForm); + initValidation(feedbackModalForm); +}; + +export { initForm }; diff --git a/source/js/modules/header.js b/source/js/modules/header.js new file mode 100644 index 00000000..42c04061 --- /dev/null +++ b/source/js/modules/header.js @@ -0,0 +1,57 @@ +import { createAccordions } from '../utils/accordions.js'; + +const header = document.querySelector('.header'); +const openButton = header.querySelector('.header__menu-button'); +const list = header.querySelector('.header__menu-list'); +const accordionButtons = header.querySelectorAll('.header__list-button'); +const focusableUpperListElements = list.querySelectorAll('.header__focusable-item-js'); +const focusableAllListElements = list.querySelectorAll('a, button'); +const menuLinks = list.querySelectorAll('.header__link'); + +const LIST_PADDING = 70; +const SUBLIST_PADDING = 100; + +const onHeaderClick = (event) => { + if(!event.target.closest('.header__menu')) { + openButton.click(); + } +}; + +const onButtonClick = () => { + list.style.maxHeight = `${list.scrollHeight + LIST_PADDING + SUBLIST_PADDING}px`; +}; + +const initHeader = () => { + openButton.addEventListener('click', () => { + const isOpen = header.classList.contains('is-open'); + if (isOpen) { + list.style.maxHeight = 0; + header.classList.remove('is-open'); + openButton.classList.remove('button--blue-background'); + header.removeEventListener('click', onHeaderClick); + accordionButtons.forEach((button)=> { + button.removeEventListener('click', onButtonClick); + }); + focusableAllListElements.forEach((element) => element.setAttribute('tabindex', '-1')); + } else { + focusableUpperListElements.forEach((element) => element.setAttribute('tabindex', '0')); + list.style.maxHeight = `${list.scrollHeight + LIST_PADDING}px`; + header.classList.add('is-open'); + openButton.classList.add('button--blue-background'); + header.addEventListener('click', onHeaderClick); + accordionButtons.forEach((button)=> { + button.addEventListener('click', onButtonClick); + }); + } + }); + + menuLinks.forEach((link) => { + link.addEventListener('click', () => { + openButton.click(); + }); + }); + + createAccordions(accordionButtons); +}; + +export { initHeader } ; diff --git a/source/js/modules/hero-slider.js b/source/js/modules/hero-slider.js new file mode 100644 index 00000000..e7f92927 --- /dev/null +++ b/source/js/modules/hero-slider.js @@ -0,0 +1,53 @@ +import Swiper from 'swiper'; +import {Pagination} from 'swiper/modules'; +import 'swiper/css'; + +const innerButtons = document.querySelectorAll('.hero__link'); + +const heroSlider = new Swiper('.hero', { + modules: [Pagination], + pagination: { + el: '.swiper-slide-active .hero__pagination', + clickable: true, + bulletElement: 'button type="button" aria-label="Кнопка переключения слайдов."', + }, + watchOverflow: true, + spaceBetween: 40, + speed: 300, + loop: true, + lazy: true, + lazyPreloadPrevNext: 3, + autoHeight: true, + + breakpoints: { + 320: { + allowTouchMove: true, + }, + 768: { + allowTouchMove: true, + }, + 1440: { + allowTouchMove: false, + } + }, + + on: { + realIndexChange: () => { + innerButtons.forEach((button) => { + button.setAttribute('tabindex', '-1'); + }); + innerButtons[heroSlider.realIndex].setAttribute('tabindex', '0'); + }, + + slideChangeTransitionStart: (swiper) => { + swiper.pagination.init(); + swiper.pagination.render(); + swiper.pagination.update(); + + innerButtons.forEach((button) => { + button.setAttribute('tabindex', '-1'); + }); + innerButtons[heroSlider.realIndex].setAttribute('tabindex', '0'); + }, + }, +}); diff --git a/source/js/modules/modal.js b/source/js/modules/modal.js new file mode 100644 index 00000000..656287a0 --- /dev/null +++ b/source/js/modules/modal.js @@ -0,0 +1,62 @@ +let onDocumentKeydown; +let onDocumentFocus; + +const openModal = (modal, closeButton) => { + const firstTabElement = modal.querySelector('.modal__first-tab-element-js'); + + onDocumentKeydown = (event) => { + if (event.key.startsWith('Esc')) { + closeButton.click(); + } + }; + onDocumentFocus = (event) => { + if (!modal.contains(event.target)) { + closeButton.click(); + } + }; + + modal.scroll(0, 0); + modal.classList.add('is-open'); + document.body.classList.add('page__modal-open'); + document.addEventListener('keydown', onDocumentKeydown); + document.addEventListener('focus', onDocumentFocus, true); + + setTimeout(() => { + firstTabElement.focus(); + }, '500'); +}; + +const closeModal = (modal, openButton) => { + modal.classList.remove('is-open'); + document.body.classList.remove('page__modal-open'); + document.removeEventListener('keydown', onDocumentKeydown); + document.removeEventListener('focus', onDocumentFocus, true); + openButton.focus(); +}; + +const createModal = (modal, openButton) => { + const closeButton = modal.querySelector('.modal__close-button'); + + const onCloseButtonClick = () => { + closeModal(modal, openButton); + }; + const onOpenButtonClick = () => { + openModal(modal, closeButton); + }; + const onModalClick = (event) => { + if (!event.target.closest('.modal__content')) { + closeModal(modal, openButton); + } + }; + + const onModalSubmit = () => { + closeButton.click(); + }; + + openButton.addEventListener('click', onOpenButtonClick); + closeButton.addEventListener('click', onCloseButtonClick); + modal.addEventListener('click', onModalClick); + modal.addEventListener('submit', onModalSubmit); +}; + +export { createModal }; diff --git a/source/js/modules/news/control.js b/source/js/modules/news/control.js new file mode 100644 index 00000000..a81c0e94 --- /dev/null +++ b/source/js/modules/news/control.js @@ -0,0 +1,33 @@ +import { renderTabs, renderSlides, updateSlider } from './view.js'; +import { news } from './model.js'; + +const tabButtons = document.querySelectorAll('.news__tab'); + +const initNews = (data) => { + const onButtonClick = (event) => { + news.currentTab = event.target.dataset.topic; + renderTabs(news.currentTab); + let currentData; + if (news.currentTab === 'all') { + currentData = data; + } else { + currentData = data.filter((slide) => slide.topic === news.currentTab); + } + + renderSlides(currentData); + }; + + tabButtons.forEach((button) => { + button.addEventListener('click', onButtonClick); + }); + + tabButtons[0].click(); + + + const breakpointMobile = window.matchMedia('(max-width: 767px)'); + const breakpointTablet = window.matchMedia('(max-width: 1439px)'); + breakpointMobile.addEventListener('change', () => updateSlider()); + breakpointTablet.addEventListener('change', () => updateSlider()); +}; + +export { initNews }; diff --git a/source/js/modules/news/model.js b/source/js/modules/news/model.js new file mode 100644 index 00000000..0a91e60a --- /dev/null +++ b/source/js/modules/news/model.js @@ -0,0 +1,5 @@ +const news = { + currentTab: 'all', +}; + +export { news }; diff --git a/source/js/modules/news/view.js b/source/js/modules/news/view.js new file mode 100644 index 00000000..2cffcf2f --- /dev/null +++ b/source/js/modules/news/view.js @@ -0,0 +1,147 @@ +import Swiper from 'swiper'; +import { Navigation, Pagination, Grid, A11y } from 'swiper/modules'; +import 'swiper/css'; +import 'swiper/css/grid'; +import 'swiper/css/a11y'; + +const tabButtons = document.querySelectorAll('.news__tab'); +const template = document.querySelector('#news-slide-template'); +const container = document.querySelector('.news__slider-list'); + +const renderTabs = (currentTab) => { + tabButtons.forEach((button) => { + const isCurrent = (currentTab === button.dataset.topic); + button.classList.toggle('is-current', isCurrent); + if (isCurrent) { + button.setAttribute('tabindex', '-1'); + } else { + button.setAttribute('tabindex', '0'); + } + }); +}; + +const createSlides = (data) => data.map((properties) => { + const { topic, date, title, text } = properties; + const slide = template.content.querySelector('.news__slide').cloneNode(true); + slide.classList.add(`news__slide--${topic}`); + slide.querySelector('.news__slide-title').textContent = title; + slide.querySelector('.news__slide-wrapper p').textContent = text; + slide.querySelector('.news__date').textContent = `${date.day}/${date.month}/${date.year}`; + slide.querySelector('.news__date').setAttribute('datetime', `${date.year}-${date.month}-${date.day}`); + return slide; +}); + +let newsSlider; + +const initNewsSlider = () => { + newsSlider = new Swiper('.news__slider', { + modules: [Navigation, Pagination, Grid, A11y], + + navigation: { + nextEl: '.news__slider-buttons .swiper-button-next', + prevEl: '.news__slider-buttons .swiper-button-prev', + }, + + pagination: { + el: '.news__pagination', + clickable: true, + renderBullet: function (index, className) { + const isNecessary = (index < 4); + return ``; + }, + }, + + a11y: { + scrollOnFocus: true, + slideLabelMessage: 'Слайд {{index}} из {{slidesLength}} слайдов', + slideRole: 'listitem', + }, + + speed: 300, + lazy: true, + lazyPreloadPrevNext: 1, + + breakpoints: { + 320: { + allowTouchMove: true, + slidesPerView: 1, + slidesPerGroup: 1, + spaceBetween: 20, + grid: { + rows: 2, + fill: 'column', + }, + }, + 768: { + allowTouchMove: true, + slidesPerView: 2, + slidesPerGroup: 2, + spaceBetween: 30, + grid: { + rows: 2, + fill: 'row', + }, + }, + 1440: { + slidesPerView: 'auto', + slidesPerGroup: 3, + allowTouchMove: false, + spaceBetween: 32, + grid: { + rows: 1, + fill: 'column', + }, + } + }, + + on: { + afterInit: (swiper) => { + const paginationBullets = swiper.pagination.bullets; + paginationBullets.forEach((paginationBullet, activeIndex) => { + paginationBullet.addEventListener('click', () => { + + paginationBullets.forEach((bullet, currentIndex) => { + let isNecessary = false; + if (activeIndex <= (currentIndex + 2)) { + isNecessary = true; + } + if (currentIndex > activeIndex + 1) { + isNecessary = false; + } + if (activeIndex <= 2 && currentIndex <= 3) { + isNecessary = true; + } + if (activeIndex === (paginationBullets.length - 1) && currentIndex === (paginationBullets.length - 4)) { + isNecessary = true; + } + + bullet.style.display = isNecessary ? 'inline-flex' : 'none'; + }); + }); + }); + }, + + realIndexChange: (swiper) => { + swiper.pagination.bullets.forEach((bullet) => { + if (bullet.classList.contains('swiper-pagination-bullet-active')) { + bullet.click(); + } + }); + } + }, + }); +}; + +const renderSlides = (data) => { + container.innerHTML = ''; + container.append(...createSlides(data)); + initNewsSlider(); + newsSlider.update(); +}; + +const updateSlider = () => { + newsSlider.destroy(false, true); + initNewsSlider(); +}; + +export { renderTabs, renderSlides, updateSlider }; diff --git a/source/js/modules/programs.js b/source/js/modules/programs.js new file mode 100644 index 00000000..48cdaa7c --- /dev/null +++ b/source/js/modules/programs.js @@ -0,0 +1,55 @@ +import Swiper from 'swiper'; +import {Navigation, Scrollbar} from 'swiper/modules'; +import 'swiper/css'; +import 'swiper/css/scrollbar'; + +const innerButtons = document.querySelectorAll('.programs__slide-link'); + +const initProgramsSlider = () => { + const programsSlider = new Swiper('.programs__slider', { + modules: [Navigation, Scrollbar], + scrollbar: { + el: '.swiper-scrollbar', + dragSize: 326, + draggable: true, + }, + navigation: { + nextEl: '.programs__slider-buttons .swiper-button-next', + prevEl: '.programs__slider-buttons .swiper-button-prev', + }, + watchOverflow: true, + spaceBetween: 30, + lazy: true, + lazyPreloadPrevNext: 1, + + breakpoints: { + 320: { + allowTouchMove: true, + slidesPerView: 1, + }, + 768: { + allowTouchMove: true, + slidesPerView: 2.127, + }, + 1440: { + slidesPerView: 3, + spaceBetween: 32, + allowTouchMove: false, + scrollbar: { + dragSize: 394, + }, + } + }, + + on: { + realIndexChange: () => { + innerButtons.forEach((button) => { + button.setAttribute('tabindex', '-1'); + }); + innerButtons[programsSlider.realIndex].setAttribute('tabindex', '0'); + }, + }, + }); +}; + +export { initProgramsSlider }; diff --git a/source/js/modules/reviews.js b/source/js/modules/reviews.js new file mode 100644 index 00000000..421f6a4c --- /dev/null +++ b/source/js/modules/reviews.js @@ -0,0 +1,44 @@ +import Swiper from 'swiper'; +import {Navigation, Scrollbar} from 'swiper/modules'; +import 'swiper/css'; +import 'swiper/css/scrollbar'; + +const initReviewsSlider = () => { + new Swiper('.reviews__container', { + modules: [Navigation, Scrollbar], + scrollbar: { + el: '.swiper-scrollbar', + dragSize: 326, + draggable: true, + }, + navigation: { + nextEl: '.reviews__slider-buttons .swiper-button-next', + prevEl: '.reviews__slider-buttons .swiper-button-prev', + }, + watchOverflow: true, + spaceBetween: 30, + lazy: true, + lazyPreloadPrevNext: 1, + + breakpoints: { + 320: { + allowTouchMove: true, + slidesPerView: 1, + }, + 768: { + allowTouchMove: true, + slidesPerView: 1.2, + }, + 1440: { + slidesPerView: 2, + spaceBetween: 32, + allowTouchMove: false, + scrollbar: { + dragSize: 394, + }, + } + }, + }); +}; + +export { initReviewsSlider }; diff --git a/source/js/modules/validation.js b/source/js/modules/validation.js new file mode 100644 index 00000000..8a4f4e61 --- /dev/null +++ b/source/js/modules/validation.js @@ -0,0 +1,22 @@ +const addErrorCheckClass = (fields) => { + if (fields) { + fields.forEach((field) => { + field.classList.add('check-error'); + }); + } +}; + +const initValidation = (form) => { + const inputs = form.querySelectorAll('input'); + const selectFields = form.querySelectorAll('select'); + const textareaFields = form.querySelectorAll('textarea'); + const submitButton = form.querySelector('button[type="submit"]'); + + submitButton.addEventListener('click', () => { + addErrorCheckClass(inputs); + addErrorCheckClass(selectFields); + addErrorCheckClass(textareaFields); + }); +}; + +export { initValidation }; diff --git a/source/js/news-data.js b/source/js/news-data.js new file mode 100644 index 00000000..665d0d61 --- /dev/null +++ b/source/js/news-data.js @@ -0,0 +1,269 @@ +const newsData = [ + { + id: 1, + topic: 'internships', + date: { + year: '2023', + month: '03', + day: '23', + }, + title: 'Интервью с участницей программы стажировки', + text: 'Саша рассказывает, как попала в программу и как прошла 6-месячная стажировка в ISOFound', + }, + { + id: 2, + topic: 'trips', + date: { + year: '2023', + month: '03', + day: '20', + }, + title: 'Путешествуем по миру', + text: 'Какие места посещают наши студенты весной', + }, + { + id: 3, + topic: 'volunteering', + date: { + year: '2023', + month: '03', + day: '17', + }, + title: 'Новая программа волонтёрства', + text: 'Программа помощи детям длительностью 4 месяца', + }, + { + id: 4, + topic: 'career', + date: { + year: '2023', + month: '03', + day: '10', + }, + title: 'Построй свою карьеру', + text: 'Ведущие компании готовы трудоустроить выпускников стажировки', + }, + { + id: 5, + topic: 'internships', + date: { + year: '2023', + month: '03', + day: '09', + }, + title: 'Статья про стажировку №2', + text: 'Саша рассказывает, как попала в программу и как прошла 6-месячная стажировка в ISOFound', + }, + { + id: 6, + topic: 'trips', + date: { + year: '2023', + month: '03', + day: '08', + }, + title: 'Статья про путешествия №2', + text: 'Какие места посещают наши студенты весной', + }, + { + id: 7, + topic: 'volunteering', + date: { + year: '2023', + month: '03', + day: '07', + }, + title: 'Статья про волонтерство №2', + text: 'Программа помощи детям длительностью 4 месяца', + }, + { + id: 8, + topic: 'career', + date: { + year: '2023', + month: '03', + day: '06', + }, + title: 'Статья про карьеру №2', + text: 'Ведущие компании готовы трудоустроить выпускников стажировки', + }, + { + id: 9, + topic: 'internships', + date: { + year: '2023', + month: '03', + day: '05', + }, + title: 'Статья про стажировку №3', + text: 'Саша рассказывает, как попала в программу и как прошла 6-месячная стажировка в ISOFound', + }, + { + id: 10, + topic: 'trips', + date: { + year: '2023', + month: '03', + day: '04', + }, + title: 'Статья про путешествия №3', + text: 'Какие места посещают наши студенты весной', + }, + { + id: 11, + topic: 'volunteering', + date: { + year: '2023', + month: '03', + day: '03', + }, + title: 'Статья про волонтерство №3', + text: 'Программа помощи детям длительностью 4 месяца', + }, + { + id: 12, + topic: 'career', + date: { + year: '2023', + month: '03', + day: '02', + }, + title: 'Статья про карьеру №3', + text: 'Ведущие компании готовы трудоустроить выпускников стажировки', + }, + { + id: 13, + topic: 'internships', + date: { + year: '2023', + month: '03', + day: '01', + }, + title: 'Статья про стажировку №4', + text: 'Саша рассказывает, как попала в программу и как прошла 6-месячная стажировка в ISOFound', + }, + { + id: 14, + topic: 'trips', + date: { + year: '2023', + month: '02', + day: '28', + }, + title: 'Статья про путешествия №4', + text: 'Какие места посещают наши студенты весной', + }, + { + id: 15, + topic: 'volunteering', + date: { + year: '2023', + month: '02', + day: '27', + }, + title: 'Статья про волонтерство №4', + text: 'Программа помощи детям длительностью 4 месяца', + }, + { + id: 16, + topic: 'career', + date: { + year: '2023', + month: '02', + day: '26', + }, + title: 'Статья про карьеру №4', + text: 'Ведущие компании готовы трудоустроить выпускников стажировки', + }, + { + id: 17, + topic: 'internships', + date: { + year: '2023', + month: '03', + day: '01', + }, + title: 'Статья про стажировку №5', + text: 'Саша рассказывает, как попала в программу и как прошла 6-месячная стажировка в ISOFound', + }, + { + id: 18, + topic: 'trips', + date: { + year: '2023', + month: '02', + day: '28', + }, + title: 'Статья про путешествия №5', + text: 'Какие места посещают наши студенты весной', + }, + { + id: 19, + topic: 'volunteering', + date: { + year: '2023', + month: '02', + day: '27', + }, + title: 'Статья про волонтерство №5', + text: 'Программа помощи детям длительностью 4 месяца', + }, + { + id: 20, + topic: 'career', + date: { + year: '2023', + month: '02', + day: '26', + }, + title: 'Статья про карьеру №5', + text: 'Ведущие компании готовы трудоустроить выпускников стажировки', + }, + { + id: 21, + topic: 'internships', + date: { + year: '2023', + month: '03', + day: '01', + }, + title: 'Статья про стажировку №6', + text: 'Саша рассказывает, как попала в программу и как прошла 6-месячная стажировка в ISOFound', + }, + { + id: 22, + topic: 'trips', + date: { + year: '2023', + month: '02', + day: '28', + }, + title: 'Статья про путешествия №6', + text: 'Какие места посещают наши студенты весной', + }, + { + id: 23, + topic: 'volunteering', + date: { + year: '2023', + month: '02', + day: '27', + }, + title: 'Статья про волонтерство №6', + text: 'Программа помощи детям длительностью 4 месяца', + }, + { + id: 24, + topic: 'career', + date: { + year: '2023', + month: '02', + day: '26', + }, + title: 'Статья про карьеру №6', + text: 'Ведущие компании готовы трудоустроить выпускников стажировки', + }, + +]; + +export { newsData }; diff --git a/source/js/utils/accordions.js b/source/js/utils/accordions.js new file mode 100644 index 00000000..bdca549b --- /dev/null +++ b/source/js/utils/accordions.js @@ -0,0 +1,17 @@ +const createAccordions = (buttons) => { + buttons.forEach((button) => { + button.addEventListener('click', () => { + button.classList.toggle('is-active'); + + const clickedDescription = button.nextElementSibling; + const isActive = button.classList.contains('is-active'); + clickedDescription.style.maxHeight = isActive ? `${clickedDescription.scrollHeight}px` : 0; + + const focusableElements = clickedDescription.querySelectorAll('button, a'); + const tabIndex = isActive ? 0 : -1; + focusableElements.forEach((element) => element.setAttribute('tabindex', tabIndex)); + }); + }); +}; + +export { createAccordions }; diff --git a/source/js/utils/checkwebp.js b/source/js/utils/checkwebp.js new file mode 100644 index 00000000..490c300e --- /dev/null +++ b/source/js/utils/checkwebp.js @@ -0,0 +1,20 @@ +const checkWebPSupport = (cb) => { + const image = new Image(); + image.onload = () => { + if (typeof cb === 'function') { + cb(image.width > 0 && image.height > 0); + } + }; + image.onerror = () => { + if (typeof cb === 'function') { + cb(false); + } + }; + image.src = 'data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA=='; +}; + +checkWebPSupport((isSupported) => { + document.documentElement.classList.add(isSupported ? 'webp' : 'no-webp'); +}); + +export { checkWebPSupport }; diff --git a/source/js/utils/phone-mask.js b/source/js/utils/phone-mask.js new file mode 100644 index 00000000..80af1215 --- /dev/null +++ b/source/js/utils/phone-mask.js @@ -0,0 +1,72 @@ +const phoneInputs = document.querySelectorAll('input[type="tel"]'); +const COUNTRY_CODE = '+7'; +const length = COUNTRY_CODE.length; + +const matrix = `${COUNTRY_CODE} (___) ___ __ __`; + +const replacePhoneValue = (element) => { + const def = matrix.replace(/\D/g, ''); + let i = 0; + let val = element.value.replace(/\D/g, ''); + if (def.length >= val.length) { + val = def; + } + element.value = matrix.replace(/./g, (a) => { + if (/[_\d]/.test(a) && i < val.length) { + return val.charAt(i++); + } else if (i >= val.length) { + return ''; + } + return a; + }); +}; + +const onInputPhoneInput = ({target}) => { + replacePhoneValue(target); +}; + +const onKeydownPhoneInput = (event) => { + if (event.target.selectionStart <= length && event.keyCode !== 8 && event.keyCode !== 46) { + event.target.setSelectionRange(length, length); + } + if ((event.target.selectionStart === length || event.target.selectionStart === 1) && event.keyCode === 8) { + event.preventDefault(); + } + if (event.target.selectionStart === 1 && event.keyCode === 46) { + event.preventDefault(); + } +}; + +const onBlurPhoneInput = ({target}) => { + if (target.value === COUNTRY_CODE) { + target.value = ''; + target.removeEventListener('input', onInputPhoneInput); + target.removeEventListener('blur', onBlurPhoneInput); + } +}; + +const onFocusPhoneInput = ({target}) => { + if (!target.value) { + target.value = COUNTRY_CODE; + target.addEventListener('input', onInputPhoneInput); + target.addEventListener('blur', onBlurPhoneInput); + target.addEventListener('keydown', onKeydownPhoneInput); + } +}; + +const initPhoneMask = () => { + if (phoneInputs.length) { + phoneInputs.forEach((input) => { + input.addEventListener('focus', onFocusPhoneInput); + if (input.value) { + replacePhoneValue(input); + input.addEventListener('input', onInputPhoneInput); + input.addEventListener('blur', onBlurPhoneInput); + input.addEventListener('keydown', onKeydownPhoneInput); + } + input.setAttribute('pattern', `.{${matrix.length},}`); + }); + } +}; + +export {initPhoneMask}; diff --git a/source/manifest.webmanifest b/source/manifest.webmanifest new file mode 100644 index 00000000..6df2f9e0 --- /dev/null +++ b/source/manifest.webmanifest @@ -0,0 +1,6 @@ +{ + "icons": [ + { "src": "img/favicons/192.png", "type": "image/png", "sizes": "192x192" }, + { "src": "img/favicons/512.png", "type": "image/png", "sizes": "512x512" } + ] +} diff --git a/source/public/favicon.ico b/source/public/favicon.ico index c91ede97..f1b96964 100644 Binary files a/source/public/favicon.ico and b/source/public/favicon.ico differ diff --git a/source/sass/blocks/about.scss b/source/sass/blocks/about.scss new file mode 100644 index 00000000..0ec0e68e --- /dev/null +++ b/source/sass/blocks/about.scss @@ -0,0 +1,206 @@ +.about__container { + display: flex; + flex-direction: column; + padding-top: 50px; + padding-bottom: 50px; + + gap: 40px; + + @media (min-width: $vp-1440) { + display: grid; + padding-top: 70px; + padding-bottom: 60px; + + grid-template-columns: 702px 1fr; + row-gap: 60px; + } +} + +.about__title { + margin: 0 0 15px; + + @media (min-width: $vp-768) { + margin-bottom: 30px; + } +} + +.about__container b { + margin: 0 0 10px; + + font-weight: 400; + font-size: 16px; + line-height: 22px; + + @media (min-width: $vp-768) { + margin-bottom: 15px; + + font-size: 20px; + line-height: 26px; + } + + @media (min-width: $vp-1440) { + font-size: 22px; + line-height: 32px; + } + + &:last-of-type { + margin-bottom: 0; + } +} + +.about__wrapper h3 { + margin: 0 0 10px; + + font-weight: 400; + font-size: 18px; + line-height: 22px; + color: var(--primary, #316dc2); + + @media (min-width: $vp-768) { + margin-bottom: 15px; + + font-size: 28px; + line-height: 28px; + } + + @media (min-width: $vp-1440) { + font-size: 32px; + line-height: 36px; + } + + &:last-of-type { + margin-bottom: 20px; + + @media (min-width: $vp-768) { + margin-bottom: 30px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 40px; + } + } +} + +.about__wrapper p { + margin: 0 0 10px; + padding: 0; + + @media (min-width: $vp-768) { + margin-right: 190px; + } + + @media (min-width: $vp-1440) { + margin-right: 0; + } + + &:last-of-type { + margin-bottom: 30px; + + @media (min-width: $vp-768) { + margin-bottom: 40px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 50px; + } + } +} + +.about__list { + display: grid; + margin: 0; + padding: 42px 20px 40px; + + list-style-type: none; + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); + border-radius: 20px; + + gap: 22px; + + @media (min-width: $vp-768) { + margin-top: 20px; + padding: 72px 50px 50px 70px; + + gap: 54px 52px; + grid-template-columns: 1fr 1fr; + } + + @media (min-width: $vp-1440) { + margin-top: 0; + padding-right: 100px; + padding-left: 120px; + + grid-column: 1/-1; + } +} + +.about__item { + position: relative; + + display: flex; + flex-direction: column; + padding: 15px 20px; + + border: 1px solid var(--beige, #f0efe9); + border-radius: 16px; + + gap: 15px; + + @media (min-width: $vp-1440) { + display: grid; + align-items: center; + padding: 30px 40px; + + gap: 21px; + grid-template-columns: 180px 1fr; + } + + &::before { + content: ""; + position: absolute; + top: -23px; + left: -21px; + + width: 42px; + height: 42px; + + background-color: var(--primary, #316dc2); + background-image: url("../__spritemap#sprite-star-view"); + background-repeat: no-repeat; + background-position: center; + background-size: 18px 22px; + } +} + +.about__item b { + font-weight: 400; + font-size: 16px; + line-height: 20px; + text-transform: uppercase; + letter-spacing: 0.01em; + + @media (min-width: $vp-768) { + font-size: 20px; + line-height: 22px; + } + + @media (min-width: $vp-1440) { + font-size: 26px; + line-height: 30px; + } +} + +.about__item p { + margin: 0; + + font-weight: 300; + font-size: 14px; + line-height: 20px; + color: var(--beige, #f0efe9); + + @media (min-width: $vp-768) { + font-size: 16px; + } +} diff --git a/source/sass/blocks/button-icon.scss b/source/sass/blocks/button-icon.scss new file mode 100644 index 00000000..49cea849 --- /dev/null +++ b/source/sass/blocks/button-icon.scss @@ -0,0 +1,76 @@ +.button-icon { + display: flex; + justify-content: center; + align-items: center; + width: 30px; + height: 30px; + + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); + border: none; + border-radius: 50%; + cursor: pointer; + + transition: background-color 0.3s ease, color 0.3s ease; + + --icon-transform: rotate(-45deg); + + &::before { + content: ""; + + width: 10px; + height: 10px; + + background-color: currentColor; + transform: var(--icon-transform); + transform-origin: center; + + transition: rotate 0.3s ease, background-color 0.3s ease; + + mask-image: var(--icon-url); + mask-position: center; + mask-repeat: no-repeat; + } + + &:hover { + color: var(--primary, #316dc2); + + background-color: var(--white, #ffffff); + + --icon-transform: rotate(0); + } + + &:active { + color: var(--primary, #316dc2); + + background-color: var(--white, #ffffff); + opacity: 0.7; + + --icon-transform: rotate(0); + } + + &:focus-visible { + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); + opacity: 1; + + --icon-transform: rotate(0); + } + + &--disabled, + &:disabled { + color: rgba(255, 255, 255, 0.6); + + background-color: var(--state-disabled, #a9afb7); + + pointer-events: none; + + --icon-transform: rotate(-45deg); + } + + &--arrow { + --icon-url: url("../__spritemap#sprite-arrow-right-slider-view"); + } +} diff --git a/source/sass/blocks/button.scss b/source/sass/blocks/button.scss new file mode 100644 index 00000000..fc924fee --- /dev/null +++ b/source/sass/blocks/button.scss @@ -0,0 +1,297 @@ +.button { + position: relative; + + display: inline-flex; + padding: 16px 59px 16px 21px; + + font-weight: 500; + font-size: 14px; + line-height: 14px; + font-family: $font-family; + color: var(--primary, #316dc2); + text-transform: uppercase; + text-decoration: none; + letter-spacing: 0.02em; + + background-color: transparent; + border: 1px solid var(--primary, #316dc2); + border-radius: 30px; + cursor: pointer; + + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; + + --circle-color: var(--primary, #316dc2); + + &:hover { + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); + + --circle-color: var(--white, #ffffff); + } + + &:active { + color: rgba(255, 255, 255, 0.7); + + background-color: var(--primary, #316dc2); + + --circle-color: var(--white, #ffffff); + } + + &:disabled, + &--disabled { + color: var(--state-disabled, #a9afb7); + + border-color: var(--state-disabled, #a9afb7); + + pointer-events: none; + + --circle-color: var(--state-disabled, #a9afb7); + } + + &::before { + content: ""; + position: absolute; + top: 50%; + right: 4px; + + width: 46px; + height: 46px; + + background-color: var(--circle-color); + border-radius: 50%; + transform: translateY(-50%); + + transition: background-color 0.3s ease; + } + + &--arrow { + padding-top: 15px; + padding-right: 58px; + padding-bottom: 15px; + + font-size: 12px; + line-height: 12px; + + --arrow-color: var(--white, #ffffff); + + @media (min-width: $vp-768) { + padding: 20px 80px 20px 30px; + + font-size: 14px; + line-height: 14px; + } + } + + &--arrow::before { + width: 34px; + height: 34px; + + @media (min-width: $vp-768) { + width: 46px; + height: 46px; + } + } + + &--arrow::after { + content: ""; + position: absolute; + top: 50%; + right: 14px; + + width: 15px; + height: 15px; + + background-color: var(--arrow-color); + transform: translateY(-50%) rotate(-45deg); + transform-origin: center; + + transition: transform 0.3s ease, background-color 0.3s ease; + + mask-image: url("../__spritemap#sprite-arrow-right-view"); + + @media (min-width: $vp-768) { + right: 20px; + } + } + + &--burger { + width: 136px; + padding: 19px 70px 19px 20px; + + background-color: var(--white, #ffffff); + + transition: width 0.3s ease, color 0.3s ease, background-color 0.3s ease; + + --burger-color: var(--white, #ffffff); + + @media (min-width: $vp-768) { + padding-top: 20px; + padding-bottom: 20px; + } + } + + &--burger::after { + content: ""; + position: absolute; + top: calc(50% - 4px); + right: 19px; + + width: 15px; + height: 1px; + + background-color: var(--burger-color); + border-radius: 1px; + box-shadow: 0 3.5px 0 0 var(--burger-color), 0 7px 0 0 var(--burger-color); + + transition: box-shadow 0.3s ease, background-color 0.3s ease; + } + + &--blue-background { + color: var(--white, #ffffff); + + border-color: var(--white, #ffffff); + + --arrow-color: var(--primary, #316dc2); + --circle-color: var(--white, #ffffff); + } +} + +.is-open .button--burger { + width: 290px; + + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); + border-color: var(--primary, #316dc2); + + --circle-color: var(--white, #ffffff); + --close-color: var(--primary, #316dc2); + + @media (min-width: $vp-768) { + width: 286px; + } + + &::after { + top: calc(50% - 10px); + right: 17px; + + width: 20px; + height: 20px; + + background-color: var(--close-color); + box-shadow: none; + + mask-image: url("../__spritemap#sprite-cross-view"); + } +} + +.is-open .button--burger:hover { + --close-color: var(--white, #ffffff); +} + +.is-open .button--burger:focus-visible:hover { + --close-color: var(--primary, #316dc2); +} + +.button--arrow:hover { + --arrow-color: var(--primary, #316dc2); + + &::after { + transform: translateY(-50%) rotate(0deg); + } +} + +.button--arrow:focus-visible::after { + transform: translateY(-50%) rotate(0deg); +} + +.button--arrow:active { + --arrow-color: var(--primary, #316dc2); +} + +.button--arrow:active::after { + transform: translateY(-50%) rotate(0deg); + opacity: 0.7; +} + +.button--arrow:disabled::after, +.button--arrow.button--disabled::after { + transform: translateY(-50%) rotate(-45deg); + opacity: 0.6; +} + +.button--burger:hover { + --burger-color: var(--primary, #316dc2); +} + +.button--burger:focus-visible { + color: var(--primary, #316dc2); + + background-color: var(--white, #ffffff); + border-color: var(--white, #ffffff); +} + +.button--burger:focus-visible:hover { + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); +} + +.button--burger:focus-visible::after { + opacity: 0.7; +} + +.is-open .button--burger:disabled, +.is-open .button--burger.button--disabled { + color: var(--state-disabled, #a9afb7); + + border-color: var(--state-disabled, #a9afb7); + + --burger-color: var(--white, #ffffff); + --circle-color: var(--state-disabled, #a9afb7); +} + +.is-open .button--burger:disabled::after, +.is-open .button--burger.button--disabled::after { + opacity: 0.6; +} + +.button--burger:active::after { + opacity: 0.7; + + --burger-color: var(--primary, #316dc2); +} + +.button--blue-background:hover { + color: var(--primary, #316dc2); + + background-color: var(--white, #ffffff); + border-color: var(--white, #ffffff); + + --arrow-color: var(--white, #ffffff); + --circle-color: var(--primary, #316dc2); +} + +.button--blue-background:active { + color: rgba(49, 109, 194, 0.7); + + background-color: var(--white, #ffffff); + border-color: var(--white, #ffffff); + + --arrow-color: var(--white, #ffffff); + --circle-color: var(--primary, #316dc2); +} + +.button--blue-background:focus-visible { + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); + + --arrow-color: var(--primary, #316dc2); + --circle-color: var(--white, #ffffff); +} + +.button--blue-background:disabled::after { + background-color: var(--white, #ffffff); +} diff --git a/source/sass/blocks/conditions.scss b/source/sass/blocks/conditions.scss new file mode 100644 index 00000000..3a390ccf --- /dev/null +++ b/source/sass/blocks/conditions.scss @@ -0,0 +1,206 @@ +.conditions { + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); +} + +.conditions__container { + display: grid; + padding-top: 70px; + padding-bottom: 70px; + + gap: 40px; + + @media (min-width: $vp-768) { + padding-top: 100px; + padding-bottom: 100px; + + gap: 50px; + } + + @media (min-width: $vp-1440) { + padding-top: 120px; + padding-right: 206px; + padding-bottom: 120px; + + column-gap: 138px; + + grid-template-columns: 1fr 1fr; + } +} + +.conditions__title { + margin: 0 0 15px; + + color: var(--white, #ffffff); + + @media (min-width: $vp-768) { + margin-right: 180px; + margin-bottom: 30px; + } + + @media (min-width: $vp-1440) { + margin-right: 0; + } +} + +.conditions__wrapper:nth-child(even) { + @media (min-width: $vp-1440) { + margin-top: 10px; + } +} + +.conditions__wrapper p { + margin: 0 0 10px; + + font-size: 14px; + line-height: 20px; + + @media (min-width: $vp-768) { + margin-right: 180px; + + font-size: 16px; + color: var(--beige, #f0efe9); + } + + @media (min-width: $vp-1440) { + margin-right: 0; + + line-height: 26px; + } +} + +.conditions__wrapper p:last-of-type { + margin-bottom: 30px; + + @media (min-width: $vp-768) { + margin-bottom: 40px; + } +} + +.conditions__img-container img { + display: block; + width: 290px; + margin: 0 auto; + + border-radius: 17px; + + @media (min-width: $vp-768) { + width: 678px; + } + + @media (min-width: $vp-1440) { + width: 498px; + margin-left: 0; + } +} + +.conditions__subtitle { + margin: 0 0 30px; + margin-right: 80px; + + font-weight: 400; + font-size: 18px; + line-height: 22px; + + @media (min-width: $vp-768) { + margin-right: 0; + margin-bottom: 45px; + + font-size: 28px; + line-height: 28px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 55px; + + font-size: 32px; + line-height: 36px; + } +} + +.conditions__list { + display: grid; + margin: 0; + padding: 0; + + list-style-type: none; + + counter-reset: conditions-counter; + + gap: 15px; + + @media (min-width: $vp-768) { + gap: 25px 28px; + grid-template-columns: 1fr 1fr; + } + + @media (min-width: $vp-1440) { + gap: 23px; + grid-template-columns: 1fr; + } +} + +.conditions__item { + position: relative; + + margin-left: 15px; + padding: 24px 25px; + + font-size: 14px; + line-height: 20px; + color: var(--beige, #f0efe9); + + border: 1px solid var(--beige, #f0efe9); + border-radius: 16px; + + counter-increment: conditions-counter; + + @media (min-width: $vp-768) { + margin-left: 20px; + padding: 30px 41px 30px 25px; + + font-size: 16px; + } + + @media (min-width: $vp-1440) { + padding: 30px 25px; + + line-height: 26px; + } + + &::before { + content: counter(conditions-counter); + position: absolute; + top: -6px; + left: -12px; + + display: flex; + justify-content: center; + align-items: center; + width: 24px; + height: 32px; + + font-weight: 500; + font-size: 18px; + line-height: 18px; + text-align: center; + color: var(--white, #ffffff); + text-transform: uppercase; + + background-color: var(--primary, #316dc2); + + @media (min-width: $vp-768) { + top: -16px; + left: -21px; + + width: 42px; + height: 42px; + padding: 10px 14px; + + font-size: 22px; + line-height: 22px; + letter-spacing: 0.01em; + } + } +} diff --git a/source/sass/blocks/contacts.scss b/source/sass/blocks/contacts.scss new file mode 100644 index 00000000..a76a1fb5 --- /dev/null +++ b/source/sass/blocks/contacts.scss @@ -0,0 +1,182 @@ +.contacts { + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); +} + +.contacts__container { + padding-top: 75px; + padding-bottom: 69px; + + @media (min-width: $vp-768) { + padding-top: 100px; + padding-bottom: 100px; + } + + @media (min-width: $vp-1440) { + display: grid; + padding-top: 120px; + padding-bottom: 119px; + + column-gap: 32px; + + grid-template-columns: 1fr 1fr; + } +} + +.contacts__title { + margin: 0 0 35px; + + color: var(--white, #ffffff); + + @media (min-width: $vp-768) { + margin-bottom: 30px; + } +} + +.contacts__info { + margin-bottom: 23px; + + font-style: normal; + + @media (min-width: $vp-1440) { + margin-bottom: 33px; + } +} + +.contacts__list { + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + + list-style-type: none; + + gap: 13px; + + @media (min-width: $vp-768) { + flex-direction: row; + flex-wrap: wrap; + + gap: 20px; + } + + @media (min-width: $vp-1440) { + column-gap: 52px; + } +} + +.contacts__item { + display: flex; + flex-direction: column; + align-items: flex-start; + + gap: 8px; + + @media (min-width: $vp-768) { + gap: 17px; + } + + @media (min-width: $vp-1440) { + max-width: 263px; + } +} + +.contacts__subtitle { + margin: 0; + + font-size: 12px; + line-height: 12px; + color: var(--beige, #f0efe9); + text-transform: uppercase; + letter-spacing: 0.01em; + + opacity: 0.8; +} + +.contacts__text { + margin: 0; + padding-top: 7px; + padding-bottom: 7px; + + font-size: 14px; + line-height: 20px; + + @media (min-width: $vp-768) { + font-size: 16px; + } + + @media (min-width: $vp-1440) { + line-height: 26px; + } +} + +.contacts__link { + color: var(--white, #ffffff); + + border-radius: 15px; + + transition: color 0.3s ease, text-decoration-color 0.3s ease, opacity 0.3s ease, text-underline-offset 0.3s ease; + + text-decoration-color: transparent; + text-underline-offset: 8px; + + @media (min-width: $vp-1440) { + line-height: 17px; + } + + &:hover { + opacity: 0.7; + } + + &:focus-visible { + color: var(--text, #484848); + + opacity: 1; + + text-decoration-color: currentColor; + text-underline-offset: 4px; + } + + &:active { + color: var(--white, #ffffff); + + opacity: 1; + + text-decoration-color: currentColor; + text-underline-offset: 4px; + } +} + +.contacts__map-wrapper { + padding-top: 30px; + + border-top: 2px solid rgba(255, 255, 255, 0.2); + + @media (min-width: $vp-1440) { + padding-top: 40px; + + grid-column: 1/-1; + } +} + +.contacts__map-wrapper img { + display: block; + width: 290px; + margin-right: auto; + margin-left: auto; + + color: var(--text, #484848); + + background-color: #f9f7e8; + border-radius: 16px; + + @media (min-width: $vp-768) { + width: 678px; + } + + @media (min-width: $vp-1440) { + width: 1240px; + height: 486px; + } +} diff --git a/source/sass/blocks/faq.scss b/source/sass/blocks/faq.scss new file mode 100644 index 00000000..c9df1d89 --- /dev/null +++ b/source/sass/blocks/faq.scss @@ -0,0 +1,344 @@ +.faq__container { + padding-top: 50px; + padding-bottom: 50px; + + background-color: var(--beige, #f0efe9); + + @media (min-width: $vp-768) { + max-width: 1128px; + } + + @media (min-width: $vp-1440) { + max-width: 1440px; + padding: 70px 206px 60px; + } +} + +.faq__title { + margin: 0 0 30px; + + text-align: center; + + @media (min-width: $vp-768) { + margin-bottom: 40px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 71px; + } +} + +.faq__list { + display: grid; + margin: 0; + padding: 0; + + list-style-type: none; + + gap: 10px; +} + +.faq__item { + position: relative; + + overflow: hidden; + + border: 2px solid var(--primary, #316dc2); + border-radius: 14px; + + @media (min-width: $vp-768) { + border-radius: 16px; + } +} + +.faq__question { + position: relative; + + width: 100%; + margin: 0; + padding: 20px 15px; + + text-align: left; + color: var(--primary, #316dc2); + + background-color: transparent; + border: none; + cursor: pointer; + + transition: background-color 0.3s ease; + + @media (min-width: $vp-768) { + padding: 30px; + } + + @media (min-width: $vp-1440) { + padding: 40px; + } + + &:hover { + background-color: var(--color-white, #ffffff); + } + + &:focus-visible { + background-color: var(--color-white, #ffffff); + outline: none; + } + + &:active { + color: var(--state-active, #275699); + + background-color: var(--color-white, #ffffff); + } + + &:disabled { + cursor: default; + + pointer-events: none; + } +} + +.faq__question.is-active { + color: var(--color-white, #ffffff); + + background-color: var(--primary, #316dc2); + + @media (min-width: $vp-768) { + padding-bottom: 20px; + } + + @media (min-width: $vp-1440) { + padding-bottom: 21px; + } + + &:active { + background-color: var(--state-active, #275699); + } +} + +.faq__question b { + display: grid; + align-items: center; + min-height: 40px; + margin: 0; + padding: 0 55px 0 0; + + font-weight: 400; + font-size: 16px; + line-height: 18px; + + transition: color 0.3s ease, background-color 0.3s ease; + + @media (min-width: $vp-768) { + padding-right: 50px; + + font-size: 22px; + line-height: 26px; + } + + @media (min-width: $vp-1440) { + font-size: 28px; + line-height: 34px; + } +} + +.faq__answer { + max-height: 0; + padding: 0 15px; + overflow: hidden; + + color: var(--beige, #f0efe9); + + background-color: transparent; + + transition: max-height 0.3s ease, background-color 0.3s ease; + + @media (min-width: $vp-768) { + padding: 0 30px; + } + + @media (min-width: $vp-1440) { + padding: 0 70px 0 40px; + } +} + +.faq__answer p { + margin: 0 0 10px; + padding: 0; + + font-size: 14px; + line-height: 20px; + + @media (min-width: $vp-768) { + font-size: 16px; + } + + @media (min-width: $vp-1440) { + line-height: 26px; + } +} + +.faq__answer p:last-of-type { + margin-bottom: 0; +} + +.faq__question.is-active + .faq__answer { + padding-bottom: 20px; + + background-color: var(--primary, #316dc2); + + @media (min-width: $vp-768) { + padding-bottom: 30px; + } + + @media (min-width: $vp-1440) { + padding-bottom: 40px; + } +} + +.faq__question.is-active:active + .faq__answer { + background-color: var(--state-active, #275699); +} + +.faq__close-icon { + position: absolute; + top: 50%; + right: 15px; + + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + + color: var(--color-white, #ffffff); + + background-color: var(--primary, #316dc2); + border: 1px solid var(--primary, #316dc2); + border-radius: 50%; + transform: translateY(-50%); + + transition: background-color 0.3s ease; + + @media (min-width: $vp-768) { + top: 30px; + right: 30px; + + transform: none; + } + + @media (min-width: $vp-1440) { + top: 40px; + right: 40px; + } + + &::before { + content: ""; + + width: 18px; + height: 2px; + + background-color: currentColor; + + transition: background-color 0.3s ease; + } + + &::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + + width: 2px; + height: 18px; + + background-color: currentColor; + transform: translate(-50%, -50%); + + transition: background-color 0.3s ease; + } +} + +.faq__question:hover .faq__close-icon { + color: var(--primary, #316dc2); + + background-color: transparent; + border-color: var(--primary, #316dc2); +} + +.faq__question.is-active:hover .faq__close-icon { + color: var(--color-white, #ffffff); + + background-color: transparent; + border-color: var(--color-white, #ffffff); +} + +.faq__question.is-active:focus-visible .faq__close-icon { + color: var(--color-white, #ffffff); + + background-color: transparent; + border-color: var(--color-white, #ffffff); +} + +.faq__question:focus-visible .faq__close-icon { + color: var(--primary, #316dc2); + + background-color: transparent; + border-color: var(--primary, #316dc2); +} + +.faq__question:disabled .faq__close-icon { + color: #dddfe2; + + background-color: var(--state-disabled, #a9afb7); + border-color: var(--state-disabled, #a9afb7); +} + +.faq__question.is-active:disabled .faq__close-icon { + color: #dddfe2; + + background-color: var(--state-disabled, #a9afb7); + border-color: var(--state-disabled, #a9afb7); +} + +.faq__question.is-active .faq__close-icon { + color: var(--primary, #316dc2); + + background-color: var(--color-white, #ffffff); + border-color: var(--color-white, #ffffff); + + &::after { + display: none; + } +} + +.faq__question:active .faq__close-icon { + color: var(--color-white, #ffffff); + + background-color: var(--state-active, #275699); + border-color: var(--state-active, #275699); +} + +.faq__question.is-active:active .faq__close-icon { + color: var(--state-active, #275699); + + background-color: var(--color-white, #ffffff); + border-color: var(--color-white, #ffffff); +} + +.faq__br-mobile { + @media (min-width: $vp-768) { + display: none; + } +} + +.faq__br-tablet { + display: none; + + @media (min-width: $vp-768) { + display: block; + } + + @media (min-width: $vp-1440) { + display: none; + } +} diff --git a/source/sass/blocks/feedback.scss b/source/sass/blocks/feedback.scss new file mode 100644 index 00000000..4497e01c --- /dev/null +++ b/source/sass/blocks/feedback.scss @@ -0,0 +1,221 @@ +.feedback { + padding: 37px 15px 40px; + + background-color: var(--white, #ffffff); + + @media (min-width: $vp-768) { + padding: 55px 80px 60px; + } + + @media (min-width: $vp-1440) { + padding-top: 53px; + } + + &--style-blue { + position: relative; + + padding: 83px 10px 80px; + + background-color: var(--beige, #f0efe9); + + @media (min-width: $vp-768) { + padding: 50px 58px; + } + + @media (min-width: $vp-1440) { + padding: 60px 100px; + } + } +} + +.feedback--style-blue::before { + content: ""; + position: absolute; + top: 40px; + bottom: 40px; + left: 0; + + width: 100%; + height: 753px; + + background-image: url("../img/background/form-mobile@1x.jpg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @media (resolution >= 2dppx) { + background-image: url("../img/background/form-mobile@2x.jpg"); + } + + @media (min-width: $vp-768) { + display: none; + } +} + +.feedback__container { + .feedback--style-blue & { + position: relative; + z-index: 1; + + max-width: 400px; + margin: 0 auto; + padding: 17px 15px 27px; + + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); + border-radius: 16px; + + @media (min-width: $vp-768) { + position: relative; + + max-width: 1240px; + padding: 41px var(--padding-right) 36px 40px; + + --padding-right: 38.4%; + + background-image: url("../img/background/form-tablet@1x.jpg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @media (resolution >= 2dppx) { + background-image: url("../img/background/form-tablet@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + padding: 44px 820px 40px 70px; + + background-image: url("../img/background/form-desktop@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/form-desktop@2x.jpg"); + } + } + } +} + +.feedback--style-blue .feedback__container::before { + @media (min-width: $vp-768) { + content: ""; + position: absolute; + top: 0; + left: 0; + z-index: -1; + + width: calc(100% - var(--padding-right) + 40px); + height: 100%; + + background-color: var(--primary, #316dc2); + border-radius: 16px; + } + + @media (min-width: $vp-1440) { + width: 490px; + } +} + +.feedback__title { + margin: 0 0 14px; + + font-weight: 400; + font-size: 18px; + line-height: 18px; + text-align: center; + color: var(--primary, #316dc2); + + @media (min-width: $vp-768) { + margin-bottom: 17px; + + font-size: 28px; + line-height: 28px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 14px; + + font-size: 32px; + line-height: 36px; + } + + .feedback--style-blue & { + margin: 0 0 12px; + + text-align: left; + color: var(--white, #ffffff); + + @media (min-width: $vp-768) { + margin-bottom: 31px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 34px; + } + } +} + +.feedback__text { + margin: 0 0 25px; + padding-right: 20px; + padding-left: 20px; + + font-weight: 400; + font-size: 14px; + line-height: 20px; + text-align: center; + + @media (min-width: $vp-768) { + margin-bottom: 30px; + padding: 0; + + font-size: 16px; + } + + @media (min-width: $vp-1440) { + font-size: 16px; + line-height: 26px; + } + + .feedback--style-blue & { + margin-bottom: 21px; + padding: 0; + + text-align: left; + color: var(--beige, #f0efe9); + + opacity: 0.9; + + @media (min-width: $vp-768) { + margin-bottom: 40px; + } + } +} + +.feedback__button { + justify-content: center; + width: 100%; + padding-top: 14px; + padding-bottom: 14px; + + @media (min-width: $vp-768) { + display: block; + width: max-content; + max-width: 100%; + margin: 0 auto; + padding: 19px 79px 19px 29px; + } + + .feedback--style-blue & { + width: 260px; + padding-top: 15px; + padding-bottom: 15px; + + @media (min-width: $vp-768) { + width: 352px; + margin: 0 auto 0 0; + padding-top: 20px; + padding-bottom: 20px; + } + } +} diff --git a/source/sass/blocks/footer.scss b/source/sass/blocks/footer.scss new file mode 100644 index 00000000..1d9b4c57 --- /dev/null +++ b/source/sass/blocks/footer.scss @@ -0,0 +1,181 @@ +.footer__container { + display: grid; + padding-top: 40px; + padding-bottom: 41px; + + // gap: 15px; + justify-items: center; + + @media (min-width: $vp-768) { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + gap: 17px; + } + + @media (min-width: $vp-1440) { + align-items: start; + padding-top: 60px; + + gap: 16px 50px; + } +} + +.footer__logo { + margin-bottom: 4px; +} + +.footer__list { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 16px 0 0; + padding: 0; + + list-style-type: none; + + gap: 20px 26px; + + @media (min-width: $vp-768) { + justify-content: start; + max-width: 85%; + margin-top: 16px; + margin-right: -2px; + + gap: 11.5px; + } + + @media (min-width: $vp-1440) { + max-width: 840px; + margin-top: 13px; + margin-right: auto; + + gap: 12px 26.5px; + } +} + +.footer__link { + padding: 5px 2px; + margin: 16px 0 0; + + font-size: 14px; + line-height: 20px; + text-align: center; + color: var(--text, #484848); + text-decoration: none; + + border-radius: 15px; + + transition: color 0.3s ease, opacity 0.3s ease; + + @media (min-width: $vp-768) { + margin: 0; + font-size: 16px; + } + + @media (min-width: $vp-1440) { + line-height: 26px; + } + + &:hover { + color: var(--primary, #316dc2); + + opacity: 0.7; + } + + &:focus-visible { + color: var(--primary, #316dc2); + } + + &:active { + color: var(--state-active, #275699); + + opacity: 1; + } +} + +.footer__wrapper { + display: grid; + + text-align: center; + + gap: 8px; + + @media (min-width: $vp-768) { + width: 60%; + + text-align: left; + } + + @media (min-width: $vp-1440) { + order: 1; + width: 100%; + + grid-template-columns: 1fr 1fr; + } +} + +.footer__privacy { + font-size: 12px; + line-height: 14px; + text-decoration: underline; + + text-underline-offset: 4px; + + @media (min-width: $vp-768) { + margin-left: -2px; + + line-height: 12px; + text-align: left; + + text-underline-offset: 3px; + } + + @media (min-width: $vp-1440) { + order: 1; + margin-right: -2px; + margin-left: 0; + + font-size: 14px; + line-height: 18px; + text-align: end; + + justify-self: end; + text-underline-offset: 6px; + } +} + +.footer__copyright { + margin: 0; + + font-size: 12px; + line-height: 14px; + + opacity: 0.6; + + @media (min-width: $vp-768) { + line-height: 12px; + } + + @media (min-width: $vp-1440) { + margin-top: 7px; + + font-size: 14px; + line-height: 18px; + } +} + +.footer__social { + margin: 14px 0 0; + + @media (min-width: $vp-768) { + max-width: 35%; + margin-top: 5px; + } + + @media (min-width: $vp-1440) { + max-width: 204px; + margin-top: 8px; + } +} diff --git a/source/sass/blocks/form.scss b/source/sass/blocks/form.scss new file mode 100644 index 00000000..214339df --- /dev/null +++ b/source/sass/blocks/form.scss @@ -0,0 +1,489 @@ +.form__item { + display: block; + margin-bottom: 16px; + + @media (min-width: $vp-768) { + margin-bottom: 20px; + } + + .form--style-blue & { + margin-bottom: 21px; + + @media (min-width: $vp-768) { + margin-bottom: 19px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 20px; + } + } + + .form--style-blue &:has(textarea) { + @media (min-width: $vp-768) { + margin-bottom: 22px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 20px; + } + } +} + +.form__select-item { + .form--style-blue & { + @media (min-width: $vp-768) { + margin-bottom: 21px; + } + } +} + +.form__checkbox-item { + display: grid; + margin-bottom: 23px; + + grid-template-columns: 20px 1fr; + + @media (min-width: $vp-768) { + margin-bottom: 31px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 30px; + } + + &:has(.form__checkbox:disabled) { + pointer-events: none; + } + + .form--style-blue & { + margin-bottom: 19px; + + @media (min-width: $vp-768) { + margin-bottom: 39px; + } + } +} + +.form__label { + display: flex; + max-width: max-content; + margin: 0 0 7px; + + font-weight: 400; + font-size: 14px; + line-height: 14px; + + cursor: pointer; + opacity: 0.8; + + transition: opacity 0.3s ease; + + @media (min-width: $vp-768) { + margin-bottom: 12px; + + line-height: 20px; + } + + @media (min-width: $vp-1440) { + line-height: 18px; + } + + .form--style-blue & { + margin-bottom: 11px; + + font-size: 12px; + color: var(--beige, #f0efe9); + + @media (min-width: $vp-768) { + margin-bottom: 12px; + + font-size: 14px; + line-height: 20px; + } + + @media (min-width: $vp-1440) { + line-height: 18px; + } + } +} + +.form--style-blue .form__select-item .form__label { + @media (min-width: $vp-1440) { + line-height: 14px; + } +} + +.form__input { + width: 100%; + height: 44px; + padding: 11px 20px; + + font-size: 14px; + line-height: 14px; + color: var(--text, #484848); + + background-color: transparent; + border: 1px solid var(--border-color); + + --border-color: rgba(72, 72, 72, 0.3); + + border-radius: 8px; + + transition: border-color 0.3s ease; + + @media (min-width: $vp-768) { + height: 50px; + padding-top: 14px; + padding-bottom: 13px; + + line-height: 20px; + } + + @media (min-width: $vp-1440) { + padding-top: 15px; + padding-bottom: 15px; + + line-height: 18px; + } + + &:hover { + --border-color: var(--text, #484848); + } + + &:focus-visible { + --border-color: var(--text, #484848); + } + + &:active { + --border-color: var(--text, #484848); + } + + &:disabled { + background-color: rgba(169, 175, 183, 0.2); + + --border-color: rgba(169, 175, 183, 0.5); + + pointer-events: none; + } + + .form--style-blue & { + height: 50px; + padding: 17px 20px; + + font-size: 12px; + color: var(--beige, #f0efe9); + + --border-color: rgba(255, 255, 255, 0.3); + + @media (min-width: $vp-768) { + padding-top: 15px; + padding-bottom: 15px; + + font-size: 14px; + line-height: 14px; + } + + @media (min-width: $vp-1440) { + line-height: 18px; + } + + &:hover { + --border-color: var(--white, #ffffff); + } + + &:focus-visible { + --border-color: var(--white, #ffffff); + } + + &:active { + --border-color: var(--white, #ffffff); + } + + &:disabled { + background-color: rgba(255, 255, 255, 0.2); + + --border-color: var(--white, #ffffff); + + opacity: 0.4; + } + } +} + +.form__input.check-error { + &:invalid { + background-color: rgba(255, 94, 102, 0.2); + + --border-color: var(--state-error, #ff5e66); + } +} + +.form__item:has(.form__input:hover) .form__label { + opacity: 1; +} + +.form__item:has(.form__input:focus-visible) .form__label { + opacity: 1; +} + +.form__item:has(.form__input:active) .form__label { + opacity: 1; +} + +.form__item:has(.form__input:disabled) .form__label { + color: var(--state-disabled, #a9afb7); + + opacity: 0.6; + + pointer-events: none; +} + +.form__textarea { + display: block; + min-height: 94px; + + resize: none; + + @media (min-width: $vp-768) { + min-height: 88px; + } + + @media (min-width: $vp-1440) { + min-height: 90px; + } +} + +.form__checkbox { + display: flex; + justify-content: center; + align-items: center; + width: 20px; + height: 20px; + margin: 3px 0 0; + + background-color: var(--primary, #316dc2); + border: 1px solid var(--primary, #316dc2); + border-radius: 2px; + cursor: pointer; + + transition: background-color 0.3s ease, opacity 0.3s ease; + + appearance: none; + + --icon-color: transparent; + + @media (min-width: $vp-768) { + margin-top: 0; + } + + &:hover { + background-color: transparent; + } + + &:focus { + background-color: transparent; + } + + &:disabled { + background-color: rgba(169, 175, 183, 0.2); + border-color: rgba(169, 175, 183, 0.5); + + pointer-events: none; + } + + &::before { + content: ""; + + width: 10px; + height: 10px; + + background-color: var(--icon-color); + + transition: background-color 0.3s ease; + + mask-image: url("../__spritemap#sprite-check-view"); + mask-position: center; + mask-repeat: no-repeat; + } + + .form--style-blue & { + margin-top: 10px; + + background-color: var(--white, #ffffff); + border-color: var(--white, #ffffff); + + @media (min-width: $vp-768) { + margin-top: 0; + } + + @media (min-width: $vp-1440) { + margin-top: -1px; + } + + &:hover { + background-color: transparent; + opacity: 1; + } + + &:focus { + background-color: transparent; + opacity: 1; + } + + &:disabled { + background-color: var(--state-disabled, #a9afb7); + border-color: var(--state-disabled, #a9afb7); + + pointer-events: none; + } + } +} + +.form__checkbox.check-error { + &:invalid { + background-color: rgba(255, 94, 102, 0.2); + border-color: var(--state-error, #ff5e66); + } +} + +.form__checkbox:checked { + background-color: var(--primary, #316dc2); + border-color: var(--primary, #316dc2); + + --icon-color: var(--white, #ffffff); + + &:disabled { + background-color: var(--state-disabled, #a9afb7); + border-color: var(--state-disabled, #a9afb7); + + --icon-color: var(--white, #ffffff); + } +} + +.form--style-blue .form__checkbox:checked { + background-color: var(--white, #ffffff); + border-color: var(--white, #ffffff); + opacity: 1; + + --icon-color: var(--primary, #316dc2); + + &:disabled { + background-color: var(--state-disabled, #a9afb7); + border-color: var(--state-disabled, #a9afb7); + + --icon-color: rgba(255, 255, 255, 0.7); + } +} + +.form__checkbox:checked:hover, +.form__checkbox:checked:focus-visible { + background-color: var(--white, #ffffff); + border-color: var(--primary, #316dc2); + + --icon-color: var(--primary, #316dc2); +} + +.form--style-blue .form__checkbox:checked:hover, +.form--style-blue .form__checkbox:checked:focus-visible { + background-color: transparent; + border-color: var(--white, #ffffff); + + --icon-color: var(--white, #ffffff); +} + +.form__checkbox-label { + padding-left: 10px; + + font-size: 12px; + line-height: 14px; + + cursor: pointer; + opacity: 0.9; + + @media (min-width: $vp-768) { + padding-top: 4px; + padding-bottom: 4px; + + line-height: 12px; + } + + @media (min-width: $vp-1440) { + padding-top: 5px; + padding-bottom: 3px; + } + + .form--style-blue & { + max-width: 260px; + + @media (min-width: $vp-768) { + max-width: 100%; + } + } +} + +.form__checkbox-item:hover .form__checkbox-label { + opacity: 1; +} + +.form__checkbox-item:has(.form__checkbox-label:hover) .form__checkbox, +.form__checkbox-item:has(.form__checkbox-label:focus-visible) .form__checkbox { + background-color: transparent; +} + +.form__checkbox-item:has(.form__checkbox-label:hover) .form__checkbox:checked, +.form__checkbox-item:has(.form__checkbox-label:focus-visible) .form__checkbox:checked { + --icon-color: var(--primary, #316dc2); +} + +.form--style-blue .form__checkbox-item:has(.form__checkbox-label:hover) .form__checkbox:checked, +.form--style-blue .form__checkbox-item:has(.form__checkbox-label:focus-visible) .form__checkbox:checked { + --icon-color: var(--white, #ffffff); +} + +.form__checkbox:disabled + .form__checkbox-label { + color: var(--state-disabled, #a9afb7); + + opacity: 0.8; + + pointer-events: none; +} + +.form__select { + min-height: 44px; + + color: var(--text, #484848); + + background-image: url("../__spritemap#sprite-arrow-down-dark-view"); + background-repeat: no-repeat; + background-position: right 19px top 16px; + background-size: 16px 16px; + cursor: pointer; + + appearance: none; + + &:active, + &:focus { + background-image: url("../__spritemap#sprite-arrow-up-dark-view"); + } + + .form--style-blue & { + max-width: 260px; + min-height: 52px; + + background-image: url("../__spritemap#sprite-arrow-down-view"); + + @media (min-width: $vp-768) { + max-width: 100%; + } + + &:active, + &:focus { + background-image: url("../__spritemap#sprite-arrow-up-view"); + } + } +} + +.form__br-mobile { + @media (min-width: $vp-768) { + display: none; + } +} diff --git a/source/sass/blocks/header.scss b/source/sass/blocks/header.scss new file mode 100644 index 00000000..e287e446 --- /dev/null +++ b/source/sass/blocks/header.scss @@ -0,0 +1,248 @@ +.header { + position: relative; +} + +.header__container { + position: absolute; + top: 20px; + right: 0; + left: 0; + z-index: 2; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; + width: 100%; + + @media (min-width: $vp-768) { + top: 30px; + } + + &::before { + content: ""; + position: fixed; + top: 0; + left: 50%; + z-index: 3; + + display: none; + width: 100%; + height: 100vh; + + background-color: var(--dark-overlay, rgba(13, 29, 51, 0.4)); + transform: translateX(-50%); + + transition: opacity 0.3s ease; + } +} + +.header-logo { + @media (min-width: $vp-768) { + margin-top: 2px; + } +} + +.is-open .header__logo { + display: none; + + @media (width >= 390px) { + display: flex; + } +} + +.is-open .header__container::before { + z-index: 1; + + display: block; +} + +.header__menu-button { + z-index: 1; + + margin-bottom: 4px; + + @media (min-width: $vp-768) { + margin-bottom: 2px; + } +} + +.header__menu { + display: flex; + flex-direction: column; + align-items: flex-end; + max-width: 235px; + + @media (min-width: $vp-768) { + max-width: 286px; + } + + .is-open & { + margin-left: auto; + max-width: 290px; + } +} + +.header__menu-list { + z-index: 1; + + display: flex; + flex-direction: column; + width: 100%; + max-height: 0; + margin: 0; + padding: 0 25px; + overflow: hidden; + + list-style-type: none; + font-size: 16px; + line-height: 16px; + + background-color: var(--primary, #316dc2); + border-radius: 16px; + opacity: 0; + + transition: opacity 0.3s ease, max-height 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease; + + gap: 19px; + + .is-open & { + padding-top: 31px; + padding-bottom: 31px; + + opacity: 1; + } +} + +.header__menu-item { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.header__link { + padding: 2px 0; + + color: var(--white, #ffffff); + text-decoration: none; + + opacity: 0.7; + + transition: opacity 0.3s ease; + + &:hover { + opacity: 1; + } + + &:focus-visible { + opacity: 1; + } + + &:active { + opacity: 0.5; + } + + &--current { + opacity: 1; + } + + .header__menu-list > .header__menu-item > & { + text-transform: uppercase; + letter-spacing: 0.02em; + } + + .header__menu-inner-list & { + margin-left: 16px; + } +} + +.header__menu-inner-list .header__link--current { + opacity: 0.9; +} + +.header__menu-inner-list { + display: flex; + flex-direction: column; + max-height: 0; + margin: 0; + padding: 0 10px 0 0; + overflow: hidden; + + list-style-type: none; + + opacity: 0; + + transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease; + + gap: 8px; + + .is-active + & { + padding-top: 10px; + padding-bottom: 2px; + + opacity: 1; + } +} + +.header__list-button { + display: grid; + padding: 2px 0; + + text-align: left; + color: var(--white, #ffffff); + text-transform: uppercase; + letter-spacing: 0.02em; + + background-color: transparent; + border: none; + cursor: pointer; + opacity: 0.7; + + gap: 10px; + grid-template-columns: 1fr 12px; + + &:hover { + opacity: 1; + } + + &:focus-visible { + opacity: 1; + } + + &:active { + opacity: 0.5; + } + + &:disabled { + color: var(--state-disabled, #a9afb7); + + pointer-events: none; + } + + &--current { + opacity: 1; + } + + &::after { + content: ""; + + width: 12px; + height: 12px; + margin-top: 2px; + + background-color: currentColor; + transform-origin: center; + + transition: transform 0.3s ease; + + mask-image: url("../__spritemap#sprite-arrow-down-view"); + } +} + +.header__list-button.is-active { + opacity: 1; + + &::after { + transform: rotate(-180deg); + } +} diff --git a/source/sass/blocks/hero.scss b/source/sass/blocks/hero.scss new file mode 100644 index 00000000..23920f27 --- /dev/null +++ b/source/sass/blocks/hero.scss @@ -0,0 +1,403 @@ +.hero__list { + margin: 0; + padding: 0; + + list-style-type: none; +} + +.hero__slide-content { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + min-height: 568px; + padding: 94px 15px 20px; + + background-color: #d6e2f7; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @media (min-width: $vp-768) { + min-height: 1024px; + padding: 116px 64px 60px 45px; + } + + @media (min-width: $vp-1440) { + min-height: 800px; + padding-right: 372px; + padding-left: 100px; + } + + @media (min-width: $vp-1440) { + min-height: 800px; + } + + &--studying-abroad { + background-image: url("../img/background/hero-studying-abroad-mobile@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/hero-studying-abroad-mobile@2x.jpg"); + } + + @media (min-width: $vp-768) { + background-image: url("../img/background/hero-studying-abroad-tablet@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/hero-studying-abroad-tablet@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../img/background/hero-studying-abroad-desktop@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/hero-studying-abroad-desktop@2x.jpg"); + } + } + } + + &--society-contribution { + background-image: url("../img/background/hero-society-contribution-mobile@1x.jpg"); + background-position: left 50% top 40%; + + @media (resolution >= 2dppx) { + background-image: url("../img/background/hero-society-contribution-mobile@2x.jpg"); + } + + @media (min-width: $vp-768) { + background-image: url("../img/background/hero-society-contribution-tablet@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/hero-society-contribution-tablet@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../img/background/hero-society-contribution-desktop@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/hero-society-contribution-desktop@2x.jpg"); + } + } + } + + &--major-companies { + background-image: url("../img/background/hero-major-companies-mobile@1x.jpg"); + background-position: left 50% top 40%; + + @media (resolution >= 2dppx) { + background-image: url("../img/background/hero-major-companies-mobile@2x.jpg"); + } + + @media (min-width: $vp-768) { + background-image: url("../img/background/hero-major-companies-tablet@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/hero-major-companies-tablet@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../img/background/hero-major-companies-desktop@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/hero-major-companies-desktop@2x.jpg"); + } + } + } + + &::before { + content: ""; + position: absolute; + + background-color: var(--blue-overlay, rgba(49, 109, 194, 0.2)); + + inset: 0; + } +} + +.hero__slider-content-wrapper { + @media (min-width: $vp-1440) { + width: 968px; + margin: 0 auto; + } +} + +.hero__pagination-wrapper { + @media (min-width: $vp-1440) { + display: flex; + } +} + +.hero__pagination { + position: relative; + + display: inline-flex; + flex-wrap: wrap; + min-width: 80px; + min-height: 28px; + margin-right: 40px; + padding: 10px 16px; + + background-color: var(--white, #ffffff); + border-radius: 12px 12px 0 0; + + gap: 12px; + + @media (min-width: $vp-768) { + min-width: 100px; + min-height: 40px; + padding: 14px 20px; + + border-radius: 20px 20px 0 0; + } + + @media (min-width: $vp-1440) { + margin-right: auto; + } + + &::before { + content: ""; + position: absolute; + right: -10px; + bottom: 0; + + width: 10px; + height: 10px; + + background-image: url("../__spritemap#sprite-angle-view"); + background-repeat: no-repeat; + background-position: center; + transform: rotate(-90deg); + + @media (min-width: $vp-768) { + right: -20px; + + width: 20px; + height: 20px; + } + } +} + +.hero__pagination .swiper-pagination-bullet { + position: relative; + + display: flex; + justify-content: center; + align-items: center; + width: 8px; + height: 8px; + padding: 0; + + background-color: var(--white, #ffffff); + border: 2px solid var(--primary, #316dc2); + border-radius: 50%; + cursor: pointer; + + transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; + + @media (min-width: $vp-768) { + width: 12px; + height: 12px; + } + + &::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + + width: 19px; + height: 28px; + + transform: translate(-50%, -50%); + } +} + +.hero__pagination .swiper-pagination-bullet:hover { + background-color: var(--primary, #316dc2); + border-color: var(--white, #ffffff); + opacity: 0.7; +} + +.hero__pagination .swiper-pagination-bullet:focus-visible { + background-color: var(--primary, #316dc2); + border-color: var(--primary, #316dc2); + opacity: 1; +} + +.hero__pagination .swiper-pagination-bullet:active { + background-color: var(--state-active, #275699); + border-color: var(--state-active, #275699); + opacity: 1; +} + +.hero__pagination .swiper-pagination-bullet:disabled { + background-color: var(--state-disabled, #a9afb7); + border-color: var(--state-disabled, #a9afb7); + opacity: 0.5; +} + +.hero__pagination .swiper-pagination-bullet-active { + background-color: var(--state-active, #275699); + border-color: var(--state-active, #275699); +} + +.hero__slide-title { + position: relative; + z-index: 1; + + margin: 0; + padding: 20px 15px 16px 14px; + + font-weight: 400; + font-size: 22px; + line-height: 26px; + color: var(--primary, #316dc2); + + background-color: var(--white, #ffffff); + border-radius: 0 16px 16px 0; + + @media (min-width: $vp-768) { + padding: 30px 69px 24px 40px; + + font-size: 36px; + line-height: 44px; + + border-radius: 0 30px 30px 0; + } + + @media (min-width: $vp-1440) { + max-width: 968px; + padding: 40px 50px 30px; + + font-size: 54px; + line-height: 62px; + } +} + +.hero__slide-wrapper { + position: relative; + z-index: 1; + + max-width: 600px; + + @media (min-width: $vp-768) { + display: grid; + max-width: 775px; + margin-right: 66px; + padding: 0 40px 35px; + + background-color: var(--white, #ffffff); + border-radius: 0 0 30px 30px; + + gap: 20px 74px; + grid-template-columns: 1fr 198px; + } + + @media (min-width: $vp-1440) { + max-width: 775px; + margin: 0 auto; + padding-right: 50px; + padding-left: 50px; + + transform: translateX(-96px); + } + + &::before { + @media (min-width: $vp-768) { + content: ""; + position: absolute; + top: 0; + right: -26px; + + width: 26px; + height: 26px; + + background-image: url("../__spritemap#sprite-angle-view"); + background-repeat: no-repeat; + background-position: center; + } + } +} + +.hero__slide-wrapper p { + position: relative; + + margin: 0 23px 0 0; + padding: 0 14px 15px; + + font-size: 16px; + line-height: 20px; + + background-color: var(--white, #ffffff); + + @media (min-width: $vp-768) { + margin-right: 0; + padding: 0; + } + + @media (min-width: $vp-1440) { + line-height: 26px; + } +} + +.hero__slide-wrapper p:last-of-type { + border-radius: 0 0 14px; + + @media (min-width: $vp-768) { + border-radius: 0; + } +} + +.hero__slide-wrapper p:first-of-type::before { + content: ""; + position: absolute; + top: 0; + right: -10px; + + width: 10px; + height: 10px; + + background-image: url("../__spritemap#sprite-angle-view"); + background-repeat: no-repeat; + background-position: center; +} + +.hero__button-wrapper { + position: relative; + + margin-right: 106px; + padding: 10px 15px; + + background-color: var(--white, #ffffff); + border-radius: 0 0 14px 14px; + + @media (min-width: $vp-768) { + margin-right: 0; + padding: 0; + } + + @media (min-width: $vp-1440) { + margin-top: 11px; + } + + &::before { + content: ""; + position: absolute; + top: 0; + right: -10px; + + width: 10px; + height: 10px; + + background-image: url("../__spritemap#sprite-angle-view"); + background-repeat: no-repeat; + background-position: center; + + @media (min-width: $vp-768) { + display: none; + } + } +} diff --git a/source/sass/blocks/logo.scss b/source/sass/blocks/logo.scss new file mode 100644 index 00000000..742d7736 --- /dev/null +++ b/source/sass/blocks/logo.scss @@ -0,0 +1,17 @@ +.logo { + display: flex; + justify-content: center; + align-items: center; + width: 52px; + height: 52px; + + background-color: var(--white, #ffffff); + border-radius: 50%; +} + +.logo__img { + max-width: 30px; + max-height: 30px; + + object-fit: cover; +} diff --git a/source/sass/blocks/modal.scss b/source/sass/blocks/modal.scss new file mode 100644 index 00000000..b582ecf1 --- /dev/null +++ b/source/sass/blocks/modal.scss @@ -0,0 +1,103 @@ +.modal { + position: absolute; + right: 0; + left: 0; + z-index: 10; + + display: flex; + justify-content: center; + align-items: start; + width: 100%; + height: 100vh; + padding-top: 23px; + padding-bottom: 23px; + overflow: auto; + + background-color: var(--dark-overlay, rgba(13, 29, 51, 0.4)); + visibility: hidden; + opacity: 0; + + transition: opacity 0.3s ease, visibility 0.3s ease; + + @media (min-width: $vp-768) { + padding-top: 204px; + padding-bottom: 90px; + } + + @media (min-width: $vp-1440) { + padding-top: 90px; + } +} + +.modal.is-open { + visibility: visible; + opacity: 1; +} + +.modal__content { + position: relative; + + width: 290px; + + border-radius: 16px; + + @media (min-width: $vp-768) { + width: 510px; + } +} + +.modal__close-button { + position: absolute; + top: 2px; + right: 2px; + + display: flex; + justify-content: center; + align-items: center; + width: 52px; + height: 53px; + + background-color: transparent; + border: none; + border-radius: 50%; + cursor: pointer; + + @media (min-width: $vp-768) { + top: 14px; + right: 14px; + } + + &:hover { + opacity: 0.7; + } + + &:focus-visible { + opacity: 0.6; + } + + &:active { + opacity: 0.4; + } + + &:disabled { + opacity: 0.3; + + pointer-events: none; + } + + &::before { + content: ""; + + width: 16px; + height: 16px; + + background-image: url("../__spritemap#sprite-cross-view"); + background-repeat: no-repeat; + background-position: center; + + @media (min-width: $vp-768) { + width: 22px; + height: 22px; + } + } +} diff --git a/source/sass/blocks/news.scss b/source/sass/blocks/news.scss new file mode 100644 index 00000000..66d76324 --- /dev/null +++ b/source/sass/blocks/news.scss @@ -0,0 +1,789 @@ +.news { + background-color: var(--beige, #f0efe9); +} + +.news__wrapper { + padding-top: 51px; + + @media (min-width: $vp-768) { + display: flex; + flex-direction: column; + margin: 0 auto; + padding: 50px 45px 0; + } + + @media (min-width: $vp-1440) { + max-width: 1440px; + padding: 60px 100px 0; + } +} + +.news__title { + margin: 0 auto 23px; + padding: 0 15px; + + text-align: center; + + @media (min-width: $vp-768) { + margin-bottom: 30px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 40px; + } +} + +.news__tabs-list { + display: flex; + margin: 0 auto; + padding: 0 0 24px 15px; + overflow: scroll; + + list-style-type: none; + + gap: 9px; + scrollbar-width: none; + + @media (min-width: $vp-768) { + flex-wrap: wrap; + margin-bottom: 30px; + padding-bottom: 0; + padding-left: 3px; + + gap: 6px; + } + + @media (min-width: $vp-1440) { + margin-bottom: 40px; + + gap: 25px; + } +} + +.news__tab { + padding: 10px 14px; + + font-weight: 500; + font-size: 12px; + line-height: 12px; + text-align: center; + color: var(--primary, #316dc2); + text-transform: uppercase; + letter-spacing: 0.02em; + + background-color: transparent; + border: 2px solid transparent; + border-radius: 20px; + cursor: pointer; + opacity: 0.6; + + transition: opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; + + @media (min-width: $vp-768) { + padding: 14px 20px; + + font-size: 14px; + line-height: 14px; + } + + @media (min-width: $vp-1440) { + min-width: 126px; + padding: 14px 3px; + } + + &:hover { + opacity: 1; + } + + &:focus-visible { + color: var(--primary, #316dc2); + + background-color: var(--white, #ffffff); + border-color: var(--white, #ffffff); + opacity: 1; + } + + &:active { + color: var(--state-active, #275699); + + background-color: transparent; + border-color: var(--state-active, #275699); + opacity: 1; + } + + &:disabled { + color: var(--state-disabled, #a9afb7); + + background-color: transparent; + border-color: transparent; + cursor: default; + opacity: 1; + } +} + +.news__tab.is-current { + border-color: var(--primary, #316dc2); + cursor: default; + opacity: 1; + + pointer-events: none; +} + +.swiper.news__slider { + position: relative; + + width: 320px; + margin: 0 auto; + padding: 0 15px 53px; + + @media (min-width: $vp-768) { + width: 678px; + padding-right: 0; + padding-bottom: 55px; + padding-left: 0; + } + + @media (min-width: $vp-1440) { + width: 1240px; + padding-bottom: 66px; + } +} + +.news__slider-list.swiper-wrapper { + height: 590px; + margin: 0 0 25px; + padding: 0; + + list-style-type: none; + + @media (min-width: $vp-768) { + height: 730px; + margin-bottom: 35px; + } + + @media (min-width: $vp-1440) { + height: initial; + min-height: 400px; + margin-bottom: 45px; + } +} + +.news__slide { + position: relative; + + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + + background-color: var(--blue-overlay, rgba(49, 109, 194, 0.2)); + background-repeat: no-repeat; + background-position: left 50% top 30%; + background-size: cover; + border-radius: 13px; +} + +.news__slide--internships { + .webp & { + background-image: url("../../img/news/interview-small@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/interview-small@2x.webp"); + } + + @media (min-width: $vp-768) { + background-image: url("../../img/news/interview-medium@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/interview-medium@2x.webp"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../../img/news/interview-large@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/interview-large@2x.webp"); + } + } + } + + .no-webp & { + background-image: url("../../img/news/interview-small@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/interview-small@2x.jpg"); + } + + @media (min-width: $vp-768) { + background-image: url("../../img/news/interview-medium@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/interview-medium@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../../img/news/interview-large@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/interview-large@2x.jpg"); + } + } + } +} + +.news__slide--trips { + .webp & { + background-image: url("../../img/news/travel-small@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/travel-small@2x.webp"); + } + + @media (min-width: $vp-768) { + background-image: url("../../img/news/travel-medium@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/travel-medium@2x.webp"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../../img/news/travel-large@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/travel-large@2x.webp"); + } + } + } + + .no-webp & { + background-image: url("../../img/news/travel-small@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/travel-small@2x.jpg"); + } + + @media (min-width: $vp-768) { + background-image: url("../../img/news/travel-medium@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/travel-medium@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../../img/news/travel-large@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/travel-large@2x.jpg"); + } + } + } +} + +.news__slide--volunteering { + .webp & { + background-image: url("../../img/news/volunteering-small@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/volunteering-small@2x.webp"); + } + + @media (min-width: $vp-768) { + background-image: url("../../img/news/volunteering-medium@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/volunteering-medium@2x.webp"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../../img/news/volunteering-large@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/volunteering-large@2x.webp"); + } + } + } + + .no-webp & { + background-image: url("../../img/news/volunteering-small@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/volunteering-small@2x.jpg"); + } + + @media (min-width: $vp-768) { + background-image: url("../../img/news/volunteering-medium@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/volunteering-medium@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../../img/news/volunteering-large@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/volunteering-large@2x.jpg"); + } + } + } +} + +.news__slide--career { + .webp & { + background-image: url("../../img/news/career-small@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/career-small@2x.webp"); + } + + @media (min-width: $vp-768) { + background-image: url("../../img/news/career-medium@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/career-medium@2x.webp"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../../img/news/career-large@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/career-large@2x.webp"); + } + } + } + + .no-webp & { + background-image: url("../../img/news/career-small@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/career-small@2x.jpg"); + } + + @media (min-width: $vp-768) { + background-image: url("../../img/news/career-medium@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/career-medium@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../../img/news/career-large@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/career-large@2x.jpg"); + } + } + } +} + +.news__slide:nth-child(3n + 1).news__slide--internships { + .webp & { + @media (min-width: $vp-1440) { + background-image: url("../../img/news/interview-large-wide@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/interview-large-wide@2x.webp"); + } + } + } + + .no-webp & { + @media (min-width: $vp-1440) { + background-image: url("../../img/news/interview-large-wide@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/interview-large-wide@2x.jpg"); + } + } + } +} + +.news__slide:nth-child(3n + 1).news__slide--trips { + .webp & { + @media (min-width: $vp-1440) { + background-image: url("../../img/news/career-large-wide@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/career-large-wide@2x.webp"); + } + } + } + + .no-webp & { + @media (min-width: $vp-1440) { + background-image: url("../../img/news/career-large-wide@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/career-large-wide@2x.jpg"); + } + } + } +} + +.news__slide:nth-child(3n + 1).news__slide--career { + .webp & { + @media (min-width: $vp-1440) { + background-image: url("../../img/news/career-large-wide@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/career-large-wide@2x.webp"); + } + } + } + + .no-webp & { + @media (min-width: $vp-1440) { + background-image: url("../../img/news/career-large-wide@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/career-large-wide@2x.jpg"); + } + } + } +} + +.news__slide:nth-child(3n + 1).news__slide--volunteering { + .webp & { + @media (min-width: $vp-1440) { + background-image: url("../../img/news/volunteering-large-wide@1x.webp"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/volunteering-large-wide@2x.webp"); + } + } + } + + .no-webp & { + @media (min-width: $vp-1440) { + background-image: url("../../img/news/volunteering-large-wide@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../../img/news/volunteering-large-wide@2x.jpg"); + } + } + } +} + +.swiper-slide.news__slide { + display: flex; + width: 290px; + min-height: 240px; + max-height: 240px; + + @media (min-width: $vp-768) { + width: 324px; + min-height: 350px; + max-height: 350px; + } + + @media (min-width: $vp-1440) { + width: 286px; + min-height: 400px; + max-height: initial; + } +} + +.swiper-slide.news__slide:nth-child(odd) { + min-height: 330px; + max-height: 330px; + + @media (min-width: $vp-768) { + min-height: 350px; + max-height: 350px; + } + + @media (min-width: $vp-1440) { + min-height: 400px; + max-height: initial; + } +} + +.news__slide:nth-child(3n + 1) { + @media (min-width: $vp-1440) { + width: 604px; + } +} + +.news__item-angle-bottom { + position: relative; + + &::after { + content: ""; + position: absolute; + right: -16px; + bottom: 0; + + width: 16px; + height: 16px; + + background-color: var(--beige, #f0efe9); + transform: rotate(-90deg); + + mask-image: url("../__spritemap#sprite-angle-view"); + mask-position: center; + mask-repeat: no-repeat; + } +} + +.news__date { + display: inline-flex; + min-width: 75px; + padding: 12px 12px 6px 0; + + font-size: 12px; + line-height: 12px; + color: var(--primary, #316dc2); + text-transform: uppercase; + letter-spacing: 0.01em; + + background-color: var(--beige, #f0efe9); + border-radius: 0 12px 0 0; + + @media (min-width: $vp-768) { + min-width: 78px; + } + + @media (min-width: $vp-1440) { + min-width: 75px; + } + + &::before { + content: ""; + position: absolute; + top: -16px; + left: 0; + + width: 16px; + height: 16px; + + background-color: var(--beige, #f0efe9); + transform: rotate(-90deg); + + mask-image: url("../__spritemap#sprite-angle-view"); + mask-position: center; + mask-repeat: no-repeat; + } +} + +.news__slide-title { + width: 200px; + min-height: 32px; + margin: 0; + padding: 10px 18px 4px 0; + + font-weight: 400; + font-size: 16px; + line-height: 18px; + color: var(--primary, #316dc2); + + background-color: var(--beige, #f0efe9); + border-radius: 0 12px 0 0; + + @media (min-width: $vp-768) { + width: 207px; + padding: 10px 18px 6px 0; + + font-size: 20px; + line-height: 24px; + } + + @media (min-width: $vp-1440) { + width: 190px; + padding: 10px 21px 4px 0; + + font-size: 24px; + line-height: 26px; + } +} + +.news__slide:nth-child(3n + 1) .news__slide-title { + @media (min-width: $vp-1440) { + width: 426px; + padding: 18px 18px 6px 0; + } +} + +.news__slide-wrapper { + position: relative; + + min-width: 263px; + min-height: 52px; + margin-right: 27px; + padding: 13px 10px 10px 0; + + background: var(--beige, #f0efe9); + border-radius: 0 12px; + + @media (min-width: $vp-768) { + min-width: 240px; + margin-right: 84px; + padding: 12px 18px 15px 0; + } + + @media (min-width: $vp-1440) { + margin-right: 44px; + } +} + +.news__slide:nth-child(3n + 1) .news__slide-wrapper { + @media (min-width: $vp-1440) { + width: 468px; + } +} + +.news__slide-wrapper p { + margin: 0 0 5px; + padding-right: 40px; + + font-size: 12px; + line-height: 14px; + color: var(--text, #484848); + + @media (min-width: $vp-768) { + padding-right: 46px; + + font-size: 14px; + line-height: 20px; + } + + @media (min-width: $vp-1440) { + padding-right: 45px; + + line-height: 18px; + } +} + +.news__slide-wrapper p:last-of-type { + margin-bottom: -1px; +} + +.news__slide-link { + position: absolute; + top: 50%; + right: 10px; + margin-top: 1px; + + transform: translateY(-50%); + + @media (min-width: $vp-768) { + margin: 0; + right: 18px; + } + + @media (min-width: $vp-1440) { + transform: translateY(calc(-50% - 2px)); + } +} + +.news__slider-buttons { + z-index: 1; + + justify-content: space-between; + width: 290px; + + @media (min-width: $vp-768) { + width: 100%; + } +} + +.news__pagination { + position: absolute; + bottom: 50px; + left: 50%; + + display: flex; + max-width: 215px; + + transform: translateX(-50%); + + gap: 0 16px; + + @media (min-width: $vp-768) { + column-gap: 20px; + } + + @media (min-width: $vp-1440) { + bottom: 61px; + } +} + +.news__pagination .swiper-pagination-bullet { + display: inline-flex; + justify-content: center; + align-items: center; + min-width: 26px; + height: 26px; + padding: 2px 7px; + + font-size: 14px; + line-height: 14px; + text-align: center; + color: var(--primary, #316dc2); + text-transform: uppercase; + + background-color: transparent; + border: 2px solid transparent; + border-radius: 14px; + cursor: pointer; + opacity: 0.5; + + transition: opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; + + @media (min-width: $vp-768) { + width: 32px; + height: 32px; + + border-radius: 16px; + } + + &:hover { + color: var(--primary, #316dc2); + + background-color: transparent; + border-color: var(--primary, #316dc2); + opacity: 1; + } + + &:focus-visible { + color: var(--primary, #316dc2); + + background-color: var(--white, #ffffff); + border-color: var(--primary, #316dc2); + opacity: 1; + } + + &:active { + color: var(--white, #ffffff); + + background-color: var(--state-active, #275699); + border-color: var(--state-active, #275699); + opacity: 1; + } + + &:disabled { + color: var(--state-disabled, #a9afb7); + + background-color: transparent; + border-color: transparent; + opacity: 0.5; + + pointer-events: none; + } +} + +.news__pagination .swiper-pagination-bullet-active { + font-weight: 500; + color: var(--white, #ffffff); + + background-color: var(--primary, #316dc2); + border-color: var(--primary, #316dc2); + opacity: 1; + + pointer-events: none; +} diff --git a/source/sass/blocks/page.scss b/source/sass/blocks/page.scss new file mode 100644 index 00000000..60c4711c --- /dev/null +++ b/source/sass/blocks/page.scss @@ -0,0 +1,51 @@ +.page { + display: flex; + flex-direction: column; + min-width: 320px; + min-height: 100%; + margin: 0; + + font-weight: 400; + font-size: 14px; + line-height: 20px; + font-family: $font-family; + color: var(--text, #484848); + + background-color: var(--beige, #f0efe9); + + @media (min-width: $vp-768) { + font-size: 16px; + line-height: 20px; + } + + @media (min-width: $vp-1440) { + line-height: 26px; + } +} + +.page__container { + max-width: 1440px; + margin: 0 auto; + padding: 0 15px; + + @media (min-width: $vp-768) { + padding: 0 45px; + } + + @media (min-width: $vp-1440) { + padding: 0 100px; + } +} + +.page__main { + flex-grow: 1; +} + +.page__footer { + margin-top: auto; +} + +.page__modal-open { + height: 100vh; + overflow: hidden; +} diff --git a/source/sass/blocks/programs.scss b/source/sass/blocks/programs.scss new file mode 100644 index 00000000..ebf8467d --- /dev/null +++ b/source/sass/blocks/programs.scss @@ -0,0 +1,336 @@ +.programs__container { + display: flex; + flex-direction: column; + padding-top: 55px; + padding-bottom: 50px; + + @media (min-width: $vp-768) { + display: block; + padding-top: 50px; + padding-right: 0; + padding-bottom: 42px; + } + + @media (min-width: $vp-1440) { + display: block; + padding: 62px 100px 52px; + } +} + +.programs__title { + margin: 0; + padding-right: 65px; + + @media (min-width: $vp-768) { + display: inline-flex; + width: 61%; + padding-top: 3px; + padding-bottom: 3px; + + vertical-align: middle; + } + + @media (min-width: $vp-1440) { + width: 81%; + } +} + +.programs__slider-buttons { + position: absolute; + top: 0; + right: 0; + + @media (min-width: $vp-768) { + top: initial; + right: 45px; + bottom: 8px; + + gap: 10px; + } + + @media (min-width: $vp-1440) { + right: 0; + } +} + +.programs__slider-wrapper { + position: relative; + + margin-top: -20px; + + @media (min-width: $vp-768) { + margin-top: 0; + } +} + +.programs__slider.swiper { + padding-top: 55px; + + @media (min-width: $vp-768) { + padding-top: 40px; + } + + @media (min-width: $vp-1440) { + padding-top: 42px; + } +} + +.programs__all-link { + justify-content: center; + order: 1; + width: 205px; + margin-bottom: 10px; + + @media (min-width: $vp-768) { + display: inline-flex; + justify-content: start; + order: 0; + width: 32.5%; + margin-right: 43px; + padding: 20px 60px 20px 27px; + + vertical-align: middle; + } + + @media (min-width: $vp-1440) { + width: 18.5%; + margin-right: 0; + } +} + +.programs__all-link:last-of-type { + margin-bottom: 0; +} + +.programs__slider-list { + margin: 0 0 30px; + padding: 0; + + list-style-type: none; + + @media (min-width: $vp-768) { + margin-bottom: 70px; + } +} + +.swiper-slide.programs__slide { + position: relative; + + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + min-height: 400px; + padding: 18px 10px; + + background-repeat: no-repeat; + background-position: left 50% top 30%; + background-size: cover; + border-radius: 12px; + + @media (min-width: $vp-768) { + min-height: 420px; + padding: 10px 20px; + } + + @media (min-width: $vp-1440) { + padding-top: 17px; + padding-bottom: 17px; + } + + &--internships { + background-image: url("../img/background/programs-internships-mobile@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/programs-internships-mobile@2x.jpg"); + } + + @media (width >= 500px) { + background-image: url("../img/background/programs-internships-tablet@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/programs-internships-tablet@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../img/background/programs-internships-desktop@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/programs-internships-desktop@2x.jpg"); + } + } + } + + &--volunteering { + background-image: url("../img/background/programs-volunteering-mobile@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/programs-volunteering-mobile@2x.jpg"); + } + + @media (width >= 500px) { + background-image: url("../img/background/programs-volunteering-tablet@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/programs-volunteering-tablet@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../img/background/programs-volunteering-desktop@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/programs-volunteering-desktop@2x.jpg"); + } + } + } + + &--studies { + background-image: url("../img/background/programs-studies-mobile@1x.jpg"); + background-position: center; + + @media (resolution >= 2dppx) { + background-image: url("../img/background/programs-studies-mobile@2x.jpg"); + } + + @media (width >= 500px) { + background-image: url("../img/background/programs-studies-tablet@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/programs-studies-tablet@2x.jpg"); + } + } + + @media (min-width: $vp-1440) { + background-image: url("../img/background/programs-studies-desktop@1x.jpg"); + + @media (resolution >= 2dppx) { + background-image: url("../img/background/programs-studies-desktop@2x.jpg"); + } + } + } + + &::before { + content: ""; + position: absolute; + + background-color: var(--blue-overlay, rgba(49, 109, 194, 0.2)); + border-radius: 12px; + + inset: 0; + } +} + +.programs__slide-title { + position: relative; + z-index: 1; + + min-width: 146px; + max-width: 200px; + margin: 0; + padding: 18px 18px 6px; + + font-weight: 400; + font-size: 16px; + line-height: 18px; + color: var(--primary, #316dc2); + + background-color: var(--white, #ffffff); + border-radius: 12px 12px 0 0; + + @media (min-width: $vp-768) { + min-width: 173px; + max-width: 230px; + + font-size: 20px; + line-height: 14px; + } + + @media (min-width: $vp-1440) { + min-width: 194px; + max-width: 300px; + padding-right: 12px; + + font-size: 24px; + line-height: 17px; + } + + &::before { + content: ""; + position: absolute; + right: -18px; + bottom: 0; + + width: 18px; + height: 18px; + + background-image: url("../__spritemap#sprite-angle-view"); + background-repeat: no-repeat; + background-position: center; + transform: rotate(-90deg); + } +} + +.programs__slide-wrapper { + position: relative; + z-index: 1; + + min-width: 270px; + min-height: 69px; + padding: 12px 64px 15px 18px; + + background-color: var(--white, #ffffff); + border-radius: 0 12px 12px; + + @media (min-width: $vp-768) { + display: grid; + align-items: center; + min-width: 284px; + min-height: 87px; + padding-right: 70px; + + gap: 10px; + } + + @media (min-width: $vp-1440) { + min-height: 82px; + margin-right: 31px; + } +} + +.programs__slide p { + margin: 0 0 10px; + + font-size: 12px; + line-height: 14px; + + @media (min-width: $vp-768) { + margin-bottom: 0; + + font-size: 14px; + line-height: 20px; + } + + @media (min-width: $vp-1440) { + line-height: 18px; + } +} + +.programs__slide p:last-of-type { + margin-bottom: 0; +} + +.programs__slide-link { + position: absolute; + top: 18px; + right: 18px; + + @media (min-width: $vp-768) { + top: 27px; + } + + @media (min-width: $vp-1440) { + top: 25px; + } +} diff --git a/source/sass/blocks/reviews.scss b/source/sass/blocks/reviews.scss new file mode 100644 index 00000000..cb114d08 --- /dev/null +++ b/source/sass/blocks/reviews.scss @@ -0,0 +1,238 @@ +.reviews__container.swiper { + padding: 56px 15px 51px; + + @media (min-width: $vp-768) { + padding: 50px 45px 112px; + } + + @media (min-width: $vp-1440) { + max-width: 1240px; + padding: 65px 0 122px; + } +} + +.reviews__title { + margin: 0 0 34px; + padding-right: 65px; + + @media (min-width: $vp-768) { + margin-bottom: 40px; + padding-right: 0; + } + + @media (min-width: $vp-1440) { + margin-bottom: 45px; + margin-left: 3px; + } +} + +.reviews__slider-buttons { + position: absolute; + top: 54px; + right: 15px; + + @media (min-width: $vp-768) { + top: initial; + right: 45px; + bottom: 50px; + + gap: 10px; + } + + @media (min-width: $vp-1440) { + right: 0; + bottom: 60px; + } +} + +.reviews__slider-list { + margin: 0; + padding: 0; + + list-style-type: none; +} + +.reviews__review { + display: grid; + align-content: start; + min-height: 472px; + padding: 30px 15px; + + border: 2px solid var(--primary, #316dc2); + border-radius: 16px; + + @media (min-width: $vp-768) { + min-height: 417px; + padding: 50px; + + gap: 25px 10px; + grid-template-columns: 1fr 229px; + } + + @media (min-width: $vp-1440) { + min-height: 483px; + padding: 50px 47px 50px 50px; + + gap: 25px 10px; + grid-template-columns: 1fr 1fr; + } +} + +.reviews__author { + display: grid; + margin-bottom: 16px; + + gap: 10px; + grid-template-columns: 60px 1fr; + + @media (min-width: $vp-768) { + margin-bottom: 5px; + + gap: 15px; + grid-template-columns: 90px 1fr; + } +} + +.reviews__author img { + display: block; + max-width: 60px; + + background-color: #a8a9a0; + border-radius: 50%; + + @media (min-width: $vp-768) { + max-width: 90px; + } +} + +.reviews__author-name { + margin: 12px 0 0; + + font-size: 14px; + line-height: 18px; + color: var(--primary, #316dc2); + + @media (min-width: $vp-768) { + margin-top: 21px; + + font-size: 20px; + line-height: 24px; + } + + @media (min-width: $vp-1440) { + font-size: 18px; + } +} + +.reviews__info { + display: grid; + margin: 0 0 24px; + + gap: 10px; + grid-template-columns: 1fr 1fr; + + @media (min-width: $vp-768) { + display: flex; + flex-wrap: wrap; + margin-top: 25px; + margin-bottom: 25px; + + gap: 25px; + } + + @media (min-width: $vp-1440) { + justify-self: end; + } +} + +.reviews__info-title { + margin-bottom: 8px; + + font-size: 12px; + line-height: 12px; + color: var(--primary, #316dc2); + text-transform: uppercase; + letter-spacing: 0.01em; + + @media (min-width: $vp-768) { + margin-bottom: 11px; + } +} + +.reviews__info-definition { + margin: 0; + + font-size: 12px; + line-height: 14px; + + opacity: 0.9; + + @media (min-width: $vp-768) { + font-size: 14px; + line-height: 20px; + } + + @media (min-width: $vp-1440) { + line-height: 18px; + } +} + +.reviews__review-title { + margin: 0 0 20px; + + font-style: normal; + font-size: 16px; + line-height: 18px; + color: var(--primary, #316dc2); + + @media (min-width: $vp-768) { + margin-bottom: 0; + + font-size: 20px; + line-height: 24px; + + grid-column: 1/-1; + } + + @media (min-width: $vp-1440) { + font-size: 24px; + line-height: 26px; + } +} + +.reviews__review > p { + margin: 0 0 10px; + + font-size: 14px; + line-height: 20px; + + @media (min-width: $vp-768) { + font-size: 16px; + + grid-column: 1/-1; + } + + @media (min-width: $vp-1440) { + line-height: 26px; + } +} + +.reviews__review > p:last-of-type { + margin-bottom: 0; +} + +.reviews__scrollbar.swiper-scrollbar.swiper-scrollbar-horizontal { + @media (min-width: $vp-768) { + width: calc(73% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); + margin-left: 45px; + + --swiper-scrollbar-bottom: 60px; + } + + @media (min-width: $vp-1440) { + width: calc(91.5% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); + margin-left: 0; + + --swiper-scrollbar-bottom: 70px; + } +} diff --git a/source/sass/blocks/slider-buttons.scss b/source/sass/blocks/slider-buttons.scss new file mode 100644 index 00000000..75dd7f6f --- /dev/null +++ b/source/sass/blocks/slider-buttons.scss @@ -0,0 +1,74 @@ +.slider-buttons { + display: flex; + flex-wrap: wrap; + + gap: 8px; +} + +.slider-buttons__button { + position: relative; + + display: flex; + justify-content: center; + align-items: center; + width: 22px; + height: 22px; + + background-color: transparent; + border: none; + border-radius: 50%; + cursor: pointer; + + transition: background-color 0.3s ease, opacity 0.3s ease; + + --arrow-color: var(--primary, #316dc2); + + &:hover { + opacity: 0.7; + } + + &:focus-visible { + background-color: var(--white-100, #ffffff); + opacity: 1; + } + + &:active { + background-color: var(--white-100, #ffffff); + opacity: 0.7; + } + + &:disabled { + background-color: transparent; + pointer-events: none; + + --arrow-color: var(--state-disabled, #a9afb7); + } + + &::before { + content: ""; + + display: block; + width: 10px; + height: 10px; + + background-color: var(--arrow-color); + + transition: background-color 0.3s ease; + + mask-image: url("../__spritemap#sprite-arrow-right-slider-view"); + mask-position: center; + mask-repeat: no-repeat; + } + + &::after { + content: ""; + position: absolute; + + width: 30px; + height: 30px; + } +} + +.slider-buttons__button--prev::before { + transform: rotate(180deg); +} diff --git a/source/sass/blocks/slider-scrollbar.scss b/source/sass/blocks/slider-scrollbar.scss new file mode 100644 index 00000000..fc351e36 --- /dev/null +++ b/source/sass/blocks/slider-scrollbar.scss @@ -0,0 +1,47 @@ +.slider-scrollbar.swiper-scrollbar.swiper-scrollbar-horizontal { + display: none; + + @media (min-width: $vp-768) { + display: block; + width: calc(78% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); + + --swiper-scrollbar-bg-color: var(--blue-overlay, rgba(49, 109, 194, 0.2)); + --swiper-scrollbar-bottom: 18px; + --swiper-scrollbar-drag-bg-color: var(--primary, #316dc2); + --swiper-scrollbar-sides-offset: 0.01%; + --swiper-scrollbar-size: 2px; + } + + @media (min-width: $vp-1440) { + width: calc(91.5% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); + } +} + +.slider-scrollbar .swiper-scrollbar-drag { + &:hover { + --swiper-scrollbar-drag-bg-color: var(--state-active, #275699); + } + + &:active { + --swiper-scrollbar-drag-bg-color: var(--primary, #316dc2); + } + + @media (min-width: $vp-768) { + position: relative; + + cursor: pointer; + } + + &::before { + @media (min-width: $vp-768) { + content: ""; + position: absolute; + top: 50%; + + width: 100%; + height: 30px; + + transform: translateY(-50%); + } + } +} diff --git a/source/sass/blocks/social.scss b/source/sass/blocks/social.scss new file mode 100644 index 00000000..d68f3808 --- /dev/null +++ b/source/sass/blocks/social.scss @@ -0,0 +1,100 @@ +.social { + display: flex; + flex-wrap: wrap; + padding: 0; + + list-style-type: none; + + gap: 10px; + + @media (min-width: $vp-1440) { + gap: 20px; + } +} + +.social__link { + position: relative; + + display: flex; + justify-content: center; + align-items: center; + width: 26px; + height: 26px; + + background-color: var(--primary, #316dc2); + border-radius: 50%; + cursor: pointer; + + transition: background-color 0.3s ease; + + --icon-color: var(--white, #ffffff); + --icon-opacity: 1; + + @media (min-width: $vp-768) { + width: 36px; + height: 36px; + } + + &:hover { + --icon-opacity: 0.7; + } + + &:focus-visible { + background-color: var(--white, #ffffff); + + --icon-color: var(--primary, #316dc2); + } + + &:active { + background-color: var(--state-active, #275699); + + --icon-color: var(--white, #ffffff); + --icon-opacity: 1; + } + + &::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + + width: 34px; + height: 34px; + + background-color: transparent; + transform: translate(-50%, -50%); + } + + &::after { + content: ""; + + width: 16px; + height: 16px; + + background-color: var(--icon-color); + opacity: var(--icon-opacity); + + transition: background-color 0.3s ease, opacity 0.3s ease; + + mask-image: var(--icon-image); + mask-position: center; + mask-repeat: no-repeat; + mask-size: 12px 12px; + + @media (min-width: $vp-768) { + mask-size: 16px 16px; + } + } +} + +.social__link--vk { + --icon-image: url("../__spritemap#sprite-social-vk-view"); +} + +.social__link--ok { + --icon-image: url("../__spritemap#sprite-social-ok-view"); +} + +.social__link--reddit { + --icon-image: url("../__spritemap#sprite-social-reddit-view"); +} diff --git a/source/sass/blocks/title.scss b/source/sass/blocks/title.scss new file mode 100644 index 00000000..fb63934d --- /dev/null +++ b/source/sass/blocks/title.scss @@ -0,0 +1,15 @@ +.title { + font-weight: 400; + font-size: 20px; + line-height: 20px; + color: var(--primary, #316dc2); + + @media (min-width: $vp-768) { + font-size: 34px; + line-height: 50px; + } + + @media (min-width: $vp-1440) { + font-size: 50px; + } +} diff --git a/source/sass/global/fonts.scss b/source/sass/global/fonts.scss new file mode 100644 index 00000000..4fb2e23b --- /dev/null +++ b/source/sass/global/fonts.scss @@ -0,0 +1,26 @@ +@font-face { + font-style: normal; + font-weight: 400; + font-family: "Manrope"; + + font-display: swap; + src: url("../fonts/manrope-400.woff2") format("woff2"), url("../fonts/manrope-400.woff") format("woff"); +} + +@font-face { + font-style: normal; + font-weight: 300; + font-family: "Manrope"; + + font-display: swap; + src: url("../fonts/manrope-300.woff2") format("woff2"), url("../fonts/manrope-300.woff") format("woff"); +} + +@font-face { + font-style: normal; + font-weight: 500; + font-family: "Manrope"; + + font-display: swap; + src: url("../fonts/manrope-500.woff2") format("woff2"), url("../fonts/manrope-500.woff") format("woff"); +} diff --git a/source/sass/global/global.scss b/source/sass/global/global.scss new file mode 100644 index 00000000..155b6cd5 --- /dev/null +++ b/source/sass/global/global.scss @@ -0,0 +1,29 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + height: 100%; + scroll-behavior: smooth; +} + +img { + max-width: 100%; + height: auto; + + object-fit: contain; +} + +:root { + --primary: #316dc2; + --white: #ffffff; + --beige: #f0efe9; + --text: #484848; + --dark-overlay: rgba(13, 29, 51, 0.4); + --blue-overlay: rgba(49, 109, 194, 0.2); + --state-disabled: #a9afb7; + --state-active: #275699; + --state-error: #ff5e66; +} diff --git a/source/sass/global/utils.scss b/source/sass/global/utils.scss new file mode 100644 index 00000000..04deb82d --- /dev/null +++ b/source/sass/global/utils.scss @@ -0,0 +1,13 @@ +.visually-hidden { + position: absolute; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + + border: 0; + + clip: rect(0 0 0 0); +} diff --git a/source/sass/global/variables.scss b/source/sass/global/variables.scss new file mode 100644 index 00000000..9ea5b368 --- /dev/null +++ b/source/sass/global/variables.scss @@ -0,0 +1,6 @@ +// Viewports +$vp-768: 768px; +$vp-1440: 1440px; + +// Fonts +$font-family: "Manrope", sans-serif; diff --git a/source/sass/style.scss b/source/sass/style.scss index 96467369..c4dc48b5 100644 --- a/source/sass/style.scss +++ b/source/sass/style.scss @@ -1,4 +1,33 @@ // Vendor -// --------------------------------- - @import "vendor/normalize"; + +// Переменные +@import "global/variables"; + +// Базовые стили +@import "global/fonts"; +@import "global/global"; +@import "global/utils"; + +// Блоки компонентов +@import "blocks/button"; +@import "blocks/button-icon"; +@import "blocks/title"; +@import "blocks/logo"; +@import "blocks/slider-buttons"; +@import "blocks/slider-scrollbar"; +@import "blocks/social"; +@import "blocks/page"; +@import "blocks/header"; +@import "blocks/hero"; +@import "blocks/about"; +@import "blocks/modal"; +@import "blocks/form"; +@import "blocks/feedback"; +@import "blocks/programs"; +@import "blocks/conditions"; +@import "blocks/news"; +@import "blocks/faq"; +@import "blocks/reviews"; +@import "blocks/contacts"; +@import "blocks/footer";