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

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

References

<a>Inserisce link e collegamenti ipertestuali
valueValore alfanumerico o booleano contenuto in un elemento
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
<em>Formatta il testo in corsivo/italico enfatizzato
<br>Inserisce uno spazio vuoto tra due elementi HTML.
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input

Users

Log in to search for users

Explore

Find inspiration

UFFICIALE SITO REGIONI

esercitazione 1

Research Profiles

disney plus project

Pitone Tutorial -esercizio conclus

Ufficio FSL [Fumetto Toastmasters]

esercitazione4.html

Con nome bandiera(2)

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>