@pikapikamart
Posted
Hey, awesome work on this one. Layout in desktop looks great, the responsiveness could be better, because at point 1000px going down to 750px, the content on the left side gets hidden. The mobile layout however looks really great.
For your questions:
- I always use responsive unit, mostly
rem
. When I am coding, it is troublesome to convert manually every pixel unit to rem, that is why, in my scss, I create function where I could just put the pixel unit, then it convert it to rem. - For this one, I don't really know what to use since I haven't made this project. Some uses what you mentioned,
background-blend-mode
along withopacity
to control the color of the purple overlay. You can see other solutions on this one challenge if you visit your solution, then clickvisit challenge hub
then in there, select thesolutions
tab. - Usually, the mobile version is what I use on tablet layout. Since I now do mobile first, using maybe 800-900 pixels, is where I set the desktop layout, but sometimes I change, it depends on how the design looks at some screen-size. Sometimes, I mix the desktop layout and mobile layout, before transitioning to only desktop or mobile.
Some other suggestions would be:
- Always have
main
element to wrap the main content of your webpage. This helps users to properly navigate your site. For this one, you could usemain
on thecard
selector instead of justdiv
. - For the
.card-content
you don't need to addwidth: 36.667em
. - The text
Get insights that help your business grow.
should be a heading tag, usingh1
would be really great on this. - Also, when you have a text-content, do not just use
div
to wrap the text, usep
tag. Make sure to wrap content in a meaningful element. - For the
card-stats
selector, you can useul
element on those, since if you look at it, those are "list" of information about the company website.
If you have more queries, just drop it here okay. Aside from those, great workagain on this one.
Marked as helpful