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..be78e836 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..c0595f57 Binary files /dev/null and b/source/img/map/map-desktop.webp differ diff --git a/source/img/map/map-desktop2x.png b/source/img/map/map-desktop2x.png new file mode 100644 index 00000000..70e7496a Binary files /dev/null and b/source/img/map/map-desktop2x.png differ diff --git a/source/img/map/map-desktop2x.webp b/source/img/map/map-desktop2x.webp new file mode 100644 index 00000000..d850fa2f Binary files /dev/null and b/source/img/map/map-desktop2x.webp differ diff --git a/source/img/map/map-mobile.png b/source/img/map/map-mobile.png new file mode 100644 index 00000000..0a9a2292 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..61ac90e5 Binary files /dev/null and b/source/img/map/map-mobile.webp differ diff --git a/source/img/map/map-mobile2x.png b/source/img/map/map-mobile2x.png new file mode 100644 index 00000000..b39550b1 Binary files /dev/null and b/source/img/map/map-mobile2x.png differ diff --git a/source/img/map/map-mobile2x.webp b/source/img/map/map-mobile2x.webp new file mode 100644 index 00000000..607a8bc4 Binary files /dev/null and b/source/img/map/map-mobile2x.webp differ diff --git a/source/img/map/map-tablet.png b/source/img/map/map-tablet.png new file mode 100644 index 00000000..9e1561b8 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..8d5d2fdf Binary files /dev/null and b/source/img/map/map-tablet.webp differ diff --git a/source/img/map/map-tablet2x.png b/source/img/map/map-tablet2x.png new file mode 100644 index 00000000..151e835c Binary files /dev/null and b/source/img/map/map-tablet2x.png differ diff --git a/source/img/map/map-tablet2x.webp b/source/img/map/map-tablet2x.webp new file mode 100644 index 00000000..dda5706c Binary files /dev/null and b/source/img/map/map-tablet2x.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..896229c3 100644 --- a/source/index.html +++ b/source/index.html @@ -1,31 +1,1679 @@ - - - - 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х месяцев + подряд непрерывно в одной стране

    +
    • +
+
+
+
+
+
+
+

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

+
+
+ + + + + +
+
+
+ +
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 23/03/2023 +
+
+

Интервью с участницей программы + стажировки

+
+
+

Саша рассказывает, как попала в программу и как прошла 6-месячная стажировка в ISOFound

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 20/03/2023 +
+
+

Путешествуем + по миру

+
+
+

Какие места посещают + наши студенты весной

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 17/03/2023 +
+
+

Новая + программа + волонтёрства

+
+
+

Программа помощи детям + длительностью 4 месяца

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 10/03/2023 +
+
+

Построй свою карьеру

+
+
+

Ведущие компании готовы трудоустроить выпускников стажировки

+ + +
+
+
+
+
+
+ + +
+ +
+ +
+
+ + +
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 20/03/2023 +
+
+

Путешествуем + по миру

+
+
+

Какие места посещают + наши студенты весной

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 17/03/2023 +
+
+

Новая + программа + волонтёрства

+
+
+

Программа помощи детям + длительностью 4 месяца

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 10/03/2023 +
+
+

Построй свою карьеру

+
+
+

Ведущие компании готовы трудоустроить выпускников стажировки

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 23/03/2023 +
+
+

Интервью с участницей программы + стажировки

+
+
+

Саша рассказывает, как попала в программу и как прошла 6- + месячная стажировка в ISOFound

+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 17/03/2023 +
+
+

Новая + программа + волонтёрства

+
+
+

Программа помощи детям + длительностью 4 месяца

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 10/03/2023 +
+
+

Построй свою карьеру

+
+
+

Ведущие компании готовы трудоустроить выпускников стажировки

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 23/03/2023 +
+
+

Интервью с участницей программы + стажировки

+
+
+

Саша рассказывает, как попала в программу и как прошла 6- + месячная стажировка в ISOFound

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 20/03/2023 +
+
+

Путешествуем + по миру

+
+
+

Какие места посещают + наши студенты весной

+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 10/03/2023 +
+
+

Построй свою карьеру

+
+
+

Ведущие компании готовы трудоустроить выпускников стажировки

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 23/03/2023 +
+
+

Интервью с участницей программы + стажировки

+
+
+

Саша рассказывает, как попала в программу и как прошла 6- + месячная стажировка в ISOFound

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 20/03/2023 +
+
+

Путешествуем + по миру

+
+
+

Какие места посещают + наши студенты весной

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 17/03/2023 +
+
+

Новая + программа + волонтёрства

+
+
+

Программа помощи детям + длительностью 4 месяца

+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 17/03/2023 +
+
+

Новая + программа + волонтёрства

+
+
+

Программа помощи детям + длительностью 4 месяца

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 20/03/2023 +
+
+

Путешествуем + по миру

+
+
+

Какие места посещают + наши студенты весной

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 23/03/2023 +
+
+

Интервью с участницей программы + стажировки

+
+
+

Саша рассказывает, как попала в программу и как прошла 6- + месячная стажировка в ISOFound

+ + +
+
+
+
+
+
+ + + + + + + + + + Интервью с участницей программы + стажировки. + +
+
+ 10/03/2023 +
+
+

Построй свою карьеру

+
+
+

Ведущие компании готовы трудоустроить выпускников стажировки

+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+

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

+
+
+
+ +
+
+

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

+
+
+
+
+ +
+
+

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

+
+
+
+
+ +
+
+

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

+
+
+
+
+ +
+
+

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

+
+
+
+
+ +
+
+

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

+
+
+
+
+
+
+
+

Отзывы

+
+
+
+
+
+
+
+ + + + Лола Алекс. + +
+ Лола + Алекс +
+
+ программа + Masa Art Challenge +
+
+ Дата + Осень 2022 +
+
+
+

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

+

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

+
+
+
+
+
+
+
+
+ + + + Давид Иванов. + +
+ Давид + Иванов +
+
+ программа + Volunteer Chance +
+
+ Дата + Лето 2022 +
+
+
+

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

+

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

+
+
+
+
+
+
+
+
+ + + + Давид Иванов. + +
+ Давид + Иванов +
+
+ программа + Volunteer Chance +
+
+ Дата + Лето 2022 +
+
+
+

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

+

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

+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+

Контакты

+
+
+ центральный офис + г. Новосибирск, ул. Щетинкина + 68, + культурный центр +
+
+ Телефон + +7 963 876 876 + 76 +
+ +
+
+
+ + + + + + + + + + г. Новосибирск, ул. Щетинкина 68, культурный центр. + +
+
+
+
+
+
+
+
+
+

Напишите нам

+

Оставьте ваши контакты, если у вас остались + вопросы — мы на них ответим!

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+
+ +
+ + diff --git a/source/js/main.js b/source/js/main.js index 70fde252..35af1be9 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,4 +1,23 @@ -// https://swiperjs.com/get-started#installation -// import Swiper from "swiper"; -// import {Navigation, Pagination} from "swiper/modules"; -// import 'swiper/css'; +import { lazyLoadImages, removeFocusAfterClick } 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'; +import { initReviewsSlider } from '../js/modules/sliders/reviews-slider'; +import { initNewsTabs } from '../js/modules/tabs/init-news-tabs'; +import { initNewsSlider } from '../js/modules/sliders/news-slider'; +import { initFaqAccordions } from '../js/modules/accordions/faq-accordion'; + +window.addEventListener('DOMContentLoaded', () => { + lazyLoadImages(); + initBurgerMenu(); + initHeroSlider(); + + window.addEventListener('load', () => { + removeFocusAfterClick(); + initProgramsSlider(); + initReviewsSlider(); + initNewsTabs(); + initNewsSlider(); + initFaqAccordions(); + }); +}); diff --git a/source/js/modules/accordions/faq-accordion.js b/source/js/modules/accordions/faq-accordion.js new file mode 100644 index 00000000..2c63bcea --- /dev/null +++ b/source/js/modules/accordions/faq-accordion.js @@ -0,0 +1,24 @@ +export const initFaqAccordions = () => { + const buttons = document.querySelectorAll('[data-faq="accordion-button"]'); + if (!buttons) { + return; + } + + buttons.forEach((button) => { + button.addEventListener('click', () => { + const faqItem = button.closest('.faq-item'); + const content = button.closest('.faq-item').querySelector('[data-faq="accordion-content"]'); + const isActive = button.classList.contains('is-active'); + + if (isActive) { + content.style.maxHeight = 0; + } else { + content.style.maxHeight = `${content.scrollHeight}px`; + } + + button.classList.toggle('is-active'); + content.classList.toggle('is-active'); + faqItem.classList.toggle('is-active'); + }); + }); +}; 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/news-slider.js b/source/js/modules/sliders/news-slider.js new file mode 100644 index 00000000..b2a3bef2 --- /dev/null +++ b/source/js/modules/sliders/news-slider.js @@ -0,0 +1,263 @@ +import Swiper from 'swiper'; +import { Navigation, Pagination } from 'swiper/modules'; +import 'swiper/css'; +import 'swiper/css/pagination'; + +// const initNewsSlider = () => { +// const newsSlider = document.querySelector('[data-slider="news-tab-slider"]'); +// if (!newsSlider) return; + +// const slides = Array.from(newsSlider.querySelectorAll('.swiper-slide')); +// const totalSlides = slides.length; +// const slidesToDuplicate = 12 - totalSlides; + +// for (let i = 0; i < slidesToDuplicate; i++) { +// const clone = slides[i % totalSlides].cloneNode(true); +// newsSlider.querySelector('.swiper-wrapper').appendChild(clone); +// } + +// const swapSlides = () => { +// const travelsSlide = newsSlider.querySelector('.news-slide--travels'); +// const volunteeringSlide = newsSlider.querySelector('.news-slide--volunteering'); +// const travelsIndex = Array.from(slides).indexOf(travelsSlide); +// const volunteeringIndex = Array.from(slides).indexOf(volunteeringSlide); + +// if (window.innerWidth >= 768 && window.innerWidth < 1440) { +// if (travelsIndex > -1 && volunteeringIndex > -1) { +// newsSlider.querySelector('.swiper-wrapper').insertBefore(volunteeringSlide, travelsSlide); +// } +// } else { +// if (travelsIndex > volunteeringIndex) { +// newsSlider.querySelector('.swiper-wrapper').insertBefore(travelsSlide, volunteeringSlide); +// } +// } +// }; + +// window.addEventListener('resize', swapSlides); +// swapSlides(); + +// new Swiper(newsSlider, { +// modules: [Navigation, Pagination], +// navigation: { +// nextEl: '.news-tab__slider-btn--next', +// prevEl: '.news-tab__slider-btn--prev', +// disabledClass: 'is-disabled', +// }, +// pagination: { +// el: '.news-tab__slider-pagination', +// clickable: true, +// bulletElement: 'button', +// bulletClass: 'news-tab__slider-bullet', +// bulletActiveClass: 'news-tab__slider-bullet--is-active', +// renderBullet: function (index, className) { +// return ``; +// }, +// }, +// watchOverflow: true, +// simulateTouch: true, +// grabCursor: true, +// speed: 500, +// loop: false, +// breakpoints: { +// 320: { +// slidesPerView: 1, +// slidesPerGroup: 4, +// spaceBetween: 0, +// grid: { +// rows: 2, +// }, +// }, +// 768: { +// slidesPerView: 4, +// slidesPerGroup: 4, +// spaceBetween: 0, +// grid: { +// rows: 2, +// }, +// }, +// 1440: { +// slidesPerView: 3, +// slidesPerGroup: 3, +// spaceBetween: 32, +// } +// }, +// on: { +// init: function (swiper) { +// updatePagination(swiper); +// markFirstSlide(swiper); +// }, +// slideChange: function (swiper) { +// updatePagination(swiper); +// markFirstSlide(swiper); +// }, +// }, +// }); + +// function updatePagination(swiper) { +// const totalSlides = swiper.slides.length; +// const currentIndex = Math.floor(swiper.activeIndex / swiper.params.slidesPerGroup); +// const paginationButtons = document.querySelectorAll('.news-tab__slider-bullet'); +// const totalPages = Math.ceil(totalSlides / swiper.params.slidesPerGroup); + +// paginationButtons.forEach((button, index) => { +// if (totalPages <= 4) { +// button.style.display = 'inline-block'; +// } else { +// button.style.display = (index >= currentIndex - 1 && index <= currentIndex + 2) ? 'inline-block' : 'none'; +// } +// }); +// } + +// function markFirstSlide(swiper) { +// swiper.slides.forEach((slide, index) => { +// slide.classList.remove('news-slide--main'); +// if (index % swiper.params.slidesPerGroup === 0) { +// slide.classList.add('news-slide--main'); +// } +// }); +// } +// }; + +// document.addEventListener('DOMContentLoaded', initNewsSlider); + +const initNewsSlider = () => { + const newsSlider = document.querySelector('[data-slider="news-tab-slider"]'); + if (!newsSlider) { + return; + } + + const originalSlides = Array.from(newsSlider.querySelectorAll('.swiper-slide')); + + const duplicateSlides = () => { + const slides = Array.from(newsSlider.querySelectorAll('.swiper-slide')); + const wrapper = newsSlider.querySelector('.swiper-wrapper'); + wrapper.innerHTML = ''; // Очистить текущие слайды + + let slidesToDuplicate; + if (window.innerWidth >= 1440) { + slidesToDuplicate = 12; + } else if (window.innerWidth >= 768) { + slidesToDuplicate = 16; + } else { + slidesToDuplicate = 8; + } + + for (let i = 0; i < slidesToDuplicate; i++) { + const clone = originalSlides[i % originalSlides.length].cloneNode(true); + wrapper.appendChild(clone); + } + }; + + const swapSlides = () => { + const travelsSlide = newsSlider.querySelector('.news-slide--travels'); + const volunteeringSlide = newsSlider.querySelector('.news-slide--volunteering'); + const slides = Array.from(newsSlider.querySelectorAll('.swiper-slide')); + const travelsIndex = slides.indexOf(travelsSlide); + const volunteeringIndex = slides.indexOf(volunteeringSlide); + + if (window.innerWidth >= 768 && window.innerWidth < 1440) { + if (travelsIndex > -1 && volunteeringIndex > -1) { + newsSlider.querySelector('.swiper-wrapper').insertBefore(volunteeringSlide, travelsSlide); + } + } else { + if (travelsIndex > volunteeringIndex) { + newsSlider.querySelector('.swiper-wrapper').insertBefore(travelsSlide, volunteeringSlide); + } + } + }; + + window.addEventListener('resize', () => { + duplicateSlides(); + swapSlides(); + swiper.update(); // Обновить Swiper после изменения слайдов + }); + + duplicateSlides(); + swapSlides(); + + const swiper = new Swiper(newsSlider, { + modules: [Navigation, Pagination], + navigation: { + nextEl: '.news-tab__slider-btn--next', + prevEl: '.news-tab__slider-btn--prev', + disabledClass: 'is-disabled', + }, + pagination: { + el: '.news-tab__slider-pagination', + clickable: true, + bulletElement: 'button', + bulletClass: 'news-tab__slider-bullet', + bulletActiveClass: 'news-tab__slider-bullet--is-active', + renderBullet: function (index, className) { + return ``; + }, + }, + watchOverflow: true, + simulateTouch: true, + grabCursor: true, + speed: 500, + loop: false, + breakpoints: { + 320: { + slidesPerView: 2, + slidesPerGroup: 2, + spaceBetween: 16, + grid: { + rows: 2, + }, + }, + 768: { + slidesPerView: 4, + slidesPerGroup: 4, + spaceBetween: 30, + grid: { + rows: 2, + }, + }, + 1440: { + slidesPerView: 3, + slidesPerGroup: 3, + spaceBetween: 32, + } + }, + on: { + init: function (swiper) { + updatePagination(swiper); + markFirstSlide(swiper); + }, + slideChange: function (swiper) { + updatePagination(swiper); + markFirstSlide(swiper); + }, + }, + }); + + function updatePagination(swiper) { + const totalSlides = swiper.slides.length; + const currentIndex = Math.floor(swiper.activeIndex / swiper.params.slidesPerGroup); + const paginationButtons = document.querySelectorAll('.news-tab__slider-bullet'); + const totalPages = Math.ceil(totalSlides / swiper.params.slidesPerGroup); + + paginationButtons.forEach((button, index) => { + if (totalPages <= 4) { + button.style.display = 'inline-block'; + } else { + button.style.display = (index >= currentIndex - 1 && index <= currentIndex + 2) ? 'inline-block' : 'none'; + } + }); + } + + function markFirstSlide(swiper) { + swiper.slides.forEach((slide, index) => { + slide.classList.remove('news-slide--main'); + if (index % swiper.params.slidesPerGroup === 0) { + slide.classList.add('news-slide--main'); + } + }); + } +}; + +document.addEventListener('DOMContentLoaded', initNewsSlider); + + +export { initNewsSlider }; diff --git a/source/js/modules/sliders/programs-slider.js b/source/js/modules/sliders/programs-slider.js new file mode 100644 index 00000000..ca3cb1b4 --- /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, + 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/sliders/reviews-slider.js b/source/js/modules/sliders/reviews-slider.js new file mode 100644 index 00000000..27435623 --- /dev/null +++ b/source/js/modules/sliders/reviews-slider.js @@ -0,0 +1,61 @@ +import Swiper from 'swiper'; +import { Navigation, Scrollbar } from 'swiper/modules'; +import 'swiper/css'; + +const initReviewsSlider = () => { + const reviewsSlider = document.querySelector('[data-slider="reviews-slider"]'); + if (!reviewsSlider) { + return; + } + + new Swiper(reviewsSlider, { + modules: [Navigation, Scrollbar], + navigation: { + nextEl: '.reviews__slider-btn--next', + prevEl: '.reviews__slider-btn--prev', + disabledClass: 'is-disabled', + }, + scrollbar: { + el: '.reviews__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, + autoHeight: false, + breakpoints: { + 320: { + slidesPerView: 1, + scrollbar: { + enabled: false, + }, + }, + 768: { + slidesPerView: 1, + // slidesPerView: 1.3, + spaceBetween: 30, + scrollbar: { + enabled: true, + dragSize: '326px', + }, + }, + 1440: { + allowTouchMove: false, + slidesPerView: 2, + spaceBetween: 32, + scrollbar: { + enabled: true, + }, + } + }, + }); +}; + +export { initReviewsSlider }; diff --git a/source/js/modules/tabs/init-news-tabs.js b/source/js/modules/tabs/init-news-tabs.js new file mode 100644 index 00000000..cf1c78cd --- /dev/null +++ b/source/js/modules/tabs/init-news-tabs.js @@ -0,0 +1,25 @@ +const initNewsTabs = () => { + const tabsControls = document.querySelectorAll('[data-news="tabs-control"]'); + const tabsElements = document.querySelectorAll('[data-news="tabs-content"]'); + + if (tabsControls.length && tabsElements.length) { + + tabsControls.forEach((tabsControl) => { + tabsControl.addEventListener('click', (e) => { + e.preventDefault(); + const activeTabId = e.target.getAttribute('data-tab'); + + tabsControls.forEach((otherTabControl) => { + otherTabControl.classList.toggle('is-active', otherTabControl === tabsControl); + }); + + tabsElements.forEach((tabsElement) => { + const contentId = tabsElement.getAttribute('data-tab-content'); + tabsElement.classList.toggle('is-active', contentId === activeTabId); + }); + }); + }); + } +}; + +export { initNewsTabs }; diff --git a/source/js/modules/utils/utils.js b/source/js/modules/utils/utils.js new file mode 100644 index 00000000..70010a1b --- /dev/null +++ b/source/js/modules/utils/utils.js @@ -0,0 +1,30 @@ +const lazyLoadImages = () => { + if (document.querySelectorAll('img')) { + const images = document.querySelectorAll('img'); + images.forEach((image, index) => { + if (index !== 0) { + image.setAttribute('loading', 'lazy'); + } + }); + } +}; + +const removeFocusAfterClick = () => { + const buttons = document.querySelectorAll('button'); + + if (buttons.length) { + buttons.forEach((button) => { + button.addEventListener('click', () => { + setTimeout(() => { + button.blur(); + }, 100); + // setTimeout(() => { + // button.classList.add('is-active'); + // }, 400); + }); + }); + } +}; + + +export { lazyLoadImages, removeFocusAfterClick }; diff --git a/source/sass/blocks/about.scss b/source/sass/blocks/about.scss new file mode 100644 index 00000000..6531d1f7 --- /dev/null +++ b/source/sass/blocks/about.scss @@ -0,0 +1,286 @@ +.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; + } +} + +.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; + } +} + +.btn--link.about__link span { + @include vp-767 { + width: 34px; + height: 34px; + } +} + +.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; + } +} + +.about__item h4 { + margin: 0; + width: 100%; + max-width: 171px; + color: $color-white; + font-size: 26px; + line-height: 30px; + font-weight: 400; + letter-spacing: 0.26px; + text-transform: uppercase; + + @include vp-1439 { + max-width: 211px; + 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/accordion.scss b/source/sass/blocks/accordion.scss new file mode 100644 index 00000000..e69de29b diff --git a/source/sass/blocks/btn.scss b/source/sass/blocks/btn.scss new file mode 100644 index 00000000..11294509 --- /dev/null +++ b/source/sass/blocks/btn.scss @@ -0,0 +1,207 @@ +.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; + // } + + @include vp-767 { + min-height: 44px; + } +} + + +.btn b { + font-size: 14px; + font-weight: 500; + line-height: 14px; + letter-spacing: 0.28px; + text-align: center; + text-transform: uppercase; + color: $color-action; + transition: color $trans-default; +} + +.btn--link b { + @include vp-767 { + font-size: 12px; + line-height: 12px; + letter-spacing: 0.24px; + } +} + +// .btn--form b { +// color: $color-white; +// } + +.btn span:not(.visually-hidden) { + 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.btn--form span { +// background-color: $color-white; +// } + +.btn--form span::after { + background-color: $color-action; +} + +.btn.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..f727c560 --- /dev/null +++ b/source/sass/blocks/burger.scss @@ -0,0 +1,153 @@ +.nav { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.nav__menu { + margin-top: 4px; + background-color: $color-action; + min-width: 286px; + border-radius: 16px; + padding: 35px 25px; + opacity: 0; + transform: translateY(-100px); + visibility: hidden; + transition: opacity $trans-default, transform $trans-default, visibility $trans-default; +} + +.nav__menu.is-open { + 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/faq-item.scss b/source/sass/blocks/faq-item.scss new file mode 100644 index 00000000..ed83a8d8 --- /dev/null +++ b/source/sass/blocks/faq-item.scss @@ -0,0 +1,227 @@ +.faq-item { + border-radius: 16px; + border: 2px solid $color-action; + background-color: $color-white-alternative; + transition: background-color $trans-default; +} + +.faq-item__text { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 16px; + border: none; + padding: 40px; + background-color: $color-transparent; + font-size: 28px; + line-height: 34px; + font-weight: 400; + text-align: left; + color: $color-action; + cursor: pointer; + transition: color $trans-default; + + + @include vp-1439 { + font-size: 22px; + line-height: 26px; + padding: 30px; + } + + @include vp-767 { + font-size: 16px; + line-height: 18px; + padding-top: 20px; + padding-bottom: 20px; + padding-left: 15px; + padding-right: 15px; + } + + &:active:not(.is-active) { + color: $color-action-alternative; + transition: color $trans-default; + } +} + +.faq-item:not(.is-active):has(.faq-item__text:focus:not(.is-active)), +.faq-item:not(.is-active):has(.faq-item__text:focus-visible:not(.is-active)), +.faq-item:not(.is-active):has(.faq-item__text:hover:not(:focus):not(:focus-visible):not(:active):not(.is-active)), +.faq-item:not(.is-active):has(.faq-item__text:active:not(.is-active)) { + background-color: $color-white; + transition: background-color $trans-default; +} + +.faq-item.is-active { + background-color: $color-action; + border-color: $color-action; + transition: background-color $trans-default, border-color $trans-default; +} + +.faq-item.is-active:has(.faq-item__text:focus), +.faq-item.is-active:has(.faq-item__text:focus-visible), +.faq-item.is-active:has(.faq-item__text:hover:not(:focus):not(:focus-visible):not(:active)) { + border-color: $color-white; + transition: border-color $trans-default; +} + +.faq-item.is-active:has(.faq-item__text:active) { + background-color: $color-action-alternative; + border-color: $color-action-alternative; + transition: background-color $trans-default, border-color $trans-default; +} + +.faq-item__text.is-active { + color: $color-white; + padding-bottom: 20px; + transition: color $trans-default, background-color $trans-default, padding-bottom $trans-default; + + &:active { + transition: background-color $trans-default; + } +} + +.faq-item__indicator { + width: 40px; + height: 40px; + margin-left: 10px; + align-self: start; + flex-shrink: 0; + position: relative; + border-radius: 50%; + border: 1px solid $color-action; + background-color: $color-action; + transition: border-color $trans-default, background-color $trans-default; + + @include vp-767 { + align-self: center; + } + + &::before { + position: absolute; + content: ""; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + mask-repeat: no-repeat; + mask-position: center; + background-color: $color-white; + width: 18px; + height: 18px; + mask-image: url("../__spritemap#sprite-icon-plus-view"); + mask-size: 18px 18px; + transition: background-color $trans-default; + } +} + +.faq-item__text:focus .faq-item__indicator, +.faq-item__text:focus-visible .faq-item__indicator, +.faq-item__text:hover .faq-item__indicator { + background-color: $color-white; + border-color: $color-action; + transition: border-color $trans-default, background-color $trans-default; + + &::before { + background-color: $color-action; + transition: background-color $trans-default; + } +} + +.faq-item__text:active .faq-item__indicator { + background-color: $color-action-alternative; + border-color: $color-action-alternative; + transition: border-color $trans-default, background-color $trans-default; + + &::before { + background-color: $color-white; + transition: background-color $trans-default; + } +} + +.faq-item__text.is-active .faq-item__indicator { + background-color: $color-white; + border-color: $color-white; + transition: border-color $trans-default, background-color $trans-default; +} + +.faq-item__text.is-active:focus .faq-item__indicator, +.faq-item__text.is-active:focus-visible .faq-item__indicator, +.faq-item__text.is-active:hover:not(:focus):not(:focus-visible):not(:active) .faq-item__indicator { + background-color: $color-action; + border-color: $color-white; + transition: border-color $trans-default, background-color $trans-default; +} + +.faq-item__text.is-active .faq-item__indicator::before { + background-color: $color-action; + width: 18px; + height: 2px; + mask-image: url("../__spritemap#sprite-icon-minus-view"); + mask-size: 18px 2px; + transition: background-color $trans-default; +} + +.faq-item__text.is-active:focus .faq-item__indicator::before, +.faq-item__text.is-active:focus-visible .faq-item__indicator::before, +.faq-item__text.is-active:hover:not(:focus):not(:focus-visible):not(:active) .faq-item__indicator::before { + background-color: $color-white; + transition: background-color $trans-default; +} + +.faq-item__text.is-active:active .faq-item__indicator { + background-color: $color-white; + transition: background-color $trans-default; +} + +.faq-item__text.is-active:active .faq-item__indicator::before { + background-color: $color-action-alternative; + transition: background-color $trans-default; +} + +.faq-item__text br { + @include vp-1440 { + display: none; + } + + @include vp-767 { + display: none; + } +} + +.faq-item__content { + max-height: 0; + overflow: hidden; + transition: max-height $trans-default; +} + +.faq-item.is-active .faq-item__content { + max-height: none; + overflow: visible; + transition: max-height $trans-default; +} + +.faq-item__content p { + margin: 0; + padding-left: 40px; + padding-right: 70px; + padding-bottom: 40px; + font-size: 16px; + line-height: 26px; + font-weight: 400; + color: $color-white; + transition: padding $trans-default; + + @include vp-1439 { + line-height: 20px; + padding-left: 30px; + padding-right: 30px; + padding-bottom: 30px; + } + + @include vp-767 { + font-size: 14px; + padding-left: 15px; + padding-right: 15px; + padding-bottom: 20px; + } +} diff --git a/source/sass/blocks/faq.scss b/source/sass/blocks/faq.scss new file mode 100644 index 00000000..4228e42f --- /dev/null +++ b/source/sass/blocks/faq.scss @@ -0,0 +1,56 @@ +.faq { + // background-color: red; + + + padding-top: 60px; + padding-bottom: 60px; + + @include vp-1439 { + padding-top: 50px; + padding-bottom: 50px; + } +} + +.faq__container { + margin: 0 auto; + max-width: 1440px; + padding-left: 206px; + padding-right: 206px; + + @include vp-1439 { + max-width: 768px; + padding-left: 45px; + padding-right: 45px; + } + + @include vp-767 { + max-width: 320px; + padding-left: 15px; + padding-right: 15px; + } +} + +.faq__title { + margin: 0; + margin-bottom: 60px; + padding-top: 11px; + padding-bottom: 11px; + text-align: center; + + @include vp-1439 { + padding: 0; + margin-bottom: 40px; + } + + @include vp-767 { + margin-bottom: 30px; + } +} + +.faq__wrapper { + display: flex; + flex-direction: column; + row-gap: 10px; +} + +.faq__item {} diff --git a/source/sass/blocks/form.scss b/source/sass/blocks/form.scss new file mode 100644 index 00000000..7a352a74 --- /dev/null +++ b/source/sass/blocks/form.scss @@ -0,0 +1,627 @@ +.form { + font-size: 0; + line-height: 0; + padding-top: 60px; + padding-bottom: 60px; + + @include vp-1439 { + padding-top: 50px; + padding-bottom: 50px; + } + + @include vp-767 { + padding-top: 40px; + padding-bottom: 40px; + } +} + +.form .container { + @include vp-1439 { + padding-left: 58px; + padding-right: 58px; + } + + @include vp-767 { + padding-left: 10px; + padding-right: 10px; + padding-top: 43px; + padding-bottom: 40px; + + @supports (background-image: url("image.webp")) { + background-image: url("../../img/background/bg-form-mobile.webp"); + } + + background-image: url("../../img/background/bg-form-mobile.jpg"); + + @media (resolution >=2dppx) { + @supports (background-image: url("image.webp")) { + background-image: url("../../img/background/bg-form-mobile@2x.webp"); + } + + background-image: url("../../img/background/bg-form-mobile@2x.jpg"); + } + } +} + +.form__container { + border-radius: 16px; + background-repeat: no-repeat; + background-size: cover; + background-position: 100% 100%; + + @supports (background-image: url("image.webp")) { + background-image: url("../../img/background/bg-form-desktop.webp"); + } + + background-image: url("../../img/background/bg-form-desktop.jpg"); + + @media (resolution >=2dppx) { + @supports (background-image: url("image.webp")) { + background-image: url("../../img/background/bg-form-desktop@2x.webp"); + } + + background-image: url("../../img/background/bg-form-desktop@2x.jpg"); + } + + @include vp-1439 { + @supports (background-image: url("image.webp")) { + background-image: url("../../img/background/bg-form-tablet.webp"); + } + + background-image: url("../../img/background/bg-form-tablet.jpg"); + + @media (resolution >=2dppx) { + @supports (background-image: url("image.webp")) { + background-image: url("../../img/background/bg-form-tablet@2x.webp"); + } + + background-image: url("../../img/background/bg-form-tablet@2x.jpg"); + } + } + + @include vp-767 { + background-image: none; + } +} + +.form__wrapper { + width: 100%; + max-width: 490px; + padding-left: 70px; + padding-right: 70px; + padding-top: 30px; + padding-bottom: 40px; + background-color: $color-action; + border-radius: 16px; + + + @include vp-1439 { + max-width: 442px; + padding-left: 40px; + padding-right: 40px; + padding-top: 30px; + padding-bottom: 36px; + } + + @include vp-767 { + max-width: 300px; + padding-left: 15px; + padding-right: 15px; + padding-top: 15px; + padding-bottom: 27px; + } +} + +.form__head {} + +.form__head p { + margin: 0; + margin-bottom: 40px; + font-size: 16px; + line-height: 26px; + font-weight: 400; + color: $color-white-alternative; + + @include vp-1439 { + line-height: 20px; + } + + @include vp-767 { + margin-bottom: 22px; + font-size: 14px; + } +} + +.form__title { + font-size: 32px; + line-height: 36px; + font-weight: 400; + margin-bottom: 20px; + padding-top: 14px; + padding-bottom: 14px; + color: $color-white; + + @include vp-1439 { + padding-top: 11px; + padding-bottom: 11px; + font-size: 28px; + line-height: 28px; + } + + @include vp-767 { + padding: 0; + margin-bottom: 9px; + font-size: 18px; + line-height: 22px; + } +} + +.form form { + display: flex; + flex-direction: column; + row-gap: 20px; + + @include vp-767 { + row-gap: 0; + } +} + +.form__field { + display: flex; + flex-direction: column; + + &--name { + @include vp-767 { + margin-bottom: 21px; + } + } + + &--phone { + @include vp-767 { + margin-bottom: 21px; + } + } + + &--message { + @include vp-767 { + margin-bottom: 20px; + } + } + + &--cities { + @include vp-767 { + margin-bottom: 20px; + } + } + + &--consent { + flex-direction: row; + align-items: flex-start; + + @include vp-767 { + margin-bottom: 20px; + } + } +} + +.form__field--name {} + +.form__label { + margin-bottom: 12px; + font-size: 14px; + font-weight: 400; + line-height: 18px; + color: rgba($color-white-alternative, 0.8); + + @include vp-1439 { + line-height: 20px; + } + + @include vp-767 { + margin-bottom: 11px; + font-size: 12px; + line-height: 14px; + } +} + +.form__error-text {} + +.form__field--phone {} + +.form__field--message {} + +.form__field--cities { + position: relative; + + &::after { + position: absolute; + content: ""; + right: 21px; + bottom: 18px; + pointer-events: none; + mask-repeat: no-repeat; + mask-position: center; + background-color: $color-white; + width: 16px; + height: 16px; + mask-image: url("../__spritemap#sprite-icon-select-arrow-view"); + mask-size: 16px 9px; + z-index: 1; + cursor: pointer; + } + + @include vp-1439 { + padding-top: 3px; + } + + @include vp-767 { + max-width: 260px; + padding-top: 1px; + } +} + +.form__field--cities .form__label { + line-height: 14px; + + @include vp-1439 { + margin-bottom: 15px; + } + + @include vp-767 { + margin-bottom: 11px; + } +} + +.form__field--consent { + min-height: 20px; + display: flex; + align-items: center; + font-size: 0; + line-height: 0; + + @include vp-1439 { + padding-top: 1px; + } + + @include vp-767 { + padding-top: 0; + } +} + +.form__field--consent .form__label { + margin-bottom: 0; + padding-left: 30px; + cursor: pointer; + position: relative; + font-size: 12px; + line-height: 12px; + font-weight: 400; + + &::before, + &::after { + position: absolute; + content: ""; + } + + &::before { + width: 20px; + height: 20px; + left: 0; + top: -4px; + background-color: $color-white; + border-radius: 2px; + border: 1px solid $color-white; + transition: background-color $trans-default; + + @include vp-767 { + top: 50%; + transform: translateY(-50%); + } + } + + &::after { + display: none; + mask-repeat: no-repeat; + mask-position: center; + background-color: $color-action; + width: 10px; + height: 10px; + top: 0; + left: 5px; + mask-image: url("../__spritemap#sprite-icon-checked-view"); + mask-size: 10px 8px; + } + + @include vp-767 { + line-height: 14px; + } +} + +.form__field--consent br { + display: none; + + @include vp-767 { + display: inline; + } +} + +.form__field--consent input[type="checkbox"] { + 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%); +} + +.form__field--consent input[type="checkbox"]:focus:not(:checked) + .form__label::before, +.form__field--consent input[type="checkbox"]:focus-visible:not(:checked) + .form__label::before, +.form__field--consent input[type="checkbox"]:hover:not(:checked) + .form__label::before { + background-color: $color-transparent; + transition: background-color $trans-default; +} + +.form__field--consent input[type="checkbox"]:disabled { + cursor: not-allowed; +} + +.form__field--consent input[type="checkbox"]:disabled + .form__label::before { + background-color: rgba($color-white, 0.6); +} + +.form__field--consent.is-error input[type="checkbox"] + .form__label::before { + background-color: rgba($color-error, 0.2); + border-color: rgba($color-error, 0.7); +} + +.form__field--consent input[type="checkbox"]:checked + .form__label::before { + background-color: $color-white; +} + +.form__field--consent input[type="checkbox"]:checked + .form__label::after { + display: block; +} + +.form__field--consent input[type="checkbox"]:checked:focus + .form__label::before, +.form__field--consent input[type="checkbox"]:checked:focus-visible + .form__label::before, +.form__field--consent input[type="checkbox"]:checked:hover + .form__label::before { + background-color: $color-transparent; + transition: background-color $trans-default; +} + +.form__field--consent input[type="checkbox"]:checked:focus + .form__label::after, +.form__field--consent input[type="checkbox"]:checked:focus-visible + .form__label::after, +.form__field--consent input[type="checkbox"]:checked:hover + .form__label::after { + background-color: $color-white; + transition: background-color $trans-default; +} + +.form__field--consent input[type="checkbox"]:disabled:checked { + cursor: not-allowed; +} + +.form__field--consent input[type="checkbox"]:disabled:checked + .form__label::before { + background-color: $color-disabled; + border-color: $color-disabled; +} + +.form__field--consent input[type="checkbox"]:disabled:checked + .form__label::after { + background-color: rgba($color-white, 0.7); +} + +.form__field input:not([type="checkbox"]), +.form__field textarea { + background-color: $color-transparent; + border: 1px solid rgba($color-white, 0.3); + border-radius: 8px; + padding: 13px 20px; + transition: border-color $trans-default; + + &:focus, + &:focus-visible, + &:hover, + &:active { + border-color: $color-white; + transition: border-color $trans-default; + } + + &:disabled { + background-color: rgba($color-white, 0.2); + border-color: rgba($color-white, 0.4); + } +} + +.form__field.is-error input:not([type="checkbox"]) { + background-color: rgba($color-error, 0.2); + border-color: $color-error; +} + +.form__field input:not([type="checkbox"]) { + min-height: 50px; +} + +.form__field textarea { + min-height: 90px; + resize: none; + + @include vp-1439 { + min-height: 88px; + } + + @include vp-767 { + min-height: 94px; + } +} + +.form__field select { + padding: 16px 20px; + background-color: $color-transparent; + border: 1px solid rgba($color-white, 0.3); + min-height: 52px; + border-radius: 8px; + appearance: none; + cursor: pointer; +} + +.form__field option { + padding: 17px 20px; + font-size: 14px; + line-height: 14px; + font-weight: 400; + color: $color-dark; + + &:hover { + background-color: $color-action; + } + +} + +.form__field--btn button { + margin-top: 20px; + padding: 4px; + padding-left: 30px; + border-radius: 30px; + min-height: 56px; + border: 1px solid $color-white; + background-color: $color-transparent; + display: flex; + justify-content: space-between; + align-items: center; + column-gap: 30px; + transition: background-color $trans-default; + cursor: pointer; + + @include vp-1439 { + max-width: 352px; + } + + @include vp-767 { + margin-top: 0; + min-height: 44px; + max-width: 260px; + } +} + +.form__field--btn b { + width: 100%; + max-width: 238px; + font-size: 14px; + font-weight: 500; + line-height: 14px; + letter-spacing: 0.28px; + text-align: center; + text-transform: uppercase; + color: $color-white; + transition: color $trans-default; + border-color: $color-white; + + @include vp-767 { + font-size: 12px; + line-height: 12px; + } +} + +.form__field--btn span { + flex-shrink: 0; + background-color: $color-white; + 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-action; + transition: background-color $trans-default; + width: 8px; + height: 8px; + mask-image: url("../__spritemap#sprite-icon-btn-arrow-view"); + mask-size: 8px 8px; + } + + @include vp-767 { + width: 34px; + height: 34px; + } +} + +.form__field--btn button:focus span::after, +.form__field--btn button:focus-visible span::after { + transform: rotate(45deg) translateX(-4px); + transform-origin: center center; + transition: background-color $trans-default; +} + + +.form__field--btn button:hover:not(:focus):not(:focus-visible):not(:active):not(:disabled) { + background-color: $color-white; + transition: background-color $trans-default; +} + +.form__field--btn button:hover:not(:focus):not(:focus-visible):not(:active):not(:disabled) b { + color: $color-action; + transition: color $trans-default; +} + +.form__field--btn button:hover:not(:focus):not(:focus-visible):not(:active):not(:disabled) span { + background-color: $color-action; + transition: background-color $trans-default; +} + +.form__field--btn button:hover:not(:focus):not(:focus-visible):not(:active):not(:disabled) span::after { + background-color: $color-white; + transform: rotate(45deg) translateX(-4px); + transform-origin: center center; + transition: background-color $trans-default; +} + + +.form__field--btn button:active:not(:disabled) { + background-color: $color-white; + transition: background-color $trans-default; +} + +.form__field--btn button:active:not(:disabled) b { + color: rgba($color-action, 0.7); + transition: color $trans-default; +} + +.form__field--btn button:active:not(:disabled) span { + background-color: $color-action; + transition: background-color $trans-default; +} + +.form__field--btn button:active:not(:disabled) span::after { + background-color: rgba($color-white, 0.7); + transform: rotate(45deg) translateX(-4px); + transform-origin: center center; + transition: background-color $trans-default; +} + +.form__field--btn button:disabled { + border-color: $color-disabled; + cursor: not-allowed; +} + +.form__field--btn button:disabled span { + background-color: $color-disabled; +} + +.form__field--btn button:disabled b { + color: $color-disabled; +} + +.form__field--btn button:disabled span::after { + background-color: rgba($color-white, 0.6); +} diff --git a/source/sass/blocks/grant.scss b/source/sass/blocks/grant.scss new file mode 100644 index 00000000..8a0a43c2 --- /dev/null +++ b/source/sass/blocks/grant.scss @@ -0,0 +1,218 @@ +.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; + } +} + +.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..e57f6926 --- /dev/null +++ b/source/sass/blocks/hero.scss @@ -0,0 +1,59 @@ +.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; + left: 100px; + background-color: $color-white; + z-index: 3; + display: flex; + 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..2d778cb2 --- /dev/null +++ b/source/sass/blocks/logo.scss @@ -0,0 +1,4 @@ +.logo { + font-size: 0; + line-height: 0; +} diff --git a/source/sass/blocks/map.scss b/source/sass/blocks/map.scss new file mode 100644 index 00000000..2c666a42 --- /dev/null +++ b/source/sass/blocks/map.scss @@ -0,0 +1,20 @@ +.map__image { + font-size: 0; + line-height: 0; +} + +.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..83aa6088 --- /dev/null +++ b/source/sass/blocks/nav-footer.scss @@ -0,0 +1,67 @@ +.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: 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/news-slide.scss b/source/sass/blocks/news-slide.scss new file mode 100644 index 00000000..b3c55b66 --- /dev/null +++ b/source/sass/blocks/news-slide.scss @@ -0,0 +1,360 @@ +.news-slide__container { + width: 100%; + min-width: 286px; + min-height: 400px; + height: auto; + position: relative; + display: flex; + align-items: flex-start; + flex-direction: column; + border-radius: 12px; + font-size: 0; + line-height: 0; + + @include vp-1439 { + min-width: 324px; + min-height: 350px; + } + + @include vp-767 { + min-width: 290px; + min-height: 240px; + } +} + +.news-slide--main .news-slide__container { + min-width: 604px; + + @include vp-1439 { + min-width: 324px; + } + + @include vp-767 { + min-width: 290px; + min-height: 330px; + } +} + +.news-slide__container picture { + font-size: 0; + line-height: 0; +} + +.news-slide__container > picture img { + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1; + object-fit: cover; + border-radius: 12px; +} + +.news-slide__content { + width: 100%; + position: relative; + z-index: 3; + margin-top: auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.news-slide__date, +.news-slide__head, +.news-slide__row { + font-size: 0; + line-height: 0; + background-color: $color-white-alternative; + border-radius: 0 12px 0 0; + position: relative; + mask-repeat: no-repeat; + mask-position: center; + + &::before { + position: absolute; + content: ""; + bottom: 0; + right: -16px; + width: 16px; + height: 16px; + background-color: $color-white-alternative; + transform: rotate(-90deg); + mask-size: 16px 16px; + mask-image: url("../__spritemap#sprite-icon-corner-view"); + } +} + +.news-slide__date { + padding-right: 13px; + + padding-bottom: 7px; + padding-top: 12px; + + &::after { + position: absolute; + content: ""; + top: -16px; + left: 0; + width: 16px; + height: 16px; + background-color: $color-white-alternative; + transform: rotate(-90deg); + mask-size: 16px 16px; + mask-image: url("../__spritemap#sprite-icon-corner-view"); + } + + @include vp-1439 { + padding-top: 12px; + padding-bottom: 6px; + } +} + +.news-slide__head { + width: 100%; + max-width: 190px; + padding-right: 18px; + + padding-bottom: 6px; + padding-top: 8px; + + @include vp-1439 { + max-width: 207px; + padding-top: 10px; + padding-bottom: 6px; + } + + @include vp-767 { + max-width: 200px; + padding-top: 10px; + padding-bottom: 4px; + } + +} + +.news-slide__row { + width: 100%; + max-width: 240px; + padding-right: 18px; + display: flex; + justify-content: space-between; + column-gap: 16px; + + + min-height: 63px; + align-items: flex-start; + padding-top: 10px; + padding-bottom: 17px; + + @include vp-1439 { + max-width: 240px; + align-items: center; + padding-top: 12px; + padding-bottom: 15px; + } + + @include vp-767 { + max-width: 263px; + padding-right: 10px; + min-height: 52px; + + padding-top: 0; + padding-bottom: 0; + } +} + +.news-slide--main .news-slide__head { + max-width: 426px; + + padding-bottom: 8px; + padding-top: 16px; + + @include vp-1439 { + padding-top: 8px; + max-width: 207px; + } + + @include vp-767 { + max-width: 200px; + padding-top: 10px; + padding-bottom: 4px; + } +} + +.news-slide--volunteering .news-slide__row { + max-width: 244px; + + @include vp-1439 { + max-width: 240px; + } +} + +.news-slide--main .news-slide__row { + max-width: 468px; + + @include vp-1439 { + max-width: 240px; + } + + @include vp-767 { + max-width: 263px; + padding-top: 13px; + padding-bottom: 9px; + } +} + +.news-slide__content b { + font-size: 12px; + line-height: 12px; + font-weight: 400; + letter-spacing: 0.12px; + color: $color-action; +} + +.news-slide__content h3 { + margin: 0; + font-size: 24px; + line-height: 26px; + font-weight: 400; + color: $color-action; + + @include vp-1439 { + font-size: 20px; + line-height: 24px; + } + + @include vp-767 { + font-size: 16px; + line-height: 18px; + } +} + +.news-slide__content p { + margin: 0; + font-size: 14px; + line-height: 18px; + font-weight: 400; + + @include vp-1439 { + line-height: 20px; + } + + @include vp-767 { + font-size: 12px; + line-height: 14px; + } +} + +.news-slide__btn { + width: 30px; + height: 30px; + background-color: $color-action; + border-radius: 50%; + position: relative; + flex-shrink: 0; + transition: background-color $trans-default; + + margin-top: 4px; + + &::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; + } + + @include vp-1439 { + margin-top: 0; + } + + @include vp-767 { + margin-bottom: 1px; + } +} + +.news-slide__btn:hover:not(.disabled):not(:focus-visible):not(:active) { + background-color: $color-action; + transition: background-color $trans-default; +} + +.news-slide__btn:active { + background-color: $color-action; + transition: background-color $trans-default, opacity $trans-default; + opacity: 0.7; +} + +.news-slide__btn:focus::after, +.news-slide__btn:focus-visible::after { + transform: rotate(45deg) translateX(-4px); + transform-origin: center center; +} + +.news-slide__btn.disabled { + pointer-events: none; + border-color: $color-disabled; +} + +.news-slide__btn:hover:not(.disabled):not(:focus):not(:focus-visible):not(:active), +.news-slide__btn:active { + background-color: $color-white; + transition: background-color $trans-default; +} + +.news-slide__btn:hover:not(.disabled):not(:focus):not(:focus-visible):not(:active)::after, +.news-slide__btn:active::after { + background-color: $color-action; + transform: rotate(45deg) translateX(-4px); + transform-origin: center center; + transition: background-color $trans-default; +} + +.news-tab__navigation { + display: flex; + align-items: center; +} + +.news-tab__slider-pagination.swiper-pagination-bullets.swiper-pagination-clickable { + display: inline-flex; + column-gap: 20px; + width: auto; + + @include vp-767 { + column-gap: 16px; + } +} + +.news-tab__slider-bullet { + width: 32px; + height: 32px; + background-color: $color-transparent; + border-radius: 50%; + border: none; + color: rgba($color-action, 0.5); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + @include vp-767 { + width: 26px; + height: 26px; + } +} + +.news-tab__slider-bullet--is-active { + background-color: $color-action; + color: $color-white; +} diff --git a/source/sass/blocks/news-tab.scss b/source/sass/blocks/news-tab.scss new file mode 100644 index 00000000..50cc0fa6 --- /dev/null +++ b/source/sass/blocks/news-tab.scss @@ -0,0 +1,165 @@ +.news-tab__controls { + margin-bottom: 40px; + display: flex; + justify-content: center; + align-items: flex-start; + flex-wrap: wrap; + column-gap: 30px; + row-gap: 15px; + + @include vp-1439 { + margin-bottom: 30px; + width: 100%; + max-width: 674px; + column-gap: 6px; + margin-left: auto; + margin-right: auto; + justify-content: space-between; + } + + @include vp-767 { + flex-wrap: nowrap; + overflow-x: hidden; + // overflow-x: auto; + column-gap: 10px; + margin-bottom: 24px; + } +} + +.news-tab__control { + width: 100%; + max-width: 120px; + padding-top: 14px; + padding-bottom: 14px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 20px; + background-color: $color-transparent; + border: 2px solid $color-transparent; + font-size: 14px; + line-height: 14px; + font-weight: 500; + letter-spacing: 0.28px; + text-transform: uppercase; + text-align: center; + color: rgba($color-action, 0.6); + cursor: pointer; + transition: background-color $trans-default, color $trans-default, border-color $trans-default; + + &:focus:not(:disabled), + &:focus-visible:not(:disabled) { + background-color: $color-white; + border-color: $color-white; + color: rgba($color-action, 1); + transition: background-color $trans-default, color $trans-default, border-color $trans-default; + } + + &:hover:not(:disabled):not(:focus):not(:focus-visible):not(:active) { + color: rgba($color-action, 1); + transition: color $trans-default; + } + + &:active:not(:disabled) { + background-color: $color-transparent; + color: $color-action; + border-color: $color-action; + transition: background-color $trans-default, color $trans-default, border-color $trans-default; + } + + &:disabled { + opacity: 0.3; + } + + @include vp-1439 { + width: auto; + max-width: none; + padding-left: 20px; + padding-right: 20px; + } + + @include vp-767 { + font-size: 12px; + line-height: 12px; + letter-spacing: 0.24px; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 14px; + padding-right: 14px; + } +} + +.news-tab__control.is-active { + background-color: $color-transparent; + color: $color-action; + border-color: $color-action; +} + +.news-tab__element { + display: none; +} + +.news-tab__element.is-active { + display: block; +} + +.news-tab__slider { + margin-bottom: 39px; + + @include vp-1439 { + margin-bottom: 11px; + } + + @include vp-767 { + margin-bottom: 25px; + } +} + +.news-tab__wrapper.swiper-wrapper { + @include vp-1439 { + flex-wrap: wrap; + flex-direction: column; + row-gap: 30px; + // column-gap: 30px; + height: 748px; + } + + @include vp-767 { + row-gap: 20px; + height: 590px; + // column-gap: 0; + } +} + +.news-tab__slide.swiper-slide { + width: auto !important; + + @include vp-1439 { + // max-width: none; + // width: 324px; + // height: 350px; + height: auto !important; + } + + @include vp-767 { + // width: 290px; + // height: 240px; + } +} + +.news-tab__slide.news-slide--main.swiper-slide { + // max-width: 604px; + + @include vp-1439 { + // max-width: none; + } + + @include vp-767 { + // width: 290px; + // height: 330px; + } +} + +.news-tab__navigation.slider__navigation { + max-width: none; +} diff --git a/source/sass/blocks/news.scss b/source/sass/blocks/news.scss new file mode 100644 index 00000000..39c5dd49 --- /dev/null +++ b/source/sass/blocks/news.scss @@ -0,0 +1,24 @@ +.news { + padding-top: 60px; + padding-bottom: 60px; + + @include vp-1439 { + padding-top: 50px; + padding-bottom: 50px; + } +} + +.news__title { + text-align: center; + margin-bottom: 40px; + + @include vp-1439 { + margin-bottom: 30px; + } + + @include vp-767 { + margin-bottom: 24px; + } +} + +.news__tabs {} diff --git a/source/sass/blocks/page-footer.scss b/source/sass/blocks/page-footer.scss new file mode 100644 index 00000000..304afe1a --- /dev/null +++ b/source/sass/blocks/page-footer.scss @@ -0,0 +1,228 @@ +.page-footer { + padding-top: 60px; + padding-bottom: 40px; + + @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--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..5cf971b0 --- /dev/null +++ b/source/sass/blocks/programs-slide.scss @@ -0,0 +1,234 @@ +.programs-slide.swiper-slide { + width: 100%; + max-width: 392px; + position: relative; + height: auto; + min-height: 420px; + padding-top: 280px; + padding-left: 20px; + padding-bottom: 17px; + + &::before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 2; + background-color: $color-overlay; + border-radius: 12px; + } + + @include vp-1439 { + max-width: 324px; + padding-top: 285px; + padding-bottom: 10px; + } + + @include vp-767 { + max-width: none; + min-height: 400px; + padding-top: 271px; + padding-bottom: 18px; + padding-left: 10px; + padding-right: 10px; + } +} + +.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; + border-radius: 12px; +} + +.programs-slide__content { + position: relative; + z-index: 3; + 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; + max-width: none; + } + +} + +.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"); + } + + @include vp-1439 { + max-width: 173px; + } + + @include vp-767 { + max-width: 146px; + } +} + +.programs-slide__row { + background-color: $color-white; + border-radius: 0 12px 12px 12px; + max-width: 321px; + display: flex; + justify-content: space-between; + padding-left: 18px; + padding-right: 18px; + align-items: center; + min-height: 82px; + padding-top: 12px; + padding-bottom: 16px; + + @include vp-1439 { + max-width: 284px; + min-height: 87px; + padding-top: 9px; + padding-bottom: 15px; + } + + @include vp-767 { + max-width: 270px; + min-height: 69px; + padding-top: 12px; + } +} + +.programs-slide__row br { + @include vp-1440 { + display: none; + } + + @include vp-767 { + display: none; + } +} + +.programs-slide__btn { + width: 30px; + height: 30px; + background-color: $color-action; + border-radius: 50%; + 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):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):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.scss b/source/sass/blocks/programs.scss new file mode 100644 index 00000000..303759ab --- /dev/null +++ b/source/sass/blocks/programs.scss @@ -0,0 +1,129 @@ +.programs { + padding-top: 62px; + padding-bottom: 59px; + + @include vp-1439 { + padding-top: 50px; + padding-bottom: 50px; + } + + @include vp-767 { + padding-bottom: 49px; + } +} + +.programs__container { + margin: 0 auto; + padding-left: 100px; + padding-right: 100px; + width: 100%; + max-width: 1440px; + display: grid; + grid-template-columns: repeat(5, auto); + grid-column-gap: 0; + grid-row-gap: 40px; + justify-content: space-between; + justify-items: start; + align-items: start; + align-content: start; + grid-row-gap: 42px; + grid-template-rows: auto minmax(420px, auto) auto; + + @include vp-1439 { + max-width: 768px; + padding-right: 0; + padding-left: 45px; + grid-row-gap: 40px; + } + + @include vp-767 { + padding: 0 15px; + max-width: 320px; + grid-template-columns: repeat(3, auto); + grid-row-gap: 30px; + grid-template-rows: minmax(30px, auto) minmax(400px, auto) auto; + grid-row-gap: 30px; + } +} + +.programs__title { + grid-area: 1 / 1 / 2 / 3; + justify-self: start; + margin-top: 3px; + + @include vp-767 { + grid-area: 1 / 1 / 2 / 2; + margin-top: 5px; + } +} + +.programs__btn { + min-width: 234px; + grid-area: 1 / 3 / 2 / 6; + justify-self: end; + + @include vp-1439 { + margin-right: 45px; + } + + @include vp-767 { + margin-right: 0; + grid-area: 3 / 1 / 4 / 2; + min-width: 205px; + justify-self: start; + padding-left: 30px; + } +} + +.btn--link.programs__btn span { + @include vp-767 { + width: 34px; + height: 34px; + } +} + +.programs__slider.swiper { + width: 100%; + height: 100%; + grid-area: 2 / 1 / 3 / 6; + + @include vp-1439 { + max-width: 768px; + } + + @include vp-767 { + grid-area: 2 / 1 / 3 / 3; + max-width: 290px; + } +} + +.programs__scrollbar { + grid-area: 3 / 1 / 4 / 5; + align-self: center; + width: 1136px; + + @include vp-1439 { + width: 562px; + } + + @include vp-767 { + display: none; + } +} + +.programs__navigation { + grid-area: 3 / 5 / 4 / 6; + align-self: center; + justify-self: end; + + @include vp-1439 { + margin-right: 45px; + } + + @include vp-767 { + margin-right: 0; + grid-area: 1 / 2 / 2 / 3; + align-self: start; + margin-top: 3px; + } +} diff --git a/source/sass/blocks/reviews-slide.scss b/source/sass/blocks/reviews-slide.scss new file mode 100644 index 00000000..b35ebc5e --- /dev/null +++ b/source/sass/blocks/reviews-slide.scss @@ -0,0 +1,176 @@ +.reviews-slide.swiper-slide { + width: 100%; + max-width: 604px; + padding-top: 50px; + padding-bottom: 50px; + padding-left: 50px; + padding-right: 46px; + border-radius: 16px; + border: 2px solid $color-action; + + @include vp-1439 { + padding-right: 50px; + max-width: 560px; + } + + @include vp-767 { + max-width: none; + padding-top: 30px; + padding-bottom: 30px; + padding-left: 15px; + padding-right: 15px; + } +} + +.reviews-slide__head { + display: flex; + align-items: center; + margin-bottom: 30px; + + @include vp-767 { + flex-wrap: wrap; + align-items: flex-start; + row-gap: 15px; + margin-bottom: 25px; + } +} + +.reviews-slide__col { + &--avatar { + display: grid; + grid-template-columns: 90px auto; + grid-template-rows: repeat(2, auto); + grid-column-gap: 15px; + grid-row-gap: 0; + margin-right: auto; + + @include vp-767 { + width: 100%; + grid-template-columns: 60px auto; + grid-column-gap: 10px; + justify-items: start; + } + } + + &--program { + margin-right: 25px; + } + + &--program, + &--date { + display: flex; + flex-direction: column; + align-items: flex-start; + row-gap: 11px; + + @include vp-767 { + row-gap: 8px; + } + } +} + +.reviews-slide__avatar { + font-size: 0; + line-height: 0; + grid-area: 1 / 1 / 3 / 2; +} + +.reviews-slide__avatar img { + display: block; + width: 90px; + height: 90px; + border-radius: 50%; + + @include vp-767 { + width: 60px; + height: 60px; + } +} + +.reviews-slide__col--avatar b { + font-size: 18px; + line-height: 24px; + font-weight: 400; + color: $color-action; + + &:first-of-type { + grid-area: 1 / 2 / 2 / 3; + align-self: end; + } + + &:last-of-type { + grid-area: 2 / 2 / 3 / 3; + align-self: start; + } + + @include vp-1439 { + font-size: 20px; + } + + @include vp-767 { + font-size: 14px; + line-height: 18px; + } +} + +.reviews-slide__col--program b, +.reviews-slide__col--date b { + font-size: 12px; + line-height: 12px; + font-weight: 400; + letter-spacing: 0.12px; + color: $color-action; + text-transform: uppercase; +} + +.reviews-slide__col--program span, +.reviews-slide__col--date span { + font-size: 14px; + line-height: 18px; + font-weight: 400; + + @include vp-1439 { + line-height: 20px; + } + + @include vp-767 { + font-size: 12px; + line-height: 14px; + } +} + +.reviews-slide__content h3 { + margin: 0; + margin-bottom: 25px; + font-size: 24px; + line-height: 26px; + font-weight: 400; + color: $color-action; + + @include vp-1439 { + font-size: 20px; + line-height: 24px; + } + + @include vp-767 { + font-size: 16px; + line-height: 18px; + margin-bottom: 20px; + } +} + +.reviews-slide__content p { + margin: 0; + font-size: 16px; + line-height: 26px; + font-weight: 400; + + @include vp-1439 { + font-size: 16px; + line-height: 20px; + } + + @include vp-767 { + font-size: 14px; + } +} diff --git a/source/sass/blocks/reviews.scss b/source/sass/blocks/reviews.scss new file mode 100644 index 00000000..b57f624d --- /dev/null +++ b/source/sass/blocks/reviews.scss @@ -0,0 +1,102 @@ +.reviews { + padding-top: 65px; + padding-bottom: 60px; + + @include vp-1439 { + padding-top: 50px; + padding-bottom: 51px; + } +} + +.reviews__container { + 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 { + max-width: 768px; + padding-right: 0; + padding-left: 45px; + } + + @include vp-767 { + padding: 0 15px; + max-width: 320px; + grid-template-columns: repeat(2, auto); + grid-template-rows: minmax(30px, auto) auto; + grid-row-gap: 30px; + } +} + +.reviews__title { + grid-area: 1 / 1 / 2 / 4; + margin-left: 3px; + justify-self: start; + + @include vp-1439 { + margin-left: 0; + } + + @include vp-767 { + grid-area: 1 / 1 / 2 / 2; + align-self: center; + margin: 0; + } +} + +.reviews__slider.swiper { + grid-area: 2 / 1 / 3 / 4; + width: 100%; + height: 100%; + padding-top: 5px; + + @include vp-1439 { + max-width: 768px; + padding-top: 0; + } + + @include vp-767 { + max-width: 290px; + grid-area: 2 / 1 / 3 / 3; + } +} + +.reviews__scrollbar { + grid-area: 3 / 1 / 4 / 3; + align-self: center; + width: 1136px; + + @include vp-1439 { + width: 562px; + } + + @include vp-767 { + display: none; + } +} + +.reviews__navigation { + grid-area: 3 / 3 / 4 / 4; + align-self: center; + justify-self: end; + + @include vp-1439 { + margin-right: 45px; + } + + @include vp-767 { + margin-right: 0; + grid-area: 1 / 2 / 2 / 3; + } +} 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..90418eb5 --- /dev/null +++ b/source/sass/blocks/slider.scss @@ -0,0 +1,78 @@ +.slider__navigation { + display: flex; + justify-content: space-between; + align-items: flex-start; + width: 100%; + max-width: 54px; + column-gap: 10px; + + @include vp-767 { + max-width: 52px; + } +} + +.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; +} + +.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/tabs.scss b/source/sass/blocks/tabs.scss new file mode 100644 index 00000000..e69de29b 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..90547035 --- /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.3); +$fz-default: 16px; +$font-family: "Manrope", "Arial", sans-serif; +$ff-placeholder: $font-family; + +// Animation +// --------------------------------- + +$tf-default: ease; +$trans-default: 0.3s $tf-default; diff --git a/source/sass/style.scss b/source/sass/style.scss index 96467369..605a64b2 100644 --- a/source/sass/style.scss +++ b/source/sass/style.scss @@ -2,3 +2,43 @@ // --------------------------------- @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/slider"; +@import "blocks/accordion"; +@import "blocks/tabs"; +@import "blocks/section-title"; +@import "blocks/btn"; +@import "blocks/page-header"; +@import "blocks/logo"; +@import "blocks/burger"; +@import "blocks/hero"; +@import "blocks/hero-slide"; +@import "blocks/about"; +@import "blocks/programs"; +@import "blocks/programs-slide"; +@import "blocks/grant"; +@import "blocks/news"; +@import "blocks/news-tab"; +@import "blocks/news-slide"; +@import "blocks/faq"; +@import "blocks/faq-item"; +@import "blocks/reviews"; +@import "blocks/reviews-slide"; +@import "blocks/contacts"; +@import "blocks/map"; +@import "blocks/form"; +@import "blocks/page-footer"; +@import "blocks/nav-footer"; +@import "blocks/social";