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

starrydoll♡	1713618845 using:3 Report Comment
McFlorry	1713451189 Using Report Comment
postcontamination	1712970933 usisnng!! Report Comment
Ladpotch	1712453578 Using ^^ Report Comment
T_suki67	1712066375 using Report Comment
T_suki67	1712066375 using Report Comment
T_suki67	1712066374 using Report Comment
T_suki67	1712066373 using Report Comment
T_suki67	1712066372 using Report Comment
T_suki67	1712066371 using Report Comment
T_suki67	1712066370 using Report Comment
T_suki67	1712066369 using Report Comment
T_suki67	1712066369 using Report Comment
— 𝐋𝐞𝐨	1711857914 Usnado Report Comment
Sappy Lilith	1711041809 Gonna use Report Comment
Noah™	1710993036 using Report Comment
PIKO¡	1709362526 Going to use!! Report Comment
Nicholas !	1708889184 Using ^_^ Report Comment
this is a name	1708648784 i cant wait to try this! Report Comment
Zren	1708306102 I was hoping to use, but for some reason it didn't seem to display properly for me. The Game Boy frame appeared blacked out and what was supposed to be the green-lit background did not appear, resulting in illegible black text on the dark brown wood. I really like the concept though, not sure if I pasted it wrong on my end or what. Report Comment