Neon Fun

Tags: neon, pink, purple, black, bela

Description:

Feel free to customize as you wish.
If you have any questions, please comment below or go to my blog here.
✧ I appreciate your comments ٩(๑❛ᴗ❛๑)۶

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

DAVE	1701402533 using! thanks <3 Report Comment
Leonikki Johni	1701332137 I'm using it now~ Looks so good <3 Report Comment
Beanblunt	1701277647 Using! Report Comment
Ghosts	1700762243 I'm using this for my blogs, it looks so nice! Report Comment
CHRUSTYRIBZ	1700634749 using! Report Comment
Aanami	1699820278 Using! Report Comment
-Alli-	1699650576 using!! Report Comment
Carl	1699148841 usiiiing!!111! Report Comment
xanyyyy	1699130341 using (soon) Report Comment
Newly-dead	1698489009 using Report Comment
♡TheGalNextDoor♡	1696964490 Using <3 Report Comment
✮deftonezluvr✮	1695073466 using ^^ Report Comment
Yuli	1694221384 Very cute, thank you! Report Comment
Kishii !!	1693835310 It's so pretty! :0 using <3 Report Comment
DR JOVIAL/ abjura	1691358764 so cool!! using! Report Comment
Chantel	1690945184 using it<333 Report Comment
itz.zanyyy	1690868556 usinggg Report Comment
MiMi ★	1690680667 using >_< Report Comment
RUI !! ⊹ ⁺ ⋅	1690061488 Using !!!! Report Comment
saccharine	1689463422 IM USING THIS, tysm Report Comment