Design comparison
Solution retrospective
Hi you guys! here with other challenge, i have some questions.
-
The principal problem in this challenge for me was the background images, at begenning i put it such as a img html, but later you must change them for the desktop version, i got it using a div and background image with 100% width and padding top for the height of the image. There are other ways for do that?
-
The arrow below the title in header, i used an pseudo class before and position for put the arrow like a background, but depending width device i had to change the value of position in each breakpoint, i'm sure that exist a better method.
The rest was relatively easy, flex and grid for the articles and components like cards, will be great if you can see my live site, all feedback is welcome.
Have a nice day guys 💝💟
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hello there, Ippo! 👋
Good work on this challenge! 👍
I think using CSS background images to add and position the images in this challenge isn't a bad idea. 😀 A pseudo-element for the arrow icon in the hero section of the page seems fine, too!
I'd just like to suggest adding a max-width to the container that has the navigation links in the footer of the page (so that it doesn't become too wide and the navigation links don't become too spaced out from each other in the desktop layout). 🙂
It also might be worth taking a look at your solution report and trying to clear up some of the errors that are there in order to improve the accessibility and semantics of your solution.
Keep coding (and happy coding, too)! 😁
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord