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

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

Referenze

<option>Serve ad inserire una voce in un menu di selezione.
formSpecifica a quale form appartiene un elemento.
<ol>Crea liste ordinate o numerate.
valueValore alfanumerico o booleano contenuto in un elemento
<th>Definisce una cella di intestazione di una tabella HTML.
<strong>Definisce una parte del testo importante con formattazione in grassetto.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Album-Reccomendations

Neon Flux - Visual Design in Motio

Banner cercatutto

Template prodotti generici

\"Il Razzismo - Un Tema Important

Leggere Lolita a Teheran Azar Nafi

La cicala e la formica

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>