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

Preview Card Component Solution by Charles Barros

@charbavito

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


Hello Frontend Mentor fellowsšŸš€

This is another one of my solutions for the HTML and CSS only Challenges.

Again to solve this challenges I've been using SASS to compile the CSS, Media Queries to achieve responsiveness, VSCode to coding and Git to versioning.

Feel free to review the project and/or give me some feedback šŸ˜‰

Cheers!

āœŒļøšŸ˜Š Charles Barros

Community feedback

Hassia Issahā€¢ 50,670

@Hassiai

Posted

Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

To center .card on the page using flexbox, replace the height in .container with min-height: 100vh and add justify-content: center to .container.

For the color of the image, give .main-img a background-color of soft violet and give the img a width of 100%, object-fit: cover , height of 100%, mix-blend-mode: multiply and opacity: 0.8.

background-color: hsl();
}
img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}

Hope am helpful.

Well done for completing this challenge. 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