Skip to content
Submitted over 3 years ago

HTML and CSS only, layout with flexbox and css-grid

Ka Wai Cheung•65
@Cheung-KaWai
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

Hi, I have just completed my second challenge but i'm still having 2 problems that I couldn't solve:

-How can I give the image a purple layer on top of it?

-When I resize my screen to mobile it cut some parts of on the top and bottom of the page if the height of my screen is not big enough.

If you have some spare time to look at it, I would much appreciate it! If there are any things that I could code better please also let me know.

Thank you in advance :)

Community feedback

  • Smita•395
    @Smita-14Posted over 3 years ago

    Hi Cheung-KaWai! You've done really nice work! ✨ There are many ways to color the img, I'll talk about the one that I figured would be easy :

    • Apply background-color: var(--softViolet); to section tag.
    • Add mix-blend-mode: multiply; and opacity: .8; to the img tag.

    I used different method for my solution. I used div tag in html as an img overlay and position property in css to align it on top of it and then adjusted the colors. If you need to look at it here's the link for live site and github-repo.

    As for your second problem change the height: 100vh; property to min-height:100vh; in the main tag.

    Marked as helpful
    0
    Ka Wai Cheung•65
    @Cheung-KaWaiPosted over 3 years ago

    @Smita-14 Thank you for your feedback!

    1
  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago
    • for your first question , read the following article exploring blend modes
    • let your first heading be an h1 element. Also headings should ascend in order h1, h2, h3 etc. Do not skip headings
    • write in lowercase and use css to transform to uppercase. Words written in uppercase will be read letter by letter instead of being read as a word.
    • nice work on the alt value alt="photo of peopple working on desk", the word is people and words like photo, image, logo should be omitted as screen readers will automatically make announcement using the same words or something similar.
    • the screen on medium will need attention, maybe adjust the media query
    Marked as helpful
    0
    Ka Wai Cheung•65
    @Cheung-KaWaiPosted over 3 years ago

    @ChamuMutezva Thank you for the feedback!

    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