You have been provided with some raw HTML, basic CSS, and images and need to create a layout for the design, which should look just like the image below.
You need to implement the webpage layout and accomplish these tasks:
- Display the navigation items in a row, with an equal amount of space between the items.
- The navigation bar should scroll with the content and then become stuck at the top of the viewport when it reaches it.
- The image that is inside the article should have text wrapped around it.
- The
articleandasideelements should display as a two column layout.- The columns should be a flexible size so that if the browser window shrinks smaller the columns become narrower.
- The photographs should display as a two column grid with a 1 pixel gap between the images.
There are a few ways in which you could achieve some of these tasks, and there often isn't a single right or wrong way to do things.
You will not need to edit the HTML in order to achieve this layout.
The techniques you should use are:
- Positioning
- Float
- Flexbox
- CSS Grid Layout
The purpose of this challenge is to get you working with different layout techniques, and test that you understand how each of them behaves.