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

Third Desktop site using plain html and css

vasileios• 30

@vasilisalmpanis

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback and suggestions is welcome. Can anyone please explain how i can change the image color to violet? Thank you in advance.

Community feedback

P
Chamu• 12,970

@ChamuMutezva

Posted

Greetings Vasileios, congrats for taking another challenge

  • site is not responsive, i can not view it properly on mobile and tablet
  • the desktop presentation looks good, well done
  • separation of concerns - let your css reside in the css stylesheets, inline styles will not be beneficial especially when your project gets bigger
  • words written in capital letters <td>COMPANIES</td> can be read letter by letter with screen readers. Use css to uppercase such words.
  • i can see the closing </main> tag element but i can't locate the opening <main> tag
  • for the purple overlay, take a look at exploring blend modes

Marked as helpful

1

vasileios• 30

@vasilisalmpanis

Posted

@ChamuMutezva Thank so much for the reply. I am a complete beginner so I don’t know how to approach the mobile version that’s why I just uploaded the desktop one. In the beginning I made a main section but then I deleted it but I forgot to delete the closing tag. Thanks for the information you provided. Any further information would be greatly appreciated

0
Dharmik_487• 1,740

@Dharmik48

Posted

Hey👋,

Good Job with the solution!

You can make the image purple with: Instead of img tag use an empty div(this div will be on the right exactly the size of the image) and add background: url(image url here), linear-gradient(purple color, purple color); this should add a image with puple accent.

Marked as helpful

1
Md Ajmal Shadab• 410

@mdajmalshadab

Posted

Nice work! for the image filter: Use a div container for the image, set container background to violet color, then set image opacity to some value like 0.8, and in the end use below CSS property for your image mix-blend-mode: multiply;

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