<!-- one slider -->
<div class="header_slider">
<div>
<div class="header_slider__block">
<img src="slick/img/1.jpg" alt="#" class="slider__img">
<div class="header-slider__content">
<div class="container">
<h2 class="slider__title">Header 1</h2>
<p class="slider__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima consectetur
aspernatur dolore beatae, repellat vero repellendus obcaecati perferendis, aliquid saepe.</p>
</div>
<!-- /.container -->
</div>
<!-- /.my-slider__content -->
</div>
</div>
<div>
<div class="header_slider__block">
<img src="slick/img/2.jpg" alt="#" class="slider__img">
<div class="header-slider__content">
<div class="container">
<h2 class="slider__title">Header 2</h2>
<p class="slider__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, odit temporibus
non
libero eligendi reprehenderit deleniti tempore? Dolorum, fugit, labore.</p>
</div>
<!-- /.container -->
</div>
<!-- /.my-slider__content -->
</div>
</div>
<div>
<div class="header_slider__block">
<img src="slick/img/3.jpg" alt="#" class="slider__img">
<div class="header-slider__content">
<div class="container">
<h2 class="slider__title">Header 3</h2>
<p class="slider__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quia, possimus
aperiam eos voluptas in cumque rerum nobis dolorem quod.</p>
</div>
<!-- /.container -->
</div>
<!-- /.my-slider__content -->
</div>
</div>
</div>
<!-- /.header_slider -->.header_slider {
max-width: 100%;
height: auto;
margin: 0;
}
.header_slider__block {
margin: 0px;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
position: relative;
}
.slider__img {
width: 100%;
filter: blur(0) brightness(40%);
/* opacity: 0;
animation: hideImage .5s; */
/* animation: hideImage .5s, scaleBackImage .5s forwards; */
}
.slider__title,
.slider__text {
font: 4em Arial, sans-serif;
color: rgb(250, 245, 245);
margin: 15px 0;
}
.header-slider__content {
position: absolute;
height: auto;
display: flex;
/* align-items: center; */
flex-flow: column nowrap;
/* justify-content: center; */
}
.slider__text {
margin: 0 auto;
font: 2em Arial, sans-serif;
text-align: center;
animation: hideImage .7s, scaleBackImage .5s forwards;
}
.slider__title {
margin-bottom: 20px;
animation: hideImage .5s, scaleBackImage .4s forwards;
}
.slick-active .slider__title {
animation: bounceInRight 1.5s both 1.5s;
}
.slick-active .slider__text {
animation: bounceInUp 1.5s both .5s;
}
@media (max-width:767px) {
.header_slider {
margin-top: 50px;
}
.slider__title {
font: 1.5em Arial, sans-serif;
}
.slider__text {
font: 1.1em Arial, sans-serif;
}
}
/* .slick-active .slider__img {
animation: showImage .8s .5s forwards, scaleImage .5s .5s forwards;
} */
@keyframes showImage {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hideImage {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes scaleImage {
0% {
transform: scale(0);
transform-origin: center;
}
100% {
transform: scale(1);
transform-origin: center;
}
}
@keyframes scaleBackImage {
0% {
transform: scale(1);
transform-origin: center;
}
100% {
transform: scale(0);
transform-origin: center;
}
}$consent=empty( $commenter['comment_author_email'] ) ? '' : ' checked="checked"';add_filter('comment_form_fields', 'klassbox_extend_comment_fields');
function klassbox_extend_comment_fields($fields) {
$fields['cookies'] = '<p class="policy"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" checked="checked" value="yes"' . $consent . ' />' .
'<label for="wp-comment-cookies-consent">' . __( ' Я согласен с <a href="https://olgateacher.ru/wp-content/themes/klassbox/assets/policy/privacy-policy.pdf" target="_blank">политикой конфиденциальности</a>' ) . '</label></p>';
return $fields;
}