Frontend Mentor | Responsive News Homepage using Grid layout and basic java script. coding challenge solution

Solution retrospective

Hello everyone,

I have completed this chanllenge by using grid-layout.

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

@sulemaan7070

Posted about 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

@kiran1095

Posted about 1 year ago

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

@sulemaan7070

Posted about 1 year ago

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

Responsive News Homepage using Grid layout and basic java script.