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 58 comments ( View all | Add 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 XD :p	1734568672 Using!! :3 Report Comment
:3	1733172243 using!! Report Comment
Tophat	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
SCOOB	1724820585 using Report Comment
nathann	1724164991 Using xx Report Comment
z0mbi3_kitzu	1722293540 using :3! Report Comment
-ˏˋ★ Ｏｌｉ★ ˎˊ˗	1721950651 using!! Report Comment
frankie! ⚞•⚟	1719955467 using :D Report Comment