MySpace layout

Tags: myspace, retro, 2000s

Description:

this will make your profile look like a myspace profile page

Preview:

click on the image for a larger preview

Code:

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

<style>

.logo {
content:url("https://raw.githubusercontent.com/PasteLuengas/Gallery/main/SpaceHey!/logo.png");
}
</style>


<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: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>
</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.