simple sundrop layout

Tags: sun, sundrop, rainbow, fnaf, midnightterror, vhs
Description:

sundrop layout! made for me! theres a matching moon one. credit to lowpolyparrot on tumblr for the sun model + animations!
Preview:

click on the image for a larger preview
Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');

body{
background-color: #fff2d6;
background-image:url(https://64.media.tumblr.com/849c4259435e5ff9789dd42e23fbf003/tumblr_p422nhq6vi1qzm8dwo1_1280.gif);
height: 75%;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}

nav .top{
background-color: #FF94BB;
background-image:url(https://media0.giphy.com/headers/jmckeehen/s2wy7iphPP98.gif);
border-radius: 20px;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
margin: 1em 0;
}

nav .links{
background-color: #E76292;
background-image:url(https://media0.giphy.com/headers/jmckeehen/s2wy7iphPP98.gif);
border-radius: 20px;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}

nav .links li::after{
display: none;
}

main{ 
background-color: #fce0a7;
border-radius: 20px;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
margin: 1em 0;
padding: .5em;
opacity: .9;
}

.profile h1{
font-family: 'Kalam', cursive;
color: #fa504d;
text-shadow: 1px 1px 2px #fcd481;
font-size: 25px;
}

.online { visibility: hidden; } .online img { content: url("https://64.media.tumblr.com/8ee0cff61d00946400c5c0e46ff98c42/e360c8311d632c2a-fa/s250x400/66b7786d24b69d64cc30276d10b4b75cbb8fc8fd.gifv"); animation-name: none; visibility: visible; height: 90px; width: 90px; }

.profile .profile-info{
border-radius: 20px;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
text-shadow: 1px 1px 2px #fcd481;
color: #fa504d;
background-image: url(https://i.gifer.com/DXp.gif);
background-repeat: no-repeat;
background-size: cover;
}

.profile .general-about{
color: #fa504d;
font-style: italic;
text-shadow: 1px 1px 2px #AC3862;
}

.profile .blog-preview,
.profile .mood{
color: #fa504d;
font-style: italic;
}

.profile .profile-pic img{
border-radius: 20px;
box-shadow: 1px 1px 2px #fcd481;
filter: sepia(100%) hue-rotate(fff2d6);
opacity: .5;
}

.profile .contact .heading,
.profile .table-section .heading{
font-family: 'Kalam', cursive;
color: #fa504d;
background-color: #fff2d6;
border-radius: 20px 20px 0 0;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .table-section,
.profile .contact,
.profile .url-info{
border-radius: 20px;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
text-shadow: 1px 1px 2px #fcd481;
font-style: italic;
color: #fa504d;
}

table.details-table td {
background-color: transparent !important;
color: #fa504d !important;
font-style: italic !important;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: #fa504d;
font-family: 'Kalam', cursive;
background-color: #fff2d6;
border-radius: 20px 20px 0 0;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .blurbs,
.profile .friends{
border-radius: 20px;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
text-shadow: 1px 1px 2px #fcd481;
font-style: italic;
color: #fa504d;
}

.profile .friends{
text-align: center;
}

.profile .friends-grid .person p{
color: #fa504d;
}

.profile .blurbs .section h4{
color: #fa504d;
padding: .5em;
}

.profile .comments-table{
background-color: #fff2d6;
border-radius: 20px;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
font-style: italic;
color: #fa504d;
}

.profile .comments-table td{
background-color: transparent;
}

.profile .comments-table .comment-replies{
background-color: #fff2d6;
border-radius: 20px;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
font-style: italic;
color: #fa504d;
}

.comments-table img,
.person img{
border-radius: 20px;
box-shadow: 1px 1px 2px #fcd481;
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}


footer{
background-color: #fff2d6;
border-radius: 20px;
border: 2px solid #fcd481;
box-shadow: inset 2px 3px 5px #fcd481;
font-style: italic;
color: #fa504d;
}

.count{
color: #fa504d;
}

a{
color: #fa504d;
text-shadow: 1px 1px 2px #AC3862;
}

a:visited {
color: #fa504d;
text-shadow: 1px 1px 2px #AC3862;
}

a:hover {
color: #fa504d;
}

a:active {
color: #fa504d;
text-shadow: 1px 1px 2px #AC3862;
}

nav .links a:hover{
text-decoration: underline;
color: #fa504d;
}



<style>

table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
}


</style>

<style>
.noise {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 400;
opacity: 0.8;
pointer-events: none;
opacity: 1;
z-index: 450;
}

.noise:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://ice-creme.de/images/background-noise.png');
pointer-events: none;
will-change: background-position;
animation: noise 1s infinite alternate;
}

.lines {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.6;
will-change: opacity;
animation: opacity 3s linear infinite;
}

.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
will-change: background, background-size;
animation: scanlines 0.2s linear infinite;
}

.main {
}

.main .noise:before {
background-size: 170%;
}

.main .vhs {
position: absolute;
left: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 2s steps(9) 0s infinite alternate;
}

.main .vhs .char {
will-change: opacity;
animation: type 1.2s infinite alternate;
animation-delay: calc(60ms * var(--char-index));
}

.main .time {
position: absolute;
right: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

.main .glitchtext {
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

@keyframes noise {
0%,
100% {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
}

@keyframes opacity {
0% {
opacity: 0.6;
}
20% {
opacity: 0.3;
}
35% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
60% {
opacity: 0.4;
}
80% {
opacity: 0.7;
}
100% {
opacity: 0.6;
}
}

@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
}
to {
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
background-size: 100% 4px;
}
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

@keyframes type {
0%,
19% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
</style>
<div class="lines"></div>
<div class="main">
<div class="noise"></div>

<style>
.rgbtxt {
animation: rgbText 1s steps(9) 0s infinite alternate;
animation-name: rgbText;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

</style></div>

<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://64.media.tumblr.com/f13442adac4fbb73a196b19a85ad5e8f/9416a719a5ae1aa0-54/s400x600/5a068f2df5df7e3c9a65d9126bf32956430931ec.gifv"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 
</style>

<style>html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.pinimg.com/originals/17/6f/b5/176fb547189cbdb4f745d425e84167f3.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.4;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain 
  70% { transform:translate(0%, 15%) }
}</style>

<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://64.media.tumblr.com/6a33ca826a8c6531198d4dd284808277/d35b221456e19fda-4d/s400x600/b4c52713867ae820729dac679183ee989056f255.gifv') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 320px;
    width: 300px;
    z-index: 1000;
    opacity: 1;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>

<style>
div.table-section:nth-child(odd):after {
 content: url(https://64.media.tumblr.com/b297c1257d1fe07f916b85941d6f368a/83c15a0ff7c46919-c9/s250x400/b437b104eabdfeee52d7626398566dd2c41dbd88.gifv); 
}
</style>

<img src="https://64.media.tumblr.com/b7f1986f3dc6434941e162a12220c792/tumblr_nq4241PzWg1to9ua6o1_400.gif"/>


<style>
.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:url('https://gardenia.ju.mp/assets/images/gallery04/24888e56.gif?v=4aad6e15')
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content:url('https://gardenia.ju.mp/assets/images/gallery04/24888e56.gif?v=4aad6e15')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content:url('https://gardenia.ju.mp/assets/images/gallery04/24888e56.gif?v=4aad6e15')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content:url('https://gardenia.ju.mp/assets/images/gallery04/24888e56.gif?v=4aad6e15')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content:url('https://gardenia.ju.mp/assets/images/gallery04/24888e56.gif?v=4aad6e15')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content:url('https://gardenia.ju.mp/assets/images/gallery04/24888e56.gif?v=4aad6e15')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content:url('https://gardenia.ju.mp/assets/images/gallery04/24888e56.gif?v=4aad6e15')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content:url('https://gardenia.ju.mp/assets/images/gallery04/24888e56.gif?v=4aad6e15')
}
</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 7 of 7 comments ( View all | Add Comment )
moon !!	1709098997 using but im going to edit it a lil ! :3 Report Comment
JELLY<3	1704601760 love it using :3 Report Comment
StinkyDibHuman	1704394725 using !! Report Comment
Tasteful	1700688606 RAHHHHH ty :3 Report Comment
tea3rr0rs	1700264747 THIS IS THE CUTEST THING EVER I LOVE IT SM TYYY Report Comment
Sunny⛧彡	1697670377 IM USUING TYSMMMM AJJHFGEUDIWJS Report Comment
STARZ	1694790303 Using<3!! Report Comment