Wario

Tags: video games, nintendo, wario, warioware, mario, super mario, warioworld, world, ware

Description:

An ode to our smelly farty onion-loving friend

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face {
    font-family: 'wariowareincv2medium';
    src: url('https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/wariowareincv2-2oobw-webfont.woff2') format('woff2'),
         url('https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/wariowareincv2-2oobw-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root {
	--yourBackground: url('https://i.ibb.co/VpQ3Fps/1305909.jpg');
	--pageTexture: none;
	--nameSticker: url('https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExc2hlZGplMnlqem9qNGR6eXk2NjBkaWZvaXk5OWs3bG0yeHBqdTNsNCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/bT6ZkH6cD9dwhuzBAf/source.gif');
	--blurbSticker: url('https://media.giphy.com/media/0IdHt3deueIOusgfjr/giphy.gif');
	--commentsSticker: url('https://media.giphy.com/media/d5pewFxlAALjnVSyN3/giphy.gif');
	--interestSticker: url('https://media.giphy.com/media/iVEwM05Mne7jbbqbUH/giphy.gif');
	--urlInfoBox: url('https://media.giphy.com/media/KjTM9mLXZih4A/giphy.gif');
	--titleTexture: url('https://i.ibb.co/wM2Qd9Q/Wario-Ware.png');
	--linkTexture: url('https://media.giphy.com/media/3ohhwLArEXaCwanYI0/giphy.gif');
	--profileInfo: url('https://media.giphy.com/media/Dfk5q64stLdRu/giphy.gif');
}
.profile {
	font-family: 'Space Mono', monospace;
}
.profile .left h1 {
	font-family: 'wariowareincv2medium', 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: 'wariowareincv2medium', cursive;
}
body {
	background-image: var(--yourBackground);
	background-size: cover;
	background-attachment: fixed;
	background-position:left bottom;
}
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: rgb(170, 55, 150) 7px 0px 0px, rgb(170, 55, 150) 6.928693px 0.996602px 0px, rgb(170, 55, 150) 6.716224px 1.9729px 0px, rgb(170, 55, 150) 6.366922px 2.909003px 0px, rgb(170, 55, 150) 5.887905px 3.78584px 0px, rgb(170, 55, 150) 5.288929px 4.585545px 0px, rgb(170, 55, 150) 4.582201px 5.291828px 0px, rgb(170, 55, 150) 3.782116px 5.890297px 0px, rgb(170, 55, 150) 2.904977px 6.368761px 0px, rgb(170, 55, 150) 1.968653px 6.71747px 0px, rgb(170, 55, 150) 0.992221px 6.929322px 0px, rgb(170, 55, 150) -0.004426px 6.999999px 0px, rgb(170, 55, 150) -1.000983px 6.928061px 0px, rgb(170, 55, 150) -1.977146px 6.714975px 0px, rgb(170, 55, 150) -2.913028px 6.365082px 0px, rgb(170, 55, 150) -3.789561px 5.88551px 0px, rgb(170, 55, 150) -4.588888px 5.286029px 0px, rgb(170, 55, 150) -5.294724px 4.578854px 0px, rgb(170, 55, 150) -5.892687px 3.778391px 0px, rgb(170, 55, 150) -6.370596px 2.90095px 0px, rgb(170, 55, 150) -6.718713px 1.964406px 0px, rgb(170, 55, 150) -6.929947px 0.98784px 0px, rgb(170, 55, 150) -6.999994px -0.008851px 0px, rgb(170, 55, 150) -6.927427px -1.005363px 0px, rgb(170, 55, 150) -6.713724px -1.981391px 0px, rgb(170, 55, 150) -6.363239px -2.917052px 0px, rgb(170, 55, 150) -5.883112px -3.793282px 0px, rgb(170, 55, 150) -5.283127px -4.592229px 0px, rgb(170, 55, 150) -4.575505px -5.297617px 0px, rgb(170, 55, 150) -3.774665px -5.895075px 0px, rgb(170, 55, 150) -2.896921px -6.372428px 0px, rgb(170, 55, 150) -1.960158px -6.719954px 0px, rgb(170, 55, 150) -0.983458px -6.930571px 0px, rgb(170, 55, 150) 0.013277px -6.999988px 0px, rgb(170, 55, 150) 1.009742px -6.92679px 0px, rgb(170, 55, 150) 1.985635px -6.71247px 0px, rgb(170, 55, 150) 2.921074px -6.361393px 0px, rgb(170, 55, 150) 3.797px -5.880713px 0px, rgb(170, 55, 150) 4.595569px -5.280222px 0px, rgb(170, 55, 150) 5.300509px -4.572155px 0px, rgb(170, 55, 150) 5.89746px -3.770937px 0px, rgb(170, 55, 150) 6.374259px -2.892892px 0px, rgb(170, 55, 150) 6.721192px -1.955909px 0px, rgb(170, 55, 150) 6.931191px -0.979076px 0px;
	line-height:1em;
}
.profile .left h1:before {
	background-image: var(--nameSticker);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(1.7) translateX(-3rem) 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;
text-shadow: rgb(0, 0, 0) 4px 0px 0px, rgb(0, 0, 0) 3.87565px 0.989616px 0px, rgb(0, 0, 0) 3.51033px 1.917702px 0px, rgb(0, 0, 0) 2.926755px 2.726555px 0px, rgb(0, 0, 0) 2.161209px 3.365884px 0px, rgb(0, 0, 0) 1.261289px 3.795938px 0px, rgb(0, 0, 0) 0.282949px 3.98998px 0px, rgb(0, 0, 0) -0.712984px 3.935944px 0px, rgb(0, 0, 0) -1.664587px 3.63719px 0px, rgb(0, 0, 0) -2.512695px 3.112293px 0px, rgb(0, 0, 0) -3.204574px 2.393888px 0px, rgb(0, 0, 0) -3.69721px 1.526644px 0px, rgb(0, 0, 0) -3.95997px 0.56448px 0px, rgb(0, 0, 0) -3.976519px -0.432781px 0px, rgb(0, 0, 0) -3.745827px -1.403133px 0px, rgb(0, 0, 0) -3.282238px -2.286245px 0px, rgb(0, 0, 0) -2.614574px -3.02721px 0px, rgb(0, 0, 0) -1.78435px -3.579957px 0px, rgb(0, 0, 0) -0.843183px -3.91012px 0px, rgb(0, 0, 0) 0.150409px -3.997171px 0px, rgb(0, 0, 0) 1.134649px -3.835697px 0px, rgb(0, 0, 0) 2.048342px -3.435738px 0px, rgb(0, 0, 0) 2.834679px -2.822161px 0px, rgb(0, 0, 0) 3.44477px -2.033116px 0px, rgb(0, 0, 0) 3.840681px -1.117662px 0px, rgb(0, 0, 0) 3.997798px -0.132717px 0px;
padding:.5em 0;
line-height:1em;
}
.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: center;
	box-shadow: -7px 8px 0 #0006;
	color: #FFF;
	aspect-ratio: 4 / 3;
}
.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:21vw;
}
</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 8 of 8 comments ( View all | Add Comment )

Rietveldd (READ PINNED)	1736646051 how do i use the font seperately? Report Comment
Wario Guy	1710888378 Finally, a template for me.. definitely gonna use this Report Comment
cilica	1710444449 i have a question how do you completely change section's look? like transform their look completely also great layout i love it lol Report Comment
acinonyx	1702282784 You should make a cheetah layout !!! Report Comment
M_D	1701463210 Incredible! Gonna use it :> Report Comment
Operator	1701459312 STRAIGHT FIRE Report Comment