leto/shkola
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Лагерь: Секция 2-3

Browse Source
This commit is contained in:
Dekart Deploy Bot 2026-05-11 22:11:10 +03:00
parent 7d9112629d
commit bbb0161bcd
2 changed files with 86 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
wp-content/themes/dekart/assets/css/camp.css
View File

@ -586,8 +586,6 @@ html {
line-height: 1.6; line-height: 1.6;
color: #555; color: #555;
text-align: center; text-align: center;
max-width: 700px;
margin: 0 auto 50px;
} }
.suggestions-wrapper { .suggestions-wrapper {
display: flex; display: flex;
@ -730,6 +728,11 @@ html {
} }
.infograph { .infograph {
text-align: center; text-align: center;
position: relative;
}
.infograph__header {
margin-bottom: 48px;
} }
.infograph__lead { .infograph__lead {
@ -738,8 +741,6 @@ html {
line-height: 1.6; line-height: 1.6;
color: #555; color: #555;
text-align: center; text-align: center;
max-width: 640px;
margin: -16px auto 56px;
font-weight: 400; font-weight: 400;
} }
@ -750,38 +751,62 @@ html {
} }
.infograph__card { .infograph__card {
background: #fff;
border-radius: 20px;
padding: 32px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 12px; gap: 16px;
text-align: center; text-align: center;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
.infograph__icon { .infograph__card:hover {
width: 72px; transform: translateY(-4px);
height: 72px; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
border-radius: 50%; }
.infograph__card-icon {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
background: rgba(57, 183, 234, 0.1);
} }
.infograph__icon img { .infograph__card-icon img {
width: 36px; width: 36px;
height: 36px; height: 36px;
object-fit: contain; object-fit: contain;
} }
.infograph__icon--age { background: rgba(57, 183, 234, 0.12); } .infograph__card:nth-child(2) .infograph__card-icon {
.infograph__icon--group { background: rgba(59, 178, 115, 0.12); } background: rgba(59, 178, 115, 0.1);
.infograph__icon--time { background: rgba(174, 95, 205, 0.12); } }
.infograph__icon--price { background: rgba(233, 69, 99, 0.12); }
.infograph__card:nth-child(3) .infograph__card-icon {
background: rgba(174, 95, 205, 0.1);
}
.infograph__card:nth-child(4) .infograph__card-icon {
background: rgba(233, 69, 99, 0.1);
}
.infograph__card-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.infograph__stat { .infograph__stat {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 30px; font-size: 28px;
font-weight: 700; font-weight: 800;
line-height: 1.2; line-height: 1.2;
color: #1c2b2d; color: #1c2b2d;
margin: 0; margin: 0;
@ -789,7 +814,7 @@ html {
.infograph__label { .infograph__label {
font-family: Inter, sans-serif; font-family: Inter, sans-serif;
font-size: 15px; font-size: 14px;
font-weight: 500; font-weight: 500;
line-height: 1.4; line-height: 1.4;
color: #777; color: #777;
@ -801,33 +826,33 @@ html {
/* infograph END */ /* infograph END */
@media (max-width: 768px) { @media (max-width: 768px) {
.infograph__grid { .infograph__header {
grid-template-columns: repeat(2, 1fr); margin-bottom: 32px;
gap: 32px;
} }
.infograph__lead { .infograph__lead {
font-size: 16px; font-size: 16px;
margin: -16px auto 40px;
max-width: 100%; max-width: 100%;
} }
.infograph__grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.infograph__card {
padding: 24px 16px;
}
.infograph__stat { .infograph__stat {
font-size: 26px; font-size: 22px;
} }
.infograph__label { .infograph__label {
font-size: 13px; font-size: 12px;
}
.infograph__icon {
width: 60px;
height: 60px;
}
.infograph__icon img {
width: 30px;
height: 30px;
} }
} }
@media (min-width: 769px) {
.infograph__lead {
text-align: center !important;
}
}
/* programs */ /* programs */
.programs__grid { .programs__grid {

46
wp-content/themes/dekart/page-camp.php
View File

@ -197,40 +197,50 @@ $metrics = [
</section> </section>
<section class="section-reveal section-bg infograph" data-bg="white"> <section class="section-reveal section-bg infograph" data-bg="white">
<div class="container"> <div class="container">
<h2 class="camp_title">Цифры, которые говорят сами за себя</h2> <div class="infograph__header">
<p class="infograph__lead">Мы создаём среду, где каждый ребёнок раскрывает свой потенциал</p> <h2 class="camp_title">Цифры, которые говорят сами за себя</h2>
<p class="infograph__lead">Мы создаём среду, где каждый ребёнок раскрывает свой потенциал</p>
</div>
<div class="infograph__grid"> <div class="infograph__grid">
<div class="infograph__card"> <div class="infograph__card">
<div class="infograph__icon infograph__icon--age"> <div class="infograph__card-icon">
<img loading="lazy" src="<?php echo $theme_uri; ?>/assets/images/age.svg" alt="" width="48" height="48"> <img loading="lazy" src="<?php echo $theme_uri; ?>/assets/images/age.svg" alt="" width="40" height="40">
</div>
<div class="infograph__card-body">
<p class="infograph__stat">6,5−11 лет</p>
<p class="infograph__label">возраст</p>
</div> </div>
<p class="infograph__stat">6,5−11 лет</p>
<p class="infograph__label">возраст</p>
</div> </div>
<div class="infograph__card"> <div class="infograph__card">
<div class="infograph__icon infograph__icon--group"> <div class="infograph__card-icon">
<img loading="lazy" src="<?php echo $theme_uri; ?>/assets/images/group.svg" alt="" width="48" height="48"> <img loading="lazy" src="<?php echo $theme_uri; ?>/assets/images/group.svg" alt="" width="40" height="40">
</div>
<div class="infograph__card-body">
<p class="infograph__stat">до 10 детей</p>
<p class="infograph__label">каждая группа</p>
</div> </div>
<p class="infograph__stat">до 10 детей</p>
<p class="infograph__label">каждая группа</p>
</div> </div>
<div class="infograph__card"> <div class="infograph__card">
<div class="infograph__icon infograph__icon--time"> <div class="infograph__card-icon">
<img loading="lazy" src="<?php echo $theme_uri; ?>/assets/images/time.svg" alt="" width="48" height="48"> <img loading="lazy" src="<?php echo $theme_uri; ?>/assets/images/time.svg" alt="" width="40" height="40">
</div>
<div class="infograph__card-body">
<p class="infograph__stat">на выбор</p>
<p class="infograph__label">время посещения</p>
</div> </div>
<p class="infograph__stat">на выбор</p>
<p class="infograph__label">время посещения</p>
</div> </div>
<div class="infograph__card"> <div class="infograph__card">
<div class="infograph__icon infograph__icon--price"> <div class="infograph__card-icon">
<img loading="lazy" src="<?php echo $theme_uri; ?>/assets/images/price.svg" alt="" width="48" height="48"> <img loading="lazy" src="<?php echo $theme_uri; ?>/assets/images/price.svg" alt="" width="40" height="40">
</div>
<div class="infograph__card-body">
<p class="infograph__stat">от <?php echo esc_html( number_format($priceMin, 0, ',', ' ') ); ?> ₽</p>
<p class="infograph__label">стоимость недели</p>
</div> </div>
<p class="infograph__stat">от <?php echo esc_html( number_format($priceMin, 0, ',', ' ') ); ?> ₽</p>
<p class="infograph__label">стоимость недели</p>
</div> </div>
</div> </div>