dark blue/a bunch of sea creatures theme

Tags: dark, black, blue, fishes, jellyfish, simple

Description:

thank you to one of my commenters for giving me this idea! i'm not really sure if this is how they're visioning it but atleast i got something done. please comment when using and credit me when using this as a base. i haven't really said the features of my layouts; this includes a uh.. a lot of stuff.

Preview:

click on the image for a larger preview

Code:

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

<style>
    body{
        background-image: url('https://media.tenor.com/yKj5UOUlS1MAAAAC/squid-octopus.gif');
        background-size: cover;
        background-attachment: fixed;
        
    }
    nav .top .left .logo{
        content: url(https://media.discordapp.net/attachments/1064462871947378729/1076184699543765052/Untitled1168_20230218005322.png?width=976&height=218);
        height: 50px;
    }
    
    nav .top{
        border-radius: 20px;
        background: linear-gradient(white ,transparent, white);
        background-image: url('https://featuredcreature.com/wp-content/uploads/2012/11/tumblr_lxwvjoYZok1qm6msjo1_500.gif') ;
        background-position: center;
        filter: saturate(20%);
        border: outset #09288a 5px;
        box-shadow: 0px 0px 15px black;
        margin-bottom: 15px;
    animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
    
}
    
    [id='q']{
        background-color: black;
        background: linear-gradient(white, transparent, white);
        border: none;
        border-radius: 10px;
    }
    FORM > BUTTON{
        border: none;
        background: linear-gradient(white, gray, white);
        border-radius: 10px;
    }
    
    nav .links{
        text-align: center;
        background: linear-gradient(gray, transparent, black);
        margin-bottom: 10px;
        border-radius: 10px;
        border: ridge white;
        border: outset #09288a 5px;
        filter: saturate(20%) brightness(80%);
        box-shadow: 0px 0px 15px black;
        width: 500px;
        margin-left: 150px;
        
        
    }
    main{
        background-color: transparent;
        width: 1000px;
        margin-left: -100px;
    }
    
    main .left{
        background-image: url('https://64.media.tumblr.com/31f65db3d57452c135eb2136e7ce4220/d59f8ad451cc178a-dc/s1280x1920/bbf188154e305bd33d602f1a1189ea94de316d2f.gif'); /* THESE SILLY FELLAS ARE CALLED FLASHLIGHT FISH */
        filter: saturate(60%) brightness(150%);
        border-radius: 15px;
        border: outset #1a2037 5px;
        box-shadow: 0px 0px 15px black;
    }
    .profile .blurbs .inner{
        backdrop-filter: blur(5px);
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        border-bottom: outset #1a2037 5px;
        border-left: outset #1a2037 5px;
        border-right: outset #1a2037 5px;
        box-shadow: 0px 0px 10px white;
        text-align: center;
        
    }
    .profile .blurbs .heading{
        background: linear-gradient(white, transparent, white);
        height: 30px;
        font-size: 15px;
        color: black;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-top: outset #1a2037 5px;
        border-left: outset #1a2037 5px;
        border-right: outset #1a2037 5px;
        text-align: center;
        box-shadow: 0px 0px 10px white;
    }
    .profile .blurbs .section h4{
        color: white;
    }
    DIV.blog-preview{
        background-image: url('https://i.pinimg.com/originals/70/83/c1/7083c1989f674beedd099121965236fc.gif');
        background-position: center;
        filter: saturate(30%) brightness(80%);
        height: 100px;
        width: 400px;
        margin-left: 100px;
        border: ridge 3px gray;
        border-radius: 15px;
        box-shadow: 0px 0px 10px white;
        margin-top: 20px;
        text-align: center;
        color: white;
        
    }
    
    .profile .contact{
        border: none;
        border-radius: 15px;
        box-shadow: 0px 0px 10px #313e69;
        text-align: center;
        
    }
    
    .profile .contact .heading{
        background: linear-gradient(white, transparent, white 150%);
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        text-align: center;
    }
    .icon{
        display: none;
    }
    .profile h1{
        color: white;
        font-size: 30px;
        text-align: center;
        border:outset #1a2037 5px;
        border-radius: 7px;
        background: linear-gradient(gray, transparent, black);
        height: 50px;
        box-shadow: 0px 0px 10px gray;
    }
    
    .profile .url-info{
        background: linear-gradient(gray, #6a6a6a, white);
        border: outset gray;
        border-radius: 20px;
        box-shadow: 0px 0px 10px white;
        
    }
    a{
        color: white;}
     a:hover{
        
    color: #202b4e !important;}
    
    
    
    .profile .table-section{
        border: ridge #0c1333;
        box-shadow: 0px 0px 10px #0c1333;
        border-radius: 15px;
        background-image: url('https://media.tenor.com/dGKM60TuBikAAAAM/fish.gif');
        text-align: center;
    }
    .details-table td{
        background: linear-gradient(gray, black, gray);
        border: ridge gray 2px;
        border-radius: 10px;
    }
    .table-section .inner .details-table tbody tr td {
        background-color: black;
        color: white;
        text-shadow: 0px 0px 10px blue;}
        
        .profile .table-section .heading{
            background-color: black;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }
        
        .general-about .profile-pic img{
            border-radius: 15px;
            box-shadow: 0px 0px 10px #15215a;
            margin-top: 15px;
        }
        
        .profile .mood{
            text-align: center;
            color: black;
            background: linear-gradient(gray, #6a6a6a, white);
            border-radius: 25px;
            margin-top: 20px;
            margin-bottom: 20px;
        box-shadow: 0px 0px 10px white;
        border: outset gray;
            
        }
        
            main .right:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 100px;
  width: 575px;
  background-image: url(https://i.pinimg.com/originals/aa/df/89/aadf89f2956be98e8919f125d5302b77.gif);
  background-repeat: no-repeat;
  background-size: 600px;
  margin-left: 2px;
  border-radius: 15px;
  margin-bottom: 5px;
  background-position: center;
   filter: sepia(100%) hue-rotate(160deg) saturate(100%) brightness(70%) contrast(200%);
   border: ridge #0c1333;
   box-shadow: 0px 0px 10px lightblue;
   

}

          main:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 100px;
  width: 505px;
  background-image: url(https://i.pinimg.com/originals/49/11/82/49118218fc3dd14e1d15a6685cfd0359.gif);
  background-repeat: no-repeat;
  background-size: 600px;
  margin-left: 2px;
  border-radius: 15px;
  margin-bottom: 20px;
  background-position: center;
   filter: sepia(100%) hue-rotate(160deg) saturate(100%) brightness(70%) contrast(200%);
   border: ridge #0c1333;
   box-shadow: 0px 0px 10px lightblue;
   animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }   
    
}
          }
          
                    nav:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 100px;
  width: 715px;
  background-image: url(https://media1.giphy.com/media/2LtirSCxAC0ve/giphy.gif);
  background-repeat: no-repeat;
  background-size: 900px;
  margin-left: 175px;
  border-radius: 15px;
  margin-bottom: 20px;
  background-position: center -250px;
   filter: sepia(100%) hue-rotate(160deg) saturate(100%) brightness(150%) contrast(200%);
   border: ridge #0c1333;
   box-shadow: 0px 0px 10px lightblue;
          }
          
    .profile .friends .inner{
        background-image: url('https://i.pinimg.com/originals/87/e1/42/87e142790043f2595729f6c7a0f15940.gif');
        text-align: center;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        margin-bottom: 20px;
        border-bottom: ridge gray 3px;
        border-left: ridge gray 3px;
        border-right: ridge gray 3px;
         box-shadow: 0px 0px 10px white;
    }
    
    .profile .friends .heading{
        background: linear-gradient(darkblue, black, #15215a);
        height: 30px;
        font-size: 15px;
        color: black;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-top: ridge gray 3px;
        border-left: ridge gray 3px;
        border-right: ridge gray 3px;
        text-align: center;
        box-shadow: 0px 0px 10px white;
        color: white;
        text-shadow: 0px 0px 10px blue;
    }
    .count{
        color: white;
    }
    .profile .friends .person p{
        display: none;
    }
    
    footer{
        background-color: transparent;
    }
    
   html:after {
  background-image: url(https://i.pinimg.com/originals/fa/08/fe/fa08fe27fe040b3603ecd3ab0ac7f092.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.1;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
  filter: brightness(40%) contrast(120%);
}
        .profile .friends .person img:not(.icon){
            border-radius: 15px;
            border: gray 3px ridge;
            box-shadow: 0px 0px 10px white;
            filter: sepia(100%) hue-rotate(160deg) saturate(100%) brightness(70%) contrast(200%);
              
              animation-name: floating;
              
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  
  
}


 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }   
    
}
          }
        }
    
</style>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Nova+Round&display=swap');
a{
    font-family: 'Nova Round', cursive;
    color: white;}

p{
  font-family: 'Nova Round', cursive;
  color: white;
}
h1,h2,h3,h4,h5{
  font-family: 'Nova Round', cursive;
  color: white;
  text-shadow: 0px 0px 15px white;}
  
  a{
        
    color: white;
  
  
    
</style>

<style>
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;
width: 560px;
background-color: transparent;
border: none;

}

.comments-table td{
    background-color: transparent;
    border: none;
}

.comments-table td *{
    border-radius: 15px;
    filter: sepia(100%) hue-rotate(160deg) saturate(80%) brightness(100%) contrast(140%);
}

 :root {
    --light-orange: ;
</style>

<style>
    .profile{
          animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, 0px); }   
    
}
    
    
</style>

<style>
       img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
        
    }
    
    
</style>

<style>
.links .special a:link, .links .special a:visited  {
  color: white;
}

.links .special a:hover {
  color: #202b4e;
}
</style>

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

    ::-webkit-scrollbar-thumb {
    background: #202b4e;
    border: inset #202b4e;
    }

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

<style>* /* OMG!!! TUNA ACCOUNT REFERENCE?! */ {cursor: url(https://cur.cursors-4u.net/nature/nat-7/nat657.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/04/26/tuna-fish.html" target="_blank" title="Tuna Fish"><img src="https://cur.cursors-4u.net/cursor.png" alt="Tuna Fish" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
.online{

content: url("https://cur.glitter-graphics.net/pub/3368/3368749kwwcprwx6l.gif") !important;
filter: sepia(100%) hue-rotate(160deg) saturate(80%) brightness(100%) contrast(140%);

}
</style>

<style>
    .profile .profile-info {
	background-image: url(https://media0.giphy.com/media/lFNmSjRDN9SiLJ3a9Z/200w.gif?cid=6c09b952tde8flotrgd4kmf43wnm0dn2508cf9yys9f8evhj&rid=200w.gif&ct=g);
	border: ridge;
        border-color: gray;
        border-width: 3px;
	border-radius: 15px;
	text-align: center;
	box-shadow: 0px 1px 10px white;
	margin-top: 10px;
	margin-bottom: 10px;
    
</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.

Comments

Displaying 20 of 83 comments ( View all | Add Comment )

Gabe ✩	1715393850 Using !! Report Comment
Michah? — :PPP	1714968686 Using Report Comment
Fahy4a	1714652392 Usingggg <3333 Report Comment
alele_nao♪	1714325752 using! Report Comment
sasha	1713960797 using ! Report Comment
Flu	1713091624 Using :3 Report Comment
°Ber	1711233997 using Report Comment
Lyka !	1708705964 Usando! Report Comment
Skully	1707174013 Using! Report Comment
Kieran	1706677990 using AA! <3 <3 Report Comment
chocotorta	1706645383 usando :3 Report Comment
@ Shinn ¿?	1705903820 Usando! Report Comment
@ Shinn ¿?	1705903820 Usando! Report Comment
dioptric	1705867479 Usando<3 Report Comment
Mary	1705855958 using! Report Comment
𝓩𝓮𝓵𝓽𝓱𝓮𝓻	1705729470 using Report Comment
yæezxz	1705538276 usando Report Comment
nukittx	1705501761 how do i use this layout? Report Comment
J3m0ss▄︻┻═┳一	1705495266 using Report Comment
scarlet00 (inactive)	1705466075 usinggg!! Report Comment