<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" rel="stylesheet">
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="mask flex-center">
<div class="container">
<div class="row align-items-center">
<div class="col-md-7 col-12 order-md-1 order-2"><img src="https://i.imgur.com/xtBofyx.jpg" class="mx-auto" alt="slide"></div>
<div class="col-md-5 col-12 order-md-2 order-1">
<h4>Получить консультации по электронному досье</h4></br>
<p>Мы предлгаем Вам уникальную возможность получения консультации ведущих специалистов Франции. </br></br> Отправьте электронные документы с результатами обследований и заключений - наши высоквацифицированные врачи проведут полный медицинский анализ, на основании которого предоставят второе медицинское мнение и реккомендации.</p></br>
<h4>от 500 евро</h4>
<a href="#">Отправить заявку</a> </div>
</div>
</div>
</div>
</div>
</div>
#myCarousel .carousel-item .mask {
position: left;
top: 0;
left:0;
height:100%;
width: 100%;
background-attachment: fixed;
}
#myCarousel h4{
font-size:30px;
margin-bottom:15px;
color:#FFF;
line-height:100%;
letter-spacing:0.5px;
font-weight:600;
text-align: right;
}
#myCarousel p{
font-size:15px;
margin-bottom:15px;
color:#FFF;
text-align: right;
}
#myCarousel .carousel-item a{background:#FFFFFF; font-size:15px; color:#75CBF0; padding:13px 32px; display:inline-block; }
#myCarousel .carousel-item a:hover{background:#FFFFFF; text-decoration:none; }
#myCarousel .carousel-item h4{-webkit-animation-name:fadeInLeft; animation-name:fadeInLeft;}
#myCarousel .carousel-item p{-webkit-animation-name:slideInRight; animation-name:slideInRight;}
#myCarousel .carousel-item a{-webkit-animation-name:fadeInUp; animation-name:fadeInUp;}
#myCarousel .carousel-item .mask img{-webkit-animation-name:slideInRight; animation-name:slideInRight; display:block; height:auto; max-width:100%;}
#myCarousel h4, #myCarousel p, #myCarousel a, #myCarousel .carousel-item .mask img{-webkit-animation-duration: 1s;
animation-duration: 1.2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#myCarousel .container {max-width: 1430px; }
#myCarousel .carousel-item{height:100%; min-height:550px; }
#myCarousel{position:relative; z-index:1; background:#75CBF0; background-size:cover; }
.carousel-control-next, .carousel-control-prev{height:40px; width:40px; padding:12px; top:50%; bottom:auto; transform:translateY(-50%); background-color: #f47735; }
.carousel-item {
position: relative;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: right;
width: 100%;
transition: -webkit-transform .6s ease;
transition: transform .6s ease;
transition: transform .6s ease,-webkit-transform .6s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.carousel-fade .carousel-item {
opacity: 0;
-webkit-transition-duration: .6s;
transition-duration: .6s;
-webkit-transition-property: opacity;
transition-property: opacity
}
.carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active {
opacity: 1
}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-right.active {
opacity: 0
}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
@supports (transform-style:preserve-3d) {
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
