Witam. Problem polega na tym, iż chcę ustawić prostą linię pionową na końcu 2 rozwiniętej prostej (poziomej) w kierunku do dołu do granicy czarnego diva. Sama edycja linii jest jakaś dziwna. Pojawia się i po chwili znika, a nie dałem żadnej animacji typu @keyframes czy funkcji each w jquery. I jeszcze mam problem w wstawieniem kodów w edytorze pytań do forum. Gdy wstawiam kod html to ok, ale jak chcę osobno okno dla kodu css to niestety, nie pojawia się okno dla css i muszę wklejać do jednego okna, gdzie potem pojawia się krytyka, że bałagan u mnie w pokoju :) Proszę o pomoc :)
<!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=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Caveat+Brush|Gravitas+One|Rock+Salt|Special+Elite|Squada+One" 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>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<div class="main">
<div class="text">PORTFOLIO</div>
<div class="text1">HOZER DARIUSZ</div>
<div class="straight"></div>
<div class="straight1"></div>
<div class="straight2"></div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<div class="centrum"></div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<div class="down">
</div>
</BODY>
<!--jQuery--------------------------------------------------------------------------------------------------------------------------------->
<script>
- $(document).ready(function(){
$(".straight").each(function(){
$('.straight').show(1000);
});
});
</script>
</HTML>
body{
margin:0px;
width:100%;
}
.main{
top: 0;
left: 0;
right: 0;
bottom:0;
width:100%;
height:45vh;
background-repeat:no-repeat;
background-color:black;
background-size: 100% 100%;
}
.text{
position:relative;
top:15vh;
left:6vh;
width:5vh;
height:4vh;
color:white;
font-family: 'Quicksand', sans-serif;
text-align:center;
font-size:6.5vh;
animation-name: action;
animation-duration:2s;
}
.text1{
position:relative;
top:19vh;
left:20vh;
width:35vh;
height:4vh;
color:white;
font-family: 'Oswald', sans-serif;
font-family: 'Anton', sans-serif;
animation-name: action;
animation-duration:2s;
font-size:2.5vh;
letter-spacing: 1vh;
}
@keyframes action{
from {opacity:0;}
to {opacity:1;}
}
.straight{
position:relative;
left:44vh;
top:13.7vh;
width:10vh;
height:0.1vh;
background-color:white;
transform : rotate(90deg);
display:none;
}
.straight1{
position:relative;
left:49vh;
top:13.7vh;
width:50vh;
height:0.1vh;
background-color:white;
animation-name:x;
animation-duration:2s;
}
@keyframes x{
from {width:0vh;}
to {width:50vh;}
}
.straight2{
position:relative;
top:22.5vh;
width:10vh;
left:130vh;
height:0.1vh;
background-color:white;
}
.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;
}