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 component using Flexbox

Fancy 320

@maciejkrol18

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


This is my second finished challange. It was quite hard to complete but i did it. Any feedback greatly appreciated. One note though - i couldn't find the "Change" text color in style-guide.md that matched the color on the preview image so i slightly reduced the saturation on "Bright blue" color.

Community feedback

Herson 220

@Hersonmei

Posted

Hi @FancyBaguette, good work!

Your font is working here, if you click on the Preview Site you will see. Did you change the font after posting your code here?

You could put the wavy background image on your body, put no repeat and background-size: 100% 40%;

You can also put media queries in your project to be mobile responsive. Try this exercise.

Marked as helpful

1

Fancy 320

@maciejkrol18

Posted

Thanks for the feedback, @Hersonmei

Yes, i fixed the font issue after posting the code (i now used a different method of importing the font: @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap'); in the css file instead of <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed"> in the html file)

Thank you so much for the background image tip - it now works exactly like on the design image.

I'll also work more on media queries. Thanks for the help! I applied the changes and they should be seen on the website in a moment.

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