björk - post

Tags: bjork, post, music, pink

Description:

more layouts!

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 idioteque (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 19 of 19 comments ( View all | Add 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
* ˚ ✦ Marle * ˚ ✦	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
rawr xd	1697380164 im not using this but holy shit i love this laylout so god damn much Report Comment
Sharon Da Silva	1696286533 How do I insert a layout into my profile? And is it for free? I would appreciate it thanks. Report Comment yeah ! every layout on the layout section is free to place it on your profile, copy the entire layout code that's in the little box and go to your edit profile page, and paste everything into the "about me" section! by idioteque; 1696339827; Report Thanks by Sharon Da Silva; 1696446918; Report Thanks. by Sharon Da Silva; 1696446962; Report
zyozi	1695768840 do you take comms ? :O Report Comment I do ^_^ by idioteque; 1695778521; Report do you have a page i can see them at ? if not what do u price ? by zyozi; 1695778986; Report I haven't set them up yet, I was actually considering about them. I was thinking about 'pay for what You get' comms, but if I had to set a fixed price, I don't think they'll go over 15$. these take me around one to three days, depending on the complexity, by the way! by idioteque; 1695780489; Report
dulce ♪	1695719276 this looks amazing!!!! Report Comment thank you so much >_<!! by idioteque; 1695740066; Report
Clara	1695707478 hey ;D you can post the code of music "around the world (lalala)" from a touch of class? thanks! Report Comment of course : 3 you can use this code: https://pastebin.com/LPCpeEu3 by idioteque; 1695740047; Report THANK YOU SO MUCH!!!!!! by Clara; 1695773601; Report