From aad9fdcc5ca8b35bc48b9ffa11650493cc343c84 Mon Sep 17 00:00:00 2001
From: Afridi Akbar Ifty <afridiakbarifty@gmail.com>
Date: Sat, 9 Nov 2024 13:17:14 +0600
Subject: [PATCH] Loading and minor update

---
 index.html |  91 ++++++++++++++---------
 script.js  |  33 ++++++++-
 style.css  | 214 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 299 insertions(+), 39 deletions(-)
diff --git a/index.html b/index.html
index 9d5a70f..9ae9e4a 100644
--- a/index.html
+++ b/index.html
@@ -20,20 +20,25 @@
     />
   </head>
   <body>
+    <div id="loader">
+      <h1>ENVIRONMENTS</h1>
+      <h1>EXPERIENCES</h1>
+      <h1>CONTENT</h1>
+    </div>
     <div id="fixed-image"></div>
-    <div id="full-scr"></div>
+    <!-- <div id="full-scr"></div> -->
     <div id="main">
       <div id="page1">
         <!-- Nav Div -->
-        <div id="nav">
-          <h2>Elara <br />Studio</h2>
+        <nav id="nav">
+          <h2 >Elara <br />Studio</h2>
           <div class="nav-part2">
             <h4><a href="#">Work</a></h4>
             <h4><a href="#">Studio</a></h4>
             <h4><a href="#">Contact</a></h4>
           </div>
           <h3>Menu</h3>
-        </div>
+        </nav>
         <!-- Center Part  -->
         <div id="center">
           <div id="left">
@@ -108,34 +113,40 @@ <h1>
           <div id="effect2"></div> -->
         </div>
       </div>
-      <div id="page3">
-        <div id="elem-container">
-          <div class="elem" data-image="./assets/Images/Modern-Minimalism.jpg">
-            <div class="overlay"></div>
-            <h2>Modern Minimalism</h2>
-          </div>
-          <div class="elem" data-image="./assets/Images/Rustic-Revival.jpg">
-            <div class="overlay"></div>
-            <h2>Rustic Revival</h2>
-          </div>
-          <div class="elem" data-image="./assets/Images/Modern-Elegance.jpg">
-            <div class="overlay"></div>
-            <h2>Modern Elegance</h2>
-          </div>
-          <div class="elem" data-image="./assets/Images/Bohemian-Haven.jpg">
-            <div class="overlay"></div>
-            <h2>Bohemian Haven</h2>
-          </div>
-          <div
-            class="elem"
-            data-image="./assets/Images/Art-Deco-Extravaganza.jpg"
-          >
-            <div class="overlay"></div>
-            <h2>Art Deco Extravaganza</h2>
-          </div>
-          <div class="elem" data-image="./assets/Images/Tropical-Paradise.jpg">
-            <div class="overlay"></div>
-            <h2>Tropical Paradise</h2>
+      <div>
+        <div  id="page3">
+          <div id="elem-container">
+            <div
+              id="elem1"
+              class="elem"
+              data-image="./assets/Images/Modern-Minimalism.jpg"
+            >
+              <div class="overlay"></div>
+              <h2>Modern Minimalism</h2>
+            </div>
+            <div  class="elem" data-image="./assets/Images/Rustic-Revival.jpg">
+              <div class="overlay"></div>
+              <h2>Rustic Revival</h2>
+            </div>
+            <div class="elem" data-image="./assets/Images/Modern-Elegance.jpg">
+              <div class="overlay"></div>
+              <h2>Modern Elegance</h2>
+            </div>
+            <div class="elem" data-image="./assets/Images/Bohemian-Haven.jpg">
+              <div class="overlay"></div>
+              <h2>Bohemian Haven</h2>
+            </div>
+            <div
+              class="elem"
+              data-image="./assets/Images/Art-Deco-Extravaganza.jpg"
+            >
+              <div class="overlay"></div>
+              <h2>Art Deco Extravaganza</h2>
+            </div>
+            <div class="elem" data-image="./assets/Images/Tropical-Paradise.jpg">
+              <div class="overlay"></div>
+              <h2>Tropical Paradise</h2>
+            </div>
           </div>
         </div>
       </div>
@@ -153,11 +164,23 @@ <h2>Tropical Paradise</h2>
         </div>
       </div> -->
       <div id="page5"></div>
+      <div id="full-scr">
+        <div id="full-div1"></div>
+      </div>
     </div>
-    
+
     <!-- Footer -->
     <div id="footer">
-      <div class="visme_d" data-title="Untitled Project" data-url="epr4mnn1-untitled-project?fullPage=true" data-domain="forms" data-full-page="true" data-min-height="100vh" data-form-id="32740"></div><script src="https://static-bundles.visme.co/forms/vismeforms-embed.js"></script>
+      <div 
+        class="visme_d"
+        data-title="Untitled Project"
+        data-url="epr4mnn1-untitled-project?fullPage=true"
+        data-domain="forms"
+        data-full-page="true"
+        data-min-height="100vh"
+        data-form-id="32740"
+      ></div>
+      <script src="https://static-bundles.visme.co/forms/vismeforms-embed.js"></script>
       <div id="footer-div"></div>
       <h1>ELARA</h1>
       <div id="footer-bottom"></div>
diff --git a/script.js b/script.js
index 7d84ab3..2f656df 100644
--- a/script.js
+++ b/script.js
@@ -31,5 +31,34 @@ function swiperAnimation() {
    
   });
 }
-swiperAnimation();
-page4Animation();
+
+function menuAnimation() {
+
+  var menu = document.querySelector("nav h3")
+  var full = document.querySelector("#full-scr")
+  var navimg = document.querySelector("nav h2")
+  var flag = 0
+  menu.addEventListener("click", function () {
+      if (flag == 0) {
+          full.style.top = 0
+          navimg.style.opacity = 0
+          flag = 1
+      } else {
+          full.style.top = "-100%"
+          navimg.style.opacity = 1
+          flag = 0
+      }
+  })
+}
+
+function loaderAnimation() {
+  var loader = document.querySelector("#loader")
+  setTimeout(function () {
+      loader.style.top = "-100%"
+  }, 4200)
+}
+
+swiperAnimation()
+page4Animation()
+menuAnimation()
+loaderAnimation()
\ No newline at end of file
diff --git a/style.css b/style.css
index 9090907..e4b4968 100644
--- a/style.css
+++ b/style.css
@@ -18,6 +18,7 @@ html,
 body {
   height: 100%;
   width: 100%;
+  scroll-behavior: smooth;
 }
 #main {
   /* background-color: black; */
@@ -37,6 +38,8 @@ body {
   width: 100%;
   display: flex;
   align-items: center;
+  position: relative;
+  z-index: 100;
   justify-content: space-between;
 }
 
@@ -345,7 +348,7 @@ body {
   width: 30vw;
   border-radius: 10px;
   position: fixed;
-  z-index: 9;
+  z-index: 99;
   left: 50%;
   top: 25%;
   display: none;
@@ -428,6 +431,16 @@ body {
   position: fixed;
   z-index: 99;
   top: -100%;
+  transition: all ease 0.5s;
+}
+
+#full-div1 {
+  height: 50%;
+  width: 100%;
+  background-color: #EFEAE3;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+
 }
 
 @media (max-width: 600px) {
@@ -437,11 +450,16 @@ body {
     padding: 0 5vw;
   }
 
-  #nav {
+  nav {
+    padding: 8vw 5vw;
+    background-color: #EFEAE3;
+    /* padding: 0 5vw; */
+}
+  /* #nav {
     padding: 8vw 0vw;
     position: relative;
     z-index: 100;
-  }
+  } */
 
   .nav-part2 {
     display: none;
@@ -455,4 +473,194 @@ body {
     font-size: 4vw;
     padding-left: 10vw;
   }
+  #center {
+    height: 62vh;
+    width: 100%;
+    /* background-color: orange; */
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    border-bottom: 1px solid #0000003c;
+    padding: 7vw 5vw;
+    padding-bottom: 10vw;
+    flex-direction: column-reverse;
+    position: relative;
+    z-index: 9;
+}
+
+#left h3 {
+    width: 80%;
+    font-size: 5.5vw;
+    line-height: 6vw;
+}
+
+#center h1 {
+    font-size: 17vw;
+    text-align: right;
+    line-height: 15vw;
+}
+
+#page1 video {
+    position: relative;
+    border-radius: 15px;
+    margin-top: 4vw;
+    height: 70vh;
+    object-fit: cover;
+    object-position: center;
+    width: 92%;
+    margin-left: 4%;
+}
+
+#page2 {
+    min-height: 100vh;
+    width: 100%;
+    background-color: #EFEAE3;
+    padding: 8vw 0;
+    position: relative;
+}
+
+#moving-text {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+#moving-text::-webkit-scrollbar {
+    display: none;
+}
+
+.con {
+    white-space: nowrap;
+    display: inline-block;
+    animation-name: move;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+#moving-text h1 {
+    font-size: 15vw;
+    /* background-color: lightblue; */
+    display: inline-block;
+}
+
+#dot {
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: #FE320A;
+    margin: 2vw 2vw;
+}
+
+#page2-bottom {
+    height: 90vh;
+    width: 100%;
+    /* background-color: aliceblue; */
+    padding: 10vw 4vw;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    position: relative;
+    flex-direction: column;
+    z-index: 9;
 }
+
+#page2-bottom h1 {
+    font-size: 8.2vw;
+    width: 100%;
+    line-height: 9vw;
+}
+
+#bottom-part2 {
+    width: 70%;
+    /* background-color: aqua; */
+}
+
+#bottom-part2 img {
+    width: 100%;
+    border-radius: 10px;
+}
+
+#bottom-part2 p {
+    font-weight: 200;
+    margin-top: 2vw;
+    font-size: 3vw;
+}
+
+#page2 #effect {
+    height: 62vw;
+    width: 62vw;
+    position: absolute;
+    border-radius: 50%;
+    background: linear-gradient(to top right, #ff2d03, #ff5c0b);
+    /* background: linear-gradient(to top right,red,blue); */
+
+
+    top: 58%;
+    left: 25%;
+    filter: blur(20px);
+    animation-name: effect;
+    animation-duration: 6s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-timing-function: ease-in-out;
+
+}
+
+}
+
+
+/* loader */
+#loader{
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  transition: all ease 0.6s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#loader h1{
+  font-size: 4vw;
+  color: transparent;
+  background: linear-gradient(to right,orange,orangered);
+  background-clip: text;
+  position: absolute;
+  opacity: 0;
+  animation-name: load;
+  animation-duration: 1s;
+  animation-delay: 1s;
+  animation-timing-function: linear;
+}
+#loader h1:nth-child(2){
+  animation-delay: 2s;
+}
+#loader h1:nth-child(3){
+  animation-delay: 3s;
+}
+
+@keyframes load {
+  0%{
+      opacity: 0;
+  }
+  10%{
+      opacity: 1;
+  }
+  90%{
+      opacity: 1;
+  }
+  100%{
+      opacity: 0;
+  }
+}
+
+@media (max-width:600px) {
+  #loader h1{
+      font-size: 9vw;
+    
+  }
+}
\ No newline at end of file
