Progetto Cinema Lab 2526 by @marco_ballarin - Codewith.it

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

References

formmethodDefinisce il metodo di invio dei dati oltre a method
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
relServe a definire la relazione tra il documento e una risorsa.
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.

Users

Log in to search for users

Explore

Find inspiration

GUIDA GALATTICA PER AUTOSTOPPISTI

Questionario Serie A

Leggere Lolita a Teheran Azar Nafi

Suono musicista 09/02/24

Deutsch Plus [Box]

specialità scout2

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>PROGETTO CINEMA | Laboratorio di VIDEOMAKING</title>
  <style>

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

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

    span {
      color: #666666;
    }

    /** SOTTOTITOLO **/
    .text-subtitle {
      font-family: "Roboto";
      font-size: 16pt;
      font-style: italic;
      text-align: center;
      padding-bottom: 30px;
    }

    /** VIDEO **/
    * {
      box-sizing: border-box;
    }

    .row {
      padding-top: 15px;
    }

    iframe {
      width: 95%;
      height: 290px;
      border: none;
    }

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

    /** BOX **/
    .column-box {
      float: left;
      width: 50%;
      margin-top: 25px;
      padding-bottom: 5px;
      padding-left: 15px;
      padding-right: 15px;
    }

    #laboratory {
      border-left: 2px solid #666666;
    }

    h2 {
      font-family: "Fira Sans Extra Condensed";
    }

    a {
      color: #306da1;
      text-decoration: none;
      font-weight: bold;
    }

    .workshop {
      color: #666666;
    }

    .laboratoriale {
      color: #b7b7b7;
    }

    .text-box {
      font-family: "Roboto";
      font-size: 14pt;
    }

    .highlight {
      color: #666666;
      font-weight: bold;
    }

    /** BOTTONE **/
    .button-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 50px;
      width: 100%;
    }
    
    button {
      padding: 10px;
      margin-top: 30px;
      margin-bottom: 10px;
      padding-left: 60px!important;
      padding-right: 60px!important;
      font-family: "Fira Sans Extra Condensed";
      font-size: 19pt;
      text-align: center;
      text-decoration: none;
      color: #949494;
      background: none;
      border: 4px solid #666666;
      border-radius: 12px;
      cursor: pointer;
    }

    /** RESPONSIVE **/
    @media screen and (max-width: 1400px) {
      h1 {
        font-size: 32pt;
      }
    }
    @media screen and (max-width: 1350px) {
      h1 {
        font-size: 28pt;
      }
    }
    @media screen and (max-width: 1100px) {
      h1 {
        font-size: 25pt;
      }
      .column {
        width: 50%;
      }
      .text-subtitle {
        font-size: 14pt;
      }
      .text-box {
        font-size: 12pt;
      }
      button {
        font-size: 17pt;
      }
    }
    @media screen and (max-width: 900px) {
      h1 {
        padding-top: 25px;
        font-size: 20pt;
      }
    }
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
      }
      .column-box {
        width: 100%;
        margin-top: 10px;
      }
      h1 {
        padding-top: 20px;
        font-size: 16pt;
      }
      .text-subtitle {
        font-size: 11pt;
        padding-bottom: 25px;
      }
      #school {
        border-right: none;
      }
      #laboratory {
        margin-top: 0px;
      }
      .text-box {
        font-size: 10pt;
      }
      button {
        font-size: 13pt;
      }
    }

  </style>
</head>

<body>

  <h1>Laboratorio di <span>VIDEOMAKING</span></h1>

  <div class="text-subtitle">Una serie di video realizzati da studenti e studentesse delle nostre classi, dalla prima alla quinta. Le consegne da rispettare: ciascun episodio non deve durare più di 3 minuti, sono consentite poche inquadrature diverse, una biblioteca è l'unica location possibile... e soprattutto niente lunghi dialoghi!</div>

  <div class="row" id="row-1">
    <div class="column" id="video-1">
      <iframe src="https://drive.google.com/file/d/1TSbzLVsbCuQOqxuDK2JJ8ILQLYihRW0J/preview"></iframe>
    </div>
    <div class="column" id="video-2">
      <iframe src="https://drive.google.com/file/d/1np3-7w2j0sntFHI-getV7lA-u5PTAXNw/preview"></iframe>
    </div>
    <div class="column" id="video-3">
      <iframe src="https://drive.google.com/file/d/1lOOBXrpjLoYLZ2Zf25j5CymO4YycJ1Tb/preview"></iframe>
    </div>
    <div class="column" id="video-4">
      <iframe src="https://drive.google.com/file/d/1WqeyG9qKSAu_tVcO4scJ4rzV1eXEGA2J/preview"></iframe>
    </div>
  </div>
  <div class="row" id="row-2">
    <div class="column-box" id="school">
      <h2><a href="https://www.coeweb.org/" target="_blank">Centro Orientamento Educativo</a></h2>
      <div class="text-box">
        Associazione Centro Orientamento Educativo ETS, fondata da don Francesco Pedretti, nasce nel 1959 ed opera per lo sviluppo di una cultura del dialogo e della solidarietà. In Italia promuove progetti ed interventi di Educazione alla Cittadinanza Globale. Dal 1991 organizza a Milano il Festival del Cinema Africano, d’Asia e America Latina e dal 2019 il MiWorld Young Film Festival, il primo e unico festival di cinema per le scuole interamente dedicato allo scambio interculturale. 
      </div>
    </div>
    <div class="column-box" id="laboratory">
      <h2 class="workshop">Workshop <span class="laboratoriale">laboratoriale</span></h2>
      <div class="text-box workshop">
        I ragazzi sono stati divisi in gruppi di lavoro e sono stati guidati dal formatore <span class="highlight">Andrea Sestu</span> attraverso tutte le fasi di cui si compone una produzione video, dalla scrittura alle riprese, fino al montaggio finale. Nel corso di <span class="highlight">7 incontri pomeridiani</span> i ragazzi hanno imparato a scrivere una piccola storia, pensata per essere narrata per immagini, lavorando su come scegliere le inquadrature, come usare una videocamera e come montare un video.<br />
        <a href="https://photos.app.goo.gl/16on7UyYV4hZj6QJ6" target="_blank">Guarda il backstage</a>
      </div>
    </div>
  </div>
  <div class="row" id="row-3">
    <div class="button-container">
      <button onclick="window.open('https://drive.google.com/file/d/1G_ytZ4kfyQDRf2TVOr8LuaSZRBV2adWT/view','_blank');">PROGRAMMA DETTAGLIATO
      </button>
    </div>
  </div>

</body>

</html>