Black star layout (revamped)

Tags: layout, black, pattern, stars

Description:

My prior code was one hell of a mess sorry about that! Hope this one is much to everyone's liking

Preview:

click on the image for a larger preview

Code:

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

<style>

#comments.friends .inner {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 300px; 
}

.friends-grid {
    background: #ffffff52;
    text-align: center;
}
.profile .friends .person img:not(.icon) {
    max-width: 100px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    -webkit-mask-image: url( https://i.postimg.cc/4N5mdGFw/842-sin-t-tulo-20240413155316.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
}
.general-about img {-webkit-mask-image: url( https://i.postimg.cc/Hk6D7BxQ/868-sin-t-tulo-20240429140043.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

.profile .blurbs .heading, .profile .friends .heading {
    background: transparent;
    color: #ffffff;
    font-size: larger;
    padding: 2px 7px;
    text-shadow: 1px 1px 11px #ffffff;
}
.friends .inner > p {
    display: none;
}

.profile .friends .person p {
    color: #ffffff;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

.profile .blurbs .heading {
    display: none;
}
.profile .blurbs .section h4 {
    margin: 5px;
    color: #e7e7e7;
    text-shadow: 2px 0px 0px #838383;
}
@media (min-width: 30em) {
    .col.right {
background: #363a4494;
}
}
.blog-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    background: #363a4494;
    margin-top: 60px;
    border: outset #363a4494;
    font-family: inherit;
    text-decoration-line: grammar-error;
}
::-webkit-scrollbar-track {
   background: black;
}
::-webkit-scrollbar-thumb {
   background: white;
}
::-webkit-scrollbar {
   width: 5px;
   height: 10px;
}
.table-section .inner {
    background: #00000094;
    border: inset #000000;
    overflow-y: scroll;
    height: 310px;
}

.details-table td {
    background: #00000054;
    vertical-align: top;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: sans-serif;
}
.details-table td:first-child {
    background: #000000;
    color: #ffffff;
    font-weight: bold;
    width: 100%;
    vertical-align: middle;
    text-align: center;
    text-shadow: 0px 0 20px #ffffff;
    border-radius: 0px 0px 60px 60px;
    border: double #ffffff85;
}
    .table-section + .table-section {
        display: none;
    }
.profile .url-info {
    display: none;
}
.contact .inner {
    background: #2f3136b5;
    padding: 4px;
    margin: 6px 0px;
    border: inset #2a2a2a7d;
    box-shadow: inset 0 0 8px #00000091;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: transparent;
    margin: 15px 0;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: black;
    border-radius: 20px;
    color: white;
    padding: 7px 15px;
    border: inset #bdbdbd57 2px;
    box-shadow: 0 0 5px white;
}
.general-about {
    background: #ffffffcf;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 25px;
    border: double #000000a6;
    text-shadow: -1px 1px 0px #4d4a956e;
}
.general-about .profile-pic {
    display: contents;
    float: left;
    margin: 0 15px 8px 0;
    height: 160px;
}

@media (min-width: 30em) {
    .col.w-40 {
        width: 46%;
        background: #ffffff78;
        color: black;
        box-shadow: -6px 0px 20px 20px #13131aa8;
        z-index: 1;
        position: relative;
    }
}
.mood > p > b > a {
    color: #000000;
    text-shadow: 1px 1px 0px #ffffff;
    transition: .3s;
}
.profile .mood {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: inset 0 0 5px 0px black;
    border: ridge #ffffff2b;
    padding: 6px;
    background: #ffffff57;
}


main {
    background: none;
    color: black;
    padding: 6px 0px;
    font-size: 80%;
}

.container {
    width: 900px;
    max-width: 100%;
    margin: 1;
}

.profile .blurbs {
    margin: 35px 0;
    OVERFLOW-Y: scroll;
    background: #0e10149c;
    box-shadow: inset 0 0 20px 0px #0000006e;
    border: inset #141618;
    height: 223px;
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    text-shadow: 0px 0 6px #ffffff;
}
nav .top div {
    display: inline-block;
    vertical-align: top;
    text-shadow: 0px 0px 3px white;
}
button, input {
    overflow: visible;
    background: #ffffff75;
    margin: 2px;
}
.profile .blurbs .section {
    margin-bottom: 14px;
    text-align: center;
}
.comments-table td, .music-table td {
    background: #0000002e;
    vertical-align: top;
    color: white;
}
.comments-table td:first-child, .music-table td:first-child {
    background: #ffffff33;
    text-align: center;
    font-weight: bold;
    width: 30%;
}
.count .friends {
    display: none;
}
a{
 color: white;
 font-weight:bold;
 text-shadow: 0 0 7px #c0c0cb;
}
a:hover{
 letter-spacing: 2px; 
 transition: .5s;
 color: white;
}
nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 5px #ffffff;
    font-size: unset;
    padding-left: 17px;
}


nav .top .right button, [type="button"], [type="reset"], [type="submit"]{
border:none;
}
.logout-btn, .logout-form{
border:none;
}
.logout-btn, .logout-form:hover{
border:none;
}

.icon, .award img{
visibility:hidden;
}
main .left, main .right {
padding:18px;
}
nav .links .icon{
margin-right:-30px;
}
nav .links .icon img{
visibility: hidden;
}
nav .links img.icon {
visibility: hidden;
}
nav .links li:nth-child(odd)::before{
/*change the links with tiny gifs links! they look great if you do, I recommend 'lostsozai.tumblr.com'*/
content:url('https://64.media.tumblr.com/e739c7a6504c0a0f85b7273913d9cbb7/tumblr_pdve94j74V1xy0eh3o4_75sq.gifv');
margin-right:20px;
}
nav .links li:nth-child(even)::before{
content:url('https://64.media.tumblr.com/e739c7a6504c0a0f85b7273913d9cbb7/tumblr_pdve94j74V1xy0eh3o4_75sq.gifv');
margin-right:20px;
}
nav .links {
border-top: 1px white;
position:absolute;
margin-left: 15px;
padding-top:20px;
padding-bottom:20px;
border-bottom: 1px white;
font-size:15px;
margin-top:140px;
width:180px;
    background: transparent;
}
nav .center{
position:absolute;
top:0px;
width:200px;
padding:10px;
margin-top:80px;
    background: transparent;
}
nav .top .left{
top:0px;
width:200px;
padding:10px;
position:absolute;
background:;
}
nav .top .left .logo{
content:url('');
}
nav .top .right {
text-align:center;
}
nav .right{
position:absolute;
margin-top:50px;
text-align:center;
float:none;
width:200px;
background:;
}
nav .top{
    background: transparent;
width:100%;
}
nav{
height:100%;
position:fixed;
left:0px;
width:210px;
    background: #000000c7;
    box-shadow: 0 0 20px white;
}

}


nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 7px #ffffff;
    font-size: 0.98em;
    font-size: max(0.98em, 13px);
}
nav .links a:hover {
 letter-spacing: 2px; 
 transition: .5s;
 color: white;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: #ffffff00;
}

body {
    background: url(https://i.pinimg.com/736x/c1/13/1d/c1131da47bca5d506be283f4c2206ad3.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
}

.profile-info {
 display: none;
}

footer {
    text-align: center;
    font-size: 70%;
    margin: 5px;
    background-color: transparent;
    color: #ffffff78;
}


<style>
::-webkit-scrollbar {
   width: 0px;
   height: 10px;
</style>

<style>



h1{

  animation: type 3s steps(27);

  color: white;

  font-size: 10px;

  font-family: courier;

  white-space: nowrap;

  overflow: hidden;

  }



@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}



@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}



</style>

<style>

@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }

}

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

˙⋆✮AbbiRawr✮⋆˙	1748746019 using <3 Report Comment OH TY!!! 💜💜💜 by AxelSector; 1748792261; Report
mokfish୨୧	1745706589 using! Report Comment
mike	1742428658 using! :D Report Comment
𝒆𝒍𝒛 🎸💋	1742089689 usinggg Report Comment
★🄳🅁🄴🄰🄼★	1741732808 Usando Report Comment
Koraki	1741371643 using! but wheres he links tab :( Report Comment
DaphDaphlare	1740317398 using! Report Comment
meomef000 /русс	1740070980 Using Report Comment
⊹ vixnstarz ⊹	1739068593 Using!! :3 Report Comment
teegs	1738501154 usingg ;p Report Comment
Alyssa ✩	1738494243 usinggg :> Report Comment
⊹₊ ˚ʍӼɢɢֆɨ⋆꩜.ᐟᯓ★	1737651228 usingg!! I edited it a tad tho!! :P Report Comment AHH THANK U FOR USING!! NO WORRIES LIKE THE NEW STUFF U ADDED TO IT :D by AxelSector; 1737919292; Report
thisislaynz	1737544454 using :D Report Comment TYTYTY!! :DDD by AxelSector; 1737919341; Report
bell pepper	1734717228 using!! im gonna modify it too if thats cool (￣ε￣＠) Report Comment OFC!! I HOPE IT WONT TROUBLE YOU FIXING THE MESSY CODE HONESTLY! BEST OF LUCK! by AxelSector; 1734730732; Report
Vinvinnie(y)	1734055104 usingg!! its super cutee! :o Report Comment
Ли4инка	1732710164 Using Report Comment
Karn TwentyfiveDollars	1732197376 Using! Report Comment
ദ്ദി ˉ͈̀꒳ˉ͈́ )✧	1730148659 USING! I HAVE TAKEN SO LONG ON SEARCHING A LAYOUT AND NOW I FINALLY FOUND ONE. THANK YOU SO MUCH1!!1! Report Comment
unknown	1726217895 using Report Comment
୨ৎ𝖗𝖊𝖔𝖓 ꨄ	1723219468 using!! Report Comment AH IM GLAD THOUGH! IF YOU KNOW A BASIC HTML CODING I SUGGEST YOU ADJUST IT TO YOUR LIKING! TAKE CARE!! by AxelSector; 1723223680; Report