Submitted 6 months ago

Order-summary

Yrwin Avellona• 70

@CoderExplore365

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

What I am most proud of when I did this project is the container because I wanted to make the container fit in the middle of the website. What I should do differently next time is to start structuring my code better more and more until I figure out what CSS I should use. Next time, I will learn how to structure my CSS better and also work more projects based on CSS.

What challenges did you encounter, and how did you overcome them?

The challenges did I encounter is the top image because I wanted to center it and mix it on top of the container. The way I overcome these challenges is to figure out how to center the picture. You make the top image as it's own and center it between the containers.

What specific areas of your project would you like help with?

The specific areas of my project that I needed help with is the image background. That is the area I needed help with because the image needs to be put together and fixed.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 6 months ago

Hello @CoderExplore365!

Your project looks really good!

I just have one suggestion:

You don't need a separate container to create that background pattern. You can use both background-color and background-image together on the body. They will not cancel each other.

I hope it helps!

Other than that, great job!

Yrwin Avellona• 70

@CoderExplore365

Posted 6 months ago

@danielmrz-dev I needed some help on the image is because it is separate from each other. I needed a code on how to do it.

Daniel 🛸• 44,230

@danielmrz-dev

Posted 6 months ago

@CoderExplore365

I just gave you the code. Use background-image to insert the image and background-color for the color. Both on the body. Then use background-size: contain; so the image will fit correctly.

That's 3 lines of code. 😊

Yrwin Avellona• 70

@CoderExplore365

Posted 6 months ago

@danielmrz-dev I totally understand the background which is good. The only thing I needed some fix is the girl that is listening to music. It is separated from the order-summary container and the picture with the girl on headphones. What is the code for that because I wanted to know how to put it together because the image outside looks like they are separated?

Please log in to post a comment

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