City Nights

Tags: one-column, japan, rain, pacdude, cory

Description:

This is a one-column theme that has a Japanese Night vibe, complete with rain and muted colors. Optimized for mobile, this theme looks great in Chrome and Safari, and has lots of interesting design choices for a stand-out profile.

Preview:

click on the image for a larger preview

Code:

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

<style>
/* City Nights by Cory Anotado • pacdudegames.com */

/* one column */

@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
main {
	font-family: 'Quicksand', sans-serif;
	border-radius: 20px;
}
nav {
	margin-bottom: 20px;
}
a {
	color: #5B0920;
	text-decoration: none;
	transition: all 1s;
}
a:hover {
	color: #FFFFFF;
	text-decoration: none;
}
.online {
	animation: pulse 2s infinite;
}
.online img {
	display: none;
}
.profile {
	display: flex;
	flex-direction: column;
}
.profile .left {
	width: 100%!important;
	text-align: center;
	perspective-origin: 50% 10%;
	perspective: 300px;
}
.profile-pic {
	float: none!important;
	height: fit-content!important;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
	border: none!important;
}
.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: 'Righteous', cursive;
	text-transform: uppercase;
	font-size: 2em;
}
.profile .blurbs .heading, .profile .friends .heading {
	background: #0008;
	color: #FFF;
}
.copyright {
	margin-bottom: 40px;
}
/* background image */

body {
	/* feel free to change this url with whatever you want; photos are recommended */
	background-image: url(https://images.unsplash.com/photo-1606564180062-8859c39ea47b);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
main {
	background: #FFF1;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
/* round profile image */

.profile-pic img {
	max-width: 300px!important;
	max-height: 300px!important;
	height: 300px!important;
	width: 300px!important;
	border-radius: 100%;
	object-fit: cover;
	border: 15px solid #000;
	filter: drop-shadow(0 0 1em #000)
}
/* neon glow */

.profile h1 {
	font-size: 7em;
	font-family: 'Righteous', cursive;
	text-transform: uppercase;
	filter: drop-shadow(0 8px 0 #000) drop-shadow(0 0 .7em #FFF);
	letter-spacing: -6px;
	-webkit-text-stroke: 3px #27262A;
	-webkit-text-fill-color: #BE8A46;
	transform: scaleX(1.5) scaleY(1.5) scaleZ(1.5) rotateX(14deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
	line-height: .8em;
	margin-top: .3em;
	margin-bottom: -0.3em;
	pointer-events: none;
}
/* details billboards */

.general-about .details {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: -5em;
}
.details p {
	background-color: #5B0920AA;
	color: #A36C37;
	padding: 10px;
	border-radius: 10px;
	font-size: 1.6em;
	filter: drop-shadow(0 0 .7em #000);
}
.details p:nth-child(even) {
	transform: rotate(3deg);
}
.details p:nth-child(odd) {
	transform: rotate(-3deg);
}
/* contact flow */

.contact {
	border-radius: 20px;
	box-sizing: border-box;
	background-color: none;
	border: none!important;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
	padding: .5em 0 .5em .7em;
	font-size: 1em;
	background-color: #0008;
	text-align: left;
}
.profile .contact .inner, .profile .contact .f-row, .profile .contact .f-row .f-col {
	display: flex;
}
.profile .contact .f-row .f-col a {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.3em;
	color: #0005;
	padding: 10px;
	border-radius: 10px;
	transition: all 1s;
}
.profile .contact .f-row .f-col a:hover {
	color: #FFFF;
	transform: scale(1.3);
	text-decoration: none;
	background-color: #0005;
}
.profile .contact .f-row .f-col a img {
	margin-bottom: 3px;
}
/* url box truncate */

.url-info {
	display: flex;
	justify-content: center;
	border: none!important;
}
.url-info p:nth-child(2) {
	margin: 0 .5em;
}
/* mood */

.profile .mood p:nth-child(1) {
	font-size: 2em;
	background-color: #142834CC;
	color: #9D8269;
	border-radius: 10px;
	padding: 20px;
	width: fit-content;
	margin: auto auto;
	filter: drop-shadow(0 0 .7em #000);
}
.profile .mood p:nth-child(2) {
	margin-top: 20px;
}
/* full-width interests */

.profile .left .table-section:nth-last-child(2) .details-table tbody tr td:nth-child(1) {
	display: none;
}
.profile .left .table-section:nth-last-child(2) .details-table tbody tr td:nth-child(2) {
	background: none;
	vertical-align: top;
	color: #FFF;
	border-bottom: 1px solid #fff6;
	text-align: left;
	font-size: 1.2em;
	line-height: 1.2em;
}
/* social media dock */

.profile .left .table-section:last-child .details-table tbody {
	display: flex;
}
.profile .left .table-section:last-child .details-table tbody tr {
	display: flex;
	flex-direction: column;
	flex: 1;
	line-height: 0;
}
.profile .left .table-section:last-child .details-table tbody tr td {
	width: 100%!important;
	text-align: center;
	background: none;
}
.profile .left .table-section:last-child .details-table tbody tr td p a {
	font-size: 0;
	transition: all 1s
}
.profile .left .table-section:last-child .details-table tbody tr td p img {
	font-size: 64px;
	opacity: .4;
	transition: all 1s;
	height: auto;
	margin: 0;
}
.profile .left .table-section:last-child .details-table tbody tr td p a:hover img {
	opacity: 1;
	transform: scale(1.5);
	z-index: 10;
}
/* blog entries */

.blog-preview h4 {
	padding: .2em 0 .2em .3em;
	background-color: #0008;
	text-align: left;
	font-family: 'Righteous', cursive;
	text-transform: uppercase;
	font-size: 2em;
	color: #FFF;
	margin: 0 0 10px 0;
}
.blog-preview p {
	text-align: center;
	color: #FFF;
	font-size: 1.5em;
	width: fit-content;
	margin: auto auto;
	padding: 10px 15px;
	background-color: #513E49AA;
	border-radius: 10px;
	filter: drop-shadow(0 0 1em #000);
}
/* blurbs */

.blurbs .heading {
	background: #0008;
	color: #FFF;
	padding: .3em 0 .3em .6em;
}
.blurbs p {
	font-size: 1.2em;
	line-height: 1.2em;
	color: #FFF;
}
.blurbs .section h4 {
	color: #B0894C!important;
	font-size: 1.4em;
	line-height: 1.4em;
}
/* profile-info */

.profile-info {
	position: fixed;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	width: 100vw;
	border: 0;
	z-index: 20;
	-webkit-backdrop-filter: blur(20px);
}
.profile-info a {
	color: #FFF;
}
/* friends cleanup */

.friends-grid {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: scroll;
}
.profile .friends .person {
	display: flex;
	flex-direction: column-reverse;
	height: fit-content;
	transition: all 1s;
}
.profile .friends .inner {
	text-align: center;
	color: #FFF;
}
.friends-grid .person a p {
	color: #FFF!important;
}
.friends-grid .person a:nth-last-child(1) img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	margin-bottom: 10px!important;
	border-radius: 100%;
	border: 5px solid #000;
	filter: drop-shadow(0 0 1em #000);
	transition: all 1s;
}
.profile .friends .person:hover>a:nth-last-child(1) img {
	transform: scale(1.5);
	margin-bottom: 25px!important;
}
/* comments */

.comments-table {
	display: block;
	height: 300px;
	overflow-y: scroll;
	border: 0;
}
.comments-table tr td:first-child {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	background: none;
	border: none;
	align-items: center;
	text-align: center;
	justify-content: center;
	justify-items: center;
	width: fit-content;
}
.comments-table tr td:first-child img {
	width: 80px!important;
	max-width: 80px!important;
	height: 80px!important;
	object-fit: cover;
	margin-bottom: 10px!important;
	border-radius: 100%;
	border: 5px solid #000;
	filter: drop-shadow(0 0 1em #000);
	transition: all 1s;
}
.comments-table td, .music-table td {
	background: #0008;
	text-align: left;
	border: 0;
	padding: 20px;
}
.comment-replies {
	border: 0;
	border-left: 5px solid #FFF;
	margin-top: 0;
}
/* rain */

html:before {
	animation: grain 8s steps(10) infinite;
	background-image: url(https://i.imgur.com/txtltsX.png);
	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%)
	}
}
@keyframes pulse {
	0% {
		transform: scale(0.95) rotate(-3deg);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}
	70% {
		transform: scale(1) rotate(-3deg);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}
	100% {
		transform: scale(0.95) rotate(-3deg);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}
@media only screen and (max-width: 600px) {
	.profile h1 {
		transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(14deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
	}
	.profile .contact .inner, .profile .contact .f-row, .profile .contact .f-row .f-col {
		flex-wrap: wrap;
	}
}
</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 )

L0v3RR	1636928986 Looks awesome dude!! Report Comment
sauceboi	1636717535 this is too good ! Report Comment
La La	1627943460 I love it dude you did well Report Comment
ヤマンバ	1617820225 this is so unique i love it Report Comment
GodsInTheCogs23 (Marie/Alice)	1612918993 I love this,thank you! Report Comment
Stuart Partee	1612839053 Love it! Report Comment
Yishai	1612203391 Really unique. Definitely using. Report Comment
Rebecca	1611413926 Love it! Report Comment
Anton	1611393769 Looks really cool! Report Comment
Katie	1611378300 I like it. Especially like the main blur part thingy bit it's 5 am my brain has stopped working, you know what mean Report Comment