finally, end this website

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "compile-hero.disable-compile-files-on-did-save-code": true
+}

index.html

@@ -68,11 +68,11 @@
 	<!-- _____ nav-site _____ -->
 	<nav class="nav-site">
 		<ul>
-			<li><a href="#" class="link-to active"data-scroll="home">home</a></li>
-			<li><a href="#"class="link-to" data-scroll="feature">feature</a></li>
-			<li><a href="#"class="link-to" data-scroll="offfer">we offfer</a></li>
-			<li><a href="#"class="link-to" data-scroll="about">about</a></li>
-			<li><a href="#"class="link-to" data-scroll="contact">contact</a></li>
+			<li><a href="#" class="link-to activeMobile" data-scroll="home">home</a></li>
+			<li><a href="#" class="link-to" data-scroll="feature">feature</a></li>
+			<li><a href="#" class="link-to" data-scroll="offfer">we offfer</a></li>
+			<li><a href="#" class="link-to" data-scroll="about">about</a></li>
+			<li><a href="#" class="link-to" data-scroll="contact">contact</a></li>
 			<li><a href="#"class="link-to" data-scroll="feature">pages</a>
 				<ul>
 					<li><a href="#">generic</a></li>
@@ -442,7 +442,7 @@ <h2 class="mb-3">If you need, Just drop us a line</h2>
 						<input type="text" name="subject" placeholder="Enter your subject">
 					</div>
 					<div class="col-md-6">
-						<textarea name="message" placeholder="message"></textarea>
+						<textarea name="message" placeholder="Message"></textarea>
 						<button class="btn-left btn-primary">send message<span class="lnr lnr-arrow-right"></span></button>
 					</div>
 				</div>
@@ -451,6 +451,11 @@ <h2 class="mb-3">If you need, Just drop us a line</h2>
 	</section>
 	<!-- ./contact -->
 
+	<!-- _____ up _____ -->
+	<div class="up">
+		<span class=" lnr lnr-chevron-up"></span>
+	</div>
+
 	<!-- Libraries files -->
 	<script src="js/jquery-3.7.1.min.js"></script>
 	<script src="js/owl.carousel.min.js"></script>

js/scripts.js

@@ -31,38 +31,6 @@ function scrolled() {
 }
 window.addEventListener("scroll", scrolled);
 
-let allLinks = document.querySelectorAll("ul li a.link-to");
-let block = document.querySelectorAll(".block");
-
-allLinks.forEach((el) => {
-  el.onclick = function (e) {
-    e.preventDefault();
-    allLinks.forEach((el) => el.classList.remove("active"));
-    this.classList.add("active");
-
-    console.log(this.getAttribute("data-scroll"));
-    let goScroll = document.querySelector(
-      "#" + this.getAttribute("data-scroll")
-    ).offsetTop;
-    scrollTo({
-      top: goScroll,
-      behavior: "smooth",
-    });
-  };
-});
-
-function toggleClass() {
-  block.forEach((el) => {
-    if (window.scrollY >= el.offsetTop) {
-      allLinks.forEach((el) => el.classList.remove("active"));
-      document
-        .querySelector("ul li a[data-scroll=" + el.id + "]")
-        .classList.add("active");
-    }
-  });
-}
-window.addEventListener("scroll", toggleClass);
-
 let bars = document.querySelector(".bars");
 let navSite = document.querySelector(".nav-site");
 let overlay = document.querySelector(".overlay-body");
@@ -71,11 +39,9 @@ bars.onclick = function () {
   if (this.classList.contains("active")) {
     navSite.classList.add("active");
     overlay.classList.add("active");
-    document.body.style.overflow = "hidden";
   } else {
     navSite.classList.remove("active");
     overlay.classList.remove("active");
-    document.body.style.overflow = "visible";
   }
 };
 
@@ -87,6 +53,65 @@ window.onclick = function (e) {
   }
 };
 
+let allLinks = document.querySelectorAll("ul li a.link-to");
+let block = document.querySelectorAll(".block");
+allLinks.forEach((el) => {
+  el.onclick = function (e) {
+    e.preventDefault();
+    allLinks.forEach((el) => el.classList.remove("active"));
+    this.classList.add("active");
+    scrollToElement(this);
+  };
+});
+
+function toggleClass() {
+  block.forEach((el) => {
+    if (window.scrollY >= el.offsetTop) {
+      allLinks.forEach((el) => {
+        el.classList.remove("active");
+      });
+      document
+        .querySelector("ul.menu li a[data-scroll=" + el.id + "]")
+        .classList.add("active");
+    }
+  });
+}
+window.addEventListener("scroll", toggleClass);
+let allMobileLinks = document.querySelectorAll(".nav-site ul li a.link-to");
+allMobileLinks.forEach((el) => {
+  el.onclick = function (e) {
+    e.preventDefault();
+    allMobileLinks.forEach((el) => el.classList.remove("activeMobile"));
+    this.classList.add("activeMobile");
+    scrollToElement(el);
+  };
+});
+
+function toggleClassMobile() {
+  block.forEach((el) => {
+    if (window.scrollY >= el.offsetTop) {
+      allMobileLinks.forEach((el) => {
+        el.classList.remove("activeMobile");
+      });
+      document
+        .querySelector(".nav-site ul li a[data-scroll=" + el.id + "]")
+        .classList.add("activeMobile");
+    }
+  });
+}
+window.addEventListener("scroll", toggleClassMobile);
+
+// scroll to element when click on link
+function scrollToElement(el) {
+  let goScroll = document.querySelector(
+    "#" + el.getAttribute("data-scroll")
+  ).offsetTop;
+  scrollTo({
+    top: goScroll,
+    behavior: "smooth",
+  });
+}
+
 let counterCount = document.querySelector(".counter");
 let countIncrease = document.querySelectorAll(".count");
 let stopCounter = false;
@@ -105,3 +130,16 @@ function counter(el) {
     if (el.textContent < getData) el.textContent++;
   }, 4500 / getData);
 }
+
+let goUp = document.querySelector(".up");
+
+window.onscroll = function () {
+  goUp.classList.toggle('active', this.scrollY >= 550);
+}
+
+goUp.onclick = function () {
+  scrollTo ({
+    top: 0,
+    behavior: 'smooth'
+  })
+}

scss/assets/layout/_brand.scss

@@ -3,6 +3,7 @@
 	background-color: #F9F9FF;
 	.brand-inner {
 		padding: 60px 65px;
+		text-align: center;
 	}
 	img {
 		filter: grayscale(100%);

scss/assets/layout/_header.scss

@@ -12,6 +12,9 @@
     box-shadow: -21.213px 21.213px 30px 0px rgba(158, 158, 158, 0.3);
   }
 
+  .logo {
+    display: inline-block
+  }
 
   ul {
     display: flex;
@@ -72,4 +75,4 @@
       }
     }
   }
-}
+}

scss/assets/layout/_offfer.scss

@@ -1,4 +1,4 @@
-/* _____ style offser _____ */
+/* _____ style offfer _____ */
 .offfer-img {
   box-shadow: 0px 0px 40px 0px rgba(132,144,255,0.2);
   padding: 30px;