Random Acts Of Kindness (R.A.O.K) - Fanny Henriques & Gabriella Iofe #72
Conversation
removed testing.jsx
added content in buttoncomponent and in introcomponent
finished reviews.json
added a sectiontitle with content in reusable components
finished steps.json and updated reviews
added content in app.jsx
added images to doodles
imported icons
added icon to icaonfolder and imported images and added them to slide…
finished links.json
moved buttoncontent to button.jsx
…ffects on the text buttons
Gabysbranch
mediaq for arrow-desktop
finished styling for Tablet
desktop- grid for header, title section, flex for cards
some more styling for footer
added a comment in footer.jsx
cleaned up code
added media for slideshow and put stars in a div in the reviewcard
updated styling and solved conflict in sociallinks
added readme
There was a problem hiding this comment.
Great job with the project.
You have implemented the design in a good way and used styled components and splitting your code into components.
Think about cleaning up your files, for example the indentation is a bit messy and inconsistent in some files.
Also, maybe think about the naming of the components Button1 Button2 etc. Could they be variants of one component? If not, nameing them a bit better would be ideal.
Keep up the good work
| display: -webkit-box; | ||
| -webkit-line-clamp: 4; | ||
| -webkit-box-orient: vertical; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| position: relative; | ||
| max-height: calc(5 * 1.25rem); | ||
| line-height: 1.4375rem; | ||
|
|
||
| @media (max-width: ${({ theme }) => theme.breakpoints.large}) { | ||
| max-height: calc(6 * 1.25rem); | ||
| } |
| display: flex; | ||
| flex-direction: row; | ||
| color: lightgray; |
| background-color: ${({ theme }) => theme.backgrounds.highlight}; | ||
| padding-top: ${({ theme }) => theme.spacing.small}; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| gap: 1rem; | ||
| align-self: stretch; | ||
| `; | ||
|
|
There was a problem hiding this comment.
Well done with this project! The site is responsive and looks great on different screen sizes. Since your challenge was to translate the given design into code, I think you did an excellent job! I especially liked that you worked with different themes for the styling.
I also appreciate how you structured the project into folders like assets, data, components, sections, and styles. It makes it easy to navigate and find the different parts.
One thing I noticed in the Sections folder: Is there a specific reason why the folder "Header" is capitalized, but the other folders are not?
Additionally, I saw that you have both Swedish and English comments in your code. I would suggest using just one language for consistency.
Lastly, I would recommend giving the buttons more descriptive names so they are easier to differentiate.
Overall: Awesome job! 💯
| import { FinePrintFooter } from "../../re-components/Typography"; | ||
| import { SocialLinks, StartTodayButton } from "./SocialLinks"; | ||
|
|
||
| //Det här är bara relevent om vi börjar styla hela footern. Finns padding i figmadesignen men verkar vara fel padding i SocialLinks isf |
Netlify link
https://act-of-kindness.netlify.app/
Collaborators
Fanny Henriques & Gabriella Iofe
GithubName: gabster94