fix(enablers-page):fix-styles-content

gtech-mulearn · Oct 20, 2023 · ba3574b · ba3574b
1 parent 7f10529
commit ba3574b
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 164 deletions.
diff --git a/src/App.js b/src/App.js
@@ -146,7 +146,7 @@ function App() {
             <Route path="/yipredirect" element={<YipForm />} />
             <Route path="/journey" element={<Journey />} />
             <Route path="/pathway" element={<Pathway />} />
-            <Route path="/EnablersPage" element={<EnablersPage />} />
+            <Route path="/enablers" element={<EnablersPage />} />
           </Route>
 
           <Route path="/level1" element={<Level1 />} />

diff --git a/src/Pages/EnablersPage/EnablersPage.module.css b/src/Pages/EnablersPage/EnablersPage.module.css
@@ -1,20 +1,20 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
-*{
-    margin: 0;
-    padding: 0;
+* {
+  margin: 0;
+  padding: 0;
 }
-::-webkit-scrollbar{
-   display: none;
+::-webkit-scrollbar {
+  display: none;
 }
 
-.EnablersPage{
-    width: 100%;
-    height: 90vh;
-    border-radius: 0 0 50px 50px;
-    background: #ECE3FF;
-    margin-bottom: 4rem;
-    background-image: url('./assests/wire.webp');
-    background-repeat: no-repeat;
-    background-position: 0 -1100px;
+.EnablersPage {
+  width: 100%;
+  padding: 2rem 0;
+  border-radius: 0 0 50px 50px;
+  background: #ece3ff;
+  margin-bottom: 4rem;
+  background-image: url("./assests/wire.webp");
+  background-repeat: no-repeat;
+  background-position: 0 -1100px;
 }
diff --git a/src/Pages/EnablersPage/components/BenefitsEnabler/BenfitsEnabler.module.css b/src/Pages/EnablersPage/components/BenefitsEnabler/BenfitsEnabler.module.css
@@ -96,7 +96,7 @@
     }
     .benefitsEnablerBenefits div div p{
         width: 250px;
-        font-size: 12px;
+        font-size: 16px;
     }
     .benefitsEnablerBenefits div div img{
         width: 60px;

diff --git a/src/Pages/EnablersPage/components/Footer/Footer.module.css b/src/Pages/EnablersPage/components/Footer/Footer.module.css
@@ -38,7 +38,7 @@
 
 @media (width<850px) {
     .footer div p{
-        font-size: 12px;
+        font-size: 16px;
     }
 
     .footer div{
@@ -55,7 +55,7 @@
         height: 80px;
     }
     .footer div p{
-        font-size: 8px;
+        font-size: 10px;
     }
 
     .footer div{
@@ -64,6 +64,6 @@
     }
 
     .footer p{
-        font-size: 8px;
+        font-size: 10px;
     }
 }
diff --git a/src/Pages/EnablersPage/components/HeroSection/EnablersHero.jsx b/src/Pages/EnablersPage/components/HeroSection/EnablersHero.jsx
@@ -7,7 +7,7 @@ export default function EnablersHero() {
     <div className={styles.enablersHero}>      
           <div>
             <p>Polish your <span>skills</span> through <br /> <span>‘µLearn’</span> to make <br /> students <span>industry ready</span> !</p>
-            <button>EXPLORE MULEARN FOR ENABLERS</button>
+            {/* <button>EXPLORE MULEARN FOR ENABLERS</button> */}
           </div> 
           <img src={hero} alt="" />          
     </div>

diff --git a/src/Pages/EnablersPage/components/HeroSection/EnablersHero.module.css b/src/Pages/EnablersPage/components/HeroSection/EnablersHero.module.css
@@ -1,98 +1,96 @@
-.enablersHero{
-    height: 100vh;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.enablersHero {
+  padding-top: 2rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.enablersHero  div{
-    margin-left: 4rem;
+.enablersHero div {
+  margin-left: 4rem;
 }
-.enablersHero  div p{
-    color: #9765FF;
-    font-family: inherit;
-    font-size: 64px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 75px;
-    padding-bottom: 2rem;
+.enablersHero div p {
+  color: #9765ff;
+  font-family: inherit;
+  font-size: 64px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 75px;
+  padding-bottom: 2rem;
 }
-.enablersHero  div p span{
-    background: url("../../assests/Dash.webp") no-repeat;
-    background-position: 0 50px;
+.enablersHero div p span {
+  background: url("../../assests/Dash.webp") no-repeat;
+  background-position: 0 50px;
 }
-.enablersHero  div button{
-    border-radius: 10px;
-    background: #FF7D40;
-    padding: 20px 30px;
-    color: #fff;
+.enablersHero div button {
+  border-radius: 10px;
+  background: #ff7d40;
+  padding: 20px 30px;
+  color: #fff;
 }
 
 @media (width<1250px) {
-    .enablersHero  div p{
-        font-size: 40px;
-    }
-    .enablersHero  div p span{
-        background-position: 0 35px;
-    }
-    .enablersHero img{
-        width: 50%;
-        /* height: 70%; */ 
-        aspect-ratio: 16/9;
-    }
-    .enablersHero  div button{
-        padding: 15px 20px;
-        font-size: 15px;
-    }
-
+  .enablersHero div p {
+    font-size: 40px;
+  }
+  .enablersHero div p span {
+    background-position: 0 35px;
+  }
+  .enablersHero img {
+    width: 50%;
+    /* height: 70%; */
+    /* aspect-ratio: 16/9; */
+  }
+  .enablersHero div button {
+    padding: 15px 20px;
+    font-size: 15px;
+  }
 }
 
-@media (width<990px){
-    .enablersHero  div p{
-        font-size: 30px;
-        line-height: 50px;
-        margin-top: 1rem;
-    }
-    .enablersHero  div p span{
-        background-position: 0 30px;
-    }
-    .enablersHero img{
-      width: 50%;
-      aspect-ratio: 16/9;
-    }
-    .enablersHero  div button{
-        font-size: 10px;
-    }
-
+@media (width<990px) {
+  .enablersHero div p {
+    font-size: 30px;
+    line-height: 50px;
+    margin-top: 1rem;
+  }
+  .enablersHero div p span {
+    background-position: 0 30px;
+  }
+  .enablersHero img {
+    width: 50%;
+    /* aspect-ratio: 16/9; */
+  }
+  .enablersHero div button {
+    font-size: 10px;
+  }
 }
 
-@media (width<800px){
-    .enablersHero  div p{
-        font-size: 20px;
-        padding-top: 2rem;
-        line-height: 50px;
-    }
-    .enablersHero  div p span{
-        background-position: 0 20px;
-    }
-    .enablersHero  div button{
-        font-size: 8px;
-    }
+@media (width<800px) {
+  .enablersHero div p {
+    font-size: 20px;
+    padding-top: 2rem;
+    line-height: 50px;
+  }
+  .enablersHero div p span {
+    background-position: 0 20px;
+  }
+  .enablersHero div button {
+    font-size: 8px;
+  }
 }
 
-@media (width<540px){
-    .enablersHero  div{
-        margin-left: 2rem;
-    }
-    .enablersHero  div p{
-        font-size: 18px;
-        line-height: 30px;
-    }
-    .enablersHero  div p span{
-        background-position: 0 20px;
-    }
-    .enablersHero  div button{
-        padding: 10px 10px;
-        font-size: 8px; 
-    }
-}
+@media (width<540px) {
+  .enablersHero div {
+    margin-left: 2rem;
+  }
+  .enablersHero div p {
+    font-size: 18px;
+    line-height: 30px;
+  }
+  .enablersHero div p span {
+    background-position: 0 20px;
+  }
+  .enablersHero div button {
+    padding: 10px 10px;
+    font-size: 8px;
+  }
+}
diff --git a/src/Pages/EnablersPage/components/Onboarding/Onboarding.module.css b/src/Pages/EnablersPage/components/Onboarding/Onboarding.module.css
@@ -48,6 +48,7 @@
     font-size: 18px;
     font-style: normal;
     font-weight: 500;
+    max-width: 50rem;
 }
 
 @media (width<750px) {
@@ -85,7 +86,7 @@
         font-size: 50px;
     }
     .onboarding .onboardingList p{
-        font-size: 10px;
+        font-size: 14px;
     }
     .onboarding .onboardingList h1  img{
         height: 30px;