Conversation
I’ve completed most of the component, including the title and the benefits list. I’m currently working on integrating the images from Figma as the background and figuring out the best way to implement them properly.
Ready for review and check in
| <div className={styles.container}> | ||
| <div className={styles.textPictureContainer}> | ||
| {/*use this if path to image don't work <Image src="/public/Mask-group 1.png" alt="Team Picture" className={styles.picture} ></Image>*/} | ||
| <Image alt="Team Picture" className={styles.picture}/> |
There was a problem hiding this comment.
Where is your src attribute? I noticed that you mention it in your comment (which is the right format!). You can uncomment line 7, or simply add src =
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 0.625rem; | ||
| background: url('/public/Frame 1618873348.png') lightgray 0% 0% / 100px 100px repeat, linear-gradient(180deg, #000138 0%, #172B54 100%); |
There was a problem hiding this comment.
I think this can be a lot simpler. You can add the background image like you did with the picture and style it separate to the container!
kyharac
left a comment
kyharac
left a comment
There was a problem hiding this comment.
Make sure to add these changes, run it (npm run dev) and check if there are any errors if it doesn't look like the Figma design!
rename your .jsx and .module.scss to why sponsor us and add it to a components folder
| height: 23.1875rem; | ||
| padding-top: 74.8%; | ||
| border-radius: 0.9375rem; | ||
| background: url('/public/Frame 1618873348.png') lightgray -43.509px -37.68px / 116.959% 122.266% no-repeat; |
There was a problem hiding this comment.
Similar thing, if you add src attribute to line 8, then you would not need to do url() or any of that extra stuff. Make sure to look at other resources (slides, youtube, or google) or simply ask if you need help!
| justify-content: center; | ||
| align-items: center; | ||
| gap: 4.6875rem; | ||
| flex-shrink: 0; |
There was a problem hiding this comment.
I don't think flex-shrink is needed here/unnecessary. Is there reason as to why you added it?
| height: 8.0625rem; | ||
| flex-shrink: 0; | ||
| align-self: stretch; | ||
| color: #FFF; |
There was a problem hiding this comment.
Make sure to use the colors we have under globals, this seems to be white so you can use var(--white) or var(--off-white). Whatever fits best based on the Figma!
|
|
||
| .container { | ||
| display: flex; | ||
| width: 90rem; |
There was a problem hiding this comment.
Instead of using width & height, use padding or margin. Check out the CSS box model from our slides or simply DM us for help!
| line-height: normal; | ||
| } | ||
|
|
||
| .benefit{ |
There was a problem hiding this comment.
This doesn't match with your classname in your .jsx file. Make sure to test/run as you go to make sure you are implementing everything correctly and matches w/ the design on Figma!
There was a problem hiding this comment.
Since it doesn't match, styling will not be applied to benefits
| align-items: center; | ||
| gap: 4.6875rem; | ||
| flex-shrink: 0; | ||
| align-self: stretch; |
There was a problem hiding this comment.
I believe stretch is a default behavior here due to its parent, so this is not necessary.
2 participants
Description
briefly describe what you made and take any screenshots or provide anything else you feel is necessary:
I built the “Why should you sponsor us?” component following the Figma design. I have a big container. Inside, I created a smaller container that holds two elements of the picture and the list of benefit point.
Checklist:
after creating your PR please mark all of these: