Ufficio FSL [Fumetto Toastmasters] by @marco_ballarin - Codewith.it

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

Referenze

<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
formSpecifica a quale form appartiene un elemento.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Pro Vercelli Segreteria

meraviglieItaliaFrame

google search clone

5/10/24 es. 2 - conta Parole

\\\"Il Razzismo - Un Tema Importa(2)

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 lang="it">

<head>
  <title>Ufficio PCTO | Toastmasters</title>
  <style>
    /** CENTRATURA **/

    .desktop-version {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .mobile-version {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    /** BALOON **/

    /* Stile del fumetto */
    .balloon {
      position: relative;
      padding: 15px;
      padding-top: 5px;
      padding-bottom: 5px;
      margin: 1em 0 1.5em;
      border: 5px solid red;
      color: black;
      font-family: Lato, Helvetica, sans-serif;
      line-height: 1.6;
      text-align: justify;
      background: #fff;
      border-radius: 10px;
    }

    /* Stile della linguetta */
    .balloon:before {
      content: "";
      position: absolute;
      bottom: -20px;
      left: 40px;
      border-width: 20px 20px 0;
      border-style: solid;
      border-color: red transparent;
      display: block;
      width: 0;
    }

    .balloon:after {
      content: "";
      position: absolute;
      bottom: -13px;
      left: 47px;
      border-width: 15px 13px 0;
      border-style: solid;
      border-color: #fff transparent;
      display: block;
      width: 0;
    }

    /** FIRMA **/

    .signature {
      color: black;
      font-family: Lato, Helvetica, sans-serif;
      font-style: italic;
    }

    /** GRASSETTO **/

    strong {
      color: red;
    }

    /** VARIANTE PER CELLULARI **/

    @media (max-width: 480px) {
      .desktop-version {
        display: none;
      }

      .blockquote {
        padding-top: 1.2em;
        margin-left: 20px;
        margin-right: 10px;
        font-family: Lato, Helvetica, sans-serif;
        line-height: normal;
        position: relative;
      }

      /* Stile delle virgolette */
      .blockquote:before {
        font-family: Arial;
        content: "\201C";
        color: red;
        font-size: 6em;
        position: absolute;
        left: -7px;
        top: -20px;
        margin-left: -15px;
      }

      .blockquote-final {
        font-family: Lato, Helvetica, sans-serif;
        margin-top: -13px;
        text-align: justify;
        padding-top: 1.2em;
        line-height: normal;
      }

      .blockquote-final:after {
        font-family: Arial;
        content: "\201D";
        color: red;
        font-size: 6em;
        position: absolute;
      }

      p {
        font-family: Lato, Helvetica, sans-serif;
        text-align: justify;
        font-size: 0.7em;
        margin-left: 2px;
        margin-right: 10px;
      }

      .signature {
        padding-top: 10px;
        padding-left: 30px;
        margin-left: 2px;
      }
    }

    /** VARIANTE PER DESKTOP **/

    @media (min-width: 481px) {
      .mobile-version {
        display: none;
      }
    }
  </style>
</head>

<body>
  <!-- =================================== -->
  <!-- == Versione DESKTOP con fumetto. == -->
  <!-- =================================== -->
  <div class="desktop-version">
    <div class="balloon">
      <!-- Testo dell'esperienza. -->
      <p>
        L’esperienza PCTO con i <strong>membri Toastmasters</strong> è stata molto positiva.
      </p>
      <p>
        Siamo stati introdotti ad argomenti estremamente utili per la vita di tutti i giorni: come
        <strong>costruire un buon discorso</strong> di presentazione, cosa fare e cosa non fare per mantenere sempre
        alta l’attenzione degli ascoltatori. È stato approfondito anche il tema dell’improvvisazione, con idee
        divertenti e originali, che strappavano sempre un sorriso.
      </p>
      <p>
        Gli incontri, una volta a settimana, per un totale di circa <strong>8 settimane</strong>, erano molto piacevoli.
        L’ambiente era inclusivo e costruttivo, e questo ha favorito <strong>apprendimento e creatività</strong>. Già
        dopo i primi discorsi insieme siamo riusciti a scioglierci e condividere parti di noi uniche, che normalmente
        non sarebbero venute fuori, e abbiamo anche imparato a conoscerci meglio.
      </p>
      <p>
        L’esperienza è stata quindi <strong>formativa, utile e divertente</strong>, proprio come dovrebbe essere
        l’apprendimento. <em>La consigliamo molto!</em></p>
    </div>
    <!-- Firma -->
    <p class="signature">Due studentesse di terza liceo</p>
  </div>
  <!-- ==================================== -->
  <!-- == Versione MOBILE con citazione. == -->
  <!-- ==================================== -->
  <div class="mobile-version">
    <!-- Testo dell'esperienza. -->
    <p class="blockquote">
      L’esperienza PCTO con i <strong>membri Toastmasters</strong> è stata molto positiva.
    </p>
    <p>
      Siamo stati introdotti ad argomenti estremamente utili per la vita di tutti i giorni: come
      <strong>costruire un buon discorso</strong> di presentazione, cosa fare e cosa non fare per mantenere sempre alta
      l’attenzione degli ascoltatori. È stato approfondito anche il tema dell’improvvisazione, con idee divertenti e
      originali, che strappavano sempre un sorriso.
    </p>
    <p>
      Gli incontri, una volta a settimana, per un totale di circa <strong>8 settimane</strong>, erano molto piacevoli.
      L’ambiente era inclusivo e costruttivo, e questo ha favorito <strong>apprendimento e creatività</strong>. Già dopo
      i primi discorsi insieme siamo riusciti a scioglierci e condividere parti di noi uniche, che normalmente non
      sarebbero venute fuori, e abbiamo anche imparato a conoscerci meglio.
    </p>
    <!-- Ultimo paragrafo. -->
    <p class="blockquote-final">
      L’esperienza è stata quindi <strong>formativa, utile e divertente</strong>, proprio come dovrebbe essere
      l’apprendimento. <em>La consigliamo molto!</em>
    </p>
    <!-- Firma -->
    <p class="signature">Due studentesse di terza liceo</p>
  </div>
</body>

</html>