Progetto Cinema Lab 2526 by @marco_ballarin - Codewith.it

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

References

<option>Serve ad inserire una voce in un menu di selezione.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<p>Serve a definire paragrafi di testo
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

Review of Functions I

Titolo della Pagina

Heads Or Tails Random Tally

Esercizi 05/03/2024 es3

JS Oggetti ed eventi es3

esercizio 1.1-1.6

Dashboard Palestra - MVP

5/10/24 es. 7 -parole ripetute

pagina_personale

Lezione 4 (terza parte)

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>