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

Inserisce un commento nel codice
listCollega un elemento input con una lista di opzioni datalist
<canvas>Tag per disegnare grafica dinamica su pagine web.
formmethodDefinisce il metodo di invio dei dati oltre a method
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

La mia prima pagina HTML

Esercitazione n. 3

26/01/2024 pagina html

Inserimento immagini in un testo

Esercizio riepilogativo

STATI HTML TEST TABELLA

Lista con ricerca

Creazione di un form

esercitazione4.html

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>