done adding navbar responsive

CONTRIBUTING.md

@@ -15,7 +15,7 @@ Welcome to the list of people who contributed to this repo 💥
 6. [Manjeet Sharma](https://github.com/manjeet-sharma)
 
 ## General Contributors below:
-1.
+1. [Rifqi Anshari](https://github.com/riansha)
 2.
 3.
 4.

css/style.css

@@ -3,12 +3,157 @@
     padding: 0;
     font-family: sans-serif;
 }
+
+*, *::after, *::before{
+    box-sizing: border-box;
+}
+
+html{
+    scroll-behavior: smooth; 
+}
+
+/* navbar */
+.navbar-edu{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    background-color: #f4b2c4;
+    font-size: 14px;
+}
+    .navbar-edu .container{
+        max-width: 1400px;
+        margin: 0 1.5em;
+        padding: 1.5em 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+    @media only screen and (min-width: 768px){
+        .navbar-edu .container{
+            margin: 0 2em;
+        }
+    }
+        .navbar-edu .container .title-web{
+            color: #ffffff;
+        }
+        .navbar-edu .container .navbar-item{
+            width: 100%;
+            overflow: hidden;
+            background: #f4b2c4;
+        }
+            @media only screen and (min-width: 768px){
+                .navbar-edu .container .navbar-item{
+                    width: auto;
+                }
+            }
+
+            .navbar-edu .container .mobile-btn{
+                width: 2em;
+                height: 2em;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                user-select: none;
+            }
+            @media only screen and (min-width: 768px){
+                .navbar-edu .container .mobile-btn{
+                    display: none;
+                }
+            }
+            .mobile-btn.active{
+                transform: rotate(45deg);
+            }
+            .mobile-btn.active span::before{
+                top: 0;
+                transform: rotate(90deg);
+            }
+            .mobile-btn.active span::after{
+                display: none;
+            }
+                .mobile-btn span, 
+                .mobile-btn span::after, 
+                .mobile-btn span::before{
+                    position: relative;
+                    display: block;
+                    width: 100%;
+                    height: 3px;
+                    background: #ffffff;
+                    border-radius: 4px;
+                }
+                .mobile-btn span::after,
+                .mobile-btn span::before{
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                }
+                .mobile-btn span::after{
+                    top: 8px;
+
+                }
+                .mobile-btn span::before{
+                    top: -8px;
+                }
+
+            .mobile-btn + .navbar-item{
+                max-height: 0;
+                transition: .3s;
+            }
+            @media only screen and (min-width: 768px){
+                .mobile-btn + .navbar-item{
+                    max-height: unset;
+                }
+            }
+            .mobile-btn.active + .navbar-item{
+                max-height: 150px;
+                transition: .3s;
+                transform-origin: bottom;
+            }
+            .menu-item{
+             padding: 1.5em 0 0;
+            }
+            @media only screen and (min-width: 768px){
+                .menu-item{
+                    display: flex;
+                    padding: 0;
+                }
+            }
+            .menu-item li{
+                list-style: none;
+                text-align: center;
+                margin-top: 2em;
+                color: #ffffff;
+                font-size: 1.25em;
+            }
+            @media only screen and (min-width: 768px){
+                .menu-item li{
+                    margin: 0 0 0 2em;
+                }
+            }
+            .menu-item li:first-child{
+                margin: 0;
+            }
+            .menu-item li a{
+                cursor: pointer;
+                text-decoration: none;
+                color: inherit;
+            }
+
 /* Header */
 #header{
+    padding-top: 70px;
     height: 100vh;
     background-position: center;
     background-size: cover;
 }
+@media only screen and (min-width: 768px){
+    #header{
+        padding-top: 90px;
+    }
+}
 .container{
     margin-right: 100px;
     margin-left: 100px;