Red and Black Starry Layout

Tags:

Description:

Includes: Custom cursor, snowflake animation overlay, blinkie online status, rounded pfp and friends pfp, custom page link icons etc etc. made for @amaim but free for everyone to use just lmk in the comments :D

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/*BODY FONT*/
   body{font-family: 'Orbitron', sans-serif;
   color: white !important;
   font-size: 90%;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #FFFFFF, 0 0 5px white}

/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Press Start 2P', cursive;
   font-size: 120%;
   color: #FF0000 !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #FF0000, 0 0 5px #FFFFFF}

/*TEXT SETTINGS*/
main p{
   letter-spacing: 2px;
   font-weight: 700; 
   line-height: 1.5;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #FF0000, 0 0 5px #FFFFFF}

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

/*LINK COLOURS*/
.links, .links a, .logout-btn{
   color: #FF0000 !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #FF0000, 0 0 5px #FFFFFF !important}

a{color: #FF0000 !important}
   a:hover{color: white !important;
    text-decoration: underline}
   a:visited: color: white !important}

.top a{color: #FF0000 !important}
   .top a:hover{color: white !important
    text-decoration: underline}
   .top a:visited{color: white !important}

.links a{color: #FF0000 !important}
   .links a:hover{color: white !important
    text-decoration: underline}
   .links a:visited{color: white !important}

footer .links a{color: #FF0000 !important}
   footer .links a{color: white !important
    text-decoration: underline}
   footer .links a{color: white !important}

/*BORDERS*/
.contact, .table-section{
   border-width: 2px; 
   border-radius: 4px;
   border-color: red !important}

.blurbs, .friends{ 
   border: solid #FF0000 2px;
   border-radius: 4px;
   margin-bottom: 20px}

.comments-table{ 
   border: solid #FF0000 2px;
   border-radius: 4px}

footer .links{
   background: none !important;
   box-shadow: none !important}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.imgur.com/ejCcMWR.gif);  
   background-size: 80%}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.imgur.com/OoVOlzr.jpg);
   background-size: 100%;
   margin-bottom: 20px;
   box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) 
   #d10000}

/*HEADER*/
.top{
   background:  !important;
   background-image: url(https://i.imgur.com/xDq6sRZ.gif) !important;
   background-size: cover !important;
   margin-bottom: 20px;
   box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) 
   #d10000}

/*FOOTER*/
footer {
   height: 150px;
   background-image: url(https://i.imgur.com/xDq6sRZ.gif);
   background-position: centre !important;
   background-size: cover;
   box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) 
  #d10000}

/*NAV BAR*/
.links{ 
   text-align: center;
   background:  !important;
   background: linear-gradient( #FF0000, black) !important;
   margin-bottom: 20px !important;
   box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) 
  #d10000}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
    content: " ⭒ ";
    color:  #FF0000}

/*LOGO*/
.logo {
   filter: invert(51%) sepia(64%) saturate(6172%) hue-rotate(355deg) brightness(95%) 
   contrast(130%) !important;
   !important;
   box-shadow: 0px 0px 7px 5px white}

/*HEADINGS BACKGROUND*/
.profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading, .profile .contact .heading, links{
   background: linear-gradient(#FF0000, black);
   border: 2px solid white;
   border-radius: 2px}

/*CIRCULAR PFP*/
.profile-pic {
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 7px red}

/*CIRCULAR FRIENDS PFP*/
.friends-grid img{
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 7px red}

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

/*FRIENDS-GRID*/
   --light-orange: url(https://i.imgur.com/Gzi0pBV.gif);
   --even-lighter-orange: linear-gradient( #FF0000, black)}

/*URL SECTION*/
.profile .url-info{
   background-image:url(https://i.imgur.com/TqVNLYg.gif);
   background size: cover !important;
   border: solid red 2px;
   border-radius: 4px}

/*ONLINE*/
.online{content: url(https://i.imgur.com/xYkUhZ7.gif);
   box-shadow: 0px 0px 7px 5px  #FF0000}

/*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.imgur.com/4iW2Zmr.png)}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* ADD TO FAVOURITE */
content: url(https://i.imgur.com/4iW2Zmr.png)}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/*SEND A MESSAGE */
content: url(https://i.imgur.com/4iW2Zmr.png)}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/*FORWARD TO FRIEND*/
content: url(https://i.imgur.com/4iW2Zmr.png)}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/*INSTANT MESSAGE*/
content: url(https://i.imgur.com/4iW2Zmr.png)}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/*BLOCK USER*/
content: url(https://i.imgur.com/4iW2Zmr.png)}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/*ADD 2 GROUP*/
content: url(https://i.imgur.com/4iW2Zmr.png)}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/*REPORT*/
content: url(https://i.imgur.com/4iW2Zmr.png)}

/*PROFILE LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.imgur.com/4iW2Zmr.png);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}

/*BUTTONS*/
button{
   color: red;
   background: url(https://i.imgur.com/ejCcMWR.gif); 
   border: 2px solid red;
   padding: 2px}
   button:hover {
   color: white;
   background: url(https://i.imgur.com/ejCcMWR.gif);
   padding: 4px}

/*TOP SEARCH BAR*/
  .search-wrapper input[type=text] {
    background-color:  #FF0000 !important;
    border: 1px solid white !important;
    border-radius: 10px !important}
 button{
    border-radius: 10px !important;
    border: 1px solid white !important;
    background-color:  #FF0000 !important}

/*STARS ANIMATION OVERLAY*/
</style>
<div class="snowflakes">
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/C6yyxTz/sparkle.gif"/></div>
</div>

<style>
    @-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.

Comments

Displaying 20 of 63 comments ( View all | Add Comment )

SNOT	1747591962 im useing a few parts of it w/ credit :] Report Comment
ray	1745288013 using Report Comment
ray	1745287976 using Report Comment
Cal	1744190946 Using! Report Comment
Leepy_ALCZ	1743880799 Using! Report Comment
ASMO !	1740822427 usinf 💧💧 Report Comment
kandii	1740809888 usingg Report Comment
pumpkinbunnyx	1740523808 ionly use the pfp thingie! :D Report Comment
TailsFails1	1738189742 Using :3 Report Comment
mem_(^▽^)	1737883342 using Report Comment
Soulters	1736784244 using Report Comment
maylyn.ᐟ	1736379645 Using!!^^ Report Comment
ᏒᏬᏰᎩ	1734864077 using!!!! Report Comment
☆°•Lunar•°☆	1734568672 Using!! :3 Report Comment
:3	1733172243 using!! Report Comment
SubSpace >＝★	1732609890 Using this!! Report Comment
autumn/alex ☆	1732561014 using !! Report Comment
Ballerina Anecdote	1728471539 using!! Report Comment
Ronin	1727732622 Using!? Report Comment
Mademoiselle	1726944380 using x33 Report Comment