Lots of websites use "cards" to make browsing more appealing. This recipe site has styled the overview information about some of its recipes to look like cards.
But, the recipes aren't organized well on the page. Your job will be to use layout to make the recipe cards look great.
A grid for the cards
- Make the div with class container a flexbox by setting
display
toflex
. - Adjust the flex properties applied to the
card
andcontainer
classes so that the cards show nicely in a flexible grid. Setflex-wrap
towrap
so that the cards go onto the next line.
When you open the page in a wider screen, the cards should show side-by-side. When the screen is smaller, it'll show fewer columns.
A max-width for the page
- On large screens, the content looks too thin. Set a
max-width
of900px
on the body and the header so that everything fits nicer. - Move everything to the center by setting
margin: auto
on the body and header.
A fixed header
- Use the
position
property to make the header stay at the top when scrolling. - When you do, it might look weird at first! Give it a background color like
#fff
to fix this. - Now, there's not enough space at the top, so the recipes aren't showing up right. Add margin-top of to the
.container
to give the header enough space. - Set the
top
to0
so that the header is not shifted down - The
position
change means the header isn't automatically as wide as it should be. Addwidth: 90%
to the header.
When your work is complete, the site should look like this:
Idea, recipe descriptions, and links from https://www.simplyrecipes.com/. Check out their version of cards - it's not all that different from this one!