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 - HTML5, CSS Only

seob 20

@mseob

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


I'm learning programming.

I only used HTML5, CSS.

  • Need feedback In example image, there is a line in background. I can't know how to make a line using HTML5, CSS. Give me a solution. Thanks.

Community feedback

@iamcerebrocerberus

Posted

Hi there @mseob

First of, nice work buddy you did good but these are my suggestions

  1. concerning the line you are referring to. There is no line, its just a background image and a color. check the images folder and import it into your css
  2. The box-shadow of the container is quite off, try playing around it to make it fit the design requirement
  3. Order of summary can be wrapped with a h1 tag instead of span. We are dealing with semantics here
  4. since we are dealing with semantics here, i think you can replace <div class="detailBox"> with something like <p class="detailBox">. With this, you can still have your way since p is also a block element but with meaning (paragraph). And also you can wrap all those text in the detailBox paragraph and take of the spans

Marked as helpful

1

seob 20

@mseob

Posted

@iamcerebrocerberus Thanks buddy!!

0

@iamcerebrocerberus

Posted

@mseob you are welcome buddy

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