Carnage's temp profile code

<style>

/* PROFILE DESIGNED BY NOTCOOKIE.
 DO NOT CLAIM AS YOUR OWN OR REMOVE CREDIT. THANKYOU. */

@import url('https://fonts.googleapis.com/css?family=Poppins|Satisfy');

::-webkit-scrollbar-button{ display: block; height: 13px; border-radius: 0px; background-color: #FF0000; } ::-webkit-scrollbar-button:hover{ background-color: #FF000; } ::-webkit-scrollbar-thumb{ background-color: #CCC; } ::-webkit-scrollbar-thumb:hover{ background-color: #CCC; } ::-webkit-scrollbar-track{ background-color: #FF0000; } ::-webkit-scrollbar-track:hover{ background-color: #CCC; } ::-webkit-scrollbar{ width: .3vh; }

/* CHANGE THE BACKGROUND COLOUR UNDER BODY TO MATCH YOUR BACKGROUND IMAGE.
 SEARCH GOOGLE FOR A COLOR PICKER. */
body {
 background: black;
 overflow: hidden;
}

/* This is the background image that gets blurred out. Replace url(url) with your own image.*/
.pic {
 background: url(url);
 position: absolute;
 left: 0vh;
 right: 0vh;
 top: 0vh;
 bottom: 0vh;
 background-size: 200vw 170vh;
 background-position: -66vw 0vh;
 filter: blur(2.5vh) brightness(2) saturate(.8);
 z-index: -1;

}

/* This is the center image. Ctrl+F for <div class="char"> and replace <img src="url"> to your desired image.*/
.char img {
 position: absolute;
 clip: rect(7vh, 63.7vh, 100vh, 4vh);
 left: 50%;
 transform: translate(-50%);
 z-index: 0;
 top: 7vh;
 height: 78vh;
 width: 67.5vh;
}

/* This is the back pattern that you see.*/
/* filter:invert(100%); = RED. */
/* filter:invert(0%); = BLACK. */
/* filter:invert(.5) sepia(1) saturate(3); = GOLD. */
/* filter:invert(.5) sepia(1) saturate(3) hue-rotate(50deg); = GREEN. */
/* filter:invert(.5) sepia(1) saturate(3) hue-rotate(150deg); = BLUE. */
/* filter:invert(.5) sepia(1) saturate(3) hue-rotate(210deg); = PURPLE. */
/* filter:invert(.5) sepia(1) saturate(3) hue-rotate(290deg); = PINK. */
/* filter:invert(.5) sepia(1) saturate(100) hue-rotate(360deg); = RED. */
/* filter:invert(.5) sepia(1) saturate(50) hue-rotate(0deg); = ORANGE. */

.back {
 position: absolute;
 left: -4%;
 top: 0;
 right: 0;
 bottom: 0;
 background: url(https://melbournechapter.net/images/decorative-line-divider-clipart-1.png);
 background-size: 104% 100%;

 /* COLOUR */
 filter: invert(50%) sepia(1) saturate(100) hue-rotate(0deg);
}

/* Image border. */
/* filter:invert(100%); = RED. */
/* filter:invert(0%); = BLACK. */
/* filter:invert(.5) sepia(1) saturate(3); = GOLD. */
/* filter:invert(.5) sepia(1) saturate(3) hue-rotate(50deg); = GREEN. */
/* filter:invert(.5) sepia(1) saturate(3) hue-rotate(150deg); = BLUE. */
/* filter:invert(.5) sepia(1) saturate(3) hue-rotate(210deg); = PURPLE. */
/* filter:invert(.5) sepia(1) saturate(3) hue-rotate(290deg); = PINK. */
/* filter:invert(.5) sepia(1) saturate(100) hue-rotate(360deg); = RED. */
/* filter:invert(.5) sepia(1) saturate(50) hue-rotate(0deg); = ORANGE. */
.border {
 background: url(https://openclipart.org/image/2400px/svg_to_png/304276/1531904544.png);
 position: absolute;
 left: 50%;
 transform: translate(-50%);
 width: 60vh;
 top: 14vh;
 z-index: 1;
 height: 71vh;
 background-size: 100% 100%;

 /* COLOUR */
 filter: invert(50%) sepia(1) saturate(100) hue-rotate(0deg);
 pointer-events: none;
}

.title {
 position: absolute;
 font-family: Satisfy;
 font-size: 10vh;
 left: 4vh;
 color: red;
 -webkit-text-stroke-color: black;
 -webkit-text-stroke-width: .16vh;
}

.subtitle {
 position: relative;
 font-family: Satisfy;
 font-size: 5vh;
 left: 12vh;
 color: red;
 top: -4vh;
 -webkit-text-stroke-color: black;
 -webkit-text-stroke-width: 0.12vh;
}

.container {
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 position: absolute;
 width: 60vh;
 margin-top: -.5vh;
 height: 71vh;
 z-index: 1;

}
.statbox {
 background: red;
 color: black;
 position: relative;
 height: 20%;
 width: 40%;
 left: 30%;
 top: 13%;
 opacity: 0;
 transition: ease .5s;
 padding: 1%;
 font-family: Poppins;
 font-size: 1.6vh;
}
.statbox .left {
 position: absolute;
 text-align: left;
 font-weight: bold;
}

.statbox .right {
 position: absolute;
 right: 2%;
 text-align: right;
}
.storybox {
 background: red;
 color: black;
 position: relative;
 height: 27.5%;
 width: 80%;
 left: 10%;
 top: 17.5%;
 opacity: 0;
 transition: ease .5s;
 padding: 1%;
 font-family: Poppins;
 overflow-y: scroll;
 font-size: 1.3vh;
 line-height: 2vh;
}

.oocbox {
 background: red;
 color: black;
 position: relative;
 height: 20%;
 width: 40%;
 left: 30%;
 top: 22%;
 opacity: 0;
 transition: ease .5s;
 padding: 1%;
 font-family: Poppins;
 font-size: 1.2vh;
 text-align: justify;
 line-height: 1.4vh;
}
.container:hover > .statbox {
 opacity: 1;
 left: 10%;
}
.container:hover > .storybox {
 opacity: 1;
}
.container:hover > .oocbox {
 opacity: 1;
 left: 50%;
}
.alts {
 position: absolute;
 bottom: 0;
}

.alts img {
 position: relative;
 height: 7vh;
 width: 7vh;
 border: .2vh solid black;
}


</style>
<div class="container">
 <div class="statbox">
 <div class="left">Real Name<br>Current Alias<br>Gender<br>Hair<br>Eyes<br>Marital<br>Occupation</div>
 <div class="right">Cletus Kasady<br>Carnage<br>Male<br>Auburn, None<br>Green, White<br>Single<br>Serial Killer</div>

 </div>
 <div class="storybox">Carnage is a recurring antagonist in the Spider-Man subdivision of Marvel Comics. Originally known as Cletus Kasady, he was essentially psychotic since childhood, having murdered or tortured his family and burning down his own orphanage. By his adulthood, Kasady was a diagnosed sociopath and a serial killer, having murdered so many individuals that, when he was finally caught, he was given eleven consecutive life sentences.
<br><br>
Eventually, Eddie Brock was imprisoned as well and broke free shortly afterwards. However, the Venom Symbiote was pregnant at the time, and gave birth to a blood-red and black spawn known as "Carnage", which eventually bonded with Kasady, amplifying his power tremendously and allowing him to wreak havoc on New York City. Since then, Carnage has remained a consistent foe to the web-slinger to this day. </div>

<!-- DO NOT REMOVE THE CREDIT PLEASE AND THANKYOU. -->
<!-- YOU ARE FREE TO EDIT IT AS YOU PLEASE -->
<!-- BUT BOTH LINKS MUST REMAIN INTACT. -->
 <div class="oocbox">

 Profile designed by <a href="roleplay.chat/profile.php?user=notCookie">notCookie</a>. You can grab the template for completely free at <a target="_blank" href="https://pastebin.com/u/cookiedesigns">her pastebin</a>. Always Pm Friendly. I'll play Carnage however I want. Story, Story and Smut, Smut. Long Term > Short Term. Let me know ahead of time before leaving/pausing rp. Common courtesy and all that jazz. Real life always comes first. We can't be on RPC 24/7. I have Discord and Skype. If I know you well enough, I'll give it to you.</div>

</div>
<div class="title">

There is only

<div class="subtitle">

Carnage!

</div></div>

<div class="back"></div>
<div class="border"></div>
<div class="char">
 <img src="https://i.imgur.com/gtqyt17.gif">
</div>
<div class="pic">
</div>

<!-- PUT ON-CLICK LINKS INTO A HREF="LINK HERE" AND THUMBNAILS INTO IMG SRC="IMAGE HERE" -->
<div class="alts">
 <a href=""><img src="https://i.imgur.com/pKvdmk3.gif"></a>
 <a href=""><img src="https://i.imgur.com/pKvdmk3.gif"></a>
 <a href=""><img src="https://i.imgur.com/pKvdmk3.gif"></a>
 <a href=""><img src="https://i.imgur.com/pKvdmk3.gif"></a>

</div>