Interaktive CSS-øvelser

<main>
  <article class="product">
    <img
      class="media"
      src="/sko.png"
      width="900"
      height="900"
    />
  
    <div class="content">
      <p class="brand">
        <svg
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
        ...
        </svg>
  
        <span>NOVA</span>
      </p>
  
      <h2 id="aero-title">Aero Run 02</h2>
  
      <p class="color">Blå / orange</p>
      <p class="price">1.299 kr.</p>
  
      <div class="actions">
        <button
          id="add-aero"
          data-variant="primary"
          type="button"
        >
          <span>Læg i kurv</span>
  
          <svg
            viewBox="0 0 24 24"
            width="24"
            height="24"
          >
          ...
          </svg>
        </button>
  
        <button
          class="favorite"
          type="button"
          data-variant="ghost"
        >
          <svg
            viewBox="0 0 24 24"
            width="24"
            height="24"
          >
          ...
          </svg>
        </button>
      </div>
    </div>
  </article>
</main>

Preview

Fire fokuspunkter

<img src="/sko.png" alt="[?]">

<svg><!-- NOVA-mærke --></svg>
<span>NOVA</span>

<button type="button">
  Læg i kurv
  <svg><!-- kurveikon --></svg>
</button>

<button type="button">
  <svg><!-- hjerteikon --></svg>
</button>

NOVA

Aero Run 02

Blå / orange

1.299 kr.