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

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

Referenze

disabledImpedisce la modifica di un input
maxImposta il valore numerico o temporale massimo per un elemento input
formmethodDefinisce il metodo di invio dei dati oltre a method
<tfoot>Definisce il footer o sezione inferiore di una tabella.
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Costruzione di tabella con html5

RadioTorchiarolo:NUOVO SITO - Home

Web Design Final

Congressional District Information

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>