Starry pixels

Tags: black, star, pixel, gif, animation, space, glow

Description:

Just a pixelated star layout with an overlay and sidebar!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by boêmio (hater #1 do minimalismo) (https://layouts.spacehey.com/layout?id=102499) -->

<style>
/* 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: "☆"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "☆"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "☆"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "☆"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "☆"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "☆"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "☆"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "☆"
}
</style>

<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(http://dl2.glitter-graphics.net/pub/711/711492quxsntt3op.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
} </style>








<style>:root {
        --logo-blue: light purple ;
        --darker-blue: light purple ;
        --lighter-blue: light purple ;
        --even-lighter-blue: light purple ;
        --lightest-blue: light purple ;
        --dark-orange: light purple ;
        --light-orange: light purple ;
        --even-lighter-orange: transparent ;



<style/> 


<style>nav {
  overflow-x: hidden;
  position: middle;

}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(http://dl2.glitter-graphics.net/pub/711/711492quxsntt3op.gif); }
</style>




<style> 

body { 
font-size: 12pt;
font-weight: bold;
font-style: normal;
text-decoration: none;
}



h1 {
  color: black;
  text-shadow: 1px 1px 2px black, 0 0 25px purple, 0 0 5px gold;
} 

h1, h2, h3, h4,p {color: lightblue;} 

:root { 

--black: white;
</style>

<style>
#comments{
    background-image: url(http://dl2.glitter-graphics.net/pub/711/711492quxsntt3op.gif);
    background-size: 100%;
    Height:300px;
    overflow:auto;
}
.comments-table{
    background-color:transparent rgba(30,35,40,.9);
}
#comments img{
    border-radius: none !important;
    border: none !important;
}
</style>



<style>
*, nav, nav .links a, .logout-btn .online {
font-family: ms ui gothic!important;
color: white;
}
</style>

<style>table table table td img { display:inline; }table td td{ width:0; } table { width:450px; } table table { width:auto; } table table td { padding:3px; } table table table td { padding:0; } table table table { width:220px!important; height:0; } td.text td a img { width:auto!important; } table table table table table, table table table table table td { width:0!important; padding:0!important; } td.text a img { width:100px!important; } td.text td.text a img { width:35px!important; } td td td div strong { width:170px!important; display:block; } embed,object { display:block;width:220px;height:38px; } table table td img, td.text td.text .orangetext15, td.text td.text table table div { display:none; }</style>





<style>
main{background: transparent} table, tr, td { background-color:transparent;}div table tr td {background-color: BD9D00 !important;}div table tr td a:link, div table tr td a:visited, div table tr td a:hover {color: DDCCEE !important; font-weight: bold !important;}table {background-color: transparent !important;}table table table td {background-color: A50000 !important;}table table table table td {color: FFFFFF !important;}.clearfix {background-color: 000000 !important;}.profileInfo {border: 000000 2px solid !important;}.interestsAndDetails, .userProfileDetail, .contactTable {background-color: 000000 !important; border: BD9D00 2px solid !important; width: 200px !important;}.extendedNetwork , .latestBlogEntry, .blurbs, .friendSpace,.friendsComments {background-color: 000000 !important; border: FF0000 2px solid !important;}span, .btext, .redtext15 {background-color: transparent !important;}a {font-weight: normal !important; color: FF9BD4 !important;}b, span, .btext, .orangetext15, .whitetext12  {color: white !important;}.text  {color: 000000 !important;}.blacktext8 {color: FF0000 !important;}a.text:link, a.text:visited {font-weight: bold; color:FF0000 !important;}div object {background-color: A50000 !important; border: FF0000 2px solid !important;}ul li div span div {background-color: FF0000 !important; border: FF0000 2px solid !important;}table.contactTable tr td.text {background-color: 000000 !important;}table.contactTable td.tdborder table td{background-color: 000000 !important;}table.contactTable td.tdborder{background-color: 000000 !important;}div ul li a.open:link,div ul li a.open:visited,div ul li a.open:hover{background-color: 1548ae !important;}div ul li small{color: FF0000 !important;}.bodyContent{background-color: transparent;}body {background:url(http://dl2.glitter-graphics.net/pub/711/711492quxsntt3op.gif);background-attachment:fixed;background-repeat:repeat;}table tr td div, div div a.text:link, div div a.text:visited, div div a.text:hover, div div a.text:active, div div p a:link, div div p a:visited, div div p a:hover, div div p a:active {color: FFFFFF !important;}








.profile .contact { background: url(http://dl2.glitter-graphics.net/pub/711/711492quxsntt3op.gif);
background-size: cover;
background-position: center;
}

 </style>

<style>body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('http://dl2.glitter-graphics.net/pub/711/711492quxsntt3op.gif');
	background-size: cover;
	background-repeat: no-repeat;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
<style/></style>

<style>
footer {
border-radius: 15px;
background-image: url(http://dl2.glitter-graphics.net/pub/711/711492quxsntt3op.gif);
}
</style>












<style>
/* profile-info */

.profile-info {
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100vw;
    border: 0;
    z-index: 20;
    -webkit-backdrop-filter: blur(20px);
}
.profile-info a {
    color: #FFF;
}


.profile-info { border:double 0px #Ffd1dc88;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: transparent url(http://dl9.glitter-graphics.net/pub/185/185499fkwlunybl0.gif) no-repeat center center;
background-size: contain;
    </style>

<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border: 1px solid black;
}
::-webkit-scrollbar-thumb {
    background: grey;
}
::-webkit-scrollbar-thumb:hover {
    background: black;  
}
</style>

<style>
a:hover, nav .links a:hover, nav .top a:hover, footer a:hover, button:hover, .friends a p:hover{
  color: white !important;
  font-style: italic;
  text-transform: uppercase;
}
</style>

<style>
/* header->sidebar */
@media(min-width:800px) {
nav {
float: right;
width: 190px;
}
main {
width: calc(100% - 190px);
position: relative;
}

/* fix header */
nav > .top {
flex-direction: column;
align-items: center;
}
nav form {
margin-top: 10px !important;
}
nav form * {
width: 140px;
}
nav .left {
display: flex !important;
transform: translateX(0px);
}

/* fix links */
nav .links {
display: flex;
flex-direction: column;
transform: translateX(1px);
margin: 0px 10;
position: relative;
border-radius: 0px 0 0 0px;
width: 189px;
}
nav .links li::after {
content: "" !important;
}
}



}

/* fix ONLINE indicator */
.online {
font-size: smaller;
}
</style>


<style>
    .container{
        width: 1100px;
    }
</style>



<style>
.online img {
display: none;
}
.online {
color: #fff;
}
</style>

<style>
    .profile{direction: rtl;}
.blog-preview{direction: ltr; text-align: right;}
    .blurbs{direction: ltr;}
    .friends{direction: ltr;}
    .general-info{direction: ltr;}
.profile .left h1{direction: ltr;}
    .details-table{direction: ltr;}
    .profile .table-section .heading{direction: ltr;}
    .details p{direction: ltr;}
	.mood{direction: ltr; text-align: right;}
.url-info{direction: ltr; text-align: right;}
</style>



<style>
a:not(.friends a):hover, nav .links a:hover {
background-color: transparent;
background-image: url(https://wdlus.carrd.co/assets/images/gallery02/fc330a37.gif?v=fa97d6b6);
background-size: cover;
text-decoration: none;
color: #b2c0ce;
text-shadow: 0px 0px 6px #b2c0ce;
transition: 0.5s;
}
</style>


<style>/* Friends Info */
    .profile .friends .heading{color: #ffffff;}
.profile .friends{text-align: center;}
    .count {color: #055ec2;}
    .profile .friends .person p{color: #ffffff !important;
}
	.profile .friends .person img {border-radius: 20px
;}

    .profile .friends .person img:not(.icon) {
        border-radius:2px;
        box-shadow: 1px 0px 7px 2px rgba(250, 250, 250, 0.71);
        border: 2px solid rgba(255, 255, 255, 1);
    }
    
.profile-pic {
   border-radius: 2px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 4px white 
}
</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 29 comments ( View all | Add Comment )

•°•✮ɴᴇʙᴜʟᴀ_✧⋆•°	1777733479 Using tysmmm Report Comment
Chlorine	1775825281 using thx!! Report Comment
༺ 𝒌⃨𝒖⃨𝒃⃨𝒂⃨ ༻	1773618493 using Report Comment
Alyssa	1773195195 TYSM! using! :)) Report Comment
emily :D	1772648650 been looking like something like this for a while!!! totally using :D Report Comment
𝗫𝗲𝗻𝗶𝘅𝘅 <𝟯	1771493288 Using!!! Report Comment
Benvolio	1764427011 using supercool!! Report Comment
Ali3nKorn3L	1763475111 Using! super cool Report Comment
kennybenny	1762563702 using!! <33 Report Comment
6arelyfamous	1762497871 using!! Report Comment
Aleeza	1758505719 using!! Report Comment
Benny	1758002329 Using Report Comment
fryefan3000	1757982369 usinggggg!! Report Comment
Kayuumii	1753332283 using Report Comment
Melanie	1752116673 using, thanks!! Report Comment
Lemonadee	1748653728 using! Report Comment
Sun.Shine	1745739404 Using <3 :D Report Comment
M0CHII	1745267913 using!! Report Comment
condracyla	1744587617 using Report Comment
☆Lucifur☆	1743054108 Using <3<3 Report Comment