Лагерь: Секция AboutUs
This commit is contained in:
parent
fb52e9a556
commit
98f8ed161e
@ -196,6 +196,266 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* banner END */
|
/* banner END */
|
||||||
|
|
||||||
|
|
||||||
|
/* =========================== */
|
||||||
|
|
||||||
|
/* about-us */
|
||||||
|
|
||||||
|
/* =========================== */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us {
|
||||||
|
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__wrapper {
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
gap: 60px;
|
||||||
|
|
||||||
|
padding: 60px 75px;
|
||||||
|
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__image-col {
|
||||||
|
|
||||||
|
flex: 0 0 45%;
|
||||||
|
|
||||||
|
max-width: 45%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__image {
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
border-radius: 24px;
|
||||||
|
|
||||||
|
object-fit: cover;
|
||||||
|
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
|
||||||
|
box-shadow: 0 8px 32px rgba(0,0,0,0.10);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__image-placeholder {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
|
||||||
|
border-radius: 24px;
|
||||||
|
|
||||||
|
background: #f0f0f0;
|
||||||
|
|
||||||
|
color: #999;
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
font-family: Inter, sans-serif;
|
||||||
|
|
||||||
|
border: 2px dashed #ccc;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__image-placeholder svg {
|
||||||
|
|
||||||
|
width: 48px;
|
||||||
|
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
color: #bbb;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__content-col {
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__title {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__text {
|
||||||
|
|
||||||
|
font-family: Inter, sans-serif;
|
||||||
|
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
line-height: 1.7;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__doodle {
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
object-fit: contain;
|
||||||
|
|
||||||
|
opacity: 0.15;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__doodle--plane {
|
||||||
|
|
||||||
|
width: 78px;
|
||||||
|
|
||||||
|
height: 78px;
|
||||||
|
|
||||||
|
top: -5px;
|
||||||
|
|
||||||
|
right: -5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-us__doodle--bulb {
|
||||||
|
|
||||||
|
width: 72px;
|
||||||
|
|
||||||
|
height: 72px;
|
||||||
|
|
||||||
|
bottom: -8px;
|
||||||
|
|
||||||
|
left: -8px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 780px) {
|
||||||
|
|
||||||
|
.about-us__wrapper {
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
padding: 40px 20px;
|
||||||
|
|
||||||
|
gap: 30px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-us__image-col {
|
||||||
|
|
||||||
|
flex: 0 0 100%;
|
||||||
|
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-us__title {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
font-size: 28px;
|
||||||
|
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-us__text {
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
line-height: 1.6;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-us__doodle--plane {
|
||||||
|
|
||||||
|
width: 48px;
|
||||||
|
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
top: 10px;
|
||||||
|
|
||||||
|
right: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-us__doodle--bulb {
|
||||||
|
|
||||||
|
width: 44px;
|
||||||
|
|
||||||
|
height: 44px;
|
||||||
|
|
||||||
|
bottom: 10px;
|
||||||
|
|
||||||
|
left: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/* suggestions */
|
/* suggestions */
|
||||||
.suggestions {}
|
.suggestions {}
|
||||||
|
|
||||||
|
|||||||
@ -589,6 +589,11 @@ function add_carbon() {
|
|||||||
->set_width( 40 ),
|
->set_width( 40 ),
|
||||||
))
|
))
|
||||||
->add_tab('ℹ️ О нас', array(
|
->add_tab('ℹ️ О нас', array(
|
||||||
|
Field::make( 'separator', 'about_us_sep', 'Текст и фото' ),
|
||||||
|
Field::make( 'image', 'about_us_img', 'Фото (заглушка: 600×400 px)' )
|
||||||
|
->set_help_text( 'Рекомендуемый размер: 600×400 px. Реальные дети, эмоции, крупные планы. Пока можно залить любую заглушку.' )
|
||||||
|
->set_width( 30 ),
|
||||||
|
|
||||||
Field::make( 'textarea', 'about_us_text', 'Текст о нас' )
|
Field::make( 'textarea', 'about_us_text', 'Текст о нас' )
|
||||||
->set_help_text( 'Краткий текст о лагере. Выводится на странице лагеря после Hero-секции.' )
|
->set_help_text( 'Краткий текст о лагере. Выводится на странице лагеря после Hero-секции.' )
|
||||||
->set_default_value( 'Dekart — это сеть детских клубов, где наука, творчество и спорт объединяются в одну захватывающую программу. Мы помогаем детям раскрывать таланты, находить друзей и проводить лето с пользой. Наши вожатые — профессиональные педагоги и наставники, которые создают атмосферу доверия и вдохновения. Каждый день в лагере — это новое открытие.' ),
|
->set_default_value( 'Dekart — это сеть детских клубов, где наука, творчество и спорт объединяются в одну захватывающую программу. Мы помогаем детям раскрывать таланты, находить друзей и проводить лето с пользой. Наши вожатые — профессиональные педагоги и наставники, которые создают атмосферу доверия и вдохновения. Каждый день в лагере — это новое открытие.' ),
|
||||||
|
|||||||
@ -125,18 +125,40 @@ $metrics = [
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="about-us" style="background: #ffffff;">
|
<section class="about-us">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="about-us__wrapper" style="position: relative; padding: 35px 75px 45px 75px; overflow: visible;">
|
<div class="about-us__wrapper">
|
||||||
<h2 class="camp_title" style="text-align:center;">О нас</h2>
|
<div class="about-us__image-col">
|
||||||
<p class="about-us__text"><?php echo wp_kses_post( carbon_get_post_meta( $post_id, 'about_us_text' ) ?: 'Dekart — это сеть детских клубов, где наука, творчество и спорт объединяются в одну захватывающую программу. Мы помогаем детям раскрывать таланты, находить друзей и проводить лето с пользой. Наши вожатые — профессиональные педагоги и наставники, которые создают атмосферу доверия и вдохновения. Каждый день в лагере — это новое открытие.'); ?></p>
|
<?php
|
||||||
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/doodles/doodle-paper-plane.svg"
|
$about_img_id = carbon_get_post_meta( $post_id, 'about_us_img' );
|
||||||
alt=""
|
if ( $about_img_id ) :
|
||||||
style="position: absolute; top: -5px; right: -5px; width: 78px; height: 78px; opacity: 0.9; z-index: 10; pointer-events: none;">
|
echo wp_get_attachment_image( $about_img_id, 'medium_large', false, [
|
||||||
|
'class' => 'about-us__image',
|
||||||
|
'loading' => 'lazy',
|
||||||
|
'alt' => 'Фото детского лагеря Декарт'
|
||||||
|
] );
|
||||||
|
else :
|
||||||
|
echo '<div class="about-us__image-placeholder">
|
||||||
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||||
|
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||||||
|
<path d="M21 15l-5-5L5 21"/>
|
||||||
|
</svg>
|
||||||
|
<span>Добавьте фото</span>
|
||||||
|
</div>';
|
||||||
|
endif;
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<div class="about-us__content-col">
|
||||||
|
<h2 class="camp_title about-us__title">О нас</h2>
|
||||||
|
<div class="about-us__text">
|
||||||
|
<?php echo wp_kses_post( carbon_get_post_meta( $post_id, 'about_us_text' ) ?: 'Dekart — это сеть детских клубов, где наука, творчество и спорт объединяются в одну захватывающую программу. Мы помогаем детям раскрывать таланты, находить друзей и проводить лето с пользой. Наши вожатые — профессиональные педагоги и наставники, которые создают атмосферу доверия и вдохновения. Каждый день в лагере — это новое открытие.' ); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/doodles/doodle-paper-plane.svg"
|
||||||
|
alt="" class="about-us__doodle about-us__doodle--plane">
|
||||||
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/doodles/doodle-lightbulb.svg"
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/doodles/doodle-lightbulb.svg"
|
||||||
alt=""
|
alt="" class="about-us__doodle about-us__doodle--bulb">
|
||||||
style="position: absolute; bottom: -8px; left: -8px; width: 72px; height: 72px; opacity: 0.9; z-index: 10; pointer-events: none;">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user