Mutaforma by @Kaine - Codewith.it

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

Referenze

<tfoot>Definisce il footer o sezione inferiore di una tabella.
<embed>Tag per l'incorporamento di contenuti multimediali
<td>Definisce una cella di una tabella HTML.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
valueValore alfanumerico o booleano contenuto in un elemento
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

AirPods Shop LOGIN(2)

Banner_cercatutto

spaghettiamaInglese.html

My Anime Blog - Ninjas and Dragons

progetti scolastici

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