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 20 of 21 comments ( View all | Add Comment )

˚ ༘♡ ⋆｡˚𝓜𝓮𝓵𝓸𝓭𝔂˚ ༘♡ ⋆｡˚	1711340298 Using! Report Comment
Night Lust	1710219598 Hey, I think the rain's broken :( Report Comment
Duracell/Ippolit	1708958379 hey! is there anyway to not use a photo? if not, how do i make photo files? thanks in advanced! Report Comment
FellowHimbo	1707196989 Using! Report Comment
Lord Byron Silverhand	1704775714 Hello, champ! Report Comment
JUPITER!! <3	1703540366 using! Report Comment
𝚒𝚣𝚊𝚌	1701392282 using Report Comment
assentkent	1693197959 usingg :D Report Comment
𐌷ᕦᥥᒋჄ	1690463331 thanks! love it! Report Comment
kris	1675111201 using :) Report Comment
🦷CHAOS🦷	1668692949 How do you change the color for the "what Im doing " and "About me " that's right under the pfp Report Comment
Rigby	1648616877 You always make the coolest Layouts! Report Comment
♧bub♤	1647016035 luv this! Report Comment
A.!?	1636928986 Looks awesome dude!! Report Comment
sauceboi	1636717535 this is too good ! Report Comment
LaLa	1627943460 I love it dude you did well Report Comment
sophia	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
Nton	1611393769 Looks really cool! Report Comment