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

☆m1ki☆	1751986792 usinggggg Report Comment
Strang3r	1749393408 using>:D Report Comment
The Ultimate Wifeform	1749389346 This theme is really nice, and i'm especially a fan of the way the name text looks in this. Is there a possible way for the name of my blog and avatar to be the only parts in the center while still having the text large and slanted like that? Report Comment
Vanessa The Vampire o((>ω< ))o	1748334175 using <3 Report Comment
:3	1738590154 usingggg!! Report Comment
˚｡. 📓Angi666ᣟ݂ ✩͏.ଓ	1737508558 Thank's,I'll use it! Report Comment
Bernard / Zamir	1725443153 Using! Report Comment
shay	1723004654 Hermoso‼️ Report 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
Lordking Byron	1704775714 Hello, champ! Report Comment
KYLO!! <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
FYПП⚠FΛDΣDDD	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