blue ocean layout

Tags: simple, cute, blue, light blue, ocean, scrollbox

Description:

this doesnt rlly have anything special except a scrollbox on the comments + friends spaces and the pfp blurs when u hover over it
comment if ur gonna use!!

Preview:

Code:

<!-- (c) Layout created by ⨂ valerie vengeance ⨂ (https://layouts.spacehey.com/layout?id=81348) --> <style> body{ background: url(https://tse2.mm.bing.net/th/id/OIP.ETZqS43HJGmuCAgFHoC_IAAAAA?pid=ImgDet&rs=1); filter: blur(.5px); } main{ color: white; background: transparent; margin-top: 20px; border-radius: 20px; height: 500px; overflow-y: scroll; } .general-about .profile-pic img{ border: blue solid; border-radius: 50px; box-shadow: -5px 5px 10px blue; } .general-about .profile-pic img:hover{ filter: blur(2px); transition: .5s; transition-timing-function: ease-out; } .profile h1{ text-align: center; } .profile-info{ background: url(https://external-media.spacehey.net/media/smO12L46MOt9hZvspznSRH4_e-fZuiGc3kNQyoB_aX1c=/https://pbs.twimg.com/media/ElUm5gtUwAAVlDm.png); background-position: center; background-size: 40px; border: none; border-radius: 20px; } .profile .mood{ text-align: center; color: white; border: blue solid; border-radius: 20px; margin-bottom: 15px; background: rgb(255,255,255,0.5) !important; box-shadow: -5px 5px 10px blue; } .profile .url-info{ background: url(https://external-media.spacehey.net/media/smO12L46MOt9hZvspznSRH4_e-fZuiGc3kNQyoB_aX1c=/https://pbs.twimg.com/media/ElUm5gtUwAAVlDm.png); background-position: center; background-size: 40px; text-align: center; font-weight: bold; border: blue solid; border-radius: 20px; box-shadow: -5px 5px 10px blue; } .profile .contact{ text-align: center; border: blue solid; border-radius: 20px; background: rgb(255,255,255,0.3) !important; box-shadow: -5px 5px 10px blue; } .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: "🫧" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* add to favorite */ content: "🫧" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* send a message */ content: "🫧" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* foward to friend*/ content: "🫧" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant message */ content: "🫧" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block user */ content: "🫧" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* add 2 group */ content: "🫧" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report */ content: "🫧" } .profile .blurbs{ text-align: center; border: blue solid; border-radius: 20px; background: rgb(255,255,255,0.5) !important; box-shadow: -5px 5px 10px blue; } .profile .friends{ text-align: center; border: blue solid; border-radius: 20px; background: rgb(255,255,255,0.5) !important; margin-top: 20px; margin-bottom: 20px; height: 250px; overflow-y: scroll; box-shadow: -5px 5px 10px blue; } .comments-table td{ background: transparent; border: 0px; } a:hover{ color: blue; } a{ color: white; } nav .top{ background: rgb(255,255,255,0.4); border: blue solid; border-radius: 20px; box-shadow: -5px 5px 10px blue; margin-top: 15px; margin-bottom: 20px; } footer{ background: transparent; color: white; } :root { --logo-blue: lightblue; --darker-blue: white; --lighter-blue: transparent; --even-lighter-blue: transparent; --lightest-blue: transparent; --dark-orange: white; --light-orange: transparent; --even-lighter-orange: transparent; --green: black; } </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.