Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Article Preview Component built using HTML,CSS & JavaScript

#accessibility
dAnIeL sWiFtβ€’ 440

@danielswift10

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback on this project is welcomed. Thanks.

Happy Coding!

Community feedback

Lucas πŸ‘Ύβ€’ 104,580

@correlucas

Posted

πŸ‘ΎHello Daniel, congratulations for your new solution!

Your solutions is really amazing, the design is all perfect. The only thing I think you can really change is the size of the component in the desktop version that is around max-width: 1110px and the button share that is losing its proportion when the screen scales. A display: block and max-width: 50px should get this work done,

.article-card {
    max-width: 1110px;
    grid-template-rows: 1fr;
    grid-template-columns: .7fr 1fr;
    grid-template-areas: 'article-image article-card-body';
    box-shadow: 0 10px 25px 5px rgb(183 215 245 / 62%);
}

πŸ‘‹ I hope this helps you and happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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