Design comparison
Solution retrospective
the most difficult thing I found was getting the background to appear over the image when you hover. I had to ask around to get some ideas.
I'm still unsure about how to correctly divide up the sections. I felt that I put a lot of things in here that weren't needed. I will continue to practice these skills.
Any tips on how to separate sections easier is always welcomed.
Everyday is an adventure!
Keep on keepin' on my fellow web devs \o/
Community feedback
- @danielmrz-devPosted 11 months ago
Hello Daniel!
Your project looks great!
You can separate the sections setting
display: gridon yourdiv.cardand then usinggapto separate them. By usinggap, you create an equally sized space between all the elements inside a Grid or Flex container. If you do this, you won't needmarginsto separate the elements.One more suggestion:
- You can replace your
div.containerwithmain.container. This won't change anything visually, but it makes your HTML code more semantic. This improves SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
Marked as helpful1@retailescapeartistPosted 11 months agoI will put this in my notes to remind me. Thank you for the helpful tip@danielmrz-dev
1 - You can replace your
- @abubakr01Posted 11 months ago
You omitted the two icons towards the end of the design. I mean the eth and the number of days lcons. I wouldn't know whether you forgot to add it or you had some issues with the placement.
But, lemme just say, you could put them in two separate divs, the you use "display:flex" "Align -items:center"
Marked as helpful1@retailescapeartistPosted 11 months agoyeah, I forgot the two icons. Appreciate you looking at it and the advice@abubakr01
0
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