added sliding transition to button

5 files changed, 160 insertions, 46 deletions

diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
index 07f7441..b848510 100644
--- a/src/components/Carousel.astro
+++ b/src/components/Carousel.astro
@@ -52,9 +52,9 @@ const carouselSlide: Carousel[] = [
 
 ---
   <div class="gallery-wrap">
-    <svg id = "backBtn" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" {...props}>
+    <!-- <svg id = "backBtn" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" {...props}>
       <path fill="black" d="M19.793 3.441v17.118a1.243 1.243 0 0 1-1.83 1.19L3.329 12.991a1.184 1.184 0 0 1 0-1.982l14.634-8.758a1.243 1.243 0 0 1 1.83 1.19" />
-    </svg>
+    </svg> -->
     <div class="gallery">
       <div>{
         carouselSlide.slice(0, 4).map((slide) => {
@@ -80,9 +80,9 @@ const carouselSlide: Carousel[] = [
       }
       </div>
     </div>
-    <svg id = "nextBtn" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" {...props}>
+    <!-- <svg id = "nextBtn" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" {...props}>
       <path fill="black" d="M19.793 3.441v17.118a1.243 1.243 0 0 1-1.83 1.19L3.329 12.991a1.184 1.184 0 0 1 0-1.982l14.634-8.758a1.243 1.243 0 0 1 1.83 1.19" />
-    </svg>
+    </svg> -->
 </div>
 
 
@@ -123,7 +123,7 @@ const carouselSlide: Carousel[] = [
     align-items: center; 
   }
 
-  #nextBtn{
+  /* #nextBtn{
     transform: rotateY(180deg);
   }
 
@@ -131,15 +131,15 @@ const carouselSlide: Carousel[] = [
     width: 3vh;
     cursor: pointer;
     margin: 0 15vh;
-  }
+  } */
 
   @media screen and (max-width: 868px){
     .gallery div{
       grid-gap: 20px;
     }
-    #backBtn, #nextBtn{
+    /* #backBtn, #nextBtn{
       margin: 0;
-    }
+    } */
   }
 
 </style>
@@ -147,8 +147,8 @@ const carouselSlide: Carousel[] = [
 <script>
 
   let scrollContainer : HTMLElement | null = document.querySelector(".gallery");
-  let nextBtn : HTMLElement | null = document.getElementById("nextBtn");
-  let backBtn : HTMLElement | null = document.getElementById("backBtn");
+  // let nextBtn : HTMLElement | null = document.getElementById("nextBtn");
+  // let backBtn : HTMLElement | null = document.getElementById("backBtn");
 
   scrollContainer?.addEventListener("wheel", (e)=>{
     e.preventDefault();
@@ -156,19 +156,19 @@ const carouselSlide: Carousel[] = [
     scrollContainer.style.scrollBehavior = "auto";
   });
 
-  nextBtn?.addEventListener("click", ()=>{
-    if(scrollContainer){
-      scrollContainer.style.scrollBehavior = "smooth";
-      scrollContainer.scrollLeft += 900;
-    }
-  });
+  // nextBtn?.addEventListener("click", ()=>{
+  //   if(scrollContainer){
+  //     scrollContainer.style.scrollBehavior = "smooth";
+  //     scrollContainer.scrollLeft += 900;
+  //   }
+  // });
   
-  backBtn?.addEventListener("click", ()=>{
-    if(scrollContainer){
-      scrollContainer.style.scrollBehavior = "smooth";
-      scrollContainer.scrollLeft -= 900;
-      console.log(scrollContainer.scrollLeft);
-    }
-  });
+  // backBtn?.addEventListener("click", ()=>{
+  //   if(scrollContainer){
+  //     scrollContainer.style.scrollBehavior = "smooth";
+  //     scrollContainer.scrollLeft -= 900;
+  //     console.log(scrollContainer.scrollLeft);
+  //   }
+  // });
 
 </script>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index ec91fcc..9961c8c 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -9,7 +9,10 @@ import 'bootstrap/dist/css/bootstrap.css'
     <div class="registration">
         <h2 class="hack-heading" style="color: #000080ff;">IIT Bombay-FOSSEE-GIS/OSHW, IITTNiF &amp; <br> ICFOSS presents</h2>
         <div class="hack-img"><img src="https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/right-img.png" id="right-img"></div>
-        <div class="hack-button"> <a href="#register"><button class="btn-register slide-right">Register</button></a></div>
+        <div class="hack-button">
+            <div id="slide"></div>
+            <a href="#register">Register</a>
+        </div>
     </div>
 </div>
 
@@ -24,7 +27,7 @@ import 'bootstrap/dist/css/bootstrap.css'
         padding: 1vh;
         background-color: rgb(252, 230, 188);
         animation: zoomIn 3s; 
-        z-index: 10;
+        z-index: 1000;
     }
     .map img {
         height: 60vh;
@@ -52,17 +55,8 @@ import 'bootstrap/dist/css/bootstrap.css'
         width: 100%;
     }
 
-    .hack-button{
-        /* background-color: orange; */
-        margin: 2vh;
-        width: 50vw;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 1vh 2vw;
-    }
-
-    .btn-register{
+    
+    /* .btn-register{
         background-color: #000080ff;
         width: 30vw;
         color: white;
@@ -74,7 +68,66 @@ import 'bootstrap/dist/css/bootstrap.css'
         cursor: pointer;
         border-radius: 12px;
         font-family: "Lucida Console", Monaco, 
+    } */
+    
+    /* .hack-button{
+        margin: 2vh;
+        width: 50vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 1vh 2vw;
+    } */
+    .hack-button {
+        display: flex;
+        flex-direction: column;
+        padding: 1vh 2vw;
+        z-index: 0;
+        width: 20vw;
+        max-width: 40vw;
+        border: 2px solid blue;
+        margin: 20px 20px 20px 20px;
+        color: blue;
+        background-color: white;
+        text-decoration: none;
+        font-size: 2vh;
+        letter-spacing: 1.5px;
+        align-items: center;
+        justify-content: center;
+        font-weight: 500;
+        overflow: hidden;
+    }
+
+    .hack-button {
+        position: relative;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .hack-button a {
+        position: relative;
+        text-decoration: none;
+        transition: all .35s ease-Out;
     }
+
+    #slide {
+        width: 100%;
+        height: 100%;
+        left: -400px ;
+        background: #BFC0C0;
+        position: absolute;
+        bottom: 0;
+        transition: all .35s ease-Out;
+    }
+
+    .hack-button:hover #slide {
+        left: 0;
+        background-color: rgb(6, 6, 77);
+    }
+    .hack-button:hover a{
+        color: white;
+    }
+
     @keyframes zoomIn {
         from {
             transform: scale(1.3);
@@ -97,7 +150,7 @@ import 'bootstrap/dist/css/bootstrap.css'
             font-size: 3vh;
         }
 
-        .hack-button button{
+        .hack-button{
             width: 60vw;
         }
 
diff --git a/src/components/HomeBody.astro b/src/components/HomeBody.astro
index 6e295a2..8a23718 100644
--- a/src/components/HomeBody.astro
+++ b/src/components/HomeBody.astro
@@ -109,7 +109,12 @@ const coreteam: CoreTeam[] = [
 <div class="registration-container" id ="register">
     <h1 class="intro">Registration</h1>
     <p>Please click on the following button to register yourself for the Hackathon</p>
-    <div class="hack-button"> <a href="https://forms.gle/aVopwiwmRM35FXQT8" target="_blank"><button class="btn-register slide-right">Register</button></a></div>
+    <div class="regBtnContainer">
+        <div class="hack-button">
+            <div id="slide"></div>
+            <a href="https://forms.gle/aVopwiwmRM35FXQT8" target="_blank">Register</a>
+        </div>
+    </div>
 </div>
 
 
@@ -236,10 +241,60 @@ const coreteam: CoreTeam[] = [
         font-size: 2.5vh;
     }
 
-    .hack-button{
-        text-align: center;
-        display: block;
+    .regBtnContainer{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .hack-button {
+        display: flex;
+        flex-direction: column;
         padding: 1vh 2vw;
+        z-index: 0;
+        width: 20vw;
+        max-width: 40vw;
+        border: 2px solid blue;
+        margin: 20px 20px 20px 20px;
+        color: blue;
+        background-color: white;
+        text-decoration: none;
+        font-size: 2vh;
+        letter-spacing: 1.5px;
+        align-items: center;
+        justify-content: center;
+        font-weight: 500;
+        overflow: hidden;
+    }
+
+    .hack-button {
+        position: relative;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .hack-button a {
+        position: relative;
+        text-decoration: none;
+        transition: all .35s ease-Out;
+    }
+
+    #slide {
+        width: 100%;
+        height: 100%;
+        left: -400px ;
+        background: #BFC0C0;
+        position: absolute;
+        bottom: 0;
+        transition: all .35s ease-Out;
+    }
+
+    .hack-button:hover #slide {
+        left: 0;
+        background-color: rgb(6, 6, 77);
+    }
+    .hack-button:hover a{
+        color: white;
     }
 
     .pno-container{
@@ -332,7 +387,7 @@ const coreteam: CoreTeam[] = [
         align-items: center;
         border: 1px solid black;
         padding: 2vh 4vw;
-        border-radius: 21px;
+        border-radius: 11px;
         margin: 2vh;
         width: 45%;
     }
@@ -341,6 +396,7 @@ const coreteam: CoreTeam[] = [
         font-family: 'Roboto', sans-serif;
         font-weight: 600;
         font-size: 2.7vh;
+        text-align: center;
     }
     .teach p{
         font-size: 2.4vh;
@@ -357,7 +413,7 @@ const coreteam: CoreTeam[] = [
             flex-direction: column;
         }
         .teach{
-            width: 90%;
+            width: 100%;
         }
         .teach h4{
             text-align: center;
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index ea76d9f..1f492d2 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -47,19 +47,20 @@ const routes : Routes[] = [
       position: fixed;
       right: 0%;
       display: none;
+      z-index: 1000;
     }
     .off-screen-menu{
       background-color: orange;
       height: 45vh;
       display: none;
       width: 100%;
-      z-index: 5;
       top: 20%;
       position: sticky;
       right: -450px;
       flex-direction: column;
       justify-content: center;
       font-size: 3rem;
+      z-index: 1000;
     }
 
     .off-screen-menu a{
@@ -69,7 +70,6 @@ const routes : Routes[] = [
       /* color: blue; */
       font-weight: 500;
       padding: 1vh 4vh;
-      z-index: 1001;
     }
     .off-screen-menu a:hover{
       background-color: rgb(5, 5, 95);
@@ -88,7 +88,7 @@ const routes : Routes[] = [
       background-color: orange;
       padding: 1rem;
       width: 100vw;
-      z-index: 10;
+      z-index: 1000;
     }
     .ham-menu{
       height: 40px;
diff --git a/src/components/TopBar.astro b/src/components/TopBar.astro
index e3bfe70..4d27419 100644
--- a/src/components/TopBar.astro
+++ b/src/components/TopBar.astro
@@ -53,10 +53,15 @@ import 'bootstrap/dist/css/bootstrap.css'
     a .big-img{
       cursor:auto;
     }
+
+    .banner-content{
+      z-index: 1000;
+    }
     .banner-content div div{
       align-items: center;
     }
 
+
     img{
       width: 14vh;