Ambiloquous
Graphic Fanatic
Hrgfdghj no uI just wanted to say your codes are absolutely gorgeous
-
When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!
Remember to credit artists when using work not your own.
Resource Ami's Lab 2.0 | Mobile Friendly Freebies
- Thread starter Ambiloquous
- Start date
Anaxileah
From the Depths of Hell
Used this, tagged you in it cause there was nowhere to reference you in the code and I was terrified of breaking it
if you wanna see what I did with it, click "Kalmia" in my sig now to steal another of your codes
Anaxileah
From the Depths of Hell
Btw Ami, is there a way to make the scroll hidden in this code?
Ambiloquous
Graphic Fanatic
Used this, tagged you in it cause there was nowhere to reference you in the code and I was terrified of breaking it
HRFGHDFJJ I love the shades of green, and your writing is always nomnomcronch. Thank u for the offering, it was delicious.
Ambiloquous
Graphic Fanatic
Oh yeah def! I forgot why I didn’t hide the scroll for that, and I would fix it for you right now except I’m out.
If you can wait or if you think you can figure it out yourself, go for it!
Anaxileah
From the Depths of Hell
No worries! I am too dumb brain to figure it out, but when you do, I would love to steal itOh yeah def! I forgot why I didn’t hide the scroll for that, and I would fix it for you right now except I’m out.
Anaxileah
From the Depths of Hell
Thank yewwwwwwHRFGHDFJJ I love the shades of green, and your writing is always nomnomcronch. Thank u for the offering, it was delicious.
Ambiloquous
Graphic Fanatic
I put it in the og post just in case someone else would prefer the same. Tell me if it works for you bc I didn't check it on all my devices.No worries! I am too dumb brain to figure it out, but when you do, I would love to steal it
Anaxileah
From the Depths of Hell
Could you help me find where to input the scroll on mine? I had to make edits for the CS and I have no idea how to even approach your magic
if not, I can try to figure it out, no worries
Anaxileah
From the Depths of Hell
I used the original for Avalon in my signature, I'm gonna see if I can figure out what you made different, if you wanna check her out.
Ambiloquous
Graphic Fanatic
Could you help me find where to input the scroll on mine? I had to make edits for the CS and I have no idea how to even approach your magic
I added another border element inside the tab body elements that basically just hides the scroll, and while the example below only shows the first tab body, you have to change it for every tab body. The orange highlighted lines are the properties that I changed, and the red lines are the properties/tags I added.
[comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-1);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]-- Image 1 --[/comment]
... Content Here ...
[/border][/border][/border]
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-1);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]-- Image 1 --[/comment]
... Content Here ...
[/border][/border][/border]
Anaxileah
From the Depths of Hell
you are a priceless BBCode deity ilysmI had started to figure it out and was copy pasting the first tab's info, then I got confused when they were different colors, then started freaking out when I tried pasting them all individually
you saved me
Ambiloquous
Graphic Fanatic
No, thank you!
v i o l e t
♡ ♡ ♡
how are you actually so talented??SushimunchIt's a sushi code. And there's tabs. That's it, that's all.
If you want this to be mobile friendly, it's probably best to keep your message short. I didn't add scroll to this one because I only remembered it existed after I'd coded everything else, and then it made Pusheen and the chopsticks wonk, and lazy as I was, I gave up and called it a day.Besides, I made this for fun, not for actual use smh. Utility? What's that? Don't know her.
Edit: Plz forgive me, I was sleep deprived when I posted this. I've added auto scrolling, so make your message as long as you like.
TabsHidden Scroll
Click Sushi!
Code:[comment]-- Font -->[/comment][font=Didact Gothic][border=transparent; position: relative; margin: auto; max-width: 775px; padding: 0px;][border=transparent; visibility: hidden; display: inline-block; padding: 0px;]A[/border]Click Sushi![/border][border=transparent; /* Break code, break code! */ position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin: auto; margin-top: calc(0px - var(--chop-t)); margin-bottom: 2vh; box-sizing: border-box; max-width: 775px; height: var(--h); padding: 0px; border-radius: var(--br); border: var(--b); background: var(--board); box-shadow: 5px 5px rgba(255, 250, 250, 0.7); --color: #673d2f; /* Border and text colour */ --h: max(370px, 55vh); --br: 10px; --b: 2px solid var(--color); --board: linear-gradient(rgba(255, 255, 250, 0.2), rgba(255, 255, 250, 0.2)), radial-gradient(circle at top right, rgba(0, 0, 0, 0) calc(100% - 115px), rgba(205,144, 76, 0.2) calc(100% - 115px)), url('https://static.vecteezy.com/system/resources/previews/000/360/749/non_2x/wood-texture-vector.jpg') 50% 50% / cover; --tabs-w: 100px; --sushi-t: calc((var(--h) / 2) - 125px); --sushi-d: 49px; --sushi-l: 28px; --sushi-s: 54px; --sushi-bg: url('https://images.vexels.com/media/users/3/230800/isolated/preview/6fae7b492e567aae76ab5220a894087c-cute-sushi-cartoon.png') 50% 50% / 110%, linear-gradient(to bottom, rgb(255, 255, 255, 0) 22%, #af9187 22% 70%, rgb(255, 255, 255, 0) 70%); --sushi-f: blur(1px); --dish-t: calc((var(--h) / 2) + 83px); --dish-l: 17px; --dish-s: 70px; --dish-bg: radial-gradient(circle at top right, rgb(238, 83, 79) 65%, rgb(228, 73, 69) 65%); /* Dish gradient */ --dish-sh: -3px 3px rgba(0, 0, 0, 0.1); --dish-d-s: 48%; --dish-c-bg: radial-gradient(circle at top right, rgb(202, 65, 62) 70%, rgb(182, 45, 42) 70%); /* Dish circle gradient */ --chop-t: -1vh; --chop-l: calc(100% - var(--chop-s) + var(--body-e) + 6.2vh); --chop-s: 32vh; --chop-bg: url('http://icons.iconarchive.com/icons/google/noto-emoji-food-drink/1024/32444-chopsticks-icon.png') 50% 50% / 100%; --chop-c: polygon(0 0, 100% 0, 100% 26%, 26% 100%, 0 100%); --chop-tr: scaleX(-1) rotate(-35deg); --sticker-t: calc(max(370px, 55vh) - (var(--sticker-s) / 1.15)); --sticker-l: calc(100% - var(--sticker-s)); --sticker-s: 20vh; /* Pusheen image URLs */ --sticker-1: url('https://cdn130.picsart.com/256429381027212.png?r1024x1024') no-repeat 50% 50% / 100%; --sticker-2: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F5d%2F34%2Fff%2F5d34ff495c8b919ce281461ddda10c1b.png&f=1&nofb=1') no-repeat 50% 50% / 80%; --sticker-3: url('https://cdn.custom-cursor.com/packs/2582/pusheen-and-fish-cursor-pack.png') no-repeat 95% 50% / cover; --sticker-4: url('https://cdn131.picsart.com/287157513004211.png') no-repeat 50% 50% / 75%; --body-t: calc((var(--h) - var(--body-h)) / 2); --body-h: calc(var(--h) - var(--body-e)); --body-e: 5vh; --body-p: 20px; --body-f-c: var(--color); --body-f-s: 1em; /* Font size, increase or decrease by .1 increments */ --body-bg: rgba(250, 250, 240, 0.4);] [border=transparent; box-sizing: border-box; width: var(--tabs-w); line-height: 3.5;][comment]-- Dish --[/comment][border=transparent; position: absolute; top: var(--dish-t); left: var(--dish-l); width: var(--dish-s); height: var(--dish-s); padding: 0px; border-radius: var(--br); border: var(--b); background: var(--dish-bg); box-shadow: var(--dish-sh); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][border=transparent; flex: 0 0 var(--dish-d-s); height: var(--dish-d-s); padding: 0px; border-radius: 50%; border: var(--b); background: var(--dish-c-bg);][/border][/border][comment]-- Actual Tabs --[/comment][tabs] [comment]-- Tab 1 --[/comment] [tab=.][comment]-- Sushi Tabs --[/comment][border=transparent; position: absolute; top: var(--sushi-t); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + var(--sushi-d)); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (2 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (3 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent; position: absolute; top: var(--chop-t); left: var(--chop-l); width: var(--chop-s); height: var(--chop-s); float: right; padding: 0px; background: var(--chop-bg); -webkit-clip-path: var(--chop-c); clip-path: var(--chop-c); -webkit-transform: var(--chop-tr); transform: var(--chop-tr); z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent; position: absolute; top: var(--sticker-t); left: var(--sticker-l); width: var(--sticker-s); height: var(--sticker-s); padding: 0px; background: var(--sticker-1); z-index: 2;][/border][comment]-- Body --[/comment][border=transparent; position: absolute; top: var(--body-t); left: var(--tabs-w); box-sizing: border-box; width: calc(100% - var(--tabs-w) - var(--body-t)); height: var(--body-h); border-radius: var(--br); border: var(--b); padding: 0px; background: var(--body-bg); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0px; overflow: auto;][comment]-- Text --[/comment][border=transparent; box-sizing: border-box; width: calc(100% - 30px); padding: var(--body-p); color: var(--color); font-size: var(--body-f-s); line-height: 130%;][b]Name:[/b] Sushimunch [b]Favourite Food:[/b] Sushi [b]Hobby:[/b] Munching sushi [b]Message:[/b] Munching sushi is an art form of the highest degree. You are still green, young one. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet. Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit. Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet.[comment]-- Spacing --[/comment][border=transparent; box-sizing: border-box; height: calc(var(--sticker-s) - var(--body-p) - var(--body-e)); padding: 0px;][/border][/border][/border][/border][/tab] [comment]-- Tab 2 --[/comment] [tab=.][comment]-- Sushi Tabs --[/comment][border=transparent; position: absolute; top: var(--sushi-t); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + var(--sushi-d)); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (2 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (3 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent; position: absolute; top: var(--chop-t); left: var(--chop-l); width: var(--chop-s); height: var(--chop-s); float: right; padding: 0px; background: var(--chop-bg); -webkit-clip-path: var(--chop-c); clip-path: var(--chop-c); -webkit-transform: var(--chop-tr); transform: var(--chop-tr); z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent; position: absolute; top: var(--sticker-t); left: var(--sticker-l); width: var(--sticker-s); height: var(--sticker-s); padding: 0px; background: var(--sticker-2); z-index: 2;][/border][comment]-- Body --[/comment][border=transparent; position: absolute; top: var(--body-t); left: var(--tabs-w); box-sizing: border-box; width: calc(100% - var(--tabs-w) - var(--body-t)); height: var(--body-h); border-radius: var(--br); border: var(--b); padding: 0px; background: var(--body-bg); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0px; overflow: auto;][comment]-- Text --[/comment][border=transparent; box-sizing: border-box; width: calc(100% - 30px); padding: var(--body-p); color: var(--color); font-size: var(--body-f-s); line-height: 130%;]Sushimunch munch[comment]-- Spacing --[/comment][border=transparent; box-sizing: border-box; height: calc(var(--sticker-s) - var(--body-p) - var(--body-e)); padding: 0px;][/border][/border][/border][/border][/tab] [comment]-- Tab 3 --[/comment] [tab=.][comment]-- Sushi Tabs --[/comment][border=transparent; position: absolute; top: var(--sushi-t); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + var(--sushi-d)); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (2 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (3 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent; position: absolute; top: var(--chop-t); left: var(--chop-l); width: var(--chop-s); height: var(--chop-s); float: right; padding: 0px; background: var(--chop-bg); -webkit-clip-path: var(--chop-c); clip-path: var(--chop-c); -webkit-transform: var(--chop-tr); transform: var(--chop-tr); z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent; position: absolute; top: var(--sticker-t); left: var(--sticker-l); width: var(--sticker-s); height: var(--sticker-s); padding: 0px; background: var(--sticker-3); z-index: 2;][/border][comment]-- Body --[/comment][border=transparent; position: absolute; top: var(--body-t); left: var(--tabs-w); box-sizing: border-box; width: calc(100% - var(--tabs-w) - var(--body-t)); height: var(--body-h); border-radius: var(--br); border: var(--b); padding: 0px; background: var(--body-bg); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0px; overflow: auto;][comment]-- Text --[/comment][border=transparent; box-sizing: border-box; width: calc(100% - 30px); padding: var(--body-p); color: var(--color); font-size: var(--body-f-s); line-height: 130%;]Sushimunch munch munch[comment]-- Spacing --[/comment][border=transparent; box-sizing: border-box; height: calc(var(--sticker-s) - var(--body-p) - var(--body-e)); padding: 0px;][/border][/border][/border][/border][/tab] [comment]-- Tab 4 --[/comment] [tab=.][comment]-- Sushi Tabs --[/comment][border=transparent; position: absolute; top: var(--sushi-t); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + var(--sushi-d)); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (2 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (3 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent; position: absolute; top: var(--chop-t); left: var(--chop-l); width: var(--chop-s); height: var(--chop-s); float: right; padding: 0px; background: var(--chop-bg); -webkit-clip-path: var(--chop-c); clip-path: var(--chop-c); -webkit-transform: var(--chop-tr); transform: var(--chop-tr); z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent; position: absolute; top: var(--sticker-t); left: var(--sticker-l); width: var(--sticker-s); height: var(--sticker-s); padding: 0px; background: var(--sticker-4); z-index: 2;][/border][comment]-- Body --[/comment][border=transparent; position: absolute; top: var(--body-t); left: var(--tabs-w); box-sizing: border-box; width: calc(100% - var(--tabs-w) - var(--body-t)); height: var(--body-h); border-radius: var(--br); border: var(--b); padding: 0px; background: var(--body-bg); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0px; overflow: auto;][comment]-- Text --[/comment][border=transparent; box-sizing: border-box; width: calc(100% - 30px); padding: var(--body-p); color: var(--color); font-size: var(--body-f-s); line-height: 130%;]Sushimunch munch munch munch[comment]-- Spacing --[/comment][border=transparent; box-sizing: border-box; height: calc(var(--sticker-s) - var(--body-p) - var(--body-e)); padding: 0px;][/border][/border][/border][/border][/tab] [/tabs][/border] [/border][/font]
do you think I'd be able to use this as an interest check - or is it more for an IC reply?
edit; i used your code here!
Last edited:
v i o l e t
♡ ♡ ♡
also used your placeholder here! you're absolutely talented, thank you for sharing your art. 
Ambiloquous
Graphic Fanatic
how are you actually so talented??
do you think I'd be able to use this as an interest check - or is it more for an IC reply?
edit; i used your code here!
Thank you sm! And yeah, use it however you feel like — the code is for whatever you interpret it as. 
bastion
just a little guy
Would it be okay if I used the relationships tab of this code on it's own? Resource - Ami's Lab 2.0 | Mobile Friendly Freebies
I plan to only use it in PMs. I actually asked for help in how to get the section of the code working on it's own already before someone reminded be I should ask permission, so I can take down the post if needed.
I plan to only use it in PMs. I actually asked for help in how to get the section of the code working on it's own already before someone reminded be I should ask permission, so I can take down the post if needed.
Ambiloquous
Graphic Fanatic
Yeah, that’s totally fine! Feel free to take apart or rearrange my code.
Ambiloquous
Graphic Fanatic
Music Players
Specifically for SoundCloud. I made this about a year ago but never posted because I thought nobody would need something like this.The reason I added
Semi-Broken
as a tag is because on mobile, SoundCloud media elements now seem to by default redirect you to their site if you click on the element. Probably would've been better if I chose another sound file storing platform, but I didn't do that so...Semi-Broken
Music Player
No Scroll
NEXUS
Hiroyuki Sawano
Code:
[comment]-- Font -->[font=Kanit]:z[/font][/comment][border=0;
/* Probably best if you don't change anything I haven't commented next to */
position: relative;
margin: auto;
box-sizing: border-box;
height: calc(var(--b-w) + 30px);
padding: 0;
/* Increase width for longer titles/subtitles, decrease for shorter */
max-width: 250px;
/* Colours */
--c-1: #F2E416;
--c-2: #49D3F2;
--c-3: #4c94c5;
--c-4: #38577b;
--b-w: 69px;
/* Title Variables */
--t-f-s: 1.4em; /* Font size, increase by increments of .1 */
--t-f: 'Kanit', sans-serif; /* Font family, change font tag above if you change this */
/* Subtitle Variables */
--s-c: #b2d7df; /* Text colour */
--s-f-s: 0.9em; /* Font size, increase by increments of .1 */
--s-f: 'Kanit', sans-serif;/* Font family, change font tag above if you change this */
display: flex;
flex-flow: row nowrap;
align-items: center;
overflow-x: auto;][comment]
-- Button Border --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: calc(var(--b-w) + 20px);
height: calc(var(--b-w) + 20px);
border-radius: 50%;
border: 4px solid var(--c-3);
padding: 0;
display: flex;
flex-flow: row nowrap;
align-items: center;][comment]
-- Button Cover --[/comment][border=0;
position: absolute;
top: calc(50% - (var(--b-w) / 2));
left: calc(50% - (var(--b-w) / 2));
width: var(--b-w);
height: var(--b-w);
border-radius: 50%;
background: var(--c-2);
padding: 0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 2;][border=0;
position: relative;
left: 2px;
width: 30px;
height: 40px;
padding: 0;
background: var(--c-1);
clip-path: polygon(0 0, 100% 50%, 0 100%, 40% 50%);][/border][/border][comment]
-- Music Player Container --[/comment][border=0;
margin: 19px;
flex: 0 0 43px;
height: 44px;
padding: 0;
overflow: hidden;
transform: scale(1.6);
opacity: 0;
z-index: 2;][border=0;
position: relative;
top: -11px;
left: -8px;
width: 62px;
height: 54px;
padding: 0;
overflow: hidden;][comment]
-- SoundCloud Media Element --[/comment][MEDIA=soundcloud]baleygrr/promare-ost-nexus-ft-laco#track_id=625180077[/MEDIA][/border][/border][/border][comment]
-- Title --[/comment][border=0;
position: absolute;
top: 10px;
left: 60px;
box-sizing: border-box;
width: auto;
min-width: 180px;
max-width: calc(100% - 60px);
height: 50px;
background: var(--c-1);
clip-path: polygon(0% 22%, 100% 0%, calc(100% - 30px) 100%, 0% 96%);
padding: 14px 40px 0px 35px;
color: var(--c-3);
font-size: var(--t-f-s);
font-family: var(--t-f);
letter-spacing: 2px;
z-index: 1;][border=0;
display: inline;
padding: 0;]NEXUS[/border][/border][comment]
-- Subtitle --[/comment][border=0;
position: absolute;
top: 56px;
left: 60px;
box-sizing: border-box;
width: auto;
min-width: 150px;
max-width: calc(100% - 60px);
height: 30px;
background: var(--c-4);
clip-path: polygon(0% 0%, calc(100% - 14px) 4%, 100% 100%, 0% 76%);
padding: 3px 20px 0px 28px;
color: var(--s-c);
font-size: var(--s-f-s);
font-family: var(--s-f);
z-index: 0;][border=0;
display: inline;
padding: 0;]Hiroyuki Sawano[/border][/border][/border]
Code:
[comment]-- Font -->[font=Alata]:z[/font][/comment][border=0;
/* Probably best if you don't change anything I haven't commented next to */
position: relative;
margin: auto;
box-sizing: border-box;
height: 84px;
padding: 0;
/* Increase width for longer titles/subtitles, decrease for shorter */
max-width: 460px;
/* Colours */
--c-0: #F2B3CA;
--c-1: rgba(220, 70, 240);
--c-2: rgba(100, 70, 230);
--c-3: rgba(160, 70, 240);
--c-t: white; /* Text + Icon colour */
/* Left Text Variables */
--l-f-s: clamp(11px, 2.8vw, 1.1em); /* Font size, increase by increments of .1 */
--l-f: 'Alata', sans-serif; /* Font family, change font tag above if you change this */
/* Right Text Variables */
--r-f-s: clamp(11px, 2.8vw, 1.1em); /* Font size, increase by increments of .1 */
--r-f: 'Alata', sans-serif;/* Font family, change font tag above if you change this */
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
overflow-y: hidden;
overflow-x: auto;][comment]
-- Diamond --[/comment][border=0;
--w: 84px;
position: absolute;
top: 0;
left: calc(50% - (var(--w) / 2));
width: var(--w);
height: var(--w);
padding: 0;
background: radial-gradient(var(--c-0) -30%, var(--c-1) 40%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
pointer-events: none;
z-index: 2;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=0;
position: relative;
left: 4px;
padding: 0;
color: var(--c-t);
font-size: 26px;][fa]far fa-play[/fa][/border][/border][comment]
-- Left Text --[/comment][border=0;
--h: 38px;
--gap: 32px;
box-sizing: border-box;
position: absolute;
top: calc(50% - (var(--h) / 2));
left: 0;
width: calc(50% - var(--gap));
height: var(--h);
padding: 10px calc((var(--h) / 2) + 10px);
background: linear-gradient(to right, var(--c-2) 40%, var(--c-3));
clip-path: polygon(100% 0%, calc(100% - (var(--h) / 2)) 50%, 100% 100%, calc((var(--h) / 2) + 10px) 100%, 0% 50%, calc((var(--h) / 2) + 10px) 0%);
z-index: 1;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][border=0;
padding: 0;
color: var(--c-t);
font-size: var(--l-f-s);
font-family: var(--l-f);]Swarms of Song[/border][/border][comment]
-- Right Text --[/comment][border=0;
--h: 38px;
--gap: 32px;
box-sizing: border-box;
position: absolute;
top: calc(50% - (var(--h) / 2));
left: calc(50% + var(--gap));
width: calc(50% - var(--gap));
height: var(--h);
padding: 10px calc((var(--h) / 2) + 10px);
background: linear-gradient(to left, var(--c-2) 40%, var(--c-3));
clip-path: polygon(calc(100% - (var(--h) / 2) - 10px) 0%, 100% 50%, calc(100% - (var(--h) / 2) - 10px) 100%, 0% 100%, calc((var(--h) / 2)) 50%, 0% 0%);
z-index: 1;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][border=0;
padding: 0;
color: var(--c-t);
font-size: var(--r-f-s);
font-family: var(--r-f);
text-overflow: ellipsis;]Belle (2021)[/border][/border][comment]
-- Music Player Container --[/comment][border=0;
flex: 0 0 43px;
height: 44px;
padding: 0;
overflow: hidden;
transform: scale(2);
opacity: 0;
z-index: 1;][border=0;
position: relative;
top: -11px;
left: -8px;
width: 62px;
height: 54px;
padding: 0;
overflow: hidden;][comment]
-- SoundCloud Media Element --[/comment][MEDIA=soundcloud]belle18977/swarms-of-song#track_id=1183724368[/MEDIA][/border][/border][/border]
. D O V E
Birb™
u are perfect in every shape, way, and form and so are ur codes
Ambiloquous
Graphic Fanatic
I think ur talking about u smh 