ｆｌｏｗｅｒ

<style>

 @font-face {
 font-family: "Flower";
 src: url('https://dl.dropboxusercontent.com/s/j5872uvpfovyh7y/Blacksword.otf?dl=0');
 format("truetype");
}

#bitch{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

::-webkit-scrollbar {
 display: none;
}

body{
 overflow: hidden;
 background: linear-gradient(to bottom left, #ff9191, #73ffc5 , #fff 80%);
}

A{
color: #ffcccc;
font-weight: bold;
text-decoration: none;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

a:hover{
text-decoration: line-through;
text-shadow: 4px 0px 8px #d88edb, 0px 4px 8px #d88edb, -4px 0px 8px #d88edb, 0px -4px 8px #d88edb;
}

B {
 text-shadow: 0px 0px 2px #547FBF;
 }

h1 {
 background: url('https://data.whicdn.com/images/305497977/original.gif');
 background-position: center;
 background-size: cover;
 margin-top: -1px;
 line-height:1vw;
 font-size: 15px;
 font-family: 'Cinzel';
 font-weight: 100;
 text-align: center;
 border: 1px solid #000;
 color: #ffcccc;
 text-shadow: 0px 0px 5px #ffcccc;
}

.box {
 position: absolute;
 bottom: 25px;
 left: 25px;
 height: 300px;
 width: 800px;
 background-color: #99fcff;
background-image: url("https://www.transparenttextures.com/patterns/arches.png");
 border: 5px solid #333;
 border-radius: 0px 200px 0px 0px;
}

.render {
 position: absolute;
 bottom: 30px;
 left: 30px;
 height: 600px;
 width: 500px;
 background-image: url('https://i.imgur.com/K0wCrJI.png');
 background-attachment: absolute;
 background-size: cover;
 z-index: 5;
 filter: drop-shadow(5px 0px 0px #ffcccc);
}

.flower {
 position: absolute;
 bottom: 25px;
 left: 170px;
 height: 528px;
 width: 367px;
 background-image: url('http://www.pngmart.com/files/7/Japanese-Flowering-Cherry-PNG-Picture.png');
 background-attachment: absolute;
 background-size: cover;
 z-index: 2;
 transform: rotate(90deg);
}

.words{
 overflow: auto;
 position: absolute;
 bottom: 35px;
 left: 480px;
 height: 250px;
 width: 250px;
 color: #212121;
 font-family: 'Roboto Condensed';
 font-size:15px;
 line-height:20px;
 letter-spacing:0.5px;
 text-transform: lowercase;
 font-variant:small-caps;
 text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
 z-index: 1;
 padding: 5px;
 opacity: 0;
transition: 1s;
}

.words:target {
 opacity: 1;
 z-index: 3;
 }

.icon{
 position: absolute;
 bottom: 300px;
 left: 640px;
 height: 70px;
 width: 70px;
 background-image: url('https://i.gifer.com/45RQ.gif');
 background-attachment: absolute;
 background-size: cover;
 background-repeat: no-repeat;
 z-index: 3;
 filter: grayscale(100%);
 transition: 0.5s ease-in-out;
}


.icon2{
 position: absolute;
 bottom: 270px;
 left: 720px;
 height: 70px;
 width: 70px;
 background-image: url('https://i.gifer.com/45RQ.gif');
 background-attachment: absolute;
 background-size: cover;
 background-repeat: no-repeat;
 z-index: 5;
 filter: grayscale(100%);
 transition: 0.5s ease-in-out;
 transform: rotate(45deg);
}

.icon3{
 position: absolute;
 bottom: 200px;
 left: 780px;
 height: 70px;
 width: 70px;
 background-image: url('https://i.gifer.com/45RQ.gif');
 background-attachment: absolute;
 background-size: cover;
 background-repeat: no-repeat;
 z-index: 3;
 filter: grayscale(100%);
 transition: 0.5s ease-in-out;
 transform: rotate(55deg);
}

.icon4{
 position: absolute;
 bottom: 120px;
 left: 805px;
 height: 70px;
 width: 70px;
 background-image: url('https://i.gifer.com/45RQ.gif');
 background-attachment: absolute;
 background-size: cover;
 background-repeat: no-repeat;
 z-index: 3;
 filter: grayscale(100%);
 transition: 0.5s ease-in-out;
transform: rotate(90deg);
}

.icon:hover, .icon2:hover, .icon3:hover, .icon4:hover {
filter: grayscale(0%);
}

.tt {
 position: absolute;
 letter-spacing:0;
 left: 255px;
 bottom: 308px;
 font-family: 'Flower';
 font-size: 90px;
 letter-spacing: 5;
 background: url('https://media1.giphy.com/media/gvfpZrR54qd56/giphy.gif');
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 background-position: center left;
 z-index: 3;
 filter: drop-shadow(0px 0px 5px #000);
}

.credit {
position:absolute;
bottom:0px;
right:5px;
height:60px;
width:60px;
opacity: .7;
background-image: url('https://i.imgur.com/67eVLlq.png');
background-position: center;
background-size: cover
}

</style>

<div id="bitch" oncontextmenu="return false;">

<div class="box"></div>
<div class="render"></div>
<div class="flower"></div>

<a class='icon' href='#1'></a>
<a class='icon2' href='#2'></a>
<a class='icon3' href='#3'></a>
<a class='icon4' href='#4'></a>

<div class="tt">Kusabana</div>

<div class='words' div id='1'>
<h1>rap sheet.</h1>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>
<b>Stat</b><font style='float:right'>Here</font><br>

</div>

<div class='words' div id='2'>
<h1>the story so far.</h1>

</div>

<div class='words' div id='3'>
<h1>my associates.</h1>


</div>

<div class='words' div id='4'>
<h1>out of character.</h1>
<b>000.</b> ooc here<br>
<b>001.</b> acab btw<br>
<b>002.</b> black lives matter btw<br>
<b>003.</b> feel free to edit the code to ur liking<br>
<b>004.</b> just leave the credit where it belongs<br>
<b>005.</b> ooc here<br>
<b>006.</b> wife wuz heer
</div>

</div>
<a href="https://roleplay.chat/profile.php?user=wife"><div class="credit"></div></a>