MySpace

Layout Details

This design was inspired by the classic look of a MySpace.com profile from around 2008 to 2010.

It doesn't change too much from the standard layout; it mostly modifies the navigation and contact tables to look and feel just like the original MySpace style.

Original design created by N4TH4N43L_XP.

Code :

Copy and paste to About Me

<style>

:root {
    --gray: #E5E5E5;
    --dark-gray: #333333;
    --logo-blue: #003399;
    --darker-blue: #003399;
    --lighter-blue: #6698CB;
    --even-lighter-blue: #B1D0F0;
    --lightest-blue: #D5E8FB;
    --dark-orange: #FF6600;
    --light-orange: #FFCC99;
    --light-orange-alt: #FF9934;
    --icon-online: url("https://creepyboom.neocities.org/Img/Online/online-(126).gif");
    --icon-mood: url("https://creepyboom.neocities.org/Img/Emoticons/emoticons-(31).gif");
    --url-name: "https://myspace.com/Name-User";
    --info-name: "Name-User is in your extended network";
}

/* Nav */

nav .top .left .logo {
    content: url("https://static.wikia.nocookie.net/logopedia/images/2/20/MySpace_logo.svg");
    filter: invert(100%);
}
nav .links {
    text-align: center;
}
nav .links li:first-child {
    display: none;
}

/* Name */

.profile span[itemprop="name"] h1 {
    padding-bottom: 10px;
}
.profile .edit-link {
    display: none;
}

/* General About / PFP */

.profile .general-about {
    margin-top: -10px;
} 
.profile .general-about .profile-pic img {
    width: 150px;
    height: 150px;
    max-width: 150px;
    max-height: 150px;
    object-fit: cover;
}
.profile .general-about .details {
    height: 180px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
.profile .general-about .details .online {
    content: var(--icon-online);
}
.profile .general-about .details::-webkit-scrollbar {
    display: none;
}

/* Mood */

.profile .mood {
    margin-bottom: 10px;
}
.profile .mood p:first-child::after {
    content: var(--icon-mood);
    margin-left: 5px; 
}

/* Contacto */

.profile .contact {
    margin-top: 10px;
}
.profile .contact .icon {
    display: none;
}
.profile .contact .inner .f-row .f-col a {
    display: inline-block;
    width: 100%;
    line-height: 1;
    margin: 2.50px -7px 2.50px;
    font-size: 0px;
    text-align: center;
}
.profile .contact .inner .f-row .f-col a::before {
    display: block;
}
.profile .contact .inner .f-row .f-col a:has(img[src*="add.png"])::before { 
    content: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/myspace-contact-add.png");
}
.profile .contact .inner .f-row .f-col a:has(img[src*="hourglass.png"])::before { 
    content: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/myspace-contact-requests.png");
}
.profile .contact .inner .f-row .f-col a:has(img[src*="delete.png"])::before { 
    content: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/myspace-contact-remove.png");
}
.profile .contact .inner .f-row .f-col a:has(img[src*="award_star_add.png"])::before { 
    content: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/myspace-contact-favorite.png");
}
.profile .contact .inner .f-row .f-col a:has(img[src*="comment.png"])::before {
    content: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/myspace-contact-message.png");
}
.profile .contact .inner .f-row .f-col a:has(img[src*="arrow_right.png"])::before {
    content: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/myspace-contact-frwrd.png");
}
.profile .contact .inner .f-row .f-col a:has(img[src*="email.png"])::before { 
    content: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/myspace-contact-im.png");
}
.profile .contact .inner .f-row .f-col a:has(img[src*="exclamation.png"])::before {
    content: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/myspace-contact-block.png");
}
.profile .contact .inner .f-row .f-col a:has(img[src*="group_add.png"])::before {
    content: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/myspace-contact-group.png");
}
.profile .contact .inner .f-row .f-col a:has(img[src*="flag_red.png"])::before {
    content: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/myspace-contact-report.png");
}

/* Url Info */

.profile .url-info {
    margin-top: 10px; 
}
.profile .url-info b {
    font-size: 0px;
}
.profile .url-info b::before {
    content: "MySpace URL:";
    font-size: .8rem;
}
.profile .url-info p {
    font-size: 0px;
}
.profile .url-info p:nth-child(2):hover {
    font-size: .8rem;
}
.profile .url-info p:nth-child(2)::before {
    content: var(--url-name);
    font-size: .8rem;
}
.profile .url-info p:nth-child(2):hover::before {
    display: none;
}

/* Info */

.profile .profile-info {
    height: 80px;
}
.profile .profile-info h3 {
    font-size: 0px;
}
.profile .profile-info h3::before{
    content:  var(--info-name);
    font-size: .8rem;
    font-weight: bold;
}

/* Friends */

.profile .friends {
    margin-top: -10px; 
}
.profile .friends .inner .friends-grid {
    text-align: center;
}
.profile .friends .inner .friends-grid .person::after {
    content: var(--icon-online);
    display: block;
}
.profile .friends .inner .friends-grid .person .pfp-fallback {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* Comments */

.profile #comments {
    margin-top: 10px; 
}
.profile #comments .inner .comments-table td:first-child{
    background: var(--light-orange-alt);
}
.profile #comments .inner .comments-table td:first-child::after {
    content: var(--icon-online);
    display: block;
}
.profile #comments .inner .comments-table td:first-child .pfp-fallback {
    width: 100px; 
    height: 100px;
    object-fit: cover;
}
/* Credit */

.credit {
   position: fixed; 
   top: 0; 
   left: 3px;
   width: 3%;
}

/* MOBILES (Max 600px) */

@media (max-width: 600px) {

/* Friends */

.profile .friends .inner .friends-grid .person:nth-child(9) {
        display: none;
    }
    .profile .friends .inner .friends-grid .person:nth-child(9)::after {
        display: none;
    }
    .profile .friends .inner .friends-grid .person:nth-child(9) p {
        display: none;
    }

/* Credit */

.credit {
        display: none;
    }
}

</style>