Ella by @MILENUCCIA87 - Codewith.it

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

Referenze

postDefinisce un metodo di invio di dati al server
<tr>Definisce le righe di una tabella (rows)
<h6>Titolo di intestazione di sesto livello
widthImposta la larghezza di un elemento HTML
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<canvas>Tag per disegnare grafica dinamica su pagine web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

GoUp Fitness Opz 2

Le bambole Mattel

Amazing Strange Rope Police

Prova di programmazione html

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.

<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Young+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');


/*-------BASE-------*/

.base {width: 650px; height: 800px; position: relative; margin: auto; }

.box { background-image: url(https://i.imgur.com/KbmtSo2.png);
    opacity: 0;
    z-index: 2;
    -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
    position: relative;
    overflow: hidden;  
    width: 600px; 
    height: 700px;  
    margin-top: -245px;
    margin-left: 0px; 
    background-position: 0px 0px;
    background-repeat: no-repeat;
    }

.box:hover {
  -webkit-opacity: 1;
  opacity: 1;
           }

.testoin1 {
margin-left: -300px;
width: 180px;
height: 40px;
background: #707070; opacity: 0.8; 
font-family: 'Montserrat', sans-serif; 
font-size: 10px; 
line-height: 9px; 
letter-spacing: 0.5px;
position:relative; 
text-align: justify; 
padding: 5px; 
overflow: auto;
margin-top: 133px;
color:#000000;
}

.testoin2 {
margin: auto;
width: 180px;
height: 125px;
background: #707070;
opacity: 0.8; 
font-family: 'Montserrat', sans-serif;
font-size: 10px; 
position:relative; 
text-align: justify; 
padding: 5px; 
overflow: auto;
margin-top: 300px;
margin-left: 200px;
color:#000000;
}

.testoin3 {
margin: auto;
width: 150px;
height: 125px;
background: #707070;
opacity: 0.8; 
font-family: verdana; 
font-size: 10px; 
position:relative; 
font-family: 'Montserrat', sans-serif;
padding: 5px; 
overflow: auto;
margin-top: -135px;
margin-left: 30px;
color:#000000;
}

.testoin4 {
margin: auto;
width: 150px;
height: 125px;
background: #707070;
opacity: 0.8; 
font-family: 'Montserrat', sans-serif;
font-size: 10px; 
position:relative; 
text-align: justify; 
padding: 5px; 
overflow: auto;
margin-top: -135px;
margin-left: 400px;
color:#000000;
}

/* ------------------------ FRASE 1 ------------------------------ */
.frase_breve { position: relative; 
               z-index:3; 
               width: 250px; 
               height: 120px;
               margin-left: -230px;
               margin-top: -650px;
               color:#000000;
               font-family: 'Young Serif', serif;
               text-align: justify;
               font-size:30px;
               line-height: 10px; 
               letter-spacing: 1px;
               padding-top: 20px;
              }


/* ----------------------- FRASE 2 ------------------------------ */
.frase_breve_piccola { position: relative; 
                       z-index:3; 
                       width: 250px; 
                       height: 120px;
                       margin-left: -230px;
                       margin-top: -126px;
                       color: #620000;
                       text-transform: uppercase;
                       font-family: 'Montserrat', sans-serif;
                       text-align: justify;
                       font-size:15px;
                       line-height: 10px; 
                       letter-spacing: 1px;
                       padding-top: 20px;
                     }


/* ------------------------ BOX DATI ------------------------------ */
.dati { position: relative; 
                z-index:3; 
                width: 520px; 
                height: 100px;
                margin-left: -10px;
                padding: 5px;
                margin-top: -330px;
                text-align: justify;
                background: #707070;
                opacity: 0.8;
    }


/* ------------------------------ GIF ------------------------------ */
.gif_quadrate { position: relative; 
                z-index:3;
                top:-112px;
                left:-150px; }

.gif_quadrate img { width:40px;
                    height:auto;
                    box-shadow: 0px 0px 6px 1px #333333;
                    margin:1px;
                    padding:1px; }

                    
   /*-------------STYLE---------*/
a {
     text-decoration:none!important;color: #000000;
}


w {
     font-family: 'Montserrat', sans-serif;
     font-size:10px;
     font-weight: bold;
     line-height: 10px; 
     letter-spacing: 0.5px;
     color: #000000; 
     padding-left:7px;
     padding-right:7px;
} 

d {
     color: #800000;
     font-family: georgia;
     font-size: 9px;
     line-height: 9px;
     font-style: italic;
     font-weight: bold;
}

e {
     font-family: cambria, pallatio; 
     color: #bdaaa3;
     font-size: 8px; 
     line-height: 10px!important;
     text-transform: uppercase;
     letter-spacing: 2px;
     background-color: #4d0000;
     text-shadow: 2px 1px 0px #330000, -2px -1px 0px #330000;
     padding-left: 7px;
     padding-right: 7px;
} 

f {
     font-family: calibri; 
     color: #1a0000;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: bold;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
}


b, i, u, s {
     color: #323232;
}


u {
     text-decoration: underline dashed #1a0000; 
     line-height: 9px; color : #323232; font-weight:bold;
}

h {
     font-family: georgia; 
     text-transform: uppercase;
     font-size: 7px;
     line-height: 9px!important;
     letter-spacing: 3px; 
     color: #4d0000;
     text-shadow: 1px 1px 0px #111; 
} 

</style>

<center>
<div class="base"><img src="https://i.imgur.com/CP4j8TZ.png"></div>

<div class="frase_breve">WEREWOLF</div>
<div class="frase_breve_piccola">SOME KIND OF BEAST</div>
<div class="gif_quadrate">
<img src="https://64.media.tumblr.com/af6d3e05b5895f799438d2e8015f1cf3/7bd5f5742ad211bb-2c/s500x750/5e64ed46a9dbf37c6cc2a67a7065bec3c2609611.gif">
<img src="https://64.media.tumblr.com/541a22494e730a54248184b3cc432f14/7bd5f5742ad211bb-e7/s500x750/554cfbf34fd3624c03a7dc7ad54fb0db1fe0b6c9.gif">
<img src="https://64.media.tumblr.com/e0104b5745c0c512afaa6b523edccf77/7bd5f5742ad211bb-37/s500x750/885f77cba2c71c36936a3b501dbb42b459f09805.gif">
<img src="https://64.media.tumblr.com/1e20a02060338d73d2bb914c6294c970/7bd5f5742ad211bb-48/s500x750/55edb07eebb4fc98aec23ec6e56c58936d3776dd.gif">
</div>

<div class="box">
<div class="testoin1">(<w>FORMA FERALE</w>) 210cm x 280kg dal manto <d>rossiccio e fulvo</d> disseminato di sfumature <u>nocciola</u>. <h>Occhi dorati</h> screziati di rosso.</div>

<div class="testoin2"><center>•• <e>A N D R E A</e> ••<br><img src="https://i.imgur.com/RJiBvYZ.gif" style="margin-left: 4px; height:62px; border: 2px solid #131413; filter: grayscale(50%); box-shadow: 1px .5px 10px #000;"></center>Something <d>in your eyes</d>, makes me wanna <h>lose myself</h> in your arms<br><center><a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Andrea2.html','',' scrollbars=no,menubar=no,width=850, height=850, ,resizable=no, cursor=help,')">( → )</a></center></div>
  
<div class="testoin3"><br><br><center><e>C L A N</e><br><a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Johan.html','',' scrollbars=no,menubar=no,width=680, height=250, ,resizable=no, cursor=help,')"><h>Johan</h></a> • <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Sean.html','',' scrollbars=no,menubar=no,width=680, height=250, ,resizable=no, cursor=help,')"><h>Sean</h></a> • <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Filip.html','',' scrollbars=no,menubar=no,width=680, height=250, ,resizable=no, cursor=help,')"><h>Filip</h> </a><br><a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Rhiannon.html','',' scrollbars=no,menubar=no,width=680, height=250, ,resizable=no, cursor=help,')"><d>Rhiannon</d></a> • <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Faye.html','',' scrollbars=no,menubar=no,width=680, height=250, ,resizable=no, cursor=help,')"><d>Faye</d></a>  • <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Melody.html','',' scrollbars=no,menubar=no,width=680, height=250, ,resizable=no, cursor=help,')"><d>Melody</d></a><br> <u>Deva</u> • <u>Scott</u><br> Saxa • Lucas • Sierra  <br></center></div>

<div class="testoin4"><br><br><center><a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Keifer.html','',' scrollbars=no,menubar=no,width=680, height=250, ,resizable=no, cursor=help,')"><f>Keifer</f></a> • <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Newt.html','',' scrollbars=no,menubar=no,width=680, height=250, ,resizable=no, cursor=help,')"><f>Newt</f></a> • <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Andraste.html','',' scrollbars=no,menubar=no,width=680, height=250, ,resizable=no, cursor=help,')"><f>Andraste</f></a><br><u>Rune</u>; <u>Wikimak</u>; <u>Nicholas</u>;<br>Nadin; Eva; Kimama; Selina; Talya; Connor; Manon; Wyatt; Kilyan; Ju-Won;</center></div>

</div>

<div class="dati"><w>JONATHAN GARRETT EDWARDS » Classe '85. Aprile il 23. <a href="https://i.imgur.com/jYTEUk4.png" 
target="popup" 
onclick="window.open('https://i.imgur.com/jYTEUk4.png','popup','width=450,height=450'); return false;">Tatuaggi</a>&Cicatrici || taurus sun and capricorn moon || <h>There's a violence living inside me</h> || Non è mai stato un santo e l'essere diventato lupo l'ha reso ancora più <e>territoriale</e> rispetto a prima. <u>Per il sentore di appartenere a qualcosa</u>. <f>Viscerale</f>. Ferale. <d>Selvatico</d>. Forastico. Stitico a livello di emozioni, più incline alla violenza che alla discussione. Il più delle volte ringhia. Stesse orme del padre, a compensazione di <u>un temperamento tutt'altro che pacifico</u>. || <d>(blood, beatings and clandestine fights)</d> || Stesso addestramento. Stessa <e>testardaggine</e>. La necessità di stare a contatto con una natura che sta imparando a conoscere bene <g>solamente ora</g>. || <h>I'm not a Saint</h>.</w></div>
 
</div></center>