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

Order Summary Card with HTML5 CSS3 SASS

@Abduwaasi

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, this is my first project on frontend mentor, feel free to review my code, i will be glad to hear your view about it...thanks in advance.

Community feedback

@RikvanderSar

Posted

Hi Adebayo,

Look good to me! If I compare your version with the design it looks like the inactive and active state of the links are vice versa. And I wonder why you've used a psuedo element for the background image. Wouldn't a background image on the body work as well and be less code?

Marked as helpful

1

@Abduwaasi

Posted

Thanks @RikvanderSar I really appreciate the time you took to review my code.

This is my first time working on a design, I usually follow tutorial video, to be honest I didn't understand what the active state mean in the design till I see your review, I will implement the correction ASAP.

For the background image I actually thought about inserting it in my background section but I was confused on how I will make the image appear on top of the background color. That's why I used pseudo element and gave it z-index

0

@RikvanderSar

Posted

If you give your body a background image and have a child element for your card the card will lay on top of your background image. But you have to set a height and width for you body to display to full image. I'd go with height: 100vh

Marked as helpful

0

@Abduwaasi

Posted

@RikvanderSar okay I will give it a try

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