Minimalistic Retro Layout (Full-Featured)

Tags: cyberpunk, retro, simple, cute, dark

Description:

CLICK HERE FOR FULL PREVIEW / ALT VERSION

^__^

FEATURES:

minimalistic aesthetic
easily customizable if you'd like it to be different
customize ur pronouns, thank you dangered wolf!
invisible but functional footer, thank you sarah!
hidden comments with preserved "add comment" link
preserved "blurbs", "about me", and "who i'd like to meet" titles
custom contact buttons (retro emojis by default)
rounded profile img and friend imgs
rounded corners on profile page
centered blurbs content
custom scrollbar

CREDITS:

HTML_ - most coding
dangeredwolf - pronoun coding!
sarah - invisible footer coding!
??? - profile preview, would be impossible without this tool

Preview:

click on the image for a larger preview

Code:

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

<!-- main coding (background image and generic colors) -->
<style>
    body{
    background-image: url('https://i.imgur.com/omtNkIz.png') !important;
    background-attachment: FIXED !important;
    background-repeat: REPEAT !important;
    }  
    main {
        background-color: black;
        color: white;
    }
        .count {
        color: white !important;
    }
        .blurbs .inner{
        text-align: center !important;
    }
    :root {
        --logo-blue: #121212;
        --darker-blue: white;
        --lighter-blue: #181818;
        --even-lighter-blue: #181818;
        --lightest-blue: #000;
        --dark-orange: #fff;
        --light-orange: #000;
        --even-lighter-orange: #000;
        --green: #fff;
   }
    a:hover{
        color: #fff !important;
    }
    h4 {
        color: white;
    }
    main p {
        color: white;
    }
    .profile .blurbs .section h4 {
        color: white;
    }
</style>

<!-- rounded borders -->
<style>
    .top{
        border-radius: 25px 25px 0 0 !important;
    }
    main{
        border-radius: 0 0 25px 25px !important;
    }
</style>

<!-- rounded profile pic -->
<style>
    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }
    .profile .friends .person img {
        border-radius: 500px;
    }
</style>

<!-- custom online text -->
<style>
    .online {
        color: #242424;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(1.0,0,0,1.0);
        animation-duration: 3s;
    }
    .online img {
        display: none;
    }
</style>

<!-- pronouns -->
<style>
    .details:after {
        content: "pronouns go here!";
    }
</style>    
    
<!-- invisible but functional footer -->
<style>
    footer{background:none !important; line-height:0px !important;}
    footer ul li a {color: #000000 !important;}
    }
</style>

<!-- hidden comments -->
<style>.comments-table{display:none !important;} 
   }
</style>

<!-- custom scrollbar -->
<style>
    ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: #fff;
    }

    ::-webkit-scrollbar-track {
    background: #000;
    }
</style>

<!-- custom contact buttons -->
<style>.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: "🖱️"
   }
   .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
   	/* Add to Favorites */
	content: "💾"
   }
   .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "⌨️"
   }
   .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "🖨️"
   }
   .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "🖥️"
   }
   .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🤖"
   }
   .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "💿"
   }
   .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🕹️"
   }
</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.