Ronde afbeelding testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Enkel element

HTML-voorbeeld:

<div class="image-round">
  <div class="image-container">
    <img src="/img/strand.jpg" alt="Foto van een strand">
  </div>
</div>

Op div

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.

HTML-voorbeeld:

<div class="one-third-two-thirds">
  <div class="image-round">
    <div class="image-container">
      <img src="/img/strand.jpg" alt="Foto van een strand">
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.</p>
</div>

Op elementen binnen div

HTML-voorbeeld:

<div class="one-third-two-thirds">
  <div class="image-round">
    <div class="image-container">
      <img src="/img/strand.jpg" alt="Foto van een strand">
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.</p>
</div>

Op elementen binnen ul

HTML-voorbeeld:

<ul class="column-3 images-round">
  <li>
    <div class="image-container">
      <img src="/img/strand.jpg" alt="Foto van een strand">
    </div>
  </li>

   <li>
    <div class="image-container">
      <img src="/img/strand.jpg" alt="Foto van een strand">
    </div>
  </li>

   <li>
    <div class="image-container">
      <img src="/img/strand.jpg" alt="Foto van een strand">
    </div>
  </li>
</ul>