Skip to content
Submitted over 1 year ago

Responsive News Homepage using Grid layout and basic java script.

Kiran kumar•120
@kiran1095
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 have completed this chanllenge by using grid-layout.

Few of my questions or difficulties I have faced is:

  • When I have opened the navigation in mobile view, the background should be in blur state, I have done that using javascript to add class, is their any other way I can do this?
  • The last part of grid where I have three sections of images and texts, the images are not aligned properly, How can i do that?

Please let me know your feedback and anything I can be updated, so that I also can learn about new things.

Thanks.

Community feedback

  • S MD suleman•3,530
    @sulemaan7070Posted over 1 year ago

    hey Kiran kumar😄, I have inspected your code and as for the blur I see you have added the class

    .blur_background {
  background-color: hsla(240, 100%, 5%, 0.3);
}🚫

    to achieve the blur effect you can use the backdrop-filter property..

    .blur_background {
  background-color: hsla(240, 100%, 5%, 0.3);
  backdrop-filter: blur(3px);✅
}

    2.As for your second concern I have played around with the code to center items in the last part of the grid

    .block_01 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1em;
}

    play around with the image size to match the site with the design..

    Hope that helps, happy coding✅😄👍🏻

    Marked as helpful
    1
    Kiran kumar•120
    @kiran1095Posted over 1 year ago

    @sulemaan7070 Thanks suleman for your time and review, the above answers are helpful for me in learning new things.

    1
    S MD suleman•3,530
    @sulemaan7070Posted over 1 year ago

    @kiran1095 it's my pleasure helping you buddy!!😄

    1

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