MyCharBook

Condividi codice - Lillian scheda 4

Anteprima
CSS

<style>
            /* -------------- BOX GENERALE -------------- */
.box_generale { width: 570px;
    height: 505px;
    background: none;
    margin-left: 0px;
    margin-top: 0px;
    position: absolute; }


/* -------------- IMMAGINE VERTICALE -------------- */
.immagine_grande { position: absolute;
    z-index:0;
    width: 530px;
    height: 505px;
    margin-left: 0px;
    margin-top: 0px;
    background: url('https://i.ibb.co/X79KqGb/lily2.png') no-repeat; }



/* --------------- SEZIONE LIFE --------------- */
.box_testo { position: absolute;
    z-index: 2;
    overflow: hidden;
    width: 260px;
    height: 410px;
    background-color: rgb(0,0,0,0.9);
    margin-top: 55px;
    margin-left: 430px;
    box-shadow: 0px 0px 10px #000; }

.box_testo_int { position: relative;
    z-index: 2;
    overflow: auto;
    width: 235px;
    height: 410px;
    top: 0px;
    left: 0px;
    padding: 10px;
    background-image: url('https://i.imgur.com/qX9AEav.png');
    color: #454545;
    font-family: tahoma;
    font-size: 10px;
    line-height: 9px;
    text-align: justify;
    letter-spacing: 0px;
    text-shadow: 1px 1px 1px #000; }


/* --------------- GIF ANIMATE SINISTRA --------------- */
.gif_sinistra { position: relative;
    z-index: 0;
    float: left;
    overflow: auto;
    width: 400px;
    height: 275px;
    top: 180px;
    left: 340px;
    padding: 5px;
    padding-left: 60px; }

.gif_1 { opacity: 1;
    width: 110px;
    height: 70px;
    margin-left: 0px;
    margin-top: 5px;
    background-image: url(https://i.gifer.com/5q9y.gif);
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 2px #010101;
    box-shadow: 0px 0px 5px #000;
    transform: rotate(5deg);
    -moz-transition: all ease-out 0.5s;
    -webkit-transition: all ease-out 0.5s;
    -o-transition: all ease-out 0.5s; }
.gif_1:hover { margin-left: -50px; }

.gif_2 { opacity: 1;
    width: 110px;
    height: 70px;
    margin-left: 0px;
    margin-top: 5px;
    background-image: url(https://64.media.tumblr.com/1db45ef3c1bd9700867dd4d5b6973d96/tumblr_inline_pjbd38WTtf1tae3h3_500.gif);
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 2px #010101;
    box-shadow: 0px 0px 5px #000;
    transform: rotate(-5deg);
    z-index: 0;
    -moz-transition: all ease-out 0.5s;
    -webkit-transition: all ease-out 0.5s;
    -o-transition: all ease-out 0.5s; }
.gif_2:hover { margin-left: -50px; }

.gif_3 { opacity: 1;
    width: 80px;
    height: 70px;
    margin-left: 0px;
    margin-top: 15px;
    background-image: url('https://64.media.tumblr.com/45f1cbef47bcfc92557a324c3347a629/a4494d406354e764-ca/s250x400/5c6091431bea7b96d81ffdacdf8fe51b78add235.gifv');
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 2px #010101;
    box-shadow: 0px 0px 5px #000;
    transform: rotate(5deg);
    -moz-transition: all ease-out 0.5s;
    -webkit-transition: all ease-out 0.5s;
    -o-transition: all ease-out 0.5s; }
.gif_3:hover { margin-left: -50px; }


/* ------------------------------ STILE TESTI ------------------------------ */

r { font-family: georgia; font-size: 9px; letter-spacing: 1px; color: #555; font-style: italic; }
j { font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 1.5px; color: #644324; transition: all ease-out 1s; }
j:hover { color: #ac7c4c; cursor: none; }

n2 { font-family: georgia; text-transform: lowercase; font-size: 9px; font-style: italic; letter-spacing: 1px; background-color: #755f48; padding-left: 2px; padding-right: 2px; color: #000; transition: all ease-out 1s; }
n2:hover { color: #ac7c4c; background-color: #000; cursor: none; }

f { font-family: georgia; font-style: italic; font-size: 9px; letter-spacing: 1px; color: #737067;}
e { font-family: calibri; text-transform: uppercase; font-size: 8.5px; letter-spacing: 1px; color: #666; transition: all ease-out 1s; }
g { font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 1.5px; color: #333; transition: all ease-out 1s; font-weight: bold }
k { letter-spacing: 1px; text-shadow: 1px 1px 0px #000; color: #222; }
k2 { letter-spacing: 1px; text-shadow: 1px 1px 0px #000; color: #94835b; }</style>
Condividi codice - Lillian scheda 4

CSS

HTML
