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

Gx's Treehouse	1721151577 Using!!! Report Comment
хорошо	1720575852 Using Report Comment
spookie	1720403035 using!! ★★ Report Comment
Lake	1719372835 using! :D Report Comment
Adrian	1718808571 Usando! ^^ Report Comment
melrxse	1718331110 using Report Comment
Eye Bleed	1717790576 It's so cool! definitely using Report Comment
trash_can_2009	1717470526 USEINNFF🗣️🗣️ Report Comment
gx_101	1717409011 usinggg!! Report Comment
animatic (luna)	1716861275 uim usinh this Report Comment
cher ^o^	1714931526 its not working for me :( Report Comment
lostsilver	1714689281 USiNG . PERFECT FOR MY SOURCE <3 Report Comment
KrissssssXD	1713897694 usinggg <33 :3 Report Comment
starrydoll♡	1713618845 using:3 Report Comment
McFlorry	1713451189 Using Report Comment
cheriecodedd	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