AQUATIC LAYOUT!!

Tags: water, aquatic, ocean, sea, shark, fish, cute, blue, orange
Description:

messy code ummm sorry T_T please comment when u use and also please credit me somehow :P
Preview:

click on the image for a larger preview
Code:

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

<style>
/* As you can see, I began adding a section system but that did not last long, I was too lazy to complete it. This is the first layout I have published and the second layout I've ever made, so apologies if the code is messy as hell. Please somehow link the credits back to me. */

/* S. 1 : FONTS */

/* S. 1.1 : FONT IMPORT */

/* IMPORTS VARELA ROUND FONT */

  @import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

/* S. 2 : CUSTOM CURSOR */

/* CUSTOM CURSOR */

a:hover{
 cursor: url('https://cur.cursors-4u.net/nature/nat-8/nat710.cur'), auto;
}
body {
 cursor: url('https://cur.cursors-4u.net/nature/nat-8/nat710.cur'), auto;
}

/* S. 3 : NAME */

/* ROTATES NAME + ADDS VARELA ROUND FONT + CHANGES COLOR OF FONT */

.profile h1{

font-size: 50px;

font-family: 'Varela Round', sans-serif;;

font-weight: 100;

background: #3380e2;

-webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

transform: rotate(-10deg) !important;

}

/* makes nav links background see through but still functional */

nav{background-color:var(--box_color_and_seethru); !important;border-radius: 0px 0px var(--curve) var(--curve); !important; font-family: 'Varela Round', sans-serif;}
nav ul{background:none !important; font-family: 'Varela Round', sans-serif;}
nav img{filter: opacity(90%) !important;}
nav ul a img, .mood a img{display:none !important; font-family: 'Varela Round', sans-serif;}
.top{background:none !important;background-color:rgba(0, 0, 0, 0.8); !important; font-family: 'Varela Round', sans-serif;}

/* custom online icon */

.online{content:url("https://th.bing.com/th/id/R.0cbefd99ef494c036e7909933f45f769?rik=96R3jblgL51cHg&riu=http%3a%2f%2fwww.animatedimages.org%2fdata%2fmedia%2f516%2fanimated-shark-image-0051.gif&ehk=4A79k0d55wWPVTuBGJ6RfRKJoGPKRtr9%2bT33PRgWmnk%3d&risl=&pid=ImgRaw&r=0");}

/* custom contact box 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://www.simpleimageresizer.com/_uploads/photos/32ebeb36/R_4_2_20x20.png)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content:url(https://www.simpleimageresizer.com/_uploads/photos/32ebeb36/R_5_20x20.png)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content:url(https://www.simpleimageresizer.com/_uploads/photos/32ebeb36/goldfish_PNG12_20x20.png)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content:url(https://www.simpleimageresizer.com/_uploads/photos/32ebeb36/5af8395a6554160a79bea0b6_20x20.png)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content:url(https://www.simpleimageresizer.com/_uploads/photos/32ebeb36/Jellyfish-PNG-Free-Download_20x20.png)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content:url(https://www.simpleimageresizer.com/_uploads/photos/32ebeb36/NicePng_crab-png_163077_20x20.png)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content:url(https://www.simpleimageresizer.com/_uploads/photos/32ebeb36/octopus_PNG1_1_20x20.png)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content:url(https://www.simpleimageresizer.com/_uploads/photos/32ebeb36/kisspng-ocellaris-clownfish-coral-reef-sea-anemone-watercolor-birds-5abe90258bb357.4997221615224381815722_20x20.png)
}

/* makes ur pfp float */

.general-about .profile-pic img{

animation: float 3s ease-in-out infinite;

}

@keyframes float {

0% {

transform: translatey(0px);

}

50% {

transform: translatey(-10px);

}

100% {

transform: translatey(0px);

}

}

/* makes profile background transparent */

main {
    background: transparent;
}

body { 
background: url(https://th.bing.com/th/id/R.00bf75f55ef39b68ab7c5eaaa8606f4f?rik=p8y3kC%2bK0wv5ww&riu=http%3a%2f%2fgifimage.net%2fwp-content%2fuploads%2f2017%2f09%2fanime-ocean-gif.gif&ehk=PoVkq8J2vEDRPJsBE%2bOOn7xCT%2fTFBX%2bje3l4vPaM%2bjI%3d&risl=&pid=ImgRaw&r=0);
background-size: cover;

background-repeat: no repeat fixed;
}

/* makes footer background-less but functional */

footer {background:none !important; line-height:0px !important; font-family: 'Varela Round', sans-serif;}
footer ul li a {color: #ffffff !important; font-family: 'Varela Round', sans-serif;}

/* makes ur pfp circular */

.profile-pic{

   border-radius: 500px;

   overflow: hidden;}

/* circular friends pfp */

.friends-grid img{

   border-radius: 500px;

   overflow: hidden;}

/* adds background image to friends */

.friends:not(#comments) {
    margin-bottom: 10px;
    background-image: url(https://th.bing.com/th/id/R.a53fc9d178371464ea518e6f866b9121?rik=9Z1DMR7rbbQcZw&pid=ImgRaw&r=0);
    background-repeat: repeat-x;
    background-position: bottom;
    padding-bottom: 100px;
}

/* edits headings */

.profile .blurbs .heading, .profile .friends .heading {
    background: #3380e2;
    color: #bbecfa;
    padding: 2px 7px;
    border: 3px;
    border-radius: 10px 10px 0px 0px;
}

/* puts that border on the top of the page right under the nav links */

main {
    border-radius: 20px;
    border-image: url(https://steamuserimages-a.akamaihd.net/ugc/2024979706646359168/8422097DCE22F84C1AAB97C90A153F7CAF49A6F5/) 9% 20% repeat;
    border-top: 40px solid transparent;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    margin: -1px;
}

/* hides about me + who id like to meet headings */

.profile .blurbs .section h4 {
    margin: 0;
    color: transparent;
}

/* adds background image to mood box */

.mood {
    margin-bottom: 10px;
    font-family: 'Varela Round', sans-serif;
    background-image: url(https://www.pinclipart.com/picdir/big/526-5260194_coral-reef-transparent-background-clipart.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    padding: 5px;
}

/* edit contact border */

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: #3380e2;
    color: #bbecfa;
    padding: 2px 7px;
    border: 3px;
    border-radius: 15px;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 2px solid #3380e2;
    border-radius: 15px;
    margin: 10px 0;
    background: rgba(51, 128, 226, 0.3)
}

/* puts that background behind ur pfp and online symbol */

div.general-about {
    background-image: url(https://th.bing.com/th/id/OIP.rzerMlF5_b0EitXEipiYEAHaE7?pid=ImgDet&rs=1);
    border: 1px;
    border-radius: 100px;
}

/* profile info thingy */

.profile-info {
    border: 2px solid rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 1px;
    margin-bottom: 1px;
}

/* blurb backgrounds */

h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    background: rgba(51, 128, 226, 0.4);
    padding: 10px;
    border: 3px;
    border-radius: 30px;
}

button, input, optgroup, select, textarea {
    font-family: 'Varela Round', sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/* edits blurb heading fonts */

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .setting-section .heading h4, .statistics .heading h4 {
    margin: 0;
    display: inline-block;
    font-family: 'Varela Round', sans-serif;
}

/* edits friends links */

.profile .friends .person p {
    color: #bbecfa;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
    font-family: 'Varela Round', sans-serif;
}

/* edits friend count style, no more red! */

.count {
    color: #bbecfa;
    font-family: 'Varela Round', sans-serif;
}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
    font-family: 'Varela Round', sans-serif;
    margin: 0 0 8px 0;
    color: #3380e2;
}

h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    background: rgba(51, 128, 226, 0.4);
    padding: 10px;
    border: 3px;
    border-radius: 30px;
    font-family: 'Varela Round', sans-serif;
    color: #bbecfa
}

/* adds background to comments */

.comments-table td, .music-table td {
    background: url(https://th.bing.com/th/id/R.fefb80323bf8c82aeb36474921cb0f68?rik=Yx95RtMLf09K4g&riu=http%3a%2f%2fsites.psu.edu%2fsiowfa15%2fwp-content%2fuploads%2fsites%2f29639%2f2015%2f12%2f98178bbd-cda2-47d6-b1e2-8a02604964a0_6.jpg&ehk=WB%2b7vskOCqp6xw2BiP2%2fABPnu2SQxeo704p1GOBSxpQ%3d&risl=1&pid=ImgRaw&r=0);
    vertical-align: top;
    color: #bbecfa;
    border: 2px solid white;
    border-radius: 30px;
    padding: 20px;
}

.comments-table td:first-child, .music-table td:first-child {
    background: url(https://2.bp.blogspot.com/-nkZGF8KljLg/V3W7kb5dXNI/AAAAAAAA59Y/vbVVcn4bbes6UmP1gF2HnWFCdtM_JG6mQCLcB/s1600/Coral-reef-14.jpg);
    text-align: center;
    font-weight: bold;
    color: #bbecfa;
    width: 38%;
    padding: 20px;
    border: 2px solid white;
    border-radius: 100%;
}

/* makes pfp in comments round */

.comments-table td:first-child img:not(.icon) {
    width: 90px;
    border: 3px solid white;
    border-radius:500px;
    max-width: 100%;
    max-height: 200px;
}

/* makes friends usernames in comments easier to see */
.profile .friends p {
    font-family: 'Varela Round', sans-serif;
    margin: 0 0 8px 0;
    color: #bbecfa;
}

/* edits delete/add reply button */

button, input, optgroup, select, textarea {
    font-family: 'Varela Round', sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    background: #3380e2;
    color: #bbecfa;
    border: 2px solid white;
    border-radius: 100px;
}

/* makes all links that font */

a {
    font-family: 'Varela Round', sans-serif;
}

/* makes profile url info Varela Round font */

.profile .url-info {
    width: 100%;
    border: 2px solid #3380e2;
    border-radius: 15px;
    margin: 10px 0;
    background: rgba(51, 128, 226, 0.3);
    font-family: 'Varela Round', sans-serif;
    color: #bbecfa;
}

/* makes nav links + footer links Varela Round */
nav .links, footer .links {
    margin: 0;
    list-style: none;
    font-family: 'Varela Round', sans-serif;
}

nav .top {
    display: flex!important;
    opacity: 1!important;
    font-family: 'Varela Round', sans-serif;
}

p, ol li, ul:not(nav .links):not(footer .links) li {
    font-size: 0.875em;
    font-size: max(0.875em, 12px);
    font-family: 'Varela Round', sans-serif;
    color: #ffffff;
}
</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 8 of 8 comments ( View all | Add Comment )
bridge ☆	1705685653 Using!! Report Comment
bridge ☆	1705685652 Using!! Report Comment
bopper undine	1690530258 using Report Comment
!! F3lix ☆	1690509176 Using! ^_^ Report Comment
JJ!彡	1689643334 USING Report Comment
Chav	1689285517 Using :D Report Comment
vonnie	1689275072 USING :D Report Comment
Etienne	1688862135 Using! I love it Report Comment