Css ekrana sığdırma
<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
}
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (0)
Henüz kimse cevap yazmadı. İlk cevap yazan sen ol!