MyCharBook

Condividi codice - Kimama

Anteprima

CSS

<style>
            body {background-color: #111; color: #666;
font-family: tahoma;    font-size: 9.5px;}
.div_lily{
  margin: 0 auto; width: 300px;
    height: auto;
    background-color: #121212;
    margin: auto;
    box-shadow: 3px 3px 10px #000;
}
.kimama{  width: 750px;  height: 450px;     margin: 0 auto; background: url('https://i.ibb.co/GF7tn5g/Senza-titolo-1.png'); border:2px solid black;outline-offset: -12px;outline: 1px dashed #555;-webkit-transition: all ease-in-out 2s; -o-transition: all ease-in-out 1s; filter: brightness(140%)grayscale(50%); }
.kimama:hover{filter: brightness(100%)grayscale(0%); background: url('https://i.ibb.co/BVpzkXn/Senza-titolo-2.png')}
.kimama:hover .gif_box{opacity:1;}
.kimama:hover .people{opacity:1;margin:-120px 0px 0px 450px;transform: rotate(-3deg);}

.testo{padding:5px;  position:relative; margin: 200px 0px 0px 20px; width: 250px; height:200px;  background: rgb(0,0,0,0.7); outline-offset: -5px;outline: 1px dashed #555;border:2px solid black; color: #999;    font-family: calibri;    font-weight: 300;    font-size: 11px;        letter-spacing: 0.7px;    line-height: 14px;    text-align: justify; }
.gif_box{position:absolute;width: 80px; margin:-220px 300px;opacity:0; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s;}

.gif_box img{width: 110px; height:75px;object-fit: cover;transform: rotate(8deg);border:2px solid black;filter: brightness(140%)grayscale(50%);object-size: 85px 85px;box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 20px, rgba(0, 0, 0, 1) 0px 6px 6px;}

.people{border-inline: #555 dashed 1px;  position:absolute; margin:-220px 0px 0px 450px; width: 230px; height:100px; background: rgb(0,0,0,0.9); border:2px solid black;  color:#555; font-size:11px;padding:5px;text-align:center;opacity:0;-webkit-transition: all ease-in-out 2s; -o-transition: all ease-in-out 1s;transform: rotate(8deg);  outline-offset: -5px;outline: 1px dashed #555;   overflow-y: auto}
.love:hover{    font-weight: bold;     color: #38533b;}
    .something{  text-align:center;   color: #743e3e; font-family: La Belle Aurore, cursive;   cursor: crosshair ;     font-size:12px;     text-decoration-thickness: auto;}
    .something:hover{    font-weight: bold;     color: #743e3e;}
    .nanibosad{    color: #b08c43;        text-decoration-thickness: auto;     line-height: 150%;}
    .nanibosad span{     text-decoration: underline #b08c43;     cursor: crosshair ;}
    .nanibosad span:hover{     font-weight: bold}
    .nanibosad a:hover{     font-weight: bold;    cursor: crosshair ;}
    .ex_nani {opacity: 0.5;    color:#f2c461;     line-height: 150%; }
    .ex_nani span{   opacity: 0.5;  text-decoration: underline #f2c461;     cursor: crosshair ;}
    .ex_nani span:hover{   opacity: 0.5;  font-weight: bold}
    .ex_nani a:hover{   opacity: 0.5;  font-weight: bold;  color: #f2c461;    cursor: crosshair ;}
    .ex_nani a:visited{   opacity: 0.5;  color: #f2c461;     font-size:12px;     text-decoration-thickness: auto;}

    .friends {    color: #648393;     text-decoration-thickness: auto;     line-height: 150%;}
    .friends span{     text-decoration: underline #648393;     cursor: crosshair ;}
    .friends span:hover{     font-weight: bold}
    .friends a:hover{     font-weight: bold;     cursor: crosshair ;}
    .friends a:visited{     color: #648393;     font-size:12px;     text-decoration-thickness: auto;}
    .others{    color: #908b8b;  text-decoration-thickness: auto;     line-height: 150%;}
    .others span{     text-decoration: underline ;     cursor: crosshair ;}
    .others span:hover{     font-weight: bold}
    .others a:hover{     font-weight: bold;     cursor: crosshair ;}
    .old{  opacity: 0.9;    text-decoration-thickness: auto;     color: #cacac6;     line-height: 150%;}
    .old span{   opacity: 0.9;  text-decoration: underline ;     cursor: sw-resize ;}
    .old span:hover{    opacity: 0.9; font-weight: bold}
    .old a:hover{ opacity: 0.9;    font-weight: bold;     cursor: sw-resize ;}
    .people_div{     border:1px solid rgba(0,0,0,0.1);    border-top:0;  text-align:center;    }

</style>

HTML

<div class="kimama">
  <div class="testo">
    Abenaki Reservation・20.06.86・Gemini・Coffee addicted・Cookie dispenser・Shaman・
            <br><br><d><a   onclick=" window.open('https://mycharbook.it/tatoo.html','',' scrollbars=yes, menubar=no, width=400, height=350, left=300 ,top=200,')" href="" style="color: #899098;  cursor: crosshair ;   ">Tatoo</a></d> ・  <d><a   onclick=" window.open('https://mycharbook.it/kimama/gallery.html','',' scrollbars=yes, menubar=no, width=650, height=500, left=300 ,top=200,')" href="" style="color: #899098;  cursor: crosshair ;  ">Gift and Stuffs</a></d> ・ <d><a href="https://moonlightcatdusk.altervista.org/" target="_blank" style="color: #899098;  cursor: crosshair ; ">Moonlight Cat Cafè </a></d><br><br>
    <b>Segni particolari</b><br>
            - Cicatrice orizzontale sul braccio sinsitro, poco sotto la spalla (segno lasciato da un'ascia)<br>
            - Tre cicatrici fra le scapole (artigliate di un Atrociraptor)
  </div>
   <div class="people">
     <a class="something" onclick=" window.open('https://mycharbook.it/Scott','',' scrollbars=yes, menubar=no, width=600, height=330,top=200,')">Scott</a></b>
                <p class="nanibosad">
                    <span><a style="color: #b08c43;" onclick=" window.open('https://mycharbook.it/Elinor','',' scrollbars=yes, menubar=no, width=600, height=330,top=200,')">Elinor</a> </span> ☎ |
                    <span><a style="color: #b08c43;" onclick=" window.open('https://mycharbook.it/William','',' scrollbars=yes, menubar=no,width=600, height=330, top=200,')">William</a> </span> ☎ |
                    <span><a style="color: #b08c43;" onclick=" window.open('https://mycharbook.it/Kadonkan','',' scrollbars=yes, menubar=no, width=600, height=330, left=300 ,top=200,')">Kado</a> </span> ☎ |
                    <br>
                    <span><a style="color: #b08c43;"  onclick=" window.open('https://mycharbook.it/AlterChase','',' scrollbars=yes, menubar=no,width=600, height=330,top=200,')">Chase</span></a> ☎  |
                    <span><a style="color: #b08c43;"  onclick=" window.open('https://mycharbook.it/Shiloh','',' scrollbars=yes, menubar=no, width=600, height=330,  top=200,')">Shiloh ☎</span></a>  |
                    <span><a style="color: #b08c43;"  onclick=" window.open('https://mycharbook.it/Wikimak','',' scrollbars=yes, menubar=no, width=600, height=330,top=200,')">Wikimak ☎</span></a> | Kowa
                </p>
                <p class="friends">
                    <span><a style="color: #648393;"  onclick=" window.open('https://mycharbook.it/Jack','',' scrollbars=yes, menubar=no, width=600, height=330,  top=200,')">Jack</span></a> ☎ |
                    
                    <span><a style="color: #648393;"  onclick=" window.open('https://mycharbook.it/Johan','',' scrollbars=yes, menubar=no,  width=600, height=330, top=200,')">Johan</span></a> ☎ |
                    <span><a style="color: #648393;"  onclick=" window.open('https://mycharbook.it/Rhiannon','',' scrollbars=yes, menubar=no,  width=600, height=330, top=200,')">Rhiannon</a> ☎</span> |
                    <span><a style="color: #648393;"  onclick=" window.open('https://mycharbook.it/Sean','',' scrollbars=yes, menubar=no,  width=600, height=330, top=200,')">Sean ☎</a></span>
                </p>
                <p class="others">
                    <span><a style="color: #908b8b;"  onclick=" window.open('https://mycharbook.it/Alex','',' scrollbars=yes, menubar=no,  width=600, height=330, top=200,')">Alex</span></a> ☎ |
                    <span><a style="color: #908b8b;"  onclick=" window.open('https://mycharbook.it/Zach','',' scrollbars=yes, menubar=no,  width=600, height=330,top=200,')">Zach </a>☎</span> |Nate ☎ |  Sierra ☎ | Lucas | Chen ☎ | Deva ☎ | Jonathan ☎ | Andrea ☎ | Filip | Nadin☎ | Nicholas ☎ | Charlotte ☎ | Connor | Ju-Won | Andraste ☎ | Manon | Caleb ☎ | Leah ☎ | Talya | Aiden ☎|  Jane ☎ | Holden | Olivia | Narcis | Kilyan ☎ | 
                </p>
               <p> <a class="love" onclick=" window.open('https://mycharbook.it/Chase','',' scrollbars=yes, menubar=no, width=600, height=330,top=200,')">Chase</a></b>
               </p>
                <div style="width:200px;margin:0 auto; line-height:1;color:#111;">

                    <!--RELATIONSHIPS LIST-->
                    <div style="background:none; color:white; border:1px solid rgba(0,0,0,0.1);border-top:0;">
                        <details>

                            <!--RELATIONSHIP-->
                            <summary style="display:flex;align-items:center;font-size:0;cursor:pointer;outline:none;border-top:1px solid rgba(0,0,0,0.1);">

                                    <span style="font-size:10px; margin: 0 auto; color: #6a6a6a ">
					                    <d>Something old</d>
                                    </span>

                            </summary>

                            <center style="border-top:1px solid rgba(0,0,0,0.1);padding:20px;font-style:italic;line-height:2;">

                                <span class="ex_nani"><a style="color: #f2c461;"  onclick=" window.open('https://mycharbook.it/Antony','',' scrollbars=yes, menubar=no, width=600, height=330,top=200,')">Antony </a></span>
                                <span class="ex_nani"> | Makkapitew  | Keme | Joanne  | Alaysha  | Kimi  | Fetch | Dustin | Enola | Harlan | Elan | Talaz | Thyra | Alaric | Adam | Drew | Timothy | Galen | Christian</p>
                                    <p class="old">Bowie | Iris | Rachel | Alicia | Dallas | Lou | Dominic | Yuji | Jack | Rayen | Joelle (Virgilie)| Breon | Claire |  Lola |  Crystal |  Evelyne |
                    Hannah |  Liam | Julia | Aretha |  Harley |  Gwendolyn | Cassandra | Bones | Samira | Ilia | Eivor | Tobias | Dara |Marcus | Nimue |  Aryn | Gary  | Sophie |  Yana | Santiago | Saxa | Faye | Amelia | Hope | Isaac </p>
                    </span>

                            </center>

                        </details>
  </div>
  </div>
  </div>
  <div class="gif_box">
    <img src="https://i.ibb.co/Px2TtDr/tumblr-ocqvs2c-R9u1r1guvio1-250.webp">
    <img src="https://i.ibb.co/zXVqthP/tumblr-2463dec5c85d6cedcc8af3f17e83862a-c260ae96-250.webp" style="transform: rotate(-10deg);"><img src="https://i.ibb.co/30XjCcR/tumblr-ol5wow-Ge-VF1qankmno4-250.webp" style="margin-top:-15px">
      
    </div>
 
</div>

</div>