Merhabalar, masaüstünde sorun çıkmazken mobilde içerik içeriğin üzerine kayıyor. video slider ekledim. mobilde altında bulunan hakkımızda kısmı videonun üzerine kayıyor. kodlar aşağıda.
<section class="container-fluid2" id="anasayfa-slider2">
<div class="row2" data-id="1">
<div class="slogan3">Daha İyi Güvenlik Daha İyi Bir Dünya</div>
<div class="video1"><video class="" width="100%" muted="1" loop="" playsinline="" autoplay="1"><source src="video.mp4" type="video/mp4"></video></div></div>
</section>@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap);
#arayalim b{
text-align:center
}
::-webkit-scrollbar-track{
box-shadow:inset 0 0 5px grey;
border-radius:10px
}
::-webkit-scrollbar-thumb{
background:red;
border-radius:10px
}
::-webkit-scrollbar-thumb:hover{
background:#b30000
}
@-moz-keyframes spin{
100%{
-moz-transform:rotate(360deg)
}
}
@-webkit-keyframes spin{
100%{
-webkit-transform:rotate(360deg)
}
}
@keyframes spin{
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes zoom-in-zoom-out{
0%,100%{
transform:scale(1,1)
}
50%{
transform:scale(1.08,1.08)
}
}
@keyframes gradient{
0%,100%{
background-position:0 50%
}
50%{
background-position:100% 50%
}
}
*,:after,:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
body{
color:#000001;
font-family:Nunito,sans-serif;
font-size:16px;
font-weight:400;
line-height:1.6;
letter-spacing:0
}
body{
padding:0;
margin:0
}
.container,.container-fluid{
display:flow-root;
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}
.hidden{
display:none
}
.container-fluid{
width:100%
}
.container{
width:90%
}
.row{
margin-right:-15px;
margin-left:-15px
}
.row:after,.row:before{
display:table;
content:""
}
.row:after{
clear:both
}
#menu-bg,#menu-bg:before{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100vh;
border-radius:0 0 10px 10px;
z-index:9999
}
#menu-bg{
background:linear-gradient(90deg,#000 0,#034d53 50%,#000 100%);
box-shadow:inset 0 0 120px #08436c
}
#menu-bg:before{
content:'';
box-shadow:0 0 20px #000
}
#ust-1{
position:fixed;
left:0;
top:0;
width:100%;
height:40px;
padding:0 5%;
display:flex;
justify-content:space-between;
align-items:center
}
#ust-1 span{
color:#fff
}
#anasayfa-slider{
position:relative;
height:100vh;
overflow:hidden
}
#anasayfa-slider .row{
margin-top:350px;
display:block;
text-align:center
}
#anasayfa-slider .row .slogan1{
font-size:33px;
color:#fff;
font-weight:900;
text-shadow:0 0 10px #4475fc;
line-height:33px
}
#anasayfa-slider .row .slogan2{
font-size:25px;
color:#fff;
font-weight:900;
text-shadow:0 0 10px #ff6464;
line-height:44px
}
#anasayfa-slider .row .slogan3{
font-size:25px;
color:#fff;
font-weight:900;
text-shadow:0 0 10px #2eff26;
line-height:44px;
text-decoration:underline
}
#arayalim b{
text-shadow:0 0 10px #000
}
#anasayfa-slider .row .video1,#anasayfa-slider .row .video2{
position:absolute;
left:0;
top:0;
width:100%;
height:100%
}
#anasayfa-slider .row .video1{
z-index:-1
}
#anasayfa-slider .row .video2{
z-index:-1;
opacity:.5
}
#arayalim{
position:absolute;
width:40%;
left:30%;
bottom:50px;
box-shadow:inset 0 0 10px #041c30;
background:-webkit-gradient(linear,left top,right top,from(#134046),color-stop(#267781),to(#134046));
background:-webkit-linear-gradient(left,#134046,#267781,#134046);
background:-o-linear-gradient(left,#134046,#267781,#134046);
background:linear-gradient(to right,#134046,#267781,#134046);
border-radius:35px 35px 0 0
}
#arayalim b{
float:left;
width:100%;
margin:10px 0 5px;
color:#fff
}
#arayalim div{
display:flex;
flex-direction:row;
justify-content:space-around;
background:#00000029;
padding:10px
}
#arayalim div input{
width:40%;
height:35px;
padding-left:15px;
border-radius:6px;
border:none;
outline:0;
box-shadow:0 0 4px #000;
background:#00000045;
color:#fff
}
#arayalim input::placeholder{
color:#ffffffa1;
opacity:1
}
#arayalim input:-ms-input-placeholder{
color:#ffffffa1
}
#arayalim input::-ms-input-placeholder{
color:#ffffffa1
}
#arayalim div span{
background:#236c75;
color:#fff;
padding:0 10px;
height:32px;
line-height:32px;
box-shadow:0 0 6px #383838;
border-radius:5px;
cursor:pointer
}
#slider{
position:relative
}
#slider{
overflow:hidden;
margin:0 auto;
width:calc(75%);
padding:0;
height:330px;
box-shadow:0 0 50px #000;
border-right:1px solid #000000d1;
border-left:1px solid #000000d1;
border-radius:0 0 30px 30px;
background:linear-gradient(306deg,#797fdd 0,#151645 50%,#797fdd 100%);
background-size:400% 400%;
animation:5s infinite gradient
}
#mobil-menu{
position:fixed;
z-index:9999999;
right:50px;
top:11px;
width:47px;
height:46px;
background:url(../images/menu.png) center/76% no-repeat;
border-radius:3px;
border:1px solid #514e4e
}
@-webkit-keyframes yorum-scale{
0%{
-webkit-box-shadow:0 0 0 0 #eee;
box-shadow:0 0 0 0 #eee
}
35%{
-webkit-box-shadow:0 0 10px 5px #eee;
box-shadow:0 0 10px 5px #eee
}
70%{
-webkit-box-shadow:0 0 10px 5px #ea830e;
box-shadow:0 0 10px 5px #ea830e
}
100%{
-webkit-box-shadow:0 0 0 0 #ea830e;
box-shadow:0 0 0 0 #ea830e
}
}
@-moz-keyframes yorum-scale{
0%{
-moz-box-shadow:0 0 0 0 #eee;
box-shadow:0 0 0 0 #eee
}
35%{
-moz-box-shadow:0 0 10px 5px #eee;
box-shadow:0 0 10px 5px #eee
}
70%{
-moz-box-shadow:0 0 10px 5px #ea830e;
box-shadow:0 0 10px 5px #ea830e
}
100%{
-moz-box-shadow:0 0 0 0 #ea830e;
box-shadow:0 0 0 0 #ea830e
}
}
@-ms-keyframes yorum-scale{
0%{
-ms-box-shadow:0 0 0 0 #eee;
box-shadow:0 0 0 0 #eee
}
35%{
-ms-box-shadow:0 0 10px 5px #eee;
box-shadow:0 0 10px 5px #eee
}
70%{
-ms-box-shadow:0 0 10px 5px #ea830e;
box-shadow:0 0 10px 5px #ea830e
}
100%{
-ms-box-shadow:0 0 0 0 #ea830e;
box-shadow:0 0 0 0 #ea830e
}
}
@-o-keyframes yorum-scale{
0%{
-o-box-shadow:0 0 0 0 #eee;
box-shadow:0 0 0 0 #eee
}
35%{
-o-box-shadow:0 0 10px 5px #eee;
box-shadow:0 0 10px 5px #eee
}
70%{
-o-box-shadow:0 0 10px 5px #ea830e;
box-shadow:0 0 10px 5px #ea830e
}
100%{
-o-box-shadow:0 0 0 0 #ea830e;
box-shadow:0 0 0 0 #ea830e
}
}
@keyframes yorum-scale{
0%{
box-shadow:0 0 0 0 #eee
}
35%{
box-shadow:0 0 10px 5px #eee
}
70%{
box-shadow:0 0 10px 5px #ea830e
}
100%{
box-shadow:0 0 0 0 #ea830e
}
}
@-webkit-keyframes yorum-content-in{
from{
opacity:0;
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
to{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@-moz-keyframes yorum-content-in{
from{
opacity:0;
-moz-transform:translateY(100%);
transform:translateY(100%)
}
to{
opacity:1;
-moz-transform:translateY(0);
transform:translateY(0)
}
}
@-ms-keyframes yorum-content-in{
from{
opacity:0;
-ms-transform:translateY(100%);
transform:translateY(100%)
}
to{
opacity:1;
-ms-transform:translateY(0);
transform:translateY(0)
}
}
@-o-keyframes yorum-content-in{
from{
opacity:0;
-o-transform:translateY(100%);
transform:translateY(100%)
}
to{
opacity:1;
-o-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes yorum-content-in{
from{
opacity:0;
transform:translateY(100%)
}
to{
opacity:1;
transform:translateY(0)
}
}
@-webkit-keyframes yorum-content-out{
from{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
to{
opacity:0;
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
}
@-moz-keyframes yorum-content-out{
from{
opacity:1;
-moz-transform:translateY(0);
transform:translateY(0)
}
to{
opacity:0;
-moz-transform:translateY(-100%);
transform:translateY(-100%)
}
}
@-ms-keyframes yorum-content-out{
from{
opacity:1;
-ms-transform:translateY(0);
transform:translateY(0)
}
to{
opacity:0;
-ms-transform:translateY(-100%);
transform:translateY(-100%)
}
}
@-o-keyframes yorum-content-out{
from{
opacity:1;
-o-transform:translateY(0);
transform:translateY(0)
}
to{
opacity:0;
transform:translateY(-100%)
}
}
@keyframes yorum-content-out{
from{
opacity:1;
transform:translateY(0)
}
to{
opacity:0;
transform:translateY(-100%)
}
}
@-webkit-keyframes yorum-show{
from{
opacity:0;
-webkit-transform:scale(0);
transform:scale(0)
}
to{
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@-moz-keyframes yorum-show{
from{
opacity:0;
-moz-transform:scale(0);
transform:scale(0)
}
to{
opacity:1;
-moz-transform:scale(1);
transform:scale(1)
}
}
@-ms-keyframes yorum-show{
from{
opacity:0;
-ms-transform:scale(0);
transform:scale(0)
}
to{
opacity:1;
-ms-transform:scale(1);
transform:scale(1)
}
}
@-o-keyframes yorum-show{
from{
opacity:0;
-o-transform:scale(0);
transform:scale(0)
}
to{
opacity:1;
-o-transform:scale(1);
transform:scale(1)
}
}
@keyframes yorum-show{
from{
opacity:0;
transform:scale(0)
}
to{
opacity:1;
transform:scale(1)
}
}
@-webkit-keyframes yorum-hide{
from{
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
to{
opacity:0;
-webkit-transform:scale(0);
transform:scale(0)
}
}
@-moz-keyframes yorum-hide{
from{
opacity:1;
-moz-transform:scale(1);
transform:scale(1)
}
to{
opacity:0;
-moz-transform:scale(0);
transform:scale(0)
}
}
@-ms-keyframes yorum-hide{
from{
opacity:1;
-ms-transform:scale(1);
transform:scale(1)
}
to{
opacity:0;
-ms-transform:scale(0);
transform:scale(0)
}
}
@-o-keyframes yorum-hide{
from{
opacity:1;
-o-transform:scale(1);
transform:scale(1)
}
to{
opacity:0;
-o-transform:scale(0);
transform:scale(0)
}
}
@keyframes yorum-hide{
from{
opacity:1;
transform:scale(1)
}
to{
opacity:0;
transform:scale(0)
}
}
@media only screen and (max-width:700px){
#ust-1{
display:none;
flex-direction:column;
justify-content:center;
align-items:center;
font-size:12px;
padding:8px 0;
height:auto
}
#mobil-menu{
display:block;
top:10px
}
#slider{
margin-bottom:15px
}
#menu-bg{
background:linear-gradient(180deg,#034d53 0,#00090d 50%,#145c93 100%);
box-shadow:inset 0 0 120px #000
}
#menu-bg[data-ak="1"]{
height:100vh!important
}
#anasayfa-slider .row video{
position:fixed;
top:50%;
left:50%;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-2;
transform:translateX(-50%) translateY(-50%);
background-size:cover;
transition:opacity 1s
}
#anasayfa-slider .row{
margin-top:300px
}
#arayalim{
left:0;
width:100%
}
#arayalim div input{
margin-right:10px
}
.container{
width:100%!important
}
#slider{
width:95%;
border-radius:10px;
margin-top:15px
} 