diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 7a1c936..67e430c 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -92,6 +92,9 @@ body{ text-decoration: none; } +.title--center{ + text-align: center; +} .text-1{ font-weight: 400; color: var(--text-white); diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 5506c7a..e3d1f54 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -566,11 +566,142 @@ } /* free */ -/* text and form */ -.text-form{ +/* reviews */ +.reviews{ + margin-top: 56px; + + position: relative; + + overflow: hidden; +} +.reviews__item{ + display: flex; + + padding-bottom: 88px; +} +.reviews-item__content{ + width: 100%; +} +.reviews-item-content__header{ + display: flex; + align-items: center; +} +.reviews-item-content-header__img{ + width: 112px; + height: 112px; + + border-radius: 4px; +} +.reviews-item-content-header__block{ + margin-left: 40px; + + width: 100%; +} +.reviews-item-content-header__item{ + margin-top: 16px; + + width: 100%; + + display: flex; + justify-content: space-between; +} +.reviews-item-content-header__item:first-child{ + margin-top: 0; +} +.reviews-item-content-header__pin{ + padding-left: 40px; + + display: flex; + align-items: center; + + background-image: url(/assets/img/icon/pin.svg); + background-repeat: no-repeat; + background-position: left; +} +.reviews-item-content__text{ + margin-top: 40px; +} +.reviews-item__img{ + margin-left: 164px; + + width: 577px; + height: 600px; + border-radius: 4px; + + object-fit: cover; + + flex-shrink: 0; +} +.reviews .swiper-pagination{ + position: absolute; + right: 32px; + bottom: 104px; + + padding-right: 32px; + + text-align: end; +} +.reviews .swiper-pagination-bullet{ + width: 97px; + height: 4px; + + background-color: #111114; + opacity: 1 !important; + + border-radius: 0; +} +.reviews .swiper-pagination-bullet-active{ + background-color: var(--text-white); +} +.reviews__counter{ + position: absolute; + bottom: 0px; + + width: 100%; + display: flex; + justify-content: center; + + font-weight: 400; + font-size: 24px; + color: var(--text-white); +} +.reviews__counter--grey{ + color: var(--link); +} + +.reviews .swiper-button-next::after, .reviews .swiper-button-prev::after{ + position: static; + + font-size: 0; +} +.reviews .swiper-button-next, .reviews .swiper-button-prev{ + position: static; + margin-top: 0; + + width: 32px; + height: 32px; +} +.reviews .swiper-button-next{ + margin-left: 40px; + background-image: url(/assets/img/icon/slider-righ.svg); + background-repeat: no-repeat; +} +.reviews .swiper-button-prev{ + margin-right: 40px; + + background-image: url(/assets/img/icon/slider-left.svg); + background-repeat: no-repeat; +} +/* reviews */ + +/* text and form */ +.text-form{ + margin-top: 88px; + + display: flex; } .text-form__content{ width: 100%; diff --git a/assets/img/icon/slider-left.svg b/assets/img/icon/slider-left.svg new file mode 100644 index 0000000..efa8804 --- /dev/null +++ b/assets/img/icon/slider-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icon/slider-righ.svg b/assets/img/icon/slider-righ.svg new file mode 100644 index 0000000..6584b89 --- /dev/null +++ b/assets/img/icon/slider-righ.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/photo/reviews-person.png b/assets/img/photo/reviews-person.png new file mode 100644 index 0000000..737665e Binary files /dev/null and b/assets/img/photo/reviews-person.png differ diff --git a/assets/img/photo/reviews.png b/assets/img/photo/reviews.png new file mode 100644 index 0000000..ec55e15 Binary files /dev/null and b/assets/img/photo/reviews.png differ diff --git a/assets/js/main.js b/assets/js/main.js index d524663..af529d3 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -2,7 +2,6 @@ const gymSwiper = new Swiper('.gym-swiper', { direction: 'horizontal', - slidesPerView: 1.20, breakpoints: { 320:{ slidesPerView: 1.20, @@ -14,4 +13,33 @@ const gymSwiper = new Swiper('.gym-swiper', { } }); + + +const reviewsSwiper = new Swiper('.reviews-swiper', { + spaceBetween: 24, + // If we need pagination + pagination: { + el: '.swiper-pagination', + }, + + // Navigation arrows + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + + // And if we need scrollbar + scrollbar: { + el: '.swiper-scrollbar', + }, + runCallbacksOnInit: true, + // === new change + on: { + slideChange: function(){ + let offer = document.querySelector('#numberReviews'); + offer.innerHTML = (this.activeIndex + 1); + } + } +}) + // gymSwiper.destroy(); diff --git a/index.html b/index.html index d510710..3cd2366 100644 --- a/index.html +++ b/index.html @@ -593,6 +593,169 @@ +
+

+ Отзывы клиентов +

+ +
+
+
+
+
+ + +
+
+

Название клуба

+ +

Локация

+
+
+

ФИО

+
+
+
+ +
+

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

+ Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания!

+ Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу! +

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

Название клуба

+ +

Локация

+
+
+

ФИО

+
+
+
+ +
+

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

+ Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания!

+ Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу! +

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

Название клуба

+ +

Локация

+
+
+

ФИО

+
+
+
+ +
+

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

+ Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания!

+ Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу! +

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

Название клуба

+ +

Локация

+
+
+

ФИО

+
+
+
+ +
+

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

+ Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания!

+ Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу! +

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

Название клуба

+ +

Локация

+
+
+

ФИО

+
+
+
+ +
+

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

+ Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания!

+ Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу! +

+
+
+ + +
+
+ +
+ +
+
+ 1/5 +
+
+
+
+
@@ -656,7 +819,7 @@
- +