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

Stat preview card - HTML & SCSS

#bem#sass/scss
darryncodes• 6,430

@darryncodes

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


Hi everyone 👋

My first project, having learnt by myself i've never undergone a code review or constructive feedback session - i'm glad i've stumbled across Frontend Mentor!

It'd be great if you can think of any improvements:

Could i adhere to DRY coding principles and code more efficiently? I used width & max-width often to get the desired design - did i use them right? Could I be more consistent with the use of padding and margin?

Any thoughts welcome

Happy coding 🤙

Community feedback

P
Chamu• 12,970

@ChamuMutezva

Posted

You did well with this challenge , well done.

  • try playing around with background-blend-mode on this class to try to match the picture colour
card__image {
	width: 50%;
	/* background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(170,92,219,0.35)), to(rgba(170,92,219,0.35))),url(../img/image-header-desktop.jpg); */
	background-image: linear-gradient(rgba(170,92,219,0.35), rgba(170,92,219,0.35)),url(../img/image-header-desktop.jpg);
	background-size: cover;
	background-position: center;
	background-blend-mode: overlay; //try adding this or any of the other values
}

Marked as helpful

0

darryncodes• 6,430

@darryncodes

Posted

Hi @ChamuMutezva thanks a lot. Great advice, I didn’t know that property existed!

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