Vintage Digital Vibrance by technicALLIty

Tags: 90s, retro, vintage, glitch, rainbow, gif, minimalist, windows 98, old technology, aesthetic

Description:

I crafted this minimalist yet vibrant layout combining elements from Angel Is Pretty. Odd.’s Windows 98 layout and this image. You can find the contact button in this fan.tastic icon library on Tumblr. I designed this SpaceHey layout code to display the most basic information:

About Me
General
Music (for your autoplay code and chosen song information)
Mood and Status
Blog
Contact Icons

Beyond that, this profile layout code hides your friends’ list and profile contacts. Visitors must click “View All” on both blurbs to access these attributes. The effect is a hypnotic virtual experience that inspires digital nostalgia and aesthetic intrigue.

Use the following code to transform your profile and wow friends and visitors with this layout. Do comment or otherwise credit technicALLIty if you use my code contribution. Many thanks and happy coding!

Preview:

click on the image for a larger preview

Code:

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

<style>

    @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');
    
    body {
        font-family: Libre Franklin;
        font-size: 17px;
        background: url(https://i.postimg.cc/ZKv5Hkc2/alli.gif);
    }

}
div.table-section:nth-child(6) &gt; div:nth-child(2) &gt; table:nth-child(1) &gt; tbody:nth-child(1) &gt; tr:nth-child(4),
div.table-section:nth-child(7) &gt; div:nth-child(2) &gt; table:nth-child(1) &gt; tbody:nth-child(1) &gt; tr:nth-child(4) {
    display: none;
}

   .comments-table{display:none !important;}
   .friends-grid{display:none !important;}

.blurbs .inner .section:nth-of-type(2) {
display: none;
}
    
    /* 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: #fff;
    }

    :root {
        --logo-blue: #cfccc2;
        --darker-blue: #0000ff;
        --lighter-blue: #cfccc2;
        --even-lighter-blue: #cfccc2;
        --lightest-blue: #cfccc2;
        --dark-orange: #dc2b31;
        --light-orange: ;
        --even-lighter-orange: ;
        --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.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
        font-weight: 600;
        content: "spacehey - Microsoft Internet Explorer";
    }
    
    .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;
    }
    
    nav .links a{
        font-size: 10px;
        color: #000;
        padding: 7px;
        font-weight: 500;
    }

    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.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        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;
    }
    
    .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;
    }
    
    .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.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
        font-weight: 600;
        font-size: 12px;
        color: #fff;
        content: "Mood";
    }
    
    .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.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        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;
    }

.contact .inner img {
  display: none;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before {
  display: block;
  content: url("https://i.postimg.cc/X7n0ZTP9/cd.png");
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before {
  display: block;
  content: url("https://i.postimg.cc/X7n0ZTP9/cd.png");
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a::before {
  display: block;
  content: url("https://i.postimg.cc/X7n0ZTP9/cd.png");
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a::before {
  display: block;
  content: url("https://i.postimg.cc/X7n0ZTP9/cd.png");
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a::before {
  display: block;
  content: url("https://i.postimg.cc/X7n0ZTP9/cd.png");
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a::before {
  display: block;
  content: url("https://i.postimg.cc/X7n0ZTP9/cd.png");
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a::before {
  display: block;
  content: url("https://i.postimg.cc/X7n0ZTP9/cd.png");
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a::before {
  display: block;
  content: url("https://i.postimg.cc/X7n0ZTP9/cd.png");
}
    
    .url-info {
        background: #cfccc2;
    }
    
    .url-info p{
        font-family: Times New Roman;
        color: #000;
    }
    
    .details-table {
        background: #cfccc2;
    }
    
    .table-section {
        background: #cfccc2;
    }
    
 .details-table td,
.details-table td:first-child {
        border-bottom-style: groove;
        padding: 1px 2px;
    }
    
    .details-table p {
        font-family: Times New Roman;
        color: #000;
}

div.table-section:nth-child(6) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3),
div.table-section:nth-child(7) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) {
    display: none;
}
div.table-section:nth-child(6) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(4),
div.table-section:nth-child(7) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(4) {
    display: none;
}
div.table-section:nth-child(6) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(5),
div.table-section:nth-child(7) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(5) {
    display: none;
}
div.table-section:nth-child(6) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(6),
div.table-section:nth-child(7) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(6) {
    display: none;
}
 
    .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.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        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;
    }
.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.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
        padding: 0 0 0 5px;
    }
    
    .profile .blurbs .section h4 {
        color: #000;
        padding: 0px;
        font-weight: 600;
    }
    
    .profile .blurbs .inner {
        font-family: Times New Roman;
        padding: 2 0;
    }
    
    .friends {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #cfccc2;
        margin-bottom: 20px;
    }
    
    .profile .friends .heading {
        border-bottom-style: groove;
        background-image: url(https://i.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
    }
    
    .profile .friends .heading a {
        padding-right: 50px;
    }
    
    div.friends:nth-of-type(3) &gt; div.inner:nth-child(2) &gt; p:first-child &gt; b:first-child {
        font-family: Times New Roman;
        color: #000;
    }
    
    .profile .friends .inner {
        background: #cfccc2;
    }
    
    #comments &gt; div.inner:nth-child(2) &gt; p:first-child &gt; b:first-child {
        font-family: Times New Roman;
        color: #000;
    }
    
    .comments-table{display:none !important;}
        border-style: none groove groove none;
        border-width: 3px;
        font-family: Times New Roman;
    }
          
    footer {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #cfccc2;
        margin-bottom: 20px;
    }
    
    footer p {
        color: #000;
    }
</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 6 of 6 comments ( View all | Add Comment )

vanessa☆	1709700778 using (╹ڡ╹ ) Report Comment
RamiRocK	1708051701 Using it! Might change the background! <3 Report Comment
Jo	1708041580 using + changing a little bit Report Comment ahhh nvm the background is too flashy i might give myself a seizure on accident by Jo; 1708042177; Report
Awooo	1705936676 UwUsing Report Comment
Subwoofer	1704912961 Amazing Layout. Using. Report Comment
#Moderngirl	1701143444 Using! <3 I've credited you in my bio Report Comment Thank you! Hope you enjoy it. by technicALLIty; 1701407179; Report