Vaporwave

Tags: vaporware, vibes, 90s, pink, pacdude, cory

Description:

feel the vibes with this vaporware theme. looks great in mobile, desktop, safari, chrome, I think you'll enjoy it.

use it? leave a comment or friend me!

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Imbue:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
	--pdg_yourBackground: url(https://media.giphy.com/media/WoR3wMdCAHd2r8y19d/source.gif);
	--pdg_pageTexture: url(https://media.giphy.com/media/xT4ApcUu88wApN5kwE/giphy-downsized.gif);
	--pdg_nameSticker: url('https://media.giphy.com/media/DgHkIp2RZVLfW/giphy.gif');
	--pdg_blurbSticker: url('https://media.giphy.com/media/pZREZQ5wQrogo/giphy.gif');
	--pdg_commentsSticker: url('https://media.giphy.com/media/J2VKLjb8NouIhod6XA/giphy.gif');
	--pdg_interestSticker: url('https://media.giphy.com/media/lnDhCusOvQEeX8oDCr/giphy.gif');
	--pdg_urlInfoBox: url(https://media.giphy.com/media/l0MYBGg0OHFabLZGE/giphy.gif);
	--pdg_titleTexture: url(https://media.giphy.com/media/3ohs868HWFN6Mvz5JK/giphy-downsized.gif);
	--pdg_linkTexture: url(https://media.giphy.com/media/Ab6TWc53LF16/giphy.gif);
	--pdg_profileInfo: url(https://media.giphy.com/media/ijhLl5UuE7yec/giphy.gif);
}
.profile {
	font-family: 'Space Mono', monospace;
}
.profile .left h1 {
	font-family: 'Imbue', serif;
}
.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: 'Imbue', serif;
}
body {
	background-image: var(--pdg_yourBackground);
	background-size: cover;
	background-attachment: fixed;
}
main {
	background-color: #F1B9E377;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	margin-top: 2rem;
	margin-bottom: 2rem;
}
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: #FFF!important;
	text-shadow: 1px 1px 0 #000!important;
	;
}
.profile .left h1 {
	text-transform: uppercase;
	font-size: 3rem;
	color: #FFF;
	text-shadow: 3px 3px 0 #67337C;
}
.profile .left h1:before {
	background-image: var(--pdg_nameSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(1.7);
	position: absolute;
	z-index: -1;
}
.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: center;
	color: #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: uppercase;
	font-size: 1.8rem;
}
.profile .url-info {
	border: 0;
	color: #FFF;
	background: var(--pdg_urlInfoBox);
	background-position: center;
	text-align: center;
}
.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: #4D1469;
	font-size: 1.3rem;
}
.profile-info {
	background: var(--pdg_profileInfo);
	background-size: cover;
	background-position: center;
	box-shadow: -7px 8px 0 #0006;
	color: #FFF;
}
.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(2) translateY(-3.5rem);
	position: absolute;
	right: 0;
	z-index: -1;
}
</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 243 comments ( View all | Add Comment )

Mika_strawberry<3	1731625208 usando!! Report Comment
Ravenfeather	1731277651 Using Report Comment
Astro!! ☆	1729559593 using!! ☆ Report Comment
Joansie	1729245403 Using!! >u< Report Comment
soggy	1728276126 using~ Report Comment
Scy	1728111236 using <^^> Report Comment
WhistleCake	1727240286 I adore this layout looks so beautiful!! Report Comment
K•E•L•L•I	1727135325 Using!! Report Comment
Noah	1726980242 100% using 👍 Report Comment
Eef :D	1725651699 very very pretty! Using it ^^ Report Comment
SeeJay	1725301625 Using Report Comment
Hematite	1724899137 using Report Comment
♥ Charles ♥	1724202087 Using! Report Comment
straysinparadise	1722564401 Using Report Comment
saph	1721934627 using!!! Report Comment
danielcool8927	1721767098 thanks mate! Report Comment
zerhoeee	1719730620 using!!!! Report Comment
Isaactheowl	1719629827 Using Report Comment
RiL	1718868702 using! Report Comment
Wallet/Walt/Wallter/wally	1718781981 Using!! Report Comment