HIT GIRL CODE

_________________________ CSS


#profile-container{
  background: none;
  width: 100%;}

body{
  background-image: url('https://cdn.discordapp.com/attachments/462263147106009088/467784349903880193/Cute-Skull-Wallpaper-PIC-WPXH529423.jpg');
  background-size: 425px;
  background-repeat: repeat;
  background-position: center;
  cursor: url('https://dl.dropboxusercontent.com/s/l7rtl3eflq3dutj/01BLK.png'), progress !important;}





/* FONTS */

@font-face{
  font-family: speech;
  src: url('https://dl.dropboxusercontent.com/s/hb54mxch5zocvbs/talkies.ttf');}

@font-face{
  font-family: comscript;
  src: url('https://dl.dropboxusercontent.com/s/0vsqy9lrzz3cbtq/Comic%20Balloon.ttf');}

@font-face{
  font-family: babs;
  src: url('https://dl.dropboxusercontent.com/s/hn2s6b0uqv8y00x/BADABB__.TTF');}

@font-face{
  font-family: marker;
  src: url('https://dl.dropboxusercontent.com/s/3usq88oswhn2f3x/PalookaBB.ttf');}

@font-face{
  font-family: comix;
  src: url('https://dl.dropboxusercontent.com/s/bmc507o1zq6nfv0/SF%20Wonder%20Comic%20Bold%20Italic.ttf');}

@font-face{
  font-family: wonder;
  src: url('https://dl.dropboxusercontent.com/s/etpfsjujj015qfx/komika.slick.ttf');}







/* MAIN PROFILE */

#contained{
  position: relative;
  top: 50px;
  display: block;
  height: 420px;
  width: 900px;
  border: 5px solid #000;
  border-top: 50px solid #302F41;
  background-color: #dfdfdf;
  margin: auto;
  border-width: 5px 6px 6px 6px;
  border-radius: 95% 2% 97% 2.5% / 4% 94% 4% 95%;
  transform: rotate(1deg);
  cursor: url('https://dl.dropboxusercontent.com/s/l7rtl3eflq3dutj/01BLK.png'), progress !important;}







/* TITLE */

.pow{
  position: absolute;
  display: block;
  z-index: 5;
  top: -30px;
  left: -20px;
  border-top: 110px solid #b84dc6;
  border-left: 23px solid transparent;
  border-right: 14px solid transparent;
  height: 0;
  width: 550px;
  margin-top: 20px;
  transform: rotate(-12deg);
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-12deg);}

.powbg{
  position: absolute;
  display: block;
  z-index: 4;
  top: -33px;
  left: -14px;
  border-top: 115px solid #000;
  border-left: 24px solid transparent;
  border-right: 14px solid transparent;
  height: 135px;
  width: 556px;
  margin-top: 20px;
  transform: rotate(-12deg);
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-12deg);}

.title{
  position: absolute;
  z-index: 6;
  top: 10px;
  left: -19px;
  display: block;
  height: 40px;
  width: 550px;
  padding-left: 10px;
  font-family: 'marker';
  font-size: 85px;
  color: #000;
  text-align: center;
  -webkit-text-stroke: 2px #ff9be6;
  text-shadow:
  1px 1px 0 #FFE78E,
 -1px -1px 0 #FFE78E,
  1px -1px 0 #FFE78E,
 -1px 1px 0 #FFE78E,
  1px 1px 0 #FFE78E;
  text-shadow: shadow1, shadow2, shadow3;
  text-shadow: 4px 6px 0px #C92CA5, 9px 8px 0px rgba(0,0,0,0.15);
  letter-spacing: .5px;
  word-spacing: 4px;
  border: 0px solid;
  transform: rotate(-8deg);
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  cursor: url('https://dl.dropboxusercontent.com/s/qdc8wouix91wung/01WHT.png'), progress !important;}







/* TEXT SPACE */

.box{
  margin: 25px;
  z-index: 3;
  width: 250px;
  height: 250px;
  background: #fff;
  border: solid #000;
  border-color: #000;
  float: left;}

/* About section */
.first{
  position: absolute;
  display: block;
  margin: 25px;
  width: 380px;
  height: 300px;
  background: #fff;
  border: solid #000;
  border-color: #000;
  float: left;}

/* Rotation */
.first{
  top: 70px;
  width: 480px;
  border-width: 5px 4px 5px 5px;
  border-radius: 4% 95% 3% 85% / 95% 4% 92% 6%;
  transform: rotate(-2deg);}

.about{
  position: relative;
  display: inline-block;
  top: 0px;
  left: 170px;
  transform: rotate(1deg);
  margin: 25px 20px 20px 0;
  padding: 4px 7px 4px 7px;
  background-color: #dfdfdf;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-family: 'wonder';
  text-transform: uppercase;
  font-style: italic;
  font-size: 20px;
  font-weight: bold;
  color: #000;}


/*///////////////////*/
/* MAIN IMAGE */

.second{
  position: absolute;
  z-index: 999;
  top: -10px;
  left: 500px;
  height: 210px;
  width: 340px;
  background-image: url('https://78.media.tumblr.com/2fd15e6e91f9768f7aaf3c3987eda889/tumblr_nliwt3Efj11rklg6go1_1280.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0px -50px; /* Adjust image placement depending on size. Set to 'center' if image size is already relative to the size of the div  */
  border-width: 5px 3px 3px 5px;
  border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
  transform: rotate(2deg);}

/* Rotation */
.second{
  border-width: 4px 4px 5px 5px;
  border-radius: 4% 95% 3% 95% / 95% 4% 92% 5%;
  transform: rotate(-2deg);}


/*///////////////////*/
/* SECOND SMALLER IMAGE */

.third{
  position: absolute;
  top: 225px;
  left: 500px;
  height: 140px;
  width: 140px;
  background-image: url('http://www.cinemafia.ru/upload/images/2018/05/RouletteSuperhero/%D0%A3%D0%B1%D0%B8%D0%B2%D0%B0%D1%88%D0%BA%D0%B0.gif');
  background-size: cover;
  border-width: 3px 4px 4px 5px;
  border-radius:95% 4% 92% 8%/4% 95% 5% 96%;
  transform: rotate(2deg);}


/*///////////////////*/
/* OOC AREA */

.fourth{
  position: absolute;
  top: 225px;
  left: 665px;
  height: 140px;
  width: 178px;
  border-width: 3px 4px 4px 5px;
  border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
  transform: rotate(1deg);}







/* TEXT SPACE */

.textspace{
  position: absolute;
  top: 182px;
  left: 60px;
  z-index: 99;
  display: block;
  height: 200px;
  width: 435px;
  border: 0px solid;
  transform: rotate(-1deg);
  overflow: auto;
  border: 0px solid;}

p.intro{
  margin: 0;
  font-family: 'wonder';
  font-weight: bold;
  font-size: 17.5px;
  line-height: 28px;
  font-style: italic;
  text-transform: none;
  color: #000;}







/* OOC SECTION - BOX 4 */

.ooc{
  position: absolute;
  top: 10px;
  left: 13px;
  height: 120px;
  width: 155px;
  border: 0px solid;
  overflow: auto;
  transform: rotate(-2deg);}

span.oocheader{
  position: relative;
  top: 3px;
  left: 45px;
  display: inline-block;
  margin: 0px 5px 20px 0px;
  padding: 2px 8px 4px 6px;
  background-color: #dfdfdf;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-family: 'wonder';
  text-transform: uppercase;
  font-style: italic;
  font-size: 16px;
  font-weight: bold;
  color: #000;}

p.ooctext{
  margin: 0;
  font-family: 'wonder';
  font-size: 14px;
  line-height: 20px;
  font-style: italic;
  font-weight: bold;
  text-transform: none;
  color: #000;}







/* LINKS */

a,
a:active,
a:visited{
  text-decoration: none;
  color: #9797A1;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -o-transition: all .5s linear;}

a:hover{
  color: #000;
  cursor: url('https://dl.dropboxusercontent.com/s/l0s5qq8a8m6d0p0/01redcr.png'), progress !important;}






/* SCROLLBAR */
/* Purposely set to transparent for
optimal comic book aesthetic */

::-webkit-scrollbar{
  progress;
  width: 1px;}

::-webkit-scrollbar-thumb:vertical{
  background-color: transparent;}

::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-button:start:decrement:hover,
::-webkit-scrollbar-button:end:increment:hover{
  background-color: transparent;}








/* TEXT HOVER COLOR  */

::selection{
  background: #FEE68E;
  color: #000;}

::-moz-selection{
  background: #FEE68E;
  color: #000;}






/* CREDIT */

.credit{
  z-index: 0;
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 2px solid #000;
  background: #41BEE0;
  text-align: center;
  -webkit-transition: all 1s ease;
  cursor: url('https://dl.dropboxusercontent.com/s/5vkf1dio9oqvant/03redcr.png'), progress !important;}

.credit p{
  font-size: 13px;
  line-height: 13px;
  display: inline-block;
  text-align: center;
  margin: 3px 0 0 0;}

.credit a{
  color: #0a0a0a;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -o-transition: all .5s linear;
  cursor: url('https://dl.dropboxusercontent.com/s/5vkf1dio9oqvant/03redcr.png'), progress !important;}

.credit a:hover{
  color: #FFC751;}

.credit:hover{
  background: #000;
  border-color: #41BEE0;
  color: #FEE68E;}


___________________
________________ HTML
____________________




<div id="contained">
<div class="pow"> </div>
<div class="powbg"> </div>
<div class="title">HIT-GIRL</div>
<div class="box first">
<div class="about">So where do we begin . . .</div>
</div>
<div class="textspace">
<p class="intro">
<b>Weapon Specialist:</b> <small>Hit-Girl was trained to take a bullet (with a bulletproof vest, of course), hand-to-hand fighting, blunt and bladed weapons, and taught about guns, gun inventors, and action movies and stars the action movie.</small>
<br>
<b>Martial Arts and Combatant:</b><small> The nature of Hit-Girl's training has made her particularly brutal and remorseless in combat. Her physical, and skill set is virtually unmatched by any character in the Kick-Ass Universe. Hit-Girl is individually the most powerful character introduced in the Kick-Ass comic series. Hit-Girl has a very particular set of skills that have saved Kick-Ass many times. However, she is limber and hard to catch because of her small size.
</small>
<br>

<b>Multilingual:</b> <small>In Kick-Ass 2, Hit-Girl has demonstrated the use of Russian. This was after the defeat Russiat of Mot
</small>
<br>
Acrobat: <small> Hit Girl is an excellent acrobat and parkour practitioner</small>
</div>
<div class="box second"> </div>
<div class="box third"> </div>
<div class="box fourth">
<div class="ooc"><span class="oocheader">Ooc Info</span>
<p class="ooctext">— Text text text and rules regaring OOC preferences. <br /><br /> — Text text text and rules regaring OOC preferences. <br /><br /> — Text text text and rules regaring OOC preferences.</p>
</div>
</div>
</div>
<div class="credit">
<p><a target="_blank" href="https://[FILTERED].tumblr.com/" target="_blank">♠</a></p>
</div>