News Homepage Challenge (HTML, CSS, JS)

Hi Starry Robot 🤖

Actually, the hamburger menu image and closed menu image are available to use. But if you prefer to use CSS instead so it could be animated when open and close menu, it could be achieved pretty easily using CSS.

Add the following declarations to .hb_line class to make the transition smooth:

background-color: #333;
transition: transform 0.2s, opacity 0.2s;

Add this style to give transition to the hamburger menu:

body.fade .hb_line:first-child {
  transform: translateY(7px) rotate(45deg);
}
body.fade .hb_line:nth-child(2) {
  transform: translateX(10px);
  opacity: 0;
}
body.fade .hb_line:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

That's it. You could play with the transform property to make the transition works as you want.

Regarding the bottom part, I think there's better method to make responsive image than by reducing the image width. If we reduce the image width without reduce the container of the image, it will only increase the gap between the image and the text, and the proportion will be a bit off.

Remove this styling:

.news-item img {
  width: 60%;
}

And for .news-item, I will personally remove this declaration: grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));, because while it will automatically adjust the width of its children, at some point it will not work as good as we want it to. Instead, I will use something like grid-template-columns: 1fr 2.5fr;, and add @media queries at necessary breakpoints.

All of these are my personal view. It could be right or wrong. At least, I hope these could give you a new perspective.

Happy coding!