Лагерь: Секция программы
This commit is contained in:
Dekart Deploy Bot
parent
0af82b233d
commit
97c25af060
@ -805,141 +805,137 @@ p {
|
||||
|
||||
|
||||
/* programs */
|
||||
.programs-wrapper {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
.programs__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.programs__grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.programs__grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.programs__item {
|
||||
width: calc(33.33% - 20px);
|
||||
.programs__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
transition: transform .25s ease, box-shadow .25s ease;
|
||||
}
|
||||
|
||||
.programs__item_img {
|
||||
border-radius: 30px;
|
||||
width: auto;
|
||||
height: 350px;
|
||||
.programs__card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.programs__image {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.programs__item p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.scroll-icon-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.programs__item_title {
|
||||
font-size: 26px;
|
||||
line-height: 1.2;
|
||||
color: #212121;
|
||||
font-weight: 600;
|
||||
.programs__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.programs__item_date {
|
||||
.programs__name {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 1.25;
|
||||
color: #1c2b2d;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.programs__item_text {
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
color: #212121;
|
||||
font-weight: 500;
|
||||
@media (min-width: 641px) {
|
||||
.programs__name { font-size: 20px; }
|
||||
}
|
||||
|
||||
.programs__item_price {
|
||||
font-size: 26px;
|
||||
color: #212121;
|
||||
font-weight: 600;
|
||||
@media (min-width: 1024px) {
|
||||
.programs__name { font-size: 22px; }
|
||||
}
|
||||
|
||||
.btn-details {
|
||||
width: fit-content;
|
||||
color: #ffffff;
|
||||
border: 2px solid #3bb273;
|
||||
background-color: #3bb273;
|
||||
.programs__date {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.programs__desc {
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
color: #555;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.programs__footer {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.programs__price {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #3bb273;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.programs__duration {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.programs__btn {
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
border-radius: 30px;
|
||||
padding: 15px 30px;
|
||||
transition: .3s;
|
||||
color: #3bb273;
|
||||
border: 2px solid #3bb273;
|
||||
background: transparent;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
transition: .2s;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.btn-details:hover {
|
||||
background-color: transparent;
|
||||
color: #212121;
|
||||
.programs__btn:hover,
|
||||
.programs__btn:focus-visible {
|
||||
background: #3bb273;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modal-programs,
|
||||
.modal-mentors {
|
||||
position: fixed;
|
||||
top: -12px;
|
||||
right: -28px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #000000ce;
|
||||
z-index: 100;
|
||||
@media (min-width: 641px) {
|
||||
.programs__btn { width: 100%; }
|
||||
}
|
||||
|
||||
.modal-programs.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-mentors.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-programs-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
border-radius: 30px;
|
||||
background-color: #fff;
|
||||
padding: 40px;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
}
|
||||
|
||||
.modal-programs__content p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.programs__content {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.btn-close-modal {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-close-mentors {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.modal-programs__img {
|
||||
min-width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-programs__img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
@media (min-width: 1024px) {
|
||||
.programs__btn { width: 100%; }
|
||||
}
|
||||
|
||||
/* programs END */
|
||||
@ -2059,11 +2055,13 @@ p {
|
||||
|
||||
.programs__item_img {
|
||||
border-radius: clamp(20px, 2.5vw, 30px);
|
||||
height: clamp(228px, 29.17vw, 350px);
|
||||
aspect-ratio: 3 / 2;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.programs__item_title {
|
||||
font-size: clamp(17px, 2.17vw, 26px);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.programs__item_date {
|
||||
@ -2075,7 +2073,8 @@ p {
|
||||
}
|
||||
|
||||
.programs__item_price {
|
||||
font-size: clamp(17px, 2.17vw, 26px);
|
||||
font-size: clamp(20px, 2.5vw, 28px);
|
||||
color: #3bb273;
|
||||
}
|
||||
|
||||
.btn-details {
|
||||
@ -2526,21 +2525,11 @@ p {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.programs {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.programs .camp_title {
|
||||
padding: 0 15px 25px 15px;
|
||||
}
|
||||
|
||||
.scroll-icon-wrapper {
|
||||
margin-top: -20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.programs-wrapper {
|
||||
width: 100%;
|
||||
@ -2566,17 +2555,15 @@ p {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.programs__item {
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.programs__item_img {
|
||||
height: 250px;
|
||||
aspect-ratio: 3 / 2;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.programs__item_title {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-details {
|
||||
@ -2783,11 +2770,6 @@ p {
|
||||
max-width: 95%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.btn-close-modal,
|
||||
.btn-close-mentors {
|
||||
left: auto;
|
||||
right: -28px;
|
||||
}
|
||||
.modal-programs__img {
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
|
||||
@ -48,10 +48,11 @@ document.addEventListener("click", function (event) {
|
||||
}
|
||||
|
||||
if (target.classList.contains("btn-program")) {
|
||||
modalPrograms.querySelector('.modal-programs__img').innerHTML = target.parentNode.querySelector('.programs__item_img').outerHTML;
|
||||
modalPrograms.querySelector('.programs__item_title').textContent = target.parentNode.querySelector('.programs__item_title').textContent;
|
||||
modalPrograms.querySelector('.programs__item_price').textContent = target.parentNode.querySelector('.programs__item_price').textContent;
|
||||
modalPrograms.querySelector('.programs__content').innerHTML = target.parentNode.querySelector('.programs_content').innerHTML;
|
||||
const card = target.closest('.programs__card');
|
||||
modalPrograms.querySelector('.modal-programs__img').innerHTML = card.querySelector('.programs__image').outerHTML;
|
||||
modalPrograms.querySelector('.programs__item_title').textContent = card.querySelector('.programs__name').textContent;
|
||||
modalPrograms.querySelector('.programs__item_price').textContent = card.querySelector('.programs__price').textContent;
|
||||
modalPrograms.querySelector('.programs__content').innerHTML = card.querySelector('.programs_content').innerHTML;
|
||||
modalPrograms.classList.add('open');
|
||||
return;
|
||||
}
|
||||
@ -76,7 +77,7 @@ document.addEventListener("click", function (event) {
|
||||
'.hero-media-search__container',
|
||||
'.about-us__wrapper',
|
||||
'.infograph h2', '.infograph .camp_text', '.infograph-wrapper',
|
||||
'.programs h2', '.programs-wrapper > div',
|
||||
'.programs h2', '\.programs__grid > article',
|
||||
'.mentors h2', '.mentors-wrapper > div',
|
||||
'.routine h2', '.routine__item',
|
||||
'.foto h2', '.camp-foto-wrapper',
|
||||
@ -102,7 +103,7 @@ document.addEventListener("click", function (event) {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.programs-wrapper > div, .mentors-wrapper > div').forEach((card, i) => {
|
||||
document.querySelectorAll('.programs__grid > article, .mentors-wrapper > div').forEach((card, i) => {
|
||||
card.style.transitionDelay = (i * 0.08) + 's';
|
||||
});
|
||||
})();
|
||||
|
||||
@ -260,11 +260,9 @@ $metrics = [
|
||||
</section>
|
||||
|
||||
<section class="programs" itemscope itemtype="https://schema.org/ItemList">
|
||||
<div class="container">
|
||||
<h2 class="camp_title" itemprop="name">Летние программы</h2>
|
||||
<div class="scroll-icon-wrapper" style="mix-blend-mode: multiply;">
|
||||
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/scroll-hand.svg" alt="" width="42" height="42" loading="lazy">
|
||||
</div>
|
||||
<div class="programs-wrapper">
|
||||
<div class="programs__grid">
|
||||
<?php
|
||||
$programs = carbon_get_post_meta($post_id, 'programs');
|
||||
if (is_array($programs)) {
|
||||
@ -276,18 +274,25 @@ $metrics = [
|
||||
$programs_price = $item['programs_price'];
|
||||
$programs_days = $item['programs_days'];
|
||||
$programs_content = $item['programs_content'];?>
|
||||
<div class="programs__item">
|
||||
<img class="programs__item_img" loading="lazy" width="360" height="350" src="<?php echo wp_get_attachment_url($programs_img); ?>" alt="<?php echo get_post_meta( $programs_img, '_wp_attachment_image_alt', true ); ?>">
|
||||
<p class="programs__item_title"><?php echo esc_html($programs_title); ?></p>
|
||||
<p class="programs__item_date"><?php echo esc_html($programs_date); ?></p>
|
||||
<p class="programs__item_text"><?php echo esc_html($programs_text); ?></p>
|
||||
<p class="programs__item_price">от <?php echo number_format((int)$programs_price, 0, ',', ' '); ?> ₽ / <?php echo esc_html($programs_days); ?></p>
|
||||
<div class="programs_content" style="display: none;"><?php echo wp_kses_post($programs_content); ?></div>
|
||||
<button class="btn-details btn-program">Подробнее</button>
|
||||
<article class="programs__card">
|
||||
<img class="programs__image" loading="lazy" width="360" height="225" src="<?php echo wp_get_attachment_url($programs_img); ?>" alt="<?php echo get_post_meta($programs_img, '_wp_attachment_image_alt', true); ?>">
|
||||
<div class="programs__body">
|
||||
<h3 class="programs__name"><?php echo esc_html($programs_title); ?></h3>
|
||||
<p class="programs__date"><?php echo esc_html($programs_date); ?></p>
|
||||
<p class="programs__desc"><?php echo esc_html($programs_text); ?></p>
|
||||
<div class="programs__footer">
|
||||
<span class="programs__price"><?php echo number_format((int)$programs_price, 0, ',', ' '); ?> ₽</span>
|
||||
<span class="programs__duration"><?php echo esc_html($programs_days); ?></span>
|
||||
</div>
|
||||
<?php }
|
||||
<div class="programs_content" style="display: none;"><?php echo wp_kses_post($programs_content); ?></div>
|
||||
<button class="programs__btn btn-program" aria-label="Подробнее о программе <?php echo esc_attr($programs_title); ?>">Подробнее</button>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
}
|
||||
} ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php getBanner('', $post_id); ?>
|
||||
@ -645,9 +650,9 @@ $metrics = [
|
||||
|
||||
</main>
|
||||
|
||||
<div class="modal-programs">
|
||||
<div class="modal-programs" role="dialog" aria-modal="true" aria-label="Программа лагеря">
|
||||
<div class="modal-programs-wrapper">
|
||||
<button class="btn-close-modal btn-close-programs"><svg role="presentation"
|
||||
<button class="btn-close-modal btn-close-programs" aria-label="Закрыть"><svg role="presentation"
|
||||
class="t-popup__close-icon t-popup__close-icon_cross" width="23px" height="23px" viewBox="0 0 23 23"
|
||||
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="#ffffff" fill-rule="evenodd">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user