Super Mario

Tags: video games, super mario, mario, nintendo, blue, cory, pacdude

Description:

it's a me, a layout! get some 8-bit (and 16-bit) old-school lovin' with this cool Super Mario theme. If you use this theme, leave a comment or even friend me!

Preview:

click on the image for a larger preview

Code:

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

<style>@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&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 {
	--yourBackground: url(https://i.imgur.com/QNgx8dW.jpg);
	--pageTexture: none;
	--nameSticker: url('https://media.giphy.com/media/s1VXy8TpCQIwM/source.gif');
	--blurbSticker: url('https://media.giphy.com/media/SRvCtWJp01tD2/source.gif');
	--commentsSticker: url('https://media.giphy.com/media/cu1nT84hRAGxLwmgNp/source.gif');
	--interestSticker: url('https://media.giphy.com/media/1lvW6oUFaSCLwn2eWx/source.gif');
	--urlInfoBox: url(https://media.giphy.com/media/3dlV58XM1zOruAdw7i/source.gif);
	--titleTexture: url(https://media.giphy.com/media/3o6ozkZ9DdqnbxLinK/source.gif);
	--linkTexture: url(https://media.giphy.com/media/Ab6TWc53LF16/giphy.gif);
	--profileInfo: url(https://media.giphy.com/media/GNvWw0pDL6QRW/source.gif);
}
.profile {
	font-family: 'Space Mono', monospace;
}
.profile .left h1 {
	font-family: 'Press Start 2P', cursive;
}
.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: 'Press Start 2P', cursive;
}
body {
	background-image: var(--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(--pageTexture);
	background-size: cover;
	background-attachment: fixed;
	opacity: .35;
	z-index: 25;
}
.profile a {
	transition: all .1s!important;
}
.profile a:hover, .profile .friends-grid a:hover p {
	background: var(--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(--nameSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(1.7) translateX(-2rem) translateY(-1rem);
	position: absolute;
	z-index: -1;
}
.profile .right .blurbs {
	position: relative;
}
.profile .right .blurbs:after {
	background-image: var(--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(--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(--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: 1rem;
	margin-top:.3rem;
	text-shadow:3px 3px 0 #000;
}
.profile .url-info {
	border: 0;
	color: #FFF;
	background: var(--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(--profileInfo);
	background-size: cover;
	background-position: top;
	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 .friends#comments:after {
	background-image: var(--commentsSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(2);
	position: absolute;
	right: 0;
	z-index: -1;
	margin-right:14vw;
}
</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 15 of 15 comments ( View all | Add Comment )

ZiaXD	1730864343 Using Report Comment
Jasper	1721898352 this is epic am using Report Comment
bjdgirlll	1705383395 will be using yo! Report Comment
Steven Mallon	1702174803 in annoying GBA Mario 2 voice "Just what I needed!" Report Comment
BBG56	1684430245 Using it! Report Comment
HEE HEE	1676765360 using Report Comment
gunner	1674772282 cool (myfriend told me to comment on this butidk what to put) Report Comment
soliell	1674701885 using it Report Comment
mercedes!	1637463503 even my cat thought it was cool Report Comment
Mecca	1636760334 Thank you!!!!! Report Comment
Elizabeth Barry (Ripley)	1636147251 i love this Report Comment
Lawrence	1620187926 Awesomeness Report Comment
Hebe	1616736517 HELL YEAH! Report Comment
Jay Allen	1613067803 Thank you for creating this layout and allowing use. Great throwback. Report Comment
Jason Akers	1613005479 Thanks for the layout. Report Comment