Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first using SASS

David• 80

@DavidAlex17

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


i would like to say this challenge made me realize i have a lot to learn in web development. not just that, but git/github as well. i have a long way to go, so please any constructive criticism on anything specific or in general would be much appreciated.

Community feedback

Amon• 2,560

@A-amon

Posted

Hello! Great work~ The responsiveness works well.

I'd like to offer a few suggestions:

  1. Add .. at the front to your background-image path because the image isn't showing up.

  2. Place the h2 and p tags outside of ul tag because I don't think it's semantically correct plus, it doesn't describe the list.

1
banadikt• 5

@banadikt

Posted

I don't have much time to give you lots of feedback as I need to revise my solution also but... you can try this picture tag. It basically gives you more flexibility when you need to use multiple images for different resolutions. In this case when screen width is bigger than 715px use desktop version otherwise use mobile version. Also I saw you didn't get your transparency to work on the image. I'm sure there's many ways you can do this but what I have done is to have this picture tag or img whatever you decide to use enclosed in a div. Set div background to that purple and set the opacity lower so it becomes more transparent and blends in with the purple fade. Good luck!

<picture>
        <source media="(min-width:715px)" srcset="./images/image-header-desktop.jpg">
        <img src="./images/image-header-mobile.jpg" alt="Office workers at the desk">
</picture>
1
P
Jaydi• 355

@ruedasjnthn

Posted

use display:block to show your image

also use text -align: left to correct the layout of your design, u can achieve this using media queries to help you change layout as the screen size changes

0
diamond-js• 75

@diamond-js

Posted

lol... That was also how I felt when I took this challenge. Nice design though... But seriously frontend mentor needs to work on their screenshots

0

Please log in to post a comment

Log in with GitHub
Discord logo

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