Super Minimalistic Oceanic Layout (Hidden Blurbs)

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
hidden "blurbs", "about me", and "who i'd like to meet" titles
custom contact buttons (nautical-themed by default)
centered blurbs content
rounded profile img
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=19133) -->

<!-- main coding (background image and generic colors) -->
<style>
    body{
    background-image: url('https://i.imgur.com/ETgkNKF.jpg') !important;
    background-attachment: FIXED !important;
    background-repeat: 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: 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;
</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 content -->
<style>.comments-table{display:none !important;} 
   .friends-grid{display:none !important;} 
   .blurbs .inner .section:nth-child(1) h4{ font-size:0; }
   .blurbs .inner .section:nth-child(2) h4{ font-size:0; }
   .blog-preview{display:none !important;}
   .blurbs .heading{display:none !important;}
   }
</style>

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

    ::-webkit-scrollbar-thumb {
    background: #8bc7d0;
    }

    ::-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 )

angie .˚◦○🫧˚○•	1731098774 using!! Report Comment
𐀔 salma	1718743743 usinggg! Report Comment
:P	1714427233 using ! ^_^. Report Comment
yui	1690397137 using!! changed a few things since some images don't work anymore ;w; Report Comment
CatCusCat	1684629142 Can't make it work for some reason 3 Report Comment
⋆✩⟶jaceharleyy	1682649621 using!! <3 Report Comment
jeremiah	1678237147 im using this thank you so so so much its perfect Report Comment
jaebaby	1648394961 Thank you Report Comment
Dag	1647454673 Ty for this!! Report Comment
❀ ᗩᑎᑎITᗩGᐯ ^ᴗ^	1645253031 Ty for letting me barrow Report Comment
Naiche	1644383079 I borrowed your layout. I love it because I can read what is on the screen! Thank you for sharing it!! Report Comment you're very welcome!! :) by Bexter (Bec); 1644408939; Report