Fixes made from requested changes

Technigo · Jun 20, 2024 · 7e89f91 · 7e89f91
1 parent f0e6f0a
commit 7e89f91
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 58 deletions.
diff --git a/src/assets/footerImages/tablet-logo.png b/src/assets/footerImages/tablet-logo.png
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -10,7 +10,7 @@ export const Footer = () => {
   return (
     <FooterContent>
       <FooterText>
-        <MobileLogo alt="Company logo" />
+        <Logo alt="Company logo" />
         <h1>
           Learn, Laugh, and<br></br>Connect on the Slopes!
         </h1>
@@ -36,19 +36,16 @@ export const Footer = () => {
 
 const FooterContent = styled.div`
   background-color: #234059;
-  height: 550px;
+  height: 400px;
   color: #ffc8dd;
   padding-top: 80px;
 
-  @media (min-width 600px) and (max-width: 1199px) {
+  @media (min-width 600px) {
     margin: 80px 32px 80 px 32px;
   }
-
-  @media (min-width: 1200px) {
-  }
 `;
 
-const MobileLogo = styled.div`
+const Logo = styled.div`
   background-image: url(${mobileLogo});
   background-repeat: no-repeat;
   height: 40px;
@@ -57,6 +54,8 @@ const MobileLogo = styled.div`
 
   @media (min-width: 600 px) and (max-width: 1199px) {
     background-image: url(${tabletLogo});
+    height: 60px;
+    width: 140px;
     padding-top: 35px;
   }
   @media (min-width: 1200px) {
@@ -72,6 +71,7 @@ const FooterText = styled.div`
   padding-right: 32px;
 
   h1 {
+    margin-top: 0px;
     font-family: Philosopher;
     font-size: 30px;
     font-style: normal;
@@ -116,7 +116,7 @@ const FollowUs = styled.div`
   @media (min-width: 600px) {
     display: flex;
     justify-content: flex-end;
-    margin-top: 0px;
+    margin-top: -35px;
   }
 `;
 

diff --git a/src/components/MakeYourPick.jsx b/src/components/MakeYourPick.jsx
@@ -10,79 +10,69 @@ export const MakeYourPick = () => {
         <h1>Make Your Pick</h1>
       </TextSection>
       <CardSection>
-        <MakeYourPickOne src={priceCardOne} />
-        <MakeYourPickTwo src={priceCardTwo} />
-        <MakeYourPickThree src={priceCardThree} />
+        <Card>
+          <Image src={priceCardOne} alt="Price Card One" />
+        </Card>
+        <Card>
+          <Image src={priceCardTwo} alt="Price Card Two" />
+        </Card>
+        <Card>
+          <Image src={priceCardThree} alt="Price Card Three" />
+        </Card>
       </CardSection>
     </>
   );
 };
 
 const TextSection = styled.div`
-  display: flex;
-  justify-content: center;
+  margin-bottom: 20px;
   margin-top: 40px;
 
   h1 {
     color: var(--Powder-Black, #0b1623);
-    text-align: center;
+    text-align: left;
     font-family: Philosopher;
     font-size: 30px;
     font-style: normal;
     font-weight: 700;
     line-height: 130%;
   }
+  @media (min-width: 600px) {
+    margin-left: 32px;
+    margin-right: auto;
+  }
+  @media (min-width: 1199px) {
+    margin-left: 150px;
+    margin-right: auto;
+  }
 `;
 
 const CardSection = styled.div`
   display: flex;
-  justify-content: center;
-  margin-top: 50px;
-  margin-bottom: 40px;
-`;
+  margin-bottom: 100px;
+  margin-right: auto;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
 
-const MakeYourPickOne = styled.img`
-  display: flex;
-  height: 380px;
-  width: 280px;
-  padding-left: 10px;
-  padding-right: 10px;
-
-  @media (min-width: 1200px) {
-    display: flex;
-    height: 400px;
-    width: 300px;
+  @media (min-width: 600px) {
+    margin-left: 32px;
+    margin-right: auto;
   }
-`;
-
-const MakeYourPickTwo = styled.img`
-  display: none;
-
-  @media (min-width: 600px) and (max-width: 1199px) {
-    display: flex;
-    height: 380px;
-    width: 280px;
-  }
-  @media (min-width: 1200px) {
-    display: flex;
-    height: 400px;
-    width: 300px;
-    padding-left: 10px;
-    padding-right: 10px;
+  @media (min-width: 1199px) {
+    margin-left: 150px;
+    margin-right: auto;
   }
 `;
 
-const MakeYourPickThree = styled.img`
-  display: none;
+const Card = styled.div`
+  flex: 0 0 auto;
+  margin-right: 10px;
+  scroll-snap-align: start;
+`;
 
-  @media (min-width: 600px) and (max-width: 1199px) {
-    display: none;
-  }
-  @media (min-width: 1200px) {
-    display: flex;
-    height: 400px;
-    width: 300px;
-    padding-left: 10px;
-    padding-right: 10px;
-  }
+const Image = styled.img`
+  display: block;
+  max-width: 100%;
+  height: auto;
 `;
diff --git a/src/components/OurLessons.jsx b/src/components/OurLessons.jsx
@@ -47,7 +47,7 @@ const OurLessonsImage = styled.div`
   background-position: 100%;
   width: 100%;
   min-height: 240px;
-  
+
   @media (min-width: 600px) {
     order: 1;
   }