Dreamcore/Weirdcore Sky Layout

Tags: weirdcore, dreamcore, liminal, sky, blue, weird, animation, gif, autoplay, pink

Description:

Includes: Cloud Cursor, Autoplayed Song, Loading screen, Floating liminal image, Transparent links and nav bar, Blinkie Online status, eyeball icons, falling confetti overlay etc!! Free for anyone to use just lmk in the comments :3

Preview:

click on the image for a larger preview

Code:

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

<style>

main{ background: none }

/*CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-view/150084.png), auto !important}

/*GRADIENT HEADINGS+BORDERS*/
.profile .table-section, .profile .url-info, .profile .contact {
    border: 2px solid white;
border-radius: 5px;
box-shadow: 0px 0px 7px 5px #89CFF0;
}
.profile .table-section .heading, .profile .contact .heading {
   color: white;
   text-shadow: -1px 1px 1px #89CFF0;
   background: linear-gradient(#FF1d8e, #89CFF0);
   border-bottom: 2px solid white;
   border-radius: 5px;
}
.profile .blurbs .heading, .profile .friends .heading{
   color: white;
   text-shadow: -1px 1px 1px white;
   background: linear-gradient(#FF1d8e, #89CFF0);
   border: 2px solid white;
   border-radius: 5px;}

/*HEADINGS FONT*/
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
   h1, h2, h3, h4{font-family: 'Press Start 2P', cursive;
   color: #FF1d8e;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #89CFF0, 0 0 5px #FFFFFF}

/*BODY FONT*/
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
   .table-section td, body{font-family: 'Cedarville Cursive', cursive;
   color:  #FF1d8e;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #FFFFFF, 0 0 5px white;}

/*BODY TEXT SETTINGS*/
main p{
    letter-spacing: 2px;
    font-weight: 700; 
    line-height: 1.5;}

/*FONT COLOURS*/
p{color:  #FF1d8e}
.count {color:  #FF1d8e}
.profile .blurbs .section h4{color:  #FF1d8e}
.contact a{color: white}
.mood a, .mood p, .mood{color: #FF1d8e}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://media.tenor.com/JecexnXgIegAAAAC/kidcore.gif); 
   background-size: cover}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.ibb.co/wwdXb1k/27OjupD.jpg);
   background-size: cover;
   border-radius: 12px;
   box-shadow: 0px 0px 13px 9px #FF1d8e;
   color: red}

/*FOOTER*/
footer {
   border-radius: 15px;
   background-image: url(https://i.ibb.co/wwdXb1k/27OjupD.jpg);
   background-position: centre !important;
   background-size: cover;
   box-shadow: 0px 0px 9px 7px #FF1d8e}

/*CIRCULAR PFP*/
.profile-pic {
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 7px 5px #89CFF0}

/*TOP BAR*/
.top{
   background:  !important;
   background-image: url(https://i.ibb.co/bbZ9QHN/f5zqMC6.gif) !important;
   background-size: cover !important;
   border-radius: 15px;
   box-shadow: 0px 0px 9px 7px #FF1d8e}

/*LOGO*/
.logo{ 
   filter: sepia(100%) hue-rotate(45deg) saturate(10);
   box-shadow: 0px 0px 7px 5px white;}

/*TRANSPARENT NAV BAR*/
.links{opacity: 0.01}

/*FRIENDS NAMES COLOUR*/
.friends-grid a{color: #89CFF0}

/*FRIENDS BACKGROUND*/
.friends{
   background-image: url(https://64.media.tumblr.com/722a8dc04a07b25bc4a5fd93befa7a0a/a7a2bcd0566ba699-f2/s640x960/b67f06d33154bf3cd7a3167405062b7112e6d081.gif);
   background-size: cover;
   border-style:Double; 
   border-width:6px; 
   border-radius: 5px;
   border-color: white
   box-shadow: 0px 0px 7px 5px #FF1d8e}

/*CONTACT SECTION*/
.contact {
        font-size: 12px;
        font-family: times;
        border: dashed white 3px!important;
        background-image: url("https://i.ibb.co/qM3RCqW/BD0KTkr.jpg")!important;
        background-size: cover;
        border-radius: 5px;
        border-top: 1px;
        box-shadow: 0px 0px 7px 5px #89CFF0;}

/*URL SECTION*/
.profile .url-info{
   background-image:url(https://i.ibb.co/jyk497V/n58AQcT.gif);
   background size: cover !important}

/*TRANSPARENT INTERESTS GRID*/
:root{
   --even-lighter-blue: pink, opacity:0.01;
   --lightest-blue: pink, opacity:0.01;

/*FRIENDS-GRID*/
   --light-orange: linear-gradient(#89CFF0, white);
   --even-lighter-orange: linear-gradient(#89CFF0, white)}

.friends-grid img{ 
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 7px 5px #FF1d8e}


/*TOP SEARCH BAR*/
  .search-wrapper input[type=text] {
    background-color: #FF1d8e !important;
    border: 1px dotted white var(--headers) !important;
    border-radius: 10px !important}
 button{
    border-radius: 10px !important;
    border: 1px dotted var(--headers) !important;
    background-color: #FF1d8e !important;
    color:var(--headers) !important}

/*DOUBLE BORDERS*/
.profile .contact, .profile .table-section,
   DIV.blog-preview{ 
   border-style: Double;
   border-radius: 5px; 
   border-width:6px; 
   border-color: white; 
   text-shadow: 0 0 9px white;}

/*LOADING SCREEN!*/
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url("https://64.media.tumblr.com/2e9565222d158f0aa407298b3e8a8ecc/20be16e273d19fea-87/s500x750/6a841954ecdc6fc349201762dfab00f9bb40ec0f.gif");
	background-size: 100%;
	background-repeat: repeat;
    background-position:center;
    background-color: black;
	animation: yourAnimation 2.5s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }  

/*ONLINE*/
.online{content: url(https://i.ibb.co/V06s5Jj/Bli642a.gif);
box-shadow: 0px 0px 7px 5px #FF1d8e}

/*IMAGE ABOVE BLURBS*/
.profile-info {
   font-size: 0px;
   border: 4px dashed white;
   border-radius: 5px;
   background: url(https://i.ibb.co/K5szCpb/JFUm6j8.jpg);
   width: cover!important;
   position: centre;
   height: 130px;
   box-shadow: 0px 0px 7px 5px #89CFF0}


/*LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.ibb.co/sjfjjdM/2t5QFSI.gif);
        box-shadow: 0px 0px 7px 5px #a82e3c
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}

/*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: url("https://i.ibb.co/sjfjjdM/2t5QFSI.gif")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://i.ibb.co/sjfjjdM/2t5QFSI.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://i.ibb.co/sjfjjdM/2t5QFSI.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://i.ibb.co/sjfjjdM/2t5QFSI.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://i.ibb.co/sjfjjdM/2t5QFSI.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://i.ibb.co/sjfjjdM/2t5QFSI.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://i.ibb.co/sjfjjdM/2t5QFSI.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://i.ibb.co/sjfjjdM/2t5QFSI.gif")}

/*LINK COLOURS*/
a{
   color: white !important;}
a:hover{
    color: #FF1d8e !important;}
a:visited{
    color: white !important;}
    
.top a{
    color: #89CFF0 !important;}
.top a:hover{
    color: #FF1d8e !important;}
.top a:visited{
    color: #89CFF0 !important;}
    
.links a{
    color: #89CFF0 !important;}
.links a:hover{
    color: #FF1d8e !important;}
.links a:visited{
    color:#89CFF0 !important;}
   
.friends-grid p{
    color: #89CFF0 !important;}

footer .links a{
    color: #89CFF0 !important;}
footer .links a:hover{
    color: #FF1d8e !important;}
footer .links a:visited{
    color: #89CFF0 !important;}

/*CONFETTI ANIMATION OVERLAY*/
html:before {
  animation: grain 30s steps(10) infinite;
  background-image: url(https://cdn.shopify.com/s/files/1/0107/4751/0884/products/Confetti3_250x250@2x.gif?v=1574208137);
  content: "";
  height: 300%;
  left: -50%;
  opacity: .70;
  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%) }

/*TRANSPARENT FOOTER LINKS*/
footer .links {
   background: rgba(0, 0, 0, 0);
   border: 0px;}
.inner {color: #fffFFF;}

/*BUTTONS*/
button {
   color: #fff;
   background: #000 url(https://i.ibb.co/rkd5ttp/pUpBNdZ.jpg); 
   border: 2px solid #FFFFFF;}
button:hover {
   color: #FFFFFF;
   background: #FF1d8e}

/*FLOATING IMG*/
</style>

<div style="float: ; max-height: 800px; position: fixed; left: 1px; bottom: 10px; z-index: 200;"><img src="https://i.ibb.co/wr62ZzB/w763KDv.gif"/>

<style>

/*SONG AUTOPLAY - to change the song, copy in the link AFTER THE = SIGN of any youtube video into the spot after the /embed/and before the slashes*/

</style>

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

</iframe>
</div>

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 428 comments ( View all | Add Comment )

Tamish	1757894027 USING OMG ITS BLESSING MY EYES Report Comment
TwigIsSoCool	1757612504 using !! Report Comment
𐔌 . akii ᐟ｡୧ ꒱	1757411517 usinggg!!! Report Comment
convivial2000	1757348966 me use Report Comment
Cici	1757323473 It looks really cool. using Report Comment
𖤓 ִ ׁ 𓈒 s♃ 🔭	1757258561 Using Report Comment
Zombi3	1756526644 This is awesome sauce I’m gonna use it Report Comment
⋆˚🐾˖° FG °˖🐾˚⋆	1755962109 Using ! Report Comment
Pillow/Jace	1755928874 Wait OH MY GOSHHH USINGGG THIS IS SO CUTES CUTES Report Comment
mio	1755901182 USING!!! Report Comment
⋆˚✿˖°Inaaya<3⋆˚✿˖°	1755813139 USINNNGGGG Report Comment
Gummybearperson	1755718303 WAOW, this cool. Using. Report Comment
niko!!!!????!!??	1755655788 using probb Report Comment
CB	1755539007 using i think Report Comment
antenN4	1755471786 im using itt Report Comment
Biitsly	1755399677 Using! (if I didn't use it that means I changed) Report Comment
pojson.Willow	1755369987 using Report Comment
Guynamedx	1755216977 using Report Comment
Munzy🌸	1754992650 using!!! Report Comment
Claire	1754931621 using! Report Comment