Skip to content
Submitted 12 months ago

News Homepage using html and pure css

Divnoor-4602•100
@Divnoor-4602
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello everyone, I just completed this HTML/CSS project and it was my first try creating an animated sidebar icon using pure CSS. Be sure to check it out! Feel free to ask any question if required :3

Community feedback

  • Suraj Neupane•190
    @VectorJamoPosted 12 months ago

    Hi there, your animated sidebar looks pristine! Just some tips for you.

    i. Give a max-width for your main site wrapper div instead of giving it a width of 100%. This makes sure that your site does not look weird on big displays. (Try zooming out all the way and see what happens in both the cases!). So, as the READ ME file suggested, use max-width: 1440px for this project.

    ii. Disable scroll when the user is on the navigation menu in mobile. Right now, if you scroll with the menu bar on, you can see it clip off! To fix it, you can either disable scroll on the body, OR give the mobile nav menu a position: fixed, height: 100vh and right: 0; to make sure it says at the same place.

    Happy coding!

    Marked as helpful
    2
    Divnoor-4602•100
    @Divnoor-4602Posted 12 months ago

    @VectorJamo Ill follow these and post a new solution! thank you so much

    0

Please log in to post a comment

Log in with GitHub

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