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 6 of 6 comments ( View all | Add Comment )

Nola	1744377716 using scrollbar! do u know which part gives the background? Report Comment
﹒⌗﹒kagehisa 𖦹 ⸝⸝	1741677532 using!! Report Comment
めい	1738479698 using!! Report Comment me 2 by paulinaliien; 1738521528; Report
alyssa	1737300865 usingg Report Comment
THEcoolestAnomalocaris	1735137485 using!! Report Comment
Kaulitz Freak	1734352998 usinggg:3 Report Comment