Blue Aquatic Themed Layout

Tags: fish, underwater, aquatic, blue, shark, jellyfish, autoplay, animation, cursor

Description:

Includes: autoplaying music, custom blinkie status, custom shark cursor, jellyfish page icons, a shark and jellyfish at the sides etc etc ! Made for Near but free for everyone to use just lmk in the comments! :D

Preview:

click on the image for a larger preview

Code:

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

<img src="https://i.ibb.co/tKJtNLh/O31lZxb.gif"/>


<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/*BODY FONT*/
   body{font-family: 'Orbitron', sans-serif;
   color: white !important;
   font-size: 90%;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Press Start 2P', cursive;
   font-size: 120%;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*TEXT SETTINGS*/
main p{
   letter-spacing: 2px;
   font-weight: 700; 
   line-height: 1.5;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

main{background: none}
/*CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-view/127083.png), auto !important}

/*LINK COLOURS*/
.links, .links a, .logout-btn{
   color: white !important;
   text-shadow: 0px 0px 5px 3px white}

a{color: white !important}
   a:hover{color: yellow !important;
    text-decoration: underline}
   a:visited: color: yellow !important}

.top a{color: #FF0000 !important}
   .top a:hover{color: white !important
    text-decoration: underline}
   .top a:visited{color: white !important}

.links a{color: #5cad58 !important}
   .links a:hover{color: white !important
    text-decoration: underline}
   .links a:visited{color: white !important}

footer .links a{color: white !important}
   footer .links a{color: yellow !important
    text-decoration: underline}
   footer .links a{color: yellow !important}

/*BORDERS*/
.contact, .table-section{
   padding: 2px;
   border-width: 2px; 
   border-radius: 4px;
   border-color: blue !important;
   box-shadow: 0px 0px 5px 3px blue !important;
   margin-bottom: 20px !important;
   background: url(https://i.ibb.co/RNCm0SH/zuuA52V.gif)}

.blurbs, .friends{ 
   padding: 2px;
   border: solid blue 2px;
   border-radius: 4px;
   margin-bottom: 20px;
   box-shadow: 0px 0px 5px 3px blue !important;
   margin-bottom: 20px !important
   background: url(https://i.ibb.co/JFbvDSK/IzFsb7l.gif)}

.comments-table{ 
   padding: 2px;
   border: solid blue 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px blue !important;
   margin-bottom: 20px !important
   background: url(https://i.ibb.co/JFbvDSK/IzFsb7l.gif)}

footer .links{
   background: none !important;
   box-shadow: none !important}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.ibb.co/qd6s7wG/TuVKD1X.gif);  
   background-size: 100%}

/*PROFILE BCKGROUND*/
.profile{
   background: none !important;
   margin-bottom: 5px}

/*HEADER*/
.top{
   background:  none !important;
   margin-bottom: 20px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px blue !important}


/*FOOTER*/
footer {
   height: 150px;
   background-image: url(https://i.ibb.co/6Hc4B4y/142L8qE.gif);
   background-position: centre !important;
   background-size: cover;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px blue !important}

/*NAV BAR*/
.links{ 
   text-align: center;
   background:  !important;
   background: url(https://i.ibb.co/rdm0T2B/26GL4h0.jpg) !important;
   background-size: 50% !important;
   background: no repeat fixed;
   margin-bottom: 20px !important;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px blue !important}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
    content: " ⭒ ";
    color:  white}

/*LOGO*/
.logo {
   filter: invert(38%) sepia(43%) saturate(3307%) hue-rotate(198deg) brightness(101%) 
   contrast(101%);
   !important;
   box-shadow: 0px 0px 7px 5px white}

/*HEADINGS BACKGROUND*/
.profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading, .profile .contact .heading, links{
   background: url(https://i.ibb.co/rdm0T2B/26GL4h0.jpg) !important;
   border: 2px solid white;
   border-radius: 2px}

/*CIRCULAR PFP*/
.profile-pic {
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 7px white}

/*CIRCULAR FRIENDS PFP*/
.friends-grid img{
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 7px white}

/*TRANSPARENT INTERESTS GRID*/
:root{
   --even-lighter-blue: opacity:0.01;
   --lightest-blue: opacity:0.01;

/*FRIENDS-GRID*/
   --light-orange: url(https://i.ibb.co/WsDFw4n/JoVRE3c.gif);
   --even-lighter-orange: url(https://i.ibb.co/9WgQGW6/KnDo2SY.gif)}

/*URL SECTION*/
.profile .url-info{
   padding: 2px;
   background-image:url(https://i.ibb.co/WsDFw4n/JoVRE3c.gif);
   background size: cover !important;
   border: solid blue 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px blue;
   margin-bottom: 20px !important}

/*CONTACT SECTION*/
.contact {
   padding: 2px;
   margin-bottom: 20px !important;
   font-size: 12px;
   border-radius: 5px;
   border-top: 1px}

/*ONLINE*/
.online{content: 
   url(https://i.ibb.co/VQdYpqg/GA5Nm1l.gif);
   width: 200px;
   box-shadow: 0px 0px 7px 5px blue}

/*CONTACT ICONS*/
.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: url(https://i.ibb.co/VjtYM50/MC0JWvO.png)}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* ADD TO FAVOURITE */
content: url(https://i.ibb.co/VjtYM50/MC0JWvO.png)}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/*SEND A MESSAGE */
content: url(https://i.ibb.co/VjtYM50/MC0JWvO.png)}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/*FORWARD TO FRIEND*/
content: url(https://i.ibb.co/VjtYM50/MC0JWvO.png)}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/*INSTANT MESSAGE*/
content: url(https://i.ibb.co/VjtYM50/MC0JWvO.png)}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/*BLOCK USER*/
content: url(https://i.ibb.co/VjtYM50/MC0JWvO.png)}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/*ADD 2 GROUP*/
content: url(https://i.ibb.co/VjtYM50/MC0JWvO.png)}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/*REPORT*/
content: url(https://i.ibb.co/VjtYM50/MC0JWvO.png)}

/*PROFILE LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.ibb.co/VjtYM50/MC0JWvO.png);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}

/*BUTTONS*/
button{
   color: blue;
   background: url(https://i.ibb.co/QDR1WSt/Op6K2ev.gif); 
   border: 2px solid white;
   padding: 2px}
   button:hover {
   color: white;
   background: url(https://i.ibb.co/Fz9ZGhr/NEFj6Uc.png);
   padding: 4px}

/*TOP SEARCH BAR*/
  .search-wrapper input[type=text] {
    background-color: blue !important;
    border: 1px solid white !important;
    border-radius: 10px !important}
 button{
    border-radius: 10px !important;
    border: 1px solid white !important;
    background-color:  blue !important}

/*ANIMATION OVERLAY*/
html:before{ 
   animation: grain 8s steps(10) infinite;
   background-image: url(https://i.ibb.co/5s2Xk1C/Boaz9sY.gif);
   background-size: 100%; 
   content: "";
   height: 200%;
   left: -50%;
   opacity:.5;
   position: fixed;
   top: -100%;
   width: 200%;
   pointer-events:none}

<style>
shark
</style>
<div style="float: ; max-height: 800px; position: fixed; left: 1px; bottom: 10px; z-index: 200;"><img src="https://i.ibb.co/ct6Jmk9/UTcEKwL.png"/></div>

<style>
jellyfish
</style>
<div style="float: ; max-height: 800px; position: fixed; top: 1px; bottom: 10px; right: 1px; z-index: 200; "><img src="https://i.ibb.co/t3QHGzR/JgS2EHM.gif"/></div>

<iframe width="0" height="0" src="https://www.youtube.com/embed/_L8OpYplFNg//?&;amp;;autoplay=1&;loop=infinite&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>

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

Phlox	1737399319 using^^ Report Comment
Big_goldfishcyb3r	1737361492 Using!!!!! Report Comment
Bon Bon :3	1737354394 Using! Report Comment
Ninii	1737258312 Using! Report Comment
gabert	1737134221 using!! thamk youu Report Comment
𐔌 ◜Ink!◞ 𖦹 ୧	1737068675 Us!ng!ദ്ദി ( ᵔ ᗜ ᵔ ) Report Comment
Layla!!	1737035784 Using YAY Report Comment
shamp0o	1736696905 using!! TYSMM Report Comment
Bella	1736652097 using!! Report Comment
yintrashz	1736575547 using Report Comment
Shark	1736562815 Gonna use this, thanks!! Report Comment
beth ꩜	1736430531 using !! so cute ily Report Comment
DreamsDeemsFF7	1736359118 Also using this!!! It's so cool Report Comment
maddie	1736247607 using this Report Comment
Saucebrey	1736040440 Using !!! Report Comment
aeri	1736032167 using !! Report Comment
Oliwia-Chan	1736007759 using!!! Report Comment
kelly	1735778986 using Report Comment
GRIZZ!?	1735466157 using!!! Report Comment
alex (g)	1735352651 using Report Comment