Working on a website that is structured into sections. Initially, all links are aligned perfectly upon load. However, resizing the window causes misalignment issues. Check out my progress at: karenrubkiewicz.com/karenportfolio1
Appreciate any help!
CSS:
/* ------------LAYOUT------------- */
body{
letter-spacing:.25px;
overflow-y:hidden;
font-family:Arial, Helvetica, sans-serif;
line-height:17px;
font-size:12px;
height: 100vh;}
html{
height: 100vh;}
.textwrap{
position: relative;
width:300px;
left:50px;
color:#000;
float:left;
margin-right:190px;
top: 30vh;
height:100vh;}
.textwrap a{
text-decoration:none;
color:#999;}
.textwrap a:hover{
text-decoration:none;
color:#000;}
.textwrap .contact{
position:relative;
top:40%;}
/* ------------MENU------------- */
#menu1{
top:50px;
z-index:100;
position:fixed;
height:100px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
width:98%;
left:500px;}
#menu2{
top:50px;
z-index:100;
position:fixed;
height:100px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
width:98%;
left:600px;}
#menu3{
top:50px;
z-index:100;
position:fixed;
height:100px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
right:2px;}
#menublock{
top:-10px;
z-index:10;
position:fixed;
height:100px;
background-color:#fff;
width:100%;
left:0px;}
#menu1 a,#menu2 a{
text-decoration:none;
color:#999;}
#menu1 a:hover,#menu2 a:hover{
text-decoration:none;
color:#000;
-webkit-transition: all 0.2s ease;}
#menu3 img{
height:20px;
margin-left:-3px;}
#menu3 a{
opacity:.2;
-webkit-transition: all 0.2s ease;}
#menu3 a:hover{
opacity:1;}
#arrowmenu{
position:fixed;
top:30vh;
left:2px;}
#arrowmenu img{
height:20px;
margin-bottom:-3px;}
#arrowmenu a{
opacity:.2;
-webkit-transition: all 0.2s ease;}
#arrowmenu a:hover{
opacity:1;}
/* ------------WORK------------- */
.gallery{
position:relative;
display:inline;
float:left;}
#galleryblock{
position: relative;
top: 30vh;
height:100%;}
/* ------------SECTIONS------------- */
section {
height: 100vh;}
HTML:
<section id="top">
<div class="textwrap">
INFO PAGE HERE
</div>
</section>
<section id="project1">
<div class="textwrap">
PROJECT 1 HERE
</div>
</section>
<section id="project2">
<div class="textwrap">
PROJECT 2 HERE
</div>
</section>
<div id="menu1">
<a href="#project1">+Work</a><br>
</div>
<div id="menu2">
<a href="#top">+Info</a><br>
</div>
<div id="menu3">
<a href="https://www.behance.net/KarenRubkiewicz" target="_blank"><img src="images/behance.png"></a>
<a href="https://www.linkedin.com/pub/karen-rubkiewicz/87/926/879" target="_blank"><img src="images/linkedin.png"></a>
</div>
<div id="menublock"></div>
<div id="arrowmenu">
<a href="#project1"><img src="images/up.png"></a><br>
<a href="#project2"><img src="images/down.png"></a><br>
</div>