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

Ultimate_wildcard	1712366550 Useing! Report Comment
Parker	1712100213 Using! :3 Report Comment
DEVON!!!!	1712000538 using! Report Comment
Atlas	1711623416 Using :p Report Comment
ЯэтѓоЅоциↁЩаvэ	1711319065 are you able to fix the error box thingy happening on like about me, friends and other things? Report Comment
VoidSnails	1710018549 Using :D Report Comment
nicooxxd	1709569510 using Report Comment
Michelle	1708449085 ¡usando! Report Comment
Soph !	1708231861 using!!! :3 Report Comment
Cinthia	1706097060 content not available message on the images behind blurb titles... Report Comment
Karasu	1705843299 Using! Report Comment
miha :p	1705803874 muy muy lindo, creo que lo usaré!! Report Comment
miha :p	1705803868 muy muy lindo, creo que lo usaré!! Report Comment
miha :p	1705803860 muy muy lindo, creo que lo usaré!! Report Comment
miha :p	1705803860 muy muy lindo, creo que lo usaré!! Report Comment
miha :p	1705803856 muy muy lindo, creo que lo usaré!! Report Comment
Moonflower	1705364055 heyyy, i've been trying to get this to work, but i'm getting a content not available message on the images behind blurb titles... you can ss for yourself if ya need to would you be able to help? not sure what might be causing it, is there a file you're not hosting anymore, or that got deleted? Report Comment
naylaxcatt	1705359306 using :))) Report Comment
> Cross	1705336734 Using!! Report Comment
serenya_uwu	1705058086 using %_% Report Comment