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

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

References

formenctypeDefinisce il tipo di codifica dei dati di un elemento input
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
classDefinisce una o più classi per elemento
<li>Inserisce voci all'interno di una lista
<hr>Inserisce una linea orizzontale
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.

Users

Log in to search for users

Explore

Find inspiration

WEX prova HTML(2)

Figure & Figcaption Music Album Pr

HTML con classi

Media ponderata

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>