Use GIT and GitHub while making this project, you can easily use this as part of your portfolio! In this project you'll be building on an existing project. It's your job to make it responsive and look organised on various devices.
Start off by downloading the HTML and images in the following folder.
You are going to write the CSS for this page, it is not allowed to change the HTML.
The page contains two grids: the first one should work using floats, the second using flexbox. Be careful not to mix the two!
Other than that you should use media queries. Here are the requirements for each device size:
- On mobile phones (smaller than 600px): a one column grid, that spans the full width
- On tablets (between 600px and 1024px): a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then after the first two items we have three columns)
- On desktops (1024px and up): a four column grid, with the exception that the first item spans two columns. - There should be some margin between the grid items
Make the page look beautiful by adding some more CSS! Include CSS rules for:
- hover states for the grid elements, to indicate to the user that they're looking at that specific drone
- A distinct font-family, found from Google Fonts. Include using the font-face rule
- Animation using transition