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

???	1731979101 using! Report Comment
Kai	1731942730 Using! Report Comment
OETAM MATEO	1731938655 LUVV!! Report Comment
☻ ☆RU5T★ ☺	1731724689 Using as well XP Report Comment
yrnz	1731607816 Uwingg Report Comment
yrnz	1731607815 Uwingg Report Comment
st ☆rboy!!	1731601542 using! Report Comment
shortcake	1731502148 using ! Report Comment
zee	1731381569 using loading screen!! Report Comment
Strwbug ༻༺ 🇧🇷	1731011253 USINGG!! Report Comment
Tiroro	1730589544 USING! :3 Report Comment
☆Sup3r_St4r!!☆	1730406516 USING XD Report Comment
Star/Starry!! :3	1730280543 Using!! Also, does anyone know how to get the code for only the confetti overlay? I tried just copying that part but it didn’t work. I know nothing about coding :( Report Comment I want the confetti too but idk how to do it either :( by 4leafperson; 1730525368; Report
p1nk_luna ^_^	1729962844 using!!! Report Comment
harpy :D	1729794851 using :W Report Comment
Candy_salad666	1729463976 Using XD Report Comment
Ruben	1729359140 using.......! Report Comment
Rui	1729300981 Using Report Comment
ruebei	1729090342 using Report Comment
♯┆᥎3ᥒᥙs .ᐟ ★	1728938764 Using! Report Comment