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

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

References

maxImposta il valore numerico o temporale massimo per un elemento input
<h2>Titolo di intestazione di secondo livello
<h4>Titolo di intestazione di quarto livello
_topApre collegamenti ipertestuali nell'elemento parent assoluto
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
<pre>Indica una parte di testo preformattato

Users

Log in to search for users

Explore

Find inspiration

Five Random Poker Cards

Livia e la Foresta Incantata

Tabella esercitazione esame

Elaborato esame

UX / Web Design, Freelance – Pro

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>