Code that was helpful to create my page!

Bobbing:

<style>

h1{

  animation: type 3s steps(27);

  color: white;

  font-size: 10px;

  font-family: courier;

  white-space: nowrap;

  overflow: hidden;

  }

@keyframes type{

  0%{

    width:0ch;

  }

  100%{

    width:27ch;

  }

}

@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}

</style>

Shake when you hover over:

<style>

img:hover , .url-info:hover , .online:hover {

  animation: shake 1s;

  animation-iteration-count: infinite;

}

@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }

}

</style>

Flipped page:

<style>

    .profile{direction: rtl;}

.blog-preview{direction: ltr; text-align: center;}

    .blurbs{direction: ltr;}

    .friends{direction: ltr;}

    .general-info{direction: ltr;}

.profile .left h1{direction: ltr;}

    .details-table{direction: ltr;}

    .profile .table-section .heading{direction: ltr;}

    .details p{direction: ltr;}

.mood{direction: ltr; text-align: right;}

.url-info{direction: ltr; text-align: right;}

</style>

Grey filter:

<style>

html {

filter: grayscale(100%);

}

</style>

Inserting blinkies, stamps, ect:

<img src="insert image address"/>

Background image:

body{

background: url(insert image address) no-repeat fixed;

background-size: cover;

text-transform: lowercase;

}

Top navigation picture:

nav .top{

margin-top: 10px;

background: url(insert image address);

background-size: cover;

    background-position-y: center;

border: 1px solid white;

border-radius: 5px;

box-shadow: 0 0 8px white;

}

Main image:

main{

background: url(insert image address);

    border: 1px solid white;

    box-shadow: 0 0 10px white;

    border-radius: 8px;

    color: white;

    text-shadow: 1px 1px black;

}

Remove the “who I’d like to meet” section: 

<style>

.blurbs .inner .section:nth-of-type(2) {

display: none;

}

</style>

Remove the links section:

<style>

.table-section:nth-last-child(1) {

  display: none;

}

</style>

CREDITS: 

https://spacehey.com/bullpunk 

https://layouts.spacehey.com/guitarsmasher69 

https://spacehey.com/sutvre 

Special credits to https://layouts.spacehey.com/deadonarrival (I used their black and white forest layout as a template for my profile!)