Neon Fun

Tags: neon, pink, purple, black, bela

Description:

I appreciate your comments and thank you for using this layout. To prevent spam, comments are disabled as of April 12th 2024.

Feel free to customize as you wish.
If you have any questions, please comment below or go to my blog here.

Background 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

Layout Preview:

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;
}

/* 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 150 comments ( View all | Add 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
DJ_Eggman767	1710197767 Using and Favorite Report Comment
midori	1710099554 oh this is epic, totally using Report Comment
_K4TER1NE_!1!1!1!	1709768586 USINNG Report Comment
cowboysupernova	1709508661 Definitely thinking about using- probably will- this is the bomb man! Report Comment
F⃣ L⃣ S⃣	1708480056 Using!! :o] Report Comment
Oli	1707846705 using!!!! Report Comment
p3st_c0ntr0l	1707754071 using!!! Report Comment
haru >_<	1707653129 usinggg !! Report Comment
lizerator	1707448823 useing Report Comment
Goddess Nyx	1707079192 using Report Comment
Nizhoni	1706934324 using Report Comment
Ylen	1705647029 using Report Comment
AbeLincon	1705540945 vibin Report Comment
Viviluna	1705369574 hell yeah Report Comment