Submitted 6 days ago

Responsive page using Flexbox and Grid

Sanya•110

@Sanya-Zg

Preview site View code

This is a solution for...Meet landing page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I learned a little to calculate the next steps

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

The problem of placing a picture and a color layer on top.

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

How to correctly place a color layer over a picture

Community feedback

Dylan Heslop•1,570
@dylan-dot-cPosted 6 days ago
Hey well done!

A quick way to put a color over a background-image would be to use this code.

background: linear-gradient(45deg, rgba(77, 150, 169, 90%), rgba(77, 150, 169, 90%)), url(./assets/desktop/image-footer.jpg)

this essentially adds 2 backgrounds, the linear-gradient where you used the same transparent color to remove the gradient effect and the image that should be on the background.

With this you can see that we can specify multiple images on a background so you can do the same for the header/hero section you have. Make them both background-images and align one left center and the other right,center. You can also research up about it as you use the , to separate the images. That should get rid of the overflow you have on some screen sizes.

You also have some extra work to do with the responsive design. I suggest you work on mobile-first then do larger screens as I find things to be easier that way. And especially since mobile designs are normally more simple compared to desktops.
Marked as helpful
0

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