loader by @Codewith.it - Codewith.it

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

References

minlengthDetermina il numero minimo di caratteri per un elemento input
_selfApre collegamenti ipertestuali nella stessa pagina del browser
formmethodDefinisce il metodo di invio dei dati oltre a method
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
animationDefinisce i parametri dell'animazione di un elemento o selettore
_topApre collegamenti ipertestuali nell'elemento parent assoluto

Users

Log in to search for users

Explore

Find inspiration

esercitazione n. 1

ESERCIZIO FINALE

informatica 13/10

inserimento immagini in un testo

black - social bar

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.

<html>
  <head>
    <style>
      body{
        background-color:#1f242a
      }
      .obj {
        background: rgb(2,0,36);
        background: linear-gradient(135deg, rgb(4,0,68) 0%, rgba(9,9,121,1) 30%,  #2A6FFF 100%);
        -webkit-box-shadow: inset 0 0 20px #fff7;
        box-shadow: inset 0 0 20px #fff7;
        width:15vh;
        border-radius:10px;
        height:15vh;
        min-width:100px;
        min-height:100px;
        top:0;
        bottom:0;
        position:fixed;
        left:0;
        right:0;
        margin:auto;
        -webkit-animation: rotate-s 7s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite both;
        animation: rotate-s 7s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite both;
      }
      @keyframes rotate-s {
        0% {
          -webkit-transform: scale(1) rotateZ(0);
          transform: scale(1) rotateZ(0);
          border-radius:50%;
        }
        40% {
          -webkit-transform: scale(0.35) rotateZ(675deg);
          transform: scale(0.35) rotateZ(675deg);
          border-radius:10%;

        }
        50% {
          -webkit-transform: scale(0.28) rotateZ(700deg);
          transform: scale(0.28) rotateZ(700deg);
          border-radius:20%;
          -webkit-box-shadow: inset 0px 0px 20px #fff9;

        }
        75% {
          -webkit-transform: scale(0.7) rotateZ(500deg);
          transform: scale(0.7) rotateZ(500deg);
          border-radius:40%;
          border:none;
        }
        100% {
          border-radius:50%;
          -webkit-transform: scale(1) rotateZ(360deg);
          transform: scale(1) rotateZ(360deg);
          
        }
      }
      .obj:hover{
        -webkit-animation: rotate-f 4s cubic-bezier(0.770, 0.000, 0.175, 1.000) both;
        animation: rotate-f 4s cubic-bezier(0.770, 0.000, 0.175, 1.000) both;
      }
      @-webkit-keyframes rotate-f {
        0%{
          border-radius:50%;
        }
        20% {
          border-radius:30%;
          -webkit-transform: scale(0.8) rotateZ(800deg);
          -webkit-box-shadow:inset 0 0 60px #fff;
          box-shadow:inset 0 0 10px #fff;
        }
        40% {
          border-radius:50%;
          -webkit-transform: scale(1) rotateZ(360deg);
          transform: scale(1) rotateZ(360deg);
        }
        100% {
          -webkit-transform: scale(0.3) rotateZ(675deg);
          transform: scale(0.3) rotateZ(675deg);
          border-radius:0%;
        }
      }
      @keyframes rotate-f {
        0%{
          border-radius:50%;
        }
        20% {
          border-radius:30%;
          -webkit-transform: scale(0.8) rotateZ(800deg);
          -webkit-box-shadow:inset 0 0 60px #fff;
          box-shadow:inset 0 0 10px #fff;
        }
        40% {
          border-radius:50%;
          -webkit-transform: scale(1) rotateZ(360deg);
          transform: scale(1) rotateZ(360deg);
        }
        100% {
          -webkit-transform: scale(0.3) rotateZ(675deg);
          transform: scale(0.3) rotateZ(675deg);
          border-radius:0%;
        }
      }
      #msg {
        display: table;
        height: 100%;
        text-align: center;
        width: 100%;
        font-size: 10pt;
        padding-top: 200px;
        font-family: "ubuntu", sans-serif;
        color:#566980;
        position:fixed;
      }
      #msg p {
        vertical-align: middle;
        display: table-cell;
      }
      /* material icons */
      @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(https://fonts.gstatic.com/s/materialicons/v53/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
      }
      .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
      }
      a {
        color:#4f71de;
      }
      code {
        font-weight: bold;
        background: #233346;
        padding: 4px;
        border-radius: 3px;
        color: #7992b7;
      }
    </style>
  </head>
  <body>
    <div id="msg">
      <p id="msgp">
      </p>
    </div>
    <!-- Codewith.it loader -->
    <div class="obj">
    </div>
    <script>
      var textArray = [
        "Da oggi puoi integrare i tuoi progetti come file JS e CSS esterni. <b><a href='http://codewith.it/faq#integrare_css_js'>Scopri come!</a></b>",
        "La Night mode <code class='material-icons' style='vertical-align: middle;'>brightness_3</code> ti aiuta a non stancare gli occhi durante ore notturne; attivala nella barra strumenti.",
        "Vuoi aumentare il limite dei progetti per il tuo account? <b><a href='http://codewith.it/upgrade'>Effettua l'upgrade</a></b>!",
        "Hai bisogno di tenere i progetti privati? <b><a href='http://codewith.it/upgrade'>Effettua l'upgrade</a></b>!",
        "Sapevi che Codewith.it &egrave un progetto completamente italiano?",
        "Vuoi imparare a realizzare siti web? Segui <b><a href='https://www.byte-post.com/tag/corsi-di-bytepost/'>i corsi GRATIS di HTML, CSS, JS su BytePost</a></b>.",
        "<b>Hai bisogno di fare una presentazione?</b> Usa la versione di integrazione (Embed<code>&lt;&gt;</code>) per una rapida visualizzazione",
        "Codewith.it &egrave una delle migliori piattaforme sul web per imparare a realizzare pagine HTML.",
        "Lo sapevi? Codewith.it &egrave un progetto nato su <b><a href='https://www.byte-post.com'>BytePost</a></b>.",
        "Lo sapevi? Puoi indentare facilmente il codice selezionandolo e premendo <code>SHIFT+TAB</code>.",
        "Aggiungi i tag nei tuoi progetti; aiuteranno a comparire pi&ugrave facilmente nela pagina \"Esplora\"",
        "Aggiungendo una buona descrizione ai tuoi progetti, possono comparire nelle ricerche di Google",
        "Cerca e trova parole negli editor premendo <code>CTRL+F</code>",
        "Il codice non verrÃ  eseguito fino a quando non avrai smesso di scrivere.",
        "<b>Cambia linguaggio</b> cliccando sulla piccola freccia in basso a destra in ogni editor <code class='material-icons' style='vertical-align: middle;'>arrow_left</code>.",
        "Puoi visualizzare uno specifico editor a schermo intero, cliccando su di esso e premendo <code>F11</code> da tastiera.",
        "Puoi ripristinare il savataggio precedente del progetto cliccando su <code  style='vertical-align: middle;'  class='material-icons'>restore</code>.",
        "Esegui velocemente il codice premendo <code>CTRL+INVIO</code> da tastiera",
        "Salva i tuoi progetti premendo <code>CTRL+SHIFT+S</code> da tastiera",
        "Puoi modificare gli URL dei progetti <b><a href='http://codewith.it/upgrade'>effettuando l'upgrade</a>.</b>",
        "Trova e sostituisci parole e codici con <code>CTRL+SHIFT+F</code>",
        "Duplica righe di codice con <code>CTRL+ALT+D</code>",
        "Trova un tag corrispondente con <code>CTRL+D</code>",
        "Premi <code>CTRL+SPAZIO</code> durante la la scrittura dei tag per l'auto-completamento o per aprire il menu dei tag.",
        "Puoi trovare i tutti i comandi dell'editor nell'Infobox <code class='material-icons' style='vertical-align: middle;'>info</code>",
        "Grazie al sistema ottimizzato di integrazione, puoi visualizzare i progetti anche in altri siti web.",
        "Scopri come ottenere GRATIS un piano di abbonamento PLUS di Codewith.it; <b><a href='http://codewith.it/get-free'>Leggi come</a></b>!",
        "Hai consigli su come migliorare la nostra piattaforma? <a href='http://codewith.it/contact'>Scrivici, valuteremo ogni proposta.</a></b>",
        "Problemi con il sito? <b><a href='http://codewith.it/contact'>Scrivici, e ti aiuteremo.</a></b>",
        "<code class='material-icons' style='vertical-align: middle;'>format_align_center</code> Clicca su questo simbolo per aprire \"Lorem Ipsum text generator\"",
        "<code class='material-icons' style='vertical-align: middle;' >filter_9_plus</code> Clicca su questo simbolo per aprire il conta caratteri e parole",
        "Il miglior <b>Browser web</b> per usare Codewith.it &egrave <b><a href='https://brave.com/byt493' title='Scarica Brave'>Brave</a></b>.",
        "<b><a href='https://brave.com/byt493' title='Scarica Brave'>Brave</a></b> &egrave il browser pi&ugrave <b>ottimizzato</b> e <b>veloce</b> da usare per Codewith.it."
      ];
      var randomNumber = Math.floor(Math.random()*textArray.length);
      document.getElementById("msgp").innerHTML = textArray[randomNumber];
    </script>
  </body>
</html>

*{ }