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

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

Referenze

widthImposta la larghezza di un elemento HTML
<title>Definisce il titolo della pagina web.
<textarea>Area di testo libero espandibile per form HTML
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<body>Tag primario di un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

image gattino siamese

disney plus project

programma di x,y,z

esercitazione8.html

lezione 10 informatica

Dashboard Palestra - MVP

codice per verifica

Costruzione tabella base

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>

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