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

Mar	1700650842 Might use:) Report Comment
Yur1!! X3	1700376428 Gnna use! Report Comment
planetunusual	1699802638 probs gonna use Report Comment
char	1699495479 usin Report Comment
Neptunnic	1698025473 might use this! Report Comment
ruby☆	1697958840 going to try using !! Report Comment
ѕℓαυgн7єян0υѕ3༒	1697399326 Gonna use, srry if no creds!! Report Comment
marley (drugs version)	1696879326 using!! :3 Report Comment
taurtis xp	1695840242 using maybz :3 Report Comment
gloom.bearly	1695761294 usiiiing<33 Report Comment
Apostle	1694804718 using :D Report Comment
Teddy 💪	1693804824 Using Report Comment
Teddy 💪	1693804823 Using Report Comment
HeartStopper	1693151729 Using >_< Report Comment
joonslivtzz	1693070091 using!!!!!!!!!!!!!! Report Comment
G0RC4NDY	1692890358 using Report Comment
Von_NeverDuplicated	1692879013 using Report Comment
NiLS	1692743414 gonna be using! Report Comment
Feriz!	1692078177 WOAH!!! Very cool! ^_^ Report Comment