<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF8">
<link rel="Stylesheet" type="text/css" href="index.css" />
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption|Sigmar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</HEAD>
<script type="text/javascript">
$(document).ready(function(){
$("#cwiczeniadowyboru").click(function(){
$("#ikonki").slideToggle("fast");
$("#turn").slideToggle("fast");
});
});
</SCRIPT>
</script>
<BODY>
<!----------------------------------------------------------------------------------------------------------------------------->
<div id="main">
<div id="text">Q FORMIE </div>
<div id="text1">SPORTOWY STYL ŻYCIA</div>
</div>
<!----------------------------------------------------------------------------------------------------------------------------->
<div id="centrum">
<!--jeżeli on/ona odpowie nie wówczas otworzy się filmik ze mną: i mówię: o nie, nie ! nie ma nie ! -->
<div id="cwiczeniadowyboru" >ĆWICZENIA</div>
<div id="turnikonki">
<div id="turn"><img src="turn.png" style="width:26vh; height:18vh;"></img></div>
<div id="ikonki">
<div id="square"><img src="pushup.png" style="padding-top:1.3vh; width:6.5vh; height:7vh; display: block; margin: 0 auto"></z></div>
<div id="square"><img src="stomach.png" style="padding-top:1.3vh; width:6vh; height:6.5vh; display: block; margin: 0 auto"></div>
<div id="square"><img src="przysiady.png" style="padding-top:1.8vh; width:5.4vh; height:5.8vh; display: block; margin: 0 auto"></div>
<div id="square"><img src="podciaganie.png" style="padding-top:1.5vh; width:5.4vh; height:5.6vh; display: block; margin: 0 auto"></div>
<div id="square"><img src="worek.png" style="padding-top:1.75vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
<div id="square"><img src="run.png" style="padding-top:1.6vh; width:5.2vh; height:6vh; display: block; margin: 0 auto"></div>
<div id="square"><img src="hantle.png" style="padding-top:1.5vh;padding-left:0.6vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
<div id="square"><img src="swim.png" style="padding-top:1.5vh;padding-left:0.6vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
<div id="square"><img src="sztanga.png" style="padding-top:1.5vh;padding-left:0.6vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
<div id="square"><img src="stretching.png" style="padding-top:1.5vh;padding-left:0.6vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
<div id="square"><img src="stretching.png" style="padding-top:1.5vh;padding-left:0.6vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<div id="down">
<div id="face"><img src="facebook.svg"></img></div>
</div>
</BODY>
</HTML>
body{
margin:0px;
}
#main{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom:0;
width:100%;
height:16.5vh;
background-repeat:no-repeat;
background-color:black;
background-size: 100% 100%;
z-index:2;
animation-name: ghost;
animation-duration: 4s ;
}
#text{
position:absolute;
right:5vh;
top:0.3vh;
color:white;
font-family: 'PT Sans Caption', sans-serif;
text-align:center;
font-size:10vh;
animation-name: example;
animation-duration: 1s;
}
@keyframes example {
from {opacity:0;color:black;}
to {opacity:1; }
}
#text1{
position:absolute;
top:11.5vh;
right:4.5vh;
color:white;
font-family: 'Handlee', cursive;
font-size:2vh;
letter-spacing:0.78vh;
}
#centrum{
width:100%;
height:350vh;
background-repeat:no-repeat;
background-color:white;
background-size:100% 100%;
}
#klik{
width:70%;
height:10vh;
position:relative;
top:142vh;
font-family: 'Black Ops One', cursive;
text-align:center;
font-size:5vh;
left:-6vh;
color:black;
}
#cwiczeniadowyboru{
font-family: 'Black Ops One', cursive;
text-align:center;
font-size:6vh;
left:16vh;
color:black;
position:relative;
left:26vh;
top:142vh;
width:25%;
height:10vh;
padding-left: 2vh;
text-align: center;
background-color: white;
border: solid 1px white;
}
#turnikonki{
border-bottom:1vh solid black;
width:100%;
height:60vh;
position:relative;
top:7vh;
}
#turn{
position:relative;
top:133.5vh;
left:50.5vh;
z-index:2;
margin:0;
padding:0;
display:none;
}
#ikonki {
border:0.1vh solid black;
position:relative;
top:121vh;
left:75.9vh;
padding: 3vh;
display: none;
width:50%;
height:100vh;
z-index:0;
}
#square{
position:relative;
margin:2vh;
margin-bottom:0.5vh;
border-top:black solid 0.1vh;
border-bottom:white solid 0.1vh;
width: 9vh;
height: 9vh;
background-color: black;
border-radius:100%;
}
#square:hover{
width: 9vh;
height: 9vh;
border:0.01vh solid #21a298 ;
background-color: #21a298 ;
display:block;
}
#down{
width:100%;
height:19vh;
background-color:black;
background-size: 100% 100%;
background-repeat:no repeat;
}
#face{
width:6vh;
height:6vh;
background-color:white;
background-image:100% 100%;
float:right;
margin:0px;
}
Jak ładnie ułożyć ikonki w jednej linii, tak by po kliknięciu 1 z lewej nie przesuwały się byle gdzie ikonki poniżej. By zobaczyć ikonki należy kliknąć "ćwiczenia"