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

moon!!! :D	1762403361 using!!!! Report Comment
Arpachay	1762214307 Using!! Report Comment
M1m3	1762179859 using! Report Comment
Ducky	1762157872 Using it! Report Comment
myles ꉂ(˵˃ ᗜ ˂˵)	1762101283 using !! Report Comment
res.m	1762007267 using Report Comment
SandyXD	1761990581 Using!! Report Comment
Yatzi	1761667493 Using! Report Comment
Hele	1760966052 usingg Report Comment
rheymier	1760428245 usingg, ackk love it! Report Comment
ana	1760272650 using! tyy >< Report Comment
Rori	1760239300 Using! Report Comment
★𝐗𝐄𝐉𝐈‧₊˚ 🪼🫧	1760227043 Using! Report Comment
★ Sadie ★	1760162162 Using!! Report Comment
! ニコ ♰	1760151928 Using!!! Report Comment
BR1GHT✦	1759691382 usingg!! Report Comment
doombloxxed	1759282589 usinggg Report Comment
<A.Z.I.Z>	1759239826 usingggggggg Report Comment
<A.Z.I.Z>	1759239817 usingggggggg Report Comment
♡︎nekij♡︎	1759181450 Using Report Comment