Watch the result of this project >> here

• Learn about CSS media queries

• Complete these exercises to get a good sense of them
• Do NOT use any CSS frameworks

Create an HTML file and a CSS file. Make the background color of the body red when the width of the viewport is smaller than 480px, green when the viewport width is bigger than (or equal to) 480px and smaller than 1024px, and blue when the viewport is bigger than (or equal to) 1024px. If you want prettier colors, try https://colorhunt.co/ for inspiration.

💡 480 and 1024 are also called breakpoints. They are typically used as threshold between cell phone, tablet, and computer.

Add three div: one div with the id="small", one div with the id="medium", another div with the id="large". In each element add the word small, medium and large respectively as content for display purposes. Make it so only one div is displayed, according to the width of the current viewport.

In each div, add a title and a few paragraphs (lorem ipsum, and such). Give the title a descriptive text (for example: "Content for smartphones"). Change the font size according to the device type.

Make it so that :

• if small, the 3 divs are stacked on top of one and other.
• if medium, the first div takes 2/3 of width, the second 1/3 of width and the third the full width.
• if big, the 3 divs should be next to one another.