Mutaforma by @Kaine - Codewith.it

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

References

<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<div>Crea contenitori generici o sezioni in una pagina
<title>Definisce il titolo della pagina web.
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<canvas>Tag per disegnare grafica dinamica su pagine web.

Users

Log in to search for users

Explore

Find inspiration

Esercizi 05/03/2024 es9

Immagine SEMI al FUTURO [Home]

form per il torneo misto disfor s

Esercizi lezione 19-11-20

Costruzione di tabella con html5

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 xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="generator" content="AlterVista - Editor HTML" />
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
<title>
  Mutaforma 
</title>
<!--STILE SLIDESHOW-->
<style type="text/css">
  /*<![CDATA[*/
  #slideshow {
    width: 102%;
    height:98%;
    margin: 0 auto;
  }
  #slideshow input {
    display: none}
  #mask {
    overflow:hidden}
  #slides {
    padding: 2px}
  .slide_content {
    position: relative;
    width: 900%;
    overflow: hidden;
    -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000);
    -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000);
    -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000);
    -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000);
    transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}
  #pan1:checked ~ #slides .slide_content {
    margin-left: 0}
  #pan2:checked ~ #slides .slide_content {
    margin-left: -100%;
    overflow: hidden}
  #pan3:checked ~ #slides .slide_content {
    margin-left: -200%;
    overflow: hidden}
  #pan4:checked ~ #slides .slide_content {
    margin-left: -300%;
    overflow: hidden}
  #pan5:checked ~ #slides .slide_content {
    margin-left: -400%;
    overflow: hidden}
  #pan6:checked ~ #slides .slide_content {
    margin-left: -500%;
    overflow: hidden}
  #pan7:checked ~ #slides .slide_content {
    margin-left: -600%;
    overflow: hidden}
  .pannello {
    width: 11.11111111111111%;
    float: left;
  }
  #active {
    margin-top: 2px;
    margin-left: 1%;
  }
  #active label {
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    background-color:#060606;
    list-style-type: none;
    width: 14%;
    padding: 5px;
    text-shadow: 1px 1px 1px 1px #0F0200;
    position:relative;
    text-align: justify;
    box-shadow: 0px 5px 5px #060000;
    float:left;
    margin-bottom:10px;
    cursor:pointer;
  }
  #active label:hover {
    opacity: 1;
    background: rgba(255,255,255,.06);
  }
  #pan1:checked ~ #active label:nth-child(1),
  #pan2:checked ~ #active label:nth-child(2),
  #pan3:checked ~ #active label:nth-child(3),
  #pan4:checked ~ #active label:nth-child(4),
  #pan5:checked ~ #active label:nth-child(5),
  #pan6:checked ~ #active label:nth-child(6);
  #pan7:checked ~ #active label:nth-child(7);
  /*]]>*/
</style>
<!--STILI VARI-->
<style type="text/css">
  /*<![CDATA[*/
  body {
    background-color: #0C0A09;
    background-image:url('https://i.imgur.com/3pf7AkM.png');
    overflow-x: hidden;
  }
  a {
    color:#46403d;
    text-decoration:none;
  }
  /*Scrollbar*/         
  ::-webkit-scrollbar {
    background-color:#350909;
    width:5px;
  }
  ::-webkit-scrollbar-track {
    background-color:#350909;
  }
  ::-webkit-scrollbar-track-piece {
    background-color:#350909;
  }
  ::-webkit-scrollbar-thumb {
    background-color:#000;
    border-radius:10px;
  }
  /*IMMAGINE*/
  .imma {
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    opacity:0.6;
  }
  .imma:hover {
    opacity:1;
  }
  /* ELEMENTI DELLA TABELLA */
  .img-alto {
    height: 93%;
    background-image:url('');
    background-color:black;
    position:relative;
    ;
    border-bottom: thin dotted #0D0C0C;
    padding:10px;
  }
  .cont-princ {
    padding-bottom: 4px;
    margin:10 auto;
    text-align:justify;
    padding-left: 10px;
    padding-top: 4px;
    max-height:400px;
    max-width: 673px;
    background-image:url('https://i.ibb.co/5kKWWnM/fumo-rosso.png');
    background-color:#350909;
    line-height:9px;
    border-bottom: 1px dotted #350909;
    border-top: 1px dotted #350909;
    opacity: 1.0;
    font-size: 10px;
    font-family: tahoma;
    color: #350909;
    overflow-y:auto;
    position:relative;
  }
  .pan-emporio {
    padding:5px;
    height:355px;
    overflow:auto;
  }
  .footer {
    margin:0 auto;
    text-align:justify;
    padding-left: 10px;
    padding-top: 4px;
    max-width: 660px;
    height:30px;
    background-image:url('https://i.imgur.com/B3lp7kp.png');
    background-color:#350909;
    line-height:9px;
    border-bottom: 1px dotted #350909;
    border-top: 1px dotted #350909;
    opacity: 1.0;
    font-size: 10px;
    font-family: tahoma;
    color: #350909;
    overflow-y:auto;
    position:relative;
  }
  /*Google fonts */
  @import url('https://fonts.googleapis.com/css?family=Julius+Sans+One&display=swap');
  /*Stili di testo*/
  .stile-generico {
    color:#88878A;
    font-family: trebuchet, sans-serif;
    text-shadow: 1px 1px 1px #000000;
    line-height: 12px;
    font-size: 11px;
    text-align:justify;
  }
  c {
    color:#951103;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:2px;
    font-family: 'Julius Sans One', sans-serif;
    border-bottom:dotted thin #951103;
  }
  d {
    font-family: trebuchet, sans-serif;
    color:#3a5d68;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:2px;
    text-shadow:1px 1px 1px 1px #000000;
  }
  e {
    font-family:georgia;
    color:#951103;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:2px;
    line-height:9px;
    text-shadow:1px 1px 1px 1px #000000;
  }
  f {
    font-family:georgia;
    color:#586b63;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:2px;
    text-shadow:1px 1px 0px #000000;
  }
  g {
    font-family:georgia;
    color:#676b73;
    font-size:9px;
    font-style:italic;
    letter-spacing:1px;
  }
  j {
    font-family:georgia;
    color:#515151;
    font-size:8px;
    background:#060606;
    padding:1px 3px 1px 3px;
    text-transform:uppercase;
    letter-spacing:2px;
    text-shadow:1px 1px 1px 1px #000000;
  }
  k {
    font-family: 'Julius Sans One', sans-serif;
    color:#951103;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:1px;
    text-shadow:1px 1px 1px 1px #0F0101;
  }
  l {
    font-style:italic;
    text-shadow:1px 1px 1x 1px #060000;
    text-decoration:underline dotted #444;
  }
  m {
    font-family:georgia;
    opacity: 0.5;
    color:#BD58FA;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:2px;
    text-shadow:1px 1px 0px #000000;
  }
  n {
    font-family:georgia;
    color:#707070;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:2px;
    text-shadow:1px 1px 0px #000000;
  }
  o {
    color:#88878A;
    font-family: trebuchet, sans-serif;
    text-shadow: 1px 1px 1px #000000;
    line-height: 15px;
    font-size: 13px;
    text-align:justify;
  }
  r {
    color:#951103;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:2px;
    font-family: 'Julius Sans One', sans-serif;
    border-bottom:dotted thin #951103;
  }
  /*]]>*/
</style>
</head>
<body>
  <div class="container" style="max-width: 100%; padding:0px;">
    <div class="row">
      <div class="col-md-12">
        <div class="row"> 
          <div class="col-md-8" style="background-image:
                                       url(https://i.ibb.co/d4f2RgP/2a6596-645f6e09402f4aada02940c234f422e1.gif); margin:0 auto; max-width:690px;">
            <div class="row">
              <div class="col-md-12" style="background-color:rgb(6,6,6); text-align:center; max-width:690px; max-height: 750px;">
                <!--row-->
                <div class="row">
                  <div class="img-alto col-md-12">
                    <img class="imma img-responsive" src="https://i.ibb.co/1KN1JCc/2a6596-645f6e09402f4aada02940c234f422e1.gif" style="max-width: 100%"/>
                    <!--row e col-md-12-->
                    <div class="row">
                      <div class="col-md-12 cont-princ">
                        <div id="slideshow">
                          <!-- Radio -->
                          <input checked="checked" name="pan" id="pan1" type=
                                 "radio" /> 
                          <input name="pan" id="pan2" type="radio" />
                          <input name="pan" id="pan3" type="radio" /> 
                          <input name="pan" id="pan4" type="radio" /> 
                          <input name="pan" id="pan5" type="radio" /> 
                          <input name="pan" id="pan6" type="radio" />
                          <input name="pan" id="pan7" type="radio" />
                          <div id="slides">
                            <div id="mask">
                              <!--Bottoni-->
                              <div id="active">
                                <center>
                                  <label for="pan1">
                                    <center>
                                      <k>INFO
                                      </k>
                                    </center>
                                  </label>
                                </center>
                                <center>
                                  <label for="pan2">
                                    <center>
                                      <k>Discendenza Demoniaca
                                      </k>
                                    </center>
                                  </label>
                                </center>
                                <center>
                                  <label for="pan3">
                                    <center>
                                      <k>Genesi Maledetta
                                      </k>
                                    </center>
                                  </label>
                                </center>
                                <center>
                                  <label for="pan4">
                                    <center>
                                      <k>Mutazioni Umanoidi
                                      </k>
                                    </center>
                                  </label>
                                </center>
                                <center>
                                  <label for="pan5">
                                    <center>
                                      <k>Mutazioni Animali
                                      </k>
                                    </center>
                                  </label>
                                </center>
                                <center>
                                  <label for="pan6">
                                    <center>
                                      <k>Mutazioni Parziali
                                      </k>
                                    </center>
                                  </label>
                                </center>
                                <center>
                                  <label for="pan7">
                                    <center>
                                      <k>Mutazioni Speciali
                                      </k>
                                    </center>
                                  </label>
                                </center>
                              </div>
                              <!--Contenuti-->
                              <div class="slide_content">
                                <div class="pannello" id="p1">
                                  <!-- Pannello 1 -->
                                  <div class="pan-emporio">
                                    <span class="stile-generico">
                                      <c>Creazione tabella
                                      </c> : Ringrazio il player che muove Xerxes per avermi concesso di rubacchiare i suoi codici 
                                      <u>,praticamente quasi tutto,
                                      </u> per riadattarlo.
                                      <br>
                                      <br>
                                      <c>Se sei su Mobile
                                      </c> : il cellulare tendera' a "bloccare" temporaneamente lo scorrimento verso il basso nel 
                                      momento in cui il blocco contenente il testo delle pozioni/veleni comuni sara' concluso, tuttavia sotto quel 
                                      blocco vi e' un secondo blocco di testo con il grimorio di Kaine. Continuate a scorrere manualmente per 
                                      poterlo sbloccare e vedere.
                                      <br>
                                      <br>
                                    </span>
                                  </div>
                                </div>                           
                                <div class="pannello" id="p2">
                                  <!-- Pannello 2 -->
                                  <div class="pan-emporio">
                                    <span class="stile-generico">
                                      <e><b><i>Belial</i></b> *Stirpe della Superbia*
                                      </e>
                                      <br><br>
                                      Nessuno è mai stato in grado di vivere abbastanza a lungo per tramandare il suo nome, nessuno ha mai avuto la fortuna di esser considerato suo pari poiché chiunque si fosse avvicinato a tale vetta, minacciando la sua supremazia, veniva eliminato. Belial, potrebbe esser spinto ad agire dalla superbia, venendo ricollocato a quel peccato capitale in quanto si è sempre elevato sopra chiunque, simili o meno. Dietro ad alcuni regni, artisti, inventori e altro vi era spesso una figura che li ha accompagnati nel loro tragitto, poi inspiegabilmente, com'erano giunti in vetta sono precipitati nel baratro del fallimento Lui non fa distinzioni tra nobili o semplici cittadini, poiché per lui son tutti esseri inferiori. Con diletto si avvicina a coloro che più bramano il successo e con metodi sottili e subdoli vi entra nelle grazie. Procura onori e favori così come l’appoggio dei potenti. Li aiuta e li consiglia portandoli verso la vetta da loro tanto agognata. Il suo intento, a prima vista, può sembrare benevolo e a dir si voglia altruista ma se con una mano li sospinge, con l’altra sta tessendo la rete che sarà il loro fallimento. La sua genia spesso raggiunge posizioni di un certo rilievo e sol quando si adagia in quei piccoli successi, Belial, ne mette il suo amorevole sgambetto.
                                      Belial appare sotto la forma che più adatta ai suoi obbiettivi e alla vittima delle sue brame. Dal vecchio al bambino, dall’elfa al goblin, non vi è limite alla sua fantasia. Non se ne conoscono altri poteri o mezzi e nello specifico non vengono mai menzionati.
                                      <br>
                                      <br>
                                      <c>Apparizioni ONGAME
                                      </c>
                                      <br>
                                      Nessun apparizione nota. 
                                    </span>
                                  </div>
                                </div>
                                  </div>
                                <div class="pannello" id="p3">
                                  <!-- Pannello 3 -->
                                  <div class="pan-emporio">
                                    <span class="stile-generico">
                                      <c>Work in progress
                                      </c>
                                    </span>
                                  </div>
                                </div>
                                <div class="pannello" id="p4">
                                  <!-- Pannello 4 -->
                                  <div class="pan-emporio">
                                    <span class="stile-generico">
                                      <c>Work in progress
                                      </c>
                                    </span>
                                  </div>
                                </div>
                                <div class="pannello" id="p5">
                                  <!-- Pannello 5 -->
                                  <div class="pan-emporio">
                                    <span class="stile-generico">
                                      <c>Work in progress
                                      </c>
                                    </span>
                                  </div>
                                </div>   
                                <div class="pannello" id="p6">
                                  <!-- Pannello 6 -->
                                  <div class="pan-emporio">
                                    <span class="stile-generico">
                                      <c>Work in progress
                                      </c>
                                    </span>
                                  </div>
                                </div>      
                                <div class="pannello" id="p7">
                                  <!-- Pannello 7 -->
                                  <div class="pan-emporio">
                                    <span class="stile-generico">
                                      <c>Work in progress
                                      </c>
                                    </span>
                                  </div>
                                </div>
                              </div>
                              <!--Chiudo Lo slideshow-->
                            </div>
                          </div> 
                        </div>
                        <!--Chiudo contenitore principale nero e suo row-->
                      </div>
                    </div>
                    <div class="footer">
                      <span class="stile-generico">
                        Ottimizzato per schermi Desktop (sconsigliato Browser Opera) || 
                        <a href="https://www.legacyofmagic.com" target="_blanck" >Legacy of Magic GDR
                        </a> || Autore codici Xerxes Van de Boss
                      </span>
                    </div>
                  </div>
                  <!-- chiudo div principe row -->
                </div>
                <!--col-md-12-->
              </div>
              <!--row-->
            </div>
            <!--Conteiner-->
          </div>
        </div>
      </div>
      </body>
    </html>