Dlaczego elementy nie przesywają się z dołu do góry podczas przewijania myszką ?? Header ma zostać na miejscu :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.js"></script>
<script src="scripts.js"></script>
</script>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="face"> <img src="face.png" style="widht:5vh; height:5vh; "></div>
<div class="twitter"> <img src="twitter.png" style="widht:5vh; height:5vh; "></div>
<div class="mail"> <img src="mail.png" style="widht:5vh; height:5vh; "></div>
<div class="main">
<div class="daro_foto"> </div>
<div class="dar_designer">DARIUSZ HOZER</div>
<div class="passion">Junior Front-End Developer / Freelancer</div>
<div class="half_main"></div>
</div>
<div class="main_1">
</div>
<div class="main_2"> </div>
<div class="footer"></div>
</body>
</html>
body{
width:100%;
height:500vh;
margin:0;
}
.header{
position:fixed;
width:100%;
height:7vh;
background-color:black;
z-index: 100;
}
.face,.twitter,.mail{
width: 5vh;
height: 0.5vh;
display:inline;
float:left;
margin-left:1vh;
margin-top:1vh;
}
.face:hover,.twitter:hover,.mail:hover{
display:inline;
float:left;
margin-left:1vh;
margin-top:0.5vh;
border:0.2vh solid aqua;
border-radius: 10%;
width:5vh;
height:5vh;
}
.main{
width: 100%;
height: 92.5vh;
}
.daro_foto{
width: 40vh;
height:40vh;
background-image: url("./daro1.jpg");
background-size: 100% 100%;
position: relative;
top:26.5vh;
left: 37.5vh;
border-radius: 100%;
z-index: 1;
transform:rotate(360deg);
border:solid 0.3vh dodgerblue;
animation:darek_kreci 0.8s;
}
@keyframes darek_kreci {
0% {transform:rotate(0deg); left:-70vh;}
25% {top:26.6vh;}
50% {top: 25vh;}
75% {top: 26.5vh;}
100% {transform:rotate(360deg);}
}
.dar_designer{
width:31%;
height: :10vh;
display: none;
position: relative;
top: 30vh;
left:31vh;
margin:0 ;
line-height: 4vh;
font-size: 6vh;
text-align: center;
font-family: 'Archivo Black';
font-style: normal;
font-weight: 400;
color:dodgerblue;
display: inline;
}
.passion{
width:58vh;
height: 15vh;
display: none;
position: relative;
top: 31vh;
left: 29.5vh;
letter-spacing: 1vh;
text-align: center;
font-family: 'Titillium Web', sans-serif;
font-style: normal;
font-weight: 400;
font-size:3vh;
}
.half_main{
width: 50%;
height:86vh;
position: absolute;
top: 7vh;
left:50%;
background-size: 100% 100%;
background-color: rgba(33,33,33,1.0);
}
.main_1{
width:100%;
background-color:white;
height: 740vh;
position: relative;
}
.footer{
width:100%;
background-color: black;
height: 12vh;
position: relative;
}
}
@keyframes puls{
0% {width: 0vh;height: 0vh;}
100% {width:25vh;height: 25vh; }
}
@media screen and (max-width: 599px) {
.dane{
width:46%;
position: absolute;
left:53%;
}
.name{
font-size:2vh;
word-spacing: 2px;
}
.window_learn{
visibility: hidden;
}
.web_designer{
width:10%;
height: :10vh;
font-size: 5vh;
}
.passion{
visibility: hidden;
}
.html_icon,.main_1{
visibility:hidden;
}
}
$(document).ready(function(){
$(".dar_designer").fadeIn( 500,function(){
$(".passion").show(400);
});
});
