From 843df2f703a4559ff7e4004d2d4bc9a75cd426b3 Mon Sep 17 00:00:00 2001
From: Aswin Asok <aswinasokofficial@gmail.com>
Date: Wed, 21 Feb 2024 04:09:37 +0530
Subject: [PATCH] image-fixed

---
 src/Pages/In50Hours/In50Hours.jsx        |   2 +
 src/Pages/In50Hours/In50Hours.module.css | 283 ++++++++++++-----------
 2 files changed, 148 insertions(+), 137 deletions(-)

diff --git a/src/Pages/In50Hours/In50Hours.jsx b/src/Pages/In50Hours/In50Hours.jsx
index 06b7141d4..6170d8b16 100644
--- a/src/Pages/In50Hours/In50Hours.jsx
+++ b/src/Pages/In50Hours/In50Hours.jsx
@@ -5,6 +5,7 @@ import Footer from "../../Components/Footer/Footer";
 import heroImage from "./heroimg.png";
 import supporters from "./supporters.png";
 import makemyPass from "./makemypass.png";
+import tsimg from "./tsimg.png";
 
 const In50Hours = () => {
   return (
@@ -75,6 +76,7 @@ const In50Hours = () => {
             <p className={styles.supportedBy}>Ticketing Partner</p>
             <img src={makemyPass} alt="" className={styles.tsImage} />{" "}
           </div>
+          <img src={tsimg} alt="" className={styles.tsSideImage} />
         </div>
         <div className={styles.steps}>
           <div className={styles.step}>
diff --git a/src/Pages/In50Hours/In50Hours.module.css b/src/Pages/In50Hours/In50Hours.module.css
index f16bddbd7..f5b58b3ec 100644
--- a/src/Pages/In50Hours/In50Hours.module.css
+++ b/src/Pages/In50Hours/In50Hours.module.css
@@ -1,212 +1,221 @@
 .fsImage {
-  max-width: 45rem;
-  width: 100%;
-  object-fit: cover;
+    max-width: 45rem;
+    width: 100%;
+    object-fit: cover;
 }
 
 .mainContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .firstSectionContainer {
-  display: flex;
-  flex-direction: row-reverse;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 2rem;
-  color: #414d59;
-  max-width: 1300px;
-  width: 100%;
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    color: #414d59;
+    max-width: 1300px;
+    width: 100%;
 }
 
 .fsHeading {
-  font-size: 4.5rem;
-  font-weight: 600;
-  text-align: left;
-  font-family: "Poppins", sans-serif;
+    font-size: 4.5rem;
+    font-weight: 600;
+    text-align: left;
+    font-family: "Poppins", sans-serif;
 }
 
 .fsHeading span {
-  color: #0098ca;
+    color: #0098ca;
 }
 
 .fsTagline {
-  font-size: 1rem;
-  font-weight: 400;
-  text-align: left;
-  font-family: "Poppins", sans-serif;
-  margin-top: -1rem;
-  max-width: 30rem;
+    font-size: 1rem;
+    font-weight: 400;
+    text-align: left;
+    font-family: "Poppins", sans-serif;
+    margin-top: -1rem;
+    max-width: 30rem;
 }
 
 .supporters {
-  width: 18rem;
+    width: 18rem;
 }
 
 .supportedBy {
-  font-size: 1.05rem;
-  font-weight: 600;
-  text-align: left;
-  font-family: "Poppins", sans-serif;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
+    font-size: 1.05rem;
+    font-weight: 600;
+    text-align: left;
+    font-family: "Poppins", sans-serif;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
 }
 
 .steps {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 0 2rem;
-  color: #414d59;
-  max-width: 1300px;
-  width: 100%;
-  margin: auto;
-  flex-wrap: wrap;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    color: #414d59;
+    max-width: 1300px;
+    width: 100%;
+    margin: auto;
+    flex-wrap: wrap;
 }
 
 .step {
-  width: 20rem;
-  margin: 1rem;
-  margin-top: 0;
+    width: 20rem;
+    margin: 1rem;
+    margin-top: 0;
 }
 
 .stepHeading {
-  font-size: 1.5rem;
-  font-weight: 600;
-  text-align: left;
-  font-family: "Poppins", sans-serif;
-  margin-top: 1rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+    text-align: left;
+    font-family: "Poppins", sans-serif;
+    margin-top: 1rem;
 }
 
 .stepHeading span {
-  color: #0098ca;
+    color: #0098ca;
 }
 
 .stepTagline {
-  font-size: 1rem;
-  font-weight: 400;
-  text-align: left;
-  font-family: "Poppins", sans-serif;
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
+    font-size: 1rem;
+    font-weight: 400;
+    text-align: left;
+    font-family: "Poppins", sans-serif;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
 }
 
 .tsHeading {
-  font-size: 3.25rem;
-  font-weight: 700;
-  text-align: left;
-  font-family: "Poppins", sans-serif;
+    font-size: 3.25rem;
+    font-weight: 700;
+    text-align: left;
+    font-family: "Poppins", sans-serif;
 }
 
 .tsHeading span {
-  color: #0098ca;
+    color: #0098ca;
 }
 
 .tsTagline {
-  font-size: 1rem;
-  font-weight: 400;
-  text-align: left;
-  font-family: "Poppins", sans-serif;
-  margin-bottom: 1rem;
-  max-width: 30rem;
+    font-size: 1rem;
+    font-weight: 400;
+    text-align: left;
+    font-family: "Poppins", sans-serif;
+    margin-bottom: 1rem;
+    max-width: 30rem;
 }
 
 .thirdSectionContainer {
-  max-width: 1300px;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 2rem;
-  color: #414d59;
-  margin: auto;
+    max-width: 1300px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    color: #414d59;
+    margin: auto;
 }
 
 .register {
-  background-color: #0098ca;
-  color: #ffffff;
-  margin-top: 1rem;
-  padding: 0.5rem 1.5rem;
-  border-radius: 0.5rem;
+    background-color: #0098ca;
+    color: #ffffff;
+    margin-top: 1rem;
+    padding: 0.5rem 1.5rem;
+    border-radius: 0.5rem;
 }
 
 .tsImage {
-  width: 8rem;
+    width: 8rem;
 }
 
 @media (max-width: 1240px) {
-  .firstSectionContainer {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .fsImage {
-    max-width: 30rem;
-  }
+    .firstSectionContainer {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .fsImage {
+        max-width: 30rem;
+    }
 
-  .fsHeading {
-    font-size: 3.75rem;
-  }
+    .fsHeading {
+        font-size: 3.75rem;
+    }
 
-  .fsTagline {
-    font-size: 0.875rem;
-  }
+    .fsTagline {
+        font-size: 0.875rem;
+    }
 
-  .stepHeading {
-    font-size: 1.25rem;
-  }
+    .stepHeading {
+        font-size: 1.25rem;
+    }
 
-  .stepTagline {
-    font-size: 0.875rem;
-  }
+    .stepTagline {
+        font-size: 0.875rem;
+    }
 }
 
 @media (max-width: 728px) {
-  .fsImage {
-    width: 20rem;
-  }
+    .fsImage {
+        width: 20rem;
+    }
 
-  .tsImage {
-    width: 5rem;
-  }
+    .tsImage {
+        width: 5rem;
+    }
 
-  .fsHeading {
-    font-size: 3rem;
-  }
+    .fsHeading {
+        font-size: 3rem;
+    }
 
-  .fsTagline {
-    font-size: 0.875rem;
-    margin-top: 1rem;
-  }
+    .fsTagline {
+        font-size: 0.875rem;
+        margin-top: 1rem;
+    }
 
-  .firstSectionContainer {
-    flex-direction: column;
-    align-items: flex-start;
-  }
+    .firstSectionContainer {
+        flex-direction: column;
+        align-items: flex-start;
+    }
 
-  .steps {
-    justify-content: flex-start;
-  }
+    .steps {
+        justify-content: flex-start;
+    }
 
-  .stepHeading {
-    font-size: 1.25rem;
-  }
+    .stepHeading {
+        font-size: 1.25rem;
+    }
 
-  .stepTagline {
-    font-size: 0.875rem;
-  }
+    .stepTagline {
+        font-size: 0.875rem;
+    }
 
-  .tsHeading {
-    font-size: 2.25rem;
-  }
+    .tsHeading {
+        font-size: 2.25rem;
+    }
 
-  .tsTagline {
-    font-size: 0.875rem;
-  }
+    .tsTagline {
+        font-size: 0.875rem;
+    }
+}
+
+.tsSideImage {
+    width: 30rem;
+}
+
+@media (max-width: 728px) {
+    .tsSideImage {
+        width: 20rem;
+    }
 }