responsive landing page using css and html

Community feedback

• 

  Trenton Bensheimer•190

  @tbensheimer

  Posted almost 3 years ago

  Hello and congrats on finishing this project! It looks great and very similar!

  One thing to suggest is add a width of 100% to the main with the container class and also add a height of 100vh (viewport height) as well. This will allow you to cover the whole page with the dark background with no white background occurring. Doing this will also help you center the container to the middle of the page if you use flexbox. Adding justify-content: center and align-items: center to the main should center the panel. (I would recommend learning the difference between using content or items in flexbox) Keep in mind that once you center your panel, you may need to readjust your icon hovering the image since the position is absolute.

  This project is a great accomplishment, keep up the good work!

  01

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  Hello JEEVITHA, congratulations for you challenge solution!

  I've to say that you did the hardest thing in this challenge, the hover icon on the image, well done!

  I've looked your live site and I've few considerations about the CSS:

  1.You've applied the background-color to the <main>, to have the background filling all the screen it's better you apply this property on <body.

  2.To align you card to the center is better the you use another approach, I saw that you've applied side margins to center the card. Is better you insert the display: flex inside the <main> tag in the container class and to center everything add to the body body {display: flex; align-items: center; justify-content: center;}.

  3. To keep the card with an certain value, use max-width instead of width, your can try a value between 300px and 350px to match the card width this way you've a flexible container.

  See this article to know more about centering elements with Flexbox: https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox

  I did a test using devtools and your solution works centered and flexible with this modifications I wrote you before. You can try that and write me here to say if works. Feel free to do me any question. I'll be happy to help you.

  02

  Marked as helpful