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

Article preview component with HTML, CSS and JS

@savchrisostomidhs

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@joshhovis

Posted

Hi Savvas, your project looks good! A couple things I noticed:

I noticed that you used the svg icons as img tags which is the same way I did it. As I'm sure you noticed, if you do that then there is no way to change the fill color to be white for the arrow icon svg. I found a way that worked for me in changing the color. You can apply a filter to the img tag and achieve the color change that way. So it would look something like this:

.icon { 
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(224deg) brightness(200%) contrast(102%);
}

I would also suggest creating a separate document for you css styles, just to keep things decluttered as you get into projects with more content.

Keep up the good work!

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