MyCharBook

Condividi codice - Scott (Dusk)

Anteprima

CSS

<style>
            body{  background: url('https://duskrpg.altervista.org/themes/advanced/imgs/main/background_1.jpg') no-repeat;}
.background-overlay {
  position: relative;
}

.scott{margin: 0px auto;   width: 750px;  height: 450px; margin-top:50px; position: relative;  }
.base{display: flex;
    width: 100%;  z-index: 0;   }
.base1{background: url('https://i.ibb.co/vmB1crs/scott-base1.png') no-repeat; width:249px; height: 450px; position:relative; left: 50px; -webkit-transition: all ease-in-out 2s; -o-transition: all ease-in-out 1s; }
.base2{background: url('https://i.ibb.co/ysPrKqd/scott-base2.png') no-repeat; width:251px; height: 450px;position:relative; left: 50px; -webkit-transition: all ease-in-out 2s; -o-transition: all ease-in-out 1s; }
.base1:hover{background: url('https://i.ibb.co/Pr9PMDk/scott-3.png') no-repeat;}
.base2:hover{background: url('https://i.ibb.co/MVHqpPv/scott-4.png') no-repeat;}
.scott:hover .people{opacity:1}
.scott:hover .testo{opacity:1}
.scott:hover .giffine{opacity:1}
.testo{ opacity:0;  width: 150px; height: 350px; background: black;left: 40px; position: relative; top: -20px; box-shadow: 3px 3px 10px #000; overflow-y: auto; -webkit-transition: all ease-in-out 2s; -o-transition: all ease-in-out 1s; color: #555; padding: 8px; font-family: calibri;        font-size: 12px;    line-height: 14px;    text-align: justify; outline-offset: -5px;outline: 1px solid #1f0101;border:2px solid #1f0101;}
.giffine{ opacity:0;position: absolute; width: 200px;  height: 100px;   top:350px; z-index: 5; -webkit-transition: all ease-in-out 2s; -o-transition: all ease-in-out 1s; }
.giffine img{width: 55px; padding: 3px; outline-offset: -5px;outline: 1px solid #1f0101;}
.people{  opacity:0;  width: 100px;    height: 150px;    background: black;    position: absolute; 
    top: 20px;     left: -20px;     z-index: 5;border: 1px solid #1f0101;  box-shadow: 3px 3px 10px #000; overflow-y: auto; -webkit-transition: all ease-in-out 2s; -o-transition: all ease-in-out 1s;outline-offset: -5px;outline: 1px solid #1f0101;border:2px solid #1f0101; text-align:center; padding:7px; color: #555; font-family: calibri;font-size: 11px;}
d {color: #ddd;font-family: calibri;font-size: 10px;line-height: 12px;  text-transform:uppercase;letter-spacing: 2px;}

e{color:#7D7672;}

f{color:#5C3838}</style>

HTML

<div class="scott">
  <div class="people">
    <d><a  onclick=" window.open('http://duskscott.altervista.org/kim.html','',' scrollbars=yes, menubar=no, width=600, height=330,top=200,')">Kimama</a></d><br>
    <e>persona2</e>, <f>persona 3</f>, persona4
    </div> 
  <div class="giffine">
   
    <img src="https://i.ibb.co/TPyYbY6/ezgif-com-crop-2.gif"> <img src="https://i.ibb.co/TwgNYDd/ezgif-com-crop-1.gif"> <img src="https://i.ibb.co/RHv7xZ5/ezgif-com-animated-gif-maker.gif">
  </div>
  <div class="base">
    
    <div class="base1">
    </div>

    <div class="base2">
    </div>
     <div class="testo">
       
Ha viaggiato per anni, facendo i più disparati lavori: barista, magazziniere, spogliarellista e anche attore hard; ha scherzato con amici, lottato contro nemici, ha imparato a gestire i suoi poteri, venendo incontro alla sua natura da Licantropo, immergendosi in un dualismo tra civiltà e regole, e l'istinto e la natura selvaggia. Ama la birra, ha un debole per le donne, la natura, e i film di Tarantino.
       <br>Polistrumentista, ma il basso è il suo strumento preferito.
    </div>
    
  </div>  
 
</div>

Mycharbook©2014 - Codice realizzato da daenith - www.mycharbook.it