SEMI al FUTURO Social Wall by @marco_ballarin - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<blockquote>Inserisce citazioni in un documento HTML
downloadConsente di scaricare file al click di collegamento ipertestuale.
<select>Usato per creare un menu a tendina.
<input>Definisce un area di input per l'invio di dati e informazioni
<tr>Definisce le righe di una tabella (rows)

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Cheeseburger div

HOTEL STELLA MARIS

Gesù nostro signore(2)

Calcolatrice Top

Futura Design - Agenzia di Design

Keter Signature

Tabella esercitazione esame

Quiz ristrutturazione

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8" />
  <title>SEMI al FUTURO Action Ten! | Rassegna Social</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <style>
    body {
      background: #ffffff;
      padding: 20px 20px;
    }

    /* --- CONTENITORE & SCROLLING --- */
    .grid {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scroll-behavior: smooth;
      padding-bottom: 1.2rem;
    }

    .grid.scrolling {
      scrollbar-width: thin;
    }

    .grid.scrolling::-webkit-scrollbar {
      height: 6px;
    }

    /* --- CARD --- */
    .card {
      flex: 0 0 auto;
      width: min(500px, 80vw);
      background: #fafafa;
      padding: 20px;
      border-radius: 16px;
      border: 1px solid #ddd;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      scroll-snap-align: start;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    /* --- IFRAME SOCIAL --- */
    .embed {
      width: 100%;
      overflow: hidden;
      border-radius: 12px;

    }

    .embed iframe {
      width: 100%;
      aspect-ratio: 9 / 16;
      border: 0;
      border-radius: 12px;
      display: block;
      max-height: 82vh;
    }

    /* --- RESPONSIVE --- */
    @media (max-width: 600px) {
      .card {
        width: 88vw;
      }

      .embed iframe {
        aspect-ratio: 9 / 18;
        max-height: 82vh;
      }
    }
  </style>
</head>

<body>

  <div class="grid">

    <!-- Giovanna Frisoli -->
    <div class="card">
      <div class="embed">
        <iframe
          src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fstory.php%3Fstory_fbid%3D10241895958686378%26id%3D1556092578&show_text=true&width=500"
          style="max-width: 100%;" scrolling="no" allowfullscreen="true" loading="lazy">
        </iframe>
      </div>
    </div>

    <!-- Elena Manenti -->
    <div class="card">
      <div class="embed">
        <iframe src="https://www.instagram.com/p/DYIL_Jkjdt8/embed" scrolling="no" loading="lazy"></iframe>
      </div>
    </div>

    <!-- Marzia Pontone -->
    <div class="card">
      <div class="embed">
        <iframe
          src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fstory.php%3Fstory_fbid%3D2383338488744045%26id%3D100012037514270&show_text=true&width=500"
          style="max-width: 100%;" scrolling="no" allowfullscreen="true" loading="lazy">
        </iframe>
      </div>
    </div>

    <!-- Diana De Marchi -->
    <div class="card">
      <div class="embed">
        <iframe src="https://www.instagram.com/p/DYMhD5giBE3/embed" scrolling="no" loading="lazy"></iframe>
      </div>
    </div>

    <div class="card">
      <div class="embed">
        <iframe
          src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F100068568811064%2Fposts%2F1298216335807315%2F&show_text=true&width=500"
          style="max-width: 100%;" scrolling="no" allowfullscreen="true" loading="lazy">
        </iframe>
      </div>
    </div>

  </div>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const el = document.querySelector(".grid");
      if (!el) return;
      let timeout;
      el.addEventListener("scroll", () => {
        el.classList.add("scrolling");
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          el.classList.remove("scrolling");
        }, 400); // Dopo 0.4s senza scroll sparisce
      });
    });
  </script>

</body>

</html>