fixing navbar & section 1 responsive

assets/css/navbar.css

@@ -1,10 +1,10 @@
-/* Nav Created By I Made Hary Mahayana */
+/* Nav Created By Harymahayana07 */
 header * {
   box-sizing: content-box;
 }
 .nav__navigation {
   padding: 0px 64px;
-  background: #ffffff;
+  background: var(--white-color);
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
   height: 64px;
   display: flex;
@@ -97,4 +97,212 @@ a.nav__icons .nav__mascot {
 .nav__cart {
   width: 47px;
 }
+.nav__search_mobile {
+  display: none;
+}
+.nav__search_mobile-img {
+  display: none;
+}
+.nav__button_menu {
+  display: none;
+}
+.nav__modal__hamburger {
+  display:none;
+}
+.nav__modal__search {
+  display:none;
+}
+
+@media screen and (max-width: 1024px) {
+  .nav__navigation {
+    padding: 0px 20px;
+    height: 56px;
+  }
+  .nav__mascot {
+    display: none;
+  }
+  .nav__icons {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+  .nav__logo {
+    width: 64px;
+    height: 32px;
+  }
+  .nav__wishlist_mobile {
+    display: none;
+  }
+  .nav__button_menu {
+    display: initial;
+    background: none;
+    border: none;
+    margin-right: 20px;
+    cursor: pointer;
+  }
+  .nav__signin {
+    display: none;
+  }
+  .nav__search_mobile,
+  .nav__search_mobile-img {
+    display: block;
+  }
+  .nav__form_search {
+    display: none;
+  }
+  .nav__links {
+    border-right: none;
+    padding-right: 0px;
+    margin-left: auto;
+  }
+  .nav__img-kyou {
+    object-fit: contain;
+    width: 64px;
+    height: 32px;
+  }
+
+  .nav__modal__hamburger , .nav__modal__search {
+    background: rgba(0, 0, 0, 0.75);
+    display: none;
+    align-items: flex-start;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: 1000;
+    padding: 0px;
+    width: 100%;
+    transition: opacity 5.3s ease-in-out, transform 5.3s ease-in-out;
+  }
+
+  .nav__modal-container, .nav__modal__search-container {
+    max-width: 800px;
+    position: relative;
+    padding: 1.2rem;
+    background: var(--white-color);
+    background-clip: padding-box;
+    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
+    margin: 0 auto;
+  }
+  .nav__modal__menu , .nav__modal__search_menu {
+    width: 100%;
+    height: 100%;
+    border-radius: 0px;
+    padding: 0px;
+    max-width: none;
+  }
+  .nav__modal_menu-hidden {
+    display: block;
+  }
+  .nav__modal_mobile_top {
+    padding: 18px 24px;
+    position: fixed;
+    top: 0px;
+    width: 100%;
+    background: var(--white-color);
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #d1d3d4;
+  }
+  .nav__modal__search_mobile_top {
+    padding: 0px 24px;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--white-color);
+    display: flex;
+    align-items: center;
+    z-index: 10;
+  }
+
+  .nav__modal_button-back, .nav__modal_button-search-back {
+    background: transparent;
+    border: none;
+    margin-right: 20px;
+    height: 16px;
+    cursor: pointer;
+  }
+  .nav__modal_button-img {
+    filter: brightness(0);
+    height: 16px;
+  }
+  .nav__modal_inner_menu {
+    height: 100%;
+    margin-top: 55px;
+  }
+  .nav__modal_info_card {
+    padding: 24px 20px;
+    display: flex;
+    align-items: center;
+  }
+  .nav__modal_img-face {
+    width: 40px;
+    margin-right: 16px;
+  }
+
+  .nav__modal_username {
+    font-size: 16px;
+    color: #565252;
+    font-weight: bold;
+  }
+  hr.nav__modal_hr {
+    border: 0.5px solid #d1d3d4;
+  }
+  .nav__modal_link_menu {
+    display: flex;
+    padding: 16px 20px;
+    align-items: center;
+    color: #565252;
+    text-decoration: none;
+    cursor: pointer;
+    font-size: 14px;
+  }
+  .nav__modal_svg {
+    width: 20px;
+    height: 20px;
+    margin-right: 12px;
+    fill: #808080;
+  }
+  .nav__modal__search_form {
+    height: 52px;
+    flex-grow: 1;
+    position: relative;
+  }
+  .nav__modal__search_form input {
+        height: 100%;
+    box-sizing: border-box;
+    border: none;
+    font-size: 16px;
+    font-family: "Nunito", sans-serif;
+    transform: scale(calc(14/16));
+    margin-top: 1px;
+    transform-origin: left center;
+    padding-right: 24px;
+  }
+  .nav__modal__search-content {
+    padding: 16px 20px;
+    margin-top: 52px;
+  }
+  .nav__modal__search-content-label {
+    font-size: 12px;
+    color: #a2a2a2;
+    display: block;
+    margin-bottom: 8px;
+  }
+   .nav__modal__search-content-entry {
+    background: none;
+    border: none;
+    font-family: "Nunito", sans-serif;
+    color: #565252;
+    padding: 8px 0px;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+  }
+}
 /* End Nav */

assets/css/root.css

@@ -4,6 +4,7 @@
   --ready-stock: #41B774;
   --pre-order: #657996;
   --late-pre-order: #D3647A;
+  --white-color: #ffffff;
 }
 * {
   margin: 0;

assets/css/section1.css

@@ -1,4 +1,4 @@
-/* Section 1 Created By I Made Hary Mahayana */
+/* Section 1 Created By I Made Harymahayana07 */
 .section__1 {
   background: linear-gradient(90deg, #8e2610 0%, #481502 100%);
   margin-top: 64px;
@@ -86,4 +86,10 @@
   margin-left: 15px;
   background: transparent !important;
 }
+
+@media screen and (max-width: 1024px) {
+  .section__1 {
+    margin-top:56px;
+  }
+}
 /* end Section 1 */

assets/css/styles.css

@@ -1,3 +1,4 @@
+@import './navbar.css';
 @import './section1.css';
 @import './section2.css';
 @import './section3.css';

assets/js/navbar.js

@@ -0,0 +1,33 @@
+// created by Harymahayana07
+document
+  .querySelector("#nav__modal_button-menu")
+  .addEventListener("click", toggleClass);
+document
+  .querySelector(".nav__modal_button-back")
+  .addEventListener("click", toggleClassBack);
+document
+  .querySelector("#nav__modal_button-search")
+  .addEventListener("click", searchClass);
+document
+  .querySelector(".nav__modal_button-search-back")
+  .addEventListener("click", searchClassBack);
+
+function toggleClass() {
+  var navModal = document.querySelector(".nav__modal__hamburger");
+  navModal.style.display =
+    navModal.style.display === "block" ? "none" : "block";
+}
+function toggleClassBack() {
+  var navModal = document.querySelector(".nav__modal__hamburger");
+  navModal.style.display = navModal.style.display === "none" ? "block" : "none";
+}
+function searchClass() {
+  var searchModal = document.querySelector(".nav__modal__search");
+  searchModal.style.display =
+    searchModal.style.display === "block" ? "none" : "block";
+}
+function searchClassBack() {
+  var searchModal = document.querySelector(".nav__modal__search");
+  searchModal.style.display =
+    searchModal.style.display === "none" ? "block" : "none";
+}

assets/js/section1.js

@@ -8,6 +8,23 @@ $(document).ready(function () {
     focusOnSelect: true,
     nextArrow: false,
     prevArrow: false,
+    infinite: true,
+    responsive: [
+      {
+        breakpoint: 748,
+        settings: {
+          autoplay: true,
+          autoplaySpeed: 2500,
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          centerMode: true,
+          focusOnSelect: true,
+          nextArrow: false,
+          prevArrow: false,
+          infinite: true,
+        },
+      },
+    ],
   });
 
   $(".section__1-button-prev").on("click", function () {