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:

click on the image for a larger 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.

Comments

Displaying 4 of 4 comments ( View all | Add Comment )

custard x3	1707608759 using! Report Comment
lucius .ᐟ 𓆙✦	1697390109 using!! Report Comment
illnesses	1695598674 using!! Report Comment
Wholesome_starzz	1695529227 using!! Report Comment