diff --git a/source/fonts/AlumniSans-ExtraBold.woff b/source/fonts/AlumniSans-ExtraBold.woff new file mode 100644 index 00000000..8076e21a Binary files /dev/null and b/source/fonts/AlumniSans-ExtraBold.woff differ diff --git a/source/fonts/AlumniSans-ExtraBold.woff2 b/source/fonts/AlumniSans-ExtraBold.woff2 new file mode 100644 index 00000000..493cd8ba Binary files /dev/null and b/source/fonts/AlumniSans-ExtraBold.woff2 differ diff --git a/source/fonts/AlumniSans-SemiBold.woff b/source/fonts/AlumniSans-SemiBold.woff new file mode 100644 index 00000000..3dbe6620 Binary files /dev/null and b/source/fonts/AlumniSans-SemiBold.woff differ diff --git a/source/fonts/AlumniSans-SemiBold.woff2 b/source/fonts/AlumniSans-SemiBold.woff2 new file mode 100644 index 00000000..7431d506 Binary files /dev/null and b/source/fonts/AlumniSans-SemiBold.woff2 differ diff --git a/source/fonts/RobotoCondensed-Bold.woff b/source/fonts/RobotoCondensed-Bold.woff new file mode 100644 index 00000000..0ee71b84 Binary files /dev/null and b/source/fonts/RobotoCondensed-Bold.woff differ diff --git a/source/fonts/RobotoCondensed-Bold.woff2 b/source/fonts/RobotoCondensed-Bold.woff2 new file mode 100644 index 00000000..f096ccbc Binary files /dev/null and b/source/fonts/RobotoCondensed-Bold.woff2 differ diff --git a/source/fonts/RobotoCondensed-Light.woff b/source/fonts/RobotoCondensed-Light.woff new file mode 100644 index 00000000..0299bc8c Binary files /dev/null and b/source/fonts/RobotoCondensed-Light.woff differ diff --git a/source/fonts/RobotoCondensed-Light.woff2 b/source/fonts/RobotoCondensed-Light.woff2 new file mode 100644 index 00000000..316d10e4 Binary files /dev/null and b/source/fonts/RobotoCondensed-Light.woff2 differ diff --git a/source/fonts/RobotoCondensed-Regular.woff b/source/fonts/RobotoCondensed-Regular.woff new file mode 100644 index 00000000..ea4f6fa4 Binary files /dev/null and b/source/fonts/RobotoCondensed-Regular.woff differ diff --git a/source/fonts/RobotoCondensed-Regular.woff2 b/source/fonts/RobotoCondensed-Regular.woff2 new file mode 100644 index 00000000..a73581d9 Binary files /dev/null and b/source/fonts/RobotoCondensed-Regular.woff2 differ diff --git a/source/img/action-desktop.jpg b/source/img/action-desktop.jpg new file mode 100644 index 00000000..fb07660d Binary files /dev/null and b/source/img/action-desktop.jpg differ diff --git a/source/img/action-desktop@2x.jpg b/source/img/action-desktop@2x.jpg new file mode 100644 index 00000000..5fb0baee Binary files /dev/null and b/source/img/action-desktop@2x.jpg differ diff --git a/source/img/action-mobile.jpg b/source/img/action-mobile.jpg new file mode 100644 index 00000000..5dfaaf78 Binary files /dev/null and b/source/img/action-mobile.jpg differ diff --git a/source/img/action-mobile@2x.jpg b/source/img/action-mobile@2x.jpg new file mode 100644 index 00000000..2dafe2c6 Binary files /dev/null and b/source/img/action-mobile@2x.jpg differ diff --git a/source/img/action-tablet.jpg b/source/img/action-tablet.jpg new file mode 100644 index 00000000..2fc09bb7 Binary files /dev/null and b/source/img/action-tablet.jpg differ diff --git a/source/img/action-tablet@2x.jpg b/source/img/action-tablet@2x.jpg new file mode 100644 index 00000000..c841ae22 Binary files /dev/null and b/source/img/action-tablet@2x.jpg differ diff --git a/source/img/avatar.png b/source/img/avatar.png new file mode 100644 index 00000000..16a7cf00 Binary files /dev/null and b/source/img/avatar.png differ diff --git a/source/img/avatar@2x.png b/source/img/avatar@2x.png new file mode 100644 index 00000000..b1c9dd4b Binary files /dev/null and b/source/img/avatar@2x.png differ diff --git a/source/img/decor-desktop.png b/source/img/decor-desktop.png new file mode 100644 index 00000000..ab2e1635 Binary files /dev/null and b/source/img/decor-desktop.png differ diff --git a/source/img/decor-desktop@2x.png b/source/img/decor-desktop@2x.png new file mode 100644 index 00000000..2f86a164 Binary files /dev/null and b/source/img/decor-desktop@2x.png differ diff --git a/source/img/decor-tablet.png b/source/img/decor-tablet.png new file mode 100644 index 00000000..d9ca21d0 Binary files /dev/null and b/source/img/decor-tablet.png differ diff --git a/source/img/decor-tablet@2x.png b/source/img/decor-tablet@2x.png new file mode 100644 index 00000000..6e242b6b Binary files /dev/null and b/source/img/decor-tablet@2x.png differ diff --git a/source/img/games-desktop.jpg b/source/img/games-desktop.jpg new file mode 100644 index 00000000..20b3e757 Binary files /dev/null and b/source/img/games-desktop.jpg differ diff --git a/source/img/games-desktop@2x.jpg b/source/img/games-desktop@2x.jpg new file mode 100644 index 00000000..0065abb5 Binary files /dev/null and b/source/img/games-desktop@2x.jpg differ diff --git a/source/img/games-mobile.jpg b/source/img/games-mobile.jpg new file mode 100644 index 00000000..63ef64d2 Binary files /dev/null and b/source/img/games-mobile.jpg differ diff --git a/source/img/games-mobile@2x.jpg b/source/img/games-mobile@2x.jpg new file mode 100644 index 00000000..a08293b2 Binary files /dev/null and b/source/img/games-mobile@2x.jpg differ diff --git a/source/img/games-tablet.jpg b/source/img/games-tablet.jpg new file mode 100644 index 00000000..c794bbf0 Binary files /dev/null and b/source/img/games-tablet.jpg differ diff --git a/source/img/games-tablet@2x.jpg b/source/img/games-tablet@2x.jpg new file mode 100644 index 00000000..c352a63c Binary files /dev/null and b/source/img/games-tablet@2x.jpg differ diff --git a/source/img/gym-desktop.jpg b/source/img/gym-desktop.jpg new file mode 100644 index 00000000..b6e872b7 Binary files /dev/null and b/source/img/gym-desktop.jpg differ diff --git a/source/img/gym-desktop@2x.jpg b/source/img/gym-desktop@2x.jpg new file mode 100644 index 00000000..cff9d0b5 Binary files /dev/null and b/source/img/gym-desktop@2x.jpg differ diff --git a/source/img/gym-mobile.jpg b/source/img/gym-mobile.jpg new file mode 100644 index 00000000..786b98ff Binary files /dev/null and b/source/img/gym-mobile.jpg differ diff --git a/source/img/gym-mobile@2x.jpg b/source/img/gym-mobile@2x.jpg new file mode 100644 index 00000000..511e98c8 Binary files /dev/null and b/source/img/gym-mobile@2x.jpg differ diff --git a/source/img/gym-tablet.jpg b/source/img/gym-tablet.jpg new file mode 100644 index 00000000..885805d5 Binary files /dev/null and b/source/img/gym-tablet.jpg differ diff --git a/source/img/gym-tablet@2x.jpg b/source/img/gym-tablet@2x.jpg new file mode 100644 index 00000000..536e6879 Binary files /dev/null and b/source/img/gym-tablet@2x.jpg differ diff --git a/source/img/hero-desktop.jpg b/source/img/hero-desktop.jpg new file mode 100644 index 00000000..d0127e34 Binary files /dev/null and b/source/img/hero-desktop.jpg differ diff --git a/source/img/hero-desktop@2x.jpg b/source/img/hero-desktop@2x.jpg new file mode 100644 index 00000000..cd58122f Binary files /dev/null and b/source/img/hero-desktop@2x.jpg differ diff --git a/source/img/hero-tablet.jpg b/source/img/hero-tablet.jpg new file mode 100644 index 00000000..c6de4171 Binary files /dev/null and b/source/img/hero-tablet.jpg differ diff --git a/source/img/hero-tablet@2x.jpg b/source/img/hero-tablet@2x.jpg new file mode 100644 index 00000000..7f9e401f Binary files /dev/null and b/source/img/hero-tablet@2x.jpg differ diff --git a/source/img/jury/trainer-1.jpg b/source/img/jury/trainer-1.jpg new file mode 100644 index 00000000..04fb4399 Binary files /dev/null and b/source/img/jury/trainer-1.jpg differ diff --git a/source/img/jury/trainer-1@2x.jpg b/source/img/jury/trainer-1@2x.jpg new file mode 100644 index 00000000..12824a9a Binary files /dev/null and b/source/img/jury/trainer-1@2x.jpg differ diff --git a/source/img/jury/trainer-2.jpg b/source/img/jury/trainer-2.jpg new file mode 100644 index 00000000..a2f1ef9b Binary files /dev/null and b/source/img/jury/trainer-2.jpg differ diff --git a/source/img/jury/trainer-2@2x.jpg b/source/img/jury/trainer-2@2x.jpg new file mode 100644 index 00000000..58a9c27f Binary files /dev/null and b/source/img/jury/trainer-2@2x.jpg differ diff --git a/source/img/jury/trainer-3.jpg b/source/img/jury/trainer-3.jpg new file mode 100644 index 00000000..4120bb8d Binary files /dev/null and b/source/img/jury/trainer-3.jpg differ diff --git a/source/img/jury/trainer-3@2x.jpg b/source/img/jury/trainer-3@2x.jpg new file mode 100644 index 00000000..0347490e Binary files /dev/null and b/source/img/jury/trainer-3@2x.jpg differ diff --git a/source/img/jury/trainer-4.jpg b/source/img/jury/trainer-4.jpg new file mode 100644 index 00000000..a4add906 Binary files /dev/null and b/source/img/jury/trainer-4.jpg differ diff --git a/source/img/jury/trainer-4@2x.jpg b/source/img/jury/trainer-4@2x.jpg new file mode 100644 index 00000000..4a51cb84 Binary files /dev/null and b/source/img/jury/trainer-4@2x.jpg differ diff --git a/source/img/sprite/icon-minus.svg b/source/img/sprite/icon-minus.svg new file mode 100644 index 00000000..cd86520c --- /dev/null +++ b/source/img/sprite/icon-minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/sprite/icon-ok.svg b/source/img/sprite/icon-ok.svg new file mode 100644 index 00000000..5b337855 --- /dev/null +++ b/source/img/sprite/icon-ok.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/sprite/icon-play.svg b/source/img/sprite/icon-play.svg new file mode 100644 index 00000000..8c21013b --- /dev/null +++ b/source/img/sprite/icon-play.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/sprite/icon-plus.svg b/source/img/sprite/icon-plus.svg new file mode 100644 index 00000000..9da3543f --- /dev/null +++ b/source/img/sprite/icon-plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/sprite/icon-reddit.svg b/source/img/sprite/icon-reddit.svg new file mode 100644 index 00000000..ecc8517a --- /dev/null +++ b/source/img/sprite/icon-reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/sprite/icon-rubble.svg b/source/img/sprite/icon-rubble.svg new file mode 100644 index 00000000..294e62ee --- /dev/null +++ b/source/img/sprite/icon-rubble.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/source/img/sprite/icon-vk.svg b/source/img/sprite/icon-vk.svg new file mode 100644 index 00000000..b5a78c39 --- /dev/null +++ b/source/img/sprite/icon-vk.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/svg/logo.svg b/source/img/svg/logo.svg new file mode 100644 index 00000000..f2ead4cf --- /dev/null +++ b/source/img/svg/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/source/img/svg/video-btn-active.svg b/source/img/svg/video-btn-active.svg new file mode 100644 index 00000000..8be25635 --- /dev/null +++ b/source/img/svg/video-btn-active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/source/img/svg/video-btn-default.svg b/source/img/svg/video-btn-default.svg new file mode 100644 index 00000000..43850be8 --- /dev/null +++ b/source/img/svg/video-btn-default.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/source/img/svg/video-btn-disabled.svg b/source/img/svg/video-btn-disabled.svg new file mode 100644 index 00000000..238977aa --- /dev/null +++ b/source/img/svg/video-btn-disabled.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/source/img/svg/video-btn-focus.svg b/source/img/svg/video-btn-focus.svg new file mode 100644 index 00000000..acd2c9fd --- /dev/null +++ b/source/img/svg/video-btn-focus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/source/img/svg/video-btn-hover.svg b/source/img/svg/video-btn-hover.svg new file mode 100644 index 00000000..243fbddb --- /dev/null +++ b/source/img/svg/video-btn-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/source/img/video-preview-desktop.jpg b/source/img/video-preview-desktop.jpg new file mode 100644 index 00000000..ad8fc92a Binary files /dev/null and b/source/img/video-preview-desktop.jpg differ diff --git a/source/img/video-preview-desktop@2x.jpg b/source/img/video-preview-desktop@2x.jpg new file mode 100644 index 00000000..5226d263 Binary files /dev/null and b/source/img/video-preview-desktop@2x.jpg differ diff --git a/source/img/video-preview-mobile.jpg b/source/img/video-preview-mobile.jpg new file mode 100644 index 00000000..31bd5fdf Binary files /dev/null and b/source/img/video-preview-mobile.jpg differ diff --git a/source/img/video-preview-mobile@2x.jpg b/source/img/video-preview-mobile@2x.jpg new file mode 100644 index 00000000..abc22a20 Binary files /dev/null and b/source/img/video-preview-mobile@2x.jpg differ diff --git a/source/img/video-preview-tablet.jpg b/source/img/video-preview-tablet.jpg new file mode 100644 index 00000000..2586ad79 Binary files /dev/null and b/source/img/video-preview-tablet.jpg differ diff --git a/source/img/video-preview-tablet@2x.jpg b/source/img/video-preview-tablet@2x.jpg new file mode 100644 index 00000000..00b2d76e Binary files /dev/null and b/source/img/video-preview-tablet@2x.jpg differ diff --git a/source/index.html b/source/index.html index efa99257..558b566f 100644 --- a/source/index.html +++ b/source/index.html @@ -1,32 +1,213 @@ - - - + + SUPERGYM - + - - Это спрайт - - - - -
hero
-
about
-
price
-
games
-
juri
-
features
-
offers
-
faq
-
reviews
-
form
-
footer
+
+
+
+
+
+ +
+ 8 800 555-55-55 +
+
+
+
+
+
+
Омск
+
+
    +
  • Тренажёрный зал
    • +
  • Групповые занятия
    • +
  • Кардио-зона
    • +
+
+

ФИТНЕС ЦЕНТР

+
+ Купить абонемент +
+
+ + + + + + + + Мужчина, в спортивной темной майке с логотипом на груди в виде буквы S, смотрит в лево. + +
+
+
+
+
+
+
+
+
+
+

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

+

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

+
+ +
+

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

+

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

+
+
+
+ + + + + + + + + + + + . + +
+
+
+ + + + + + + + + + + + . + + +
+
+
+
+
+
+
+
offers
+
+ +
- diff --git a/source/sass/blocks/about.scss b/source/sass/blocks/about.scss new file mode 100644 index 00000000..cd7bf3e6 --- /dev/null +++ b/source/sass/blocks/about.scss @@ -0,0 +1,217 @@ +.about { + padding-top: 120px; + padding-bottom: 240px; + @include vp-1199 { + padding-top: 60px; + padding-bottom: 120px; + } + @include vp-767 { + padding-top: 40px; + padding-bottom: 40px; + } + & .container { + @include vp-767 { + padding: 0; + } + } +} +.about__wrapper { + display: flex; + justify-content: space-between; + position: relative; + @include vp-1199 { + flex-direction: column; + justify-content: flex-start; + } +} +.about__col { + &--content { + max-width: 355px; + @include vp-1199 { + max-width: 100%; + } + @include vp-767 { + padding: 0 15px; + } + } + &--img { + flex-shrink: 0; + @include vp-767 { + margin-bottom: 36px; + } + } +} + +.about__head { + margin-bottom: 95px; + @include vp-1199 { + margin-bottom: 36px; + } +} +.about__title { + margin: 0; + margin-bottom: 25px; + @include vp-1199 { + text-align: center; + margin-bottom: 20px; + } + @include vp-767 { + text-align: left; + margin-bottom: 12px; + } +} + +.about__descr { + margin: 0; + font-family: $font-family; + font-weight: 400; + font-size: 22px; + line-height: 22px; + color: $color-dark; + @include vp-1199 { + text-align: center; + font-size: 20px; + line-height: 20px; + } + @include vp-767 { + text-align: left; + font-size: 18px; + } +} + +.about__content { + @include vp-1199 { + max-width: 502px; + margin: 0 auto; + } + + @include vp-767 { + max-width: 100%; + margin: 0; + } +} + +.about__content p { + font-family: $font-family; + font-weight: 300; + font-size: 16px; + line-height: 24px; + color: $text-dark; + margin: 0; + @include vp-1199 { + text-align: center; + } + @include vp-767 { + font-size: 14px; + line-height: 22px; + text-align: left; + } + + &:nth-child(n + 1) { + margin-bottom: 8px; + @include vp-1199 { + margin-bottom: 36px; + } + } + &:nth-child(n + 2) { + @include vp-1199 { + display: none; + } + } +} + +.about__col--img img { + width: 660px; + height: 400px; + object-fit: cover; + @include vp-1199 { + width: 100%; + height: auto; + min-height: 345px; + } + @include vp-767 { + min-height: 280px; + } +} + +.about__video { + position: absolute; + top: 71%; + left: 37.67%; + width: 360px; + height: 230px; + @include vp-1199 { + left: 50%; + top: 85.07%; + transform: translateX(-50%); + width: 39.8%; + height: auto; + } + + @include vp-767 { + position: relative; + left: 0; + top: 0; + transform: translateX(0); + width: 100%; + } +} +.video__btn { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + transform: translateX(-50%) translateY(-50%); + background-color: $color-transparent; + border: none; + cursor: pointer; + + &::before { + position: absolute; + content: ""; + width: 100px; + height: 100px; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + background-image: url("../../img/svg/video-btn-default.svg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + + @include vp-1199 { + width: 72px; + height: 72px; + } + } + + &:focus { + outline: none; + &::before { + background-image: url("../../img/svg/video-btn-focus.svg"); + } + } + &:hover { + &::before { + background-image: url("../../img/svg/video-btn-hover.svg"); + } + } + &:active { + &::before { + background-image: url("../../img/svg/video-btn-active.svg"); + } + } + + &:disabled { + pointer-events: none; + &::before { + background-image: url("../../img/svg/video-btn-disabled.svg"); + } + } +} diff --git a/source/sass/blocks/btn.scss b/source/sass/blocks/btn.scss new file mode 100644 index 00000000..d2334e3c --- /dev/null +++ b/source/sass/blocks/btn.scss @@ -0,0 +1,86 @@ +.btn { + display: flex; + justify-content: center; + align-items: center; + padding: 10px 20px; + width: 100%; + min-height: 66px; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + line-height: 12px; + text-transform: uppercase; + text-align: center; + cursor: pointer; + transition: opacity $trans-default, background-color $trans-default, + color $trans-default; + + @include vp-1199 { + min-height: 56px; + } + + &--on-dark { + background-color: $color-transparent; + border: 2px solid $stroke-light; + color: $text-light; + + &:focus { + outline: none; + border-color: $stroke-black; + background-color: rgba($color-transparent, 0.8); + color: $text-action; + } + + &:hover { + background-color: $color-white; + color: $text-action; + } + + &:active { + border-color: $stroke-light; + background-color: $color-white; + color: $text-dark; + } + + &:disabled, + &.disabled { + opacity: 0.5; + pointer-events: none; + } + } + &--on-light { + background-color: $color-transparent; + border: 2px solid $stroke-dark; + color: $text-dark; + + &:focus { + outline: none; + border-color: $stroke-black; + background: linear-gradient( + 151deg, + rgba(237, 2, 51, 0.8) 0%, + rgba(0, 62, 183, 0.8) 100% + ); + color: $text-light; + } + + &:hover { + border: none; + background: $fill-gradient; + color: $text-light; + } + + &:active { + border: none; + background: $fill-gradient; + color: rgba($text-light, 0.7); + } + + &:disabled, + &.disabled { + opacity: 0.5; + pointer-events: none; + opacity: 0.3; + } + } +} diff --git a/source/sass/blocks/hero.scss b/source/sass/blocks/hero.scss new file mode 100644 index 00000000..fed39f73 --- /dev/null +++ b/source/sass/blocks/hero.scss @@ -0,0 +1,142 @@ +.hero { + background: $color-gradient; + padding-bottom: 120px; + @include vp-1199 { + padding-bottom: 100px; + } + @include vp-767 { + padding-bottom: 32px; + } +} +.hero__content { + display: flex; + justify-content: center; + align-items: flex-start; + column-gap: 56px; + + @include vp-1199 { + column-gap: 30px; + } + + @include vp-767 { + column-gap: 0; + } +} +.hero__col { + &--text { + display: flex; + flex-direction: column; + align-items: flex-end; + padding-top: 52px; + + @include vp-1199 { + padding-top: 31px; + } + + @include vp-767 { + width: 100%; + padding-top: 48px; + } + } + &--img { + flex-shrink: 0; + } +} +.hero__inner { + display: grid; + grid-template-columns: auto 270px; + grid-template-rows: repeat(2, auto); + justify-content: end; + justify-items: end; + align-items: start; + + @include vp-1199 { + grid-template-columns: auto 185px; + } + + @include vp-767 { + grid-template-columns: auto 156px; + + width: 100%; + justify-content: space-between; + } + + & .hero__item:nth-child(n + 1) { + grid-area: 1 / 1 / 2 / 3; + } + & .hero__item:nth-child(n + 2) { + grid-area: 2 / 1 / 3 / 2; + align-self: center; + } + & .hero__item:nth-child(n + 3) { + grid-area: 2 / 2 / 3 / 3; + } + + & ul { + margin: 0; + padding: 0; + list-style-type: none; + @include vp-1199 { + padding-right: 26px; + } + + @include vp-767 { + padding-right: 21px; + } + } + & li { + color: $text-light; + text-align: right; + } + & h1 { + font-family: $second-family; + text-align: right; + margin: 0; + margin-top: 40px; + margin-bottom: 40px; + color: $text-light; + + @include vp-1199 { + margin-top: 10px; + margin-bottom: 50px; + } + + @include vp-767 { + margin-top: 14px; + margin-bottom: 48px; + } + } + + & span { + font-family: $second-family; + font-weight: 600; + font-size: 54px; + line-height: 54px; + text-align: right; + color: $text-light; + } +} + +.hero__btn { + max-width: 270px; + + @include vp-1199 { + max-width: 185px; + } + + @include vp-767 { + max-width: 100%; + } +} + +.hero__col--img img { + width: 500px; + height: 524px; + @include vp-1199 { + width: 324px; + height: 390px; + } + @include vp-767 { + display: none; + } +} diff --git a/source/sass/blocks/logo.scss b/source/sass/blocks/logo.scss new file mode 100644 index 00000000..3cc5e26c --- /dev/null +++ b/source/sass/blocks/logo.scss @@ -0,0 +1,19 @@ +.logo { + & a { + display: block; + line-height: 0; + font-size: 0; + } + & img { + width: 130px; + height: 26px; + @include vp-1199 { + width: 110px; + height: 22px; + } + @include vp-767 { + width: 100px; + height: 20px; + } + } +} diff --git a/source/sass/blocks/page-header.scss b/source/sass/blocks/page-header.scss new file mode 100644 index 00000000..be7369fa --- /dev/null +++ b/source/sass/blocks/page-header.scss @@ -0,0 +1,63 @@ +.page-header { + padding-top: 30px; + padding-bottom: 30px; + margin-bottom: 30px; + + @include vp-1199 { + margin-bottom: 0; + } + + @include vp-767 { + padding-top: 16px; + padding-bottom: 16px; + } +} +.page-header__wrapper { + display: flex; + justify-content: space-between; +} +.page-header__col { + &--logo { + flex-shrink: 0; + } + &--phone { + max-width: 70%; + } +} +.page-header__link { + font-family: $font-family; + font-weight: 700; + font-size: 26px; + line-height: 26px; + text-align: right; + color: $text-light; + cursor: pointer; + &:focus { + outline: none; + color: $text-action-alternative; + } + + &:hover { + color: rgba(28, 51, 116, 0.5); + } + + &:active { + color: $text-dark; + border-bottom: 1px solid $stroke-dark; + } + + &:disabled, + &.disabled { + opacity: 0.5; + pointer-events: none; + color: rgba(#f8f9fc, 0.5); + } + @include vp-1199 { + font-size: 24px; + line-height: 24px; + } + @include vp-767 { + font-size: 22px; + line-height: 22px; + } +} diff --git a/source/sass/blocks/section-title.scss b/source/sass/blocks/section-title.scss new file mode 100644 index 00000000..8e42b0e7 --- /dev/null +++ b/source/sass/blocks/section-title.scss @@ -0,0 +1,9 @@ +.section-title { + font-family: $second-family; + &--dark { + color: $text-dark; + } + &--light { + color: $text-light; + } +} diff --git a/source/sass/blocks/video.scss b/source/sass/blocks/video.scss new file mode 100644 index 00000000..8539ebef --- /dev/null +++ b/source/sass/blocks/video.scss @@ -0,0 +1,34 @@ +.video { + position: relative; + + &::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: rgba(20, 54, 122, 0.5); + z-index: 1; + } + + & img { + width: 100%; + height: auto; + object-fit: cover; + } + + & iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +.video__bg-hide { + &::after { + display: none; + } +} diff --git a/source/sass/blocks/wrapper.scss b/source/sass/blocks/wrapper.scss new file mode 100644 index 00000000..c29cd761 --- /dev/null +++ b/source/sass/blocks/wrapper.scss @@ -0,0 +1,3 @@ +.wrapper { + overflow: hidden; +} diff --git a/source/sass/global/container.scss b/source/sass/global/container.scss new file mode 100644 index 00000000..d6812ffb --- /dev/null +++ b/source/sass/global/container.scss @@ -0,0 +1,14 @@ +.container { + width: 100%; + max-width: 1366px; + margin: 0 auto; + padding: 0 103px; + + @include vp-1199 { + padding: 0 45px; + } + + @include vp-767 { + padding: 0 15px; + } +} diff --git a/source/sass/global/fonts.scss b/source/sass/global/fonts.scss new file mode 100644 index 00000000..c9cc984a --- /dev/null +++ b/source/sass/global/fonts.scss @@ -0,0 +1,44 @@ +@font-face { + font-style: normal; + font-weight: 300; + font-family: "RobotoCondensed"; + font-display: swap; + src: url("../../fonts/RobotoCondensed-Light.woff2") format("woff2"), + url("../../fonts/RobotoCondensed-Light.woff") format("woff"); +} + +@font-face { + font-style: normal; + font-weight: 400; + font-family: "RobotoCondensed"; + font-display: swap; + src: url("../../fonts/RobotoCondensed-Regular.woff2") format("woff2"), + url("../../fonts/RobotoCondensed-Regular.woff") format("woff"); +} + +@font-face { + font-style: normal; + font-weight: 700; + font-family: "RobotoCondensed"; + font-display: swap; + src: url("../../fonts/RobotoCondensed-Bold.woff2") format("woff2"), + url("../../fonts/RobotoCondensed-Bold.woff") format("woff"); +} + +@font-face { + font-style: normal; + font-weight: 600; + font-family: "AlumniSans"; + font-display: swap; + src: url("../../fonts/AlumniSans-SemiBold.woff2") format("woff2"), + url("../../fonts/AlumniSans-SemiBold.woff") format("woff"); +} + +@font-face { + font-style: normal; + font-weight: 800; + font-family: "AlumniSans"; + font-display: swap; + src: url("../../fonts/AlumniSans-ExtraBold.woff2") format("woff2"), + url("../../fonts/AlumniSans-ExtraBold.woff") format("woff"); +} diff --git a/source/sass/global/mixins.scss b/source/sass/global/mixins.scss new file mode 100644 index 00000000..81acf896 --- /dev/null +++ b/source/sass/global/mixins.scss @@ -0,0 +1,59 @@ +/* stylelint-disable */ + +@mixin retina { + @media (min-resolution: $retina-dpi), (min-resolution: $retina-dppx) { + @content; + } +} + +@mixin hover { + @media (hover: hover) { + &:hover:not(.focus-visible) { + @content; + } + } +} + +@mixin focus { + &.focus-visible:focus { + @content; + } +} + +@mixin active { + &:active { + @content; + } +} + +@mixin hover-focus { + @media (hover: hover) { + &:hover:not(.focus-visible) { + @content; + } + } + + &.focus-visible:focus { + @content; + } +} + +// Desktop first + +@mixin vp-1200 { + @media (min-width: ($vp-1200)) { + @content; + } +} + +@mixin vp-1199 { + @media (max-width: ($vp-1200 - 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..cf198da9 --- /dev/null +++ b/source/sass/global/reboot.scss @@ -0,0 +1,135 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; + min-height: 100vh; +} + +html { + font-style: normal; + font-weight: 400; + font-size: $fz-default; + line-height: 24px; + font-family: $ff-placeholder; + color: $text-dark; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + // оптимизация выравнивания шрифта относительно центра строки + text-rendering: optimizeLegibility; + // если по прежнему есть проблемы с выравниванием + // https://transfonter.org/ - включите настройку https://prnt.sc/12rnt6g и переконвертируйте шрифт +} + +body { + width: 100%; + height: 100%; + + background-color: $color-white; +} + +a { + color: $color-dark; + text-decoration: none; +} + +img, +video { + display: block; + max-width: 100%; + height: auto; +} +picture { + font-size: 0; + line-height: 0; +} + +textarea { + resize: none; +} + +// chrome autofill background removal +// если на проекте у инпутов используются разные цвета фонов\текста - +// удалите это из глобала и используйте локально с нужными цветами +// rgba не подойдет, сконвертируйте цвет в hex без прозрачности +// если в стилях уже используется box-shadow есть другое решение - +// задать к списку транзишенов `background-color 10000000s ease-out` +input:-webkit-autofill { + box-shadow: inset 0 0 0 1000px $color-white; + + -webkit-text-fill-color: $color-dark; +} + +// firefox placeholder \ invalid fix + ios bdrs +input, +textarea { + border-radius: 0; + + &::placeholder { + opacity: 1; + } + + &:invalid { + box-shadow: none; + } +} + +select { + border-radius: 0; +} + +// ie11 X removal +input { + &::-ms-clear, + &::-ms-reveal { + display: none; + } +} + +// chrome search X removal +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + appearance: none; +} + +// input[number] arrows removal +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + margin: 0; + + appearance: none; +} + +input[type="number"] { + appearance: textfield; +} + +// ios button \ inputs reset +select, +textarea, +input:matches( + [type="email"], + [type="number"], + [type="password"], + [type="search"], + [type="tel"], + [type="text"], + [type="url"] + ) { + appearance: none; +} + +button, +[type="button"], +[type="reset"], +[type="submit"] { + appearance: none; +} diff --git a/source/sass/global/typography.scss b/source/sass/global/typography.scss new file mode 100644 index 00000000..4747196b --- /dev/null +++ b/source/sass/global/typography.scss @@ -0,0 +1,147 @@ +// Headings +// --------------------------------- +h1 { + font-weight: 800; + font-size: 92px; + line-height: 110px; + letter-spacing: 0.04em; + text-transform: uppercase; + @include vp-1199 { + font-size: 72px; + line-height: 85px; + letter-spacing: 0.03em; + } + @include vp-767 { + font-size: 62px; + line-height: 62px; + letter-spacing: 0.02em; + } +} +h2 { + font-weight: 600; + font-size: 82px; + line-height: 96px; + text-transform: uppercase; + @include vp-1199 { + font-size: 48px; + line-height: 54px; + } +} +h3 { + font-weight: 600; + font-size: 54px; + line-height: 54px; + @include vp-1199 { + font-size: 42px; + line-height: 42px; + } + @include vp-767 { + font-size: 32px; + line-height: 32px; + } +} +h4 { + font-weight: 700; + font-size: 26px; + line-height: 26px; + @include vp-1199 { + font-size: 24px; + line-height: 24px; + } + @include vp-767 { + font-size: 22px; + line-height: 22px; + } +} +h5 { + font-weight: 400; + font-size: 24px; + line-height: 24px; + @include vp-1199 { + font-size: 22px; + line-height: 22px; + } + @include vp-767 { + font-size: 20px; + line-height: 20px; + } +} +h6 { + font-weight: 400; + font-size: 22px; + line-height: 22px; + @include vp-767 { + font-size: 18px; + line-height: 20px; + } +} + +// Text +// --------------------------------- +.large { + font-weight: 300; + font-size: 18px; + line-height: 24px; + @include vp-767 { + font-size: 16px; + line-height: 20px; + } +} + +.medium { + font-weight: 300; + font-size: 16px; + line-height: 24px; + @include vp-767 { + line-height: 20px; + } +} + +.small { + font-weight: 400; + font-size: 14px; + line-height: 22px; + @include vp-767 { + line-height: 20px; + } +} + +// Numbers +// --------------------------------- + +.numbers-xlarge { + font-weight: 700; + font-size: 100px; + line-height: 150px; + @include vp-767 { + font-size: 80px; + line-height: 120px; + } +} +.numbers-large { + font-weight: 700; + font-size: 70px; + line-height: 70px; + @include vp-767 { + font-size: 64px; + line-height: 64px; + } +} +.numbers-medium { + font-weight: 700; + font-size: 60px; + line-height: 90px; + @include vp-767 { + font-size: 48px; + line-height: 72px; + } +} +.numbers-regular { + font-weight: 700; + font-size: 40px; + line-height: 40px; + @include vp-1199 { + font-size: 24px; + line-height: 24px; + } +} diff --git a/source/sass/global/utils.scss b/source/sass/global/utils.scss new file mode 100644 index 00000000..bd05ea8e --- /dev/null +++ b/source/sass/global/utils.scss @@ -0,0 +1,63 @@ +.wrapper { + position: relative; + + display: flex; + flex-direction: column; + min-height: 100vh; + /* stylelint-disable-next-line */ + min-height: calc(100 * var(--vh, 1vh)); + + .hero, + .page-footer { + flex-shrink: 0; + } + + .page-content { + flex-grow: 1; + } +} + +.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%); +} + +.scroll-lock-ios { + position: fixed; + + overflow: hidden; +} + +.scroll-lock { + overflow: hidden; +} + +.no-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } +} + +.no-transition { + /* stylelint-disable-next-line */ + transition: none !important; +} + +.js-focus-visible :focus:not(.focus-visible) { + outline: none; +} diff --git a/source/sass/global/variables.scss b/source/sass/global/variables.scss new file mode 100644 index 00000000..bb4ce403 --- /dev/null +++ b/source/sass/global/variables.scss @@ -0,0 +1,62 @@ +// Viewports +// --------------------------------- +$vp-768: 768px; +$vp-1200: 1200px; + +// Retina +// --------------------------------- +$retina-dpi: 144dpi; +$retina-dppx: 1.5dppx; + +// Colors +// --------------------------------- +// Text +$text-dark: #102654; +$text-light: #ffffff; +$text-action: #103aae; +$text-action-alternative: #1c3374; +$text-action-gradient: linear-gradient(129deg, #d10a42 0%, #0041ca 100%); + +// form +$text-form: #ffffff; +$text-error: #ff121f; + +// Buttons/Links +$stroke-light: #ffffff; +$stroke-dark: #102654; +$stroke-black: #000000; +$stroke-dark-alternative: #1c3374; +$fill-tabs: #d10a42; +$fill-gradient: linear-gradient(151deg, #ed0233 0%, #003eb7 100%); + +// Icons +$icon-light: #ffffff; +$icon-dark: #102654; + +// Default +$color-white: #ffffff; +$color-light: #f8f9fc; +$color-black: #030a1a; +$color-red: #ed0233; +$color-dark: #102654; +$color-dark-alternative: #1c3374; +$color-transparent: rgba(255, 255, 255, 0); +$color-gradient: linear-gradient( + 90deg, + #1c3477 0%, + #1c3477 0.01%, + #1a3578 39.11%, + #73184b 75.5%, + #b4022a 100% +); + +$fz-default: 16px; +$font-family: "RobotoCondensed", "Arial", sans-serif; +$second-family: "AlumniSans", "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..28287de0 100644 --- a/source/sass/style.scss +++ b/source/sass/style.scss @@ -1,4 +1,24 @@ // Vendor // --------------------------------- - @import "vendor/normalize"; + +// Global +// --------------------------------- +@import "global/variables"; +@import "global/mixins.scss"; +@import "global/fonts"; +@import "global/typography"; +@import "global/reboot"; +@import "global/utils"; +@import "global/container"; + +// Blocks +// --------------------------------- +@import "blocks/wrapper"; +@import "blocks/btn"; +@import "blocks/section-title"; +@import "blocks/hero"; +@import "blocks/page-header"; +@import "blocks/logo"; +@import "blocks/about"; +@import "blocks/video"; diff --git a/source/sass/vendor/swiper.scss b/source/sass/vendor/swiper.scss new file mode 100644 index 00000000..df03a3c8 --- /dev/null +++ b/source/sass/vendor/swiper.scss @@ -0,0 +1,269 @@ +/* stylelint-disable */ +/** + * Swiper 11.1.4 + * Most modern mobile touch slider and framework with hardware accelerated transitions + * https://swiperjs.com + * + * Copyright 2014-2024 Vladimir Kharlampidi + * + * Released under the MIT License + * + * Released on: May 30, 2024 + */ + +@import "swiper-vars.scss"; +@at-root { + @font-face { + font-family: "swiper-icons"; + src: url("data:application/font-woff;charset=utf-8;base64, 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") + format("woff"); + font-weight: 400; + font-style: normal; + } +} +@at-root { + :root { + --swiper-theme-color: #{$themeColor}; + /* + --swiper-preloader-color: var(--swiper-theme-color); + --swiper-wrapper-transition-timing-function: initial; + */ + } +} +:host { + position: relative; + display: block; + margin-left: auto; + margin-right: auto; + z-index: 1; +} +.swiper { + margin-left: auto; + margin-right: auto; + position: relative; + overflow: hidden; + list-style: none; + padding: 0; + /* Fix of Webkit flickering */ + z-index: 1; + display: block; +} +.swiper-vertical > .swiper-wrapper { + flex-direction: column; +} +.swiper-wrapper { + position: relative; + width: 100%; + height: 100%; + z-index: 1; + display: flex; + transition-property: transform; + transition-timing-function: var( + --swiper-wrapper-transition-timing-function, + initial + ); + box-sizing: content-box; +} +.swiper-android .swiper-slide, +.swiper-ios .swiper-slide, +.swiper-wrapper { + transform: translate3d(0px, 0, 0); +} +.swiper-horizontal { + touch-action: pan-y; +} +.swiper-vertical { + touch-action: pan-x; +} +.swiper-slide { + flex-shrink: 0; + width: 100%; + height: 100%; + position: relative; + transition-property: transform; + display: block; +} +.swiper-slide-invisible-blank { + visibility: hidden; +} +/* Auto Height */ +.swiper-autoheight, +.swiper-autoheight .swiper-slide { + height: auto; +} +.swiper-autoheight .swiper-wrapper { + align-items: flex-start; + transition-property: transform, height; +} +.swiper-backface-hidden .swiper-slide { + transform: translateZ(0); + backface-visibility: hidden; +} +/* 3D Effects */ +.swiper-3d.swiper-css-mode .swiper-wrapper { + perspective: 1200px; +} +.swiper-3d .swiper-wrapper { + transform-style: preserve-3d; +} +.swiper-3d { + perspective: 1200px; + .swiper-slide, + .swiper-cube-shadow { + transform-style: preserve-3d; + } +} + +/* CSS Mode */ +.swiper-css-mode { + > .swiper-wrapper { + overflow: auto; + scrollbar-width: none; /* For Firefox */ + -ms-overflow-style: none; /* For Internet Explorer and Edge */ + &::-webkit-scrollbar { + display: none; + } + } + > .swiper-wrapper > .swiper-slide { + scroll-snap-align: start start; + } + &.swiper-horizontal { + > .swiper-wrapper { + scroll-snap-type: x mandatory; + } + } + &.swiper-vertical { + > .swiper-wrapper { + scroll-snap-type: y mandatory; + } + } + &.swiper-free-mode { + > .swiper-wrapper { + scroll-snap-type: none; + } + > .swiper-wrapper > .swiper-slide { + scroll-snap-align: none; + } + } + &.swiper-centered { + > .swiper-wrapper::before { + content: ""; + flex-shrink: 0; + order: 9999; + } + > .swiper-wrapper > .swiper-slide { + scroll-snap-align: center center; + scroll-snap-stop: always; + } + } + &.swiper-centered.swiper-horizontal { + > .swiper-wrapper > .swiper-slide:first-child { + margin-inline-start: var(--swiper-centered-offset-before); + } + > .swiper-wrapper::before { + height: 100%; + min-height: 1px; + width: var(--swiper-centered-offset-after); + } + } + &.swiper-centered.swiper-vertical { + > .swiper-wrapper > .swiper-slide:first-child { + margin-block-start: var(--swiper-centered-offset-before); + } + > .swiper-wrapper::before { + width: 100%; + min-width: 1px; + height: var(--swiper-centered-offset-after); + } + } +} + +/* Slide styles start */ +/* 3D Shadows */ +.swiper-3d { + .swiper-slide-shadow, + .swiper-slide-shadow-left, + .swiper-slide-shadow-right, + .swiper-slide-shadow-top, + .swiper-slide-shadow-bottom, + .swiper-slide-shadow, + .swiper-slide-shadow-left, + .swiper-slide-shadow-right, + .swiper-slide-shadow-top, + .swiper-slide-shadow-bottom { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 10; + } + .swiper-slide-shadow { + background: rgba(0, 0, 0, 0.15); + } + .swiper-slide-shadow-left { + background-image: linear-gradient( + to left, + rgba(0, 0, 0, 0.5), + rgba(0, 0, 0, 0) + ); + } + .swiper-slide-shadow-right { + background-image: linear-gradient( + to right, + rgba(0, 0, 0, 0.5), + rgba(0, 0, 0, 0) + ); + } + .swiper-slide-shadow-top { + background-image: linear-gradient( + to top, + rgba(0, 0, 0, 0.5), + rgba(0, 0, 0, 0) + ); + } + .swiper-slide-shadow-bottom { + background-image: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.5), + rgba(0, 0, 0, 0) + ); + } +} +.swiper-lazy-preloader { + width: 42px; + height: 42px; + position: absolute; + left: 50%; + top: 50%; + margin-left: -21px; + margin-top: -21px; + z-index: 10; + transform-origin: 50%; + box-sizing: border-box; + border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); + border-radius: 50%; + border-top-color: transparent; +} +.swiper:not(.swiper-watch-progress), +.swiper-watch-progress .swiper-slide-visible { + .swiper-lazy-preloader { + animation: swiper-preloader-spin 1s infinite linear; + } +} +.swiper-lazy-preloader-white { + --swiper-preloader-color: #fff; +} +.swiper-lazy-preloader-black { + --swiper-preloader-color: #000; +} +@keyframes swiper-preloader-spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +/* Slide styles end */