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

NeptunesCuriosity	1773336553 Using! but does anyone know how to get rid of the blue tint? I really do like it but some pictures I have need their colours. Report Comment I found out how too! This is the tint code! body{ background-image: var(--background_image); background-size: contain; background-position: center; background-color: dimaqua; filter: sepia(100%) hue-rotate(144deg) saturate(4.99); } by NeptunesCuriosity; 1773337200; Report
⛧♱⛧◤✞ 𝕬𝖑𝖊𝖝 ✞◥⛧♱	1771772715 using Report Comment
Bones!!!	1771559718 using!!! Report Comment
nezquitz	1770088979 using Report Comment
Aurora 土⛧	1769094861 usingg!! Report Comment
johnthesilly	1768999517 using! Report Comment
Len	1768442181 uzing !! Report Comment
Nichirin	1768313724 Using Report Comment
𝓪𝔂𝓮𝓷𝓰	1767252759 i will use :] Report Comment
˙{L0C4L-M34T-H34D}˙	1766547449 Using! Report Comment
JECK	1765817027 Using. Thanks for your hard work. Report Comment
Luu!!	1765662648 using Report Comment
Eliott The Nudibranch!!! <3	1763922294 i think i'll use this, thank you! :3 Report Comment
Veni★*.	1761510822 Using!! Thank you! Report Comment
orionharper	1760814055 I’m using..ok? Report Comment
JAMES!!	1760533437 using Report Comment
Liz	1759444964 useing! Report Comment
archie	1759280873 using!!!!! Report Comment
Natasha	1758005560 using Report Comment
F1NN ๑•͈ᴗ•͈๑	1757208580 ᥙsіᥒg!!! ^^ Report Comment