Responsive page using flexbox and grid

Hey @Lwmeek,

Nicely done! It looks great. I was going to make the same comment as @nelsonleone regarding the Instagram card. His suggestion is also how I solved the problem. As for the color theme, I would suggest taking a look at prefers-color-scheme as this will allow you to have the color scheme automatically be light/dark based on what the users has set as their preference.

Here are some videos showing how this can be accomplished, as well as a way to use your css color variables. Going this route I was able to get the color toggle working with very few lines of code.

const colorButton = document.querySelector(".header__color-toggle");

colorButton.addEventListener("click", () => {
  document.body.classList.toggle("darkmode");
});

Anyways here's the links. Hope this was helpful!

Kevin Powell

Atila

Keep up the great work!

**HELLO....congrats on completing this challenge 🎉 🎉 🎉 **

I have some tips for you on your question ,hope it was helpful. The lines on the cards(e.g instgarm gradient color). You can use the ::after or ::before class to achieve them . And for the instagram , it's a linear-gradient. setbackground: linear-gradient(to right,....gradient colors)**

cards::after{
  content:"";
  width:100%;
 height:.3em(or any hat its best);
 position:absolute;
 top:0;
 left:0;
background: --facebook-color / instagram -> linear-gradient(to right,--instagram-color)
}