Open data explorer

How to start?

Edit

Here are some tips

First think about where to you need some flexbox layout.

  1. Look at the mdn docs
  2. Start with the inner components.
  3. Do not be afraid to nest flex boxes.
  4. Start with the header.

How to align the images

We have added some challenge to get the border-radius of the images right. Be creative and have a look at the following css selectors and use them creatively.

  • :has
  • :not
  • Or try another approach, there are many ways in css to achieve the desired behaviour.

The action menu

The final challenge.

  • Think about how to add the separator with css only.
  • What pseudo classes can you use to not add the separator to every element?
  • You might need to combine multiple pseudo classes to achieve the desired behaviour.

A card with a table

Edit
Key Value
1 blub
4 blubber

Image with head