Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

сделал reviews для пк

Browse Source
This commit is contained in:
Kirill Pet
2024-12-18 22:38:55 +03:00
parent c082f320f6
commit 8ec1dd88d6
8 changed files with 336 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/gp-style-core.css
View File

@@ -92,6 +92,9 @@ body{
text-decoration: none;
}
.title--center{
text-align: center;
}
.text-1{
font-weight: 400;
color: var(--text-white);

135
assets/css/gp-style-desktop.css
View File

@@ -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%;

3
assets/img/icon/slider-left.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 4L10.5 16L22.5 28" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

3
assets/img/icon/slider-righ.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 4L22.5 16L10.5 28" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

BIN
assets/img/photo/reviews-person.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
assets/img/photo/reviews.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 464 KiB

30
assets/js/main.js
View File

@@ -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();

167
index.html
View File

@@ -593,6 +593,169 @@
</article>
</div>
<div class="main__item">
<p class="title-1 title--center">
Отзывы клиентов
</p>
<article class="reviews reviews-swiper">
<div class="swiper-wrapper">
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
<p class="text-1">Название клуба</p>
<p class="reviews-item-content-header__pin text-2">Локация</p>
</div>
<div class="reviews-item-content-header__item">
<p class="text-2">ФИО</p>
</div>
</div>
</div>
<div class="reviews-item-content__text">
<p class="text-2">
Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
</p>
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="reviews__counter">
<div class="swiper-button-prev"></div>
<span id="numberReviews">1</span>/<span class="reviews__counter--grey">5</span>
<div class="swiper-button-next"></div>
</div>
</article>
</div>
<div class="main__item">
<div class="text-form">
<div class="text-form__content">
@@ -656,7 +819,7 @@
</div>
<!-- <div class="main__item">
<div class="main__item">
<p class="title-1">
Дополнительные услуги
</p>
@@ -728,7 +891,7 @@
</div>
</div>
</article>
</div> -->
</div>
</main>
<footer class="footer">