Interaktive CSS-øvelser

<main>
  <section data-surface="default">
    <h2>Default Section</h2>
    <div class="grid">
      <div class="card">
        <h3>Card</h3>
        <p>Lorem ipsum dolor sit.</p>
      </div>
      <div class="card">
        ...
      </div>
      <div class="card">
        ...
      </div>
      <div class="card">
        ...
      </div>
    </div>
  </section>
  
  <section data-surface="dark">
    <h2>Dark Section</h2>
    ...
  </section>
  
  <section data-surface="muted">
    <h2>Muted Section</h2>
    ...
  </section>
</main>

Preview

Default Section

Card

Lorem ipsum dolor sit.

Card

Lorem, ipsum.

Card

Lorem ipsum dolor sit amet.

Card

Lorem ipsum dolor sit.

Dark Section

Card

Lorem ipsum dolor sit.

Card

Lorem, ipsum.

Card

Lorem ipsum dolor sit amet.

Card

Lorem ipsum dolor sit.

Muted Section

Card

Lorem, ipsum dolor.

Card

Lorem ipsum dolor sit.

Card

Lorem ipsum dolor sit amet.

Card

Lorem, ipsum dolor.