left arrow Back Print to CSS | 1 of 52

Everyone loves penguins

Penguins are amazing birds! They are not quite like any bird you have seen before in your backyard or at the park. They have adapted to their cold environment in a way that makes them pretty special.

Penguins are flightless birds. While other birds have wings for flying, penguins have adapted flippers to help them swim in the water. Most penguins live in the Southern Hemisphere.

The Galapagos Penguin is the only penguin species that ventures north of the equator in the wild. Large penguin populations can be found in countries such as New Zealand, Australia, Chile, Argentina and South Africa. No penguins live at the North Pole. Penguins eat a range of fish and other sealife that they catch underwater. Penguins can drink sea water.

Penguins spend around half their time in water and the other half on land. The Emperor Penguin is the tallest of all penguin species, reaching as tall as 120 cm (47 in) in height.

King Penguins are the second largest penguin species. They have four layers of feathers to help keep them warm on the cold subantarctic islands where they breed. Chinstrap Penguins get their name from the thin black band under their head. At times it looks like they’re wearing a black helmet, which might be useful as they’re considered the most aggressive type of penguin.


Week 1

Layout Breakdown

The original design is from a report about Norwegian commercial property market which I found on Pinterest plus I found a PDF of what looks like the original text document. I chose to use a 2 column grid and and then use a 6 column grid for the textual content which allowed me to position the title. I could maybe have used padding left and stuck to a 1 column grid for the content and relied on CSS columns to achieve the 3 columns of text. For the image, I've added

 object-fit: cover; height: 100%; 
and wrapped it in a div so that it fills whatever space it ends up in so that it doesn't leave white space around it. I love the simple design of this page with the huge amounts of whitespace around the title. On mobile, this design simply cascades.

left arrow Back