Merge pull request #97 from hack4bengal/ark-dev

[FIX]: Footer Fixes
hack4bengal · Jun 6, 2024 · fa7919f · fa7919f
2 parents b7c95e5 + 755a6d4
commit fa7919f
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 10 deletions.
diff --git a/src/components/private/prizes/Prizes.jsx b/src/components/private/prizes/Prizes.jsx
@@ -15,17 +15,29 @@ const Prizes = () => {
         {/* <ComingSoon /> */}
 
         <div className="prizes_container">
-          <div className="second_prize prize_box">
+          <div className="second_prize prize_box desktop">
             <img src={second} className="prize_logo first_prize_logo" alt="" />
             <h1>TBD</h1>
             <p>1st Runner Up</p>
           </div>
-          <div className="first_prize prize_box">
+          <div className="first_prize prize_box desktop">
             <img src={first} className="prize_logo first_prize_logo" alt="" />
             {/* <img src={agun} className="prize_logo first_prize_logo" alt="" /> */}
             <h1>TBD</h1>
             <p>Winner</p>
           </div>
+          <div className="third_prize prize_box desktop">
+            <img src={third} className="prize_logo first_prize_logo" alt="" />
+            <h1>TBD</h1>
+            <p>2nd Runner Up</p>
+          </div>
+        </div>
+        <div className="prizes_container mobile">
+          <div className="second_prize prize_box">
+            <img src={second} className="prize_logo first_prize_logo" alt="" />
+            <h1>TBD</h1>
+            <p>1st Runner Up</p>
+          </div>
           <div className="third_prize prize_box">
             <img src={third} className="prize_logo first_prize_logo" alt="" />
             <h1>TBD</h1>

diff --git a/src/components/private/prizes/Prizes.scss b/src/components/private/prizes/Prizes.scss
@@ -18,10 +18,33 @@
     margin: 0 auto;
     margin-top: 6rem;
 
-    @media screen and (max-width: 576px) {
+    &.mobile {
+      display: none;
+    }
+
+    @media screen and (max-width: 1200px) {
       margin-top: 4rem;
       flex-direction: column;
       gap: 3rem;
+      width: 100%;
+      align-items: center;
+
+      &.mobile {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .second_prize {
+        &.desktop {
+          display: none;
+        }
+      }
+
+      .third_prize {
+        &.desktop {
+          display: none;
+        }
+      }
     }
 
     .prize_box {
@@ -30,6 +53,7 @@
       align-items: center;
       justify-content: center;
       width: 30%;
+      text-align: center;
 
       h1,
       p {
@@ -76,6 +100,7 @@
         background: linear-gradient(to right, #ffffff 0%, #554c4c 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
+
         @media screen and (max-width: 576px) {
           font-size: 2.5rem;
         }
@@ -86,6 +111,7 @@
         font-weight: 700;
       }
     }
+
     .third_prize {
       h1 {
         font-size: 2.5rem;
@@ -94,6 +120,7 @@
         background: linear-gradient(to right, #ffffff 0%, #ec8423 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
+
         @media screen and (max-width: 576px) {
           font-size: 2.5rem;
         }
@@ -105,4 +132,4 @@
       }
     }
   }
-}
+}
diff --git a/src/components/private/testimonials/Testimonials.scss b/src/components/private/testimonials/Testimonials.scss
@@ -5,6 +5,10 @@
   position: relative;
   overflow: hidden;
 
+  @media screen and (max-width: 1000px) {
+    padding-inline: 4rem;
+  }
+
   @media screen and (max-width: 576px) {
     padding: 2.4rem 1.5rem;
     margin-top: 2rem;

diff --git a/src/components/shared/footer/Footer.scss b/src/components/shared/footer/Footer.scss
@@ -63,13 +63,15 @@
           transition: all 0.2s ease-in-out;
           font-family: var(--heading-font);
           text-decoration: none;
+          z-index: 2;
 
           &:hover {
             cursor: pointer;
             color: var(--h4bred);
           }
         }
       }
+
       .footer_email {
         margin-top: 1.2rem;
         display: flex;
@@ -96,6 +98,7 @@
           font-weight: 600;
           font-size: 15px;
           transition: all 0.2s ease-in-out;
+
           &:hover {
             color: var(--h4bred);
           }
@@ -178,16 +181,22 @@
       gap: 1.2rem;
       justify-content: center;
       align-items: center;
+      transition: opacity 1.5s ease-in-out;
+      opacity: 0;
+
+      &:hover {
+        opacity: 1;
+      }
 
       a {
         color: var(--h4bred);
         text-decoration: none;
         font-weight: 600;
         font-size: 17px;
-        transition: all 1.5s ease-in-out;
-        opacity: 0;
+        transition: all 0.2s ease-in-out !important;
+
         &:hover {
-          color: var(--h4bred);
+          color: white;
         }
       }
     }
@@ -216,14 +225,17 @@
         opacity: 0;
         transform: translateX(0);
       }
+
       33.33% {
         opacity: 1;
         transform: translateX(0);
       }
+
       66.66% {
         opacity: 1;
         transform: translateX(calc(300% + 0.9rem));
       }
+
       100% {
         opacity: 0;
         transform: translateX(calc(300% + 0.9rem));
@@ -263,13 +275,14 @@
     z-index: 1;
 
     @media screen and (max-width: 850px) {
-      width: 105%;
+      width: 300%;
+      bottom: -15%;
     }
   }
 
   .footer_tram {
     position: absolute;
-    top: 200px;
+    top: 150px;
     right: 0;
     height: 334px;
     width: 720px;
@@ -292,4 +305,4 @@
       display: none;
     }
   }
-}
+}