A challenge for students looking to push their flexbox skills or try their hand at CSS Grid.
Check assets/design-files for the page that we are looking to mimic.
Notice the gradient header. May want to look up gradients for background images...
There's some text there, might I suggest https://hipsum.co to get some humerous filler text. Come up with your own header.
You can find some images in assets/images. Notice the images are all different sizes but the widths are uniform and the heights maintain the aspect ratio. Hmmmmm..... https://www.w3schools.com/css/css3_images.asp
Feel free to use flex box or grid... grid you say? https://css-tricks.com/snippets/css/complete-guide-grid/
If you choose to use flexbox consider columns over rows.
A row of buttons and one is selected. I will suggest to style all the buttons like the unselected. And then add a class "selected" to the first one and style that class to make it look different. Check stretches after that.
Add more photos, you can get them from https://unsplash.com
Can you make those buttons work? Like click a different one and move the "selected" class to it and take it off the last one? This is not an easy task, it will require some Javascript you have not seen at Lambda yet https://stackoverflow.com/questions/32979044/move-class-between-elements-with-pure-javascript-without-using-jquery
Have fun, what other features can you add? Can you click that picture and make it bigger in a modal? Click the picture and have it take you to it's image URL? Style it better? Go for it!