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 Venom Boy (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 1244 comments ( View all | Add Comment )

Styluccccc	1785288365 using lelelelelelelele Report Comment
.	1785218169 using Report Comment
Bloody rose	1784926190 Using it's so amazing Report Comment
cr4k3r	1784702892 usingggg ilvi Report Comment
ALEXANDER THE GREAAT	1784639178 USING! AMAZING LAYOUT Report Comment
ssensfull	1784614747 using!! tysm this is peak Report Comment
Lemm	1784180485 using ! Report Comment
⊹ ׁ݂ ꒰꒰🦴 ˸ 𝒢ℴℴ𝓅𝓎 ⋅꒷	1783982362 Using!! Report Comment
DurumiRumiru	1783769197 using!! Report Comment
Blurry ˗ˏˋ ★ ˎˊ˗	1783572860 using! Report Comment
☆Till☆	1783475929 using! Report Comment
valerian	1783420787 I love this sm Report Comment
⋆˚࿔ venus𝜗𝜚˚⋆	1783405092 Using!! Report Comment
khatt ( ꩜ ᯅ ꩜;)⁭ ⁭	1783018160 usingg!! Report Comment
UZI DOORMAN♡🎧 \|◁ II ▷\| ↺	1783011520 Using!! Report Comment
Estarisks	1782717694 Using! so cool Report Comment
V1xxy ✧⁠◝⁠(⁠⁰⁠▿⁠⁰⁠)⁠◜⁠✧	1782420632 Using Report Comment
Co_izki	1781773119 Using! Report Comment
Koschei	1781205324 useing :D Report Comment
Emili	1781149942 usinh Report Comment