durfdoen-2.0/layouts/homepage.erb

<style>
  .main_content {
    padding: 0;
  }
</style>
<img src="/assets/placeholder.png" class="header_photo backgroundSquare"></div>
<div class="beforeTheFold">
  <article class="align">
    <h2 class="studentZijn">
      <span class="underline">Student</span> zijn is<br>
      <span class="underline">meer</span> dan studeren alleen
    </h2>
    <p class="quote">Durf Doen wil je helpen de vereniging te vinden waar jij je thuis zal voelen.</p>
    <div class="quizSpotlight">
      <a href="/quiz/">Doe de test</a>
    </div>
  </article>

  <div class="scroll">
    <a href="#main">Of scroll naar beneden voor meer info</a>
  </div>

  <div class="shade"></div>
</div>

<main id="main" class="align">
  <article>
    <h2>Kende je bijvoorbeeld deze vereniging al?</h2>
    <div class="randomVerenigingenWrapper" id="display_repo">
      <noscript>
        <div class="randomVerenigingWrapper">
          <a href="https://zeus.ugent.be">
            <section class="randomVereniging">
             <div class="randomVereniging_imageWrapper"><img loading=lazy src="https://zinc.zeus.gent" alt="logo van Zeus WPI" height="100"></div>
              <hr class="randomVereniging_hr">
              <h3>Zeus WPI</h3>
              <p>Speciaal voor mensen zonder JavaScript</p>
            </section>
          </a>
        </div>
      </noscript>
    </div>
    <div class="randomVerenigingenWrapper hidden" id="hidden_repo">
      <% for item in verenigingen %>
        <div class="randomVerenigingWrapper" <%= (item['id'] == "zeus") ? "data-iszeus" : "" %> >
          <a href="<%= item['path'] || test %>">
            <section class="randomVereniging">
             <div class="randomVereniging_imageWrapper"><img loading=lazy src="<%= item["image_url"] %>" alt="logo van <%= item['naam'] %>" height="100"></div>
              <hr class="randomVereniging_hr">
              <h3><%= item['naam'] %></h3>
            </section>
          </a>
        </div>
      <% end %>
    </div>
  </article>
</main>