<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat" 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">
</head>
<body>
<div class="header">
<div class="face"> <img src="face.png" style="widht:6vh; height:6vh; "></div>
<div class="twitter"> <img src="twitter.png" style="widht:6vh; height:6vh; "></div>
<div class="mail"> <img src="mail.png" style="widht:6vh; height:6vh; "></div>
<div class="dane"> <div class="name">DARIUSZ </div><div class="surname"> HOZER</div></div>
</div>
<div class="main" >
<div class="learn" >
<div class="html5">HTML5</div>
<div class="css3">CSS3</div>
<div class="jquery">JQUERY</div>
<div class="php5">PHP5</div>
<div class="sql">MySQL</div>
</div>
<div class="web">WEB DESIGNER</div>
<div class="passion">PASJA TWORZENIA STRON </div>
<ul class="topnav">
<li><a class="active" href="#home">HOME</a></li>
<li><a href="#news">PROJEKTY</a></li>
<li><a href="#contact">KONTAKT</a></li>
<li class="right"><a href="#about">O MNIE</a></li>
</ul>
</div>
<div class="footer">
</div>
</body>
</html>
body{
width:100%;
height: auto;
margin:0;
}
.header{
width: 100%;
height:11vh;
position: fixed;
background-color: black;
background-size: 100% 100%;
z-index: 100;
}
.face,.twitter,.mail{
float: left;
margin-top:2.4vh;
margin-left:1.5vh;
margin-right:1vh;
width:6vh;
height:6vh;
}
.face:hover,.mail:hover,.twitter:hover{
border:1px solid aqua;
float: left;
margin-top:2.4vh;
margin-left:1.5vh;
width:6vh;
height:6vh;
border-radius: 10%;
}
.dane{
width: 24vh;
height: 10vh;
display: none;
float: right;
margin-right: 3vh;
margin-top: 4vh;
}
@media only screen and (max-width: 200vh) {
.dane {
float: right;
margin-right: 5vh;
margin-top: 2.5vh;
width: 6vh;
height: 5vh;
}
}
.name{
display:inline;
color:aliceblue;
font-size: 2.7vh;
font-family: 'Montserrat', sans-serif;
}
.surname{
float: right;
display: inline;
color:silver;
font-size: 2.7vh;
font-family: 'Archivo Black', sans-serif;
}
@media only screen and (max-width: 200vh) {
.name {
font-size:1.8vh;
}
.surname{
font-size: 2vh;
position: relative;
left:2vh;
}
}
.main{
width: 100%;
height:400vh;
background-size: 100% 100%;
}
.learn{
width: 35%;
height: 12vh;
position: relative;
top:30vh;
left: 31%;
animation-iteration-count: 1; animation: mymove 2s ;
}
@-webkit-keyframes mymove {
0% {top: 0vh;}
50% {top: 0vh;}
100% {top: 30vh;}
}
@media only screen and (max-width: 200vh) {
.learn {
display: none;
}
}
.html5,.css3,.jquery,.sql,.php5{
display: none;
float:left;
margin-left:2vh;
width: 12vh;
height:13vh;
text-align: center;
line-height: 13vh;
border-radius: 100%;
color:#444444;
font-size: 3vh;
font-family: 'Archivo Black', sans-serif;
}
.html5:hover,.css3:hover,.jquery:hover,.sql:hover,.php5:hover{
display: none;
float:left;
margin-left:2vh;
width: 12vh;
height:13vh;
text-align: center;
line-height: 13vh;
border-radius: 100%;
color:darkturquoise;
font-size: 3vh;
font-family: 'Archivo Black', sans-serif;
}
.web{
position: relative;
top: 26.6vh;
left:29.5%;
width: 78vh;
height:10vh;
text-align: center;
color:orangered;
line-height: 10vh;
font-size: 11vh;
font-family: 'Roboto', sans-serif;
display: inline;
display: none;
font-weight: 800;
}
@media only screen and (max-width: 100vh ) {
.web {
font-size: 5vh;
float: left;
width: 50%;
margin: 0 auto;
}
}
.passion{
float:left;
margin-top: 25vh;
margin-left: 87vh;
border: 1px solid black;
text-align: center;
color:saddlebrown;
line-height: 10vh;
font-size: 3vh;
letter-spacing: 1.5vh;
font-family: 'Roboto', sans-serif;
display: inline;
border:none;
font-family: 'Abel', sans-serif;
font-weight: 500;
}
@media only screen and (max-width: 200vh) {
.passion {
float:left;
margin-left: 5vh;
margin-top: 40vh;
font-size: 2.5vh;
font-weight: 500;
}
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:black;
width: 100%;
position: relative;
top:78vh;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}
ul.topnav li a:hover:not(.active) {background-color: orangered;}
ul.topnav li a.active {background-color:dimgray;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
.footer{
width: 100%;
height:10vh;
background-color:black;
background-size: 100% 100%;
}
<script>
$(document).ready(function(){
$(".face").each(function(){
$(".face").fadeIn(1800);
});
});
$(document).ready(function(){
$(".dane").each(function(){
$(".dane").fadeIn(1800);
});
});
$(document).ready(function(){
$(".learn").each(function(){
$(".html5,.css3,.jquery,.sql,.php5").fadeIn(1000);
});
});
</script>
<script>
$(document).ready(function(){
$(".web").each(function(){
$(".web").fadeIn(3000);
});
});
$(document).ready(function(){
$(".passion").each(function(){
$(".passion").fadeIn(100).fadeOut(10).
fadeIn(3000);
});
});
</script>
Szaleją mi środkowe napisy :) Wszystko inne responsywne. Chciałbym, żeby napisy po zminimalizowaniu były idealnie w środku (tzn. poprawne) Gdzie zrobiłem błąd ?? Kombinuję ile mogę :) Zna ktoś odpowiedź :) ( coś się pierniczy wstawienie kodu do edytora forum. Skopiuj z osobna js, css i html :)
