feat: day 3

Author: solygambas

003-rotating navigation/index.html

@@ -17,10 +17,11 @@
       <div class="circle-container">
         <div class="circle">
           <button id="close">
-            <i class="fas fa-times"></i>
+            <!-- Change Menu Icons -->
+            <i class="fas fa-minus"></i>
           </button>
           <button id="open">
-            <i class="fas fa-bars"></i>
+            <i class="fas fa-plus"></i>
           </button>
         </div>
       </div>
@@ -63,6 +64,8 @@ <h2>My Subtitle</h2>
         <li><i class="fas fa-home"></i> Home</li>
         <li><i class="fas fa-user-alt"></i> About</li>
         <li><i class="fas fa-envelope"></i> Contact</li>
+        <!-- Add More Navigation Links -->
+        <li><i class="fas fa-briefcase"></i> Portfolio</li>
       </ul>
     </nav>
     <script src="script.js"></script>

003-rotating navigation/style.css

@@ -22,7 +22,8 @@ body {
 }
 
 .container.show-nav {
-  transform: rotate(-20deg);
+  /* Adjust Rotation Angle */
+  transform: rotate(-30deg);
 }
 
 .circle-container {
@@ -92,10 +93,13 @@ nav ul li {
   color: #fff;
   margin: 40px 0;
   transform: translateX(-100%);
-  transition: transform 0.4s ease-in;
+  /* Modify Transition Speed of Menu Items */
+  transition: transform 0.2s ease-in;
 }
 
 nav ul li i {
+  /* Change Icon Color: */
+  color: #ff7979;
   font-size: 20px;
   margin-right: 10px;
 }
@@ -110,6 +114,11 @@ nav ul li + li + li {
   transform: translateX(-200%);
 }
 
+nav ul li + li + li + li {
+  margin-left: 45px;
+  transform: translateX(-250%);
+}
+
 .content {
   max-width: 1000px;
   margin: 50px auto;