Submitted over 1 year ago

Protfile

Musa• 150

@musanurbadr

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

esponsive webpage with a stats preview card component. The page includes a head section with meta information, such as the character encoding, viewport, and links to external resources, such as Google fonts and a favicon.

The body of the page contains the main container div that holds the stats preview card component. The card has two sections, one with a background image and another with text. The text is divided into two sections: the main text section with a headline and a paragraph, and the status text section that displays three statuses with a number and a corresponding description.

At the bottom of the page, there is an attribution section with links to Frontend Mentor and the person who coded the solution. The style for the webpage is controlled by a separate CSS file linked in the head section of the HTML document.

Community feedback

Alex Garcia 🦝 Garcialexco• 440

@garcialexco

Posted over 1 year ago

Hello! Great job completing the challenge! Theres a couple parts of your code that I might be able to help with.

HTML Try to stick with using semantic HTML wherever possible. For example, div should be used sparingly in favor of article, section etc. Here is an article about divs in regards to sematic HTML: https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/

It is usually best to link your fonts in the head of the HTML, then apply them wherever necessary in the CSS file. I've heard that it loads it loads faster!

CSS Good job with the positioning of the background and the circles. That one was a thinker for me.

Hope this helps, and keep up the great work! Happy Coding!

Marked as helpful

Please log in to post a comment

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