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

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

References

<textarea>Area di testo libero espandibile per form HTML
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<div>Crea contenitori generici o sezioni in una pagina
application-x-www-form-urlencodedCodifica dei caratteri di un form
minImposta il valore numerico o temporale minimo per un elemento input
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina

Users

Log in to search for users

Explore

Find inspiration

Inizio gioco progetto di informati

Heads Or Tails Tally. pre ai

Calcolo Costo Totale

Eleganza Gioielli (Ufficiale)

Gesù nostro signore(2)

INFORMATICA - ESERCIZIO 2 RISOLTO

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 | Corso extracurricolare WEB SERIES</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>