Italiano-Cinema [Bacheca] by @marco_ballarin - Codewith.it

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

References

<label>Mostrare un testo di etichetta per un elemento di input.
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<table>Tag primario per la creazione di tabelle
listCollega un elemento input con una lista di opzioni datalist
<tr>Definisce le righe di una tabella (rows)
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento

Users

Log in to search for users

Explore

Find inspiration

Resiliant Material

La Storia di Livia

JS Strutture dati e funzioni es1

Primo laboratorio di program

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>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comunicazione MULTIMEDIALE | La bacheca dei CAPOLAVORI</title>
  <style>

    /* GOOGLE FONTS */
    @import url(https://themes.googleusercontent.com/fonts/css?kit=34whiWDL4CxC1laOcj7OwdEjTMY3GGLBv_AxlS3Ww6f3rGVtsTkPsbDajuO5ueQw);

    /* TITOLO */
    h1 {
      padding-top: 3.5%;
      padding-bottom: 10px;
      font-size: 36pt;
      font-family: "Fira Sans Extra Condensed";
      text-align: center;
    }

    span {
      color: #666666;
    }

    /* Stili TABELLA */
    * {
      box-sizing: border-box;
    }

    .row {
      padding-top: 15px;
    }

    iframe {
      width: 95%;
      border: none;
      aspect-ratio: 16 / 9;
    }

    /* COLONNE */
    .column {
      float: left;
      width: 25%;
      text-align: center;
      padding-bottom: 15px;
    }

    /* Versioni GRADUATE */
    @media screen and (max-width: 1531px) and (max-width: 1401px) {
      h1 {
        padding-bottom: 17px;
        font-size: 32pt;
      }
    }

    @media screen and (max-width: 1400px) and (max-width: 1351px) {
      h1 {
        padding-bottom: 19px;
        font-size: 28pt;
      }
    }

    @media screen and (max-width: 1350px) and (max-width: 1101px) {
      h1 {
        padding-bottom: 21px;
        font-size: 25pt;
      }
    }

    @media screen and (max-width: 1100px) and (max-width: 901px) {
      h1 {
        padding-bottom: 23px;
        font-size: 22pt;
      }
    }

    /* Versione TABLET */
    @media screen and (max-width: 900px) {
      .column {
        width: 50%;
      }
      h1 {
        padding-top: 25px;
        font-size: 20pt;
      }
    }

    /* Versione MOBILE */
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
      }
      h1 {
        padding-top: 20px;
        font-size: 16pt;
      }
    }

  </style>
</head>

<body>

  <h1>La bacheca dei <span>CAPOLAVORI</span></h1>

  <div class="row" id="row-1">
    <div class="column" id="video-1">
      <iframe src="https://drive.google.com/file/d/18pg_4s7BA-KF-leejwvjRO1JzrcHFLta/preview"></iframe>
    </div>
    <div class="column" id="video-2">
      <iframe src="https://drive.google.com/file/d/18uqcXvfRxnADfeclF8zaF4RBw13kUutc/preview"></iframe>
    </div>
    <div class="column" id="video-3">
      <iframe src="https://drive.google.com/file/d/1919QpmmuEkoF0lIQCp69swBbtogKqxxH/preview"></iframe>
    </div>
    <div class="column" id="video-4">
      <iframe src="https://drive.google.com/file/d/19BObRt7a_u09io3WfobeenmyJ6QjrC1C/preview"></iframe>
    </div>
  </div>
  <div class="row" id="row-2">
    <div class="column" id="video-5">
      <iframe src="https://drive.google.com/file/d/19Fhf0opyR1HS05WaJwZV48D91qJCJ-0t/preview"></iframe>
    </div>
    <div class="column" id="video-6">
      <iframe src="https://drive.google.com/file/d/19Uu-UdjqWhXCbqcTTCmkhg0B8KEfDCVs/preview"></iframe>
    </div>
    <div class="column" id="video-7">
      <iframe src="https://drive.google.com/file/d/19kN4Vg7p8zbBDNGgzlhpsi2miYApbTag/preview"></iframe>
    </div>
    <div class="column" id="video-8">
      <iframe src="https://drive.google.com/file/d/19qgCPuq0D30lPAU0TLYFZ79M9k7s6THV/preview"></iframe>
    </div>
  </div>
  <div class="row" id="row-3">
    <div class="column" id="video-9">
      <iframe src="https://drive.google.com/file/d/19ygIrnhHKtrFKii4sqf3jvYwbWw7_ZtD/preview"></iframe>
    </div>
    <div class="column" id="video-10">
      <iframe src="https://drive.google.com/file/d/1ABz1XOd2VK00MM6ztWijy4-RpHMyAkhS/preview"></iframe>
    </div>
    <div class="column" id="video-11">
      <iframe src="https://drive.google.com/file/d/1ALloMUtbH9aBRJr0P_e-A-94WpN_DCx9/preview"></iframe>
    </div>
    <div class="column" id="video-12">
      <iframe src="https://drive.google.com/file/d/1AQJdd05h0CYHrfKlzg5vD3poUnxYSDfu/preview"></iframe>
    </div>
  </div>

</body>

</html>