diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 2f65cbd..cdf8e32 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -74,6 +74,10 @@ body{ text-transform: uppercase; color: var(--text-white); } +.title-2{ + font-weight: 700; + color: var(--text-white); +} .title-3{ font-weight: 700; color: var(--text-white); diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 4b933a6..35e3247 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -1,13 +1,16 @@ .wrapper{ margin: auto; - width: 1440px; + max-width: 1440px; } /* text */ .title-1{ font-size: 88px; } +.title-2{ + font-size: 64px; +} .title-3{ font-size: 40px; } @@ -162,8 +165,6 @@ } /* footer */ - - /* Стили для лептопов */ @media only screen and (min-width: 992px) and (max-width: 1400px) { .wrapper{ @@ -282,5 +283,74 @@ } /* space */ -@media only screen and (min-width: 992px) and (max-width: 1400px) {} +.main__item{ + margin-top: 200px; +} + +/* gym */ +.gym{ + margin: 34px -20px -20px -20px; +} +.gym .swiper-wrapper{ + display: flex; + flex-wrap: wrap; +} +.gym .swiper-slide{ + display: flex; +} +.gym__item{ + margin: 20px; + + height: 320px; + + display: flex; + justify-content: space-between; +} +.gym-item__img{ + min-width: calc(50% - 20px); + width: 100%; + height: 100%; + + object-fit: cover; + + border-radius: 4px; +} +.gym-item__text{ + min-width: calc(50% - 20px); + width: 100%; + + padding: 16px; + + display: flex; + flex-direction: column; + justify-content: space-between; + + background-color: var(--background-grey); + border-radius: 4px; +} +.gym-item-img--padding, +.gym-item-text--padding{ + max-width: calc(50% - 20px); +} + +.gym-item-text__header{ + display: flex; + align-items: end; +} +.gym-item-text__header .text-1{ + margin-bottom: 11.5px; +} +.gym-item-text__header .title-2{ + margin-left: 16px; +} +/* gym */ + +@media only screen and (min-width: 992px) { +.gym__item{ + width: calc(50% - 40px) !important; +} +.gym .swiper-slide:nth-child(3){ + width: 100% !important; +} +} @media only screen and (min-width: 992px) and (max-width: 1032px) {} \ No newline at end of file diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 43b145d..f531e49 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -11,6 +11,9 @@ .title-1{ font-size: 32px; } +.title-2{ + font-size: 32px; +} .title-3{ font-size: 32px; } @@ -278,6 +281,52 @@ main{ width: calc(50% - 8px); height: 160px; + + background: #2a2a2d; +} +} +/* space */ + +@media only screen and (max-width: 992px) { +.main__item{ + margin-top: 96px; +} +} + +/* gym */ +@media only screen and (max-width: 992px) { +.gym{ + margin: 40px -16px 0 0; + + overflow: hidden; +} +.gym .swiper-wrapper{ + flex-wrap: nowrap; +} +.gym .swiper-slide:nth-child(3){ + display: flex; + flex-direction: column-reverse; +} +.gym__item{ + margin: 0; + + flex-direction: column-reverse; + height: auto; +} +.gym-item__img, .gym-item__text{ + max-width: 100%; + width: 100%; + + height: 179px; +} +.gym-item__img{ + margin-top: 24px; +} +.gym-item-text__header .text-1{ + margin-bottom: 5px; +} +.gym-item-text__header .title-2{ + margin-left: 8px; } } -/* space */ \ No newline at end of file +/* gym */ \ No newline at end of file diff --git a/assets/img/photo/gym-1.png b/assets/img/photo/gym-1.png new file mode 100644 index 0000000..9e23e51 Binary files /dev/null and b/assets/img/photo/gym-1.png differ diff --git a/assets/img/photo/gym-2.png b/assets/img/photo/gym-2.png new file mode 100644 index 0000000..49e4f7d Binary files /dev/null and b/assets/img/photo/gym-2.png differ diff --git a/assets/img/photo/gym-3.png b/assets/img/photo/gym-3.png new file mode 100644 index 0000000..f933d52 Binary files /dev/null and b/assets/img/photo/gym-3.png differ diff --git a/assets/js/main.js b/assets/js/main.js index e69de29..ca6af62 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -0,0 +1,24 @@ +'use strict'; + +window.addEventListener('resize', (e) => { + if (window.innerWidth) { + + } +}); + + +const swiper = new Swiper('.gym-swiper', { + direction: 'horizontal', + breakpoints: { + 320:{ + slidesPerView: 1.20, + spaceBetween: 24, + }, + 996: { + slidesPerView: 3 + }, + 1920: { + slidesPerView: 3 + }, + } +}); \ No newline at end of file diff --git a/index.html b/index.html index 8d5dafe..1ebc8fa 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,8 @@ + + @@ -223,6 +225,79 @@ + +
+

+ GYM EVOLUTION: Технология проектирования, которая увеличивает посещаемость +

+ +
+
+
+ + +
+
+

+ На +

+ +

+ 20% +

+
+ +

+ увеличение эффективности использования площади +

+
+
+
+ + +
+
+

+ На +

+ +

+ 15% +

+
+ +

+ сокращение времени запуска клуба +

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

+ На +

+ +

+ 18% +

+
+ +

+ повышение посещаемости (на основе кейсов) +

+
+
+
+
+
+
- + + \ No newline at end of file