Week12 - design handoff - Yifan&Yia #47
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Yifan styling
Merge the herocard
update[style] responsiveness Footer
Yifan update style & README
sofia32057
reviewed
Apr 30, 2024
Comment on lines
+20
to
+26
| :root { | ||
| --main-text-color: #000000; | ||
| --secondary-color: #e4dbd2; | ||
| --button-static-color: #b3583b; | ||
| --button-hover-color: #552a1c; | ||
| --button-text-color: #ffffff; | ||
| } |
Comment on lines
+62
to
+65
| <div className="lauch-page"> | ||
| <NavBar /> | ||
| <Hero /> | ||
| </div> |
| } | ||
| `; | ||
|
|
||
| export const Buttons = ({ buttonText, fontSize, paddinglr, width }) => { |
src/components/ClassCard.jsx
Outdated
| } | ||
|
|
||
| //For tablets | ||
| @media (min-width: 768px) and (max-width: 1024px) { |
There was a problem hiding this comment.
Why is there a gap between smartphones and tablets?
| } | ||
| `; | ||
|
|
||
| //Hard code the class card |
There was a problem hiding this comment.
How come you hard coded the card instead of making it reusable?
| export const Footer = () => { | ||
| return ( | ||
| <StyledFooter> | ||
| <h3 className="footer-title"> |
There was a problem hiding this comment.
I love that you're using regular class names. Looks so much nicer and makes it easy to read. Totally prefer it!
| @@ -0,0 +1,228 @@ | |||
| import styled from "styled-components"; | |||
| import buttonData from "../data/Buttons.json"; | |||
| export const Buttons = ({ buttonText, fontSize, paddinglr, width }) => { | ||
| return ( | ||
| <StyledButton | ||
| onClick={() => console.log(buttonText)} |
Comment on lines
+202
to
+203
| paddinglr={windowWidth >= 1024 ? 32 : 16} | ||
| width={windowWidth >= 744 ? 70 : windowWidth >= 448 ? 100 : 95} |
Comment on lines
+161
to
+257
| {/* First Card */} | ||
| <StyledCard> | ||
| <StyledClassImage src="/class01.png" alt="The Reformer" /> | ||
| <StyledTextButton> | ||
| <StyledClassName> | ||
| <span className="class-keyword">The Reformer</span> - challenges | ||
| core strength, stability, and balance. | ||
| </StyledClassName> | ||
| <StyledClassDescription> | ||
| <p> | ||
| We also offer 1-1 classes. <br /> | ||
| Suitable for all levels of fitness. | ||
| </p> | ||
| </StyledClassDescription> | ||
| <StyledButtonWrapper> | ||
| <Buttons | ||
| buttonText="Book Now" | ||
| fontSize={15} | ||
| paddinglr={windowWidth >= 1024 ? 32 : 16} | ||
| width={windowWidth >= 744 ? 70 : windowWidth >= 448 ? 100 : 95} | ||
| className="class-button" | ||
| /> | ||
| </StyledButtonWrapper> | ||
| </StyledTextButton> | ||
| </StyledCard> | ||
|
|
||
| {/* Second Card */} | ||
| <StyledCard> | ||
| <StyledClassImage src="/class02.png" alt="Get on the Mat" /> | ||
| <StyledTextButton> | ||
| <StyledClassName> | ||
| <span className="class-keyword">Get on the Mat</span> - Learn the | ||
| fundamentals at your own pace. | ||
| </StyledClassName> | ||
| <StyledClassDescription> | ||
| A great place to start your pilates journey. | ||
| </StyledClassDescription> | ||
| <StyledButtonWrapper> | ||
| <Buttons | ||
| buttonText="Book Now" | ||
| fontSize={15} | ||
| paddinglr={windowWidth >= 1024 ? 32 : 16} | ||
| width={windowWidth >= 744 ? 70 : windowWidth >= 448 ? 100 : 95} | ||
| className="class-button" | ||
| /> | ||
| </StyledButtonWrapper> | ||
| </StyledTextButton> | ||
| </StyledCard> | ||
|
|
||
| {/* Third Card */} | ||
| <StyledCard> | ||
| <StyledClassImage src="/class03.png" alt="Pre and Postnatal" /> | ||
| <StyledTextButton> | ||
| <StyledClassName> | ||
| <span className="class-keyword">Pre and Postnatal</span> | ||
| </StyledClassName> | ||
| <StyledClassDescription> | ||
| Gentle exercises to maintain strength, flexibility, and promote | ||
| relaxation. | ||
| </StyledClassDescription> | ||
| <StyledButtonWrapper> | ||
| <Buttons | ||
| buttonText="Book Now" | ||
| fontSize={15} | ||
| paddinglr={windowWidth >= 1024 ? 48 : 16} | ||
| width={windowWidth >= 744 ? 70 : windowWidth >= 448 ? 100 : 95} | ||
| className="class-button" | ||
| /> | ||
| </StyledButtonWrapper> | ||
| </StyledTextButton> | ||
| </StyledCard> | ||
|
|
||
| {/* Fourth Card */} | ||
| <StyledCard> | ||
| <StyledClassImage src="/class04.png" alt="On Demand" /> | ||
| <StyledTextButton> | ||
| <StyledClassName> | ||
| <span className="class-keyword">On Demand</span> - workout wherever, | ||
| whenever, you decide. | ||
| </StyledClassName> | ||
| <StyledClassDescription> | ||
| Live classes online and over 100 pre-recorded sessions. | ||
| </StyledClassDescription> | ||
| <StyledButtonWrapper> | ||
| <Buttons | ||
| buttonText="Book Now" | ||
| fontSize={15} | ||
| paddinglr={windowWidth >= 1024 ? 48 : 16} | ||
| width={windowWidth >= 744 ? 70 : windowWidth >= 448 ? 100 : 95} | ||
| className="class-button" | ||
| /> | ||
| </StyledButtonWrapper> | ||
| </StyledTextButton> | ||
| </StyledCard> | ||
| </> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Why couldn't you use a unique component instead of creating different cards which have the same structure?
| margin-top: 1.5rem; | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
In small devices it's all a bit smashed up :) and the "login it's wrapping" , the text in the button it's not centered
AntonellaMorittu
suggested changes
May 2, 2024
There was a problem hiding this comment.
Hi Yifan&Yia, congratulations for completing your week 12 project. It looks very nice! The site looks very close to the design and followed our requirements. How did you like Styled Components? Seems like you tackled it in the right way and implemented a great result! Now the design is not pixel perfect, but that's okay, here's a little things that need to be fixed to get closer to the desired result:
- Tablet layout doesn’t match the design: especially navbar, our classes, upcoming events and the footer section don't respect the margins and proportions or disposition of elements. Check the proportions and that elements are centered and have appropriate margins/paddings, for example:
Please fix accessibility and you're good to go 🚀 Thank you and again, well done almost there! 💪 🔥
|
Hey Antonella&Vittoria&Sofia! Thanks for the reviews. We tried to adjust the details :)
|
AntonellaMorittu
approved these changes
May 6, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Netlify link
https://curve-pilates.netlify.app/
Collaborators
[Citronskal]