Skip to content
Submitted almost 3 years ago

Responsive preview card component made with HTML and CSS using flexbox

Emanuel Marques•240
@emanuelmarques45
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

I had some difficult to manipulate the height to mobile, does someone have another solution? (I coded all of it on mobile, so idk exactly how it is on desktop)

Community feedback

  • Rai•100
    @RaiIsNotYourGuyPosted almost 3 years ago

    Howdy,

    If you are looking for some more examples for this challenge, you are more than welcome to check out my solution. I had trouble with the image with the filter on top. I had went with a mobile-first approach and then used a media query to create the desktop version. As for the image, I gave it a max-width and max-height to help it stay within the filter and also gave the card itself a max-width. I hope this helped answer your question. Let me know if you any questions.

    -Rai

    Marked as helpful
    0
    Emanuel Marques•240
    @emanuelmarques45Posted almost 3 years ago

    @RaiIsNotYourGuy Thank you! I'll use those properties

    0
  • Moon-Seng•280
    @Moon-SengPosted almost 3 years ago

    Hi, @emanuelm45

    After I watched your code you did it great.

    But there is something that you have to make exactly like the design, Such as font-size, spacing, font-family. I knew that you coded it all on mobile so I suggest you use max-width for your width problem in Desktop mode. And I strongly suggest that you should buy a new laptop or the second is okay! Coding on mobile will damage your eyes.

    I hope my comment helps you. Happy Coding :)

    Marked as helpful
    0
    Emanuel Marques•240
    @emanuelmarques45Posted almost 3 years ago

    @Moon-Seng Thank you!! I'll do it

    0
  • Account deleted

    Hello there! 👋

    Congratulations on finishing your challenge! 🎉

    I have some feedback on this solution:

    • Always Use Semantic HTML instead of div like <main> <header> <footer> , etc for more info i hope this is helpful and goodluck!
    Marked as helpful
    0
    Emanuel Marques•240
    @emanuelmarques45Posted almost 3 years ago

    @Old1337 Thank you!

    1
  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Greeting @emanuelm45 ,

    I have some suggestions regarding your solution :

    • Use landmarks <main> to wrap the body content and <footer > for the attribution . HTML5 landmark elements are used to improve navigation

    • You can use <ul> to wrap the class="stats".

    • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like companies should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

    • Images must have alt text.

    • How To: Write Good Alt Text.

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the **<body>**like this:

    body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; /*If you set a page width, choose ``100%`` over ``100vw ``to avoid surprise horizontal scrollbars. */
min-height: 100vh;/*using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page.*/

    • Using percentages % for width can cause a lot of problem , consider using max-width to the container

    • To improve the image overlay effect you should use blend modes. you can use background color, Use mix-blend mode and opacity to make it more like the design.

    • Never use px for the font-size.

    Check the responsiveness again .

    Overall , your solution is good, Hopefully this feedback helps.

    0
    Emanuel Marques•240
    @emanuelmarques45Posted almost 3 years ago

    @PhoenixDev22 Thank you very much for your help!

    0

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