Game Boy

Tags: retro, game boy, nintendo, green, wood, pacdude, cory

Description:

SpaceHey used Layout! It's Super Effective!

Easy access variables to change the background image and the intro game image. Looks great on desktop on Safari and Chrome, and should look just as great on mobile!

If you use this, leave a comment or even better—friend me!

Preview:

click on the image for a larger preview

Code:

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

<style>@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root{
	--background_image: url('https://images.unsplash.com/photo-1525947088131-b701cd0f6dc3');
	--game_image: url('https://i1.sndcdn.com/artworks-000068646422-riuntq-t500x500.jpg');
}
html, body {
  background-color: white;
}
body {
	background-image: var(--background_image);
	background-size:cover;
	background-position:center;
}
button{
	display: inline-block;
	border: none;
	padding: 1rem;
	margin: 0;
	text-decoration: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: 'Press Start 2P', cursive;
}
a:hover{
	text-decoration:none;
}
.inner .f-col a:hover:before, .mood a:hover:before{
	display:inline-block;
	content: "ᐅ";
	margin-right:5px;
}
main {
	border-style: solid;
	border-width: 200px 180px 696px 170px;
	border-image: url('https://i.imgur.com/ALLjxTA.png') 299 284 1220 fill stretch;
	background: none;
	margin-top: 50px;
	margin-bottom: 50px;
	filter: drop-shadow(0 0 1em #000000);
	transform: rotate(-2deg);
}
.profile {
	padding: 20px;
	overflow-y: scroll;
	display: flex;
	height: 420px;
	border-radius: 10px;
	flex-direction: column;
	position: relative;
	background: url('https://i.imgur.com/9DCsiKm.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	font-family: 'Press Start 2P', cursive;
	box-shadow: inset .5em .5em .5em #0F380F88;
}
.profile .left, .profile .right {
	transform: inherit !important;
	width: 100%!important;
	line-height: 1.3em;
	font-family: 'Press Start 2P', cursive;
	z-index: 2;
	background: none;
	will-change: opacity;
}
.profile > *{
	mix-blend-mode: multiply!important;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}
.left h1 {
	font-size: 2em;
	background-size: cover;
	align-items: center;
	display: flex;
	justify-content: center;
	height: 365px;
	margin-bottom: 30px;
	text-align:center;
	color:#456236;
	position:relative;
	line-height:1em;
}
.left h1:after{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	content: " ";
	height: 100%;
	width: 100%;
	background: var(--game_image);
	z-index: -2;
	opacity: .5;
	background-size: cover;
	background-position:center;
	filter: drop-shadow(5px 5px 0 #0F380F);
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions, .profile-info, .friends-grid .person, .comments-table td:last-child, .table-section:nth-last-child(2) .details-table tr td:last-child,.table-section:nth-last-child(2) .details-table tr td:first-child{
	border:unset;
	margin:unset;
}
.left .general-about, .left .mood p, .left .contact, .left .url-info, .profile-info, .friends-grid .person, .comments-table td:last-child, .table-section:nth-last-child(2) .details-table tr td:last-child,.table-section:nth-last-child(2) .details-table tr td:first-child {
	border: 2px solid #9BBC0F;
	border-radius:5px;
	box-shadow: 0 2px 0 2px #0F380F, inset 0 2px 0 2px #0F380F, 0 0 0 2px #0F380F, inset 0 0 0 2px #0F380F;
	padding:10px;
	margin:10px 0;
}
.table-section:nth-last-child(2) .heading{
	display:none;
}
.table-section:nth-last-child(2) .details-table tr td:first-child{
	background: none;
	display: inline-block;
	width: fit-content!important;
	margin: 0;
	padding: 10px;
	z-index: 2;
	background-color:#CBD5A5;
}
.table-section:nth-last-child(2) .details-table tr td:last-child{
	margin-top: -15px;
	padding-top: 26px;
	height: 100px;
	overflow-y: scroll;
	background: none;
}
.left .general-about{
	display:flex;
	justify-content: space-between;
}
.general-about .profile-pic{
	margin:0;
}
.inner .f-row{
	display:flex;
	flex-direction: column;
	margin:0!important;
}
.details-table tr{
	display:flex;
	flex-direction:column;
}
.details-table td{
	width:100%!important;
}
.profile .friends .person{
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	padding:10px;
}
.comments-table tr{
	display:flex;
	flex-direction:row;
}
.comments-table td:first-child, .comments-table td{
	width:100%;
}
.comments-table td:first-child{
	text-align:left;
	background:none;
	border:none;
}
.comments-table td:last-child{
	height: 230px;
	overflow-y: scroll;
	width: 210%;
	
}
.profile .friends .person p{
	margin-bottom:0;
}
@media only screen and (max-width: 600px) {
	.container {
		padding: 0 40px;
		overflow-x:hidden;
	}
	main {
		font-size: 8px;
		border-width: 60px 70px 260px 60px;
		border-image: url('https://i.imgur.com/ALLjxTA.png') 279 284 1200 fill stretch;
		transform:scale(1.3) rotate(-2deg);
		margin:100px 0;
	}
	.profile {
		height: 175px;
		padding: 5px;
		overflow-x: hidden;
	}
	.left h1{
		height:145px;
	}
	.general-about .profile-pic img{
		max-width:100%;
	}
	.left .general-about{
		flex-direction:column;
		text-align:center;
	}
	.profile .friends .person{
		flex-direction:column-reverse;
	}
	.comments-table tr{
		flex-direction:column;
	}
	.comments-table td:last-child{
		width:100%;
	}
}
.profile .left .table-section:last-child .details-table tbody {display:flex;}
.profile .left .table-section:last-child .details-table tbody tr{display:flex;flex-direction:column;flex:1;line-height:0;}
.profile .left .table-section:last-child .details-table tbody tr td{width:100%!important;text-align:center;background:none;}
.profile .left .table-section:last-child .details-table tbody tr td p a{font-size:0;transition:all .3s}
.profile .left .table-section:last-child .details-table tbody tr td p img{font-size:64px;height:auto;margin:0;}</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 270 comments ( View all | Add Comment )

ilya	1771871930 this is so cooliooo Report Comment
Tomislav Werner Jäger	1770818640 Don't know HOW TO USE BUT IT LOOKS SOOO GOOODDD , so I'm going to use it Report Comment
AryaVexera()	1770478411 one of the coolest layouts ive ever seen wth! Report Comment
Electrik	1770175924 i love this it looks so cool im using xoxo-electrik Report Comment
Mangowiki	1768872979 Looks neat. Report Comment
mokka	1768743322 using! Report Comment
RatM/L1	1768523303 using! Report Comment
sev	1768490451 using Report Comment
Bluebli	1768006313 Using! Thank you so much, it looks amazing. Report Comment
Tayla-ann	1767476503 Trying this out thx!! Report Comment
amaya	1767409563 using Report Comment
erich•~•	1766595654 using:> Report Comment
Eyeless_Ang3l>♡<	1766387458 Using Report Comment
infamous blogger	1765502767 using Report Comment
♥N♥o♥o♥n♥i♥e♥	1765496632 using Report Comment
Xkgdk	1765121378 Using υ´•ﻌ•`υ Report Comment
Fresh EP	1764823034 USING, USANDO.. Report Comment
Ash	1764530804 Usando Report Comment
Evil seal / Eva	1762651643 USING Report Comment
౨᭪˳ 　　riley𓈒 𐦍	1760104351 usingg! Report Comment