script.js

css/estilo.css

@@ -647,13 +647,16 @@ footer .copyright .pro-links i:hover{
   }
 
   #menu-close{
-    display: none;
+    display: initial;
+    font-size: 1.6rem;
+    color: #fff;
+    padding: 30px 0 20px 20px;
   }
 
   .navlp .navigation ul {
     position: absolute;
     top: 0;
-    right: 0;
+    right: -220px;
     width: 220px;
     height: 100vh;
     background: #2465939a;
@@ -663,6 +666,11 @@ footer .copyright .pro-links i:hover{
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
+    transition: 0.3s ease-in;
+  }
+
+  .navlp .navigation ul.active {
+    right: 0;
   }
 
   .navlp .navigation ul li {

js/script.js

@@ -57,3 +57,37 @@ ScrollReveal().reveal('.btn3', {
     delay: 2000,
 });
 
+class MobileNavbar {
+    constructor(mobileMenu, navList, closeMenu) {
+        this.mobileMenu = document.querySelector(mobileMenu);
+        this.navList = document.querySelector(navList);
+        this.closeMenu = document.querySelector(closeMenu);
+        this.activeClass = 'active';
+    }
+
+    handleClick() {
+        this.navList.classList.toggle(this.activeClass);
+        this.mobileMenu.classList.toggle(this.activeClass);
+        this.closeMenu.classList.toggle(this.activeClass);
+    }
+
+    addClickEvent() {
+        this.mobileMenu.addEventListener("click", this.handleClick.bind(this));
+        this.closeMenu.addEventListener("click", this.handleClick.bind(this));
+    }
+
+    init(){
+        if (this.mobileMenu && this.closeMenu) {
+            this.addClickEvent();
+        }
+
+        return this;
+    }
+}
+
+const mobileNavbar = new MobileNavbar(
+    '#menu-btn',
+    '.navlp .navigation ul',
+    '#menu-close'
+);
+mobileNavbar.init();

landingpage.html

@@ -9,6 +9,7 @@
 
     <script src="https://kit.fontawesome.com/ca32771bae.js" crossorigin="anonymous"></script>
 
+
     <link rel="stylesheet" href="css/estilo.css" />
 </head>