björk - post

Tags: bjork, post, music, pink

Description:

was bored, loved björk

maybe still a wip? (please don't make fun of the code formatting i know it's a lil mess, too lazy to organize)

vertical banner and bg can be customized changing the url in customization section of the code !!!

feel free to edit, reupload is ok credit not needed but appreciated

Preview:

click on the image for a larger preview

Code:

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

<style>
/* A LIL CUSTOMIZATION !!!! optional*/
:root {
    /* first up, the image right besides interests section */
    --verticalbannerthing: url(https://images2.imgbox.com/ed/f2/xIsyGPli_o.jpg);
    /* the page background/wallpaper */
    --background: url(https://images2.imgbox.com/42/a9/9VTeAjWW_o.png);
    
}

/* hotlinkin! tiny details! palette! */
@font-face {
    font-family: 'bjork';
    src:url(https://dl.dropbox.com/scl/fi/d29qvw7zrr3p12xdzuedg/bjork.ttf?rlkey=7adym1j9arqz4ajcs3dmbw0vl);
}
 /* scrollbar */
*::-webkit-scrollbar {width: 8px;}
*::-webkit-scrollbar-track {background: transparent;}
*::-webkit-scrollbar-thumb {background-color: #fff;border-radius: 20px;border:1px solid white;background: rgba(247, 111, 137, 0.6);box-shadow: 0px 0px 3px white inset;}

/* hiding stuff */
.f-col .icon, .contact .heading, .table-section .heading, .verified, .edit-link, .logo-fallback, .blurbs .heading, .friends .heading, .report .icon, .table-section + .table-section, .details-table + .details-table {
display:none!important;
}
:root {
    --bubble: rgba(255, 110, 127, 0.6);
    --bubblesolid: rgba(255, 110, 127);
    --hotpink: #f5335d;
    --shine: inset 0px -10px 50px rgba(255,255,255,0.8);
    --shinesmall: inset 0px -5px 20px rgba(255,255,255,0.8);
    --glow: 0px 0px 10px rgba(255,255,255,0.8);
}
/* cursor */
@keyframes anicur {
    0% {
        cursor: url("https://images2.imgbox.com/c6/cb/KWfquGZg_o.png"), auto;
    }
    25% {
        cursor: url("https://images2.imgbox.com/54/4f/GyG6OFgD_o.png"), auto;
    }
    50% {
        cursor: url("https://images2.imgbox.com/e5/00/Bt5pChCN_o.png"), auto;
    }
    100% {
        cursor: url("https://images2.imgbox.com/a9/00/CbdTwohR_o.png"), auto;
    }
}
/* layout */
*::selection {
    background-color: var(--hotpink);
    color:white;
    text-shadow:0px 0px 2px white;
}
body::before {
    box-shadow: 0px 0px 10px black inset;
    display:block;
    content:"";
    position:fixed;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
    background-image:url(https://www.lastbubbles.com/resources/img/pink-bubble.gif);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index:-1;
}
body::after {
    box-shadow: 0px 0px 150px white inset;
    display:block;
    content:"";
    position:fixed;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
    pointer-events: none;
    z-index:-1;
    mix-blend-mode:overlay;
}
body {
    animation: anicur 0.4s infinite;
    background: white var(--background) repeat fixed center;
    background-size:contain;
    width:100%!important;
    overflow-x:hidden;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
}
main {
    background:transparent;
}
.col {
    width:100%;
    display:block;
}
a {
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
    border-radius:50px;
    text-decoration: none!important;
    font-size:11px;
    font-weight:bold!important;
    text-transform: lowercase;
}
p:has(style:only-child), p:has(iframe, style:only-child), p:has(iframe:only-child) {
    display:none!important
}
p:empty {
    display:none;
}
a:hover {
    text-decoration: underline!important;
}
img {
    filter:saturate(150%)
}
.w-40 {
    width:100%!important;
}
.count {
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
    background: var(--bubble) url(https://images2.imgbox.com/7a/a3/jDnwsiH1_o.png);
    background-size:contain;
    padding:2px 5px;
    border-radius:50px;
    border: 1px solid white;
    text-shadow: none;
    text-transform:lowercase;
    font-size:12px;
    text-decoration: none!important;
    font-weight:bold;
    margin:auto!important;
}
.section h4 {
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
    text-shadow: none;
    text-transform:lowercase;
    font-size:17px;
    text-decoration: none!important;
    font-weight:bold;
    background-color: var(--bubble);
    box-shadow: 0px 0px 10px white inset, var(--glow);
    margin:auto!important;
    width:fit-content;
    padding:5px 10px;
    border-radius:20px;
    border:1px solid white;
}

/* bubbled */
.general-about, .contact, .top, .mood {
    background: var(--bubble)!important;
    box-shadow: var(--shine), var(--glow);
    border:  2px solid var(--bubble)!important;
    outline: 1px solid white;
    border-radius:100%;
	background-image: url(https://images2.imgbox.com/7a/a3/jDnwsiH1_o.png)!important;
    background-size:contain!important;
}

/* bjork typography */
.profile h1 {
    background: -webkit-linear-gradient(#ff294d, #ff638d)!important;
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    text-shadow:none!important;
    z-index:123;
    font-family: 'bjork';
    text-transform: lowercase;
    word-break: break-word;
    text-indent:30px;
    padding-top:20px;
    line-height:28px;
    font-weight:normal;
    filter: drop-shadow(rgb(255, 255, 255) 1px 1px 0px) drop-shadow(rgb(255, 255, 255) 0px 1px 0px) drop-shadow(rgb(255, 255, 255) 0px 1px 0px) drop-shadow(rgb(255, 255, 255) -1px 1px 0px) drop-shadow(rgb(255, 255, 255) -1px 0px 0px) drop-shadow(rgb(255, 255, 255) -1px -1px 0px) drop-shadow(rgb(255, 255, 255) -1px -1px 0px) drop-shadow(rgb(255, 255, 255) 0px -1px 0px) drop-shadow(rgb(255, 255, 255) 0px -1px 0px) drop-shadow(rgb(255, 255, 255) 1px -1px 0px) drop-shadow(rgb(255, 255, 255) 1px 0px 0px);
}

/* miniprofile */
.general-about {
    height:250px;
    width:250px;
    position:fixed;
    top:6rem;
    left:4rem;
    z-index:2;
}
.profile h1 {
    transform:rotate(-5deg);
    width:400px;
    height:fit-content;
    text-align:center;
    position:fixed;
    top:5.8rem;
    left:-2rem;
    font-size:60px;
}

.profile-pic, .profile-pic .pfp-fallback {
    width:120px!important;
    height:120px!important;
    object-fit: cover;
    border-radius:100%;
    position:relative;
    top:1.5rem;
    left:0.5rem;
    float: initial!important;
    margin: 0px!important;
}
.pfp-fallback {
    border:1px solid white;
    box-shadow: var(--glow), 0px 0px 5px red inset;
}
.details p {
    font-size:0px;
}
.details p:first-child {
    width:190px;
    position:fixed;
    top:16.4rem;
    left:6rem;
    word-break: break-all;
    margin-right:8px;
    height:29px;
    font-size:11px;
    text-align:center;
    font-weight:bold;
    overflow: hidden;
    word-break: break-word;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
}
.details p:nth-child(2) {
    width:90px;
    position:fixed;
    top:10rem;
    left:13rem;
    word-break: break-all;
    margin-right:8px;
    height:90px;
    font-size:11px;
    text-align:center;
    font-weight:bold;
    overflow: hidden;
    word-break: break-word;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
}
.online {
    width:200px!important;
    text-align:center;
    float:initial!important;
    position:fixed;
    top:18.4rem;
    left:9.2rem;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
    font-size:11px!important;
    background-color: var(--bubble);
    width:fit-content!important;
    padding: 2px 5px;
    border-radius: 20px;
    border:1px solid white;
}
.online img {
    animation:none;
    vertical-align: bottom;
    margin:-1px;
    content:url(https://64.media.tumblr.com/d85945a4b4df117c168b5cf14753f5fd/113b9091633ad7f3-f8/s75x75_c1/dd7f1b6def39ed096c12c7e60ffa5194959dbcea.gifv);
}

/* contact/interaction buttons */
.contact {
    height:12.5rem!important;
    width:12.5rem!important;
    position:fixed;
    bottom:2rem;
    right:5rem;
    padding:20px;
}
.contact .inner {
    margin-top:13px;
}
.contact .inner .f-row:nth-child(3) .f-col:last-child a {
    line-height: 18px;
}
.f-col a {
    display:block;
    text-align:center!important;
    color:white;
    box-shadow: var(--shinesmall), var(--glow);
    width:60px;
    background-color:var(--bubble);
    padding:4px;
    margin-top:-4px;
    border-radius:50px;
    font-size:8px;
    border:1px solid white;
    height:30px;
	text-decoration: none;
}
.f-col a:hover {
    background-color:var(--bubblesolid);
    text-decoration: none;
}

/* top nav */
.top {
    height:230px!important;
    width:230px!important;
    position:fixed!important;
    top:2rem;
    right:8rem;
    padding:20px;
}
.top .right {
    position:fixed;
    top:14.5rem;
    right:13.3rem;
    font-size:9px;
}
.top .right *, .logout-btn {
    text-transform:lowercase;
}
.center {
    position:fixed!important;
    top:12.5rem;
    right:8.8rem;
    width:200px;
}
#q {
    width:70px;
    border:2px inset pink;
}
button {
    background:var(--bubblesolid);
    border:2px outset pink;
    font-size:9px;
    height:20px;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
    font-weight:bold;
    cursor:pointer;
}
button:not(.logout-btn):hover {
    border:2px inset pink;
    color:pink;
}
.logout-btn {
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
    font-size:11px;
}
*:focus {
    outline:none;
}
label {
    font-size:9px;
    display:block;
    margin-bottom:4px;
    font-weight:bold;
}
nav .links:before {
    pointer-events: none;
    content:"nav";
    position:fixed;
    top:2.5rem;
    right:4rem;
    display:block;
    background: -webkit-linear-gradient(#ff294d, #ff638d)!important;
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    text-shadow:none!important;
    width:400px;
    text-align:center;
    z-index:123;
    font-family: 'bjork';
    font-size:60px;
    text-transform: lowercase;
    word-break: break-word;
    text-indent:30px;
    padding-top:20px;
    line-height:28px;
    font-weight:normal;
    filter: drop-shadow(rgb(255, 255, 255) 1px 1px 0px) drop-shadow(rgb(255, 255, 255) 0px 1px 0px) drop-shadow(rgb(255, 255, 255) 0px 1px 0px) drop-shadow(rgb(255, 255, 255) -1px 1px 0px) drop-shadow(rgb(255, 255, 255) -1px 0px 0px) drop-shadow(rgb(255, 255, 255) -1px -1px 0px) drop-shadow(rgb(255, 255, 255) -1px -1px 0px) drop-shadow(rgb(255, 255, 255) 0px -1px 0px) drop-shadow(rgb(255, 255, 255) 0px -1px 0px) drop-shadow(rgb(255, 255, 255) 1px -1px 0px) drop-shadow(rgb(255, 255, 255) 1px 0px 0px);
}
nav .links {
    text-align:center;
    background: transparent!important;
    border-radius:100%;
    height:100px!important;
    width:200px!important;
    position:fixed!important;
    top:4.5rem;
    right:9rem;
    padding:20px;
}
nav .links a {
    font-size:11px;
    text-align:center;
    font-weight:bold;
}
nav .links li:not(:last-child)::after {
    content:", ";
    text-align:center;
    font-weight:bold;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
}
.active .icon {
    filter:brightness(80%) contrast(250%);
    content:url(https://64.media.tumblr.com/ce238ea58987504fa5d2930a109104ef/ab4038e9faf38e59-14/s75x75_c1/73e8e9e16da6b51aef14bfde86c58295af215654.gifv);
}

/* mood */
.mood {
    height:150px!important;
    width:150px!important;
    position:fixed!important;
    bottom:4rem;
    left:3rem;
    padding:20px;
}
.mood p {
    text-align:center;
    font-size:11px;
    margin-top:10px!important;
    text-align:center;
    font-weight:bold;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
}
.mood p:last-child {
    font-size:0px;
}
.mood b a {
    display:block;
    font-size:12px;
}

/* url */
.url-info {
    filter:saturate(150%);
    display:inline-block;
    width:200px!important;
    margin-left:50px!important;
    background-image:var(--verticalbannerthing)!important;
    height:410px;
    background-size:cover;
    background-position:top;
    border:1px solid white!important;
    border-radius:100px;
    box-shadow: 1px 1px 20px rgba(255,255,255,0.8);
    font-size:0px;
}

/* interests */
.table-section:not(.table-section + .table-section):before {
    pointer-events: none;
    content:"about me";
    display:block;
    background: -webkit-linear-gradient(#ff294d, #ff638d)!important;
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    text-shadow:none!important;
    width:360px;
    text-align:center;
    z-index:123;
    font-family: 'bjork';
    font-size:60px;
    text-transform: lowercase;
    word-break: break-word;
    padding-top:20px;
    line-height:25px;
    font-weight:normal;
    filter: drop-shadow(rgb(255, 255, 255) 1px 1px 0px) drop-shadow(rgb(255, 255, 255) 0px 1px 0px) drop-shadow(rgb(255, 255, 255) 0px 1px 0px) drop-shadow(rgb(255, 255, 255) -1px 1px 0px) drop-shadow(rgb(255, 255, 255) -1px 0px 0px) drop-shadow(rgb(255, 255, 255) -1px -1px 0px) drop-shadow(rgb(255, 255, 255) -1px -1px 0px) drop-shadow(rgb(255, 255, 255) 0px -1px 0px) drop-shadow(rgb(255, 255, 255) 0px -1px 0px) drop-shadow(rgb(255, 255, 255) 1px -1px 0px) drop-shadow(rgb(255, 255, 255) 1px 0px 0px);
}
.table-section {
    display:inline-block!important;
    width:57%!important;
    margin-left:5px!important;
    border:0px!important;
}
.details-table {
    width:50px;
    height:200px;
}
.details-table td {
    background: rgba(255, 255, 255, 0.8)!important;
    box-shadow: var(--shine), var(--glow);
    border:  1px solid var(--bubble)!important;
    outline: 1px solid white;
    border-radius:10px;
    display:inline-block;
    width:100%!important;
}
.details-table td:last-child p {
    color:var(--bubblesolid);
    font-size:11px;
    text-align:center;
}
.details-table tr {
    display:inline-block;
    width:48.8%;
    margin-bottom:5px;
    margin-left:5px;
}
.details-table td:last-child {
    border-radius: 0px 0px 10px 10px;
    overflow-y:scroll;
    height:100px!important;
    width:100%;
    font-weight:bold;
    color:var(--hotpink)!important;
    text-shadow:none!important;
}
.details-table td:first-child {
    border-radius: 10px 10px 0px 0px;
    background-color:var(--bubblesolid)!important;
    margin-bottom:1px;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
}
/* profile info */
.profile-info {
    width:80%;
    padding:0px;
    background: var(--bubble)!important;
    box-shadow: var(--shine), var(--glow);
    border:  1px solid var(--hotpink)!important;
    outline: 1px solid white;
    border-radius:10px;
    margin:auto;
    margin-top:-15px!important;
    margin-bottom:10px;
}
.profile-info .inner * {
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
    font-size:11px;
}
/* blog */
.blog-preview {
    width:80%;
    background: var(--bubble)!important;
    box-shadow: var(--shine), var(--glow);
    border:  1px solid rgba(247, 111, 137, 0.6)!important;
    outline: 1px solid white;
    border-radius:10px;
    margin:auto;
    font-weight:bold;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
    padding:10px;
    font-size:10px;
    margin-bottom:10px;
}
.pinned .icon {
    filter:sepia(30%) saturate(300%);
    content:url(https://64.media.tumblr.com/11bcfd76fab7a847f95a441111d010be/afca0d50e2ccb2c8-3c/s75x75_c1/e4a9fd0c9600805e5a7e6b45938ff8d84fe51f34.gifv);
}

/* main */
.blurbs, .friends, footer {
    background: var(--bubble)!important;
    box-shadow: var(--shine), var(--glow);
    border:  1px solid rgba(247, 111, 137, 0.6)!important;
    outline: 1px solid white;
    border-radius:15px;
    margin:auto!important;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
    font-weight:bold;
    padding:10px;
    font-size:10px;
    width:80%;
    margin-bottom:10px!important;
}
.blurbs {
    background-image: url(https://images2.imgbox.com/7a/a3/jDnwsiH1_o.png)!important;
	background-size:100% 100%!important;
    background-position: 0px -15px!important;
    border-radius:50%;
    height:650px;
    padding:2% 12%;
    border:  2px solid rgba(247, 111, 137, 0.6)!important;
    overflow-y:scroll;
}
.blurbs p {
    color:white!important;
    background-color:var(--bubble)!important;
    text-shadow:1px 1px 0px var(--bubblesolid)!important;
    box-shadow: 0px 1px 10px white inset;
    width:fit-content;
    padding:5px 5px;
    border-radius:10px;
    border:1px solid lightpink;
    margin:5px auto!important;
}
.blurbs a {
    color:white!important;
    text-shadow:1px 1px 0px var(--bubblesolid)!important;
    font-size:12px;
    text-decoration:underline!important;
}
.blurbs::-webkit-scrollbar-thumb {
    background: var(--bubblesolid);
    box-shadow: 0px 0px 5px white inset, 0px 0px 10px white;
}
.blurbs::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 300px; 
}
.blurbs::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 300px;
}
/* friends */
.friends:not(#comments) {
    overflow:hidden;
}
.person .pfp-fallback {
    height:100px;
    width:100px;
    object-fit: cover;
}
.person p {
    text-align:center;
    font-weight:bold;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
}
/* comments */
#comments {
    height:300px;
    overflow-y:scroll;
}
.comments-table {
    border:none!important;
}
.comments-table td {
    background-color:transparent!important;
    border:none!important;
}

#comments .inner > p b {
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
}
.comments-table td:first-child {
    width:100px;
}
/* footer */
footer * {
    font-size:9px;
    text-align:center;
    font-weight:bold;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
    text-decoration: none;
}
footer .links li:not(:last-child)::after {
    content:", ";
    font-weight:bold;
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
}
.comments-table a p, .comments-table td {
    color:white!important;
    text-shadow:1px 1px 0px var(--hotpink)!important;
}
</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 39 comments ( View all | Add Comment )

𝐴𝑘𝑖𝑟𝑎 ᱬ ♡	1742037347 using!! Report Comment
matilda	1741301938 using!! thank you :) <3 Report Comment
yanna ⋆˚࿔	1740428847 USING OMG Report Comment
✩‧ manic.ᐟ♯	1739827829 USSSINGGGGGG THIS IS JUST 2 CUTEEEE !!!!!! <3 Report Comment
mayaevergarden	1739224344 using! Report Comment
mie	1738944148 using!! Report Comment
Lnizzy	1736477787 using!! Report Comment
/ 𝔸𝕟𝕟𝕚𝕖 𝕄𝕖𝕣𝕚𝕥 \ $/ 𝔸𝕟𝕟𝕚𝕖 𝕄𝕖𝕣𝕚𝕥 \'s profile picture$	1735462134 I used and liked it but can you fix the code so it can work with autoplay music? I put in my own code to autoplay "Army of Me" but when I checked the profile, the autoplay wouldn't work until I removed the layout. Report Comment
NIBBL3R ^_^	1734631989 Using! I love it sm (⁠⁠´⁠ω⁠｀⁠⁠) Report Comment
p0l0xhmxhm	1734088734 Using :] Report Comment
p0l0xhmxhm	1734088733 Using :] Report Comment
50calboy	1733511419 AAAAAHHH!!!!!! USING IM IN LOVEEEEEEE Report Comment
Imanii	1732496105 using! such a dope layout!! tyty Report Comment
diopudfiuk*∘˙.	1731707065 using!!! but there is a slight vibrant or saturation filter on the vertical banner and idk how to change it, can someone plis help (its not a big deal but it would look nicer less vibrant for my profile TT) but anyway IM IN LOVE WITH THIS LAYOUTTTTT <33 Report Comment
nolose	1731280772 muchas gracias, es hermoso Report Comment
wrn	1729437218 usignbg Report Comment
carrot	1729229065 using!! Report Comment
✮₊⊹₊⋆ ︎︎ ⋆₊ ⊹✮	1727595331 using Report Comment
chay	1726282211 using! Report Comment
ozzy	1724511383 THIS IS ACTUALLY SO COOL OMG Report Comment