v2.5.2
Giriş yap

Css ekrana sığdırma

emmir2
322 defa görüntülendi ve 1 kişi tarafından değerlendirildi 

<div class="slidesWrap" style="width:100%;">
			<div class="owl-carousel owlHomeSlide js-owlHomeSlide">
				<?php 
				$slidersor=$db->prepare("SELECT * FROM slider ORDER BY sira ASC");
				$slidersor->execute();
				while($slidercek=$slidersor->fetch(PDO::FETCH_ASSOC)) {
				?>
            	<div class="slideWrap">
            	    	<?php if($slidercek['animasyon'] != ''){ ?>
					<div class="slImg" style="background-repeat: no-repeat;width:100%;background-image: url('upload/<?php echo $slidercek['img'] ?>');" >
						<img style="margin-top: 0px;width:100%;" src="upload/<?php echo $slidercek['animasyon'] ?>">
					</div>
					<?php }else{?>

					<div class="slConstImg">
              		 <video autoplay loop muted poster="upload/<?php echo $slidercek['img'] ?>" id="background"  style="width:100%;">
					<source src="upload/<?php echo $slidercek['video'] ?>" type="video/mp4">
					</video>
					</div>
					<?php } ?>
					<?php 
					$dugme=$db->prepare("SELECT * FROM dugme WHERE slider_id=:slider_id");
					$dugme->execute(array(
				    'slider_id' => $slidercek['id']
						)); 

							?>
					<div class="slDots">
						<?php while($dugmecek=$dugme->fetch(PDO::FETCH_ASSOC)) { ?>
                    			<div class="tooltipDot" style="top: <?php echo $dugmecek['dugme_top']; ?>%; left: <?php echo $dugmecek['dugme_left']; ?>%;">
							<div class="tooltipPopover"><?php echo $dugmecek['dugme_ad']; ?></div>
											</div>
										<?php } ?>
					</div>
					<div class="sText sTextTop"> <!--sTextTop onemli-->
						<span class="t1"><?php echo $slidercek['slideryazi'] ?></span>
						<span class="t2"><?php echo $slidercek['slideryazi1'] ?></span>
						<span class="t2"><?php echo $slidercek['slideryazi2'] ?></span>
					</div>
					<?php if($slidercek['tanitim'] != ''){ ?>
					<div class="container">
						<div class="sVideoBtn">
							<a class="videoLink video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/<?php echo $slidercek['tanitim']; ?>" data-target="#myModal">
				 			<i class="fa fa-play-circle"></i>
							  <span>TANITIMI İZLE</span>
							</a>
						</div>
				   </div>
				   	<?php }else{} ?>
<style>
.modal-dialog {
      max-width: 800px;
      margin: 30px auto;
  }



.modal-body {
  position:relative;
  padding:0px;
}
.close {
  position:absolute;
  right:-30px;
  top:0;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
}
@media (max-width:768px){
.slImg img{
	background-repeat: no-repeat;
    margin-top: -2px;
	background-size: cover;
}
}
</style>
</div>
					  <?php } ?>
			</div>

		</div>

.slidesWrap{
    position:relative
}
.slidesWrap:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100%;
    background:url(../img/upload/slide/clouds.png) -150px bottom no-repeat;
    background-size:100%
}
@media only screen and (max-width:991px){
    .slidesWrap{
        top:0;
        margin-top:103px
    }
    .slidesWrap:before{
        background-position:center 35px;
        background-size:contain;
        transform:scale(2)
    }
}
.slidesWrap a.scrollDown{
    position:absolute;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    bottom:0;
    z-index:4;
    text-align:center
}
.slidesWrap a.scrollDown span{
    display:block;
    margin-bottom:10px;
    color:#8094c2;
    font-size:12px;
    letter-spacing:.36px
}
@media only screen and (max-width:991px){
    .slidesWrap a.scrollDown{
        bottom:-150px
    }
}
.slidesWrap .owlHomeSlide .owl-nav{
    display:none
}
.slidesWrap .owlHomeSlide .owl-dots{
    position:absolute;
    bottom:50px;
    left:10%;
    -webkit-transform:translateX(0);
    -ms-transform:translateX(0);
    transform:translateX(0)
}
.slidesWrap .owlHomeSlide .owl-dots button.owl-dot{
    background:0 0;
    border:none;
    padding:5px!important;
    margin:0 5px;
    width:20px;
    height:20px;
    background:#66769a;
    display:inline-block;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%
}
.slidesWrap .owlHomeSlide .owl-dots button.owl-dot span{
    width:100%;
    height:100%;
    background:#66769a;
    display:block;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    -webkit-transition:all .2s;
    transition:all .2s
}
.slidesWrap .owlHomeSlide .owl-dots button.owl-dot.active,.slidesWrap .owlHomeSlide .owl-dots button.owl-dot:hover{
    background-color:#1e73be
}
.slidesWrap .owlHomeSlide .owl-dots button.owl-dot.active span,.slidesWrap .owlHomeSlide .owl-dots button.owl-dot:hover span{
    background:#fff
}
@media only screen and (max-width:991px){
    .slidesWrap .owlHomeSlide .owl-dots{
        bottom:-14px;
        left:50%;
        -webkit-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
        transform:translateX(-50%)
    }
}
@media only screen and (max-width:768px){
    .slidesWrap .owlHomeSlide .owl-item{
        overflow:hidden
    }
}
.slidesWrap .slideWrap{
    position:relative
}
@media only screen and (max-width:768px){
    .slidesWrap .slideWrap .slImg img{
        width:150%;
        margin-left:-200px
    }
}
@media only screen and (max-width:574px){
    .slidesWrap .slideWrap .slImg img{
        width:160%;
        margin-left:-160px
    }
}
.slidesWrap .slideWrap .slDots{
    position:absolute;
    right:0;
    top:0;
    width:100%;
    height:100%
}
.slidesWrap .slideWrap .slDots .tooltipDot{
    width:20px;
    height:20px;
    box-shadow:0 10px 17px rgba(0,0,0,.28);
    background-color:#1e73be;
    border:4px solid #fff;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    position:absolute;
    cursor:pointer
}
.slidesWrap .slideWrap .slDots .tooltipDot:after{
    animation:1.5s linear 0s normal none infinite running tooltipDotAnimate;
    content:"";
    position:absolute;
    top:-19px;
    left:-19px;
    z-index:1;
    width:50px;
    height:50px;
    background-color:transparent;
    border-radius:70px;
    border:3px solid rgba(255,255,255,.8)
}
@keyframes tooltipDotAnimate{
    0%{
        opacity:0;
        transform:scale(0)
    }
    25%{
        opacity:.1;
        transform:scale(.3)
    }
    50%{
        opacity:.3;
        transform:scale(.6)
    }
    75%{
        opacity:.5;
        transform:scale(.9)
    }
    100%{
        opacity:0;
        transform:scale(1.2)
    }
}
@keyframes tooltipDotAnimate{
    0%{
        opacity:0;
        transform:scale(0)
    }
    25%{
        opacity:.1;
        transform:scale(.3)
    }
    50%{
        opacity:.3;
        transform:scale(.6)
    }
    75%{
        opacity:.5;
        transform:scale(.9)
    }
    100%{
        opacity:0;
        transform:scale(1.2)
    }
}
.slidesWrap .slideWrap .slDots .tooltipDot .tooltipPopover{
    width:135px;
    box-shadow:0 15px 45px rgba(0,0,0,.13);
    background-color:#fff;
    opacity:0;
    visibility:hidden;
    position:absolute;
    top:35px;
    left:50%;
    padding:10px 15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
    -webkit-transform:translate(-50%,-35px);
    -ms-transform:translate(-50%,-35px);
    transform:translate(-50%,-35px);
    color:#273452;
    font-size:12px;
    line-height:16px;
    font-weight:700;
    letter-spacing:-.35px;
    text-align:center
}
.slidesWrap .slideWrap .slDots .tooltipDot .tooltipPopover:before{
    content:"";
    position:absolute;
    left:50%;
    top:-10px;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    width:0;
    height:0;
    border-style:solid;
    border-width:0 10px 10px 10px;
    border-color:transparent transparent #fff transparent
}
.slidesWrap .slideWrap .slDots .tooltipDot:hover .tooltipPopover{
    z-index:10;
    opacity:1;
    visibility:visible;
    -webkit-transform:translate(-50%,0);
    -ms-transform:translate(-50%,0);
    transform:translate(-50%,0);
    -webkit-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out
}
@media only screen and (max-width:991px){
    .slidesWrap .slideWrap .slDots{
        display:none
    }
}
.slidesWrap .slideWrap .slConstImg:before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    z-index:2;
    background-size:100% 100%;
    width:100%;
    height:269px
}
.slidesWrap .slideWrap .sText{
    position:absolute;
    left:10%;
    top:45%;
    padding-left:25px
}
.slidesWrap .slideWrap .sText span{
    display:block
}
.slidesWrap .slideWrap .sText span.sNumber{
    opacity:.1;
    color:rgba(195,214,224,.51);
    font-size:202px;
    font-weight:700;
    letter-spacing:-5.96px;
    line-height:123px;
    position:absolute;
    left:-115px;
    top:-50px
}
.slidesWrap .slideWrap .sText span.t1{
    color:#000;
    font-size:32px;
    font-weight:300;
    letter-spacing:.96px;
    line-height:43px
}
.slidesWrap .slideWrap .sText span.t2{
    color:#000;
    font-size:98px;
    line-height:98px;
    font-weight:650;
    letter-spacing:-6px
}
.slidesWrap .slideWrap .sText.sTextTop{
    top:20%;
    z-index:2;
    margin-top:-15px
}
.slidesWrap .slideWrap .sText.sTextTop span.sNumber{
    top:25px
}
.slidesWrap .slideWrap .sText.sTextTop span.t2{
    font-size:82px;
    font-weight:700;
    letter-spacing:-4.03px;
    line-height:73px
}
@media only screen and (max-width:1440px){
    .slidesWrap .slideWrap .sText span.sNumber{
        top:15px
    }
    .slidesWrap .slideWrap .sText span.t1{
        font-size:28px;
        line-height:28px
    }
    .slidesWrap .slideWrap .sText span.t2{
        font-size:48px;
        line-height:68px
    }
    .slidesWrap .slideWrap .sText.sTextTop span.sNumber{
        top:15px
    }
    .slidesWrap .slideWrap .sText.sTextTop span.t2{
        font-size:48px;
        line-height:73px
    }
}
@media only screen and (max-width:1200px){
    .slidesWrap .slideWrap .sText span.sNumber{
        font-size:150px;
        left:-75px
    }
    .slidesWrap .slideWrap .sText span.t1{
        font-size:20px;
        line-height:20px
    }
    .slidesWrap .slideWrap .sText span.t2{
        font-size:70px;
        line-height:70px
    }
    .slidesWrap .slideWrap .sText.sTextTop span.t2{
        font-size:70px;
        line-height:70px
    }
}
@media only screen and (max-width:991px){
    .slidesWrap .slideWrap .sText{
        position:relative;
        left:auto;
        top:auto;
        padding-left:50px
    }
    .slidesWrap .slideWrap .sText span.sNumber{
        font-size:125px;
        left:-20px
    }
    .slidesWrap .slideWrap .sText.sTextTop{
        background-color:var(--renk)
    }
}
@media only screen and (max-width:768px){
    .slidesWrap .slideWrap .sText.sTextTop{
        top:auto;
        padding-top:50px
    }
}
@media only screen and (max-width:400px){
    .slidesWrap .slideWrap .sText span.sNumber{
        font-size:125px;
        left:-10px
    }
    .slidesWrap .slideWrap .sText span.t1{
        font-size:18px
    }
    .slidesWrap .slideWrap .sText span.t2{
        font-size:48px;
        line-height:52px
    }
    .slidesWrap .slideWrap .sText.sTextTop span.t2{
        font-size:48px;
        line-height:52px
    }
}
.slidesWrap .slideWrap .sVideoBtn{
    position:absolute;
    left:11%;
    top:62%;
    z-index:3
}
.slidesWrap .slideWrap .sVideoBtn:before{
    content:"";
    width:180px;
    height:180px;
    border:1px solid #fff;
    opacity:.2;
    position:absolute;
    left:-50px;
    top:-50px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%
}
.slidesWrap .slideWrap .sVideoBtn a.videoLink{
    display:block;
    width:80px;
    height:80px;
    background-color:#fff;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:50px;
    position:relative
}
.slidesWrap .slideWrap .sVideoBtn a.videoLink:before{
    content:"";
    width:114px;
    height:114px;
    border:1px solid #fff;
    opacity:.6;
    position:absolute;
    left:-17px;
    top:-17px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%
}
.slidesWrap .slideWrap .sVideoBtn a.videoLink:after{
    content:"";
    width:146px;
    height:146px;
    border:1px solid #fff;
    opacity:.4;
    position:absolute;
    left:-33px;
    top:-33px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%
}
.slidesWrap .slideWrap .sVideoBtn a.videoLink i{
    color:#3c93e0;
    font-size:51px;
    -webkit-transition:all .2s;
    transition:all .2s
}
.slidesWrap .slideWrap .sVideoBtn a.videoLink span{
    -webkit-transition:all .2s;
    transition:all .2s;
    width:100px;
    height:24px;
    position:absolute;
    left:-50px;
    top:-15px;
    background-color:#8dc4f4;
    color:#1d2846;
    font-size:11px;
    font-weight:700;
    letter-spacing:.41px;
    text-transform:uppercase;
    display:flex;
    justify-content:center;
    align-items:center
}
.slidesWrap .slideWrap .sVideoBtn a.videoLink span:before{
    content:"";
    position:absolute;
    bottom:-10px;
    right:15px;
    border-style:solid;
    border-width:0 20px 10px 0;
    border-color:transparent #8dc4f4 transparent transparent
}
.slidesWrap .slideWrap .sVideoBtn a.videoLink:hover i{
    -webkit-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1)
}
@media only screen and (max-width:991px){
    .slidesWrap .slideWrap .sVideoBtn{
        top:50%
    }
}
@media only screen and (max-width:768px){
    .slidesWrap .slideWrap .sVideoBtn{
        top:35%
    }
}
@media only screen and (max-width:574px){
    .slidesWrap .slideWrap .sVideoBtn{
        top:35%;
        left:20%
    }
    .slidesWrap .slideWrap .sVideoBtn:before{
        width:100px;
        height:100px;
        left:-30px;
        top:-30px
    }
    .slidesWrap .slideWrap .sVideoBtn a.videoLink{
        width:40px;
        height:40px
    }
    .slidesWrap .slideWrap .sVideoBtn a.videoLink:before{
        width:60px;
        height:60px;
        left:-10px;
        top:-10px
    }
    .slidesWrap .slideWrap .sVideoBtn a.videoLink:after{
        width:80px;
        height:80px;
        left:-20px;
        top:-20px
    }
    .slidesWrap .slideWrap .sVideoBtn a.videoLink i{
        font-size:22px
    }
    .slidesWrap .slideWrap .sVideoBtn a.videoLink span{
        left:-65px;
        top:-25px
    }
}
.slidesWrap .slideWrap .sAltitude{
    position:absolute;
    right:10%;
    top:40%
}
.slidesWrap .slideWrap .sAltitude:before{
    content:"";
    position:absolute;
    right:-60px;
    top:30px;
    background:url(../img/upload/slide/altitude.png) center center no-repeat;
    background-size:100% 100%;
    width:52px;
    height:508px
}
.slidesWrap .slideWrap .sAltitude span{
    display:block
}
.slidesWrap .slideWrap .sAltitude span.altitude{
    color:#fff;
    font-size:12px;
    font-weight:300;
    letter-spacing:.36px
}
.slidesWrap .slideWrap .sAltitude span.altitudeRecord{
    color:#fff;
    font-size:14px;
    font-weight:500;
    letter-spacing:.42px
}
@media only screen and (max-width:991px){
    .slidesWrap .slideWrap .sAltitude{
        display:none
    }
}
.slidesWrap .owl-item.active .slImg img{
    animation:1s 1.5s zoomInRight both
}
.slidesWrap .owl-item.active .slDots .tooltipDot:nth-child(1){
    animation:.4s 2.5s bounceInDown both
}
.slidesWrap .owl-item.active .slDots .tooltipDot:nth-child(2){
    animation:.5s 2.5s bounceInDown both
}
.slidesWrap .owl-item.active .slDots .tooltipDot:nth-child(3){
    animation:.6s 2.5s bounceInDown both
}
.slidesWrap .owl-item.active .slDots .tooltipDot:nth-child(4){
    animation:.7s 2.5s bounceInDown both
}
.slidesWrap .owl-item.active .slDots .tooltipDot:nth-child(5){
    animation:.8s 2.5s bounceInDown both
}
.slidesWrap .owl-item.active .sText span.sNumber{
    animation:.5s .3s zoomInLeft both
}
.slidesWrap .owl-item.active .sText span.t1{
    animation:.5s .5s zoomInLeft both
}
.slidesWrap .owl-item.active .sText span.t2{
    animation:.5s .7s zoomInLeft both
}
.slidesWrap .owl-item.active .sVideoBtn{
    animation:.5s .7s zoomIn both
}
.slidesWrap .owl-item.active .sAltitude:before{
    animation:.5s .3s slideInUp both
}
.slidesWrap .owl-item.active .sAltitude span.altitude{
    animation:.5s .5s zoomInRight both
}
.slidesWrap .owl-item.active .sAltitude span.altitudeRecord{
    animation:.5s .7s zoomInRight both
}
css html php
Cevap yaz
Cevaplar (0)
Henüz kimse cevap yazmadı. İlk cevap yazan sen ol!