My old profile layout!

Tags: blue, black, simple, minimalist, flipped, white, glow, filter

Description:

This is my old layout... Free to use, and no credits are needed! (note: my pfp mask isn't included!!)

There's an instruction inside the code in case you want to change the header.

EDIT: OMG GUYS TYSM FOR LIKING MY LAYOUT AHHHHH (please check out my other layouts ;_;)

Preview:

click on the image for a larger preview

Code:

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

<style>
a:hover, nav .links a:hover, nav .top a:hover, footer a:hover, button:hover, .friends a p:hover{
  text-transform: uppercase;
}
</style>

<style>
*::-webkit-scrollbar {width: 18px;}

	*::-webkit-scrollbar-track {background: #000000;}
	
	*::-webkit-scrollbar-thumb {
		background-color: #C4F6FF;
		border-radius: 10px;
		border: 3px solid #C4F6FF;

</style>

<style>

/*Search Users Box (Background Color/Background Image)*/
    .top input{border-radius: 15px 15px 15px 15px;}

/*Buttons (Background Color/Background Image)*/
    button{
    border-radius: 25px 25px 25px 25px !important;
	color: #000000;
	font-weight: bold;
    background-color: black !important;
	}
</style>

<style>/* Navigation */
    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
    }
    
    nav .links a{
        color: #C4F6FF; !important;
        text-shadow: none !important;
font-weight: bolder;
    }
    
    nav .links a:hover {color: #C4F6FF; !important;}
    
    nav .links {
        text-align: center;
        padding: 3.5px 3.5px 5.5px 3.5px;
        font-size: 70%;
    }
</style>
    
<style>/* Links */
    a:hover {color: #C4F6FF;}
</style>

<style>
/* Flip Profile */
    .profile{direction: rtl;}
.blog-preview{direction: ltr; text-align: center;}
    .blurbs{direction: ltr;}
    .friends{direction: ltr;}
    .general-info{direction: ltr;}
.profile .left h1{direction: ltr;}
    .details-table{direction: ltr;}
    .profile .table-section .heading{direction: ltr;}
    .details p{direction: ltr;}
	.mood{direction: ltr; text-align: right;}
.url-info{direction: ltr; text-align: right;}
</style>



<!-- If for some reason you don't want your header to flick, but still want it to glow, erase the original  below and use this instead:

<style>
@import url('https://fonts.cdnfonts.com/css/vocaloid');
    .profile h1{
        text-align: center;
        text-shadow: 0px 0px 15px white ;
        font-size: 50px;
        color: white;   
        .profile .left h1:first-child {font-size: 2.65rem;}
	.profile .left h1{ font-family: 'Vocaloid', sans-serif; font-size: 25px; text-align: center; text-transform: uppercase; overflow-wrap: break-word;
    }
</style>

>>CODE WITHOUT FLICKERING END<< 

-->

<style>
/* Profile Name Header (FLICKER) */
	@import url('https://fonts.cdnfonts.com/css/vocaloid');
@import url('https://cory.anota.do/spacehey/pdg_neon.css');
	:root{ --neon-text-color: #C4F6FF;}
.profile .left h1:first-child {font-size: 2.65rem;}
	.profile .left h1{ font-family: 'Vocaloid', sans-serif; font-size: 25px; text-align: center; text-transform: uppercase; overflow-wrap: break-word;}
</style>

<style>/* Profile Picture & Online Icon */
	.details p {text-align: center; font-size: 15px;}
	.profile-pic {border-radius: 20px; overflow: hidden;}
.profile .mood {color: #fff;}
	.mood {text-align: right;}
    .online {visibility: hidden;} 
    .online img { 
        content: url("https://ct.pimp-my-profile.com/online/26.gif"); 
        animation-name: none; 
        visibility: visible; 
        height: 15px; 
        width: 60px;
		display: block;
		margin-left: auto;
		margin-right: auto;
    }
.profile .url-info {color: #C4F6FF;}
</style>   

<style>/* Headers Colors */
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: #055ec2 !important;
        color: #fff !important;
        text-align: center;
        border-bottom: 2px solid;
border-radius: 10px 10px 10px 10px;
    }
	
	.profile .blurbs .section h4{color: #C4F6FF; font-weight: bolder;}
</style>

<style>/* Interests Table Info */
    table.details-table {border-collapse: collapse;}
    table.details-table td {background-color: #000 !important;}
.details-table td:first-child {color: #C4F6FF !important;}
</style>

<style>/* Blog Info */
.blog-preview h4 {color: #C4F6FF;}

    .blog-preview p {
        background-color: none;
        padding: 5px 10px;
        border-radius: 10px;
        color: #fff;
font-weight: bolder;
    }
	
    .blog-preview p a{color: #C4F6FF !important;}
	
    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: #fff !important;
    }
</style>
    
<style>/* Friends Info */
    .profile .friends .heading{color: #ffffff;}
.profile .friends{text-align: center;}
    .count {color: #055ec2;}
    .profile .friends .person p{color: #22bbd3 !important;}
	.profile .friends .person img {border-radius: 500px;}

    .profile .friends .person img:not(.icon) {
        border-radius:15px;
        box-shadow: 1px 0px 7px 2px rgba(34, 187, 211, 0.71);
        border: 2px solid rgba(255, 255, 255, 1);
    }
    
    .profile .friends .person img:not(.icon):hover {
        transform: scale(1.1);
        transition: 0.5s ease;
    }
    
    .profile .friends .person img:not(.icon) {transition: 0.5s ease}
</style>

<style>/* Comments Info */
    table.comments-table td {
        background-color: #000 !important;
        border: none;
    }

    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }
	
	.comments-table{
        display: block;
        height: 350px;
        overflow-y: scroll;
        border: none;
    }
</style>

<style>/* Custom Profile Headers */
.contact .heading{ font-size:0; }
.contact .heading:before{ content: "Contact Me"; font-size:.9rem; font-weight: bolder; }

.w-40 .table-section:nth-last-child(2) .heading h4{ font-size:0;}
.w-40 .table-section:nth-last-child(2) .heading:before{content: "Things i like!!"; font-size:.9rem; font-weight: bolder; }

.w-40 .table-section:last-child .heading h4{ font-size:0; }
.w-40 .table-section:last-child .heading:before{ content: "Follow Me!"; font-size:.9rem; font-weight: bolder; }

.blog-preview h4{ font-size:0; }
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "My New Blogs"; font-size:.9rem; font-weight: bolder; }

.blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "Me"; font-size:.9rem; font-weight: bolder; }

.blurbs .inner .section:nth-child(1) h4{ font-size:0; }
.blurbs .inner .section:nth-child(1) h4:before{ content: "About Me:"; font-size:.9rem; }

.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "Who I'd Like To Meet:"; font-size:.9rem; }

.friends .heading{ font-size:0; }
.friends .heading:before{ content: "The Friends"; font-size:.9rem; font-weight: bolder;}

.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "Leave Me A Comment!"; font-size:.9rem; font-weight: bolder;}
</style>

<style>
{background-color: black;}
img {
filter: sepia(100%) hue-rotate(179deg) saturate(1.99);
}
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

#q, button {
color: #C4F6FF;
background-color: black;
border: 1px solid grey;
font-family: inherit;
}
p, i, b, .count {
color: #C4F6FF !important;
}
a, .profile .friends .person p, .logout-btn {
color: #C4F6FF !important;
text-decoration: underline !important;
}
.container {
margin: 0 auto 0;
}
.icon {
display: none;
}
nav, nav .links a {
color: #C4F6FF;
}
nav .top {
margin-top: 2px;
background: none;
background-color: black;
border: 2px solid grey;
border-bottom: none;
}
nav .links {
background-color: black;
border: 2px solid grey;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(81%) sepia(66%) saturate(286%) hue-rotate(171deg) brightness(105%) contrast(104%); !important;
}
body{
background-image:
url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Black_from_a_camera.jpg/1200px-Black_from_a_camera.jpg);
background-attachment: fixed;
background-size: 1000px;
}

main {
background: black;
color: #C4F6FF;
border-left: 2px solid grey;
border-right: 2px solid grey;
}
.heading, .url-info {
color: #C4F6FF !important;
background: none;
background-color: black !important;
border: 2px solid grey !important;
}
.inner {
color: #C4F6FF !important;
border: 2px solid grey;
border-top: none;
}
.profile-info {
border: 2px solid grey;
}
.profile-info .inner {
border: none;
}
.friends .inner {
border-bottom: none;
}
#comments {
border-bottom: 2px solid grey;
}
.profile .contact, .profile .table-section, .home-actions {
border: none !important;
}
.profile .contact .f-row:first-of-type {
margin-top: 0px;
padding-top: 7px;
}
.profile .blurbs .section h4 {
color: #C4F6FF !important;
}
.details-table {
margin: 2px;
}
.details-table, td {
border: 1px solid grey;
border-collapse: collapse;
}
td {
color: #C4F6FF !important;
background: none;
background-color: black !important;
} 
table.details-table {
max-width: 98%;
}
.profile h1 {
font-size: 20px;
}
footer {
background: black;
border: 2px solid grey;
}
footer p {
color #C4F6FF !important;
}
.comments-table {
border: none;
border-collapse: collapse;
}
.comment-replies {
border: 1px solid grey;
margin: 2px;
}
nav .info {
background: none;
}

</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: url('https://supplies.ju.mp/assets/images/tiny1/60d42edb_original.gif?v=6a50b904')
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: url('https://64.media.tumblr.com/ddec99d2030d58bf6d28c6ebbe05574f/tumblr_inline_rbrdyfrO2s1vefsve_500.gif')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url('https://supplies.ju.mp/assets/images/gallery05/146b47f6_original.gif?v=6a50b904')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: url('https://supplies.ju.mp/assets/images/gallery04/0d8a40ce_original.png?v=6a50b904')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url('https://supplies.ju.mp/assets/images/tiny1/1e739291_original.png?v=6a50b904')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url('https://64.media.tumblr.com/f19021b5a27d0504ce63cb64e9d26597/tumblr_inline_rcbp0rWDtU1vefsve_500.gif')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: url('https://pix.crd.co/assets/images/gallery21/decc7954_original.gif?v=52ef41fa')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: url('https://pix.crd.co/assets/images/gallery21/410325ee_original.gif?v=52ef41fa')
}

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

WeirdoBeirdo	1755768264 Using tysm Report Comment
Kai	1755127755 Using!! Report Comment
Wallace.ᐟ.ᐟ	1754886497 Usingg! Report Comment
ariivia	1754795432 using! thxxx Report Comment
2weird4u	1754788233 Using !! Report Comment
ebbis <3	1754784914 usinnnn ! Report Comment
Nammli	1754729961 using! :} Report Comment
dani	1754703457 using!! Report Comment
VanillaCoffee	1754607264 Using!! <3 Report Comment
bittenkiss7	1754123851 using Report Comment
M1chaBb	1753862932 using Report Comment
summer <33	1753680523 using tysm :) Report Comment
Broshi:3	1753585570 using ^^ Report Comment
NahNuh	1753571458 using :) Report Comment
ryumi	1753470847 usinngggfg Report Comment
ItsN0tAlexx	1753319224 Using an edited version!! i kinda tweaked it Report Comment
Azulelove	1752972656 usingggg Report Comment
wunawun_furoo	1752735840 using!! Report Comment
k3x1_n!	1752683276 Using. :D Report Comment
REPLICANT	1752571404 using :3 Report Comment