Spacehey 2.0 Matte

Tags: simple, layout, blue, 2000s, layouts, myspace

Description:

Thanks for checking out my layout! This layout is inspired by the original MySpace 2.0 look and feel. Shout-out to Yoshi for their lovely suggestion! I never thought to make something like this, so half the credit goes to them for the idea!

This is incredibly messy because I couldn't be bothered let's be real. I know I call all my layouts messy, but this one is the messiest on God. I made it in like, 30 minutes because I was inspired by the request. Actually, I had Pokemon Colosseum running in the background the whole time. That's how distracted I was during the creation of this layout.

F.A.Q

"Do I have to credit you?"

- No, this layout is free to use, edit, and dissect. If you claim it as yours, then that's something you'll have to deal with. Not me. I do appreciate credit, though!

"Where do I ask you for help with editing/reading the code?"

- You can email me or you can leave a comment here. Please don't add me just to leave a comment on my profile asking for help with CSS; it's just impolite. If you're going to friend me to ask for help, at least be secretive about it and IM me instead of making our convo public.

Preview:

click on the image for a larger preview

Code:

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

<style>

:root {
	--dark-orange: #2c63a2;
}

body {
background: #88b4e3;
}

/* Top Bar Colors */

.top, ul.links {
border-left: 1px solid #1b4282;
border-right: 1px solid #1b4282;
box-shadow: 0px 1px 1px #1b4282;
}

ul.links {
border-bottom: 1px solid #1b4282;
}

nav .top, nav .links, .top ul .links {
	background: linear-gradient(#2456b2, #1b4490);
}

nav .top .left .logo {
	height: 30px;
  	left: -25px;
  	position: relative;
}

nav .links {
	box-shadow: 0px 1px 0px #3565bd inset;
  	margin: 0;
    padding: 0;
  	font-size: 0;
}

nav .links .icon {
	display: none;
}

nav .links li::after {
	display: none;
}

nav .links li {
  	padding: 6px;
	border-right: 1px solid #1b4490;
  	font-family: verdana;
}

nav .links li:hover {
	background: linear-gradient(#1b4490, #2456b2);
}

nav .links a {
       text-shadow: none;
}

nav .links a:hover {
	text-decoration: none;
  	color: white;
  text-shadow: none;
}

nav .links li.active a {
  font-weight: normal;
}

/* Search Bar */
.center label {
	display: none;
}

input#q {
	 border: solid 1px #1e4995;
	 border-radius: 4px;
}

button {
 background: linear-gradient(#fdfdfd, #dcdcdc);
 border: solid 1px #1e4995;
 border-radius: 4px;
 padding: 3px;
 font-family: verdana;
 color: #5570a6;
 font-size: 9px;
}

/* Profile Box */

main {
	background: none;
  font-family: verdana;
  font-size: 11px;
}

main a,  .profile .contact .heading, .profile .table-section .heading, .home-actions .heading, .count {color: #2c63a2;}
main a:hover {color: #2a477e;}

div.row.profile, .profile .contact, .profile .url-info, .profile .table-section, .home-actions {
	background: white;
  	border: 1px solid #c1c1c1;
  	border-radius: 6px;
}

.profile-info {
	background: linear-gradient(#a0b9d6, #819ebe);
  	color: white;
  	border: 1px solid #c1c1c1;
  	border-radius: 6px;
    height: 50px;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
	background: linear-gradient(#f9f9fc, #e3e7ea);
  	border-bottom: 1px solid #c1c1c1;
  	border-radius: 6px 6px 0px 0px;
}

.general-about .profile-pic, .general-about .profile-pic img {max-height: 120px;}

.profile .table-section, .home-actions {
background: linear-gradient(#e9eef2, white);
}

.details-table td {
  	border: 1px solid #c1c1c1;
  	background: white;
  	padding: 2px;
}

.details-table td:first-child {
  	background: #e3e7ea;
  	padding: 1px;
  	color: black;
  	font-size: 10px;
}
/* header settings */

.profile .blurbs .heading, .profile .friends .heading {
	background: linear-gradient(#a0b9d6, #819ebe);
  	color: white;
    padding: 5px;
  	border-radius: 5px 5px 0px 0px;
}

.blurbs .inner, .friends .inner {
  	border-left: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
}

.friends {margin-bottom: 15px;}

/* iMAGESSSS */

.profile img:not(.icon) {
  	border: 1px solid #c1c1c1;
}

/* comments */

.comments-table td:first-child {
	background: linear-gradient(#e9eef2, white);
}
.comments-table td {
	background: white;
  	padding: 5px;
}

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

Саша и Панцер	1733021920 Using Report Comment
соняэщкере98	1731090040 usingg!!! Report Comment
Animation is Key	1730943848 Definitely using this! Thank you! Report Comment
roy !	1728672576 Thank you, using ^_^ Report Comment
Simon Henriksson	1728179400 thank u Report Comment
blkcat	1721284736 using :) Report Comment
MILES	1718401298 Awesome layout!! Using :D Report Comment
Kara_Ww	1716479121 usandolo Report Comment
MetalHeart	1715818286 Really cool omg Report Comment
❋ fancy ❋	1713908825 using lol Report Comment
real Logan paul	1711939148 awesome sauce Report Comment
9907	1710058206 using Report Comment
social4orr	1708357507 using Report Comment
yin	1706649613 using Report Comment
madi	1706344081 using!! Report Comment
𝒌𝒊𝒘𝒊 .ᐟ	1706211858 Using! Report Comment
Lime★Soda	1706013835 using =3 Report Comment
SERAFiM	1702807703 Using :3 Report Comment
cringefail	1702073369 using Report Comment
Otter	1701998987 Usin!! I luv this layout its super casual! <3 Report Comment