Green Cyber Emo

Tags: green, black, cyber, emo

Description:

This is the layout i currently have on my page and i love it sfm!!! If you use my layout, please give me creds or comment here <3 Feel free to change whatever, but if you use a main component of it and then upload it, please give me creds in the description for the parts you used :) Thanks!

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&family=Great+Vibes&display=swap');



/*PASTE SCROLLBAR CODE HERE*/
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #0d0c0d #4d4c4c;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 15px;
  }

  *::-webkit-scrollbar-track {
    background: #4d4c4c;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #0d0c0d;
    border-radius: 10px;
    border: 2px dotted #46fb73;
  }

/*=== navigation ===*/
/*=== change logo color at https://codepen.io/sosuke/pen/Pjoqqp ===*/
nav{
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border: var(--borders);
    border-radius: var(--curve);
}
nav .top {
    background: rgba(0,0,0,0.0);
}
nav .top a{
    color: var(--links)!important;
}
nav .links {
    background: transparent!important;
    background-size: 100%100%!important;
    text-align: center;
    font-size: 14px;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(96%) contrast(89%); !important;}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ⋮ ";
    color: var(--text);
}

/*=== color the search bar and button ===*/
.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 2px solid var(--links) !important;
    color:DarkGray !important;
    border-radius: 10px !important;
}
button{
    border-radius: 10px !important;
    border: 0px solid DarkGray!important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color:var(--links)!important;
}

body{
background-image: url('https://images.thefacecdn.com/images/NamecoreG.png?auto=compress&q=25&fit=crop&crop=focalpoint&fp-x=0.5&fp-y=0.5&w=1400');
background-repeat: repeat;
background-position:undefined;
background-attachment: fixed;
background-size: contain;
background-color: #0f4328;
border: 4px dotted #000000;
}

main{
background-image: url('https://garden.spoonflower.com/c/13421366/p/f/m/pq08G04Io_0845NiTtC8-ECLAlIG5ZUroZDhQvEEOp6JZzVc1e02I-PDWw/Emo%20Mothman%20with%20Green%20Background.jpg');
background-repeat: repeat-x;
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: #000000;
}

.contact, .url-info, .table-section, .blurbs, .friends, .comments {
background-image: url('https://i.pinimg.com/1200x/79/8c/84/798c840e64f315bfe94e99592ed93ede.jpg');
background-position:undefined;
background-attachment: fixed;
background-size: contain;
background-color: #52a300;
border: 3px Dotted #6eff6b!important;
}

span[itemprop='name'] {
color: #a3ff66;
font-size: 16pt;
font-weight: bold;
text-decoration: underline;
font-style: italic;
font-family: 'Comic Neue', 'Comic Sans', Sans-Serif;
}

h4 {
color: #34d309;
font-size: 18pt;
font-weight: bold;
font-family: 'Comic Neue', 'Comic Sans', Sans-Serif;
}

.section h4, .details-table td:first-child {
color: #34d309!important;
font-size: 16pt;
font-family: 'Comic Neue', 'Comic Sans', Sans-Serif;
}

a, .count {
color: #c8ff00;
font-size: 14pt;
text-decoration: underline;
font-family: Monospace;
}

a:hover {
color: #ffff00;
font-size: 16pt;
font-weight: bold;
text-decoration: underline;
font-family: Monospace;
}

body,main {
color: #305c05;
font-size: 14pt;
font-weight: bold;
text-decoration: underline;
font-family: 'Comic Neue', 'Comic Sans', Sans-Serif;
}

.details-table td, .details-table td:first-child{
background: none!important;
}
.heading{
background: none!important;
}
.comments-table td{
background: none!important;
}

/*SpaceHey Logo*/
    .logo {content:url("https://iili.io/HtKruob.png");{
background: transparent!important
}

/* 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: "✠︎"
}   

/*notification bell*/
li.active .icon { content:url('https://iili.io/HtnCdle.png');
}

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/holidays/hol-4/hol333.ani), url(https://cur.cursors-4u.net/holidays/hol-4/hol333.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/10/14/animated-swinging-skull.html" target="_blank" title="Animated Swinging Skull"><img src="https://cur.cursors-4u.net/cursor.png" alt="Animated Swinging Skull" style="position:absolute; top: 0px; right: 0px;"/></a>

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

iforgotmygender

1698584873

uzing thiz if u dont mind :D

Report Comment