added navbar arrow and animations

home/index.html

@@ -19,6 +19,7 @@
         <a class="nav link" id="port" href="../portfolio/portfolio.html"><h2>Portfolio</h2></a>
         <a class="nav link" id="blog" href="../blog/blog.html"><h2>Blog</h2></a>
         <a class="nav link" id="contact" href="../contact/contact.html"><h2>Contact</h2></a>
+        <a class="arrow right"></a>
     </nav>
     
     <main>

style/main.css

@@ -23,12 +23,23 @@ main {
 }
 
 .navigation {
+    top: 0em;
     margin: 0;
     margin-right: -24em;
     display: grid;
-    grid-template-columns: 25% 25% 25% 25%;
+    grid-template-columns: 20% 20% 20% 20% 20%;
-    grid-template-areas: "home port blog contact";
+    grid-template-areas: "home port blog contact arrow";
-    z-index: 1000;
+    position: sticky;
+    transform: translate(-95%,0);
+    transition: transform 1s;
+}
+
+.navigation:hover {
+    transform: translate(0,0);
+}
+
+.navigation:hover .arrow {
+    opacity: 0;
 }
 
 .link {
@@ -56,27 +67,50 @@ nav > .link:hover {
     border-bottom: 0.1em solid #32cd32;
 }
 
-.link #home {
+#home:hover {
+    border-bottom: 0.1em solid #000000;
+}
+
+#home {
     grid-area: home;
 }
 
-.link #port {
+#port {
     grid-area: port;
 }
 
-.link #blog {
+#blog {
     grid-area: blog;
 }
 
-.link #contact {
-    grid-area: contact;
-}
-
 #contact {
+    grid-area: contact;
     border-top-right-radius: 10em;
     border-bottom-right-radius: 10em;
 }
 
+#arrow {
+    
+    grid-area: arrow;
+}
+
+.arrow {
+    margin-left: 6em;
+    margin-top: 1em;
+    border:0.5em solid #f29602;
+    border-width: 0em 0.5em 0.5em 0em;
+    width: 0.5em;
+    height: 0.5em;
+    display: inline-block;
+    padding: 0.5em;
+    opacity: 1;
+    transition: opacity 1s ease-in;
+}
+
+.right {
+    transform: rotate(-45deg);
+}
+
 .moreInfo {
     position: relative;
 }