Design comparison
Solution retrospective
Basically everything
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
Community feedback
- @dvdgdPosted 7 months ago
Hello! Great job on the blog preview!
I have some suggestions to refine the design further:
-
Consider using
height: 100vh;
instead of defining the height in pixels for the body to ensure it fills the entire screen:body, html { height: 100vh; background-color: hsl(47, 88%, 63%); }
-
To center align items within your
main
element, you can utilize the existingdisplay: flex;
property and addalign-items: center;
andheight: 100%;
. This will ensure the main section occupies the full available height. -
Enhance the box styling with a solid shadow effect:
.blog--container { box-shadow: 8px 8px 0px black; }
Don't forget to include a hover state for the card. Use CSS selectors to change the title's color to yellow and increase the box shadow when the user hovers over the card:
.blog--container:hover .blog--title { color: hsl(47, 88%, 63%); } .blog--container:hover { box-shadow: 16px 16px 0px black; }
Plus: Add transitions for a smoother hover effect. Apply a
transition
property to the.blog--container
and.blog--title
elements:transition: your-css-property 0.3s ease
For more information on transitions, refer to the MDN Transition docs.
Overall, your work is commendable, but these tweaks will enhance the design and user experience even further. Keep up the great work!
Marked as helpful0 -
- @josh-condePosted 7 months ago
loooks goooooooooooooooooooooooooooooooooood
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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