Skip to content
Submitted over 1 year ago

Stats Preview Card Component - Meric Cintosun

material-ui, materialize-css, styled-components, theme-ui, web-components
mericcintosun•150
@mericcintosun
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello Frontend Mentor community!

In this project, I tackled Frontend Mentor's Responsive Web Design Challenge and I'd like to share my solution with you all. This project was a learning experience aimed at improving my HTML and CSS skills.

Technologies and Tools Used:

HTML5 CSS3 (Using Flexbox and Grid) Visual Studio Code Google Chrome Developer Tools

Objectives: While working on this project, I aimed to achieve the following goals:

Learn and apply the fundamental concepts of responsive web design. Gain a better understanding and usage of CSS Flexbox and Grid.

Challenges and Learning Experience: I encountered some challenges during the project, particularly the intricacies of responsive design kept me engaged. However, overcoming these challenges significantly enhanced my skills, making me a better frontend developer.

Thank you for taking the time to review my project. I welcome any feedback and suggestions. Your input is invaluable as I strive to further my learning journey.

I'm also looking forward to seeing your projects on the Frontend Mentor platform. Let's continue learning and growing together!

Thanks, [Meric Cintosun]

Code

Please log in to post a comment

Log in

Community feedback

  • Guney Unay•1,690
    @unaygney

    hello meric. Your project looks great. 🤩 🚀⚡️ I have a few suggestions for you.

    If you give a width to main and a background-image: url("image.path") to section.image, you will avoid having to create two img tags. You can also set many effects on the background. I recommend you review it.

    Keep Coding 💪🏼

    CSS Multiple Backgrounds

    Marked as helpful
  • Jaylou Rasonabe•720
    @JlordS32

    Here's some suggestions to make it a little better:

    • Try looking up before and after pseudo classes to give the image that purple filter effect.
    • Alternatively, you can add a sibling element for the img and set position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: COLOROFYOURCHOICE
    Marked as helpful

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