Blue Star Layout

Tags: star, stars, starry, blue, sparkle, glitter, animation, autoplay, gif

Description:

Includes: falling star animation, blinkie online status, star link icons, custom font and gifs etc - good for a base :3. Anyone can use just let me know in the comments!

Preview:

click on the image for a larger preview

Code:

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

<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');

main{background: none}

/*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: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #1a85ff, 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 #1a85ff, 0 0 5px #FFFFFF}

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

a{color: white !important}
   a:hover{color: #1a85ff !important;
    text-decoration: underline}
   a:visited: color: #0045f5 !important}

.top a{color: white !important}
   .top a:hover{color: #1a85ff !important
    text-decoration: underline}
   .top a:visited{color: #0045f5 !important}

.links a{color: white !important}
   .links a:hover{color: #1a85ff !important
    text-decoration: underline}
   .links a:visited{color: #0045f5 !important}

footer .links a{color: white !important}
   footer .links a{color: #1a85ff !important
    text-decoration: underline}
   footer .links a{color: #0045f5 !important}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.ibb.co/4TymjV7/Xkv05Oj.gif);  
   background-size: cover}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.ibb.co/w6y1Tqf/1q8AWXa.gif);
   background-size: cover;
   margin-bottom: 20px;
   box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) 
   #043cc8}

/*HEADER*/
.top{
   background:  !important;
   background-image: url(https://i.ibb.co/Sdntjbt/xqOduyW.gif) !important;
   background-size: cover !important;
   margin-bottom: 20px;
   box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) 
   #043cc8}

/*FOOTER*/
footer {
   height: 150px;
   background-image: url(https://i.ibb.co/pQ5b1F9/FmCbdz9.gif);
   background-position: centre !important;
   background-size: cover;
   box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) 
   #043cc8}

/*NAV BAR*/
.links{ 
   text-align: center;
   background:  !important;
   background-image: url(https://i.ibb.co/qWwW0JS/cTM3jbF.gif) !important;
   background-size: cover !important;
   margin-bottom: 20px;
   box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) 
   #043cc8}

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

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

/*LOGO*/
.logo {
   filter: invert(38%) sepia(43%) saturate(3307%) hue-rotate(198deg) brightness(101%) 
   contrast(101%);
   !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(#0045f5, #1a85ff);
   border: 2px solid blue;
   border-radius: 2px}

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

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

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

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

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

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

/*FRIENDS-GRID*/
   --light-orange: url(https://i.ibb.co/JFbvDSK/IzFsb7l.gif);
   --even-lighter-orange: linear-gradient(#1a85ff, #043cc8)}

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

/*ONLINE*/
.online{content: url(https://i.ibb.co/vZxVg2W/vmFMb9I.gif);
   box-shadow: 0px 0px 7px 5px #1a85ff}

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

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

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

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

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

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

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

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

/*PROFILE LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.ibb.co/mCc78DF/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: white;
   background: url(https://i.ibb.co/Sdntjbt/xqOduyW.gif); 
   border: 2px solid white;
   padding: 2px}
   button:hover {
   color: yellow;
   background: url(https://i.ibb.co/Sdntjbt/xqOduyW.gif);
   padding: 4px}

/*TOP SEARCH BAR*/
  .search-wrapper input[type=text] {
    background-color: #1a85ff !important;
    border: 1px solid white !important;
    border-radius: 10px !important}
 button{
    border-radius: 10px !important;
    border: 1px solid white !important;
    background-color: #1a85ff !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 826 comments ( View all | Add Comment )

gluewall	1738526391 using! :D Report Comment
lola	1738518629 using, tyyy!!:D Report Comment
lola	1738518627 using, tyyy!!:D Report Comment
coraaqo	1738518589 using!! Report Comment
ZBAYFOOG	1738494477 using so cool Report Comment
pluto	1738489672 so cool Report Comment
✨Nik_pnt_✨🎧🎼🎹🏴‍️	1738454843 Using Report Comment
KOTA !	1738434493 using !! Report Comment
Husky	1738364878 using :3 Report Comment
beriru x3'!	1738342311 using:3 thanks Report Comment
LauLau!	1738335959 very cool Report Comment
SHEMIZEN	1738313874 nice Report Comment
otaiiu	1738279392 Just using the falling star animation! ★*☆ Report Comment
ThisisJuliette	1738268454 Usinggg Report Comment
andyyy	1738121867 using!! :3 Report Comment
REAL SZEMTELEN MANO	1738087849 USING1!!!11! Report Comment
Bimbo💐	1738069833 using Report Comment
§Dr3Am§	1738061995 using Report Comment
TwixLuigi	1738027290 Using! Report Comment
valentine ✩	1738023071 using ! ^_^ Report Comment