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 dai (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 64 comments ( View all | Add Comment )
matu/7	1792612599 Using!!! Report Comment
Astoria aaron	1789230298 using but changing ^^ Report Comment
:-)	1788197365 using but changing some things thank youuuu Report Comment
zoroark	1783915721 using Report Comment
Ethan	1782789007 using Report Comment
XxCoralxX	1780078445 using Report Comment
unfatedviolet	1777385151 using ty Report Comment
vivienene ☭	1774569147 using Report Comment
Ulyx56__	1772940394 using! Thanks! Report Comment
Sara	1772810354 This is so prettyyy!! usingg Report Comment
Menhera	1772478700 Using! Report Comment
Milch.br	1769383841 Sadly not using but this looks soooo insanely cool omg!! Report Comment
BoneyKingofNowhere	1766985756 Using!!! This is sooo cute Report Comment
Tanis	1766860341 usingg Report Comment
Noraxoxo	1764580265 using<3 Report Comment
mezzanine ☆	1764248433 using xp Report Comment
subinka	1763048618 using :p Report Comment
friedaphobic	1760156959 usingg!! Report Comment
𝔠𝔦𝔫𝔡𝔦 ⋆	1759309006 usingg!! Report Comment
thekingofsouth	1753463651 gonna use x Report Comment