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

responsive landing page using css and html

jeevitha 70

@jeevitha1123

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


well, i found difficulty in hovering equilibrium image over another image and learnt a lot from this challenge. any suggestions and comments kindly welcome.

Community feedback

@tbensheimer

Posted

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!

Marked as helpful

0

jeevitha 70

@jeevitha1123

Posted

@tbensheimer yes i tried to do some alternatives regarding to width but didn't work definitely going to implement this in my solution. thanks for your valuable feedback keep supporting!!

0
Lucas 👾 104,420

@correlucas

Posted

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;}.

  1. 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.

Marked as helpful

0

jeevitha 70

@jeevitha1123

Posted

@correlucas sure, i am really happy to see your valuable comments .. i really struggled while making my panel to align center. i will consider your suggestions and work on it. Thank you so much

1
Lucas 👾 104,420

@correlucas

Posted

@jeevitha1123 You're welcome! Keep coding!

0

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