additional modifications

YeonSphere · Jul 28, 2024 · 0b18bf3 · 0b18bf3
1 parent afdd5ec
commit 0b18bf3
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 22 deletions.
diff --git a/about.html b/about.html
@@ -19,9 +19,6 @@
                 <li><a href="index.html">Home</a></li>
                 <li><a href="about.html">About</a></li>
                 <li><a href="contact.html">Contact</a></li>
-                <li><a href="blog.html">Blog</a></li>
-                <li><a href="portfolio.html">Portfolio</a></li>
-                <li><a href="testimonials.html">Testimonials</a></li>
             </ul>
             <div class="hamburger-menu">
                 <span></span>

diff --git a/contact.html b/contact.html
@@ -19,9 +19,6 @@
                 <li><a href="index.html">Home</a></li>
                 <li><a href="about.html">About</a></li>
                 <li><a href="contact.html">Contact</a></li>
-                <li><a href="blog.html">Blog</a></li>
-                <li><a href="portfolio.html">Portfolio</a></li>
-                <li><a href="testimonials.html">Testimonials</a></li>
             </ul>
             <div class="hamburger-menu">
                 <span></span>
@@ -37,6 +34,8 @@ <h1>Contact Us</h1>
             <ul>
                 <li>Email: <a href="mailto:daedaevibin@naver.com">daedaevibin@naver.com</a></li>
                 <li>Phone: <a href="tel:+12084644061">+1 (208) 464-4061</a></li>
+                <li>Second Phone: <a href="tel:+19418672765">+1 (941) 867-2765</a></li>
+                <li>Second Email: <a href="mailto:kukankitsune1@gmail.com">kukankitsune1@gmail.com</a></li>
             </ul>
         </section>
     </main>

diff --git a/index.html b/index.html
@@ -19,9 +19,6 @@
                 <li><a href="index.html">Home</a></li>
                 <li><a href="about.html">About</a></li>
                 <li><a href="contact.html">Contact</a></li>
-                <li><a href="blog.html">Blog</a></li>
-                <li><a href="portfolio.html">Portfolio</a></li>
-                <li><a href="testimonials.html">Testimonials</a></li>
             </ul>
             <div class="hamburger-menu">
                 <span></span>

diff --git a/script.js b/script.js
@@ -3,15 +3,12 @@ document.addEventListener('DOMContentLoaded', () => {
     window.addEventListener('load', () => {
         loaderWrapper.style.display = 'none';
     });
-});
 
     const hamburgerMenu = document.querySelector('.hamburger-menu');
     const navUl = document.querySelector('nav ul');
-document.querySelector('.hamburger-menu').addEventListener('click', () => {
-    document.querySelector('nav ul').classList.toggle('show');
-});
 
     hamburgerMenu.addEventListener('click', () => {
         navUl.classList.toggle('show');
+        hamburgerMenu.classList.toggle('open');
     });
-
+});
diff --git a/styles.css b/styles.css
@@ -18,6 +18,11 @@ header {
     justify-content: space-between;
     align-items: center;
     padding: 0 2em;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .logo img {
@@ -29,6 +34,7 @@ nav ul {
     padding: 0;
     display: flex;
     gap: 1em;
+    transition: transform 0.3s ease-in-out;
 }
 
 nav ul li {
@@ -39,6 +45,25 @@ nav ul li a {
     color: white;
     text-decoration: none;
     font-weight: bold;
+    position: relative;
+}
+
+nav ul li a::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: white;
+    transform-origin: bottom right;
+    transition: transform 0.25s ease-out;
+}
+
+nav ul li a:hover::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
 }
 
 .hamburger-menu {
@@ -52,6 +77,19 @@ nav ul li a {
     height: 2px;
     width: 25px;
     margin: 4px 0;
+    transition: all 0.3s ease;
+}
+
+.hamburger-menu.open span:nth-child(1) {
+    transform: rotate(45deg) translate(5px, 5px);
+}
+
+.hamburger-menu.open span:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger-menu.open span:nth-child(3) {
+    transform: rotate(-45deg) translate(5px, -5px);
 }
 
 .hero {
@@ -60,6 +98,8 @@ nav ul li a {
     text-align: center;
     border-radius: 10px;
     margin: 2em;
+    margin-top: 80px; /* Adjust for fixed header */
+    animation: fadeIn 1s ease-in-out;
 }
 
 .content {
@@ -68,6 +108,7 @@ nav ul li a {
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     margin: 2em;
+    animation: fadeIn 1s ease-in-out;
 }
 
 footer {
@@ -107,19 +148,26 @@ footer {
     100% { transform: rotate(360deg); }
 }
 
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
 @media (max-width: 768px) {
     nav ul {
         display: none;
-    }
-    .hamburger-menu {
-        display: flex;
-    }
-    .nav-links.show {
-        display: flex;
         flex-direction: column;
+        background-color: rgba(138, 43, 226, 0.9);
         position: absolute;
         top: 60px;
         right: 0;
-        background-color: rgba(138, 43, 226, 0.9);
         width: 100%;
-        text
+        text-align: center;
+    }
+    nav ul.show {
+        display: flex;
+    }
+    .hamburger-menu {
+        display: flex;
+    }
+}