funky clown layout

Tags: clown, clowns, colorful, colors, rainbow, silly, layout, animation, autoplay

Description:

(layout requested by: https://spacehey.com/williamaftonssmoldick#profile) contains: gifs, cursor, floating profile, etc.‎ ‎‎‎‎if you use this PLEASE comment! credit is appreciated too‎

Preview:

click on the image for a larger preview

Code:

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

<style>
body {
  background-image: url('https://i.pinimg.com/564x/1b/97/2d/1b972dc82b1c07ce07732afa2c78a2ce.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(https://media.discordapp.net/attachments/990004155844296816/1132755245588553889/unnamed.gif);
  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/564x/ac/ab/8d/acab8ddd3511da5e12aee218b8b44d03.jpg);
   border: 5px solid red!important;
   padding:5px;
}
button {
  background-color: transparent!important;
  border: none;
  color: red;
  font-weight: bold;
}
.mood:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 50px;
  background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/dbd06e6e-b313-4acc-80d7-2f76026c8171/dfn74hl-7d525ed5-e0c4-4da9-bd03-2548a83ed542.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2RiZDA2ZTZlLWIzMTMtNGFjYy04MGQ3LTJmNzYwMjZjODE3MVwvZGZuNzRobC03ZDUyNWVkNS1lMGM0LTRkYTktYmQwMy0yNTQ4YTgzZWQ1NDIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.Cx0BY7TzffoJ5ejN2qiZxKQHxeySGDh00FAH4TuCAQ4);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 300px;
}
.mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 50px;
  background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c73684ee-635b-4f57-ba04-a4a2c67ca2a3/ddfp87r-c6705818-68ed-4c6e-ac81-7c66628de474.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2M3MzY4NGVlLTYzNWItNGY1Ny1iYTA0LWE0YTJjNjdjYTJhM1wvZGRmcDg3ci1jNjcwNTgxOC02OGVkLTRjNmUtYWM4MS03YzY2NjI4ZGU0NzQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-rKt_YipzSUkx5qzp3n8Yiw6HeMmJtDDFFluMD-CHFA);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 300px;
}
.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/originals/4f/d4/2c/4fd42ce7c20398412a70310fbc4fd81f.gif);
  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/564x/ac/ab/8d/acab8ddd3511da5e12aee218b8b44d03.jpg);
  border: 5px solid red!important;
}
 .blurbs {
  border: 5px solid black;
  background-color: black!important;
}
.url-info {
    background: url(https://i.pinimg.com/564x/7a/96/37/7a9637949cdc2a44df39f8eecdc8f222.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/originals/65/40/f9/6540f9370bfee06472c5a6f97e71ca3d.gif);
    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>
.general-about .profile-pic img:not(.icon) {
    -webkit-mask-image: url(https://assets.stickpng.com/images/58e8ff52eb97430e819064cf.png);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
</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>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.ytimg.com/vi/EZ6SibEX7P0/maxresdefault.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 4s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</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/bssJZBw6LgE//?&;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>* {cursor: url(https://cur.cursors-4u.net/people/peo-1/peo99.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2005/12/13/peo99.html" target="_blank" title="Clown"><img src="https://cur.cursors-4u.net/cursor.png" alt="Clown" style="position:absolute; top: 0px; right: 0px;"/></a>

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 20 of 46 comments ( View all | Add Comment )

✮ ⋆ ˚｡𝚂𝚝𝚞𝚙𝚒𝚍-𝚂𝚎𝚡𝚢-𝙲𝙻𝚘𝚠𝚗｡°✩	1715450522 𝒖𝒔𝒊𝒏𝒈ㅤ ᵕ̈ Report Comment
nigel ^.^	1713792188 using!!! ^_^ Report Comment
marjna	1710789910 usingg Report Comment
splatt !	1709908696 uses xD Report Comment
sluggy	1709301532 GAAAH DEFNETLY USING Report Comment
Charlottiee	1708774970 how do you flip the profile things Report Comment
Stanley?	1708033275 I'll be using this layout again! One of my favorite ones that you've made (yes it's williamaftonssmoldick once again!) Report Comment
Anonydick	1706235491 I LOVE IT SO MUCH HONK Report Comment
woefuldoll	1706216565 using!! Report Comment
W1LL	1706034609 using!! Report Comment
Rectangled	1705637912 usando :) Report Comment
Kiko!!	1704857834 using!! Report Comment
𝄡 ―✦. وℳ𝔦𝔫𝔫𝔤 .ᐟ	1703829235 using hjdghdj Report Comment
Nervo the Clown	1703165667 Gonna use this Report Comment
Jaden	1702532218 I think I'm going to use this! Report Comment
clownloverr05	1701850279 im gonna use this :0D Report Comment
Inco Wannabea	1701637723 USING :o] Report Comment
DuckFromJupiter137	1700238569 USING, THIS IS SO COOL!!!!! Report Comment
Luz	1699526389 using :] Report Comment
AGENT SMITH . .	1699282836 Using ! ! Report Comment