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 26 comments ( View all | Add 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
niko(๑>◡<๑)	1721092388 using:3 Report Comment
G3NES1S<3	1719560204 using! Report Comment hey i was just wondering, how did u get music to work with this layout? i added music but it just doesnt play by Donatello ☆; 1719933257; Report
* ˚ ✦ Marlena * ˚ ✦	1718755945 using!! Report Comment
choponochka	1715616264 using!!!! Report Comment
harlow	1710592794 using Report Comment
ojosmosaicos	1706490122 USINGGG SO PRETTY OMG Report Comment
'livia ✮	1704073788 I LOVE BJORK THIS LAYOUT IS SO COOL??? USING Report Comment
sonj🍉	1704032418 usingg Report Comment
VIKO☆	1702943777 usinggggg!!!!!! love t! Report Comment
ସାମି♡	1699246325 I LUV BJORK THIS IS AMAZINGG Report Comment
ସାମି♡	1699246296 I LUV BJORK THIS IS AMAZINGG Report Comment
‎ ‎ ‎	1698522516 using! Report Comment
ZOMBIEZZ_10101	1698201909 THIZ IZ ZO COOLL ^-^ TYYYYYYZZZMMM Report Comment