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

renae	1701277230 using :3 Report Comment
sisy	1701035016 USINGG Report Comment
mantis	1699899740 might use! Report Comment
the Human Exchange student!!	1697838345 using!! Report Comment
birbs89	1697615470 using! Report Comment
jackpotTyros	1696706789 using! Report Comment
az	1696411354 using:3 Report Comment
R3_3D	1695759233 using !! Report Comment
Carol Edison	1695580699 using! Report Comment
ZeYdA!!!♪	1695261227 Usein! Report Comment
Eva	1694974948 Using! Report Comment
SYDEAD	1694135714 I love this, using <3 Report Comment
Cassie	1694034002 using, dis is so cute Report Comment
GalaxySundae	1692914899 Using! Report Comment
Aurora \| Megatron	1692650749 using. Report Comment
☆Heather☆	1692193707 using Report Comment
fowl	1691960364 using!! Report Comment
DJ Lightshow	1691747868 a lot of the header gifs say 'content not available' Report Comment
Marin	1691263350 How do you add a picture in the interests header? Report Comment
luni	1691126559 using:D Report Comment