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

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

References

maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
classDefinisce una o più classi per elemento
<li>Inserisce voci all'interno di una lista
<head>Tag primario di un documento HTML
<b>Formatta il testo in grassetto
animationDefinisce i parametri dell'animazione di un elemento o selettore

Users

Log in to search for users

Explore

Find inspiration

Form di Registrazione

Editor di testo HTML

poccodio inserimenti immagineee

Heads Or Tails Random Tally

es da correggere

Menu di Pizzeria Rebeka a Modena -

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>