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

burntmilkshake72	1738594788 usingg teehee Report Comment
any	1736393679 usando! Report Comment
Sascha >.<	1735260071 Using Report Comment
λ486	1734883946 using Report Comment
elias	1734042476 using Report Comment
🦇◊"LEI"◊🦇	1733774884 using Report Comment
takenrightover	1733703489 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
fancycuh2009	1713908825 using lol Report Comment
real Logan paul	1711939148 awesome sauce Report Comment
marsceelo.s	1710058206 using Report Comment
social4orr	1708357507 using Report Comment