Mutaforma by @Kaine - Codewith.it

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

References

animationDefinisce i parametri dell'animazione di un elemento o selettore
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
relServe a definire la relazione tra il documento e una risorsa.
minImposta il valore numerico o temporale minimo per un elemento input
methodDetermina il metodo di invio dei dati di un form al server
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form

Users

Log in to search for users

Explore

Find inspiration

Costruzione di tabella con html5

HTML con CSS esempio generale

Group 1 - Irregular Verbs

copia di unfollow me

redirect 301 page2page

esercitazione n.1

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>