Glitchy Layout

Tags: dark; glitch; black

Description:

Hello! This is my first layout I created, this was meant to be personalized since I couldn't find anything that fits me nor do I understand what's going on in every lines of code- so I made one from scratch LMFAO You can use this, just don't repost it and claim it as yours-- I mean who would, it sucks af LMFAO. TIP: If you want to use your name on the "Hello! My name is Ray!" you can scroll down to the /*LAYOUT DETAILS*/ and find "Hello! my name is Ray" and change [Ray] with your name

Preview:

click on the image for a larger preview

Code:

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

<style>

/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com , https://custom-cursor.com , https://www.cursors-4u.com
============⚠️==========*/

/*=== cursors ===*/
a:hover{
    cursor: url(https://cur.cursors-4u.net/others/oth-8/oth701.ani), url(https://cur.cursors-4u.net/others/oth-8/oth701.png), auto !important;
}
* {
    cursor: url(https://cur.cursors-4u.net/others/oth-8/oth701.ani), url(https://cur.cursors-4u.net/others/oth-8/oth701.png), auto !important;
}

</style>

<style>
  @import url('https://fonts.googleapis.com/css2?family=New+Rocker&display=swap');
  
.profile h1{

font-family: 'New Rocker', cursive !important;
font-size: 40px;

}
body{
    
font-family: 'New Rocker', cursive !important;
font-size: 15px;

}
</style>



<style>
     :root{
     --headers: white;
     --text: white;
     --names: white;
     --links: #992525;
     --borders: 4px inset #221F1F !important;
     --background_image: url(https://i.pinimg.com/originals/bc/ac/5e/bcac5e03389140f326ed25e7f2c545f1.gif);
     --curve: 0px;
}

/* LAYOUT DETAILS */
.blog-preview h4{ font-size:0; }
.blog-preview h4 a{font-size:.8rem;margin-left:10px; }
.blog-preview h4:before{ content: "Blog Entries:"; font-size:20px; }
.contact .heading{ font-size:0px; } /*To remove User's contacts*/
.contact .heading:before{ content:'Contact me!'; font-size: 20px; font-weight:bold; text-align:center;}
.blurbs .inner .section:nth-child(1) h4{ font-size:0; } /*to remove About me*/
.blurbs .inner .section:nth-child(1) h4:before{ content: "Hello, my name is Ray!"; font-size:15px; }
.blurbs .inner .section:nth-child(2) h4{ font-size:0; } /*to remove Who I'd like to meet*/
.blurbs .inner .section:nth-child(2) h4:before{ content: "I'd like to meet"; font-size:15px; }
.friends .heading{ font-size:0; } /*removes your friends space line*/
.friends .heading:before{ content: "My Friends' Space Line!"; font-size:20px; font-weight:bold; }
.friends#comments .heading{ font-size:0; } /*removes the comment headline*/
.friends#comments .heading:before{ content: "COMMENT SECTION"; font-size:20px; font-weight:bold; }

/*scroll box comment*/
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

}
         ::-webkit-scrollbar {
width: 5px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background: rgba(67, 67, 67);
}

::-webkit-scrollbar-track {
background: rgba(67, 67, 67, 0.2);
}




/*Banner On top of Profile*/
main:before {
width: 100%;
height: 500px;
display: block;
content: "";
background-image: url('https://i.pinimg.com/originals/53/79/9e/53799e80f26bd78141a4a220104e23d6.gif');
background-position: center center;
background-size: cover;
border-radius: 15px 15px 0px 0px;
}
@media only screen and (max-width: 800px) {
main:before{
height: 400px;
}
}


/*profile intro*/
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.pinimg.com/originals/cd/a2/b8/cda2b820d46413ad8d0997451bafc286.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 9s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 



/*online status*/
.online{

content: url("http://dl7.glitter-graphics.net/pub/104/104607x61kd02dl0.gif") !important;

}

/* to hide the blurbs heading */
.blurbs .heading{
    display:none !important;
}
/* headings*/
h3, h4, h5{
    color: var(--headers) !important;
}
/* color of links */
a{
    color: var(--links) !important;
}
/* color of links on hover */
a:hover{
    color: var(--hover) !important;
}
/* color of text */
p, h2{
    color: var(--text) !important;
}
/* color of names, and friends counter */
h1, .friends a p{
    color: var(--names) !important;
}
/* color of names on hover */
h1, .friends a:hover p{
    color: var(--hover) !important;
}
/* color of search */
nav label{
    color: var(--links) !important;
}
/* aboutme & want2meet headings */
.section h4 {
    color: var(--headers) !important;
    text-align:center;
}
/* sometimes <p> is broken by embeds maybe. */
.section{
    color: var(--text) !important;
}
/* line in bewtween comment replies*/
.comment-reply:not(:first-child){
    border-top: 3px double var(--links);
}
.count{
    color: red;
}



/*=== padding and margin ===*/
.blurbs{
    margin-top:10px !important;
    margin-bottom:30px !important;
    border:5px solid black !important;
}
.friends{
    margin-top:-10px !important;
    margin-bottom:30px !important;
    border: 5px solid black !important;
}
.profile-info{
    margin-top: 50px;
    margin-bottom: 50px;
    border: 10px solid black !important;
}
.comment-replies{
    border: 0px solid white !important;}
.comments-table{
    border-radius: (--curve) !important
    border:0px solid white !important;
}
.table-section{
    padding-bottom:7px !important;
    margin-top:30px!important
}
#comments{
    margin-top:5px !important;
    padding-bottom:5px !important
}
.details p:last-child{
    color:var(--links) !important; 
    filter: brightness(95%);
}
.mood{
    margin-top:20px;
    border: 5px solid black !important;
}
.blog-preview{
    margin-top:30px;
    border: 5px solid black !important;
}
.mood, .blog-preview{
    margin-bottom: 30px;
}
.table-section, .blurbs, .friends{
    margin-bottom: 30px !important;
    
}



/*border radius top-left, top-right, bottom-right, bottom left*/
.profile-pic {
    border-radius: 500px;
    overflow: hidden;
}
.profile-info{
    border-radius: 15px 15px 15px 15px;
}
.profile .friends .person img {
    border-radius: 5px 5px 5px 5px;
}
.top, .links, main{
    border-radius: 15px 15px 15px 15px;
}
.contact .heading, .contact{
    border-radius: 15px 15px 15px 15px;
}
.url-info, .mood{
    border-radius: 15px 15px 15px 15px;
}
.blog-preview{
    border-radius: 15px 15px 15px 15px;
}
.blurbs{
    border-radius: 15px 15px 15px 15px;
}
.friends{
    border-radius: 15px 15px 15px 15px;
}
.table-section{
    border-radius: 15px 15px 15px 15px;
}
#comments{
    border-radius: 15px 15px 15px 15px;
}
.profile .friends td {
    background: black;
    border-radius: 5px;
}
 </style>



<style>
/*=== background color/image ===*/
    .top{
        
        background-image: url('https://i.pinimg.com/originals/4f/07/61/4f07618e6737f672bedccccd4ed06f16.jpg') !important;
        background-position: CENTER !important;
        
    }
    .profile-pic {
        background: #181818 !important;
        box-shadow: 3px 3px 10px #181818 !important;   
    }
    .profile-info{
        background-color: black !important;
        background-image: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg') !important;
        background-repeat:no-repeat !important;
        background-attachment: fixed !important;
        background-position: center !important;
    }
    body{
        
        background-color: #181818 !important;
        background-image: url('https://media.giphy.com/media/12W5Sg2koWYnwA/giphy.gif') !important;
        background-attachment: fixed !important;
        background-repeat: repeat !important;
        background-position: center !important;
        
    }
    main{
    
        background-color: black !important;
        background-image: url('https://i.pinimg.com/originals/4f/07/61/4f07618e6737f672bedccccd4ed06f16.jpg') !important;
        background-repeat: REPEAT !important;
        background-position: CENTER !important;
        
    }
    footer{
        background-color: transparent; /* CHANGE COLOR OF BOTTOM SPACEHEY INFO */
    }
    .blurbs{
        background-color: black !important;
        background-image: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg') !important;
        background-repeat:no-repeat !important;
        background-attachment: fixed !important;
        background-position: center !important;
    }
    .mood{
        background-color: black !important;
        background-image: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg') !important;
        background-attachment: fixed !important;
        background-position: center !important;
    }
    .links{
        
        background-color: transparent !important;
        background-position: CENTER !important;
        
    }
    .contact .heading{
        background-color: black !important;
        background-image: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg') !important;
        background-attachment: FIXED !important;
        background-repeat: no-repeat !important;
        background-position: CENTER !important;
    }
    .table-section .heading{
        background-color:black !important;
    }
    .profile .table-section .details-table td {
        background-color: #2C2C2C ;
        color: black;
    }
    .url-info{
        background-color:#2C2C2C !important;
    }
    .blog-preview h4, .blog-preview{
        background-color: black !important;
        background-image: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg') !important;
        background-attachment: FIXED !important;
        background-repeat: no-repeat !important;
        background-position: CENTER !important;
    }
    .contact{
        background-color: black !important;
        background-image: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg') !important;
        background-attachment: FIXED !important;
        background-repeat: no-repeat !important;
        background-position: CENTER !important;
    }
    .friends .heading{
        background-color: black !important;
        background-image: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg') !important;
        background-attachment: fixed !important;
        background-position: center !important;
    }
    .friends{
        background-color: black !important;
        background-image: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg') !important;
        background-attachment: fixed !important;
        background-position: center !important;
    }
    .comments-table td{
        background-color: black !important;
        background-image: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg') !important;
        background-attachment: fixed !important;
        background-position: center !important;
    }
    html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url('https://i.gifer.com/origin/09/098a359ee79551f8a36b42338a9255cc_w200.gif');
    content: "";
    height: 300%;
    left: -100%;
    opacity:25%;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
}




/*== heading details ==*/
.blog-preview h4, .friends .heading{
    text-align: center !important;
}
.profile .contact, .profile .table-section, .profile .url-info {
    border: 5px solid black;
}
.profile .blurbs .heading, .profile .friends .heading {
    background-color: solid black;
    color: solid black;
}


/*== text details ==*/
.blog-preview{
    text-align: center;
}
.blurbs .inner{
    font-size: 15px;
    text-align: center !important;
}
.links{
    text-align: center; font-size: 15px !important;
}
.contact .heading{
    text-align: center;
}
.mood{
    text-align: center;
}



/*== text color ==*/
    .top{
        
    color: white;
        
    }    
    main{

    color: white !important;
        
    }
    body{
    
    color: white !important;
    
    }
    footer{
        
    color: white;
        
    }
    .profile .blurbs .section h4{
        color: white !important;
    }
    .friends .heading{
        color: white !important;
    }
</style>



<style>
.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 Favorites */
content: "⸸"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: "⸸"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward 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 to Group */
content: "⸸"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: "⸸"
}
</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 10 of 10 comments ( View all | Add Comment )

Nox	1713196671 I love this one, omg. Report Comment
Mr. Glitch	1704422224 uzing!! Report Comment
iiR00ki€	1701934961 Using Report Comment
SamStar	1693880675 Using! Report Comment
irene ☆	1686520152 trying Report Comment
(max)	1681509917 going to tryout !! this is rlly cool !!!! Report Comment
🍉☆maaurn☆🍉	1678644898 definitely using for a blog! Report Comment
otacoon663_	1677368082 THANKS DUDE :DDDDD Report Comment
☆FAN!!☆	1675664115 GOING 2 USE SOON!! LOOKS ADORBS AND AMAZING DUDE >w< xDD!! Report Comment THANK YOU THANK YOU by Ray Zalatoris; 1675666710; Report
cilica	1675603768 i fucking love it??? Report Comment haha thank you! :DD by Ray Zalatoris; 1675606187; Report