Brandi code

<style>
body{
 background-color:#fcf5d8;
 background-image:url('http://www.iconsdb.com/icons/preview/white/star-xxl.png');
  background-size:30px;
 overflow:hidden;
}

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100i,300,300i,400,400i');
@import url('https://fonts.googleapis.com/css?family=Architects+Daughter');
@import url('https://fonts.googleapis.com/css?family=Passion+One');

#cover{
  width:100%;
  height:100%;
  background-color:#000;
  position:absolute;
  margin-top:0px;
  margin-left:0px;
  left:0px;
  top:0px;
  transition:1s;
  transition-delay:9999999s;
  z-index:99;
 opacity:1;
}

#star{
  background-color:#fcf5d8;
   background-image:url('http://www.iconsdb.com/icons/preview/white/star-xxl.png');
  background-size:30px;
  width:300px;
  height:300px;
  margin-top:-150px;
  margin-left:-150px;
  position:absolute;
  top:50%;
  left:50%;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  z-index:99;
  transition:2s;
}

#cover:hover > #star{
  width:5000px;
  height:5000px;
  transition:2s;
  margin-top:-2500px;
  margin-left:-2500px;
}

h2{
  font-family: 'Passion One', cursive;
  font-size:40pt;
color: white;
 background: url('https://68.media.tumblr.com/d5fa2d8151671ae4bf4cdecc4c2613be/tumblr_olwh3z29741vsjcxvo1_540.gif') no-repeat;
background-size:100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  position:absolute;
  top:40%;
  left:10%;
  transition:1s;
  opacity:0;
-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color:white;
}

#cover > h2 {
  opacity:1;
  transition-delay:1s;
}

h3{
  font-family: 'Passion One', cursive;
  font-size:40pt;
color: white;
 background: url('https://68.media.tumblr.com/d5fa2d8151671ae4bf4cdecc4c2613be/tumblr_olwh3z29741vsjcxvo1_540.gif') no-repeat;
background-size:100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  position:absolute;
  top:40%;
  left:60%;
  -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
}

body:hover > #cover{
opacity:0;
  transition-delay:2s;
  z-index:1;
}

#background{
  width:700px;
  height:400px;
  position:absolute;
  left:0%;
  background-color:#d6657f;
  top:50%;
  margin-top:-200px;
  margin-left:-350px;
  border-radius:30px;
  border:solid 2px #fd94f6;
  opacity:0;
  transition:3s;
  transition-delay:9999999999s;
  z-index:90;
  background-image:url('http://i.imgur.com/Fa0pBKl.png');
  background-size:350px;
  background-repeat:no-repeat;
  background-position:10px;
}

#image{
width:100%;
  height:501px;
  background-image:url('https://images-ext-1.discordapp.net/.eJwFwUtygjAAANC7sC-fVqS6owGkDokWEC0bxwCJEFohCb90vHvf-9MG3mpb7S5lJ7aGUf_caCX0shbFg5e3rtN_K2no1X5Cs-Uf6OJCFwGncL3-0Hv126tNBYXflMYo8xtMEhU5fL0Zr8UcKQfmHs6i-9EdmBzGgMdzz85na-Cx2W4Ce8TgxCy7MkU7PWiTBHXxQb8YnkhYLmGCwnRU5bIDDL6j1BfNsoo8eLEwkZm6kNA6gj0z9VwRvylf2jQD3ZwjYPfx6pOebHGdtOc_MLtNaA.FbeFq9OFPoz8qK2Yl3hpoWpZ1fY');
    background-size:contain;
  background-repeat:no-repeat;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-300px;
  margin-left:100px;
}

body:hover > #background{
  opacity:1;
  left:50%;
  margin-left:-350px;
  transition-delay:2.5s;

}

#navi{
  width:80px;
  height:300px;
  position:absolute;
  top:50%;
  left:50%;
  background-color:transparent;
  margin-top:-150px;
  margin-left:20px;
  float:left;
  z-index:10;

}

#navi a {
  width:70px;
  height:70px;
  background-image:url('http://i.imgur.com/bv8aQbD.png');
  background-size:100%;
  display:inline-block;
  -webkit-animation: monsterAnimation 1s infinite;
  animation: monsterAnimation 1s  infinite;
   -webkit-animation-timing-function: linear;
  -webkit-animation-play-state: paused;  /* Chrome, Safari, Opera */
  animation-play-state: paused;

}

#navi a:hover{
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

@keyframes monsterAnimation {
	100% { -webkit-transform:  rotate(360deg); }
}

#one, #two, #three{
  width:250px;
  height:250px;
  background-color:#fcd0ab;
  border-radius:10px;
  padding:10px;
  opacity:0;
  z-index:1;
  transition:1s;
  position:absolute;
  margin-top:60px;
  margin-left:50px;
  text-aligh:justify;
  font-family: 'Josefin Sans', sans-serif;
  color:#97375d;
  font-size:10pt;

}

#one:target, #two:target, #three:target{
  opacity:1;
  z-index:10;
}


h1{
  font-family: 'Architects Daughter', cursive;
  font-size:20pt;
  position:absolute;
  top:-40px;
  text-shadow: 2px 2px #fff;
}

a{
  text-decoration:none;
  color:#ea6b5c;
  transition:1s;
}

a:hover{
  color:#923456;
}

@keyframes particleAnimation
{
    0% {
        left: -100px;
      transform:rotate{0deg}
    }
    100% {
        left: calc( 100% + 100px );
    -webkit-transform: translate(0px, 300px) rotateZ(360deg);
    }
}

.p{
  position:fixed;
  left:0px;
  top:50px;
  width:30px;
  height:30px;
  background-color:transparent;
  background-image: url('http://i.imgur.com/yu81Kq1.png');
  background-size:100%;
  position:fixed;
  animation-name:particleAnimation;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.p-1{
  animation-duration:10s;
}
.p-2{
  animation-duration:5s;
  top:60%;
}
.p-3{
  animation-duration:20s;
  top:40%;
  height:60px;
  width:60px;
}

.p-4{
  animation-duration:3s;
  top:10%;
  height:100px;
  width:100px;
}

.p-5{
  animation-duration:15s;
  top:70%;
  height:20px;
  width:20px;
}


</style>


<div id="background">
  <div id="image">
  </div>
  <div id="one">
    <h1> Meme </h1>
   <br><span style="float: left; font-weight: bold;">Information</span> <span style="float: right; font-style: italic;">Stat</span>
  </div>
  <div id="two">
    <h1> Meme2 </h1>
    <br>Text
  </div>
   <div id="three">
     <h1> OOC </h1>
     <br><b>00</b> This profile was made by <a href=""> The hound of tindalos </a>, message him for commissions and inquiries about code.

  </div>
  <div id="navi">
    <a href="#one">
    </a>
    <a href="#two">
    </a>
    <a href="#three">
    </a>
    <a href="#">
    </a>
    </div>
</div>

<div id="cover">
  <div id="star">
  </div>
  <h2> Even the prettiest stars  </h2>
  <h3> eventually flicker out  </h3>
</div>

    <div class="p p-1"></div>
    <div class="p p-2"></div>
   <div class="p p-3"></div>
    <div class="p p-4"></div>
    <div class="p p-5"></div>