<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"> <h4>HARUN PEHLİVAN <br> IT (CODER,DESIGNER,DEVELOPER,ADMİNİSTRATOR) FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT</h4> <p>22/07/1984 Çorum'da dünyaya bebek bakışlarmla sesimle merhaba dedim bir elimden Annem bir elimden Babam tuttu şefkatleriyle beni bu hale getirdiler Allah cc onlardan ebediyen razı olsun aslen Samsun'un Havza ilçesi halen Amasya'nın Suluova ilçesinde ikamet etmekteyim. ilk orta ve lise eğitim ve öğretim hayatıma başlayıp devam ettirip ikame ettiğim yerde tamamladım</p> <a href="https://harunpehlivantebimtebitagem.carrd.co/">E-CV</a> </div> <div class="col-md-5 col-12 order-md-2 order-1"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1569070436/medium_gravatartebm.qr_yi1sjg.png" class="mx-auto" alt="slide"></div> </div> </div> </div> </div> <div class="carousel-item"> <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"> <h4>HP IT GROUP <br> 7/24</h4> <p>HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</p> <a href="https://harunpehlivantebimtebitagem.site123.me/">2018</a> </div> <div class="col-md-5 col-12 order-md-2 order-1"><img src="http://onepagerapp.com/uploads/gallery_image/81379/medium_logohpitgroup.png" class="mx-auto" alt="slide"></div> </div> </div> </div> </div> <div class="carousel-item"> <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"> <h4>E-HARUN PEHLİVAN <br> STARTUP</h4> <p>Internet platforms recognized both in Turkey and in the world</p> <a href="http://harunpehlivantebimtebitagem.mystrikingly.com/">STARTUP</a> </div> <div class="col-md-5 col-12 order-md-2 order-1"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1564404790/aros1_o7ryxc.png" class="mx-auto" alt="slide"></div> </div> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!--slide end-->

#myCarousel .carousel-item .mask { position: absolute; top: 0; left:0; height:100%; width: 100%; background-attachment: fixed; } #myCarousel h4{ font-size:50px; margin-bottom:15px; color:#FFF; line-height:100%; letter-spacing:0.5px; font-weight:600; } #myCarousel p{ font-size:18px; margin-bottom:15px; color:#d5d5d5; } #myCarousel .carousel-item a{background:#F47735; font-size:14px; color:#FFF; padding:13px 32px; display:inline-block; } #myCarousel .carousel-item a:hover{background:#394fa2; 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:url(https://i.imgur.com/6axE29k.jpg) center center no-repeat; 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; 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; }

$('#myCarousel').carousel({ interval: 3000, })