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
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order summary component with Flexbox

Chi Karl Juniorβ€’ 40

@chikarl

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Chisom Ogbonnaβ€’ 380

@Mavreon

Posted

Also here's a few pointers to help with your HTML validation issues and accessibility issues:

In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link. You might want to add labels to your form input elements, this enables the browser to properly identify the input elements within your form and it's also beneficial to people with using screen readers. Happy coding and keep up the good workπŸ‘

Marked as helpful

2

Chisom Ogbonnaβ€’ 380

@Mavreon

Posted

Hello Chikarl, Great job on this, just a few things I noticed:

  1. Your card isn't centered and you can make that possible by adding display: flex; to the body block in your CSS file, which should center it.
  2. You don't need a div element wrapping around an anchor element to give it a button look. Only the anchor element with some width, padding, and background color should do it. For instance, taking .proceed-button as the class of an anchor element.
.proceed-button{
            color: $color-white;
            background-color: $color-bright-blue;
            //Fill width of the parent element...
            width: 100%;
            padding: 20px 0;
            border-radius: $value-border-radius;
            box-shadow: 0 10px 20px rgba(1,1,1,0.25);
}
  1. You forgot to handle the hover state of the anchor elements. If you don't know how to do that here is an example using my previous expression...
 .proceed-button:hover{
            background-color: $color-desaturated-blue;
            text-decoration: none;
}

Also, don't forget to add a transition property to the .proceed-button for a smooth transition on hover state, like this...

.proceed-button{
            //Other property statements...
            transition: all 0.1s ease-in;
}

I hope you find this helpful ✨ Happy coding πŸŽ‰

Marked as helpful

1

Chi Karl Juniorβ€’ 40

@chikarl

Posted

@Mavreon Thanks I am going to try it out

1

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