Witam. Podczas Klikania w kółko linia prosta zaczyna się tam gdzie nie powinna, natomiast kończy się tam gdzie powinna. Jak zrobić by linia pojawiała się i kończyła w tym samym miejscu ?
<!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">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Days+One|Source+Code+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</HEAD>
<BODY>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--img src="darek.png" ></img>-->
<div class="main">
<div class="surname">Dariusz Hozer </div>
<div class="portfolio">portfolio</div>
<div class="straight"></div>
<div class="menu">
<div class="mojeprace">MOJE PRACE</div>
<div class="straight1"></div>
<div class="omnie">O MNIE</div>
<div class="straight2"></div>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<div class="centrum"></div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<div class="down">
</div>
</BODY>
</HTML>
<script>
$(document).ready(function(){
$('.straight').fadeIn(1200);
});
$(document).ready(function(){
$('img').slideDown(500);
});
$(document).ready(function(){
$('.mojeprace').click(function(){
$('.straight1').toggle(1000);
});
});
</script>
body{
margin:0px;
width:100%;
}
.main{
top: 0;
left: 0;
right: 0;
bottom:0;
width:100%;
height:55vh;
background-repeat:no-repeat;
background-color:black;
background-size: 100% 100%;
}
.surname{
float:left;
margin-left:2vh;
margin-top:2vh;
font-family: 'Oswald', sans-serif;
font-size:2.5vh;
color:white;
}
.portfolio{
float:left;
margin-top:3.9vh;
margin-left:0.3vh;
font-family: 'Oswald', sans-serif;
font-size:2vh;
font-family: 'Oswald', sans-serif;
font-family: 'Raleway', sans-serif;
color:#00ffff;
}
.straight{
width:13.1vh;
height:0.25vh;
background-color:white;
position:relative;
top:6.61vh;
left:2vh;
display:none;
}
img{
width:13.1vh;
height:17vh;
float:left;
display:block;
clear:left;
margin-top:2.5vh;
margin-left:2vh;
display:none;
border-radius:1%;
}
.menu{
float:left;
margin-top:14vh;
margin-left:20vh;
width:180vh;
height:34.6vh;
background-color:black;
background-size:100% 100%;
}
.mojeprace{
float:left;
margin-top:5vh;
margin-left:12vh;
width:17vh;
height:17vh;
font-size:2vh;
color:white;
background-size:100% 100%;
background-color:white;
border-radius:100%;
color:black;
font-size:3vh;
font-family: 'Anton', sans-serif;
text-align:center;
line-height:17vh;
}
.straight1{
width:22vh;
height:0.5vh;
position:relative;
top:27vh;
left:14vh;
margin:0vh;
background-color:white;
background-size:100% 100%;
transform:rotate(60deg);
display:none;
}
.omnie{
float:left;
margin-left:35vh;
margin-top:-6vh;
width:11vh;
height:11vh;
font-size:2.5vh;
color:white;
background-size:100% 100%;
background-color:white;
border-radius:100%;
color:black;
font-family: 'Anton', sans-serif;
text-align:center;
line-height:11vh;
}
.centrum{
width:100%;
height:350vh;
background-repeat:no-repeat;
background-color:white;
background-size:100% 100%;
}
.down{
width:100%;
height:19vh;
background-color:black;
background-size: 100% 100%;
background-repeat:no repeat;
}