Fumetto PCTO [Toastmasters] by @marco_ballarin - Codewith.it

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

References

_topApre collegamenti ipertestuali nell'elemento parent assoluto
<div>Crea contenitori generici o sezioni in una pagina
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<map>Inserisce immagini mappa cliccabili in un documento

Users

Log in to search for users

Explore

Find inspiration

Costruzione tabella esame

Pagina html di prova

ECOVACS GOAT A1600 LiDAR PRO

Estrazione Casuale Studenti

POESIA UNA AL GIORNO

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 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>