Skip to content
Submitted about 1 year ago

Stats Preview Card Component - Meric Cintosun

mericcintosun•150
@mericcintosun
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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]

Community feedback

  • unaygney•1,600
    @unaygneyPosted about 1 year ago

    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
    1
  • Jaylou Rasonabe•650
    @JlordS32Posted about 1 year ago

    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
    1

Please log in to post a comment

Log in with GitHub

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