Minimalistic Oceanic Layout (Full-Featured)

Tags: ocean, nautical, blue, simple, cute

Description:

CLICK HERE FOR FULL PREVIEW / ALT VERSION

made for my ma, but hopefully others will enjoy too ^__^

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 (nautical-themed by default)
rounded profile img and friend imgs
centered blurbs content
custom scrollbar

CREDITS:

HTML_ - most coding
dangeredwolf - pronoun coding!
sarah - invisible footer coding!
??? - profile preview, would be impossible without this tool
nerdy-pixel-girl, driftwoodbones, & vinsm0ker for pixel art on DA (links embedded in code with images used, thank you for your wonderful artwork)

Preview:

click on the image for a larger preview

Code:

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

<!-- main coding -->
<style>
    body{
        
    background-color: black !important;
    background-image: url('https://i.imgur.com/ETgkNKF.jpg') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
        
    }  
    main {
        background-color: white;
        color: black;
   }
        .count {
        color: #8bc7d0 !important;
   }
        .blurbs .inner{
        text-align: center !important;
   }
    :root {
        --logo-blue: #8bc7d0;
        --darker-blue: black;
        --lighter-blue: #5ab0bd;
        --even-lighter-blue: #8bc7d0;
        --lightest-blue: #fff;
        --dark-orange: #fff;
        --light-orange: #5ab0bd;
        --even-lighter-orange: #5ab0bd;
        --green: #5ab0bd;
   }
   a:hover{
        color: #5ab0bd !important;
   }
    h4 {
        color: white;
   }
    main p {
        color: black;
   }
    .profile .blurbs .section h4 {
        color: black;
   }
    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
   }
   .profile .friends .person img {
        border-radius: 500px;
   }
   .online {
        color: #5ab0bd;
        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;
   }
   .details:after {
    content: "pronouns go here!";
   }
   footer {
        color: white;
        background-color: #8bc7d0;
   }
</style>

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

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

    ::-webkit-scrollbar-thumb {
    background: #5ab0bd;
    }

    ::-webkit-scrollbar-track {
    background: #fff;
    }
</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>

<!-- fancy images -->
<a href="https://www.deviantart.com/nerdy-pixel-girl/art/Bubble-Divider-R-F2U-626381690"><img src="https://i.imgur.com/AvQtXB0.gif"/></a>
<a href="https://www.deviantart.com/driftwoodbones/art/tv-pixel-484710383"><img src="https://i.imgur.com/npv9RrY.png"/></a>
<a href="https://www.deviantart.com/nerdy-pixel-girl/art/Bubble-Divider-L-F2U-626381683"><img src="https://i.imgur.com/XXVFCSZ.gif"/></a>
<a href="https://www.deviantart.com/vinsm0ker/art/F2U-Seashell-Pixel-3-699424630"><img src="https://i.imgur.com/7nBAthl.png"/></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 11 of 11 comments ( View all | Add Comment )

_Zane_XoX_🍉 (PFP iz mii:3)	1778657375 using! Report Comment
samm	1776000719 Using! Ty Report Comment
renee wraith	1770686647 using! Report Comment
𝘑𝘢𝘺𝘺.ᐟ	1762499088 using !!! Report Comment
Elli0tz3ffy	1761802734 using! Report Comment
sunny	1755577144 using but the background doesn't show for some reason Report Comment
Jellyfish	1754881226 using B) tysm this is so epic Report Comment
Nola ⚯ ͛	1744377716 using scrollbar! do u know which part gives the background? Report Comment
alyssa	1737300865 usingg Report Comment
THEcoolestAnomalocaris	1735137485 using!! Report Comment
Kaulitz Freak	1734352998 usinggg:3 Report Comment