navigation challenge

archeana · Jan 31, 2024 · 80821dd · 80821dd
1 parent ed57446
commit 80821dd
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/Day_23/style.css b/Day_23/style.css
@@ -29,7 +29,7 @@ html {
   }
 
   .navigation {
-    position: fixed;
+    position: relative;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);

diff --git a/Day_24/index.html b/Day_24/index.html
@@ -21,7 +21,19 @@ <h1>A story about getting lost.</h1>
       <li><a href="#">Maps</a></li>
     </ul>
   </nav>
-
+  <div class="navigation">
+    <a class="card previous-card" href="https://archeana.github.io/JS30/Day_23/index.html"
+        onclick="goToPreviousProject()">
+        <span>Previous</span>
+    </a>
+    <a class="card home-card" href="https://archeana.github.io/JS30/" onclick="goToHomepage()">
+        <span>Home</span>
+    </a>
+    <a class="card next-card" href="#" onclick="goToNextProject()">
+        <span>Next</span>
+    </a>
+</div>
+<br>
   <div class="site-wrap">
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>

diff --git a/Day_24/style.css b/Day_24/style.css
@@ -43,6 +43,42 @@ h1 {
     text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.2);
 }
 
+.navigation {
+    position: relative;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.card-back {
+    left: auto;
+}
+
+.card {
+    width: 100px;
+    height: 50px;
+    margin: 5px;
+    font-size: 20px;
+    background-color: #A2748B;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    overflow: hidden;
+    transition: 1s ease;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+    line-height: 16px;
+    display: flex;
+    justify-content: center;
+    position: relative;
+}
+
 nav {
     background: black;
     top: 0;