final images added

Nandhi711 · Jun 18, 2023 · a8505d5 · a8505d5
1 parent a7dcf6f
commit a8505d5
Show file tree

Hide file tree

Showing 3 changed files with 458 additions and 23 deletions.
diff --git a/css/index.html b/css/index.html
@@ -14,8 +14,37 @@
         <link rel="stylesheet" href="style.css">
     </head>
     <body>
+
+
+
+        <!-- Page Loader Start -->
+        <div class="page-loader">
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+
+
+
+        <!-- Page Loader End -->
+        <!-- Background Circles Start-->
+        <div class="bg-circles">
+            <div class="circle-1"></div>
+            <div class="circle-2"></div>
+            <div class="circle-3"></div>
+            <div class="circle-4"></div>
+
+        </div>
+
+        <!-- background Circle ends -->
+
+        <!-- Overlay Start-->
+        <div class="overlay">
+
+        </div>
+        <!-- Overlay End-->
         <!--Main start  -->
-        <div class ="main ">
+        <div class ="main hidden ">
 
                 <!--Header Start -->
                 <header class="header">
@@ -24,32 +53,34 @@
                             <button type="button" class="nav-toggle">
                                 <span></span>
                             </button>
-                            <nav class="nav-inner">
+                            <nav class="nav">
+                                <nav class="nav-inner">
                                 <ul>
-                                    <li><a href="#" class="nav-item">Home </a></li>
-                                    <li><a href="#" class="nav-item">About </a></li>
-                                    <li><a href="#" class="nav-item">portfolio</a></li>
-                                    <li><a href="#" class="nav-item"> contact</a></li>
+                                    <li><a href="#Home" class="nav-item link-item">Home </a></li>
+                                    <li><a href="#About" class="nav-item link-item">About </a></li>
+                                    <li><a href="#portfolio" class="nav-item link-item">portfolio</a></li>
+                                    <li><a href="#contact" class="nav-item link-item"> contact</a></li>
 
 
                                 </ul>
 
                             </nav>
+                            </nav>
                         </div>
                     </div>
                 </header>
 
                 <!-- header End -->
                  <!-- Home section start -->
-                 <section class="home-section align-items-center hidden ">
+                 <section class="home-section align-items-center  " id="Home">
                     <div class="container">
                         <div class="row align-items-center">
                             <div class="home-text">
                                 <p>Hello This is  </p>
                                 <h1>Manoj</h1>
                                 <h2> dev</h2>
-                                <a href="#" class="btn"> more about me </a>
-                                <a href="#" class="btn"> portfolio </a>
+                                <a href="#About" class="btn link-item" > more about me </a>
+                                <a href="#portfolio" class="btn link-item"> portfolio </a>
 
 
 
@@ -69,7 +100,7 @@ <h2> dev</h2>
                  <!-- Home section end -->
 
                  <!--     About section start  -->
-                 <section class="about-section sec-padding hidden">
+                 <section class="about-section sec-padding " id="About">
                     <div class="container">
                         <div class="row">
                             <div class="section-title">
@@ -265,8 +296,8 @@ <h4>
 
 
                                 <!-- experience ends -->
-                                <a href="#" class="btn"> downlaod cv</a>
-                                <a href="#" class="btn"> Contact me</a>
+                                <a href="cv.pdf" target = "_blank" class="btn"> downlaod cv</a>
+                                <a href="#contact" class="btn link-item"> Contact me</a>
 
 
 
@@ -291,7 +322,7 @@ <h4>
 
                  <!--  Portifolio Section start -->
 
-                 <section class="portfolio-section sec-padding hidden">
+                 <section class="portfolio-section sec-padding " id="portfolio">
                     <div class="container">
                         <div class="row">
                             <div class="section-title">
@@ -464,7 +495,7 @@ <h3 class="portfolio-item-title"> education courser website</h3>
                  </section>
                  <!--  Portifolio Section end -->
                  <!-- Contact Section start -->
-                 <section class="contact-section sec-padding hidden">
+                 <section class="contact-section sec-padding " id="contact">
                     <div class="container">
                         <div class="row">
                             <div class="section-title">

diff --git a/css/script.js b/css/script.js
@@ -1,3 +1,71 @@
+window.addEventListener("load", ()=>{
+    document.querySelector(".main").classList.remove("hidden");
+    document.querySelector(".home-section").classList.add("active");
+    /* ------- Page Loader ----------- */
+    document.querySelector(".page-loader").classList.add("fade-out");
+    setTimeout(() =>{
+        document.querySelector(".page-loader").style.display = "none";
+    },600);
+
+});
+
+
+
+
+//*---------Toggle nav bar-----------*/
+const navToggler = document.querySelector(".nav-toggle");
+navToggler.addEventListener("click",() =>{
+    hideSection();
+    toggleNavbar();
+    document.body.classList.toggle("hide-scrolling");
+})
+function hideSection(){
+    document.querySelector("section.active").classList.toggle("fade-out");
+}
+function toggleNavbar(){
+    document.querySelector(".header").classList.toggle("active");
+
+}
+
+
+/* --------------- Active Section -------------------*/
+
+document.addEventListener("click" ,(e) =>{
+    if(e.target.classList.contains("link-item")&& e.target.hash !==""){
+        //actiavte the overlay to prevent the multiple clicks 
+
+        document.querySelector(".overlay").classList.add("active");
+        navToggler.classList.add("hide");
+        if(e.target.classList.contains("nav-item")){
+            toggleNavbar();
+        }
+        else{
+            hideSection();
+            document.body.classList.add("hide-scrolling")
+        }
+        setTimeout(() =>{
+            document.querySelector("section.active").classList.remove("active","fade-out");
+            document.querySelector(e.target.hash).classList.add("active");
+            window.scrollTo(0,0);
+            document.body.classList.remove("hide-scrolling");
+            navToggler.classList.remove("hide");
+            document.querySelector(".overlay").classList.remove("active");
+
+
+
+
+        },500);
+
+
+
+
+    }
+})
+
+
+
+
+
 /* ---------------- About tabs ------------*/
 const tabsContainer = document.querySelector(".about-tabs"),
 aboutSection = document.querySelector(".about-section");
@@ -52,4 +120,4 @@ function portfolioItemDetails(portfolioItem){
 
     document.querySelector(".pp-body").innerHTML =
     portfolioItem.querySelector(".portfolio-item-details").innerHTML;
-}
+}