diff --git a/source/Untitled-1.html b/source/Untitled-1.html new file mode 100644 index 00000000..2f526689 --- /dev/null +++ b/source/Untitled-1.html @@ -0,0 +1,142 @@ +
+
+
+

Программы

+ все программы +
+
+
+
+ + + + + + + + + + Стажировки. + +
+
+

Стажировки

+
+
+

Получите незаменимый опыт + работы в крупнейших мировых + компаниях.

+ +
+
+
+
+ + + + + + + + + + Волонтёрство. + +
+
+

Волонтёрство

+
+
+

Помогайте другим и развивайте + свои лидерские качества.

+ +
+
+
+
+ + + + + + + + + + Учёба. + +
+
+

Учёба

+
+
+

Получите образование и измените + своё будущее.

+ +
+
+
+
+ + + + + + + + + + Учёба. + +
+
+

Учёба

+
+
+

Получите образование и измените + своё будущее.

+ +
+
+
+
+
+
+
+
+ + +
+
+
+
diff --git a/source/fonts/Manrope-Light.woff b/source/fonts/Manrope-Light.woff new file mode 100644 index 00000000..de394e53 Binary files /dev/null and b/source/fonts/Manrope-Light.woff differ diff --git a/source/fonts/Manrope-Light.woff2 b/source/fonts/Manrope-Light.woff2 new file mode 100644 index 00000000..477ba081 Binary files /dev/null and b/source/fonts/Manrope-Light.woff2 differ diff --git a/source/fonts/Manrope-Medium.woff b/source/fonts/Manrope-Medium.woff new file mode 100644 index 00000000..5710b2b7 Binary files /dev/null and b/source/fonts/Manrope-Medium.woff differ diff --git a/source/fonts/Manrope-Medium.woff2 b/source/fonts/Manrope-Medium.woff2 new file mode 100644 index 00000000..c84a8006 Binary files /dev/null and b/source/fonts/Manrope-Medium.woff2 differ diff --git a/source/fonts/Manrope-Regular.woff b/source/fonts/Manrope-Regular.woff new file mode 100644 index 00000000..fdc05328 Binary files /dev/null and b/source/fonts/Manrope-Regular.woff differ diff --git a/source/fonts/Manrope-Regular.woff2 b/source/fonts/Manrope-Regular.woff2 new file mode 100644 index 00000000..0db37afa Binary files /dev/null and b/source/fonts/Manrope-Regular.woff2 differ diff --git a/source/img/background/bg-form-desktop.jpg b/source/img/background/bg-form-desktop.jpg new file mode 100644 index 00000000..53624498 Binary files /dev/null and b/source/img/background/bg-form-desktop.jpg differ diff --git a/source/img/background/bg-form-desktop.webp b/source/img/background/bg-form-desktop.webp new file mode 100644 index 00000000..8a02372b Binary files /dev/null and b/source/img/background/bg-form-desktop.webp differ diff --git a/source/img/background/bg-form-desktop@2x.jpg b/source/img/background/bg-form-desktop@2x.jpg new file mode 100644 index 00000000..3ed2f10c Binary files /dev/null and b/source/img/background/bg-form-desktop@2x.jpg differ diff --git a/source/img/background/bg-form-desktop@2x.webp b/source/img/background/bg-form-desktop@2x.webp new file mode 100644 index 00000000..6517edf6 Binary files /dev/null and b/source/img/background/bg-form-desktop@2x.webp differ diff --git a/source/img/background/bg-form-mobile.jpg b/source/img/background/bg-form-mobile.jpg new file mode 100644 index 00000000..b3664d66 Binary files /dev/null and b/source/img/background/bg-form-mobile.jpg differ diff --git a/source/img/background/bg-form-mobile.webp b/source/img/background/bg-form-mobile.webp new file mode 100644 index 00000000..59e1ecb7 Binary files /dev/null and b/source/img/background/bg-form-mobile.webp differ diff --git a/source/img/background/bg-form-mobile@2x.jpg b/source/img/background/bg-form-mobile@2x.jpg new file mode 100644 index 00000000..0396db85 Binary files /dev/null and b/source/img/background/bg-form-mobile@2x.jpg differ diff --git a/source/img/background/bg-form-mobile@2x.webp b/source/img/background/bg-form-mobile@2x.webp new file mode 100644 index 00000000..98451cdd Binary files /dev/null and b/source/img/background/bg-form-mobile@2x.webp differ diff --git a/source/img/background/bg-form-tablet.jpg b/source/img/background/bg-form-tablet.jpg new file mode 100644 index 00000000..ea07dd2c Binary files /dev/null and b/source/img/background/bg-form-tablet.jpg differ diff --git a/source/img/background/bg-form-tablet.webp b/source/img/background/bg-form-tablet.webp new file mode 100644 index 00000000..dc48d8b8 Binary files /dev/null and b/source/img/background/bg-form-tablet.webp differ diff --git a/source/img/background/bg-form-tablet@2x.jpg b/source/img/background/bg-form-tablet@2x.jpg new file mode 100644 index 00000000..8b1eafc6 Binary files /dev/null and b/source/img/background/bg-form-tablet@2x.jpg differ diff --git a/source/img/background/bg-form-tablet@2x.webp b/source/img/background/bg-form-tablet@2x.webp new file mode 100644 index 00000000..cb5c8e50 Binary files /dev/null and b/source/img/background/bg-form-tablet@2x.webp differ diff --git a/source/img/grant/img-desktop.jpg b/source/img/grant/img-desktop.jpg new file mode 100644 index 00000000..59fc840a Binary files /dev/null and b/source/img/grant/img-desktop.jpg differ diff --git a/source/img/grant/img-desktop.webp b/source/img/grant/img-desktop.webp new file mode 100644 index 00000000..dc568cfc Binary files /dev/null and b/source/img/grant/img-desktop.webp differ diff --git a/source/img/grant/img-desktop@2x.jpg b/source/img/grant/img-desktop@2x.jpg new file mode 100644 index 00000000..1f2401a0 Binary files /dev/null and b/source/img/grant/img-desktop@2x.jpg differ diff --git a/source/img/grant/img-desktop@2x.webp b/source/img/grant/img-desktop@2x.webp new file mode 100644 index 00000000..057861f8 Binary files /dev/null and b/source/img/grant/img-desktop@2x.webp differ diff --git a/source/img/grant/img-mobile.jpg b/source/img/grant/img-mobile.jpg new file mode 100644 index 00000000..aae59322 Binary files /dev/null and b/source/img/grant/img-mobile.jpg differ diff --git a/source/img/grant/img-mobile.webp b/source/img/grant/img-mobile.webp new file mode 100644 index 00000000..3c387e2c Binary files /dev/null and b/source/img/grant/img-mobile.webp differ diff --git a/source/img/grant/img-mobile@2x.jpg b/source/img/grant/img-mobile@2x.jpg new file mode 100644 index 00000000..e805030f Binary files /dev/null and b/source/img/grant/img-mobile@2x.jpg differ diff --git a/source/img/grant/img-mobile@2x.webp b/source/img/grant/img-mobile@2x.webp new file mode 100644 index 00000000..6e4ee3c2 Binary files /dev/null and b/source/img/grant/img-mobile@2x.webp differ diff --git a/source/img/grant/img-tablet.jpg b/source/img/grant/img-tablet.jpg new file mode 100644 index 00000000..a4cb215f Binary files /dev/null and b/source/img/grant/img-tablet.jpg differ diff --git a/source/img/grant/img-tablet.webp b/source/img/grant/img-tablet.webp new file mode 100644 index 00000000..c57c26a1 Binary files /dev/null and b/source/img/grant/img-tablet.webp differ diff --git a/source/img/grant/img-tablet@2x.jpg b/source/img/grant/img-tablet@2x.jpg new file mode 100644 index 00000000..542db44a Binary files /dev/null and b/source/img/grant/img-tablet@2x.jpg differ diff --git a/source/img/grant/img-tablet@2x.webp b/source/img/grant/img-tablet@2x.webp new file mode 100644 index 00000000..ffa9f962 Binary files /dev/null and b/source/img/grant/img-tablet@2x.webp differ diff --git a/source/img/hero/item-1-desktop.jpg b/source/img/hero/item-1-desktop.jpg new file mode 100644 index 00000000..f8d072dc Binary files /dev/null and b/source/img/hero/item-1-desktop.jpg differ diff --git a/source/img/hero/item-1-desktop.webp b/source/img/hero/item-1-desktop.webp new file mode 100644 index 00000000..c657508b Binary files /dev/null and b/source/img/hero/item-1-desktop.webp differ diff --git a/source/img/hero/item-1-desktop@2x.jpg b/source/img/hero/item-1-desktop@2x.jpg new file mode 100644 index 00000000..2d95d965 Binary files /dev/null and b/source/img/hero/item-1-desktop@2x.jpg differ diff --git a/source/img/hero/item-1-desktop@2x.webp b/source/img/hero/item-1-desktop@2x.webp new file mode 100644 index 00000000..099ec98a Binary files /dev/null and b/source/img/hero/item-1-desktop@2x.webp differ diff --git a/source/img/hero/item-1-mobile.jpg b/source/img/hero/item-1-mobile.jpg new file mode 100644 index 00000000..3f912378 Binary files /dev/null and b/source/img/hero/item-1-mobile.jpg differ diff --git a/source/img/hero/item-1-mobile.webp b/source/img/hero/item-1-mobile.webp new file mode 100644 index 00000000..eef9cbc5 Binary files /dev/null and b/source/img/hero/item-1-mobile.webp differ diff --git a/source/img/hero/item-1-mobile@2x.jpg b/source/img/hero/item-1-mobile@2x.jpg new file mode 100644 index 00000000..8710f10d Binary files /dev/null and b/source/img/hero/item-1-mobile@2x.jpg differ diff --git a/source/img/hero/item-1-mobile@2x.webp b/source/img/hero/item-1-mobile@2x.webp new file mode 100644 index 00000000..63e802d1 Binary files /dev/null and b/source/img/hero/item-1-mobile@2x.webp differ diff --git a/source/img/hero/item-1-tablet.jpg b/source/img/hero/item-1-tablet.jpg new file mode 100644 index 00000000..c301f2f3 Binary files /dev/null and b/source/img/hero/item-1-tablet.jpg differ diff --git a/source/img/hero/item-1-tablet.webp b/source/img/hero/item-1-tablet.webp new file mode 100644 index 00000000..274e6ca1 Binary files /dev/null and b/source/img/hero/item-1-tablet.webp differ diff --git a/source/img/hero/item-1-tablet@2x.jpg b/source/img/hero/item-1-tablet@2x.jpg new file mode 100644 index 00000000..0afe4f0f Binary files /dev/null and b/source/img/hero/item-1-tablet@2x.jpg differ diff --git a/source/img/hero/item-1-tablet@2x.webp b/source/img/hero/item-1-tablet@2x.webp new file mode 100644 index 00000000..a94ca806 Binary files /dev/null and b/source/img/hero/item-1-tablet@2x.webp differ diff --git a/source/img/hero/item-2-desktop.jpg b/source/img/hero/item-2-desktop.jpg new file mode 100644 index 00000000..8574fd9a Binary files /dev/null and b/source/img/hero/item-2-desktop.jpg differ diff --git a/source/img/hero/item-2-desktop.webp b/source/img/hero/item-2-desktop.webp new file mode 100644 index 00000000..e9b82fab Binary files /dev/null and b/source/img/hero/item-2-desktop.webp differ diff --git a/source/img/hero/item-2-desktop@2x.jpg b/source/img/hero/item-2-desktop@2x.jpg new file mode 100644 index 00000000..00d15923 Binary files /dev/null and b/source/img/hero/item-2-desktop@2x.jpg differ diff --git a/source/img/hero/item-2-desktop@2x.webp b/source/img/hero/item-2-desktop@2x.webp new file mode 100644 index 00000000..694934d0 Binary files /dev/null and b/source/img/hero/item-2-desktop@2x.webp differ diff --git a/source/img/hero/item-2-mobile.jpg b/source/img/hero/item-2-mobile.jpg new file mode 100644 index 00000000..78052392 Binary files /dev/null and b/source/img/hero/item-2-mobile.jpg differ diff --git a/source/img/hero/item-2-mobile.webp b/source/img/hero/item-2-mobile.webp new file mode 100644 index 00000000..a1f1262d Binary files /dev/null and b/source/img/hero/item-2-mobile.webp differ diff --git a/source/img/hero/item-2-mobile@2x.jpg b/source/img/hero/item-2-mobile@2x.jpg new file mode 100644 index 00000000..d795ca3c Binary files /dev/null and b/source/img/hero/item-2-mobile@2x.jpg differ diff --git a/source/img/hero/item-2-mobile@2x.webp b/source/img/hero/item-2-mobile@2x.webp new file mode 100644 index 00000000..1f7c8812 Binary files /dev/null and b/source/img/hero/item-2-mobile@2x.webp differ diff --git a/source/img/hero/item-2-tablet.jpg b/source/img/hero/item-2-tablet.jpg new file mode 100644 index 00000000..a098fdcc Binary files /dev/null and b/source/img/hero/item-2-tablet.jpg differ diff --git a/source/img/hero/item-2-tablet.webp b/source/img/hero/item-2-tablet.webp new file mode 100644 index 00000000..12faf22c Binary files /dev/null and b/source/img/hero/item-2-tablet.webp differ diff --git a/source/img/hero/item-2-tablet@2x.jpg b/source/img/hero/item-2-tablet@2x.jpg new file mode 100644 index 00000000..1e58789a Binary files /dev/null and b/source/img/hero/item-2-tablet@2x.jpg differ diff --git a/source/img/hero/item-2-tablet@2x.webp b/source/img/hero/item-2-tablet@2x.webp new file mode 100644 index 00000000..690e5143 Binary files /dev/null and b/source/img/hero/item-2-tablet@2x.webp differ diff --git a/source/img/hero/item-3-desktop.jpg b/source/img/hero/item-3-desktop.jpg new file mode 100644 index 00000000..873fe144 Binary files /dev/null and b/source/img/hero/item-3-desktop.jpg differ diff --git a/source/img/hero/item-3-desktop.webp b/source/img/hero/item-3-desktop.webp new file mode 100644 index 00000000..4a835f95 Binary files /dev/null and b/source/img/hero/item-3-desktop.webp differ diff --git a/source/img/hero/item-3-desktop@2x.jpg b/source/img/hero/item-3-desktop@2x.jpg new file mode 100644 index 00000000..06c739a5 Binary files /dev/null and b/source/img/hero/item-3-desktop@2x.jpg differ diff --git a/source/img/hero/item-3-desktop@2x.webp b/source/img/hero/item-3-desktop@2x.webp new file mode 100644 index 00000000..ca529e38 Binary files /dev/null and b/source/img/hero/item-3-desktop@2x.webp differ diff --git a/source/img/hero/item-3-mobile.jpg b/source/img/hero/item-3-mobile.jpg new file mode 100644 index 00000000..b3122f2a Binary files /dev/null and b/source/img/hero/item-3-mobile.jpg differ diff --git a/source/img/hero/item-3-mobile.webp b/source/img/hero/item-3-mobile.webp new file mode 100644 index 00000000..243c3f77 Binary files /dev/null and b/source/img/hero/item-3-mobile.webp differ diff --git a/source/img/hero/item-3-mobile@2x.jpg b/source/img/hero/item-3-mobile@2x.jpg new file mode 100644 index 00000000..26e21753 Binary files /dev/null and b/source/img/hero/item-3-mobile@2x.jpg differ diff --git a/source/img/hero/item-3-mobile@2x.webp b/source/img/hero/item-3-mobile@2x.webp new file mode 100644 index 00000000..4482eed9 Binary files /dev/null and b/source/img/hero/item-3-mobile@2x.webp differ diff --git a/source/img/hero/item-3-tablet.jpg b/source/img/hero/item-3-tablet.jpg new file mode 100644 index 00000000..9418aefd Binary files /dev/null and b/source/img/hero/item-3-tablet.jpg differ diff --git a/source/img/hero/item-3-tablet.webp b/source/img/hero/item-3-tablet.webp new file mode 100644 index 00000000..bfa24c38 Binary files /dev/null and b/source/img/hero/item-3-tablet.webp differ diff --git a/source/img/hero/item-3-tablet@2x.jpg b/source/img/hero/item-3-tablet@2x.jpg new file mode 100644 index 00000000..4b2345f1 Binary files /dev/null and b/source/img/hero/item-3-tablet@2x.jpg differ diff --git a/source/img/hero/item-3-tablet@2x.webp b/source/img/hero/item-3-tablet@2x.webp new file mode 100644 index 00000000..7b4087ba Binary files /dev/null and b/source/img/hero/item-3-tablet@2x.webp differ diff --git a/source/img/map/map-desktop.png b/source/img/map/map-desktop.png new file mode 100644 index 00000000..1f65e6a5 Binary files /dev/null and b/source/img/map/map-desktop.png differ diff --git a/source/img/map/map-desktop.webp b/source/img/map/map-desktop.webp new file mode 100644 index 00000000..0216f264 Binary files /dev/null and b/source/img/map/map-desktop.webp differ diff --git a/source/img/map/map-desktop@2x.png b/source/img/map/map-desktop@2x.png new file mode 100644 index 00000000..7c42e56b Binary files /dev/null and b/source/img/map/map-desktop@2x.png differ diff --git a/source/img/map/map-desktop@2x.webp b/source/img/map/map-desktop@2x.webp new file mode 100644 index 00000000..22c05fc3 Binary files /dev/null and b/source/img/map/map-desktop@2x.webp differ diff --git a/source/img/map/map-mobile.png b/source/img/map/map-mobile.png new file mode 100644 index 00000000..23acb532 Binary files /dev/null and b/source/img/map/map-mobile.png differ diff --git a/source/img/map/map-mobile.webp b/source/img/map/map-mobile.webp new file mode 100644 index 00000000..f00abffc Binary files /dev/null and b/source/img/map/map-mobile.webp differ diff --git a/source/img/map/map-mobile@2x.png b/source/img/map/map-mobile@2x.png new file mode 100644 index 00000000..7fa5887b Binary files /dev/null and b/source/img/map/map-mobile@2x.png differ diff --git a/source/img/map/map-mobile@2x.webp b/source/img/map/map-mobile@2x.webp new file mode 100644 index 00000000..93ca3305 Binary files /dev/null and b/source/img/map/map-mobile@2x.webp differ diff --git a/source/img/map/map-tablet.png b/source/img/map/map-tablet.png new file mode 100644 index 00000000..5b6297b1 Binary files /dev/null and b/source/img/map/map-tablet.png differ diff --git a/source/img/map/map-tablet.webp b/source/img/map/map-tablet.webp new file mode 100644 index 00000000..6fb74013 Binary files /dev/null and b/source/img/map/map-tablet.webp differ diff --git a/source/img/map/map-tablet@2x.png b/source/img/map/map-tablet@2x.png new file mode 100644 index 00000000..eb1fbb67 Binary files /dev/null and b/source/img/map/map-tablet@2x.png differ diff --git a/source/img/map/map-tablet@2x.webp b/source/img/map/map-tablet@2x.webp new file mode 100644 index 00000000..22a73483 Binary files /dev/null and b/source/img/map/map-tablet@2x.webp differ diff --git a/source/img/news/item-1-desktop.jpg b/source/img/news/item-1-desktop.jpg new file mode 100644 index 00000000..ab41f4fa Binary files /dev/null and b/source/img/news/item-1-desktop.jpg differ diff --git a/source/img/news/item-1-desktop.webp b/source/img/news/item-1-desktop.webp new file mode 100644 index 00000000..129ec425 Binary files /dev/null and b/source/img/news/item-1-desktop.webp differ diff --git a/source/img/news/item-1-desktop@2x.jpg b/source/img/news/item-1-desktop@2x.jpg new file mode 100644 index 00000000..43e9437e Binary files /dev/null and b/source/img/news/item-1-desktop@2x.jpg differ diff --git a/source/img/news/item-1-desktop@2x.webp b/source/img/news/item-1-desktop@2x.webp new file mode 100644 index 00000000..1ccd3bf2 Binary files /dev/null and b/source/img/news/item-1-desktop@2x.webp differ diff --git a/source/img/news/item-1-mobile.jpg b/source/img/news/item-1-mobile.jpg new file mode 100644 index 00000000..e3315498 Binary files /dev/null and b/source/img/news/item-1-mobile.jpg differ diff --git a/source/img/news/item-1-mobile.webp b/source/img/news/item-1-mobile.webp new file mode 100644 index 00000000..ad52ceec Binary files /dev/null and b/source/img/news/item-1-mobile.webp differ diff --git a/source/img/news/item-1-mobile@2x.jpg b/source/img/news/item-1-mobile@2x.jpg new file mode 100644 index 00000000..ab5f5482 Binary files /dev/null and b/source/img/news/item-1-mobile@2x.jpg differ diff --git a/source/img/news/item-1-mobile@2x.webp b/source/img/news/item-1-mobile@2x.webp new file mode 100644 index 00000000..41dfb27c Binary files /dev/null and b/source/img/news/item-1-mobile@2x.webp differ diff --git a/source/img/news/item-1-tablet.jpg b/source/img/news/item-1-tablet.jpg new file mode 100644 index 00000000..51622be6 Binary files /dev/null and b/source/img/news/item-1-tablet.jpg differ diff --git a/source/img/news/item-1-tablet.webp b/source/img/news/item-1-tablet.webp new file mode 100644 index 00000000..b5a9f52c Binary files /dev/null and b/source/img/news/item-1-tablet.webp differ diff --git a/source/img/news/item-1-tablet@2x.jpg b/source/img/news/item-1-tablet@2x.jpg new file mode 100644 index 00000000..a0b6f929 Binary files /dev/null and b/source/img/news/item-1-tablet@2x.jpg differ diff --git a/source/img/news/item-1-tablet@2x.webp b/source/img/news/item-1-tablet@2x.webp new file mode 100644 index 00000000..5a7952c7 Binary files /dev/null and b/source/img/news/item-1-tablet@2x.webp differ diff --git a/source/img/news/item-2-desktop.jpg b/source/img/news/item-2-desktop.jpg new file mode 100644 index 00000000..d5f9d265 Binary files /dev/null and b/source/img/news/item-2-desktop.jpg differ diff --git a/source/img/news/item-2-desktop.webp b/source/img/news/item-2-desktop.webp new file mode 100644 index 00000000..fcf206db Binary files /dev/null and b/source/img/news/item-2-desktop.webp differ diff --git a/source/img/news/item-2-desktop@2x.jpg b/source/img/news/item-2-desktop@2x.jpg new file mode 100644 index 00000000..fa120bc5 Binary files /dev/null and b/source/img/news/item-2-desktop@2x.jpg differ diff --git a/source/img/news/item-2-desktop@2x.webp b/source/img/news/item-2-desktop@2x.webp new file mode 100644 index 00000000..03438274 Binary files /dev/null and b/source/img/news/item-2-desktop@2x.webp differ diff --git a/source/img/news/item-2-mobile.jpg b/source/img/news/item-2-mobile.jpg new file mode 100644 index 00000000..8f08fe1c Binary files /dev/null and b/source/img/news/item-2-mobile.jpg differ diff --git a/source/img/news/item-2-mobile.webp b/source/img/news/item-2-mobile.webp new file mode 100644 index 00000000..768cdc6f Binary files /dev/null and b/source/img/news/item-2-mobile.webp differ diff --git a/source/img/news/item-2-mobile@2x.jpg b/source/img/news/item-2-mobile@2x.jpg new file mode 100644 index 00000000..08d91372 Binary files /dev/null and b/source/img/news/item-2-mobile@2x.jpg differ diff --git a/source/img/news/item-2-mobile@2x.webp b/source/img/news/item-2-mobile@2x.webp new file mode 100644 index 00000000..b84b1ef0 Binary files /dev/null and b/source/img/news/item-2-mobile@2x.webp differ diff --git a/source/img/news/item-2-tablet.jpg b/source/img/news/item-2-tablet.jpg new file mode 100644 index 00000000..5a0790a1 Binary files /dev/null and b/source/img/news/item-2-tablet.jpg differ diff --git a/source/img/news/item-2-tablet.webp b/source/img/news/item-2-tablet.webp new file mode 100644 index 00000000..486a6f32 Binary files /dev/null and b/source/img/news/item-2-tablet.webp differ diff --git a/source/img/news/item-2-tablet@2x.jpg b/source/img/news/item-2-tablet@2x.jpg new file mode 100644 index 00000000..b6ff3623 Binary files /dev/null and b/source/img/news/item-2-tablet@2x.jpg differ diff --git a/source/img/news/item-2-tablet@2x.webp b/source/img/news/item-2-tablet@2x.webp new file mode 100644 index 00000000..f5b34683 Binary files /dev/null and b/source/img/news/item-2-tablet@2x.webp differ diff --git a/source/img/news/item-3-desktop.jpg b/source/img/news/item-3-desktop.jpg new file mode 100644 index 00000000..51055d66 Binary files /dev/null and b/source/img/news/item-3-desktop.jpg differ diff --git a/source/img/news/item-3-desktop.webp b/source/img/news/item-3-desktop.webp new file mode 100644 index 00000000..10fc48eb Binary files /dev/null and b/source/img/news/item-3-desktop.webp differ diff --git a/source/img/news/item-3-desktop@2x.jpg b/source/img/news/item-3-desktop@2x.jpg new file mode 100644 index 00000000..984ca131 Binary files /dev/null and b/source/img/news/item-3-desktop@2x.jpg differ diff --git a/source/img/news/item-3-desktop@2x.webp b/source/img/news/item-3-desktop@2x.webp new file mode 100644 index 00000000..ee83e3d9 Binary files /dev/null and b/source/img/news/item-3-desktop@2x.webp differ diff --git a/source/img/news/item-3-tablet.jpg b/source/img/news/item-3-tablet.jpg new file mode 100644 index 00000000..5a2e600c Binary files /dev/null and b/source/img/news/item-3-tablet.jpg differ diff --git a/source/img/news/item-3-tablet.webp b/source/img/news/item-3-tablet.webp new file mode 100644 index 00000000..2bb63ccd Binary files /dev/null and b/source/img/news/item-3-tablet.webp differ diff --git a/source/img/news/item-3-tablet@2x.jpg b/source/img/news/item-3-tablet@2x.jpg new file mode 100644 index 00000000..2e794f77 Binary files /dev/null and b/source/img/news/item-3-tablet@2x.jpg differ diff --git a/source/img/news/item-3-tablet@2x.webp b/source/img/news/item-3-tablet@2x.webp new file mode 100644 index 00000000..aec1bda6 Binary files /dev/null and b/source/img/news/item-3-tablet@2x.webp differ diff --git a/source/img/news/item-4-desktop.jpg b/source/img/news/item-4-desktop.jpg new file mode 100644 index 00000000..a8a03d5f Binary files /dev/null and b/source/img/news/item-4-desktop.jpg differ diff --git a/source/img/news/item-4-desktop.webp b/source/img/news/item-4-desktop.webp new file mode 100644 index 00000000..beb9100c Binary files /dev/null and b/source/img/news/item-4-desktop.webp differ diff --git a/source/img/news/item-4-desktop@2x.jpg b/source/img/news/item-4-desktop@2x.jpg new file mode 100644 index 00000000..aa7024f7 Binary files /dev/null and b/source/img/news/item-4-desktop@2x.jpg differ diff --git a/source/img/news/item-4-desktop@2x.webp b/source/img/news/item-4-desktop@2x.webp new file mode 100644 index 00000000..88292e6c Binary files /dev/null and b/source/img/news/item-4-desktop@2x.webp differ diff --git a/source/img/news/item-4-tablet.jpg b/source/img/news/item-4-tablet.jpg new file mode 100644 index 00000000..1093857e Binary files /dev/null and b/source/img/news/item-4-tablet.jpg differ diff --git a/source/img/news/item-4-tablet.webp b/source/img/news/item-4-tablet.webp new file mode 100644 index 00000000..ade1e9da Binary files /dev/null and b/source/img/news/item-4-tablet.webp differ diff --git a/source/img/news/item-4-tablet@2x.jpg b/source/img/news/item-4-tablet@2x.jpg new file mode 100644 index 00000000..7075da4e Binary files /dev/null and b/source/img/news/item-4-tablet@2x.jpg differ diff --git a/source/img/news/item-4-tablet@2x.webp b/source/img/news/item-4-tablet@2x.webp new file mode 100644 index 00000000..3f197633 Binary files /dev/null and b/source/img/news/item-4-tablet@2x.webp differ diff --git a/source/img/programs/item-1-desktop.jpg b/source/img/programs/item-1-desktop.jpg new file mode 100644 index 00000000..c3764271 Binary files /dev/null and b/source/img/programs/item-1-desktop.jpg differ diff --git a/source/img/programs/item-1-desktop.webp b/source/img/programs/item-1-desktop.webp new file mode 100644 index 00000000..844c75d4 Binary files /dev/null and b/source/img/programs/item-1-desktop.webp differ diff --git a/source/img/programs/item-1-desktop@2x.jpg b/source/img/programs/item-1-desktop@2x.jpg new file mode 100644 index 00000000..59befeba Binary files /dev/null and b/source/img/programs/item-1-desktop@2x.jpg differ diff --git a/source/img/programs/item-1-desktop@2x.webp b/source/img/programs/item-1-desktop@2x.webp new file mode 100644 index 00000000..8182f54a Binary files /dev/null and b/source/img/programs/item-1-desktop@2x.webp differ diff --git a/source/img/programs/item-1-mobile.jpg b/source/img/programs/item-1-mobile.jpg new file mode 100644 index 00000000..cfe12da3 Binary files /dev/null and b/source/img/programs/item-1-mobile.jpg differ diff --git a/source/img/programs/item-1-mobile.webp b/source/img/programs/item-1-mobile.webp new file mode 100644 index 00000000..4bbd3498 Binary files /dev/null and b/source/img/programs/item-1-mobile.webp differ diff --git a/source/img/programs/item-1-mobile@2x.jpg b/source/img/programs/item-1-mobile@2x.jpg new file mode 100644 index 00000000..177136c5 Binary files /dev/null and b/source/img/programs/item-1-mobile@2x.jpg differ diff --git a/source/img/programs/item-1-mobile@2x.webp b/source/img/programs/item-1-mobile@2x.webp new file mode 100644 index 00000000..629ecbdf Binary files /dev/null and b/source/img/programs/item-1-mobile@2x.webp differ diff --git a/source/img/programs/item-1-tablet.jpg b/source/img/programs/item-1-tablet.jpg new file mode 100644 index 00000000..888dc294 Binary files /dev/null and b/source/img/programs/item-1-tablet.jpg differ diff --git a/source/img/programs/item-1-tablet.webp b/source/img/programs/item-1-tablet.webp new file mode 100644 index 00000000..9b95f8ee Binary files /dev/null and b/source/img/programs/item-1-tablet.webp differ diff --git a/source/img/programs/item-1-tablet@2x.jpg b/source/img/programs/item-1-tablet@2x.jpg new file mode 100644 index 00000000..9371cacc Binary files /dev/null and b/source/img/programs/item-1-tablet@2x.jpg differ diff --git a/source/img/programs/item-1-tablet@2x.webp b/source/img/programs/item-1-tablet@2x.webp new file mode 100644 index 00000000..4d7d0f22 Binary files /dev/null and b/source/img/programs/item-1-tablet@2x.webp differ diff --git a/source/img/programs/item-2-desktop.jpg b/source/img/programs/item-2-desktop.jpg new file mode 100644 index 00000000..8292cc03 Binary files /dev/null and b/source/img/programs/item-2-desktop.jpg differ diff --git a/source/img/programs/item-2-desktop.webp b/source/img/programs/item-2-desktop.webp new file mode 100644 index 00000000..fd9f7bac Binary files /dev/null and b/source/img/programs/item-2-desktop.webp differ diff --git a/source/img/programs/item-2-desktop@2x.jpg b/source/img/programs/item-2-desktop@2x.jpg new file mode 100644 index 00000000..792532b9 Binary files /dev/null and b/source/img/programs/item-2-desktop@2x.jpg differ diff --git a/source/img/programs/item-2-desktop@2x.webp b/source/img/programs/item-2-desktop@2x.webp new file mode 100644 index 00000000..9c2c44cf Binary files /dev/null and b/source/img/programs/item-2-desktop@2x.webp differ diff --git a/source/img/programs/item-2-mobile.jpg b/source/img/programs/item-2-mobile.jpg new file mode 100644 index 00000000..6c568779 Binary files /dev/null and b/source/img/programs/item-2-mobile.jpg differ diff --git a/source/img/programs/item-2-mobile.webp b/source/img/programs/item-2-mobile.webp new file mode 100644 index 00000000..197edbd3 Binary files /dev/null and b/source/img/programs/item-2-mobile.webp differ diff --git a/source/img/programs/item-2-mobile@2x.jpg b/source/img/programs/item-2-mobile@2x.jpg new file mode 100644 index 00000000..0c07124c Binary files /dev/null and b/source/img/programs/item-2-mobile@2x.jpg differ diff --git a/source/img/programs/item-2-mobile@2x.webp b/source/img/programs/item-2-mobile@2x.webp new file mode 100644 index 00000000..12541466 Binary files /dev/null and b/source/img/programs/item-2-mobile@2x.webp differ diff --git a/source/img/programs/item-2-tablet.jpg b/source/img/programs/item-2-tablet.jpg new file mode 100644 index 00000000..dc80c303 Binary files /dev/null and b/source/img/programs/item-2-tablet.jpg differ diff --git a/source/img/programs/item-2-tablet.webp b/source/img/programs/item-2-tablet.webp new file mode 100644 index 00000000..50ed2831 Binary files /dev/null and b/source/img/programs/item-2-tablet.webp differ diff --git a/source/img/programs/item-2-tablet@2x.jpg b/source/img/programs/item-2-tablet@2x.jpg new file mode 100644 index 00000000..f7a81d78 Binary files /dev/null and b/source/img/programs/item-2-tablet@2x.jpg differ diff --git a/source/img/programs/item-2-tablet@2x.webp b/source/img/programs/item-2-tablet@2x.webp new file mode 100644 index 00000000..9278e279 Binary files /dev/null and b/source/img/programs/item-2-tablet@2x.webp differ diff --git a/source/img/programs/item-3-desktop.jpg b/source/img/programs/item-3-desktop.jpg new file mode 100644 index 00000000..a2f45ef2 Binary files /dev/null and b/source/img/programs/item-3-desktop.jpg differ diff --git a/source/img/programs/item-3-desktop.webp b/source/img/programs/item-3-desktop.webp new file mode 100644 index 00000000..7fc58db4 Binary files /dev/null and b/source/img/programs/item-3-desktop.webp differ diff --git a/source/img/programs/item-3-desktop@2x.jpg b/source/img/programs/item-3-desktop@2x.jpg new file mode 100644 index 00000000..5a8df3d9 Binary files /dev/null and b/source/img/programs/item-3-desktop@2x.jpg differ diff --git a/source/img/programs/item-3-desktop@2x.webp b/source/img/programs/item-3-desktop@2x.webp new file mode 100644 index 00000000..bb7d67a0 Binary files /dev/null and b/source/img/programs/item-3-desktop@2x.webp differ diff --git a/source/img/programs/item-3-mobile.jpg b/source/img/programs/item-3-mobile.jpg new file mode 100644 index 00000000..e73ec4e2 Binary files /dev/null and b/source/img/programs/item-3-mobile.jpg differ diff --git a/source/img/programs/item-3-mobile.webp b/source/img/programs/item-3-mobile.webp new file mode 100644 index 00000000..07382441 Binary files /dev/null and b/source/img/programs/item-3-mobile.webp differ diff --git a/source/img/programs/item-3-mobile@2x.jpg b/source/img/programs/item-3-mobile@2x.jpg new file mode 100644 index 00000000..11f0c02a Binary files /dev/null and b/source/img/programs/item-3-mobile@2x.jpg differ diff --git a/source/img/programs/item-3-mobile@2x.webp b/source/img/programs/item-3-mobile@2x.webp new file mode 100644 index 00000000..84cebaff Binary files /dev/null and b/source/img/programs/item-3-mobile@2x.webp differ diff --git a/source/img/programs/item-3-tablet.jpg b/source/img/programs/item-3-tablet.jpg new file mode 100644 index 00000000..a473e973 Binary files /dev/null and b/source/img/programs/item-3-tablet.jpg differ diff --git a/source/img/programs/item-3-tablet.webp b/source/img/programs/item-3-tablet.webp new file mode 100644 index 00000000..72ea4092 Binary files /dev/null and b/source/img/programs/item-3-tablet.webp differ diff --git a/source/img/programs/item-3-tablet@2x.jpg b/source/img/programs/item-3-tablet@2x.jpg new file mode 100644 index 00000000..c7f48e99 Binary files /dev/null and b/source/img/programs/item-3-tablet@2x.jpg differ diff --git a/source/img/programs/item-3-tablet@2x.webp b/source/img/programs/item-3-tablet@2x.webp new file mode 100644 index 00000000..4033cecb Binary files /dev/null and b/source/img/programs/item-3-tablet@2x.webp differ diff --git a/source/img/reviews/avatar-1.jpg b/source/img/reviews/avatar-1.jpg new file mode 100644 index 00000000..38d902d7 Binary files /dev/null and b/source/img/reviews/avatar-1.jpg differ diff --git a/source/img/reviews/avatar-1.webp b/source/img/reviews/avatar-1.webp new file mode 100644 index 00000000..5428f25f Binary files /dev/null and b/source/img/reviews/avatar-1.webp differ diff --git a/source/img/reviews/avatar-1@2x.jpg b/source/img/reviews/avatar-1@2x.jpg new file mode 100644 index 00000000..d271ab31 Binary files /dev/null and b/source/img/reviews/avatar-1@2x.jpg differ diff --git a/source/img/reviews/avatar-1@2x.webp b/source/img/reviews/avatar-1@2x.webp new file mode 100644 index 00000000..a685715c Binary files /dev/null and b/source/img/reviews/avatar-1@2x.webp differ diff --git a/source/img/reviews/avatar-2.jpg b/source/img/reviews/avatar-2.jpg new file mode 100644 index 00000000..adc7480c Binary files /dev/null and b/source/img/reviews/avatar-2.jpg differ diff --git a/source/img/reviews/avatar-2.webp b/source/img/reviews/avatar-2.webp new file mode 100644 index 00000000..a0ebf3fd Binary files /dev/null and b/source/img/reviews/avatar-2.webp differ diff --git a/source/img/reviews/avatar-2@2x.jpg b/source/img/reviews/avatar-2@2x.jpg new file mode 100644 index 00000000..ea6bea85 Binary files /dev/null and b/source/img/reviews/avatar-2@2x.jpg differ diff --git a/source/img/reviews/avatar-2@2x.webp b/source/img/reviews/avatar-2@2x.webp new file mode 100644 index 00000000..e78b2215 Binary files /dev/null and b/source/img/reviews/avatar-2@2x.webp differ diff --git a/source/img/sprite/icon-btn-arrow.svg b/source/img/sprite/icon-btn-arrow.svg new file mode 100644 index 00000000..946be07f --- /dev/null +++ b/source/img/sprite/icon-btn-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-checked.svg b/source/img/sprite/icon-checked.svg new file mode 100644 index 00000000..d126b427 --- /dev/null +++ b/source/img/sprite/icon-checked.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-corner.svg b/source/img/sprite/icon-corner.svg new file mode 100644 index 00000000..4edfebd2 --- /dev/null +++ b/source/img/sprite/icon-corner.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-cross.svg b/source/img/sprite/icon-cross.svg new file mode 100644 index 00000000..d0002056 --- /dev/null +++ b/source/img/sprite/icon-cross.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-menu.svg b/source/img/sprite/icon-menu.svg new file mode 100644 index 00000000..414f28c9 --- /dev/null +++ b/source/img/sprite/icon-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-minus.svg b/source/img/sprite/icon-minus.svg new file mode 100644 index 00000000..7002147e --- /dev/null +++ b/source/img/sprite/icon-minus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-ok.svg b/source/img/sprite/icon-ok.svg new file mode 100644 index 00000000..a46e69d7 --- /dev/null +++ b/source/img/sprite/icon-ok.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-pin.svg b/source/img/sprite/icon-pin.svg new file mode 100644 index 00000000..fa97686e --- /dev/null +++ b/source/img/sprite/icon-pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-plus.svg b/source/img/sprite/icon-plus.svg new file mode 100644 index 00000000..4da54c79 --- /dev/null +++ b/source/img/sprite/icon-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-reddit.svg b/source/img/sprite/icon-reddit.svg new file mode 100644 index 00000000..3f06a479 --- /dev/null +++ b/source/img/sprite/icon-reddit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-select-arrow.svg b/source/img/sprite/icon-select-arrow.svg new file mode 100644 index 00000000..e5dad488 --- /dev/null +++ b/source/img/sprite/icon-select-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-slider-arrow.svg b/source/img/sprite/icon-slider-arrow.svg new file mode 100644 index 00000000..ae485188 --- /dev/null +++ b/source/img/sprite/icon-slider-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-star.svg b/source/img/sprite/icon-star.svg new file mode 100644 index 00000000..76e51ffe --- /dev/null +++ b/source/img/sprite/icon-star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/icon-vk.svg b/source/img/sprite/icon-vk.svg new file mode 100644 index 00000000..05a1338b --- /dev/null +++ b/source/img/sprite/icon-vk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/img/sprite/logo.svg b/source/img/sprite/logo.svg deleted file mode 100644 index aee2e13c..00000000 --- a/source/img/sprite/logo.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/source/img/sprite/user.svg b/source/img/sprite/user.svg deleted file mode 100644 index 6873ae6e..00000000 --- a/source/img/sprite/user.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/source/img/svg/logo.svg b/source/img/svg/logo.svg new file mode 100644 index 00000000..a8fc29e4 --- /dev/null +++ b/source/img/svg/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/index.html b/source/index.html index 72717790..756df57d 100644 --- a/source/index.html +++ b/source/index.html @@ -1,31 +1,542 @@ - - - - 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х месяцев + подряд непрерывно в одной стране

    +
    • +
+
+
+
+
+
news
+
FAQ
+
reviews
+
+
+
+
+

Контакты

+
+
+ центральный офис + г. Новосибирск, ул. Щетинкина + 68, + культурный центр +
+
+ Телефон + +7 963 876 876 + 76 +
+ +
+
+
+ + + + + + + + + + г. Новосибирск, ул. Щетинкина 68, культурный центр. + +
+
+
+
+
form
+ +
+ + diff --git a/source/js/main.js b/source/js/main.js index 70fde252..cc227938 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,4 +1,14 @@ -// https://swiperjs.com/get-started#installation -// import Swiper from "swiper"; -// import {Navigation, Pagination} from "swiper/modules"; -// import 'swiper/css'; +import { lazyLoadImages } from '../js/modules/utils/utils'; +import { initBurgerMenu } from '../js/modules/burger-menu'; +import { initHeroSlider } from '../js/modules/sliders/hero-slider'; +import { initProgramsSlider } from '../js/modules/sliders/programs-slider'; + +window.addEventListener('DOMContentLoaded', () => { + lazyLoadImages(); + initBurgerMenu(); + initHeroSlider(); + initProgramsSlider(); + + window.addEventListener('load', () => { + }); +}); diff --git a/source/js/modules/burger-menu.js b/source/js/modules/burger-menu.js new file mode 100644 index 00000000..64a455b9 --- /dev/null +++ b/source/js/modules/burger-menu.js @@ -0,0 +1,61 @@ +const initBurgerMenu = () => { + const burgerButton = document.querySelector('[data-element="nav__button"]'); + const menu = document.querySelector('[data-element="menu"]'); + // const body = document.body; + // const overlay = document.querySelector('.overlay'); + + // const setMenuTabIndex = (index) => { + // const menuLinks = menu.querySelectorAll('a'); + // menuLinks.forEach((link) => { + // link.tabIndex = index; + // }); + // }; + + const toggleMenu = () => { + burgerButton.classList.toggle('is-open'); + // const isOpen = burgerButton.classList.toggle('is-open'); + menu.classList.toggle('is-open'); + // body.classList.toggle('no-scroll'); + // overlay.classList.toggle('is-visible'); + // setMenuTabIndex(isOpen ? 0 : -1); + }; + + const closeMenu = () => { + burgerButton.classList.remove('is-open'); + menu.classList.remove('is-open'); + // body.classList.remove('no-scroll'); + // overlay.classList.remove('is-visible'); + // setMenuTabIndex(-1); + }; + + burgerButton.addEventListener('click', () => { + toggleMenu(); + }); + + menu.addEventListener('click', (event) => { + const target = event.target; + const submenu = target.nextElementSibling; + + if (target.tagName === 'A' && submenu && submenu.classList.contains('nav__submenu-list')) { + target.classList.toggle('is-open'); + // const isOpen = target.classList.toggle('is-open'); + event.preventDefault(); + submenu.classList.toggle('is-open'); + // setMenuTabIndex(isOpen ? 0 : -1); + } else if (target.tagName === 'A') { + closeMenu(); + } + }); + + // overlay.addEventListener('click', closeMenu); + + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape') { + closeMenu(); + } + }); + + // setMenuTabIndex(-1); +}; + +export { initBurgerMenu }; diff --git a/source/js/modules/sliders/hero-slider.js b/source/js/modules/sliders/hero-slider.js new file mode 100644 index 00000000..f6f914f9 --- /dev/null +++ b/source/js/modules/sliders/hero-slider.js @@ -0,0 +1,109 @@ +import Swiper from 'swiper'; +import { Pagination } from 'swiper/modules'; +import 'swiper/css'; +import 'swiper/css/pagination'; + +const initHeroSlider = () => { + if (!document.querySelector('[data-slider="hero-slider"]')) { + return; + } + + const heroSlider = document.querySelector('[data-slider="hero-slider"]'); + let isFirstLoad = true; + + const initActiveSlide = () => { + const activeSlide = document.querySelector('.swiper-slide-active'); + if (!activeSlide) { + return; + } + + const allSlides = document.querySelectorAll('.hero-slide'); + allSlides.forEach((slide) => { + slide.querySelectorAll('a').forEach((slideLink) => { + slideLink.setAttribute('tabindex', '-1'); + }); + }); + + activeSlide.querySelectorAll('a').forEach((slideLink) => { + slideLink.setAttribute('tabindex', '0'); + }); + }; + + const setActiveLink = () => { + if (isFirstLoad) { + return; + } + + setTimeout(() => { + const activeSlide = document.querySelector('.swiper-slide-active'); + if (activeSlide) { + const slideLink = activeSlide.querySelector('a'); + if (slideLink) { + slideLink.focus(); + } + } + }, 200); + }; + + const addAriaAttributesToBullets = () => { + const bullets = document.querySelectorAll('.hero__slider-bullet'); + bullets.forEach((bullet, index) => { + bullet.setAttribute('role', 'button'); + bullet.setAttribute('aria-label', `слайд №${index + 1}`); + }); + }; + + new Swiper(heroSlider, { + modules: [Pagination], + watchOverflow: true, + grabCursor: false, + simulateTouch: false, + speed: 500, + loop: true, + slidesPerView: 1, + autoHeight: true, + pagination: { + el: '.hero__slider-pagination', + clickable: true, + bulletElement: 'button type="button"', + bulletClass: 'hero__slider-bullet', + bulletActiveClass: 'hero__slider-bullet--is-active', + }, + on: { + init: () => { + initActiveSlide(); + addAriaAttributesToBullets(); + isFirstLoad = false; + }, + slideChange: () => { + initActiveSlide(); + setActiveLink(); + }, + slideChangeTransitionStart: () => { + initActiveSlide(); + }, + }, + breakpoints: { + 320: { + pagination: { + clickable: false, + grabCursor: true, + simulateTouch: true, + }, + }, + 768: { + pagination: { + clickable: false, + grabCursor: true, + simulateTouch: true, + }, + }, + 1440: { + allowTouchMove: false, + clickable: true, + } + }, + }); +}; + +export { initHeroSlider }; diff --git a/source/js/modules/sliders/programs-slider.js b/source/js/modules/sliders/programs-slider.js new file mode 100644 index 00000000..c571b271 --- /dev/null +++ b/source/js/modules/sliders/programs-slider.js @@ -0,0 +1,60 @@ +import Swiper from 'swiper'; +import { Navigation, Scrollbar } from 'swiper/modules'; +import 'swiper/css'; +// import 'swiper/css/scrollbar'; + +const initProgramsSlider = () => { + const programsSlider = document.querySelector('[data-slider="programs-slider"]'); + if (!programsSlider) { + return; + } + + new Swiper(programsSlider, { + modules: [Navigation, Scrollbar], + navigation: { + nextEl: '.programs__slider-btn--next', + prevEl: '.programs__slider-btn--prev', + disabledClass: 'is-disabled', + }, + scrollbar: { + el: '.programs__scrollbar', + horizontalClass: 'slider__scrollbar', + draggable: true, + dragClass: 'slider__drag-element', + dragSize: '394px', + }, + watchOverflow: false, + simulateTouch: false, + grabCursor: false, + speed: 500, + loop: false, + slidesPerView: 3, + spaceBetween: 32, + breakpoints: { + 320: { + slidesPerView: 1, + scrollbar: { + enabled: false, + }, + }, + 768: { + slidesPerView: 2.12, + spaceBetween: 30, + scrollbar: { + enabled: true, + dragSize: '326px', + }, + }, + 1440: { + allowTouchMove: false, + slidesPerView: 3, + spaceBetween: 32, + scrollbar: { + enabled: true, + }, + } + }, + }); +}; + +export { initProgramsSlider }; diff --git a/source/js/modules/utils/utils.js b/source/js/modules/utils/utils.js new file mode 100644 index 00000000..f7e4fbc5 --- /dev/null +++ b/source/js/modules/utils/utils.js @@ -0,0 +1,12 @@ +const lazyLoadImages = () => { + if (document.querySelectorAll('img')) { + const images = document.querySelectorAll('img'); + images.forEach((image, index) => { + if (index !== 0) { + image.setAttribute('loading', 'lazy'); + } + }); + } +}; + +export { lazyLoadImages }; diff --git a/source/sass/blocks/about.scss b/source/sass/blocks/about.scss new file mode 100644 index 00000000..796f08ab --- /dev/null +++ b/source/sass/blocks/about.scss @@ -0,0 +1,281 @@ +.about { + padding-top: 70px; + padding-bottom: 70px; + background-color: $color-white-alternative; + + @include vp-1439 { + padding-top: 50px; + padding-bottom: 50px; + } +} + +.about__top { + display: flex; + justify-content: space-between; + align-items: flex-start; + column-gap: 40px; + margin-bottom: 60px; + + @include vp-1439 { + flex-direction: column; + justify-content: flex-start; + } + + @include vp-767 { + margin-bottom: 40px; + } +} + +.about__col { + &--main { + width: 100%; + max-width: 702px; + + @include vp-1439 { + max-width: none; + margin-bottom: 40px; + } + } + + &--target { + width: 100%; + max-width: 498px; + + @include vp-1439 { + max-width: 498px; + } + + @include vp-767 { + max-width: none; + } + } +} + +.about__title { + margin-bottom: 30px; + + @include vp-767 { + margin-bottom: 15px; + // margin-left: 1px; + } +} + +.about__col--main p { + margin: 0; + color: $color-dark; + font-size: 22px; + font-weight: 400; + line-height: 32px; + + @include vp-1439 { + font-size: 20px; + line-height: 26px; + } + + @include vp-767 { + font-size: 16px; + line-height: 22px; + } +} + +.about__col--target h3 { + margin: 0; + margin-bottom: 40px; + color: $color-action; + font-size: 32px; + line-height: 36px; + font-weight: 400; + + @include vp-1439 { + margin-bottom: 30px; + font-size: 28px; + line-height: 28px; + } + + @include vp-767 { + margin-bottom: 20px; + font-size: 18px; + line-height: 22px; + } +} + +.about__col--target p { + margin: 0; + margin-bottom: 50px; + color: $color-dark; + font-size: 16px; + line-height: 26px; + font-weight: 400; + + @include vp-1439 { + margin-bottom: 40px; + line-height: 20px; + } + + @include vp-767 { + margin-bottom: 30px; + font-size: 14px; + } +} + +.about__link { + min-width: 279px; + + @include vp-767 { + min-width: 223px; + } +} + +.about__bottom { + background-color: $color-action; + border-radius: 20px; + padding-top: 50px; + padding-bottom: 50px; + padding-left: 100px; + padding-right: 100px; + + @include vp-1439 { + padding: 50px; + } + + @include vp-767 { + padding: 0; + padding-top: 20px; + padding-bottom: 40px; + padding-right: 20px; + } +} + +.about__list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + column-gap: 32px; + row-gap: 32px; + + @include vp-767 { + flex-direction: column; + column-gap: 0; + row-gap: 0; + } +} + +.about__list li { + width: 100%; + max-width: 504px; + padding-left: 20px; + padding-top: 22px; + display: flex; + position: relative; + mask-repeat: no-repeat; + mask-position: center; + + &::before { + position: absolute; + content: ""; + width: 42px; + height: 42px; + top: 0; + left: 0; + background-color: $color-action; + } + + &::after { + position: absolute; + content: ""; + background-color: $color-white; + width: 18px; + height: 22px; + top: 10px; + left: 12px; + mask-image: url("../__spritemap#sprite-icon-star-view"); + mask-size: 18px 22px; + } + + @include vp-1439 { + max-width: 273px; + } + + @include vp-767 { + max-width: 270px; + } +} + +.about__item { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 30px; + padding-bottom: 30px; + padding-left: 40px; + padding-right: 40px; + border-radius: 16px; + border: 1px solid $color-white-alternative; + + @include vp-1439 { + padding: 0; + padding-top: 15px; + padding-bottom: 15px; + padding-left: 20px; + padding-right: 20px; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + row-gap: 15px; + } + + @include vp-767 {} +} + +.about__item h4 { + margin: 0; + width: 100%; + max-width: 201px; + color: $color-white; + font-size: 26px; + line-height: 30px; + font-weight: 400; + letter-spacing: 0.26px; + text-transform: uppercase; + + @include vp-1439 { + font-size: 20px; + line-height: 22px; + letter-spacing: 0.2px; + } + + @include vp-767 { + max-width: none; + font-size: 16px; + line-height: 20px; + letter-spacing: 0.16px; + } +} + +.about__item p { + margin: 0; + width: 100%; + max-width: 201px; + color: $color-white-alternative; + font-size: 16px; + line-height: 20px; + font-weight: 300; + + @include vp-1439 { + max-width: 211px; + } + + @include vp-767 { + font-size: 14px; + } +} + +.about__item br { + @include vp-1440 { + display: none; + } +} diff --git a/source/sass/blocks/btn.scss b/source/sass/blocks/btn.scss new file mode 100644 index 00000000..2bdf1460 --- /dev/null +++ b/source/sass/blocks/btn.scss @@ -0,0 +1,227 @@ +.btn { + border-radius: 30px; + min-height: 56px; + border: 1px solid $color-action; + background-color: $color-transparent; + text-decoration: none; + display: inline-flex; + justify-content: space-between; + align-items: center; + transition: background-color $trans-default; + + &--menu { + cursor: pointer; + background-color: $color-white; + min-width: 136px; + padding: 4px; + padding-left: 20px; + position: relative; + z-index: 2; + transition: background-color $trans-default, min-width $trans-default; + + @include vp-767 { + padding-top: 3px; + padding-bottom: 3px; + min-height: 54px; + } + } + + &--link { + padding: 4px; + padding-left: 30px; + min-width: 199px; + + @include vp-1439 { + min-width: 198px; + padding: 4px; + padding-left: 30px; + } + + @include vp-767 { + min-width: 154px; + padding-left: 20px; + } + } + + &--form { + border-color: $color-white; + } + + &--on-light {} + + &--on-dark {} + + @include vp-767 { + min-height: 44px; + } +} + +// .btn--link { +// &:focus { +// outline: none; +// } + +// &:focus-visible { +// outline: none; +// } + +// &:hover:not(.disabled):not(:focus-visible):not(:active) { +// } + +// &:active { +// } +// } + +.btn b { + font-size: 14px; + font-weight: 500; + line-height: 14px; + letter-spacing: 0.28px; + text-align: center; + text-transform: uppercase; + // margin-right: 29px; + color: $color-action; + transition: color $trans-default; +} + +// .btn--menu b { +// margin-right: 20px; +// } + +.btn--link b { + @include vp-767 { + font-size: 12px; + line-height: 12px; + letter-spacing: 0.24px; + } +} + +.btn--form b { + color: $color-white; +} + +.btn span { + background-color: $color-action; + border-radius: 50%; + width: 46px; + height: 46px; + position: relative; + transition: background-color $trans-default; + + &::after { + position: absolute; + content: ""; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + mask-repeat: no-repeat; + mask-position: center; + background-color: $color-white; + transition: background-color $trans-default; + } +} + +.btn--link span { + @include vp-767 { + width: 34px; + height: 34px; + } +} + +.btn--form span { + background-color: $color-white; +} + +.btn--form span::after { + background-color: $color-action; +} + +.btn--link span::after, +.btn--form span::after { + width: 8px; + height: 8px; + mask-image: url("../__spritemap#sprite-icon-btn-arrow-view"); + mask-size: 8px 8px; +} + +.btn--menu span::after { + width: 16px; + height: 8px; + mask-image: url("../__spritemap#sprite-icon-menu-view"); + mask-size: 14.4px 6.4px; +} + +.is-open.btn--menu { + background-color: $color-action; + min-width: 286px; + transition: background-color $trans-default, min-width $trans-default; +} + +.is-open.btn--menu b { + color: $color-white; + transition: color $trans-default; +} + +.is-open.btn--menu span { + background-color: $color-white; + transition: background-color $trans-default; + + &::after { + background-color: $color-action; + width: 20px; + height: 20px; + mask-image: url("../__spritemap#sprite-icon-cross-view"); + mask-size: 16px 16px; + transition: background-color $trans-default; + } +} + +.btn--link:hover:not(.disabled):not(:focus-visible):not(:active) { + background-color: $color-action; + transition: background-color $trans-default; +} + +.btn--link:active { + background-color: $color-action; + transition: background-color $trans-default, opacity $trans-default; + opacity: 0.7; +} + +.btn--link:focus span::after, +.btn--link:focus-visible span::after { + transform: rotate(45deg) translateX(-4px); + transform-origin: center center; +} + +.btn--link.disabled { + pointer-events: none; + border-color: $color-disabled; +} + +.btn--link.disabled b { + color: $color-disabled; +} + +.btn--link.disabled span { + background-color: $color-disabled; +} + +.btn--link:hover:not(.disabled):not(:focus-visible):not(:active) b, +.btn--link:active b { + color: $color-white; + transition: color $trans-default; +} + +.btn--link:hover:not(.disabled):not(:focus-visible):not(:active) span, +.btn--link:active span { + background-color: $color-white; + transition: background-color $trans-default; +} + +.btn--link:hover:not(.disabled):not(:focus-visible):not(:active) span::after, +.btn--link:active span::after { + background-color: $color-action; + transform: rotate(45deg) translateX(-4px); + transform-origin: center center; + transition: background-color $trans-default; +} diff --git a/source/sass/blocks/burger.scss b/source/sass/blocks/burger.scss new file mode 100644 index 00000000..706eaf2b --- /dev/null +++ b/source/sass/blocks/burger.scss @@ -0,0 +1,161 @@ +.nav { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.nav__button {} + +.nav__menu { + margin-top: 4px; + background-color: $color-action; + min-width: 286px; + border-radius: 16px; + padding: 35px 25px; + // transform: scale(0); + // transform-origin: top right; + // transition: transform $trans-default; + opacity: 0; + transform: translateY(-100px); + visibility: hidden; + transition: opacity $trans-default, transform $trans-default, visibility $trans-default; +} + +.nav__menu.is-open { + // transform: scale(1); + // transform-origin: top right; + // transition: transform $trans-default; + opacity: 1; + transform: translateY(0); + visibility: visible; + transition: opacity $trans-default, transform $trans-default, visibility $trans-default; +} + +.nav__menu-list { + display: flex; + flex-direction: column; + row-gap: 28px; + font-size: 0; + line-height: 0; +} + +.has-submenu { + position: relative; + padding-right: 22px; + + &::after { + position: absolute; + content: ""; + top: 0; + right: 0; + width: 12px; + height: 12px; + mask-repeat: no-repeat; + mask-position: center; + background-color: $color-white; + mask-image: url("../__spritemap#sprite-icon-select-arrow-view"); + mask-size: 10.91px 4.91px; + transition: transform $trans-default; + } +} + +.has-submenu.is-open { + &::after { + transform: rotate(180deg); + transition: transform $trans-default; + } +} + +.nav__menu-list li, +.nav__submenu-list li { + font-size: 16px; + line-height: 16px; +} + +.nav__menu-list a:not(.nav__submenu-list a) { + font-weight: 500; + letter-spacing: 0.02em; + text-decoration: none; + text-transform: uppercase; + color: rgba($color-white, 0.7); + transition: color $trans-default; + + &:focus { + color: rgba($color-white, 1); + transition: color $trans-default; + } + + &:focus-visible { + color: rgba($color-white, 1); + transition: color $trans-default; + } + + &:hover:not(.disabled):not(:focus-visible):not(:active) { + color: rgba($color-white, 1); + transition: color $trans-default; + } + + &:active { + color: rgba($color-white, 1); + transition: color $trans-default; + } +} + +.nav__menu-list a.is-active:not(.nav__submenu-list a):not(.nav__submenu-list a.is-active) { + color: rgba($color-white, 1); +} + +.nav__menu-list, +.nav__submenu-list { + margin: 0; + padding: 0; + list-style-type: none; +} + +.nav__submenu-list { + max-height: 0; + opacity: 0; + overflow: hidden; + transition: max-height $trans-default, opacity $trans-default; +} + +.nav__submenu-list.is-open { + display: flex; + flex-direction: column; + row-gap: 16px; + padding-top: 20px; + max-height: none; + opacity: 1; + transition: max-height $trans-default, opacity $trans-default; +} + +.nav__submenu-list a { + font-weight: 400; + text-decoration: none; + color: rgba($color-white, 0.6); + transition: color $trans-default; + + &:focus { + color: rgba($color-white, 1); + transition: color $trans-default; + } + + &:focus-visible { + color: rgba($color-white, 1); + transition: color $trans-default; + } + + &:hover:not(.disabled):not(:focus-visible):not(:active) { + color: rgba($color-white, 1); + transition: color $trans-default; + } + + &:active { + color: rgba($color-white, 1); + transition: color $trans-default; + } +} + +.nav__submenu-list a.is-active { + color: rgba($color-white, 0.9); +} diff --git a/source/sass/blocks/contacts.scss b/source/sass/blocks/contacts.scss new file mode 100644 index 00000000..70e48bd3 --- /dev/null +++ b/source/sass/blocks/contacts.scss @@ -0,0 +1,125 @@ +.contacts { + padding-top: 120px; + padding-bottom: 120px; + background-color: $color-action; + + @include vp-1439 { + padding-top: 100px; + padding-bottom: 100px; + } + + @include vp-767 { + padding-top: 70px; + padding-bottom: 70px; + } +} + +.contacts__head { + display: flex; + align-items: flex-start; + padding-bottom: 40px; + margin-bottom: 40px; + border-bottom: 2px solid rgba($color-white, 0.2); + + @include vp-1439 { + flex-wrap: wrap; + row-gap: 30px; + column-gap: 20px; + padding-bottom: 30px; + margin-bottom: 30px; + } + + @include vp-767 { + flex-direction: column; + flex-wrap: nowrap; + row-gap: 20px; + column-gap: 0; + } +} + +.contacts__col:not(:first-of-type) { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-left: 52px; + + @include vp-1439 { + margin-left: 0; + } +} + +.contacts__col--title { + margin-right: auto; + + @include vp-1439 { + margin-right: 0; + width: 100%; + } + + @include vp-767 { + padding-top: 5px; + padding-bottom: 5px; + margin-bottom: 10px; + } +} + +.contacts__title { + color: $color-white; +} + +.contacts__col--address { + width: 100%; + max-width: 263px; + + @include vp-1439 { + max-width: 401px; + } +} + +.contacts__col--address b, +.contacts__col--phone b, +.contacts__col--email b { + margin-bottom: 24px; + font-size: 12px; + line-height: 12px; + font-weight: 400; + letter-spacing: 0.12px; + color: rgba($color-white-alternative, 0.8); + text-transform: uppercase; + + @include vp-767 { + margin-bottom: 15px; + } +} + +.contacts__col--address span { + font-size: 16px; + line-height: 26px; + font-weight: 400; + color: $color-white; + + @include vp-1439 { + line-height: 20px; + } + + @include vp-767 { + font-size: 14px; + } +} + +.contacts__col--phone a, +.contacts__col--email a { + font-size: 16px; + line-height: 17px; + font-weight: 400; + text-decoration: none; + color: $color-white; + + @include vp-1439 { + line-height: 20px; + } + + @include vp-767 { + font-size: 14px; + } +} diff --git a/source/sass/blocks/grant.scss b/source/sass/blocks/grant.scss new file mode 100644 index 00000000..871618ed --- /dev/null +++ b/source/sass/blocks/grant.scss @@ -0,0 +1,220 @@ +.grant { + padding-top: 120px; + padding-bottom: 120px; + background-color: $color-action; + + @include vp-1439 { + padding-top: 100px; + padding-bottom: 100px; + } + + @include vp-767 { + padding-top: 70px; + padding-bottom: 70px; + } +} + +.grant__row { + display: flex; + align-items: flex-start; + column-gap: 138px; + + @include vp-1439 { + column-gap: 0; + flex-direction: column; + } + +} + +.grant__col { + width: 100%; + max-width: 498px; + + @include vp-1439 { + max-width: none; + } +} + +.grant__col--main { + @include vp-1439 { + margin-bottom: 40px; + } + + @include vp-767 { + margin-bottom: 30px; + } +} + +.grant__title { + margin-bottom: 30px; + color: $color-white; + + @include vp-1439 { + width: 100%; + max-width: 498px; + } + + @include vp-767 { + max-width: none; + margin-bottom: 15px; + } +} + +.grant__col--main p { + margin: 0; + margin-bottom: 40px; + color: $color-white-alternative; + font-size: 16px; + line-height: 26px; + font-weight: 400; + + @include vp-1439 { + line-height: 20px; + width: 100%; + max-width: 498px; + } + + @include vp-767 { + max-width: none; + margin-bottom: 30px; + font-size: 14px; + } +} + +.grant__image { + font-size: 0; + line-height: 0; +} + +.grant__image img { + display: block; + width: 498px; + height: 363px; + border-radius: 16px; + + @include vp-1439 { + width: 678px; + height: 375px; + } + + @include vp-767 { + width: 290px; + height: 200px; + } +} + +.grant__col--info { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.grant__text { + margin-bottom: 30px; + padding-top: 10px; + padding-bottom: 10px; + color: $color-white; + font-size: 32px; + font-weight: 400; + line-height: 36px; + + @include vp-1439 { + margin-bottom: 20px; + font-size: 28px; + line-height: 28px; + } + + @include vp-767 { + margin-bottom: 15px; + font-size: 18px; + line-height: 22px; + } +} + +.grant__list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + flex-direction: column; + row-gap: 8px; + counter-reset: item; + + @include vp-1439 { + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + row-gap: 10px; + } + + @include vp-767 {} +} + +.grant__list li { + padding-left: 20px; + padding-top: 15px; + position: relative; + counter-increment: item; + + @include vp-1439 { + width: 100%; + max-width: 325px; + } + + @include vp-767 { + padding-left: 15px; + padding-top: 5px; + max-width: none; + } + + &::before { + position: absolute; + content: counter(item) ""; + display: flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + top: 0; + left: 0; + background-color: $color-action; + color: $color-white; + font-size: 22px; + font-weight: 500; + line-height: 22px; + letter-spacing: 0.22px; + text-align: center; + + @include vp-767 { + font-size: 18px; + line-height: 18px; + } + } +} + +.grant__item { + margin: 0; + padding-top: 30px; + padding-bottom: 30px; + padding-left: 25px; + padding-right: 28px; + border-radius: 16px; + border: 1px solid $color-white-alternative; + color: $color-white-alternative; + font-size: 16px; + font-weight: 400; + line-height: 26px; + + @include vp-1439 { + height: 100%; + line-height: 20px; + } + + @include vp-767 { + padding-top: 24px; + padding-bottom: 24px; + padding-left: 25px; + padding-right: 25px; + font-size: 14px; + } +} diff --git a/source/sass/blocks/hero-slide.scss b/source/sass/blocks/hero-slide.scss new file mode 100644 index 00000000..172a907f --- /dev/null +++ b/source/sass/blocks/hero-slide.scss @@ -0,0 +1,242 @@ +.hero-slide.swiper-slide { + margin: 0 auto; + position: relative; + height: auto; + min-height: 800px; + padding-top: 433px; + background-color: $color-action; + display: flex; + flex-direction: column; + padding-bottom: 60px; + + &::before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 2; + background-color: $color-overlay; + } + + @include vp-1439 { + padding-top: 687px; + } + + @include vp-767 { + padding-top: 229px; + padding-bottom: 20px; + } +} + +.hero-slide picture { + font-size: 0; + line-height: 0; +} + +.hero-slide > picture img { + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1; + object-fit: cover; +} + +.hero-slide__content { + position: relative; + z-index: 2; + margin-top: auto; +} + +.hero-slide__head { + width: 100%; + max-width: 968px; + padding-top: 40px; + padding-bottom: 30px; + padding-left: 50px; + padding-right: 50px; + border-radius: 0 30px 30px 0; + background-color: $color-white; + + @include vp-1439 { + max-width: 659px; + padding-top: 30px; + padding-bottom: 24px; + padding-left: 40px; + padding-right: 40px; + } + + @include vp-767 { + max-width: 290px; + padding-top: 20px; + padding-bottom: 16px; + padding-left: 14px; + padding-right: 15px; + border-radius: 0 16px 16px 0; + } +} + +.hero-slide__head h3 { + margin: 0; + font-size: 54px; + font-weight: 400; + line-height: 62px; + color: $color-action; + + @include vp-1439 { + font-size: 36px; + line-height: 44px; + } + + @include vp-767 { + font-size: 22px; + line-height: 26px; + max-width: 258px; + } +} + +.hero-slide__row { + width: 100%; + max-width: 775px; + display: flex; + justify-content: space-between; + + @include vp-1439 { + max-width: 593px; + } + + @include vp-767 { + max-width: none; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + } +} + +.hero-slide__col { + background-color: $color-white; + + &--text { + width: 100%; + max-width: 496px; + padding-bottom: 35px; + padding-left: 50px; + padding-right: 55px; + border-radius: 0 0 0 30px; + position: relative; + mask-repeat: no-repeat; + mask-position: center; + + &::before { + display: none; + position: absolute; + content: ""; + top: -1px; + right: -8px; + width: 8px; + height: 10px; + background-color: $color-white; + mask-size: 8px 10px; + mask-image: url("../__spritemap#sprite-icon-corner-view"); + + @include vp-767 { + display: block; + } + } + + @include vp-1439 { + max-width: 325px; + padding-left: 40px; + padding-right: 44px; + padding-bottom: 35px; + } + + @include vp-767 { + max-width: 267px; + padding-left: 14px; + padding-right: 21px; + padding-bottom: 15px; + border-radius: 0 0 14px 0; + background-color: $color-white; + } + } + + &--link { + width: 100%; + max-width: 279px; + padding-bottom: 35px; + padding-left: 30px; + padding-top: 10px; + border-radius: 0 0 30px 0; + position: relative; + mask-repeat: no-repeat; + mask-position: center; + + &::before { + position: absolute; + content: ""; + top: 0; + right: -26px; + width: 26px; + height: 26px; + background-color: $color-white; + mask-image: url("../__spritemap#sprite-icon-corner-view"); + mask-size: 26px 26px; + + @include vp-767 { + width: 10px; + height: 10px; + mask-size: 10px 10px; + right: -10px; + top: -1px; + } + } + + @include vp-1439 { + max-width: 268px; + padding-top: 0; + } + + @include vp-767 { + position: relative; + width: 100%; + max-width: 184px; + padding-left: 15px; + padding-right: 15px; + padding-bottom: 10px; + padding-top: 10px; + border-radius: 0 0 14px 14px; + background-color: $color-white; + } + } +} + +.hero-slide__row p { + margin: 0; + font-size: 16px; + font-weight: 400; + line-height: 26px; + + @include vp-1439 { + font-size: 16px; + line-height: 20px; + } +} + +.hero-slide__btn { + min-height: 58px; + + @include vp-1439 { + min-height: 56px; + } + + @include vp-767 { + min-height: 44px; + } +} diff --git a/source/sass/blocks/hero.scss b/source/sass/blocks/hero.scss new file mode 100644 index 00000000..d7bec2bc --- /dev/null +++ b/source/sass/blocks/hero.scss @@ -0,0 +1,61 @@ +.hero { + position: relative; +} + +.hero__container { + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 441px; + z-index: 2; +} + + +.hero__slider-pagination.swiper-pagination-bullets.swiper-pagination-horizontal { + position: absolute; + min-width: 100px; + width: auto; + height: 40px; + padding-top: 14px; + padding-bottom: 14px; + padding-left: 20px; + padding-right: 20px; + border-radius: 20px 20px 0 0; + // top: 393px; + left: 100px; + background-color: $color-white; + z-index: 3; + display: flex; + // justify-content: space-between; + column-gap: 12px; + mask-repeat: no-repeat; + mask-position: center; + + &::before { + position: absolute; + content: ""; + bottom: 0; + right: -20px; + transform: rotate(270deg); + width: 20px; + height: 20px; + background-color: $color-white; + mask-size: 20px 20px; + mask-image: url("../__spritemap#sprite-icon-corner-view"); + } +} + +.hero__slider-bullet { + padding: 0; + cursor: pointer; + background-color: $color-transparent; + width: 10px; + height: 10px; + border: 2px solid $color-action; + border-radius: 50%; + + &--is-active { + border-color: $color-action-alternative; + background-color: $color-action-alternative; + } +} diff --git a/source/sass/blocks/logo.scss b/source/sass/blocks/logo.scss new file mode 100644 index 00000000..fc524f5e --- /dev/null +++ b/source/sass/blocks/logo.scss @@ -0,0 +1,6 @@ +.logo { + font-size: 0; + line-height: 0; +} + +.logo--footer img {} diff --git a/source/sass/blocks/map.scss b/source/sass/blocks/map.scss new file mode 100644 index 00000000..7013ec0f --- /dev/null +++ b/source/sass/blocks/map.scss @@ -0,0 +1,53 @@ +.map {} + +.map__image { + font-size: 0; + line-height: 0; + position: relative; + + &::after { + position: absolute; + content: ""; + width: 70px; + height: 68px; + left: 608px; + top: 78px; + background-color: $color-action; + mask-repeat: no-repeat; + mask-position: center; + mask-image: url("../__spritemap#sprite-icon-pin-view"); + mask-size: 52px 69px; + + @include vp-1439 { + width: 30px; + height: 40px; + top: 108px; + left: 344px; + mask-size: 30px 40px; + } + + @include vp-767 { + width: 18px; + height: 24px; + top: 46px; + left: 143px; + mask-size: 18px 24px; + } + } +} + +.map__image img { + display: block; + width: 1240px; + height: 486px; + + @include vp-1439 { + width: 678px; + height: 500px; + } + + @include vp-767 { + width: 290px; + height: 240px; + } +} diff --git a/source/sass/blocks/nav-footer.scss b/source/sass/blocks/nav-footer.scss new file mode 100644 index 00000000..1a613067 --- /dev/null +++ b/source/sass/blocks/nav-footer.scss @@ -0,0 +1,68 @@ +.nav-footer__list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: flex-start; + row-gap: 20px; + column-gap: 30px; + font-size: 0; + line-height: 0; + + @include vp-1439 { + // column-gap: 15px; + column-gap: 0; + width: 528px; + justify-content: space-between; + } + + @include vp-767 { + flex-wrap: wrap; + column-gap: 30px; + width: auto; + justify-content: center; + } +} + +.nav-footer__link { + font-size: 16px; + font-weight: 400; + line-height: 26px; + color: $color-dark; + text-decoration: none; + text-align: center; + transition: color $trans-default; + + &:focus { + color: $color-action; + transition: color $trans-default; + } + + &:focus-visible { + color: $color-action; + transition: color $trans-default; + } + + &:hover:not(:focus):not(:focus-visible):not(:active):not(.disabled) { + color: rgba($color-action, 0.7); + transition: color $trans-default; + } + + &:active { + color: $color-action-alternative; + transition: color $trans-default; + } + + @include vp-1439 { + line-height: 20px; + } + + @include vp-767 { + font-size: 14px; + } +} + +.nav-footer__link.disabled { + pointer-events: none; + opacity: 0.2; +} diff --git a/source/sass/blocks/page-footer.scss b/source/sass/blocks/page-footer.scss new file mode 100644 index 00000000..5d8a025a --- /dev/null +++ b/source/sass/blocks/page-footer.scss @@ -0,0 +1,232 @@ +.page-footer { + padding-top: 60px; + padding-bottom: 40px; + + // background-color: red; + + @include vp-1439 { + padding-top: 40px; + } +} + +.page-footer__container { + display: grid; + grid-template-columns: 52px auto auto; + grid-template-rows: repeat(2, auto); + grid-column-gap: 52px; + grid-row-gap: 25px; + + @include vp-1439 { + grid-template-columns: repeat(3, auto); + grid-template-rows: repeat(3, auto); + grid-template-rows: minmax(77px, auto) auto auto; + grid-column-gap: 0; + grid-row-gap: 0; + justify-content: space-between; + } + + @include vp-767 { + display: flex; + align-items: flex-start; + justify-content: center; + flex-wrap: wrap; + } +} + +.page-footer__col {} + +.page-footer__col--logo { + width: 52px; + height: 52px; + border-radius: 50%; + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; + grid-area: 1 / 1 / 2 / 2; + + @include vp-1439 { + grid-area: 1 / 1 / 2 / 2; + margin-right: 98px; + } + + @include vp-767 { + margin-right: 0; + margin-bottom: 20px; + order: 1; + } +} + +.page-footer__col--nav { + grid-area: 1 / 2 / 2 / 3; + align-self: center; + + @include vp-1439 { + grid-area: 1 / 2 / 2 / 4; + justify-self: end; + align-self: start; + padding-top: 16px; + } + + @include vp-767 { + padding-top: 0; + margin-top: 0; + margin-bottom: 20px; + order: 2; + } +} + +.page-footer__col--social { + grid-area: 1 / 3 / 2 / 4; + align-self: center; + justify-self: end; + font-size: 0; + line-height: 0; + + @include vp-1439 { + grid-area: 2 / 3 / 4 / 4; + width: 100%; + max-width: 220px; + justify-self: start; + padding-top: 1px; + } + + @include vp-767 { + padding-top: 0; + max-width: none; + order: 5; + } +} + +.page-footer__col--copyright { + font-size: 0; + line-height: 0; + grid-area: 2 / 1 / 3 / 3; + + @include vp-1439 { + grid-area: 3 / 1 / 4 / 3; + align-self: end; + } + + @include vp-767 { + margin-bottom: 15px; + order: 4; + } +} + +.page-footer__col--policy { + font-size: 0; + line-height: 0; + grid-area: 2 / 3 / 3 / 4; + justify-self: end; + + @include vp-1439 { + grid-area: 2 / 1 / 3 / 3; + justify-self: start; + align-self: start; + } + + @include vp-767 { + margin-bottom: 13px; + order: 3; + } +} + +.page-footer__col--copyright span { + font-size: 14px; + line-height: 18px; + font-weight: 400; + + @include vp-1439 { + font-size: 12px; + line-height: 12px; + color: rgba($color-dark, 0.6); + } + + @include vp-767 { + line-height: 14px; + } +} + +.page-footer__col--policy a { + font-size: 14px; + font-weight: 400; + line-height: 18px; + color: $color-dark; + text-decoration: none; + transition: color $trans-default; + position: relative; + + &::after { + position: absolute; + content: ""; + width: 100%; + height: 1px; + left: 0; + bottom: -2px; + background-color: $color-dark; + transition: background-color $trans-default; + + @include vp-1439 { + bottom: 0; + } + + @include vp-767 { + bottom: -1px; + } + } + + &:focus { + color: $color-action; + transition: color $trans-default; + + &::after { + background-color: $color-action; + transition: background-color $trans-default; + } + } + + &:focus-visible { + color: $color-action; + transition: color $trans-default; + + &::after { + background-color: $color-action; + transition: background-color $trans-default; + } + } + + &:hover:not(:focus):not(:focus-visible):not(:active):not(.disabled) { + color: rgba($color-action, 0.7); + transition: color $trans-default; + + &::after { + background-color: $color-action; + transition: background-color $trans-default; + } + } + + &:active { + color: $color-action-alternative; + transition: color $trans-default; + + &::after { + background-color: $color-action; + transition: background-color $trans-default; + } + } + + @include vp-1439 { + font-size: 12px; + line-height: 12px; + } + + @include vp-767 { + line-height: 14px; + } +} + +.page-footer__col--policy a.disabled { + pointer-events: none; + opacity: 0.2; +} diff --git a/source/sass/blocks/page-header.scss b/source/sass/blocks/page-header.scss new file mode 100644 index 00000000..e22ebb25 --- /dev/null +++ b/source/sass/blocks/page-header.scss @@ -0,0 +1,35 @@ +.page-header { + position: relative; +} + +.page-header__head { + position: absolute; + z-index: 3; + width: 100%; + padding-top: 30px; +} + +.page-header__container { + position: relative; + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.page-header__logo { + width: 52px; + height: 52px; + padding-top: 2px; + border-radius: 50%; + background-color: $color-white; + display: flex; + justify-content: center; + align-items: center; + position: relative; + z-index: 2; +} + +.page-header__nav { + z-index: 3; + position: relative; +} diff --git a/source/sass/blocks/programs-slide.scss b/source/sass/blocks/programs-slide.scss new file mode 100644 index 00000000..7e8df7e0 --- /dev/null +++ b/source/sass/blocks/programs-slide.scss @@ -0,0 +1,169 @@ +.programs-slide.swiper-slide { + position: relative; + height: auto; + min-height: 420px; + padding-top: 280px; + padding-left: 20px; + padding-bottom: 17px; +} + +.programs-slide picture { + font-size: 0; + line-height: 0; +} + +.programs-slide > picture img { + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1; + object-fit: cover; +} + +.programs-slide__content { + position: relative; + z-index: 2; + margin-top: auto; +} + +.programs-slide__content h3 { + margin: 0; + color: $color-action; + font-size: 24px; + line-height: 17px; + font-weight: 400; + + @include vp-1439 { + font-size: 20px; + line-height: 14px; + } + + @include vp-767 { + font-size: 16px; + line-height: 18px; + } +} + +.programs-slide__content p { + margin: 0; + max-width: 239px; + font-size: 14px; + line-height: 18px; + font-weight: 400; + + @include vp-1439 { + font-size: 14px; + line-height: 20px; + } + + @include vp-767 { + font-size: 12px; + line-height: 14px; + } + +} + +.programs-slide__head { + width: 100%; + max-width: 194px; + background-color: $color-white; + border-radius: 12px 12px 0 0; + padding: 18px; + padding-bottom: 6px; + position: relative; + mask-repeat: no-repeat; + mask-position: center; + + &::before { + position: absolute; + content: ""; + bottom: 0; + right: -18px; + width: 18px; + height: 18px; + background-color: $color-white; + transform: rotate(-90deg); + mask-size: 18px 18px; + mask-image: url("../__spritemap#sprite-icon-corner-view"); + } +} + +.programs-slide__row { + background-color: $color-white; + border-radius: 0 12px 12px 12px; + max-width: 321px; + display: flex; + align-items: center; + justify-content: space-between; + padding-left: 18px; + padding-right: 18px; +} + +.programs-slide__btn { + width: 30px; + height: 30px; + background-color: $color-action; + border-radius: 50%; + margin-top: 24px; + margin-bottom: 28px; + position: relative; + flex-shrink: 0; + transition: background-color $trans-default; + + &::after { + position: absolute; + content: ""; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + mask-repeat: no-repeat; + mask-position: center; + background-color: $color-white; + transition: background-color $trans-default; + width: 8px; + height: 8px; + mask-image: url("../__spritemap#sprite-icon-btn-arrow-view"); + mask-size: 8px 8px; + } +} + +.programs-slide__btn:hover:not(.disabled):not(:focus-visible):not(:active) { + background-color: $color-action; + transition: background-color $trans-default; +} + +.programs-slide__btn:active { + background-color: $color-action; + transition: background-color $trans-default, opacity $trans-default; + opacity: 0.7; +} + +.programs-slide__btn:focus::after, +.programs-slide__btn:focus-visible::after { + transform: rotate(45deg) translateX(-4px); + transform-origin: center center; +} + +.programs-slide__btn.disabled { + pointer-events: none; + border-color: $color-disabled; +} + +.programs-slide__btn:hover:not(.disabled):not(:focus-visible):not(:active), +.programs-slide__btn:active { + background-color: $color-white; + transition: background-color $trans-default; +} + +.programs-slide__btn:hover:not(.disabled):not(:focus-visible):not(:active)::after, +.programs-slide__btn:active::after { + background-color: $color-action; + transform: rotate(45deg) translateX(-4px); + transform-origin: center center; + transition: background-color $trans-default; +} diff --git a/source/sass/blocks/programs-test.scss b/source/sass/blocks/programs-test.scss new file mode 100644 index 00000000..659b25df --- /dev/null +++ b/source/sass/blocks/programs-test.scss @@ -0,0 +1,96 @@ +.programs { + padding-top: 62px; + padding-bottom: 60px; + + @include vp-1439 { + padding-top: 50px; + padding-bottom: 50px; + } +} + +.programs__container { + // position: relative; + margin: 0 auto; + padding-left: 100px; + padding-right: 100px; + width: 100%; + max-width: 1440px; + + display: grid; + grid-template-columns: repeat(3, auto); + grid-template-rows: repeat(3, auto); + grid-column-gap: 0; + grid-row-gap: 40px; + justify-content: space-between; + justify-items: start; + align-items: start; + align-content: start; + + @include vp-1439 { + padding: 0; + } + + @include vp-767 { + padding: 0 15px; + max-width: 320px; + grid-template-columns: repeat(2, auto); + grid-template-rows: repeat(3, auto); + grid-row-gap: 30px; + } +} + +.programs__title { + grid-area: 1 / 1 / 2 / 2; + justify-self: start; + + @include vp-767 { + grid-area: 1 / 1 / 2 / 2; + } +} + +.programs__btn { + min-width: 234px; + grid-area: 1 / 3 / 2 / 4; + justify-self: end; + + @include vp-767 { + grid-area: 3 / 1 / 4 / 2; + } +} + +.programs__slider.swiper { + margin-bottom: 40px; + width: 100%; + height: 100%; + grid-area: 2 / 1 / 3 / 4; + + @include vp-1439 { + padding-left: 45px; + max-width: 768px; + } + + @include vp-767 { + grid-area: 2 / 1 / 3 / 3; + max-width: 290px; + padding-left: 0; + } +} + +.programs__scrollbar { + grid-area: 3 / 1 / 4 / 3; + align-self: center; + + @include vp-767 { + display: none; + } +} + +.programs__navigation { + grid-area: 3 / 3 / 4 / 4; + align-self: center; + justify-self: end; + + @include vp-767 { + grid-area: 1 / 2 / 2 / 3; + } +} diff --git a/source/sass/blocks/programs.scss b/source/sass/blocks/programs.scss new file mode 100644 index 00000000..1e1b622c --- /dev/null +++ b/source/sass/blocks/programs.scss @@ -0,0 +1,95 @@ +// .programs { +// padding-top: 62px; +// padding-bottom: 60px; + +// @include vp-1439 { +// padding-top: 50px; +// padding-bottom: 50px; +// } +// } + +// .programs__container { +// position: relative; +// margin: 0 auto; +// padding-left: 100px; +// padding-right: 100px; +// width: 100%; +// max-width: 1440px; + +// @include vp-1439 { +// padding: 0; +// } + +// @include vp-767 { +// padding: 0 15px; +// max-width: 320px; +// } +// } + +// .programs__head { +// padding-top: 2px; +// padding-bottom: 2px; +// display: flex; +// justify-content: space-between; +// align-items: center; +// margin-bottom: 40px; + +// @include vp-1439 { +// padding: 0 45px; +// max-width: 768px; +// margin-left: auto; +// margin-right: auto; +// } + +// @include vp-767 { +// padding: 0; +// max-width: none; +// margin: 0; +// margin-bottom: 35px; +// } +// } + +// .programs__title { +// max-width: 1000px; +// } + +// .programs__btn { +// min-width: 234px; + +// @include vp-767 { +// position: absolute; +// bottom: 0; +// left: 0; +// } +// } + +// .programs__slider.swiper { +// margin-bottom: 40px; + +// @include vp-1439 { +// padding-left: 45px; +// max-width: 768px; +// } +// } + +// .programs__ui { +// display: flex; +// justify-content: space-between; +// align-items: center; + +// @include vp-1439 { +// padding: 0 45px; +// max-width: 768px; +// margin: 0 auto; +// } +// } + +// .programs__scrollbar {} + +// .programs__navigation { +// @include vp-767 { +// position: absolute; +// top: 0; +// right: 15px; +// } +// } diff --git a/source/sass/blocks/section-title.scss b/source/sass/blocks/section-title.scss new file mode 100644 index 00000000..d2b65f49 --- /dev/null +++ b/source/sass/blocks/section-title.scss @@ -0,0 +1,17 @@ +.section-title { + margin: 0; + font-size: 50px; + line-height: 50px; + font-weight: 400; + color: $color-action; + + @include vp-1439 { + font-size: 34px; + line-height: 50px; + } + + @include vp-767 { + font-size: 20px; + line-height: 20px; + } +} diff --git a/source/sass/blocks/slider.scss b/source/sass/blocks/slider.scss new file mode 100644 index 00000000..43f7afcf --- /dev/null +++ b/source/sass/blocks/slider.scss @@ -0,0 +1,86 @@ +.slider {} + +.slider__navigation { + display: flex; + justify-content: space-between; + align-items: flex-start; + width: 100%; + max-width: 54px; + column-gap: 10px; +} + +.slider__btn { + width: 22px; + height: 22px; + padding: 0; + border: none; + border-radius: 50%; + position: relative; + background-color: $color-transparent; + cursor: pointer; + + &::after { + position: absolute; + content: ""; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + mask-repeat: no-repeat; + mask-position: center; + background-color: $color-action; + transition: background-color $trans-default; + width: 10px; + height: 10px; + mask-image: url("../__spritemap#sprite-icon-slider-arrow-view"); + mask-size: 10px 10px; + } + + &--prev { + transform: rotate(180deg); + } + + &:focus, + &:focus-visible { + background-color: $color-white; + } + + &:hover:not(.is-disabled):not(:focus-visible):not(:active)::after { + background-color: rgba($color-action, 0.7); + } + + &:active { + background-color: $color-white; + } + + &:active::after { + background-color: rgba($color-action, 0.7); + } +} + +.is-disabled { + pointer-events: none; + + &::after { + background-color: $color-disabled; + } +} + +.slider__scrollbar { + background-color: rgba($color-action, 0.2); + height: 2px; + width: 100%; + max-width: 1136px; + + @include vp-1439 { + max-width: 562px; + } + + @include vp-767 { + display: none; + } +} + +.slider__drag-element { + height: 2px; + background-color: $color-action; +} diff --git a/source/sass/blocks/social.scss b/source/sass/blocks/social.scss new file mode 100644 index 00000000..ca6187c4 --- /dev/null +++ b/source/sass/blocks/social.scss @@ -0,0 +1,130 @@ +.social__list { + margin: 0; + padding: 0; + font-size: 0; + line-height: 0; + list-style-type: none; + display: inline-flex; + flex-wrap: wrap; + column-gap: 20px; + row-gap: 20px; + + @include vp-1439 { + column-gap: 10px; + } + + @include vp-767 { + display: flex; + justify-content: center; + } +} + +.social__item a { + width: 36px; + height: 36px; + border-radius: 50%; + background-color: $color-action; + display: flex; + align-items: center; + justify-content: center; + position: relative; + transition: background-color $trans-default; + + &::before { + position: absolute; + content: ""; + mask-repeat: no-repeat; + mask-position: center; + background-color: $color-white; + transition: background-color $trans-default; + } + + &:focus { + background-color: $color-white; + transition: background-color $trans-default; + + &::before { + background-color: $color-action; + transition: background-color $trans-default; + } + } + + &:focus-visible { + background-color: $color-white; + transition: background-color $trans-default; + + &::before { + background-color: $color-action; + transition: background-color $trans-default; + } + } + + &:hover:not(:focus):not(:focus-visible):not(:active):not(.disabled) { + background-color: $color-action; + transition: background-color $trans-default; + + &::before { + background-color: rgba($color-white, 0.7); + transition: background-color $trans-default; + } + } + + &:active { + background-color: $color-action-alternative; + transition: background-color $trans-default; + + &::before { + background-color: $color-white; + transition: background-color $trans-default; + } + } + + @include vp-767 { + width: 26px; + height: 26px; + } +} + +.social__item a.disabled { + pointer-events: none; + opacity: 0.2; +} + +.social__item--vk a::before { + width: 16px; + height: 10px; + mask-image: url("../__spritemap#sprite-icon-vk-view"); + mask-size: 16px 10px; + + @include vp-767 { + width: 12px; + height: 8px; + mask-size: 12px 8px; + } +} + +.social__item--ok a::before { + width: 10px; + height: 16px; + mask-image: url("../__spritemap#sprite-icon-ok-view"); + mask-size: 10px 16px; + + @include vp-767 { + width: 8px; + height: 12px; + mask-size: 8px 12px; + } +} + +.social__item--reddit a::before { + width: 16px; + height: 16px; + mask-image: url("../__spritemap#sprite-icon-reddit-view"); + mask-size: 16px 16px; + + @include vp-767 { + width: 12px; + height: 12px; + mask-size: 12px 12px; + } +} diff --git a/source/sass/blocks/wrapper.scss b/source/sass/blocks/wrapper.scss new file mode 100644 index 00000000..e4ac641d --- /dev/null +++ b/source/sass/blocks/wrapper.scss @@ -0,0 +1,34 @@ +.wrapper { + position: relative; + display: flex; + flex-direction: column; + min-height: 100vh; + /* stylelint-disable-next-line */ + min-height: calc(100 * var(--vh, 1vh)); + overflow: hidden; +} + +.wrapper .page-header, +.wrapper .page-footer { + flex-shrink: 0; +} + +.wrapper .page-content { + flex-grow: 1; +} + + +.wrapper.is-open { + &::before { + position: absolute; + content: ""; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: rgba(45, 56, 63, 0.6); + z-index: 2; + } +} diff --git a/source/sass/global/container.scss b/source/sass/global/container.scss new file mode 100644 index 00000000..58e5ac31 --- /dev/null +++ b/source/sass/global/container.scss @@ -0,0 +1,16 @@ +.container { + width: 100%; + max-width: 1440px; + margin: 0 auto; + padding: 0 100px; + + @include vp-1439 { + padding: 0 45px; + max-width: 768px; + } + + @include vp-767 { + padding: 0 15px; + max-width: 320px; + } +} diff --git a/source/sass/global/fonts.scss b/source/sass/global/fonts.scss new file mode 100644 index 00000000..b01e9075 --- /dev/null +++ b/source/sass/global/fonts.scss @@ -0,0 +1,29 @@ +@font-face { + font-style: normal; + font-weight: 300; + font-family: "Manrope"; + font-display: swap; + src: + url("../../fonts/Manrope-Light.woff2") format("woff2"), + url("../../fonts/Manrope-Light.woff") format("woff"); +} + +@font-face { + font-style: normal; + font-weight: 400; + font-family: "Manrope"; + font-display: swap; + src: + url("../../fonts/Manrope-Regular.woff2") format("woff2"), + url("../../fonts/Manrope-Regular.woff") format("woff"); +} + +@font-face { + font-style: normal; + font-weight: 500; + font-family: "Manrope"; + font-display: swap; + src: + url("../../fonts/Manrope-Medium.woff2") format("woff2"), + url("../../fonts/Manrope-Medium.woff") format("woff"); +} diff --git a/source/sass/global/mixins.scss b/source/sass/global/mixins.scss new file mode 100644 index 00000000..37752759 --- /dev/null +++ b/source/sass/global/mixins.scss @@ -0,0 +1,19 @@ +/* stylelint-disable */ + +@mixin vp-1440 { + @media (min-width: ($vp-1440)) { + @content; + } +} + +@mixin vp-1439 { + @media (max-width: ($vp-1440 - 1px)) { + @content; + } +} + +@mixin vp-767 { + @media (max-width: ($vp-768 - 1px)) { + @content; + } +} diff --git a/source/sass/global/reboot.scss b/source/sass/global/reboot.scss new file mode 100644 index 00000000..8fd37f97 --- /dev/null +++ b/source/sass/global/reboot.scss @@ -0,0 +1,35 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; + min-height: 100vh; + min-width: 320px; +} + +html { + font-style: normal; + font-weight: 400; + font-size: $fz-default; + line-height: 24px; + font-family: $ff-placeholder; + color: $color-dark; +} + +body { + width: 100%; + height: 100%; + background-color: $color-white-alternative; +} + +img, +video { + max-width: 100%; + height: auto; + object-fit: contain; +} diff --git a/source/sass/global/utils.scss b/source/sass/global/utils.scss new file mode 100644 index 00000000..8d85c732 --- /dev/null +++ b/source/sass/global/utils.scss @@ -0,0 +1,31 @@ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + white-space: nowrap; + border: 0; + clip: rect(0 0 0 0); + clip-path: inset(100%); +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(13, 29, 51, 0.4); + display: none; + z-index: 2; +} + +.is-visible.overlay { + display: block; +} + +body.no-scroll { + overflow: hidden; +} diff --git a/source/sass/global/variables.scss b/source/sass/global/variables.scss new file mode 100644 index 00000000..f23672f7 --- /dev/null +++ b/source/sass/global/variables.scss @@ -0,0 +1,26 @@ +// Viewports +// --------------------------------- +$vp-768: 768px; +$vp-1440: 1440px; + +// Colors +// --------------------------------- +$color-white: #ffffff; +$color-white-alternative: #f0efe9; +$color-dark: #484848; +$color-action: #316dc2; +$color-action-alternative: #275699; +$color-error: #ff5e66; +$color-disabled: #a9afb7; +$color-transparent: rgba(255, 255, 255, 0); +$color-overlay: rgba(#316dc2, 0.2); +$color-overlay-alternative: rgba(#0d1d33, 0.4); +$fz-default: 16px; +$font-family: "Manrope", "Arial", sans-serif; +$ff-placeholder: $font-family; + +// Animation +// --------------------------------- + +$tf-default: ease; +$trans-default: 0.4s $tf-default; diff --git a/source/sass/style.scss b/source/sass/style.scss index 96467369..ef2068fd 100644 --- a/source/sass/style.scss +++ b/source/sass/style.scss @@ -2,3 +2,34 @@ // --------------------------------- @import "vendor/normalize"; + +// Global +// --------------------------------- + +@import "global/fonts"; +@import "global/variables"; +@import "global/mixins"; +@import "global/reboot"; +@import "global/utils"; +@import "global/container"; + +//Blocks +// --------------------------------- +@import "blocks/section-title"; +@import "blocks/slider"; +@import "blocks/page-header"; +@import "blocks/logo"; +@import "blocks/burger"; +@import "blocks/btn"; +@import "blocks/hero"; +@import "blocks/hero-slide"; +@import "blocks/about"; +@import "blocks/programs"; +@import "blocks/programs-test"; +@import "blocks/programs-slide"; +@import "blocks/grant"; +@import "blocks/contacts"; +@import "blocks/map"; +@import "blocks/page-footer"; +@import "blocks/nav-footer"; +@import "blocks/social";