navbar responsif

Author: MuhammadMallq

styles.css

@@ -4,15 +4,16 @@ body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    background-color: #f9f9f9;
-    color: #333;
+    background-color: #111;
+    color: #fff;
     line-height: 1.6;
+    scroll-behavior: smooth;
 }
 
 header {
     text-align: center;
     padding: 2rem 1rem;
-    background: linear-gradient(135deg, #4e54c8, #8f94fb);
+    background: linear-gradient(135deg, #000, #333);
     color: white;
 }
 
@@ -25,30 +26,99 @@ p {
     font-size: 1.1rem;
 }
 
+/* Navbar */
+nav {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    background-color: #000;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+
 nav ul {
     display: flex;
     justify-content: center;
+    align-items: center;
     padding: 0;
+    margin: 0;
     list-style: none;
-    background-color: #4e54c8;
 }
 
 nav ul li {
-    margin: 0 15px;
+    margin: 0 20px;
 }
 
 nav ul li a {
     text-decoration: none;
     color: white;
     padding: 10px 15px;
-    transition: 0.3s;
+    border-radius: 8px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
 nav ul li a:hover {
-    background-color: #8f94fb;
-    border-radius: 8px;
+    background-color: #444;
+    transform: scale(1.1);
+}
+
+/* Hamburger Menu (Untuk Layar Kecil) */
+.menu-toggle {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+    padding: 10px;
+}
+
+.menu-toggle span {
+    background: white;
+    height: 3px;
+    width: 30px;
+    margin: 5px 0;
+    transition: 0.4s;
+}
+
+@media (max-width: 768px) {
+    nav ul {
+        flex-direction: column;
+        align-items: center;
+        display: none;
+    }
+
+    nav ul.active {
+        display: flex;
+    }
+
+    .menu-toggle {
+        display: flex;
+    }
+}
+
+/* Animasi Hamburger Menu */
+.menu-toggle.open span:first-child {
+    transform: rotate(45deg) translate(5px, 5px);
+}
+
+.menu-toggle.open span:nth-child(2) {
+    opacity: 0;
+}
+
+.menu-toggle.open span:last-child {
+    transform: rotate(-45deg) translate(5px, -5px);
+}
+
+/* Efek slide-up */
+.slide-up {
+    opacity: 0;
+    transform: translateY(50px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.slide-up.visible {
+    opacity: 1;
+    transform: translateY(0);
 }
 
+
 /* Animasi */
 .fade-in {
     animation: fadeIn 2s ease-in;
@@ -68,6 +138,18 @@ nav ul li a:hover {
     to { transform: translateY(0); opacity: 1; }
 }
 
+/* Animasi Scroll */
+.scroll-reveal {
+    opacity: 0;
+    transform: translateY(50px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.scroll-reveal.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
 /* Bagian Tentang Saya */
 #about {
     text-align: center;
@@ -76,8 +158,13 @@ nav ul li a:hover {
 
 .project-image.small {
     width: 150px;
-    border-radius: 50%;
+    border-radius: 10%;
     margin: 20px 0;
+    transition: transform 0.5s ease;
+}
+
+.project-image.small:hover {
+    transform: scale(1.1) rotate(5deg);
 }
 
 /* Bagian Skill */
@@ -100,9 +187,9 @@ nav ul li a:hover {
     align-items: center;
     max-width: 200px;
     padding: 15px;
-    background: white;
+    background: #222;
     border-radius: 12px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
     transition: transform 0.3s;
 }
 
@@ -113,11 +200,12 @@ nav ul li a:hover {
 }
 
 .skill-item:hover {
-    transform: translateY(-10px);
+    transform: translateY(-10px) scale(1.1);
 }
 
 /* Bagian Proyek */
 #projects {
+    text-align: center;
     padding: 3rem 1rem;
 }
 
@@ -130,17 +218,41 @@ nav ul li a:hover {
     width: 100%;
     max-width: 400px;
     border-radius: 12px;
+    transition: transform 0.5s ease;
+}
+
+.project img:hover {
+    transform: scale(1.1) rotate(-3deg);
 }
 
 /* Bagian Kontak */
 #contact {
     text-align: center;
     padding: 3rem 1rem;
-    background: #4e54c8;
+    background: #000;
     color: white;
 }
 
 #contact p {
     margin: 10px 0;
 }
 
+/* Responsif */
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2rem;
+    }
+
+    .skill-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    nav ul {
+        flex-direction: column;
+    }
+
+    .project img {
+        max-width: 300px;
+    }
+}