Responsiveness Added

css/home.css

@@ -366,3 +366,49 @@ span {
  font-size: 2.4rem;
  color: var(--second-bg-color);
 }
+
+
+/* BREAKPOINTS */
+
+@media (max-width: 1200px) {
+ html {
+ font-size: 55%;
+ }
+}
+@media (max-width: 991px) {
+ .header {
+ padding: 2rem 3%;
+ }
+ section {
+ padding: 10rem 3% 2rem;
+ }
+ .footer {
+ padding: 2rem 3%;
+ }
+}
+@media (max-width: 768px) {
+ #menu-icon {
+ display: block;
+ }
+ .navbar {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ padding: 1rem 3%;
+ background: var(--bg-color);
+ border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+ display: none;
+ }
+ .navbar a {
+ display: block;
+ font-size: 2rem;
+ margin: 3rem 0 ;
+ }
+}
+
+/* Utility Classes */
+.active {
+ display: block;
+}

js/script.js

@@ -1,3 +1,4 @@
+// Active section manager
 let navLinks = document.querySelectorAll('header nav a');
 let sections = document.querySelectorAll('section');
 
@@ -16,3 +17,12 @@ window.onscroll = () => {
  }
  });
 };
+
+// toggle icon navbar
+let menuIcon = document.querySelector('#menu-icon');
+let navbar = document.querySelector('.navbar');
+
+menuIcon.onclick = function () {
+ menuIcon.classList.toggle('bx-x');
+ navbar.classList.toggle('active');
+};