Internets Layout

Tags: webcore, brony, my little pony, layout edit
Description:

I have new nails so excuse any typos lol Free to use, layout is basically just an edit of Angel Is Pretty. Odd. 's Windows 98 layout anyways. My layout has a song autoplay feature, reference this tutorial for changing it.
Preview:

click on the image for a larger preview
Code:

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

<style>

a:link {color: #ff0080;}
a:hover {color: blue;}
a:active {color: #ff0080;}

    nav .links a{
        font-size: 10px;
        color: #ff0080;
        padding: 7px;
        font-weight: 500;
    }
    @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
.online { visibility: hidden; } .online img { content: url("http://img1.coolspacetricks.com/images/myspaceicons/092.gif"); animation-name: none; visibility: visible; height: 28px; width: 85px; }     

.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://lifted.crd.co/assets/images/gallery03/9a5959e5.gif?v=540c5116"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; margin: 5px;}

nav .links li:not(:last-child)::after {
content: " = ";
color: #800000;
}
footer .links li:not(:last-child)::after {
content: " (ᵔ.ᵔ) ";
color: #800000;
}

nav .links li .icon{
content: url('https://64.media.tumblr.com/671ab9b5f24352f0cd3ce5ce878e3cbd/5c010c33fe1c9e00-c9/s75x75_c1/4a8dbd0006d3d8841c686fd8478f8c39a634d601.gifv');
width: 20px;
height: 20px;
/*notification icon*/
}
    body {
        background-image: url(https://i.pinimg.com/564x/e1/b2/8f/e1b28f9b1b4133d596cfeda2d73918db.jpg);background-repeat:no-repeat;
  background-size: cover;
        background-attachment: fixed;
        font-family: Libre Franklin;
        font-size: 17px;
    }
    
    /* width */
    ::-webkit-scrollbar {
        width: 20px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
          background: #dcdedf;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #bec7c9;
        border: 2px outset;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b5bdbf;
    }
   
    p {
        color: #000;
        font-weight: 500;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: 12px;
        font-weight: 600;
        color: white;
    }

    :root {
        --darker-blue: #ff0080; /*link color*/
        --lighter-blue: #cfccc2; /*bg of nav bar links*/
        --even-lighter-blue: #cfccc2; /*bg of titles of interest*/
        --lightest-blue: #cfccc2; /*bg of text in interest*/
        --light-orange: ; /*box behind names in comments*/
        --even-lighter-orange: ; /*box of comment text*/
        --green: #000;
    }
    
    nav {
        margin: 10px;
    }
    
     nav .links:before {
        display: block;
        padding-left: 5px;
        padding-bottom: 1px;
        border-bottom-style: groove;
        background-image: url('https://i.ibb.co/gtxqnps/buttons.png'), linear-gradient(to right, #0c1058, #adcbe1); /*this is the xp'buttons' on corner of each box*/
        background-repeat: no-repeat;
        background-position: right;
        font-weight: 600;
        content: "SPACEHEY.COM"; /*this changes title above nav buttons*/
    }
    
    .top {
        color: transparent !important;
        height: 0 !important;
        background-color: transparent !important;
    }
    
    .top .left {
        display: none !important;
    }
    
    .top .center {
        display: none !important;
    }
    
    .search-wrapper{
        display: none !important;
    }
    
    .top .right {
        display: none !important;
    }
    
    .logout-btn{
        display: none !important;
    }
    
    .top a{
        color: transparent !important;
    }
    
    nav .links {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        padding: 0 0 3px 0;
    }
    


time.ago {
color: #f53897;
}

    main {
        background: transparent;
        margin: 10px auto 10px auto;
    }
    
    .col.w-40.left h1{
        border-style: outset outset none outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background-image: url('https://i.ibb.co/gtxqnps/buttons.png'), linear-gradient(to right, #0c1058, #adcbe1); /*xp buttons and color on NAME ONLY*/
        background-repeat: no-repeat;
        background-position: right;
        margin-bottom: 0;
    }
    
    .profile h1 {
        padding-left: 5px;
        font-family: Libre Franklin;
        font-size: 12px;
    }
    
    .col.w-40.left .general-about p{
        margin: 0;
        background: #cfccc2;
        font-weight: 500;
        color: #000;
/*box behind pfp and about blurb*/
    }
    
    .general-about {
        height: 178px;
        border-style: groove outset outset outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #cfccc2;
        margin-top: 0;
        font-family: Times New Roman;
/*entire pfp and blurb box*/
    }
    
    .general-about .profile-pic img {
        margin: 5px;
        height: 200px;
    }

    .general-about .details {
        margin-top: 15px;
    }

    .mood {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #cfccc2;
        margin: 10px auto ;
    }

    .mood:before {
        display: block;
        padding-left: 5px;
        margin: 1px;
        border-bottom-style: groove;
        background-image: url('https://i.ibb.co/gtxqnps/buttons.png'), linear-gradient(to right, #0c1058, #adcbe1); /*xp buttons and color of MOOD section*/
        background-repeat: no-repeat;
        background-position: right;
        font-weight: 600;
        font-size: 12px;
        color: white;
        content: "Status";
    }
    
    .mood p{
        font-family: Times New Roman;
        color: #000;
        padding: 5px 5px 0px 5px;
    }
    
    .profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
        border-bottom-style: groove;
        background-image: url('https://i.ibb.co/gtxqnps/buttons.png'), linear-gradient(to right, #0c1058, #adcbe1); /*xp button and bar of contact and interests*/
        background-repeat: no-repeat;
        background-position: right;
        padding: 0px 6px;
        margin: 1px;
    }
    
    .profile .contact, .profile .url-info, .profile .table-section, .home-actions {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
    }
    
    .contact {
        background: #cfccc2;
    }
    
    .url-info {
        background: #cfccc2;
    }
    
    .url-info p{
        font-family: Times New Roman;
        color: #ff66b3;
    }
    
    .details-table {
        background: #cfccc2;
    }
    
    .table-section {
        background: #cfccc2;
    }
    
    .details-table td {
        border-bottom-style: groove;
        padding: 1px 2px;
    }
    
    .details-table p {
        font-family: Times New Roman;
        color: #000;
/*This is the color of all text in interests*/
    }
    
    .profile-info {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #cfccc2;
    }
    
    .blog-preview {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #cfccc2;
    }
    
    .blog-preview h4 {
        border-bottom-style: groove;
        background-image: url('https://i.ibb.co/gtxqnps/buttons.png'), linear-gradient(to right, #0c1058, #adcbe1); /*bar and xp buttons on BLOG ENTRIES*/
        background-repeat: no-repeat;
        background-position: right;
        padding-left: 5px;
        margin: 1px;
    }
    
    .blog-preview p {
        margin: 5px;
        font-family: Times New Roman;
        color: #000;
        font-weight: 500;
/*text entry titles*/
    }
    
    .blurbs {
        background: #cfccc2;
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
    }
    
    .profile .blurbs .heading {
        border-bottom-style: groove;
  background-image: url('https://i.ibb.co/gtxqnps/buttons.png'), linear-gradient(to right, #0c1058, #adcbe1); /*bar and buttons on BLURBS*/
        background-repeat: no-repeat repeat;
        background-position: right;
        padding: 0 0 0 5px;
    }
    
    .profile .blurbs .section h4 {
        color: #ff0080;
        padding: 0px;
        font-weight: 600;
/*Titles of about me and who id like to meet*/
    }
    
    .profile .blurbs .inner {
        font-family: Times New Roman;
        padding: 2 0;
    }
    

    
    .profile .friends .heading {
        border-bottom-style: groove;
        background-image: url('https://i.ibb.co/gtxqnps/buttons.png'), linear-gradient(to right, #0c1058, #adcbe1); /*bar and buttons on FRIENDS*/
        background-repeat: no-repeat;
        background-position: right;
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
    }
    
    .profile .friends .heading a {
        padding-right: 50px;

    }
    
    div.friends:nth-of-type(3) > div.inner:nth-child(2) > p:first-child > b:first-child {
        font-family: Times New Roman;
        color: #000;
/*x has y many friends text*/
    }
    
    .profile .friends .inner {
        background: #cfccc2;
margin-bottom: 20px;
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
    }
    
    #comments .inner {
        height: 1000px;
        overflow: auto;
    }
    
    #comments > div.inner:nth-child(2) > p:first-child > b:first-child {
        font-family: Times New Roman;
        color: #000;
/*displaying x out of y comments text*/
    }

.comments-table a, .profile .friends .person, .comment-reply b {
    color: #f53897;
}
    
    .comments-table td {
        border-style: none groove groove none;
        border-width: 3px;
        font-family: Times New Roman;
    }
    
.profile .friends .person p {
color: #f53897;
font-size: 10pt;
}

.count {
color: #f53897;
/*friends and comment number*/
}
    

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* Add to Friends */
content: url('https://64.media.tumblr.com/f57468fd0e968dfcdce28974d3f3a4b6/37221ecbab8edd94-14/s75x75_c1/a8e2b28fd8cbad2c10f0b13a2e038d0e6ddca700.gifv');
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url('https://64.media.tumblr.com/177a0bb44c3769c7b3f3ea6e3abe9969/0e19226c8b0b798c-a0/s75x75_c1/256c61598fcfef2f6888a4af68cc292116b12e7c.gifv');

}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url('https://64.media.tumblr.com/1acafd7d91f5f58124d6cd838adfaef9/25a137b408f8c0ce-a9/s75x75_c1/6c47c04a4b60df9d7ecea27b956b924ed6d7cb3c.gifv');
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url('https://64.media.tumblr.com/982bf3e864082081c6dbe44a4f5b388d/fe7a04b4adaffe58-78/s75x75_c1/cded5891f4e23c54a980c090422a8f9ab42fadc1.gifv');
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url('https://64.media.tumblr.com/ebfeed2f7d20d9c1fb0abf7fe4f3d33b/62425725228e2947-c9/s75x75_c1/8849c0c3e371f2c3babd00c5948c782d6d744f78.gifv');
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url('https://64.media.tumblr.com/c66bca9e386f2933428419465b28f99e/bb1fab2416d1fb4e-60/s75x75_c1/ff4e8237ca2a21937642098b4fdb4aed54ee2cf3.gifv');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url('https://64.media.tumblr.com/f90e8dc3f1979e29458fa3704f5f82fb/7be1652755d534ff-74/s75x75_c1/f94ec95d2b193d66c8716d2ee65764a90bdda5fe.gifv');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: url('https://64.media.tumblr.com/0cba2e3ae39afeb9a8ec842417fffe1d/6fe24381b3ab0462-81/s75x75_c1/b2214f1b0a359bc8f7dfe0b2444dcfaf1bff0ae8.gifv');
}

.profile .table-section .heading h4 { 
font-size: 0; 
}

    
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/anime/ani-1/ani45.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2006/04/01/ani45.html" target="_blank" title="Chi from Chobits"><img src="https://cur.cursors-4u.net/cursor.png" alt="Chi from Chobits" style="position:absolute; top: 0px; right: 0px;"/></a>
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 2 of 2 comments ( View all | Add Comment )
deffy :3
1713522889
used n edited, ty :P nice layout!!
Report Comment
thanks! ur version looks kewl ^_^
by Genesis; 1713543499; Report
Genesis
1712495189
i only really uploaded it to access it again but whatever
Report Comment