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 53 comments ( View all | Add Comment )
BoneyKingofNowhere	1766985756 Using!!! This is sooo cute Report Comment
Tanis	1766860341 usingg Report Comment
Noraxoxo	1764580265 using<3 Report Comment
showmeurtoyzz	1764248433 using xp Report Comment
✯INKA✯	1763048618 using :p Report Comment
crayoncitos	1761544962 Esto es hermoso, me encantan las burbujiiiitaaas Report Comment
friedaphobic	1760156959 usingg!! Report Comment
𝔠𝔦𝔫𝔡𝔦 ⋆	1759309006 usingg!! Report Comment
thekingofsouth	1753463651 gonna use x Report Comment
thekingofsouth	1753463651 gonna use x Report Comment
Papa Reg	1752267937 usinggg :) Report Comment
l4in-1waKur4	1750885653 using :3 Report Comment
cyrene !!	1746959295 will use! Report Comment
mari	1746319194 using !! i love this sm ^^ gonna be editing a bit Report 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
partyinmytummy	1738944148 using!! Report Comment