loader by @Codewith.it - Codewith.it

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

Referenze

<th>Definisce una cella di intestazione di una tabella HTML.
<h5>Titolo di intestazione di quinto livello
<iframe>Crea un frame all'interno di una pagina HTML.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
langSpecifica la lingua del contenuto di un elemento
<title>Definisce il titolo della pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

AoIT Dashboard 2024 v1

TEST COLSPAN ROWSPAN

Banner cercatutto

Top 5 Most Expensive Sports Cars

ESAME (TORTA DELLA NONNA)

Pagina di esempio

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

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

*{ }