Rainbow layout!! Flash warning!!

Tags: rainbow, kidcore, flash warning
Description:

Kidcore rainbow layout Feel free to change the images just lmk if you use!
Preview:

click on the image for a larger preview
Code:

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

<style>
body {
  background-image: url('https://i.pinimg.com/236x/9d/98/54/9d985484a14f3950d6499b9f3a96814a.jpg');
  background-color: white;
  border: 10px dotted black;
}
nav img.logo {
  filter: brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(0%) hue-rotate(167deg) brightness(95%) contrast(105%) !important;
}
.online{
  content: url();
  padding: 5px 0px;
}
a, .profile .friends .person p, p, h2, h3, h4, .count, nav .links a{
  color: red!important;
}
h4 { animation:myRainbowPan 1s infinite; }

.rainbowUnderline{text-decoration:none;background-position:0 1.10em;background-size:100% 100%;background-repeat:no-repeat;transition:background 0.5s;background-image:linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959)}.rainbow{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.rainbowPan{animation:myRainbowPan 1s infinite}.rainbowFlash{animation:myRainbow 2s linear infinite}.rainbowFlashShadow{color:inherit;animation:myRainbowShadow 2s linear infinite}.rainbowBlink{animation:myRainbowBlink 0.3s infinite}.rainbowBlinkPan{animation:myRainbowBlinkPan 2s infinite}@keyframes myRainbowPan{0%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}25%{background:-webkit-linear-gradient(45deg, #29d0be, #6cb8ea, #ff5959, #e1f549);-webkit-background-clip:text;-webkit-text-fill-color:transparent}50%{background:-webkit-linear-gradient(45deg, #6cb8ea, #ff5959, #e1f549, #29d0be);-webkit-background-clip:text;-webkit-text-fill-color:transparent}75%{background:-webkit-linear-gradient(45deg, #ff5959, #e1f549, #29d0be, #6cb8ea);-webkit-background-clip:text;-webkit-text-fill-color:transparent}100%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@keyframes myRainbow{0%{color:#e1f549}25%{color:#29d0be}50%{color:#6cb8ea}75%{color:#ff5959}100%{color:#e1f549}}@keyframes myRainbowShadow{0%{text-shadow:0 0 5px #e1f549}25%{text-shadow:0 0 5px #29d0be}50%{text-shadow:0 0 5px #6cb8ea}75%{text-shadow:0 0 5px #ff5959}100%{text-shadow:0 0 5px #e1f549}}@keyframes myRainbowBlink{0%{color:inherit}50%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@keyframes myRainbowBlinkPan{0%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}12.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}25%{background:-webkit-linear-gradient(45deg, #29d0be, #6cb8ea, #ff5959, #e1f549);-webkit-background-clip:text;-webkit-text-fill-color:transparent}37.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}50%{background:-webkit-linear-gradient(45deg, #6cb8ea, #ff5959, #e1f549, #29d0be);-webkit-background-clip:text;-webkit-text-fill-color:transparent}62.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}75%{background:-webkit-linear-gradient(45deg, #ff5959, #e1f549, #29d0be, #6cb8ea);-webkit-background-clip:text;-webkit-text-fill-color:transparent}87.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}100%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}.inline{display:inline}

.friends-grid{
  text-align:center;
  padding:0px!important;
}
:root{
  --red: #eb6363ff;
  --orange: #ebc063ff;
  --yellow: #ebeb63ff;
  --green: #63eb6eff;
  --cyan: #63ebe6ff;
  --purple: #9963ebff;
  --pink: #eb63c2ff;

}

@keyframes glowrainbow{
  0%{
    box-shadow: 0 0 5em 2em var(--red);
  }
  16%{
    box-shadow:0 0 5em 2em var(--orange);
  }
  32%{
    box-shadow: 0 0 5em 2em var(--yellow);
  }
  48%{
    box-shadow: 0 0 5em 2em var(--green);
  }
  64%{
    box-shadow: 0 0 5em 2em var(--cyan);
  }
  80%{
    box-shadow: 0 0 5em 2em var(--purple);
  }
  90%{
    box-shadow: 0 0 5em 2em var(--pink);
  }
  100%{
    box-shadow:0 0 5em 2em var(--red);
  }
}


body > .container{
  animation:30s glowrainbow infinite;
}
.friends .person{
    background-color: white;
    width:80px!important;
    display: inline-flex!important;
    flex-direction: column-reverse;
    margin:10px;
    vertical-align: top;
    padding-left:5px!important;
    padding-top:5px!important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}
.friends .person p{
    text-align: center;
    word-wrap: break-word;
}
.profile .friends .person img:not(.icon){
  max-width:70px!important;
}
.profile .friends .person:nth-of-type(1){
    transform: rotate(-4deg);
}
.profile .friends .person:nth-of-type(2){
    transform: rotate(5deg);
}
.profile .friends .person:nth-of-type(3){
    transform: rotate(-2deg);
}
.profile .friends .person:nth-of-type(4){
    transform: rotate(6deg);
}
.profile .friends .person:nth-of-type(5){
    transform: rotate(6deg);
}
.profile .friends .person:nth-of-type(6){
    transform: rotate(-1deg);
}
.profile .friends .person:nth-of-type(7){
    transform: rotate(3deg);
}
.profile .friends .person:nth-of-type(8){
    transform: rotate(-3deg);
}
h1{
   background: url(https://i.pinimg.com/236x/f8/79/aa/f879aad7b81562135336994d266dc2d2.jpg);
   border: 5px solid red!important;
   padding:5px;
}
button {
  background-color: transparent!important;
  border: none;
  color: red;
  font-weight: bold;
}
.general-about .details {
  border: 5px solid black;
  background-color: black!important;
  padding-bottom: 110px;
}
.contact .inner a img{
  font-size: 0;
}
.contact .inner a img:before{
  font-size: 1em;
  display: block
}
/*ADD TO FRIENDS*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before{
  content: "⭐️"
}
/*ADD TO FAVS*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before{
  content: "⭐️"
}
/*SEND MESSAGE*/
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{
  content: "⭐️"
}
/*FORWARD TO FRIEND*/
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
  content: "⭐️"
}
/*INSTANT MESSAGE*/
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
  content: "⭐️"
}
/*BLOCK USER*/
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before{
  content: "⭐️"
}
/*ADD TO GROUP*/
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before{
  content: "⭐️"
}
/*REPORT USER*/
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before{
  content: "⭐️"
}

.contact {
  border-radius: 8px;
  border: 5px solid black!important;
  box-shadow: 0 0 10px red;
  background-image: url(https://i.pinimg.com/236x/f8/79/aa/f879aad7b81562135336994d266dc2d2.jpg );
  background-position: bottom;
  background-size: fit;
background-attachment: scroll;
Width: 300px;
Height:180px;

color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 3px black; }
.profile-pic {
  padding: 15px;
}
.mood {
  background-color: black!important;
  border: 5px solid black!important;
  padding: 3px;
  margin-bottom: 20px;
  margin-top: 20px;

}
.url-info, .table-section, .friends, .profile-info {
  background: url(https://i.pinimg.com/236x/5c/d8/a4/5cd8a4af09ee447ca9331667f64d4b0e.jpg);
  border: 5px solid red!important;
}
 .blurbs {
  border: 5px solid black;
  background-color: black!important;
}
.url-info {
    background: url(https://i.pinimg.com/236x/97/ee/6a/97ee6a466c3b958b12f828028b5ec603.jpg);
    background-position: center;
    border: 1px black!important;
    box-shadow: 0 0 10px red;
    background-size: cover;
    font-size: 0px;
    height: 275px;
    width: 200px;
}
main:before {
    width: 100%;
    height: 200px;
    display: block;
    content: "";
    background-image: url(https://i.pinimg.com/236x/5a/1f/d0/5a1fd0a045d72183fe71c7dd49982eaa.jpg);
    background-size: contain;
    background-position: center;
    box-shadow: 0 0 20px red;
}
.blog-preview{
  background:url(https://i.pinimg.com/originals/24/48/58/244858ee1a48db38c426d4ac4e958804.gif);
  background-position: center;
  background-size: cover;
  border: 5px solid black;
  box-shadow: 0 0 10px red;
}
.comments-table td {
  border: 3px solid black;
  background-color: black!important;
}
.table-section td {
  border: 3px solid black;
  background-color: black!important;
}
.comment-reply:not(:first-child) {
    border-top: 5px dotted black;
}
.comment-replies {
    border: 5px solid white;
    background-color: white!important;
}
nav .top, nav .links {
  background-color: transparent;
  color: black;
  font-weight: bold;
}

main, footer {
  background-color: transparent;
}
.friends:not(#comments) {
  margin-bottom: 10px;
}
.comments-table {
  border: none;
  border-spacing: 5px;
}
.profile-pic {
  padding: 15px;
}
.heading {
  background-color: transparent!important;
}
td {
  background-color: transparent!important;
}
</style>

<style>
*{
  border-radius: 9px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
  border-radius: 6px 6px 9px 9px;
}
</style>

<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>

<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>


<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  animation: spin 7s infinite linear;
}
</style>

<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;}
.contact .heading {display: none !important;}
.url-info{direction: ltr; text-align: right;}
</style>

<style>


.container {
width: 70%;
max-width: 1600px;
}

</style>

<style>

.profile h1{

font-size: 50px;

font-family: cursive;

font-weight: 550;

background: url(https://i.pinimg.com/originals/70/8a/96/708a9636ebfab2a4a7ebf871b5f083a6.gif) ;

-webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

animation: floating 3s ease-in-out infinite;

z-index: 100; 

}

.profile h1{

        border-radius: 300px;

        animation: myAnim 3s ease 1s infinite normal forwards;

    }

@keyframes myAnim {
	0% {
		animation-timing-function: ease-out;
		transform: scale(1);
		transform-origin: center center;
	}

	10% {
		animation-timing-function: ease-in;
		transform: scale(0.91);
	}

	17% {
		animation-timing-function: ease-out;
		transform: scale(0.98);
	}

	33% {
		animation-timing-function: ease-in;
		transform: scale(0.87);
	}

	45% {
		animation-timing-function: ease-out;
		transform: scale(1);
	}

}

</style>


<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://media.tenor.com/_ZTkC0689ucAAAAi/rainbow-stars-stars.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.8;
  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>


<iframe width="0" height="0" src="https://www.youtube.com/embed/C0r4JNQKS68//?&;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></style>

<div class="snowflakes">


  <div class="snowflake">


   🌙


  </div>


  <div class="snowflake">


  ☀️


  </div>


  <div class="snowflake">


  🌙


  </div>


  <div class="snowflake">


  ☀️


  </div>


  <div class="snowflake">


  🌙


  </div>


  <div class="snowflake">


  ☀️


  </div>


  <div class="snowflake">


   🌙


  </div>


  <div class="snowflake">

    ☀️


  </div>


  <div class="snowflake">


    🌙 


  </div>


  <div class="snowflake">


   ☀️


  </div>


  <div class="snowflake">


    🌙


  </div>


  <div class="snowflake">


    ☀️


  </div>


</div>


<style>


/* customizable snowflake styling */


.snowflake {


  color: white;


  font-size: 1em;


  font-family: Arial, sans-serif;


  text-shadow: 0 0 5px lightpink;


}





@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}


</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.