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

Sky	1731791736 using !!! Report Comment
rainne	1731421499 im using this THANK YOU SM!! Report Comment
dorimi	1731234319 using! Report Comment
mavis ♱	1730937850 super cool, will be using! Report Comment
TurnpTurnpingTon	1730848590 this is rad, definitely using this! Report Comment
TurnpTurnpingTon	1730848582 this is rad, definitely using this! Report Comment
+Lumi+	1730589302 using!! so cool, great job!! Report Comment
Matty patty	1729904777 Using :-)!! Report Comment
✎leonia	1729876567 usuing Report Comment
Jake?	1729595006 using Report Comment
aliendotjpeg	1729592189 using Report Comment
Linlin	1729105333 Usando:] Report Comment
decaffeinatedgardenerpersona	1728931897 using Report Comment
ARCHANGEL_COLA	1728685485 Usinggg Report Comment
𝓯𝓻𝓮𝓪𝓴𝔂	1728405742 USING!!!!! Report Comment
Jasper	1728092238 using (maybe) Report Comment
:: c42p3r // r3m1 ?!	1727539002 using :33 Report Comment
RAVIRAMBUNCTIOUS..?!	1727398986 using :) Report Comment
Nanamiis	1727195951 using !! Report Comment
Nanamiis	1727195949 using !! Report Comment