shark/blue ocean layout!! 🦈

Tags: sharks, blue, ocean, simple, cute

Description:

sharks r the best animal
pls credit me if u use! includes custom online icon

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ⨂ valerie vengeance ⨂ (https://layouts.spacehey.com/layout?id=81139) -->

<style>
main{
     height: 500px;
    overflow-y: scroll;
    text-align: center;
}

body {
  background-image: url('https://i.pinimg.com/originals/5b/7d/6d/5b7d6da0029ad51df852cd9151e3967c.jpg');
  background-attachment: fixed ;
  background-repeat: repeat;
  background-size: 100%;
  background-position: center;
  background-color: transparent!important;
}

/* this is the spacehey logo */
nav img.logo {
content:url("https://static.wikia.nocookie.net/logopedia/images/2/20/MySpace_logo.svg");
filter: invert(100%);
}

/* this is the online img*/
.online {
  content: url('https://external-media.spacehey.net/media/swezkCDD2u5dQwxzUZTXErUKNCUzyXQtyvGf1pOEPXdk=/https://watermelon.crd.co/assets/images/gallery10/b9734bfe.gif?v=ab2f6a73'); 
  background-repeat: no-repeat; 
  background-position: -15% 75%; 
  z-index: 2; 
}
/* this is color of all the text and links */

a, .profile .friends .person p, p, h2, h3, h4, .count {
  color: white;
}
h1{
   border: 4px solid white !important;
   padding: 5px;
   background-color: rgb(255,255,255,0.4) !important;
   color: white !important;
   text-shadow: -2px 2px 3px blue !important;
   box-shadow: 0px 0px 10px black !important;
}

/* this is where you edit the search button and the Delete and Reply button */
button{
  background-color: transparent!important;
  border: none;
  color: white;
  font-weight: normal;
  text-shadow: -2px 2px 3px blue !important;
}
top .button {
  background-color: transparent!important;
  color: white !important;
  text-shadow: -2px 2px 3px blue !important; 
}
.general-about {
  border: 4px solid; 
  color: white !important;
  text-shadow: -2px 2px 3px blue !important;
  padding: 12px;
  box-shadow: 0px 0px 10px black !important;
}
.mood {
   background-color: rgb(255,255,255,0.4) !important;
   border: 4px solid white !important;
  padding: 3px;
  margin-bottom: 10px;
  margin-top: 10px;
  color: white !important;
  text-shadow: -2px 2px 3px blue !important;
  box-shadow: 0px 0px 10px black!important;
}
.url-info, .table-section, .blog-preview, .blurbs, .friends, .profile-info {
  border: 4px solid white !important;
  background-color: rgb(255,255,255,0.4)!important;
  color: white !important;
  text-shadow: -2px 2px 3px blue !important;
  box-shadow: 0px 0px 10px black !important;
}

:root {
--logo-blue: white;
--darker-blue: white;
--lighter-blue: black;
--even-lighter-blue: transparent;
--lightest-blue: transparent;
--dark-orange: white;
--light-orange: transparent;
--even-lighter-orange: transparent;
--green: black;
}

.contact {
  border: 4px solid white !important;
  background-color: rgb(255,255,255,0.4)!important;
  color: white !important;
  text-shadow: -2px 2px 3px blue !important;
  box-shadow: 0px 0px 10px black !important;
  text-align: left !important;
}
.contact a {
  color: white !important;
}
.contact .inner a img {
font-size: 0;
}

.contact .inner a img:before {
font-size: 1em;
}

  .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

/* add to friends */

content: url(https://external-media.spacehey.net/media/swezkCDD2u5dQwxzUZTXErUKNCUzyXQtyvGf1pOEPXdk=/https://watermelon.crd.co/assets/images/gallery10/b9734bfe.gif?v=ab2f6a73)

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorite */

content: url(https://external-media.spacehey.net/media/swezkCDD2u5dQwxzUZTXErUKNCUzyXQtyvGf1pOEPXdk=/https://watermelon.crd.co/assets/images/gallery10/b9734bfe.gif?v=ab2f6a73)

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send a message */

content: url(https://external-media.spacehey.net/media/swezkCDD2u5dQwxzUZTXErUKNCUzyXQtyvGf1pOEPXdk=/https://watermelon.crd.co/assets/images/gallery10/b9734bfe.gif?v=ab2f6a73)

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* foward to friend*/

content: url(https://external-media.spacehey.net/media/swezkCDD2u5dQwxzUZTXErUKNCUzyXQtyvGf1pOEPXdk=/https://watermelon.crd.co/assets/images/gallery10/b9734bfe.gif?v=ab2f6a73)
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

content: url(https://external-media.spacehey.net/media/swezkCDD2u5dQwxzUZTXErUKNCUzyXQtyvGf1pOEPXdk=/https://watermelon.crd.co/assets/images/gallery10/b9734bfe.gif?v=ab2f6a73)

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block user */

content: url(https://external-media.spacehey.net/media/swezkCDD2u5dQwxzUZTXErUKNCUzyXQtyvGf1pOEPXdk=/https://watermelon.crd.co/assets/images/gallery10/b9734bfe.gif?v=ab2f6a73)

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add 2 group  */

content: url(https://external-media.spacehey.net/media/swezkCDD2u5dQwxzUZTXErUKNCUzyXQtyvGf1pOEPXdk=/https://watermelon.crd.co/assets/images/gallery10/b9734bfe.gif?v=ab2f6a73)

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report */

content: url(https://external-media.spacehey.net/media/swezkCDD2u5dQwxzUZTXErUKNCUzyXQtyvGf1pOEPXdk=/https://watermelon.crd.co/assets/images/gallery10/b9734bfe.gif?v=ab2f6a73)
} 
.comments-table td {
   border: ;
}
.table-section td {
  border: 0px solid black;
}
/* line in between comment replies*/
.comment-reply:not(:first-child) {
    border: 1px solid white;
   box-shadow: 0px 0px 10px black!important;
}
.comment-replies {
    border: 1px solid white;
   box-shadow: 0px 0px 10px black!important;
}

/* these backgrounds are usually transparent */
nav .top {
  background-color: transparent!important;
  color: rgb(255, 255, 255)!important;
  font-weight: bold;
  text-align: center;
  text-shadow: -2px 2px 3px blue !important;
}

nav .links {
  background-color: transparent!important;
  color: rgb(255, 255, 255)!important;
  font-weight: bold;
  text-align: center;
  text-shadow: -2px 2px 3px blue !important;
}

nav .links a {
  color: white !important;
  text-shadow: -2px 2px 3px blue !important;
}

main, footer {
  background-color: transparent!important;
}
footer{
  font-size: 0px;
}
.friends:not(#comments) {
  margin-bottom: 10px;
}
.comments-table {
  border: 1px solid rgb(255, 255, 255);
  border-spacing: 5px;
   box-shadow: 0px 0px 10px black!important;
}
.general-about {
   overflow: auto;
}
.profile-pic {
   object-fit: contain;
   overflow: hidden;
   border: none;
   border-radius: 90px;
   box-shadow: 0px 0px 10px black !important;
}

.heading {
  background-color: transparent !important;
}
td {
  background-color: transparent !important;
  border: none !important;
}

(bounce animation) .col, main, footer, nav::before, .online, nav .links, nav .top {
    animation: float 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 .col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}
</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 19 of 19 comments ( View all | Add Comment )

#🎧 𝑨𝑳𝑺 ✮⋆˙	1709613343 Heck yeah!!!1! May use Report Comment
Robin <3	1709015183 Using :D Report Comment
ragingIsopod	1705855161 aww yiss!!! shark time Report Comment hell yeah!!! by ⨂ valerie vengeance ⨂; 1705857413; Report
polnr	1705777076 awesome possum using it Report Comment
NAY1T4444	1705445497 using!! :3 Report Comment
MoonBased	1704592271 using!! Report Comment
JUPITER!! <3	1702953139 using :3 Report Comment
SpyCrab	1702312701 using ^^ Report Comment
Cryptic \|\| Watching :)	1701036081 Using! Thank u and I love ur layouts sm !! ⸜(｡˃ ᵕ ˂ )⸝♡ Report Comment ofc!! nd tysm ^_^ by ⨂ valerie vengeance ⨂; 1701036105; Report
remy69	1700248074 im using this but it wont let me add floating things?? is there a way to fix that? Report Comment use this code :D < div style="float: ; max-height: 400px; position: fixed; right: 1px; top: 9px; z-index: 200;" > < img src="LINK" width="150" height="150" / >< / div > just replace the part where it says 'link' w ur link and remove the spaces between the <, /, and >'s !! by ⨂ valerie vengeance ⨂; 1700250547; Report
Ezar	1699691812 using >V< Report Comment
Ezar	1699691811 using >V< Report Comment
Radio	1699126578 USINGGG Report Comment
charlie :D	1697358040 uuusijg !!! :DDD Report Comment
goyangbi ☆	1696896639 cool! master mega will LOVE this.. Report Comment
🐾~Arrow~🪐	1696875689 Used!!!!! Report Comment
Jasper/Vince (⁠^⁠.⁠_⁠.⁠^⁠)	1695735671 Using!! This is so cool and cute! :D Report Comment
stella	1695734829 using !! :3 Report Comment
natazavala	1695593839 using <33 cuteee Report Comment