From 7e89f91369d50f81a0761767ad4f4b87ff8f7ffb Mon Sep 17 00:00:00 2001 From: Alexandra Franzen Date: Thu, 20 Jun 2024 13:31:44 +0200 Subject: [PATCH] Fixes made from requested changes --- src/assets/footerImages/tablet-logo.png | Bin 2217 -> 3552 bytes src/components/Footer.jsx | 16 ++--- src/components/MakeYourPick.jsx | 88 +++++++++++------------- src/components/OurLessons.jsx | 2 +- 4 files changed, 48 insertions(+), 58 deletions(-) diff --git a/src/assets/footerImages/tablet-logo.png b/src/assets/footerImages/tablet-logo.png index a4d9f5ef45c1a24cc0dc63cb5a7cadbe1446a264..c1560377a8dcb8c38f0f1499a9ae87457f4c6b23 100644 GIT binary patch delta 3536 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 KMNUMnLSTZH-MO3q delta 2190 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 QIRF3v07*qoM6N<$f@niA-T(jq diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 22036831..35d6bcd3 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -10,7 +10,7 @@ export const Footer = () => { return ( - +

Learn, Laugh, and

Connect on the Slopes!

@@ -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 index 6a7f8082..1a4dafa9 100644 --- a/src/components/MakeYourPick.jsx +++ b/src/components/MakeYourPick.jsx @@ -10,79 +10,69 @@ export const MakeYourPick = () => {

Make Your Pick

- - - + + Price Card One + + + Price Card Two + + + Price Card Three + ); }; 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 index 223838cd..9b4a13d4 100644 --- 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; }