blue and yellow themed Ocean / key west layout

Tags: ocean, summer, key west, blue, yellow, tropical, layout, gif

Description:

Its a pretty simple one, I'm really proud of this one

Does include music and custom curser

Link to preview/layout --- https://spacehey.com/profile?id=1451251

Code:

<!-- (c) Layout created by KJ (https://layouts.spacehey.com/layout?id=23336) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300;1,500&display=swap');
p{
font-family: 'Cormorant Garamond', serif;
font-size: 150%;
color: #5584a1

}

body {
background: url(https://i.pinimg.com/originals/2a/62/1e/2a621e55b1089a0bd1dcf0b0de89d3a8.gif);
background-size: cover;
}</style>

<style>

  :root {
        --logo-blue: #a3f0ff;
        --darker-blue: #639fab;
        --lighter-blue:#bdf4ff;
        --even-lighter-blue:#d6f8ff;
        --lightest-blue:#f2fdff;
        --dark-orange: #cfc774;
        --light-orange: #fff9b3;
        --even-lighter-orange: #fffce0;
        --green: #fcf174;
   

	background-image: url(https://i.pinimg.com/originals/44/3a/d6/443ad6cc93f56b189697bba06d9da48e.gif);
	padding: 20px;
	border-radius: 10px;
	box-shadow: 4px 4px 0 ##ffd1ee;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .46s;

 }</style>
<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "🏝️"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "☀️"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🌊"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "🐚"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "👙"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block */
content: "💧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "🐡"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🏖️"
} </style>


<img src="https://64.media.tumblr.com/a76e4030afd0d9cc44e4649149f82fe2/2ab37c5430491158-ee/s400x600/330a812bac268056d018621deeea2048743414b7.pnj"/>

<style> .NAMEHERE { background: url(https://64.media.tumblr.com/7238226d8f7448604da8003543e5da2e/edf75519c0708e79-d2/s250x400/7d0e3c9120520f6eacd069749a0e9e356bf5103b.gifv) no-repeat; background-size: 100%!important; position: fixed; right: 0px; bottom: 0px; height: 320px; width: 100px; filter: drop-shadow(0px 0px 0px #000); z-index: 1000; opacity: 1; } @media (max-width: 600px) { .NAMEHERE{display:none;} } </style> 

<div class="NAMEHERE"></div>


<iframe width="0" height="0" src="https://www.youtube.com/embed/1u9yjKl1X9E//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>


}
<style>
html:before {
  animation: grain 8s steps(5) infinite;
  background-image: url(https://64.media.tumblr.com/7b53b6f72a66a2e56b28dbb5426b74b3/5c8722790f831173-1b/s250x250_c1/8ac155105a769e167b20290fa74199c9d5c1fdf4.gifv);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
} </style>


<style>* {cursor: url(https://cur.cursors-4u.net/food/foo-5/foo504.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/04/18/pina-colada-cocktail.html" target="_blank" title="Pina Colada Cocktail"><img src="https://cur.cursors-4u.net/cursor.png" alt="Pina Colada Cocktail" style="position:absolute; top: 0px; right: 0px;"/></a>



<style>body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url(https://thumbs.gfycat.com/BrownElatedChrysalis-max-1mb.gif);
	background-size: cover;
	background-repeat: no-repeat;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
<style/></style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 0 of 0 comments ( View all | Add Comment )