-
-
Тестовая страница.
-
На данной странице показан пример модальных окон.
-
Перед началом разработки не забудьте удалить всё содержимое ‹main›‹⁄main›.
-
modal--feedback link
-
modal--success link
+
Фитнес-центр SUPERGYM
+
+
+
Услуги фитнес-центра
+
+
+
+
+ Тренажёрный зал
+
+
+ Групповые занятия
+
+
+ Кардио-зона
+
+
+
+
+
Купить абонемент
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Тренажерный зал
+
Просторный зал площадью 900 кв/м
+
+ Supergym – самый большой фитнес центр за Уралом и идеальное место для укрепления тела и здоровья. Тренажерный зал оснащен всем необходимым современным оборудованием для всех спортсменов.
+
+
+ В зале расположены отдельная зона для Crossfit и кардио-зона с 40 тренажерами. Также в фитнес центре есть несколько оборудованных залов для различных видов групповых занятий.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ►
+
+
+
VIDEO
+
+
+
+
Абонементы
+
+
+
+ 1 месяц
+
+
+ 6 месяцев
+
+
+ 12 месяцев
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Соревнования по Crossfit.
+
+
+
+
SUPER
+
+
+
Дата
+
+ 7
+
+ Марта
+ 2019
+
+
+
+
Время
+
+ 12:00
+
+
+
+
+
Ежегодные соревнования по CrossFit
+
заполнить заявку
+
+
+
+
+
+
+
+
+
+
+
+
+
Жюри
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Александр Пашков
+
+
CrossFit
+
+ Certified Level 3 Trainer
+ Победитель чемпионата России по CrossFit
+ Опыт — 6 лет
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Александр Пашков
+
+
CrossFit
+
+ Certified Level 3 Trainer
+ Победитель чемпионата России по CrossFit
+ Опыт — 6 лет
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Александр Пашков
+
+
CrossFit
+
+ Certified Level 3 Trainer
+ Победитель чемпионата России по CrossFit
+ Опыт — 6 лет
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Александр Пашков
+
+
CrossFit
+
+ Certified Level 3 Trainer
+ Победитель чемпионата России по CrossFit
+ Опыт — 6 лет
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Александр Пашков
+
+
CrossFit
+
+ Certified Level 3 Trainer
+ Победитель чемпионата России по CrossFit
+ Опыт — 6 лет
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Александр Пашков
+
+
CrossFit
+
+ Certified Level 3 Trainer
+ Победитель чемпионата России по CrossFit
+ Опыт — 6 лет
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Александр Пашков
+
+
CrossFit
+
+ Certified Level 3 Trainer
+ Победитель чемпионата России по CrossFit
+ Опыт — 6 лет
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Александр Пашков
+
+
CrossFit
+
+ Certified Level 3 Trainer
+ Победитель чемпионата России по CrossFit
+ Опыт — 6 лет
+
+
+
+
+
+
+
+
+
+
+
+
Наши преимущества
+
+
+
+ 900 кв/м
+
+
+ Площадь
+ Занимайтесь без очередей и толкучки
+
+
+
+
+ 70 машин
+
+
+ Собственная парковка
+ Вы всегда найдете место для своей машины на нашей парковке
+
+
+
+ 100
+
+ Тренажеров
+ Современные тренажеры на все группы мышц
+
+
+
+
+ 350 мест
+
+
+ Комфорт
+ Просторные раздевалки, душевые, фен, Wi-Fi, кулеры
+
+
+
+
+ 5+ лет
+
+
+ Тренерский опыт
+ Добивайтесь своих целей быстрее с профессиональным тренером
+
+
+
+
@@ -30,7 +478,7 @@
Тестовая страница.
+
diff --git a/source/js/main.js b/source/js/main.js
index 67efb03ee..46939fc8c 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,6 +1,8 @@
import {iosVhFix} from './utils/ios-vh-fix';
-import {initModals} from './modules/modals/init-modals';
import {Form} from './modules/form-validate/form';
+import {gymVideo} from './modules/gym-video';
+import {cardPrice} from './modules/card-subscription';
+import {initSliders} from './modules/init-sliders';
// ---------------------------------
@@ -13,11 +15,13 @@ window.addEventListener('DOMContentLoaded', () => {
// Modules
// ---------------------------------
+ gymVideo();
+ cardPrice();
+ initSliders();
// все скрипты должны быть в обработчике 'DOMContentLoaded', но не все в 'load'
// в load следует добавить скрипты, не участвующие в работе первого экрана
window.addEventListener('load', () => {
- initModals();
const form = new Form();
window.form = form;
form.init();
diff --git a/source/js/modules/card-subscription.js b/source/js/modules/card-subscription.js
new file mode 100644
index 000000000..69a377552
--- /dev/null
+++ b/source/js/modules/card-subscription.js
@@ -0,0 +1,82 @@
+const cardPrice = () => {
+ const dataNameCoach = 'data-price-with-coach';
+ const dataNameDaytime = 'data-price-daytime';
+ const dataNameAllDay = 'data-price-all-day';
+
+ const cards = document.querySelector('[data-cards]');
+ const priceCoach = cards.querySelector(`[${dataNameCoach}]`);
+ const priceDaytime = cards.querySelector(`[${dataNameDaytime}]`);
+ const priceAllDay = cards.querySelector(`[${dataNameAllDay}]`);
+
+ const tabsList = document.querySelector('[data-tabs]');
+ const tabs = tabsList.querySelectorAll('[data-tab]');
+ const tabsArray = [...tabs];
+
+ // Объект с ценами абонементов
+ const priceObj = {
+ sixMonth: {
+ priceCoach: '30 000',
+ priceDaytime: '10 200',
+ priceAllDay: '16 200',
+ },
+ twelveMonth: {
+ priceCoach: '60 000',
+ priceDaytime: '20 400',
+ priceAllDay: '32 400',
+ },
+ oneMonth: {
+ priceCoach: '5000',
+ priceDaytime: '1700',
+ priceAllDay: '2700',
+ },
+ };
+
+ // Присваивает цены абонементов и дублирует их в data-атрибут
+ const setPrice = (month) => {
+ priceCoach.textContent = priceObj[month].priceCoach;
+ priceDaytime.textContent = priceObj[month].priceDaytime;
+ priceAllDay.textContent = priceObj[month].priceAllDay;
+ priceCoach.setAttribute(dataNameCoach, priceObj[month].priceCoach);
+ priceDaytime.setAttribute(dataNameDaytime, priceObj[month].priceDaytime);
+ priceAllDay.setAttribute(dataNameAllDay, priceObj[month].priceAllDay);
+ };
+
+ // Меняет цены абонементов в зависимости от нажатого таба
+ const priceChange = (tab) => {
+ const tabName = tab.dataset.tab;
+
+ switch (tabName) {
+ case '6-month':
+ setPrice('sixMonth');
+ break;
+
+ case '12-month':
+ setPrice('twelveMonth');
+ break;
+
+ default:
+ setPrice('oneMonth');
+ break;
+ }
+ };
+
+ const onTabClick = (event) => {
+ // Удаляет у всех табов класс active
+ tabsArray.forEach((tab) => {
+ tab.classList.remove('subscription__btn--active');
+ });
+
+ // Добавляет табу, на который был совершен клик, класс
+ event.target.classList.add('subscription__btn--active');
+
+ priceChange(event.target);
+ };
+
+ setPrice('oneMonth');
+
+ tabsArray.forEach((tab) => {
+ tab.addEventListener('click', onTabClick);
+ });
+};
+
+export {cardPrice};
diff --git a/source/js/modules/gym-video.js b/source/js/modules/gym-video.js
new file mode 100644
index 000000000..64a8f5f60
--- /dev/null
+++ b/source/js/modules/gym-video.js
@@ -0,0 +1,16 @@
+const gymVideo = () => {
+ const videoContainer = document.querySelector('.gym__video-wrapper');
+ const videoPoster = videoContainer.querySelector('[data-poster]');
+ const videoButton = videoContainer.querySelector('[data-button]');
+ const videoIframe = videoContainer.querySelector('[data-iframe]');
+
+ const onVideoButtonClick = () => {
+ videoPoster.style.display = 'none';
+ videoButton.style.display = 'none';
+ videoIframe.style.display = 'block';
+ };
+
+ videoButton.addEventListener('click', onVideoButtonClick);
+};
+
+export {gymVideo};
diff --git a/source/js/modules/init-sliders.js b/source/js/modules/init-sliders.js
new file mode 100644
index 000000000..e2daa13f5
--- /dev/null
+++ b/source/js/modules/init-sliders.js
@@ -0,0 +1,31 @@
+import {initJurySlider} from './jury-slider';
+
+const vpDesktop = 1366;
+const vpTablet = 768;
+const vpMobile = 0;
+
+const loop = {
+ loopJury: true,
+};
+
+const breakpointsJury = {
+ [vpDesktop]: {
+ slidesPerView: 4,
+ spaceBetween: 40,
+ allowTouchMove: false,
+ },
+ [vpTablet]: {
+ slidesPerView: 2,
+ spaceBetween: 32,
+ allowTouchMove: true,
+ },
+ [vpMobile]: {
+ slidesPerView: 1,
+ spaceBetween: 0,
+ allowTouchMove: true,
+ },
+};
+
+export const initSliders = () => {
+ initJurySlider(loop['loopJury'], breakpointsJury);
+};
diff --git a/source/js/modules/jury-slider.js b/source/js/modules/jury-slider.js
new file mode 100644
index 000000000..9126177f5
--- /dev/null
+++ b/source/js/modules/jury-slider.js
@@ -0,0 +1,20 @@
+export const initJurySlider = (isLoop, breakpointSettings) => {
+ const swiperWrapper = document.querySelector('[data-jury-swiper]');
+ const buttonPrev = document.querySelector('[data-jury-swiper-btn-prev]');
+ const buttonNext = document.querySelector('[data-jury-swiper-btn-next]');
+ const slides = document.querySelectorAll('[data-jury-slide]');
+ const slidesArray = [...slides];
+
+ slidesArray.forEach((slide) => {
+ slide.setAttribute('tabindex', '0');
+ });
+
+ return new window.Swiper(swiperWrapper, {
+ loop: isLoop,
+ navigation: {
+ nextEl: buttonNext,
+ prevEl: buttonPrev,
+ },
+ breakpoints: breakpointSettings,
+ });
+};
diff --git a/source/js/vendor.js b/source/js/vendor.js
index c684c29ba..fdd2aa879 100644
--- a/source/js/vendor.js
+++ b/source/js/vendor.js
@@ -1,4 +1,3 @@
// Swiper 8.4.7
-// import './vendor/swiper';
+import './vendor/swiper';
import './vendor/focus-visible-polyfill';
-
diff --git a/source/sass/blocks/advantages.scss b/source/sass/blocks/advantages.scss
new file mode 100644
index 000000000..ad71f346e
--- /dev/null
+++ b/source/sass/blocks/advantages.scss
@@ -0,0 +1,276 @@
+.advantages {
+ background-color: $color-ghost-white;
+}
+
+.advantages__container {
+ padding-top: 120px;
+ padding-bottom: 120px;
+ color: $color-primary;
+ font-family: $ff-roboto-condensed;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: 24px;
+
+ @include vp-1365 {
+ padding-top: 100px;
+ padding-bottom: 100px;
+ }
+
+ @include vp-767 {
+ padding-top: 70px;
+ padding-bottom: 70px;
+ }
+}
+
+.advantages__text-content h2 {
+ max-width: 100%;
+ margin: 0;
+ margin-bottom: 50px;
+ color: $color-primary;
+ font-family: $ff-alumni-sans;
+ font-size: 54px;
+ font-weight: 600;
+ line-height: 54px;
+ letter-spacing: 1.62px;
+ text-align: center;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ margin-bottom: 50px;
+ font-size: 42px;
+ font-weight: 600;
+ line-height: 42px;
+ letter-spacing: 1.26px;
+ }
+
+ @include vp-767 {
+ margin-bottom: 55px;
+ font-size: 32px;
+ font-weight: 600;
+ line-height: 32px;
+ letter-spacing: 0.96px;
+ }
+}
+
+.advantages__text-content ul {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ min-height: 340px;
+ margin: 0;
+ padding: 0 60px;
+ list-style: none;
+
+ @include vp-1365 {
+ grid-template-columns: repeat(2, 1fr);
+ row-gap: 40px;
+ column-gap: 50px;
+ padding: 0;
+ }
+
+ @include vp-767 {
+ display: flex;
+ flex-direction: column;
+ }
+}
+
+.advantages__item {
+ display: flex;
+ column-gap: 30px;
+ min-height: 174px;
+ padding-bottom: 82px;
+
+ @include vp-1365 {
+ column-gap: 14px;
+ min-height: 92px;
+ padding-bottom: unset;
+ }
+
+ @include vp-767 {
+ flex-direction: column;
+ align-items: center;
+ padding-left: 40px;
+ padding-right: 40px;
+ }
+
+ &--special {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ grid-column: 2;
+ grid-row: 1 / span 2;
+ width: 240px;
+ min-height: 100%;
+ margin: 0 auto;
+ padding: 34px;
+ color: $color-default-white;
+ background-color: $color-resolution-blue;
+ text-align: center;
+
+ @include vp-1365 {
+ align-items: center;
+ row-gap: 25px;
+ grid-column: 1 / span 2;
+ grid-row: 2;
+ width: 58%;
+ min-height: 262px;
+ padding: 0 35px;
+ }
+
+ @include vp-767 {
+ width: 100vw;
+ min-width: 320px;
+ margin: 0;
+ margin-left: -15px;
+ padding: 0 70px;
+ }
+ }
+}
+
+.advantages__item p {
+ display: flex;
+ flex-direction: column;
+ max-width: 172px;
+ margin: 0;
+ color: $color-persian-blue;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 22px;
+ word-wrap: break-word;
+
+ @include vp-767 {
+ line-height: 20px;
+ text-align: center;
+ }
+}
+
+.advantages__item span {
+ max-width: 172px;
+ margin-bottom: 12px;
+ font-size: 70px;
+ font-weight: 700;
+ line-height: 70px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ margin-bottom: 0;
+ }
+}
+
+.advantages__item p span {
+ max-width: 110px;
+ font-size: 70px;
+ font-weight: 700;
+ line-height: 70px;
+ background-image: $crimson-to-blue;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ word-wrap: break-word;
+
+ @include vp-767 {
+ font-size: 64px;
+ line-height: 64px;
+ }
+}
+
+.advantages__text {
+ display: flex;
+ flex-direction: column;
+ row-gap: 8px;
+ margin: 0;
+
+ &--special {
+ row-gap: 42px;
+
+ @include vp-1365 {
+ row-gap: 25px;
+ }
+ }
+
+ @include vp-767 {
+ text-align: center;
+ }
+}
+
+.advantages__text--special dt,
+.advantages__text--special dd {
+ max-width: 172px;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 150%;
+}
+
+.advantages__text--special dt {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 24px;
+}
+
+.advantages__text dt {
+ max-width: 250px;
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 22px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ max-width: 100%;
+ word-break: break-all;
+ }
+
+ @include vp-767 {
+ font-size: 18px;
+ line-height: 20px;
+ word-wrap: break-word;
+ }
+}
+
+.advantages__text dd {
+ max-width: 250px;
+ margin-left: 0;
+ margin-bottom: 14px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ max-width: 100%;
+ word-break: break-all;
+ }
+
+ @include vp-767 {
+ font-size: 14px;
+ line-height: 22px;
+ word-break: normal;
+ }
+}
+
+.advantages__item:nth-child(5n+4),
+.advantages__item:nth-child(5n+5) {
+ min-height: 148px;
+ border-top: 2px solid rgba(209, 10, 66, 0.2);
+ padding-top: 56px;
+ padding-bottom: 22px;
+
+ @include vp-1365 {
+ padding-top: unset;
+ padding-bottom: unset;
+ border-top: unset;
+ }
+}
+
+.advantages__item:nth-child(5n+4) p,
+.advantages__item:nth-child(5n+5) p {
+ justify-content: end;
+
+ @include vp-1365 {
+ justify-content: start;
+ }
+}
+
+.advantages__item:nth-child(5n+4) .advantages__text,
+.advantages__item:nth-child(5n+5) .advantages__text {
+ justify-content: end;
+
+ @include vp-1365 {
+ justify-content: start;
+ }
+}
diff --git a/source/sass/blocks/btn.scss b/source/sass/blocks/btn.scss
index 3a7bef947..2a398efa0 100644
--- a/source/sass/blocks/btn.scss
+++ b/source/sass/blocks/btn.scss
@@ -1,26 +1,17 @@
.btn {
display: inline-flex;
- padding: 10px 20px;
+ padding: 19px 44px;
- color: $color-default-white;
-
- background-color: $color-neon-blue;
+ color: $color-primary;
+ background-color: $color-transparent;
border: none;
cursor: pointer;
- transition: opacity $trans-default;
-
- &--red {
- background-color: $color-torch-red;
- }
+ // transition: opacity $trans-default;
&:disabled {
opacity: 0.5;
pointer-events: none;
}
-
- @include hover-focus {
- opacity: 0.8;
- }
}
diff --git a/source/sass/blocks/card-competition.scss b/source/sass/blocks/card-competition.scss
new file mode 100644
index 000000000..ccbcaceb8
--- /dev/null
+++ b/source/sass/blocks/card-competition.scss
@@ -0,0 +1,232 @@
+.card-competition {
+ display: flex;
+ color: $color-default-white;
+ font-style: normal;
+ justify-content: center;
+
+ @include vp-767 {
+ flex-direction: column;
+ }
+}
+
+.card-competition__wrapper {
+ width: 500px;
+ padding: 80px;
+ background-color: $color-torch-red;
+
+ @include vp-1365 {
+ padding: 45px;
+ padding-top: 40px;
+ min-width: 292px;
+ }
+
+ @include vp-767 {
+ width: unset;
+ min-width: unset;
+ padding: 40px;
+ }
+}
+
+.card-competition__row-wrapper {
+ display: flex;
+ column-gap: 68px;
+ margin-bottom: 20px;
+
+ @include vp-1365 {
+ column-gap: 40px;
+ margin-bottom: 5px;
+ }
+
+ @include vp-767 {
+ justify-content: space-between;
+ margin-bottom: 10px;
+ }
+}
+
+.card-competition__title {
+ max-width: 180px;
+ margin: 0;
+ font-family: $ff-alumni-sans;
+ font-size: 82px;
+ font-weight: 600;
+ line-height: 76px;
+ letter-spacing: 2.46px;
+ text-transform: uppercase;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ max-width: 106px;
+ font-size: 48px;
+ font-weight: 600;
+ line-height: 46px;
+ letter-spacing: 1.44px;
+ text-transform: uppercase;
+ }
+
+ @include vp-767 {
+ max-width: 117px;
+ }
+}
+
+.card-competition__datetime {
+ display: flex;
+ flex-direction: column;
+ row-gap: 18px;
+ margin: 0;
+
+ @include vp-1365 {
+ row-gap: 8px;
+ }
+}
+
+.card-competition__term {
+ max-width: 50px;
+ margin-bottom: 8px;
+ font-family: $ff-roboto-condensed;
+ font-size: 18px;
+ font-weight: 300;
+ line-height: 24px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ margin-bottom: 0;
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 20px;
+ }
+
+ @include vp-767 {
+ font-size: 16px;
+ line-height: 20px;
+ }
+}
+
+.card-competition__description {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ max-width: 100px;
+ margin-left: 0;
+ padding-top: 4px;
+ border-top: 1px solid $color-default-white;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ padding-top: unset;
+ margin-top: -2px;
+ }
+}
+
+.card-competition__time {
+ max-width: 100px;
+ font-family: $ff-roboto-condensed;
+ font-size: 40px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 40px;
+
+ @include vp-1365 {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 24px;
+ }
+}
+
+.card-competition__date {
+ display: flex;
+ flex-direction: column;
+ row-gap: 5px;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 14px;
+
+ @include vp-1365 {
+ row-gap: unset;
+ font-size: 10px;
+ font-weight: 400;
+ line-height: 100%;
+ }
+}
+
+.card-competition__date span {
+ max-width: 40px;
+ word-wrap: break-word;
+}
+
+.card-competition__explanation {
+ max-width: 275px;
+ margin: 0;
+ margin-bottom: 55px;
+ font-family: $ff-roboto-condensed;
+ font-size: 18px;
+ font-weight: 300;
+ line-height: 24px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ max-width: 202px;
+ margin-bottom: 20px;
+ }
+
+ @include vp-767 {
+ max-width: 171px;
+ margin-bottom: 20px;
+ font-size: 16px;
+ line-height: 20px;
+ }
+}
+
+.card-competition__link {
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ // max-width: 340px;
+ padding: 25px 10px;
+ color: $color-default-white;
+ border: 2px solid $color-default-white;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 12px;
+ letter-spacing: 0.6px;
+ text-transform: uppercase;
+
+ word-break: break-all;
+
+ @include vp-1365 {
+ padding: 20px 10px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 12px;
+ letter-spacing: 0.6px;
+ }
+
+ @include hover-focus {
+ outline: none;
+ color: $color-additional;
+ background-color: $color-default-white;
+ }
+
+ @include active {
+ color: $color-primary;
+ background-color: $color-default-white;
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ }
+}
+
+.card-competition__img-wrapper img {
+ object-fit: cover;
+ min-height: 100%;
+
+ @include vp-1365 {
+ min-width: 386px;
+ height: 324px;
+ }
+
+ @include vp-767 {
+ min-width: 100%;
+ height: 292px;
+ }
+}
diff --git a/source/sass/blocks/card-subscription.scss b/source/sass/blocks/card-subscription.scss
new file mode 100644
index 000000000..68e98669c
--- /dev/null
+++ b/source/sass/blocks/card-subscription.scss
@@ -0,0 +1,184 @@
+.card-subscription {
+ max-width: 360px;
+ padding: 58px 20px;
+ background-color: $color-default-white;
+ border: 7px solid $color-default-white;
+ font-style: normal;
+ text-align: center;
+
+ @include hover-focus {
+ border-image: $crimson-to-blue;
+ border-image-slice: 1;
+ }
+
+ @include vp-1365 {
+ max-width: none;
+ width: 65%; //Подгон
+ min-width: 290px;
+ }
+
+ @include vp-767 {
+ padding-top: 45px;
+ padding-bottom: 45px;
+ }
+}
+
+.card-subscription__title {
+ margin: 0;
+ margin-bottom: 8px;
+ font-family: $ff-roboto-condensed;
+ font-size: 26px;
+ font-weight: 700;
+ line-height: 26px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ margin-bottom: 14px;
+ font-size: 24px;
+ line-height: 24px;
+ }
+
+ @include vp-767 {
+ font-size: 22px;
+ line-height: 22px;
+ }
+}
+
+.card-subscription__description {
+ margin: 0;
+ margin-bottom: 66px;
+ font-weight: 300;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ margin-bottom: 72px;
+ }
+
+ @include vp-767 {
+ margin-bottom: 62px;
+ font-size: 14px;
+ font-weight: 300;
+ line-height: 22px;
+ }
+}
+
+.card-subscription__price-wrapper {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ column-gap: 14px;
+ margin: 0;
+ margin-bottom: 35px;
+ z-index: 1;
+
+ @include vp-1365 {
+ margin-bottom: 28px;
+ }
+
+ @include vp-767 {
+ margin-bottom: 24px;
+ }
+}
+
+.card-subscription__price {
+ max-width: 170px;
+ color: $color-additional;
+ font-size: 60px;
+ font-weight: 700;
+ line-height: 150%;
+ word-wrap: break-word;
+
+ &::before {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ display: block;
+ width: 360px;
+ height: 150px;
+ color: $color-ghost-white;
+ font-family: $ff-roboto-condensed;
+ font-size: 100px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+ transform: translateX(-50%) translateY(-67%); //Подгон
+ z-index: -1;
+
+ @include vp-767 {
+ width: 260px;
+ font-size: 80px;
+ transform: translateX(-50%) translateY(-54%);
+ }
+ }
+
+ &--with-coach {
+ &::before {
+ content: attr(data-price-with-coach);
+ }
+ }
+
+ &--daytime {
+ &::before {
+ content: attr(data-price-daytime);
+ }
+ }
+
+ &--all-day {
+ &::before {
+ content: attr(data-price-all-day);
+ }
+ }
+
+ @include vp-767 {
+ font-size: 48px;
+ line-height: 150%;
+ }
+}
+
+.card-subscription__symbol {
+ @include vp-767 {
+ width: 24px;
+ height: 33px;
+ }
+}
+
+.card-subscription__link {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ min-height: 66px;
+ margin: 0 auto;
+ padding: 19px 10px;
+ color: $color-primary;
+ border: 2px solid $color-primary;
+ font-family: $ff-roboto-condensed;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 12px;
+ letter-spacing: 0.6px;
+ text-transform: uppercase;
+ word-break: break-all;
+
+ @include hover-focus {
+ outline: none;
+ color: $color-default-white;
+ border-color: $color-default-white;
+ background-image: $gradient-primary;
+ }
+
+ @include active {
+ color: rgba(255, 255, 255, 0.7);
+ border-color: $color-default-white;
+ background-image: $gradient-primary;
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ }
+
+ @include vp-1365 {
+ min-height: 56px;
+ }
+}
diff --git a/source/sass/blocks/competition.scss b/source/sass/blocks/competition.scss
new file mode 100644
index 000000000..20ca455b8
--- /dev/null
+++ b/source/sass/blocks/competition.scss
@@ -0,0 +1,23 @@
+.competition__container {
+ padding-top: 120px;
+
+ @include vp-1365 {
+ padding-top: 100px;
+ }
+
+ @include vp-767 {
+ padding-top: 70px;
+ }
+}
+
+.competition__card {
+ padding-bottom: 120px;
+
+ @include vp-1365 {
+ padding-bottom: 100px;
+ }
+
+ @include vp-767 {
+ padding-bottom: 70px;
+ }
+}
diff --git a/source/sass/blocks/gym.scss b/source/sass/blocks/gym.scss
new file mode 100644
index 000000000..5cc73e2a5
--- /dev/null
+++ b/source/sass/blocks/gym.scss
@@ -0,0 +1,300 @@
+.gym {
+ position: relative;
+ color: $color-primary;
+ font-family: $ff-roboto-condensed;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: 24px;
+}
+
+.gym__container {
+ display: flex;
+ justify-content: space-between;
+ column-gap: 145px;
+ padding-top: 120px;
+ padding-bottom: 235px;
+
+ @include vp-1365 {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding-top: 100px;
+ padding-bottom: 183px;
+ }
+
+ @include vp-767 {
+ padding-top: 70px;
+ padding-bottom: 40px;
+ }
+}
+
+.gym__text-content {
+ @include vp-1365 {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ @include vp-767 {
+ text-align: start;
+ align-items: start;
+ }
+}
+
+.gym__text-content h2 {
+ max-width: 355px;
+ min-width: 290px;
+ margin: 0;
+ margin-top: -6px; //Подгон
+ margin-bottom: 28px;
+ font-family: $ff-alumni-sans;
+ font-size: 54px;
+ font-weight: 600;
+ line-height: 54px;
+ letter-spacing: 1.62px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ max-width: 80vw;
+ margin-top: 0;
+ margin-bottom: 20px;
+ font-size: 42px;
+ line-height: 42px;
+ letter-spacing: 1.26px;
+ }
+
+ @include vp-767 {
+ margin-bottom: 13px;
+ font-size: 32px;
+ line-height: 32px;
+ letter-spacing: 0.96px;
+ }
+}
+
+.gym__text-content h3 {
+ max-width: 355px;
+ min-width: 290px;
+ margin: 0;
+ margin-bottom: 95px;
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 22px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ max-width: 80vw;
+ margin-bottom: 34px;
+ font-size: 20px;
+ line-height: 20px;
+ }
+
+ @include vp-767 {
+ margin-bottom: 38px;
+ font-size: 18px;
+ }
+}
+
+.gym__text-content p {
+ max-width: 355px;
+ min-width: 290px;
+ margin: 0;
+ margin-bottom: 8px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ max-width: 502px;
+ margin-bottom: 36px;
+ }
+
+ @include vp-767 {
+ max-width: calc(100vw - 30px); //Так можно?
+ margin-bottom: 50px;
+ font-size: 14px;
+ line-height: 22px;
+ }
+}
+
+.gym__text-content p + p {
+ @include vp-1365 {
+ display: none;
+ }
+}
+
+.gym__img-wrapper {
+ @include vp-1365 {
+ width: 100%;
+ }
+
+ @include vp-767 {
+ width: 100vw;
+ min-width: 320px;
+ }
+}
+
+.gym__img-wrapper img {
+ object-fit: cover;
+ height: 100%;
+
+ @include vp-1365 {
+ width: 100%;
+ height: 345px;
+ }
+
+ @include vp-767 {
+ height: 313px;
+ }
+}
+
+.gym__video-wrapper {
+ position: absolute;
+ bottom: 120px; //Подгон
+ left: 50%;
+ z-index: 1000;
+ transform: translateX(-40%); //Подгон
+
+ @include vp-1365 {
+ top: unset;
+ left: 50%;
+ bottom: 95px; //Подгон
+ transform: translateX(-50%) translateY(-2%); //Подгон
+ }
+
+ @include vp-767 {
+ position: static;
+ margin-bottom: 70px;
+ transform: unset;
+ }
+}
+
+.gym__poster-wrapper {
+ position: relative;
+}
+
+.gym__poster-wrapper img {
+ object-fit: cover;
+
+ @include vp-1365 {
+ width: 265px;
+ height: 167px;
+ }
+
+ @include vp-767 {
+ width: 100vw;
+ min-width: 320px;
+ }
+}
+
+.gym__video-btn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ display: block;
+ width: 100px;
+ height: 100px;
+ padding: 0;
+ color: $color-default-white;
+ background-color: transparent;
+ border: 2px solid rgba(237, 2, 51, 0.2);
+ border-radius: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ cursor: pointer;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ display: block;
+ width: 72px;
+ height: 72px;
+ border-radius: 50%;
+ background-image: $gradient-primary;
+ transform: translateX(-50%) translateY(-50%);
+ z-index: -1;
+
+ @include vp-1365 {
+ width: 52px;
+ height: 52px;
+ }
+ }
+
+ @include hover-focus {
+ outline: none;
+ color: $color-primary;
+ border: 2px solid $color-primary;
+
+ &::before {
+ background-image: unset;
+ background-color: $color-default-white;
+ }
+ }
+
+ @include active {
+ color: $color-primary;
+ border: 2px solid $color-primary;
+
+ &::before {
+ width: 52px;
+ height: 52px;
+ background-image: unset;
+ background-color: $color-default-white;
+
+ @include vp-1365 {
+ width: 32px;
+ height: 32px;
+ }
+ }
+ }
+
+ &:disabled {
+ outline: none;
+ color: $color-primary;
+ border: 2px solid $color-primary;
+ opacity: 0.4;
+ pointer-events: none;
+
+ &::before {
+ background-image: unset;
+ background-color: $color-default-white;
+ }
+ }
+
+ @include vp-1365 {
+ width: 72px;
+ height: 72px;
+ }
+}
+
+.gym__symbol-btn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ display: block;
+ width: 18px;
+ height: 18px;
+ transform: translateX(-50%) translateY(-50%);
+
+ @include vp-1365 {
+ font-size: 12px;
+ transform: translateX(-42%) translateY(-38%); //Подгон
+ }
+}
+
+.gym__video {
+ top: 0;
+ left: 0;
+ display: none;
+ border: none;
+
+ @include vp-1365 {
+ bottom: 0;
+ width: 265px;
+ height: 167px;
+ }
+
+ @include vp-767 {
+ width: 100vw;
+ min-width: 320px;
+ }
+}
diff --git a/source/sass/blocks/header.scss b/source/sass/blocks/header.scss
new file mode 100644
index 000000000..d1cfb6e29
--- /dev/null
+++ b/source/sass/blocks/header.scss
@@ -0,0 +1,92 @@
+.header {
+ color: $color-default-white;
+ background-image: $gradient-hero;
+}
+
+.header__container {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 32px;
+ min-height: 86px;
+ padding-top: 30px;
+ padding-bottom: 30px;
+
+ @include vp-767 {
+ min-height: 54px;
+ padding-top: 16px;
+ padding-bottom: 16px;
+ }
+}
+
+.header__link {
+ color: $color-default-white;
+ text-decoration: none;
+
+ @include hover-focus {
+ outline: none;
+ opacity: 0.7;
+ }
+
+ @include active {
+ opacity: 0.5;
+ }
+}
+
+.header__logo-wrapper {
+ background-color: $color-resolution-blue;
+ display: inline-block;
+ margin-top: 30px;
+ padding: 10px;
+}
+
+.header__img-wrapper img {
+ @include vp-1365 {
+ width: 112px;
+ height: 24px;
+ }
+
+ @include vp-767 {
+ width: 102px;
+ height: 22px;
+ }
+}
+
+.header__contact {
+ min-width: 155px;
+ color: $color-default-white;
+ font-family: $ff-roboto-condensed;
+ font-size: 26px;
+ font-weight: 700;
+ line-height: 26px;
+ word-wrap: break-word;
+ border-bottom: 2px solid transparent;
+
+ @include hover-focus {
+ outline: none;
+ color: $color-resolution-blue;
+ }
+
+ @include active {
+ color: $color-primary;
+ border-bottom: 2px solid $color-primary;
+ }
+
+ &:disabled {
+ color: $color-default-white;
+ border-bottom: 2px solid transparent;
+ opacity: 0.5;
+ pointer-events: none;
+ }
+
+ @include vp-1365 {
+ font-size: 24px;
+ line-height: 24px;
+ }
+
+ @include vp-767 {
+ font-size: 22px;
+ line-height: 22px;
+ }
+}
diff --git a/source/sass/blocks/hero.scss b/source/sass/blocks/hero.scss
new file mode 100644
index 000000000..e14b8588b
--- /dev/null
+++ b/source/sass/blocks/hero.scss
@@ -0,0 +1,222 @@
+.hero {
+ color: $color-default-white;
+ background-image: $gradient-hero;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: block;
+ width: 100%;
+ height: 730px;
+ background-image: $gradient-hero;
+ background-repeat: no-repeat;
+ background-size: cover;
+ z-index: -1000;
+
+ @include vp-1365 {
+ height: 574px;
+ }
+
+ @include vp-767 {
+ height: 461px;
+ }
+ }
+}
+
+.hero__container {
+ display: flex;
+ column-gap: 70px;
+ padding-bottom: 120px;
+
+ @include vp-1365 {
+ justify-content: space-between;
+ column-gap: 30px;
+ padding-bottom: 100px;
+ }
+
+ @include vp-767 {
+ padding-top: 35px;
+ padding-bottom: 70px;
+ justify-content: flex-start;
+ column-gap: 0;
+ }
+}
+
+.hero__flex-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ align-self: center;
+ margin: 62px 0;
+
+ @include vp-1365 {
+ margin: 31px 0;
+ }
+
+ @include vp-767 {
+ flex-grow: 1;
+ margin: unset;
+ }
+}
+
+.hero__row-wrapper {
+ display: flex;
+ align-items: center;
+
+ @include vp-1365 {
+ column-gap: 26px;
+ }
+
+ @include vp-767 {
+ width: 100%;
+ justify-content: space-between;
+ column-gap: 15px;
+ margin-bottom: 60px;
+ align-items: end;
+ }
+}
+
+.hero__column-wrapper {
+ width: 270px;
+ font-family: $ff-alumni-sans;
+ font-style: normal;
+ text-align: right;
+ text-transform: uppercase;
+
+ @include vp-1365 {
+ width: 185px;
+ }
+
+ @include vp-767 {
+ width: 162px;
+ }
+}
+
+.hero__city {
+ margin: 0;
+ margin-bottom: 10px;
+ font-size: 54px;
+ font-weight: 600;
+ line-height: 54px;
+ letter-spacing: 1.26px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ font-size: 42px;
+ line-height: 42px;
+ }
+
+ @include vp-767 {
+ margin-bottom: 14px;
+ font-size: 32px;
+ font-weight: 600;
+ line-height: 32px;
+ letter-spacing: 0.96px;
+ }
+}
+
+.hero__title {
+ margin: 0;
+ margin-bottom: 50px;
+ font-size: 92px;
+ font-weight: 800;
+ line-height: 110px;
+ letter-spacing: 4.6px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ font-size: 72px;
+ line-height: 85px;
+ letter-spacing: 0;
+ }
+
+ @include vp-767 {
+ margin-bottom: unset;
+ font-size: 62px;
+ line-height: 70px;
+ letter-spacing: 1.86px;
+ }
+}
+
+.hero__list {
+ width: 113px;
+ min-height: 66px;
+ margin-top: 66px; //Подгон
+ font-family: $ff-roboto-condensed;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 22px;
+ text-align: right;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ margin-top: 58px; //Подгон
+ }
+
+ @include vp-767 {
+ margin-top: unset;
+ padding-top: 10px; //Подгон
+ line-height: 20px;
+ }
+}
+
+.hero__link {
+ display: block;
+ margin-left: auto;
+ width: 230px;
+ padding: 25px 20px;
+ border: 2px solid $color-default-white;
+ color: $color-default-white;
+ font-family: $ff-roboto-condensed;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 12px;
+ letter-spacing: 0.6px;
+ text-align: center;
+ text-transform: uppercase;
+ word-wrap: break-word;
+
+ @include hover-focus {
+ outline: none;
+ color: $color-additional;
+ background-color: $color-default-white;
+ }
+
+ @include active {
+ color: $color-primary;
+ background-color: $color-default-white;
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ }
+
+ @include vp-1365 {
+ width: 185px;
+ padding: 20px 20px;
+ }
+
+ @include vp-767 {
+ width: 100%;
+ max-width: calc(100vw - 30px); //Так можно?
+ min-width: 290px;
+ margin-left: unset;
+ }
+}
+
+.hero__img-wrapper img {
+ object-fit: cover;
+ height: 100%;
+
+ @include vp-1365 {
+ width: 324px;
+ }
+
+ @include vp-767 {
+ display: none;
+ }
+}
diff --git a/source/sass/blocks/jury-card.scss b/source/sass/blocks/jury-card.scss
new file mode 100644
index 000000000..bfeb4af4a
--- /dev/null
+++ b/source/sass/blocks/jury-card.scss
@@ -0,0 +1,140 @@
+.jury-card {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: $color-default-white;
+ font-family: $ff-roboto-condensed;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 22px;
+}
+
+.jury-card__container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: end;
+ align-items: center;
+ width: 260px;
+ height: 294px;
+ padding: 20px;
+ padding-bottom: 18px;
+ // overflow-y: scroll; //Реализация переполнения с фиксированной высотой
+
+ @include vp-1365 {
+ width: 268px;
+ height: 294px;
+ }
+
+ @include vp-767 {
+ width: 226px;
+ height: 274px;
+ }
+
+ @include hover-focus {
+ justify-content: center;
+ background-color: rgba(16, 38, 84, 0.89);
+ }
+
+ @include active {
+ justify-content: center;
+ background-color: rgba(16, 38, 84, 0.89);
+ }
+}
+
+.jury-card__img-wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1000;
+}
+
+.jury-card__img-wrapper img {
+ object-fit: cover;
+ min-height: 100%;
+
+ @include vp-1365 {
+ width: 268px;
+ height: 294px;
+ }
+
+ @include vp-767 {
+ width: 226px;
+ height: 274px;
+ }
+}
+
+.jury-card__title {
+ max-width: 200px;
+ margin: 0;
+ margin-bottom: 8px;
+ font-size: 22px;
+ font-weight: 400;
+ text-align: center;
+ word-wrap: break-word;
+
+ @include vp-767 {
+ font-size: 18px;
+ }
+}
+
+.jury-card__sub-title {
+ max-width: 150px;
+ margin: 0;
+ margin-bottom: 33px;
+ color: $color-ghost-white;
+ font-size: 16px;
+ font-weight: 300;
+ line-height: 24px;
+ text-align: center;
+ word-wrap: break-word;
+
+ @include vp-767 {
+ margin-bottom: 22px;
+ font-size: 14px;
+ }
+}
+
+.jury-card__list {
+ display: flex;
+ flex-direction: column;
+ row-gap: 12px;
+ max-width: 160px;
+ margin: 0 30px;
+ padding-left: 16px;
+ word-wrap: break-word;
+
+ @include vp-767 {
+ row-gap: 8px;
+ font-size: 12px;
+ line-height: 18px;
+ }
+}
+
+.jury-card__wrapper {
+ display: none;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+@media (hover: hover) {
+ .jury-card__container:hover:not(.focus-visible) {
+ .jury-card__wrapper {
+ display: flex;
+ }
+ }
+}
+
+.jury-card__container.focus-visible:focus {
+ .jury-card__wrapper {
+ display: flex;
+ }
+}
+
+.jury-card__container:active:not(.focus-visible) {
+ .jury-card__wrapper {
+ display: flex;
+ }
+}
diff --git a/source/sass/blocks/jury.scss b/source/sass/blocks/jury.scss
new file mode 100644
index 000000000..78d9aeeab
--- /dev/null
+++ b/source/sass/blocks/jury.scss
@@ -0,0 +1,58 @@
+.jury {
+ position: relative;
+ margin-bottom: 120px;
+
+ @include vp-1365 {
+ margin-bottom: 100px;
+ }
+
+ @include vp-767 {
+ margin-bottom: 70px;
+ }
+}
+
+.jury__container {
+ width: 100%;
+ max-width: $vp-1366;
+ margin: 0 auto;
+ padding: 0 103px;
+
+ @include vp-1365 {
+ padding: 0 100px;
+ }
+
+ @include vp-767 {
+ padding: 0 47px;
+ }
+}
+
+.jury__title {
+ max-width: 100%;
+ margin: 0;
+ margin-bottom: 45px;
+ color: $color-primary;
+ font-family: $ff-alumni-sans;
+ font-size: 54px;
+ font-weight: 600;
+ line-height: 54px;
+ letter-spacing: 1.62px;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 40px;
+ font-size: 42px;
+ font-weight: 600;
+ line-height: 42px;
+ letter-spacing: 1.26px;
+ }
+
+ @include vp-767 {
+ margin-bottom: 42px;
+ font-size: 32px;
+ font-weight: 600;
+ line-height: 32px;
+ letter-spacing: 0.96px;
+ }
+}
diff --git a/source/sass/blocks/list.scss b/source/sass/blocks/list.scss
new file mode 100644
index 000000000..2cf353a24
--- /dev/null
+++ b/source/sass/blocks/list.scss
@@ -0,0 +1,5 @@
+.list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
diff --git a/source/sass/blocks/subscription.scss b/source/sass/blocks/subscription.scss
new file mode 100644
index 000000000..790a7fe56
--- /dev/null
+++ b/source/sass/blocks/subscription.scss
@@ -0,0 +1,162 @@
+.subscription {
+ position: relative;
+ background-color: $color-ghost-white;
+ color: $color-primary;
+ font-style: normal;
+
+ @include vp-767 {
+ border-top: 1px solid $color-default-black;
+ border-bottom: 1px solid $color-default-black;
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+ }
+}
+
+.subscription__container {
+ padding-top: 124px; //Подгон
+ padding-bottom: 120px;
+
+ @include vp-1365 {
+ padding-top: 100px;
+ padding-bottom: 100px;
+ }
+
+ @include vp-767 {
+ padding-top: 70px;
+ padding-bottom: 70px;
+ }
+}
+
+.subscription__title {
+ max-width: 230px;
+ margin: 0 auto;
+ margin-bottom: 30px;
+ font-family: $ff-alumni-sans;
+ font-size: 54px;
+ font-weight: 600;
+ line-height: 54px;
+ letter-spacing: 1.62px;
+ text-align: center;
+ word-wrap: break-word;
+
+ @include vp-1365 {
+ margin-bottom: 35px;
+ font-size: 42px;
+ line-height: 42px;
+ letter-spacing: 1.26px;
+ }
+
+ @include vp-767 {
+ margin-bottom: 22px;
+ font-size: 32px;
+ line-height: 32px;
+ letter-spacing: 0.96px;
+ }
+}
+
+.subscription__tabs-wrapper {
+ display: flex;
+ justify-content: center;
+}
+
+.subscription__list-tabs {
+ display: flex;
+ gap: 50px;
+ margin-bottom: 38px;
+ border-bottom: 2px solid rgba(120, 120, 120, 0.2);
+ font-family: $ff-roboto-condensed;
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 20px;
+
+ @include vp-1365 {
+ gap: 54px;
+ margin-bottom: 45px;
+ font-size: 18px;
+ line-height: 18px;
+ }
+
+ @include vp-767 {
+ flex-wrap: wrap;
+ gap: 45px;
+ max-width: 290px;
+ margin-bottom: 35px;
+ font-size: 16px;
+ line-height: 16px;
+ }
+}
+
+.subscription__btn {
+ max-width: 100px;
+ color: rgba(16, 38, 84, 0.5);
+ padding: 0;
+ padding-bottom: 12px;
+ border: none;
+ border-bottom: 2px solid rgba(120, 120, 120, 0.2);
+ background-color: $color-ghost-white;
+ transform: translateY(2px);
+ word-wrap: break-word;
+
+ cursor: pointer;
+
+ @include hover-focus {
+ outline: none;
+ color: $color-primary;
+ border-bottom: 2px solid $color-crimson;
+ }
+
+ @include active {
+ outline: none;
+ color: $color-primary;
+ border-bottom: 2px solid $color-crimson;
+ }
+
+ &:disabled {
+ color: rgba(16, 38, 84, 0.2);
+ border-color: rgba(16, 38, 84, 0.2);
+ pointer-events: none;
+ }
+
+ @include vp-1365 {
+ padding-bottom: 10px;
+ }
+
+ @include vp-767 {
+ padding-bottom: 14px;
+ }
+}
+
+.subscription__cards {
+ position: relative;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 40px;
+ z-index: 1;
+
+ @include vp-1365 {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ @include vp-767 {
+ row-gap: 32px;
+ }
+}
+
+.subscription__img-wrapper {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ transform: translateY(33%); //Подгон
+ object-fit: cover;
+
+ @include vp-1365 {
+ width: 275px;
+ height: 328px;
+ transform: translateY(25%); //Подгон
+ }
+
+ @include vp-767 {
+ display: none;
+ }
+}
diff --git a/source/sass/blocks/swiper-nav.scss b/source/sass/blocks/swiper-nav.scss
new file mode 100644
index 000000000..561585c78
--- /dev/null
+++ b/source/sass/blocks/swiper-nav.scss
@@ -0,0 +1,67 @@
+.swiper-nav__button {
+ position: absolute;
+ bottom: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 56px;
+ height: 56px;
+ color: $color-primary;
+ border-radius: 56px;
+ z-index: 10;
+ cursor: pointer;
+
+ &--prev {
+ left: 0;
+ transform: translateX(25px) translateY(-120px);
+ }
+
+ &--next {
+ right: 0;
+ transform: translateX(-25px) translateY(-120px) scale(-1);
+ }
+
+ @include vp-1365 {
+ &--prev {
+ transform: translateX(25px) translateY(-120px);
+ }
+
+ &--next {
+ transform: translateX(-25px) translateY(-120px) scale(-1);
+ }
+ }
+
+ @include vp-767 {
+ width: 36px;
+ height: 36px;
+
+ &--prev {
+ transform: translateX(5px) translateY(-120px);
+ }
+
+ &--next {
+ transform: translateX(-5px) translateY(-120px) scale(-1);
+ }
+ }
+
+ @include hover-focus {
+ border: 1px solid $color-primary;
+ }
+
+ @include active {
+ color: $color-default-white;
+ background-color: $color-primary;
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ border: unset;
+ }
+}
+
+.swiper-nav__button svg {
+ @include vp-767 {
+ width: 10px;
+ height: 19px;
+ }
+}
diff --git a/source/sass/global/container.scss b/source/sass/global/container.scss
index 7b71254a6..9ccb194d8 100644
--- a/source/sass/global/container.scss
+++ b/source/sass/global/container.scss
@@ -1,18 +1,14 @@
.container {
width: 100%;
- max-width: 1920px;
+ max-width: $vp-1366;
margin: 0 auto;
- padding: 0 40px;
+ padding: 0 103px;
- @include vp-1439 {
- padding: 0 32px;
- }
-
- @include vp-1023 {
- padding: 0 24px;
+ @include vp-1365 {
+ padding: 0 45px;
}
@include vp-767 {
- padding: 0 16px;
+ padding: 0 15px;
}
}
diff --git a/source/sass/global/fonts.scss b/source/sass/global/fonts.scss
index ba889ef00..8997c5380 100644
--- a/source/sass/global/fonts.scss
+++ b/source/sass/global/fonts.scss
@@ -1,8 +1,53 @@
+@font-face {
+ font-style: normal;
+ font-weight: 600;
+ font-family: "Alumni Sans";
+
+ font-display: swap;
+ src: url("../fonts/alumni/AlumniSans-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+ font-style: normal;
+ font-weight: 700;
+ font-family: "Alumni Sans";
+
+ font-display: swap;
+ src: url("../fonts/alumni/AlumniSans-Bold.woff2") format("woff2");
+}
+
+@font-face {
+ font-style: normal;
+ font-weight: 800;
+ font-family: "Alumni Sans";
+
+ font-display: swap;
+ src: url("../fonts/alumni/AlumniSans-ExtraBold.woff2") format("woff2");
+}
+
+@font-face {
+ font-style: normal;
+ font-weight: 300;
+ font-family: "Roboto Condensed";
+
+ font-display: swap;
+ src: url("../fonts/roboto/RobotoCondensed-Light.woff2") format("woff2");
+}
+
@font-face {
font-style: normal;
font-weight: 400;
- font-family: "";
+ font-family: "Roboto Condensed";
+
+ font-display: swap;
+ src: url("../fonts/roboto/RobotoCondensed-Regular.woff2") format("woff2");
+}
+
+@font-face {
+ font-style: normal;
+ font-weight: 700;
+ font-family: "Roboto Condensed";
font-display: swap;
- src: url("../fonts/.woff2") format("woff2");
+ src: url("../fonts/roboto/RobotoCondensed-Bold.woff2") format("woff2");
}
diff --git a/source/sass/global/reboot.scss b/source/sass/global/reboot.scss
index 9ad1dce09..9f0801044 100644
--- a/source/sass/global/reboot.scss
+++ b/source/sass/global/reboot.scss
@@ -16,7 +16,7 @@ html {
font-weight: 400;
font-size: $fz-default;
line-height: 24px;
- font-family: $ff-placeholder;
+ font-family: $ff-roboto-condensed;
color: $color-default-black;
-webkit-font-smoothing: antialiased;
@@ -30,6 +30,7 @@ html {
body {
width: 100%;
height: 100%;
+ min-width: $vp-320;
background-color: $color-default-white;
}
diff --git a/source/sass/global/utils.scss b/source/sass/global/utils.scss
index b7d6d7f3b..7a7b670a5 100644
--- a/source/sass/global/utils.scss
+++ b/source/sass/global/utils.scss
@@ -17,13 +17,13 @@
}
}
-.rouble {
- font-family: $ff-rouble;
- /* stylelint-disable */
- text-transform: lowercase !important;
- font-weight: 400 !important;
- /* stylelint-enable */
-}
+// .rouble {
+// font-family: $ff-rouble;
+// /* stylelint-disable */
+// text-transform: lowercase !important;
+// font-weight: 400 !important;
+// /* stylelint-enable */
+// }
.visually-hidden {
position: absolute;
diff --git a/source/sass/mixins.scss b/source/sass/mixins.scss
index ecc2dcf18..dc8067489 100644
--- a/source/sass/mixins.scss
+++ b/source/sass/mixins.scss
@@ -19,7 +19,7 @@
}
@mixin active {
- &.focus-visible:active {
+ &:active:not(.focus-visible) {
@content;
}
}
@@ -38,76 +38,20 @@
// Desktop first
-@mixin vp-1919 {
- @media (max-width: ($vp-1920 - 1px)) {
- @content;
- }
-}
-
-@mixin vp-1439 {
- @media (max-width: ($vp-1440 - 1px)) {
- @content;
- }
-}
-
-@mixin vp-1279 {
- @media (max-width: ($vp-1280 - 1px)) {
- @content;
- }
-}
-
-@mixin vp-1023 {
- @media (max-width: ($vp-1024 - 1px)) {
+@mixin vp-1365 {
+ @media (max-width: ($vp-1366 - 1)) {
@content;
}
}
@mixin vp-767 {
- @media (max-width: ($vp-768 - 1px)) {
+ @media (max-width: ($vp-768 - 1)) {
@content;
}
}
-@mixin vp-374 {
- @media (max-width: ($vp-375 - 1px)) {
- @content;
- }
-}
-
-// Mobile first
-
-// @mixin vp-375 {
-// @media (min-width: $vp-375) {
-// @content;
-// }
-// }
-
-// @mixin vp-768 {
-// @media (min-width: $vp-768) {
-// @content;
-// }
-// }
-
-// @mixin vp-1024 {
-// @media (min-width: $vp-1024) {
-// @content;
-// }
-// }
-
-// @mixin vp-1280 {
-// @media (min-width: $vp-1280) {
-// @content;
-// }
-// }
-
-// @mixin vp-1440 {
-// @media (min-width: $vp-1440) {
-// @content;
-// }
-// }
-
-// @mixin vp-1920 {
-// @media (min-width: $vp-1920) {
+// @mixin vp-319 {
+// @media (max-width: ($vp-320 - 1)) {
// @content;
// }
// }
diff --git a/source/sass/style.scss b/source/sass/style.scss
index d587251d3..a228efdb2 100644
--- a/source/sass/style.scss
+++ b/source/sass/style.scss
@@ -3,7 +3,7 @@
@import "vendor/normalize";
// Swiper 8.4.7
-// @import "vendor/swiper";
+@import "vendor/swiper";
// Global
// ---------------------------------
@@ -19,10 +19,21 @@
// ---------------------------------
@import "blocks/btn";
-@import "blocks/modal";
@import "blocks/custom-input";
@import "blocks/custom-toggle";
@import "blocks/custom-select";
+@import "blocks/list";
+@import "blocks/header";
+@import "blocks/hero";
+@import "blocks/gym";
+@import "blocks/subscription";
+@import "blocks/card-subscription";
+@import "blocks/competition";
+@import "blocks/card-competition";
+@import "blocks/jury";
+@import "blocks/jury-card";
+@import "blocks/swiper-nav";
+@import "blocks/advantages";
// ---------------------------------
diff --git a/source/sass/variables.scss b/source/sass/variables.scss
index b5a9ab283..aeed2a19b 100644
--- a/source/sass/variables.scss
+++ b/source/sass/variables.scss
@@ -3,19 +3,31 @@
// Default
-$color-default-black: #000000;
$color-default-white: #ffffff;
+$color-default-black: #000000;
$color-transparent: rgba(255, 255, 255, 0);
// Project palette
// для нейминга цветов используем https://www.htmlcsscolor.com/hex/334482
-$color-neon-blue: #2c39f2;
-$color-torch-red: #ff1553;
+$color-primary: #102654;
+$color-additional: #103aae;
+$color-torch-red-1: #ff1553;
+$color-torch-red-2: #ff121f;
+$color-resolution-blue: #1c3374;
+$color-crimson: #d10a42;
+$color-ghost-white: #f8f9fc;
+$color-torch-red: #ed0233;
+$color-black-russian: #030a1a;
+$color-persian-blue: #2e35ac;
+
// Gradient
-$black-to-right: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 75%);
+$gradient-hero: linear-gradient(90deg, rgba(28, 51, 116, 0.2) 0%, #1c3477 0.01%, #1a3578 39.11%, #73184b 75.5%, #b4022a 100%);
+$crimson-to-blue: linear-gradient(128deg, #d10a42 0%, #0041ca 45.58%);
+$gradient-primary: linear-gradient(97deg, #ed0233 17.6%, #003eb7 95.31%);
+$blue-to-red: conic-gradient(from 151deg at 16.03% 39.06%, #003d85 32.24deg, #b80027 313.31deg);
// Typography
// ---------------------------------
@@ -25,9 +37,9 @@ $fz-default: 16px;
// у некоторых шрифтов в ios возникают проблемы с символом рубля
// https://www.artlebedev.ru/kovodstvo/sections/159/#13
-$ff-rouble: "Rouble", "Arial", sans-serif;
+$ff-alumni-sans: "Alumni Sans", "Arial", sans-serif;
-$ff-placeholder: "Placeholder", "Arial", sans-serif;
+$ff-roboto-condensed: "Roboto Condensed", "Arial", sans-serif;
// Animation
// ---------------------------------
@@ -43,13 +55,9 @@ $trans-600: 0.6s $tf-default;
// Viewports
// ---------------------------------
-$vp-320: 320px;
-$vp-375: 375px;
-$vp-768: 768px;
-$vp-1024: 1024px;
-$vp-1280: 1280px;
-$vp-1440: 1440px;
-$vp-1920: 1920px;
+$vp-320: 320px;
+$vp-768: 768px;
+$vp-1366: 1366px;
// Retina
// ---------------------------------
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+