Ocean Blue Layout!!! (Gifs on my profile are NOT in the code)

Tags: blue, gif, ocean, fish, layout, dark, black, cute

Description:

tell me if you have theres any problems......hope you like this this took me a long time.....Works on moblie!!!...... can you pls comment if using!!<3

Preview:

click on the image for a larger preview

Code:

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

<style>
          /*==========â ï¸==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com or https://www.cursors-4u.com
============â ï¸==========*/
* { 
    cursor: url('http://www.rw-designer.com/cursor-view/7129.png'), auto; 
}
a:hover {
    cursor: url(http://www.rw-designer.com/cursor-view/7142.png), auto;
}
/* this is where the colors are rooted */

:root{
    --headers: whitesmoke;
    --text: whitesmoke; 
    --names: whitesmoke;
    --links: aqua;
    --background_image: url('https://i.pinimg.com/736x/05/fe/90/05fe903f45e23d25517d5999d0929dee.jpg');
    --font-family: "Courier New", cursive;
    --curve: 0px;
    --borders: 2px solid aqua;
}
https://wallpapercave.com/wp/wp2686927.jpg
/* this is where the colors for specific things are located */

h3, h4, h5{color: var(--headers)!important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
p, h2, .count {color: var(--text);} /* color of text */
.friends a p{color: var(--names);} /* color of names, and friends counter */
nav label{color: var(--links);} /* color of search */
.section h4 {color: var(--headers);} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title */
.details p:last-child{color: var(--text);} /* where the last login and status appears */

/* this is where your background image ends up being styled */

body{
    background-image: var(--background_image);
    background-size: contain;
    background-position: center;
    background-color: dimaqua;
    filter: sepia(100%) hue-rotate(144deg) saturate(4.99);
}
/* this is where your name appears */
h1{
    color: white;
    font-family: var(--font-family);
    font-size:30px !important;
    font-weight: 1;
    border: var(--borders);
    background-color: black;
    padding:5px;
    text-align: center;
}

/* the navigation is adjusted here */
nav{
    background-color: black;
    border: var(--borders);
    border-radius: var(--curve);
    text-align: center;
}

nav .top, nav .links {
    background-color: transparent;
    border-radius: var(--curve);
}
nav .links a{
    text-shadow:none;
}

/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

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

nav img.logo{
    filter: brightness(0) saturate(100%) invert(50%) sepia(5%) saturate(326%) hue-rotate(174deg) brightness(92%) contrast(82%) !important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 2px solid var(--links) !important;
    color:var(--links) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 0px solid var(--links) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--links) !important;
}

/* the online symbol and text */

.online{
    color: var(--links) !important;
    text-transform: lowercase;
    text-align: right;
} 
.online img{
    filter: brightness(0) saturate(100%) invert(50%) sepia(5%) saturate(326%) hue-rotate(174deg) brightness(92%) contrast(82%); !important;
}

/* font family for the headers, navigtion links, links, body text */

a, p, b, nav label, .section{ 
    font-family: var(--font-family);	
    font-size: 12px;
    font-weight: 1;
    text-shadow: 0px 0px 0px black;
}
h2, h3, h4, h5{
    font-family: var(--font-family);
    font-size: 16px;
    text-align: center;
    font-weight: 1;
    text-shadow: 0px 0px 0px black;
}

/* the hr code.
the hr is the horizontal line when you want to 
separate important info or add a break in your paragraphs*/

hr{
    height:2px;
    background: darkblue;
    border: none;
}

/* this is where you adjust the borders and background */
.blurbs, .mood, .friends, .contact, .profile .table, .blog-preview, .profile .table-section{
    border-radius: var(--curve);
    border: var(--borders)!important;
    background-color: black!important;
}
.comment-replies{border:4px groove gray;} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 2px solid var(--links);} /* line in between comment replies*/

/* your interest and comments table row background color */
td{
    background-color: transparent!important;
}

/* the middle section of your profile background color*/
main{
    background: transparent;
    border-radius: var(--curve);
    border: transparent;
    outline: none;
}

/* the interest table */
.table-section{
    border:none !important;
    border-radius: var(--curve) !important;
}

/* the header section of the boxes */
.heading{
    background: none !important;
}
/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */

.profile-info {
    background-image:url("https://i.pinimg.com/564x/00/7f/0d/007f0d94f57628551ad0d42cfd7400ef.jpg") !important;
    border: var(--borders) !important;
    border-radius: var(--curve) !important;
}

/* adjusting images borders and adding styling if you want to */
.profile-pic{
    padding: 10px;
}
/* you can add text-align:center; if you want your friends to be centered */
.friends-grid{
    text-align: center;
}

/* margin and padding */

h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */
.contact .heading, .profile .table-section .heading, .blog-preview .heading, .profile .friends .heading, .mood{padding: 5px!important;text-align: center;}
.mood, .friends{margin-bottom: 10px;}

.url-info{display: none;}
.general-about .details{
    background: black;
    border: var(--borders);
    padding-bottom: 70px;
    margin-bottom: 10px;
}
.contact{
    padding: 5px
}
.contact .f-col{
    padding: 0px 0px 7px;
}
.f-row{
    margin:0px!important;
}
/* this is the comments table scroll code. 
you can delete this if you don't want a scroll box */

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    outline: none !important;
    border-radius: 3px;
    border-spacing: 6px;
    border: transparent;
}
.comments-table td{
    border: 2px solid darkblue;
}

footer{
    background: black;
    border: var(--borders);
    padding:10px;
    margin-top: 10px;
}
/* .details-table td:first-child{display:none;}  this hides the movies,books,heroes titles*/
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    border: 1px solid black;
}
::-webkit-scrollbar-thumb {
    background: white; 
    border-radius: var(--curve);
}
::-webkit-scrollbar-thumb:hover {
    background: black;  
}
main:before {
	width: 100%;
	height: 200px ;
	display: block;
	content: ""; 
	background-image: url('https://i.pinimg.com/originals/ab/c3/e4/abc3e456ce6c760fa77fca18650cadbe.gif');
	background-position: top;
	background-size: cover;
}
@media only screen and (max-width: 500px) {
	main:before{
		height: 200px;
	}

<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 9px; z-index: 200;">
<img src="https://media1.giphy.com/media/Zef7OaZeJh6QtK5GKh/giphy.gif" width="300" height="300"/>



<style>
.general-about img {-webkit-mask-image: url(https://i.postimg.cc/MK4VPkGn/2024-01-28-0jv-Kleki.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>

<style>
.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/MK4VPkGn/2024-01-28-0jv-Kleki.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>
<style>

.comments-table td:first-child img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/MK4VPkGn/2024-01-28-0jv-Kleki.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>

<style>
body{background:url("https://i.pinimg.com/564x/5e/94/13/5e941398755a851fbff67068ecad9b17.jpg") no-repeat fixed; background-size:cover;}
</style>




<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://media.tenor.com/Ewb3gsajZHgAAAAC/jellyfish-bluish.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</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 103 comments ( View all | Add Comment )

spacedeep	1739313729 I using Report Comment
Simon ⚡	1739201555 Using! Report Comment
Ig✰holic	1739077098 Using! <3 Report Comment
Ted :3	1739028681 Using 👅👅👅 Report Comment
Harley 🌊	1738622706 usingg !! <33 Report Comment
⋆˚🐾foxy︎︎. ݁₊	1738388606 using Report Comment
Edit	1737851221 Using :j Report Comment
Our Fave Sharky	1736422243 This is so me fr fr Report Comment
Theooo	1736130122 Using!!! Report Comment
Lady.quakkerrrrs	1733608936 Using!! Report Comment
A ⭑.ᐟ	1733182289 Using ty sm!! >< Report Comment
★·.·´¯`·.·★ m4gn4p1nn4 ★·.·´¯`·.·★	1732995535 Using Report Comment
✧˖°. Ban Hammer,, ✧˖°.	1732401501 using Report Comment
Cruel King~! 🧊👑 ✩⏤͟͟͞͞✝︎˚	1732229199 USINGGGJSHD Report Comment
ﮩ٨ـﮩﮩ٨ـD1csh4r3ﮩ٨ـﮩﮩ٨ــ	1731101755 Using! Report Comment
garfield	1730720869 Using!:D Report Comment
kris / astro / shadow milk / folly	1729652396 I would use but is there a way to remove the blue tint on the profile pic, friends pfps, and the stickies/stickers/stamps/(or whatever they are called)? I have been struggling with this for like 5 mins trying to figure out how to make it go away Report Comment
HoshITZuki	1729556053 Using!! Report Comment
miles	1729487785 Using Report Comment
Bryson	1729383736 USINGGGG !!!!!!!!!!!!!! IVE BEEN LOOKING SO HARD FOR THIS Report Comment