A blog-preview page using basic HTML,Css flex,position,query and hover
Design comparison
Solution retrospective
I'm gratefulto fronteend mentor I just can't wait for my next project.
Community feedback
- @CHarvey820Posted 8 months ago
This looks like a great start!
- You can move your attribution lines just under your <section> so they don't show up in the actual component.
</section> <a class="link-2" href="https://www.frontendmentor.io/profile/yourusername">Challenge by Frontend Mentor</a><br> <a class="link-2" href="">Coded by Boy Programmer</a> </body> </html>
-
Remember to use both align-items: center; and justify-content: center; to fully center a flexbox component.
-
Try viewing the solution on a larger screen if possible. It looks good in smaller screens, but a bit stretched on larger ones.
-
Change your .head-image to have max-width: 100%; so it does not overflow past its container. You can also remove the border from the image, as it isn't present in the solution.
-
The section in the solution does not have a hover state; instead, it is simply a static box-shadow. You can remove your section:hover entirely, and move your box shadow into your section selector. The box shadow also does not need the blur or spread radius values, instead you can try something like this: box-shadow: 8px 6px #000000;
I hope this can give you a good start on some ways to improve your project. Happy coding!
Marked as helpful0@Ciscomahlee005codesPosted 8 months ago@CHarvey820 Thank you for the corrections
0
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