Submitted 7 months ago

Responsive landing page using HTML5 and CSS Flexbox

Gillian Oliveira•260

@lia-oliveira

A solution to the Meet landing page challenge

Preview Code

Solution retrospective

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

The challenges were many. For example:

Positioning the image in the background The floating numbers The hero image splitting into two separate images I researched, watched an entire course on Flexbox, and used a trial-and-error approach.

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

I’d like to learn how to position a background image exactly as it appears in the layout and how to control its "zoom" effect.

Code

Please log in to post a comment

Community feedback

Ronnarit00000•310

@Ronnarit00000

Posted 7 months ago

The pictures size moblie, table and desktop are of different sizes. Make the background "zoom" effect."

This solution use image desktop-size from url('./../images/desktop/image-footer.jpg') only.

step 1 : remove image style on viewport 1440

@media (min-width: 1440px){
.bkg-image {   /*remove this*/
   background-image: url('./../images/desktop/image-footer.jpg');  /*remove this*/
   background-position: top; /*remove this*/
 }
}

step 2 : remove image style on viewport 768 - 1440

@media (min-width: 768px) and (max-width: 1440px) {
.bkg-image { /*remove this*/
  background-image: url('./../images/tablet/image-footer.jpg'); /*remove this*/
 } /*remove this*/
}

step: 3 change image background in the line code : 322

from

.bkg-image {
   /*image mobile size*/
   background-image: url('./../images/mobile/image-footer.jpg');
}

.bkg-image { 
    /*image desktop size*/
    background-image: url('./../images/desktop/image-footer.jpg');
}

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