yuliya-becode / responsive-web-design Goto Github PK

1. Change the colour Create a HTML file and a CSS file. Make it so the background color of Body is red when the width of the viewport is smaller than 300px, green when the viewport width is bigger than 300px and smaller than 768px, and blue when the viewport is bigger than 768px. 2. Display / hide elements 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 to its content for display purposes. Make it so only one DIV is displayed, according to the width of the current viewport. 3. Adapt the size of the text according to the device 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. 4. Re-Arrange 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 and other.

Home Page: https://yuliya-becode.github.io/Responsive-Web-Design/