Лагерь: Секция 4
This commit is contained in:
Dekart Deploy Bot
parent
b97b2411e8
commit
0af82b233d
@ -704,54 +704,105 @@ p {
|
|||||||
.suggestions::before { display: none; }
|
.suggestions::before { display: none; }
|
||||||
}
|
}
|
||||||
.infograph {
|
.infograph {
|
||||||
|
text-align: center;
|
||||||
}
|
|
||||||
.infograph__item {
|
|
||||||
width: calc(25% - 20px);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.infograph__item_img {
|
.infograph__lead {
|
||||||
border-radius: 30px;
|
font-family: Inter, sans-serif;
|
||||||
width: 100%;
|
font-size: 18px;
|
||||||
max-width: 180px;
|
line-height: 1.6;
|
||||||
aspect-ratio: 1 / 1;
|
color: #555;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 640px;
|
||||||
|
margin: -16px auto 56px;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infograph__item_title {
|
.infograph__grid {
|
||||||
color: #9d9d9d;
|
display: grid;
|
||||||
font-size: 18px;
|
grid-template-columns: repeat(4, 1fr);
|
||||||
line-height: 1.25;
|
gap: 24px;
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.infograph__item_data {
|
.infograph__card {
|
||||||
color: #212121;
|
display: flex;
|
||||||
font-size: 30px;
|
flex-direction: column;
|
||||||
line-height: 1.25;
|
align-items: center;
|
||||||
font-weight: 600;
|
gap: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infograph__icon {
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infograph__icon img {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infograph__icon--age { background: rgba(57, 183, 234, 0.12); }
|
||||||
|
.infograph__icon--group { background: rgba(59, 178, 115, 0.12); }
|
||||||
|
.infograph__icon--time { background: rgba(174, 95, 205, 0.12); }
|
||||||
|
.infograph__icon--price { background: rgba(233, 69, 99, 0.12); }
|
||||||
|
|
||||||
|
.infograph__stat {
|
||||||
|
font-family: Montserrat, sans-serif;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #1c2b2d;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infograph__label {
|
||||||
|
font-family: Inter, sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: #777;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* infograph END */
|
/* infograph END */
|
||||||
|
|
||||||
.infograph-wrapper {
|
@media (max-width: 768px) {
|
||||||
display: flex;
|
.infograph__grid {
|
||||||
flex-wrap: wrap;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
justify-content: center;
|
gap: 32px;
|
||||||
gap: 30px;
|
}
|
||||||
|
.infograph__lead {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: -16px auto 40px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.infograph__stat {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
.infograph__label {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.infograph__icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
.infograph__icon img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.infograph__item {
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infograph__item:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* programs */
|
/* programs */
|
||||||
.programs-wrapper {
|
.programs-wrapper {
|
||||||
@ -1993,23 +2044,9 @@ p {
|
|||||||
gap: clamp(26px, 3.33vw, 40px);
|
gap: clamp(26px, 3.33vw, 40px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.infograph__item {
|
|
||||||
width: calc(25% - clamp(13px, 1.67vw, 20px));
|
|
||||||
gap: clamp(6px, .83vw, 10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.infograph__item_img {
|
|
||||||
border-radius: clamp(20px, 2.5vw, 30px);
|
|
||||||
width: clamp(152px, 19.5vw, 234px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.infograph__item_title {
|
|
||||||
font-size: clamp(12px, 1.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.infograph__item_data {
|
|
||||||
font-size: clamp(20px, 2.5vw, 30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.programs-wrapper {
|
.programs-wrapper {
|
||||||
gap: clamp(20px, 2.5vw, 30px);
|
gap: clamp(20px, 2.5vw, 30px);
|
||||||
@ -2489,37 +2526,6 @@ p {
|
|||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infograph {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.infograph-wrapper {
|
|
||||||
margin-top: -12px;
|
|
||||||
gap: 16px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infograph__item {
|
|
||||||
width: calc(50% - 8px);
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infograph__item_title {
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infograph__item_img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 160px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infograph__item_data {
|
|
||||||
font-size: 28px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.programs {
|
.programs {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
|
|||||||
@ -218,30 +218,43 @@ $metrics = [
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="infograph">
|
<section class="infograph">
|
||||||
<h2 class="camp_title">Цифры, которые говорят сами за себя</h2>
|
<div class="container">
|
||||||
<p class="camp_text">Мы обеспечиваем безопасную и поддерживающую среду, где дети могут раскрывать свой
|
<h2 class="camp_title">Цифры, которые говорят сами за себя</h2>
|
||||||
потенциал, исследовать мир и развивать дружбу под присмотром заботливых наставников.</p>
|
<p class="infograph__lead">Мы создаём среду, где каждый ребёнок раскрывает свой потенциал</p>
|
||||||
<div class="infograph-wrapper">
|
<div class="infograph__grid">
|
||||||
<div class="infograph__item">
|
|
||||||
<img loading="lazy" class="infograph__item_img" width="234" height="234" src="<?php echo get_template_directory_uri(); ?>/assets/images/age.svg" alt="инфографика возраста">
|
<div class="infograph__card">
|
||||||
<p class="infograph__item_title">возраст</p>
|
<div class="infograph__icon infograph__icon--age">
|
||||||
<p class="infograph__item_data">6,5−11 лет</p>
|
<img loading="lazy" src="<?php echo get_template_directory_uri(); ?>/assets/images/age.svg" alt="" width="48" height="48">
|
||||||
</div>
|
</div>
|
||||||
<div class="infograph__item">
|
<p class="infograph__stat">6,5−11 лет</p>
|
||||||
<img loading="lazy" class="infograph__item_img" width="234" height="234" src="<?php echo get_template_directory_uri(); ?>/assets/images/group.svg" alt="инфографика группы">
|
<p class="infograph__label">возраст</p>
|
||||||
<p class="infograph__item_title">каждая группа</p>
|
</div>
|
||||||
<p class="infograph__item_data">до 10 детей</p>
|
|
||||||
</div>
|
<div class="infograph__card">
|
||||||
<div class="infograph__item">
|
<div class="infograph__icon infograph__icon--group">
|
||||||
<img loading="lazy" class="infograph__item_img" width="234" height="234" src="<?php echo get_template_directory_uri(); ?>/assets/images/time.svg" alt="инфографика времени">
|
<img loading="lazy" src="<?php echo get_template_directory_uri(); ?>/assets/images/group.svg" alt="" width="48" height="48">
|
||||||
<p class="infograph__item_title">время посещения</p>
|
</div>
|
||||||
<p class="infograph__item_data">на выбор</p>
|
<p class="infograph__stat">до 10 детей</p>
|
||||||
</div>
|
<p class="infograph__label">каждая группа</p>
|
||||||
<div class="infograph__item">
|
</div>
|
||||||
<img loading="lazy" class="infograph__item_img" width="234" height="234" src="<?php echo get_template_directory_uri(); ?>/assets/images/price.svg"
|
|
||||||
alt="инфографика стоимости">
|
<div class="infograph__card">
|
||||||
<p class="infograph__item_title">стоимость недели</p>
|
<div class="infograph__icon infograph__icon--time">
|
||||||
<p class="infograph__item_data">от <?php echo esc_html( number_format($priceMin, 0, ',', ' ') ); ?> ₽</p>
|
<img loading="lazy" src="<?php echo get_template_directory_uri(); ?>/assets/images/time.svg" alt="" width="48" height="48">
|
||||||
|
</div>
|
||||||
|
<p class="infograph__stat">на выбор</p>
|
||||||
|
<p class="infograph__label">время посещения</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="infograph__card">
|
||||||
|
<div class="infograph__icon infograph__icon--price">
|
||||||
|
<img loading="lazy" src="<?php echo get_template_directory_uri(); ?>/assets/images/price.svg" alt="" width="48" height="48">
|
||||||
|
</div>
|
||||||
|
<p class="infograph__stat">от <?php echo esc_html( number_format($priceMin, 0, ',', ' ') ); ?> ₽</p>
|
||||||
|
<p class="infograph__label">стоимость недели</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user