Neon Fun

Tags: neon, pink, purple, black, bela

Description:

Copy the code that's in the box below and test it out in the Profile Editor in Friends View.

I truly appreciate your comments and thank you so much for using this layout. To keep things organized and prevent spam, I only check My Layouts blog for messages. If you have any questions, feedback, concerns, or suggestions, please leave them there, and I will do my best to respond. I may take up to 2 weeks to reply sometimes so I apologize in advance. But you may also find the answer for any questions you have there if someone else already commented. 💜

Image Credits —
⇘ Loading Heart Image: https://media.giphy.com/media/Cnr7LD9nyi9gPDZK5Y/source.gif?cid=790b761124e2bfadce11ccc36ebc8c9b2c81a2e32c0fa43a&rid=source.gif&ct=s
⇘ Profile Background: https://i.imgur.com/vOmdzLg.jpg
⇘ Image Before the Blog Post: https://i.pinimg.com/originals/83/eb/05/83eb05a34e56a21f02fd0d839c7a1ba3.gif

[last updated March.20.2025]

Preview:

click on the image for a larger preview

Code:

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

<style>
/* mobile code. don't delete */
@media (max-width: 600px) {
    main{
        max-width: 100%!important;
    }
    h1{
        font-size: 30px!important;
    }
    body{
        font-size: 16px!important;
    }
    a{
        font-size: 18px!important;
    }
body:before{
background-size:20%!important;
}
}
</style>

<style>
/* This is the loading image when someone clicks on your profile.
You can search for 'transparent loading screen gif' on google or giphy.com and select one that fits your style.
The background-size code will change the size of it. Remember to test it out on your phone/tablet 
and change the background-size in the mobile code.*/

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://media.giphy.com/media/Cnr7LD9nyi9gPDZK5Y/source.gif?cid=790b761124e2bfadce11ccc36ebc8c9b2c81a2e32c0fa43a&rid=source.gif&ct=s');
	background-size: 4%;
	background-repeat: no-repeat;
    background-position:center;
    background-color: black;
	animation: yourAnimation 2s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<style>
/* cursors */
a:hover{
    cursor: url('https://cdn.custom-cursor.com/db/pointer/32/Mothers_Lipstick_Pixel_Pointer.png'), auto;
}
* { 
    cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Mothers_Lipstick_Pixel_Cursor.png'), auto; 
}
</style>

<style>
/* fonts */
    @font-face { font-family: "Squarewave"; src: url('//dl.dropbox.com/s/ywrwfz8d2jsi462/Squarewave.ttf'); }
    @font-face { font-family: "7pixelsOfPerfection"; src: url('//dl.dropbox.com/s/xko4q8bi21sd3wz/7pixelsOfPerfection.ttf'); }
    @font-face { font-family: "Neuborn"; src: url('//dl.dropbox.com/s/h338im6w4a9uouf/Neuborn%20Regular.ttf'); }
</style>

<style>
:root{
    --headers: #8200FF;
    --text: #9B45EE; 
    --names: #6E19BF;
    --links: #AB19BF;
    --font-family: "Squarewave";
}

a:hover{text-decoration: none;text-shadow: 0px 0px 5px red;}
h2, h3, h4, h5{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
p, b, .count {color: var(--text) !important;} /* color of text */
.profile .friends .person p{color: var(--names) !important;} /* color of names and friends counter */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers)!important;} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important;  */

body{
    background-color: black;
}
.container{
    width: 100%;
}

main{
    background-image: url('https://i.imgur.com/vOmdzLg.jpg');
    background-size: 100%100%;
    background-repeat: no-repeat;
    border:8px double #8200FF;
    width:800px;
    height:500px;
    overflow-y: scroll;
    margin: auto;
    background-color: black;
}
h1{
    color: #8200FF;
    font-family: var(--font-family);
    font-size:50px!important;
    font-weight: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: -0.569em -0.169em 0 rgb(201 49 76 / 20%), 0.569em 0.169em 0 rgb(201 49 76 / 40%);
}

nav{
    background-color: transparent;
    border: none;
    margin-bottom: 50px;
}
nav .top{
    background: transparent;
    color:var(--links);
}
nav .top a, nav .links a{
    color: var(--text);
}
nav .links{
    background-color: transparent;
    text-align: center;
}
nav .links a{
    text-shadow: none;
}
/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ◩ ";
    color: var(--headers);
}

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
    filter: brightness(0) saturate(100%) invert(9%) sepia(100%) saturate(6449%) hue-rotate(271deg) brightness(114%) contrast(122%)!important;
    width:130px!important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 1px solid var(--links) !important;
    color:var(--links) !important;
}

button{
    border: 0px solid var(--links) !important;
    font-family: "Neuborn";
    background-color: transparent !important;
    color:var(--links) !important;
    font-size: 16px!important;
}
button:hover{
    text-shadow: 0px 0px 5px red;
}
/* the online symbol and text */

.online{
    color: var(--links) !important;
    text-transform: lowercase;
    text-align: right;
} 
.online img{
    filter: brightness(0) saturate(100%) invert(9%) sepia(100%) saturate(6449%) hue-rotate(271deg) brightness(114%) contrast(122%)!important;
}

/* font family for the headers, navigtion links, links, body text */

h2, h3, h4, h5{
    font-family: "7pixelsOfPerfection";
    font-size: 20px!important;
    font-weight: normal;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .7px;
}
a{
    font-family: var(--font-family) !important;	
    font-size: 18px!important;
    font-weight: 1;
}
p, b, nav label, .section{ 
    font-family: "Neuborn";
    font-size: 16px!important;
    font-weight: 1;
    letter-spacing: 1px;
}
/* the hr code.
the hr is the horizontal line when you want to 
separate important info or add a break in your paragraphs*/

hr{
    height:1px;
    background: var(--links);
    border: none;
}

/* this is where you adjust the borders and background */
.contact{
    border:none!important;
    background-color: black!important;
    padding:10px;
    margin-bottom: 30px!important;
}
.mood{
    border:none;
    background-color: black!important;
    text-align: center;
    padding:10px;
}
.icon{
    border:none !important;
    font-size: 12px!important;
}
.comment-replies{
    border:none!important; 
    
} 
.comment-reply:not(:first-child){
    border-top: 2px solid var(--headers);
}


td{
    background-color: transparent!important;
}
/* the interest table */
.table-section{
    border:none !important;
    background-color:transparent!important;
    text-align: center;
}
.details-table{
    border:none;
    background-color: black!important;
    padding:10px;
    border-spacing: 0px 10px;
}
.details-table td{
    display:flex;
    flex-direction:column;
}
.details-table td:first-child{
    width:100%;
  text-align:center;
}

/* the about me section */
.profile .blurbs .section:not(:nth-child(2)){
    border:none;
    background-color: black!important;
    padding:10px;
}

/* the who I'd like to meet section */
.profile .blurbs .section:nth-child(2){
    border:none;
    background-color: black!important;
    padding:10px;
}

/* the friends section only */
.friends{
    border:none;
    background-color: black!important;
    text-align: center;
    padding:10px;
}

/* the comments section only */
#comments{
    border:none;
    background-color: black!important;
    text-align: center;
    padding:10px;
}

.heading, .blog-preview h4, .section h4{
    background: none !important;
    text-align: center;
}

/* the 'edit profile/Name is Your friend' section */
.profile-info {
    border:none;
    background-color: black!important;
    text-align: center;
    padding:10px;
}

/* adjusting images borders and adding styling if you want to */
.general-about{
    background-color: black;
    padding-bottom: 70px; /* adjust this to fit your profile photo */
    border: 10px solid black;
}
.blog-preview{
    border:none;
    background-color: black!important;
    text-align: center;
    padding:10px;
}

/* you can remove text-align:center; if you don't want your friends to be centered */
.friends-grid{
    text-align: center;
}

/* this adds space between sections */
.friends, .mood, .general-about .details, 
.blog-preview, .profile .blurbs .section:nth-child(2), 
.profile .blurbs .section:not(:nth-child(2)){margin-bottom: 30px!important;} 

.url-info{display:none;}

.comments-table {
    border-spacing: 10px;
    border:none;
}
.comments-table td{
    border:2px solid #8200FF;
}
.comments-table td:nth-child(2) p{
    font-style: italic;
}
footer{
    margin-top:10px;
    background-color: transparent;
    border: none;
    text-align: left;
}
footer .links{
    margin-top: 0px;
    text-align: left;
}

/* this adds an image before the blog. you can delete this code but this layout
looks better with a neon image before your blogs. */
.blog-preview :not(:first-child) {
    width: 130px;
    text-align: center;
    display: inline-block;
    padding-right: 5px;
    margin-left:10px;
}
.blog-preview :not(:first-child):before {
    content: "";
    display: block;
    width: 130px;
    height: 100px;
    background: url('https://i.pinimg.com/originals/83/eb/05/83eb05a34e56a21f02fd0d839c7a1ba3.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* this is the custom contact code */
.contact .inner a img {
    font-size: 0!important;
}
.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: "₪";
	font-size: 14px;
	color: var(--text);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "₪";
	font-size: 14px;
	color: var(--text);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "₪";
	font-size: 14px;
	color: var(--text);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "₪";
	font-size: 14px;
	color: var(--text);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "₪";
	font-size: 14px;
	color: var(--text);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "₪";
	font-size: 14px;
	color: var(--text);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "₪";
	font-size: 14px;
	color: var(--text);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "₪";
	font-size: 14px;
	color: var(--text);
}
</style>

<style>
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border: 1px solid #000;
}
::-webkit-scrollbar-thumb {
    background: #000; 
}
::-webkit-scrollbar-thumb:hover {
    background: #000;  
}

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

Kam2Swaggy	1745196346 I shall be useth this template oft, and much obliged am I—'tis greatly appreciated, madam. Report Comment
Suspiria	1745100039 Using thankssa Report Comment
n_nnamiuh	1745010755 ¡Usando! Report Comment
Sammy Rod	1744323631 Usando 👍 Report Comment
namzzz	1744040979 using. thanks Report Comment
cenobitetacos	1742015734 Using!! Report Comment
Vincenzo	1742011850 USING!!! Report Comment
Kuro	1740531452 Using yuhhh Report Comment
drew	1740345106 using! Report Comment
drew	1740345106 using! Report Comment
⠀Tora ۪ ꒱	1740261757 usingg Report Comment
Sean Jensen	1740238519 Using. Thank you! Report Comment
LANESLASH	1740090876 <3 using <3 Report Comment
SpookyxGhoul	1740000534 Using <3 Report Comment
damiiann	1712800157 Using Report Comment
wano-san	1712429271 using Report Comment
Mel	1711647091 using !! Report Comment
Nat	1711143211 using!! Report Comment
shizu	1710854968 using :3 Report Comment
JACKSON FREAKWEAK	1710594111 LOVE THIS💜💜💜💜💜 been looking for a good layout to use for so long (not that none of the other ones rnt good just not the vibe i needed) and this one is purrfect tysm for posting this Report Comment