Neon City

Tags: crashtestdummy, neon, animation, cyberpunk, city, mobile

Description:

Neon profile

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Crash Test Dummy (https://layouts.spacehey.com/layout?id=2541) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Train+One&family=Turret+Road:wght@200&display=swap');
:root{--neon-text-color:#FF69B4;--neon-border-color:#FF69B4;
    --pdg_blurbSticker: url(https://i.imgur.com/9aDLMOw.gif);
	--pdg_commentsSticker: url(https://i.imgur.com/EQktzlX.gif);
	--pdg_interestSticker: url(https://i.imgur.com/YvG0QBn.gif);
	--pdg_urlInfoBox: url(https://i.imgur.com/3qAkXIV.gif);
	--pdg_titleTexture: url(https://i.imgur.com/zhj45Xp.gif);
	--pdg_linkTexture: url(https://i.imgur.com/zhj45Xp.gif);
	--pdg_profileInfo: URL(https://i.imgur.com/SbIBHcQ.gif);
    --pdg_yourBackground: url(https://i.imgur.com/BeUTcEv.gif);
}
.profile .left h1:first-child{color:#fff;font-size:3rem;padding:1rem 1rem 1rem;animation:pdg_flicker 1.5s infinite alternate;text-align:center;line-height:1.3em;}
@keyframes pdg_flicker{0%,19%,21%,23%,25%,54%,56%,100%{text-shadow:-0.2rem -0.2rem 1rem #FF69B4,
0.2rem 0.2rem 1rem #FF69B4,
0 0 2rem var(--neon-text-color),
0 0 4rem var(--neon-text-color),
0 0 6rem var(--neon-text-color),
0 0 8rem var(--neon-text-color),
0 0 10rem var(--neon-text-color);}
20%,24%,55%{text-shadow:none;box-shadow:none;}
}
:root{ --neon-text-color: #FF69B4; }
.profile .left h1{  font-family: 'Train One', cursive; transform: rotate(-4deg); }

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
    font-family: 'Turret Road', cursive;
	line-height:1em;
	text-shadow: 0 0 7px violet;
	
}

body {
	background-image: var(--pdg_yourBackground);
	background-size: cover;
	background-position:center;
	background-attachment: fixed;
}

h1, h2, h3, h4,h5,a, p, nav label, .section {color: hotpink}

.profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }
main {
	background:#00000066;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-radius:25px;
	padding:25px;
	color:#FFFFFF;
}
body:before {
	display: block;
	position: fixed;
	pointer-events: none;
	content: " ";
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	right: 0;
	background-image: var(--pdg_pageTexture);
	background-size: cover;
	background-attachment: fixed;
	opacity: .35;
	z-index: 25;
}
.profile a {
	transition: all .1s!important;
}

.profile a:hover, .profile a:hover p {
	background: var(--pdg_linkTexture)!important;
	;
	color: #EE82EE!important;
	text-shadow: 1px 1px 0 #000!important;
	;
}
.profile .section p, .details-table td:last-child p{
	background-color:#00000066;
	padding:.5em;
}

.profile .left h1 {
	text-transform: uppercase;
	font-size: 3rem;
	color:deeppink;
}

h1 { 
  color:#FF1493; 
 font-size:14pt; 
 font-family: 'Train One', cursive;
 text-decoration:underline; 
 } 


.profile .right .blurbs {
	position: relative;
}
.profile .right .blurbs:after {
	background-image: var(--pdg_blurbSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(2) translateY(-2rem);
	position: absolute;
	right: 0;
	z-index: -1;
}
.profile .left .table-section:nth-last-child(2):before {
	background-image: var(--pdg_interestSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(1.7) translateX(-3em) translateY(2.5em);
	position: absolute;
	z-index: -1;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
	border: 0!important;
	width: 100%;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading {
	background-image: var(--pdg_titleTexture)!important;
	background-size: cover;
	background-position: bottom;
	color: green
	-webkit-text-stroke: 1px #FFF;
}
.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
	text-transform: capitalize;
	font-size: 1.6rem;
}
.profile .url-info {
	border: 0;
	color: #FFF;
	background: var(--pdg_urlInfoBox);
	background-position: center;
	text-align: center;
	padding:8em 0;
}
.details-table td:first-child {
	background: none;
	width: fit-content!important;
	color: #FFF;
	text-shadow: 0px 2px 0 #000;
}
.details-table td:last-child {
	background: none;
	max-height: 150px;
	overflow-y: scroll;
	float: right;
}
.details-table tr {
	border-bottom: 1px solid #000;
}
.profile .blurbs .section h4 {
	color: violet;
	font-size: 1.3rem;
}
.profile-info {
	background: var(--pdg_profileInfo);
	background-size: cover;
	background-position: center;
	box-shadow: -7px 8px 0 #0006;
	color: greenyellow;
	padding:6em 0;
}
.profile-info h3 a {
	color: #FFF;
}
.comments-table, .details-table {
	border: 1px solid #0000;
	border-collapse: separate;
	border-spacing: 0 .5em;
}
.comments-table tr td:last-child {
	height: 250px;
	display: block;
	overflow-y: scroll;
}
.comments-table td, .music-table td {
	background: none;
	color: #000;
}
.comments-table tr {
	border-bottom: 1px solid #000;
}
.comments-table td:first-child, .music-table td:first-child {
	background: none;
	text-align: left;
}
.profile .comments-table:after {
	background-image: var(--pdg_commentsSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(4) translateX(-2.5rem) translateY(-1rem);
	position: absolute;
	right: 0;
	z-index: -1;
}

.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: "\2795"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "\2b50"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "\1F4ac"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "\23e9"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "\1F4f1"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "\274c"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "\1F465"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "\1f5e3"
}

nav img.logo{
    filter: brightness(0) saturate(100%) invert(15%) sepia(51%) saturate(5801%) 
    hue-rotate(248deg) brightness(77%) contrast(90%); !important;
}

nav .top {
    background: rgba(0,0,0,0.0);
    color: darkorange;
}
nav .top a{
    color: #EE82EE!important;
}
nav .links {
    background: transparent!important;
    background-size: 100%100%!important;
    text-align: center;
}
nav .links a{
    color: #EE82EE!important;
}
#q, button {
color: 	#4B0082;
background-color: violet;
border: 1px solid 	#4B0082;
font-family: inherit;
}

@media only screen and (max-width: 600px) {
	.profile .left h1:before{
		transform: rotate(-4deg) scale(1.7) translateX(3.5em);
	}
	.profile .left .table-section:nth-last-child(2):before {
		transform: rotate(-4deg) scale(1.7) translateX(14em) translateY(-1.5em);
		z-index: 0;
	}	 
}

html:before {
	animation: grain 8s steps(10) infinite;
	background-image: url(https://i.imgur.com/BhpvqE8.gif);
	content: "";
	height: 300%;
	left: -50%;
	opacity: .2;
	position: fixed;
	top: -110%;
	width: 300%;
	pointer-events: none;
	z-index: 50;
}
@keyframes grain {
	0%, 100% {
		transform: translate(0, 0)
	}
	10% {
		transform: translate(-5%, -10%)
	}
	20% {
		transform: translate(-15%, 5%)
	}
	30% {
		transform: translate(7%, -25%)
	}
	40% {
		transform: translate(-5%, 25%)
	}
	50% {
		transform: translate(-15%, 10%)
	}
	60% {
		transform: translate(15%, 0%)
	}
	70% {
		transform: translate(0%, 15%)
	}
	80% {
		transform: translate(3%, 35%)
	}
	90% {
		transform: translate(-10%, 10%)
	}



</style>

<style>

.online{content:url(https://i.imgur.com/wqbELIF.gif);
    width: 75px;
    height: 75px;
}
</style>

<style>
footer {
        border-radius: 15px;
background:#00000066; 
</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 10 of 10 comments ( View all | Add Comment )

Akira☆	1696060796 Its not working anymore Report Comment All f his profiles dont work by Akira☆; 1696060955; Report
김산지	1682897245 using!! Report Comment
Astartes	1659351058 The layout is really cool but it has a small issue, the "Interests" section is too small so the text in there overlaps and goes into the next line, creating some ugly gray scroll bars next to it. Report Comment
𝔏𝔞𝔠𝔢 𝔉𝔞𝔠𝔢	1647526518 love this Report Comment
hh_h	1637696221 this is super cool! Report Comment
Hexcaster505	1637035942 Dope! Report Comment
Frozart	1636847089 I like the way this look Report Comment
Paganinjedi	1618908775 Neon Report Comment
Moriah	1618656716 Using this! Report Comment
Froggy Witch	1618656261 Nice Layout 👍 Report Comment