Koriandr code

<style>

@import url('https://fonts.googleapis.com/css?family=Lato|Rancho');
@import url('https://fonts.googleapis.com/css?family=Homemade+Apple');
@import url('https://fonts.googleapis.com/css?family=Orbitron|Teko');
  body {
background-color:#a76487;
overflow:hidden;
}


::-webkit-scrollbar
{
  width: 0px;
	background-color: transparent;
}


.stars {
 background:#000 url(http://i.imgur.com/E1QZbHT.png) repeat top center;
 z-index:0;
}

.twinkling{
 background:transparent url(http://i.imgur.com/qHEkoy6.png) repeat top center;
 z-index:1;

 -moz-animation:move-twink-back 200s linear infinite;
 -ms-animation:move-twink-back 200s linear infinite;
 -o-animation:move-twink-back 200s linear infinite;
 -webkit-animation:move-twink-back 200s linear infinite;
 animation:move-twink-back 200s linear infinite;
}


@keyframes move-twink-back {
 from {background-position:0 0;}
 to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
 from {background-position:0 0;}
 to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
 from {background-position:0 0;}
 to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
 from {background-position:0 0;}
 to {background-position:-10000px 5000px;}
}



.stars, .twinkling, .clouds {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 width:100%;
 height:100%;
 display:block;
}


#image{
 background-image:url(https://i.imgur.com/XRCoXoS.png);
 background-repeat:no-repeat;
 width:400px;
 height:630px;
 background-size:100%;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-300px;
 margin-left:-550px;
z-index:11;
filter:drop-shadow(0px 0px 10px #000);
 animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition:1s;
}

#image:hover{
 background-image:url(https://i.imgur.com/1CDWKxf.png);
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }
}

#energyleft{
  background-image:url(https://i.imgur.com/hpJEJp7.png);
  background-size:100%;
  width:100px;
  height:100px;
  opacity:0;
  filter:hue-rotate(300deg) brightness(60%) contrast(300%) drop-shadow(0px 0px 20px rgba(17, 115, 23, 1));
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-140px;
  margin-top:-70px;
   animation:pulse 2s infinite alternate ;
transition:1s;
}

#image:hover #energyleft{
  opacity:.9;
}

#energyright{
  background-image:url(https://i.imgur.com/hpJEJp7.png);
  background-size:100%;
  width:100px;
  height:100px;
  opacity:0;
  filter:hue-rotate(300deg) brightness(60%) contrast(300%) drop-shadow(0px 0px 20px rgba(17, 115, 23, 1));
  position:absolute;
  top:50%;
  left:50%;
  margin-left:25px;
  margin-top:-50px;
   animation:pulse 2s infinite alternate;
transition:1s;
}

#image:hover #energyright{
  opacity:.9;
}
@keyframes pulse{

 to {filter: hue-rotate(300deg) brightness(60%) contrast(300%) drop-shadow(0px 0px 30px rgba(17, 115, 23, 1));
 transform:scale(1.3);
 }

 }

#space{
background-image:url(https://i.imgur.com/oP8JG4i.pngb);
background-size:100%;
background-repeat:no-repeat;
width:1100px;
height:650px;
filter:contrast(140%) brightness(80%);
top:50%;
left:50%;
position:absolute;
margin-top:-350px;
margin-left:-550px;
transform:scaleX(1);
animation: 3s 1s;
animation-fill-mode:forwards;
z-index:10;
}

@keyframes space{
  from{
 transform:scaleX(0);
}
 to{
 transform:scaleX(1);
}
}

#linename1{
width:250px;
height:1px;
background-color:#fff;
position:absolute;
top:0%;
left:0%;
margin-left:10px;
margin-top:90px;
 transform: scalex(1);
animation: 2s 4s;
animation-fill-mode:forwards;
}

#linename2{
width:250px;
height:1px;
background-color:#fff;
position:absolute;
bottom:0%;
left:0%;
margin-left:10px;
margin-bottom:90px;
 transform: scalex(1);
animation: 2s 4s;
animation-fill-mode:forwards;
}

#hexagon{
clip-path: polygon(50% 0%, 100% 15%, 100% 84%, 50% 100%, 0 84%, 0 15%);
  width:300px;
  height:600px;
  background-color:rgba(130, 27, 40, 0.6);
  position:absolute;
  margin-left:400px;
  margin-top:0px;
  opacity:1;
  animation:appear 1s 3.5s;
  animation-fill-mode:forwards;
}

#pentagon1{
clip-path: polygon(50% 0%, 100% 30%, 100% 100%, 0 100%, 0 30%);
width:275px;
height:280px;
background-color:#c57a43;
margin-left:12.5px;
margin-top:10px;
position:absolute;
}

#pentagon2{
clip-path: polygon(50% 100%, 100% 70%, 100% 0, 0 0, 0 70%);
width:275px;
height:280px;
background-color:#c57a43;
margin-left:12.5px;
margin-top:0px;
position:absolute;
top:300px;
}

#box{
  background-color:rgba(130, 27, 40, 0.6);
position:absolute;
width:300px;
height:415px;
left:50%;
left:50%;
z-index:10;
margin-left:149.8px;
margin-top:90px;
opacity:1;
  animation:appear 1s 3.5s;
  animation-fill-mode:forwards;
}

@keyframes appear{
to{
 opacity:1;
}
}

#navi{
 width:50px;
 height:200px;
 background-color:transparent;
 top:50%;
 left:50%;
 position:absolute;
 margin-top:-150px;
 margin-left:-210px;
 z-index:99;

}

#navi a{
 width:30px;
 height:40px;
 background-color:#c57a43;;
 display:block;
 margin-top:8px;
 margin-left:10px;
 transition:.5s;
}

#navi a:hover{
 background-color: rgba(130, 27, 40, 1);
}

#header, #header2, #header3{
font-family: 'Orbitron', sans-serif;
font-size:25pt;
color:#fff;
position:absolute;
top:0px;
margin-top:-35px;
margin-left:70px;
opacity:0;
}

#header4{
 font-family: 'Orbitron', sans-serif;
font-size:25pt;
color:#fff;
position:absolute;
top:0px;
margin-top:-35px;
margin-left:70px;
opacity:1;
}

#diamond{
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color:#transparent;
position:absolute;
width:100px;
height:100px;
margin-left:350px;
margin-top:30px;
z-index:50;
}

#d1, #d2, #d3{
width:100px;
height:100px;
opacity:0;
position:absolute;
}

#d4{
width:100px;
height:100px;
opacity:1;
position:absolute;

}

h2{
font-family: 'Orbitron', sans-serif;
font-size:25pt;
color:#fff;
text-align:center;
margin-top:-5px;
}

#friendgallery{
 height:210px;
 width:289px;
 background-color:#c57a43;
 position:absolute;
 margin-left:0px;
 margin-top:10px;
}

#friend{
  width:270px;
  height:90px;
  background-color:#e9a05c;
  margin-top:10px;
  margin-left:10px;
  position:absolute;
  overflow:auto;
}

#friend a{
 width:80px;
 height:80px;
 border-radius:50%;
 background-color:#000;
 display:block;
 margin-top:5px;
 margin-left:5px;
 margin-bottom:5px;
}


#musicbackground{
width:265px;
height:80px;
margin-top:0px;
margin-bottom:5px
margin-left:5px;
background-color:transparent;
position:absolute;
}

#musicbar{
width:170px;
height:30px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
background-color:rgba(130, 27, 40, 1);
position:absolute;
right:0px;
top:0px;
margin-top:10px;
margin-right:10px;
transition:.5s;
font-family: 'Teko', sans-serif;
color:#fff;
font-size:15pt;
text-align:center;
overflow:hidden;
}

#musicbar audio{
 zoom: 1000%;
 opacity: 0;
 margin-top: -13px;
 margin-left: -2px;
}



#musicbar:hover{
background-color:rgba(130, 27, 40, 0.6);
}

#marqueebar{
width:170px;
height:30px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
background-color:rgba(130, 27, 40, 1);
position:absolute;
right:0px;
bottom:0px;
margin-bottom:0px;
margin-right:10px;
font-family: 'Teko', sans-serif;
color:#fff;
font-size:13pt;
}

#gallery{
  width:270px;
  height:95px;
  background-color:#e9a05c;
  position:absolute;
  margin-top:110px;
  margin-left:10px;
  overflow:auto;
}

#gallery a{
 display:block;
 height:40px;
 width:260px;
 background-color:#000;
 margin-top:5px;
 margin-left:5px;
 margin-bottom:5px;
}

#ooc{
width:250px;
height:170px;
position:absolute;
background-color:transparent;
margin-top:10px;
margin-left:10px;
font-family: 'Teko', sans-serif;
color:#fff;
font-size:13pt;
overflow:auto;
}


#one, #two, #three{
opacity:0;
width:250px;
height:170px;
position:absolute;
background-color:transparent;
margin-top:100px;
margin-left:10px;
z-index:1;
font-family: 'Teko', sans-serif;
color:#fff;
font-size:13pt;
overflow:auto;
}


#four{
opacity:1;
width:250px;
height:170px;
position:absolute;
background-color:transparent;
margin-top:100px;
margin-left:10px;
z-index:2;
font-family: 'Teko', sans-serif;
color:#fff;
font-size:13pt;
line-height:20px;
overflow:auto;
}

a{
color:rgba(130, 27, 40, 1);
text-decoration:none;
font-size:16pt;
transition:1s;
}

a:hover{
color:gold;
}

#blanketone:target #one{
opacity:1;
z-index:10;
transition:1s;
}

#blanketone:target #four{
opacity:0;
z-index:1;
transition:1s;

}

#blankettwo:target #two{
opacity:1;
z-index:10;
transition:1s;

}

#blankettwo:target #four{
opacity:0;
z-index:1;
transition:1s;
}

#blanketthree:target #three{
opacity:1;
z-index:10;
transition:1s;
}

#blanketthree:target #four{
opacity:0;
z-index:1;
transition:1s;
}


#blanketfour:target #four{
opacity:1;
z-index:10;
transition:1s;
}

#blanketone:target #header{
opacity:1;
z-index:10;
transition:1s;
}

#blanketone:target #header4{
opacity:0;
z-index:1;
transition:1s;
}

#blankettwo:target #header2{
opacity:1;
z-index:10;
transition:1s;
}

#blankettwo:target #header4{
opacity:0;
z-index:1;
transition:1s;
}

#blanketthree:target #header3{
opacity:1;
z-index:10;
transition:1s;
}

#blanketthree:target #header4{
opacity:0;
transition:1s;
z-index:1;
}


#blanketfour:target #header4{
opacity:1;
z-index:10;
transition:1s;
}

#blanketone:target #d1{
opacity:1;
z-index:10;
transition:1s;
}

#blanketone:target #d4{
opacity:0;
z-index:1;
transition:1s;
}

#blankettwo:target #d2{
opacity:1;
z-index:10;
transition:1s;
}

#blankettwo:target #d4{
opacity:0;
z-index:1;
transition:1s;
}

#blanketthree:target #d3{
opacity:1;
z-index:10;
transition:1s;
}

#blanketthree:target #d4{
opacity:0;
transition:1s;
z-index:1;
}


#blanketfour:target #d4{
opacity:1;
z-index:10;
transition:1s;
}

#polaroid,#polaroid2,#polaroid3,#polaroid4,#polaroid5,#polaroid6{
width:220px;
height:260px;
position:absolute;
top:0px;
left:0px;
margin-top:220px;
margin-left:30px;
transform:rotate(10deg);
opacity:0;
}

#blanket:target #polaroid{
opacity:1;
transition:1s;
}

#blanket2:target #polaroid2{
opacity:1;
transition:1s;
}

#blanket3:target #polaroid3{
opacity:1;
transition:1s;
}

#blanket4:target #polaroid4{
opacity:1;
transition:1s;
}

#blanket5:target #polaroid5{
opacity:1;
transition:1s;
}

#blanket6:target #polaroid6{
opacity:1;
transition:1s;
}

#postit{
background-image:url(https://cdn.discordapp.com/attachments/431497796152066101/469389268226408449/0f613df3b068c62c8ab2ef9cc8a4c352-blue-post-it-note-by-vexels.png);
background-size:100%;
background-repeat:no-repeat;
width:300px;
height:300px;
position:absolute;
top:0px;
margin-top:200px;
z-index:10;
opacity:0;
}

#text, #text2, #text3, #text4, #text5, #text6{
width:240px;
height:170px;
background-color:transparent;
position:absolute;
transform:rotate(-5deg);
margin-top:80px;
margin-left:35px;
font-family: 'Homemade Apple', cursive;
color:#000;
font-size:10pt;
opacity:0;
}


#blanket21:target #postit{
opacity:1;
transition:1s;
}

#blanket21:target #text{
opacity:1;
transition:1s;
}

#blanket22:target #postit{
opacity:1;
transition:1s;
}

#blanket22:target #text2{
opacity:1;
transition:1s;
}

#blanket23:target #postit{
opacity:1;
transition:1s;
}

#blanket23:target #text3{
opacity:1;
transition:1s;
}

#blanket24:target #postit{
opacity:1;
transition:1s;
}

#blanket24:target #text4{
opacity:1;
transition:1s;
}

#blanket25:target #postit{
opacity:1;
transition:1s;
}

#blanket25:target #text5{
opacity:1;
transition:1s;
}


#blanket26:target #postit{
opacity:1;
transition:1s;
}

#blanket26:target #text6{
opacity:1;
transition:1s;
}
</style>
<div id="blanketone"><div id="blankettwo"><div id="blanketthree"><div id="blanketfour">
<div id="blanket"><div id="blanket2"><div id="blanket3"><div id="blanket4"><div id="blanket5"><div id="blanket6">
<div id="blanket21"><div id="blanket22"><div id="blanket23"><div id="blanket24"><div id="blanket25"><div id="blanket26">
<div class="stars"></div>
<div class="twinkling"></div>
   <div id="navi">
     <a href="#blanketone"></a>
    <a href="#blankettwo"></a>
     <a href="#blanketthree"></a>
        <a href="#blanketfour"></a>
   </div>
<div id="image">
   <div id="energyleft"></div>
<div id="energyright"></div>

</div>
<div id="space">
  <div id="box">

  <div id="friendgallery">
      <div id="friend">
<div id="musicbackground">
             <a href="#blanket21">
<img src="https://cdn.discordapp.com/attachments/375453847876927499/469559416543510528/80_x_80.png" width="80" height="80">
</a>
<div id="musicbar">
<b>Friend Name</b>
 <audio controls src="http://k003.kiwi6.com/hotlink/90linpzes2/High_Klassified_1250.mp3" loop=3>
 </audio>

</div>
<div id="marqueebar">
 <marquee direction="left" scrollamount="3">

 Song name here
 </marquee>

</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div id="musicbackground">
             <a href="#blanket22">
<img src="https://cdn.discordapp.com/attachments/375453847876927499/469559416543510528/80_x_80.png" width="80" height="80">
</a>
<div id="musicbar">
<b>Friend Name</b>
 <audio controls src="http://k003.kiwi6.com/hotlink/90linpzes2/High_Klassified_1250.mp3" loop=3>
 </audio>

</div>
<div id="marqueebar">
 <marquee direction="left" scrollamount="3">

 Song name here
 </marquee>

</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div id="musicbackground">
             <a href="#blanket23">
<img src="https://cdn.discordapp.com/attachments/375453847876927499/469559416543510528/80_x_80.png" width="80" height="80">
</a>
<div id="musicbar">
<b>Friend Name</b>
 <audio controls src="http://k003.kiwi6.com/hotlink/90linpzes2/High_Klassified_1250.mp3" loop=3>
 </audio>

</div>
<div id="marqueebar">
 <marquee direction="left" scrollamount="3">

 Song name here
 </marquee>

</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div id="musicbackground">
             <a href="#blanket24">
<img src="https://cdn.discordapp.com/attachments/375453847876927499/469559416543510528/80_x_80.png" width="80" height="80">
</a>
<div id="musicbar">
<b>Friend Name</b>
 <audio controls src="http://k003.kiwi6.com/hotlink/90linpzes2/High_Klassified_1250.mp3" loop=3>
 </audio>

</div>
<div id="marqueebar">
 <marquee direction="left" scrollamount="3">

 Song name here
 </marquee>

</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div id="musicbackground">
             <a href="#blanket25">
<img src="https://cdn.discordapp.com/attachments/375453847876927499/469559416543510528/80_x_80.png" width="80" height="80">
</a>
<div id="musicbar">
<b>Friend Name</b>
 <audio controls src="http://k003.kiwi6.com/hotlink/90linpzes2/High_Klassified_1250.mp3" loop=3>
 </audio>

</div>
<div id="marqueebar">
 <marquee direction="left" scrollamount="3">

 Song name here
 </marquee>

</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div id="musicbackground">
             <a href="#blanket26">
<img src="https://cdn.discordapp.com/attachments/375453847876927499/469559416543510528/80_x_80.png" width="80" height="80">
</a>
<div id="musicbar">
<b>Friend Name</b>
 <audio controls src="http://k003.kiwi6.com/hotlink/90linpzes2/High_Klassified_1250.mp3" loop=3>
 </audio>

</div>
<div id="marqueebar">
 <marquee direction="left" scrollamount="3">

 Song name here
 </marquee>

</div>
</div>
<br>
<br>
<br>
<br>
<br>
      </div>
<div id="postit">
<div id="text">
This is where you write about your friends, short and sweet.
</div>
<div id="text2">
This is where you write about your friends, short and sweet.
</div>
<div id="text3">
This is where you write about your friends, short and sweet.
</div>
<div id="text4">
This is where you write about your friends, short and sweet.
</div>
<div id="text5">
This is where you write about your friends, short and sweet.
</div>
<div id="text6">
This is where you write about your friends, short and sweet.
</div>
</div>

      <div id="gallery">
      <a href="#blanket">
<img src="https://media.discordapp.net/attachments/419287329937555456/469363749841797135/2.png" width="260" height="40"></a>
<a href="#blanket2">
<img src="https://media.discordapp.net/attachments/419287329937555456/469363746406531073/5.png" width="260" height="40"></a>
<a href="#blanket3">
<img src="https://media.discordapp.net/attachments/419287329937555456/469363746020524032/4.png" width="260" height="40"></a>
<a href="#blanket4">
<img src="https://media.discordapp.net/attachments/419287329937555456/469363742929453072/3.png" width="260" height="40"></a>
<a href="#blanket5">
<img src="https://media.discordapp.net/attachments/419287329937555456/469363748440768512/1.png" width="260" height="40"></a>
<a href="#blanket6">
<img src="https://media.discordapp.net/attachments/419287329937555456/469363748398956559/6.png" width="260" height="40"></a>
<a href="#blanket7">
<img src="https://cdn.discordapp.com/attachments/375453847876927499/469559419739439104/260_x_40.png" width="260" height="40"></a>
<a href="#blanket8">
<img src="https://cdn.discordapp.com/attachments/375453847876927499/469559419739439104/260_x_40.png" width="260" height="40"></a>


      </div>
   <div id="polaroid"><img src="https://cdn.discordapp.com/attachments/419287329937555456/469363779562504202/Polaroid_2.png" width="220" height="260"></div>
   <div id="polaroid2"><img src="https://cdn.discordapp.com/attachments/419287329937555456/469363857698193408/Polaroid_5.png" width="220" height="260"></div>
<div id="polaroid3"><img src="https://media.discordapp.net/attachments/419287329937555456/469363780154032128/Polaroid_4.png?width=462&height=559" width="220" height="260"></div>
<div id="polaroid4"><img src="https://cdn.discordapp.com/attachments/419287329937555456/469363780283793408/polaroid_3.png" width="220" height="260"></div>
<div id="polaroid5"><img src="https://cdn.discordapp.com/attachments/419287329937555456/469363855177285644/Polaroid1.png" width="220" height="260"></div>
<div id="polaroid6"><img src="https://cdn.discordapp.com/attachments/419287329937555456/469363856377118720/polaroid_6.png" width="220" height="260"></div>

    </div>
  </div>

  <div id="diamond">
<div id="d1"><img src="https://cdn.discordapp.com/attachments/431497796152066101/469588740394975253/100_3.png" width="100" height="100"></div>
<div id="d2"><img src="https://cdn.discordapp.com/attachments/431497796152066101/469588743578320896/100_4.png" width="100" height="100"></div>
<div id="d3"><img src="https://cdn.discordapp.com/attachments/431497796152066101/469588744077443086/100_1.png" width="100" height="100"></div>
<div id="d4"><img src="https://cdn.discordapp.com/attachments/431497796152066101/469588746514464768/100_2.png" width="100" height="100"></div>
</div>

  <div id="hexagon">
   <div id="pentagon1">
     <div id="linename1">
     <div id="header">Meme</div>
     <div id="header2">Meme2</div>
     <div id="header3">Meme3</div>
     <div id="header4">Stats</div>
     </div>
     <div id="one">
meme
     </div>
<div id="two">
meme2
     </div>
<div id="three">
meme3
     </div>
<div id="four">
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;"><a href="https://img00.deviantart.net/337d/i/2016/276/3/d/tattoos_ideas_by_nanihoo-dajr39d.png">Markings</a></span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
     </div>
   </div>
      <div id="pentagon2">
        <div id="linename2">
       <h2> OOC</h2>
     </div>
<div id="ooc">
<b>00</b> Code credit @ <a href="https://roleplay.chat/profile.php?user=Hound%20of%20Tindalos">hound of tindalos</a>

</div>
      </div>
  </div>

</div>