Italiano-Cinema Laboratorio AS 25- by @marco_ballarin - Codewith.it

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

Referenze

getDefinisce un metodo di invio di dati al server
<p>Serve a definire paragrafi di testo
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
requiredRende obbligatorio un campo di input
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<a>Inserisce link e collegamenti ipertestuali

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

cablepartdos-op1.html

Mario-Block.html

Le Meraviglie d\\\\\\\\

Seasons of the Year

basi html e tag

Image Comparison Slider

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>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%;
      padding-bottom: 10px;
      font-size: 36pt;
      font-family: "Fira Sans Extra Condensed";
      text-align: center;
    }

    span {
      color: #666666;
    }

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

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

    .row {
      padding-top: 15px;
    }

    iframe {
      width: 95%;
      border: none;
      aspect-ratio: 16 / 9;
    }

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

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

    #school {
      border-right: 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: 15px;
      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 {
        padding-bottom: 17px;
        font-size: 32pt;
      }
    }
    @media screen and (max-width: 1350px) {
      h1 {
        padding-bottom: 19px;
        font-size: 28pt;
      }
    }
    @media screen and (max-width: 1100px) {
      h1 {
        padding-bottom: 21px;
        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: 35px;
      }
      #school {
        border-right: none;
      }
      #laboratory {
        margin-top: 0px;
      }
      .text-box {
        font-size: 10pt;
      }
      button {
        font-size: 13pt;
      }
    }

  </style>
</head>

<body>

  <h1>Corso extracurricolare <span>WEB SERIES</span></h1>

  <div class="text-subtitle">Una web serie realizzata dai nostri studenti e studentesse di classi che vanno dal primo al quinto anno. Le consegne da rispettare: ciascun episodio non deve durare più di 3 minuti, sono consentite 3 inquadrature al massimo, un ascensore è l'unica location possibile... e soprattutto nessuna parola!</div>

  <div class="row" id="row-1">
    <div class="column" id="video-1">
      <iframe src="https://drive.google.com/file/d/1CM6lglWHEh3dOlwubZOjbXRoVK9XtQic/preview"></iframe>
    </div>
    <div class="column" id="video-2">
      <iframe src="https://drive.google.com/file/d/10uzNFAx7qDTcG4uIcdLyKFtVPgHrWwHW/preview"></iframe>
    </div>
    <div class="column" id="video-3">
      <iframe src="https://drive.google.com/file/d/1ZGuj5D5iA329mgZgBinSzEv_AJt6AJQO/preview"></iframe>
    </div>
    <div class="column" id="video-4">
      <iframe src="https://drive.google.com/file/d/1wgl1H-KxnkhNNrVn8q4jvFq2vZBS2n2H/preview"></iframe>
    </div>
  <div class="row" id="row-2">
    <div class="column-box" id="school">
      <h2><a href="https://scuola.mohole.it/" target="_blank">Scuola Mohole</a></h2>
      <div class="text-box">
        Scuola di Cinema, Arti Visive, Scrittura e Comunicazione a Milano Lambrate, con un'ampia offerta formativa che prevede indirizzi di studio creativi come Cinema e Videomaking, Recitazione, Music Production e Canto, 2D & 3D Animation, Graphic Design, Fumetto e Concept Design, Scrittura e Storytelling, Digital Development, Fotografia, Game Design e Visual Arts. Un luogo dove creare e raccontare le proprie storie.
      </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">Michele Ravasio</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">10 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://www.youtube.com/watch?v=KXTMcKo0Yrk" target="_blank">Guarda il backstage</a>
      </div>
  </div>
  <div class="row" id="row-3">
    <div class="button-container">
      <button onclick="window.open('https://drive.google.com/file/d/1gU83-fbbuBD7eMX2gtNyc5XHRcuHqU7f/view','_blank');">PROGRAMMA DETTAGLIATO
      </button>
    </div>
  </div>
</div>

</body>

</html>