REPEAT

[comment]coded by xayah.ღ -- feel free to message me if you have any problems ![/comment]
[border=0;

/*VARIABLES*/
--music_cover: url('URL HERE') 50%/cover;
--faceclaim: url('URL HERE') 50% 0%/cover;

/*COLORS -- change as desired*/
--bg: transparent;
--accent: #660c21;
--border: 3px solid #000;
--text: #000;
--box_shadow: 3px 4px 0 #470817;

/*FONT USED -- to actually change, ctrl+F and search bitter, then replace with a Google Font of your choice*/
--font: Bitter;

height: 345px; width: 300px; padding: 0; line-height: 0; display: flex; justify-content: center; margin: auto; background: var(--bg); overflow: hidden;][border=1px solid blue; height: 20px; width: 80%; padding: 0; overflow: hidden; margin-top: 300px; letter-spacing: 20px;][tabs]

[tab=a.]
[comment]--- ICON ---[/comment]
[bg=0; border: var(--border); height: calc(400px*.55); width: 300px; padding: 0; background: var(--music_cover); position: absolute; margin: -356.5px 0 0 -53px; animation: 1s fa-flip; animation-iteration-count: 1; overflow: hidden;][/bg]

[comment]--- SONG NO. 1---[/comment]
[border=0; height: 100px; width: 280px; margin-left: -50px; margin-top: -120px; padding: 5px 10px; background: var(--accent); position: absolute; border-radius: 25px; pointer-events: none; box-shadow: var(--box_shadow); overflow: hidden;]

[comment]--- SONG NAME ---[/comment]
[border=0; height: 25px; width: 90%; padding: 0 10px; font-size: 20px; color: var(--text); position: relative; line-height: 20px; text-align: center; letter-spacing: 2px; text-transform: uppercase;][font=Bitter]song name
[/font][/border]

[comment]--- SONG ARTIST ---[/comment]
[border=0; height: 20px; width: 220px; padding: 0 10px; font-size: 12px; color: var(--text); position: relative; line-height: 5px; text-align: center; letter-spacing: 2px; display: block; margin-left: 20px; border-bottom: 1px solid black;][font=Bitter]—artist
[/font][/border]
[div=height: auto; width: 240px; color: var(--text); font-size: 8px; margin-top: 0px; margin-left: 0px; letter-spacing: 0;]1:48[/div]
[div=height: auto; width: 240px; color: var(--text); font-size: 8px; margin-top: -4px; margin-left: 180px;][fa]fas fa-circle[/fa][/div]
[div=height: auto; width: 240px; color: var(--text); font-size: 8px; margin-top: -4px; margin-left: 265px; letter-spacing: 0;]2:33[/div]

[comment]music player - ignore [/comment]
[border=0; height: 50px; width: clamp(90%, 250px 102%); padding: 0 0 5px 0; background: transparent; margin-top: 0px; pointer-events: none; display: flex; flex-flow: column wrap; align-items: center; position: absolute;][border=0; height: 25px; width: 50px; padding: 0; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: auto; flex-flow: column nowrap; margin: auto;][border=0; height: 80%; width: 300px; margin-left: 145px; margin-top: 0px; padding: 0; pointer-events: none; font-size: 25px; z-index: 4; color: var(--text); word-spacing: 0px; text-align: right; background: var(--accent);][border=none; pointer-events: auto; float: left; margin-left: 100px; margin-top: -10px;][fa]fas fa-backward[/fa][/border] [fa]fas fa-play[/fa] [fa]fas fa-forward[/fa][/border]
[border=0; height:15px; width:20px; padding:0; left: 0; position: absolute; overflow: hidden; margin-left: 136px; margin-top: 0px;]

[comment]--- SOUNDCLOUD -- put any soundcloud available music you want here! ---[/comment]
[border=1px solid blue; height:100px; width: 30px; padding: 0; margin-top:-30px; position: absolute; float: center; top: 0%; pointer-events: auto; opacity: 0.5;]
   [media=soundcloud]https://soundcloud.com/szababy2/kill-bill[/media]
[/border][/border][/border][/border]

[/border]
[/tab]

[tab=b.]
[border=0; background: var(--bg); height: 345px; width: 300px; padding: 5px; line-height: 0; display: flex; justify-content: center; margin: auto; overflow: hidden; position: absolute; margin-left: -55px; margin-top: -359px; pointer-events: none;]

[comment]--- ICON ---[/comment]
[bg=0; border: var(--border); height: calc(400px*.55); width: 300px; padding: 0; background: var(--faceclaim); position: absolute; margin: -2.5px 0 0 0; animation: 1s fa-flip; animation-iteration-count: 1; overflow: hidden;][/bg]

[comment]--- INFO CARD ---[/comment]
[border=0; height: 100px; width: 280px; margin-left: 0; margin-top: 234px; padding: 5px 10px; background: var(--accent); position: absolute; border-radius: 25px; pointer-events: none; box-shadow: var(--box_shadow); overflow: hidden;]

[comment]--- NAME ---[/comment]
[border=0; height: 25px; width: 90%; padding: 0 10px; font-size: 20px; color: var(--text); position: relative; line-height: 20px; text-align: center; letter-spacing: 2px; text-transform: uppercase;][font=Bitter]FIRST LAST
[/font][/border]

[comment]--- FACECLAIM ---[/comment]
[border=0; height: 20px; width: 220px; padding: 0 10px; font-size: 10px; color: var(--text); position: relative; line-height: 5px; text-align: center; letter-spacing: 2px; display: block; margin-left: 20px; border-bottom: 1px solid black;][font=Bitter]— faceclaim
[/font][/border]

[comment]--- SYMBOL - change using font awesome icons ---[/comment]
[border=0; height: 50px; width: 45%; padding: 0; text-align: center; float: left; font-size: 25px; color: var(--text); display: flex; align-items: center; justify-content: center; margin-left: 15px; border-right: var(--border); ][fa]fa-solid fa-sparkles[/fa][/border]

[comment]--- ROLE ---[/comment]
[border=0; height: 50px; width: 45%; padding: 0; text-align: center; float: left; font-size: 15px; color: var(--text); display: flex; align-items: center; justify-content: center; line-height: 25px; word-spacing: 0; letter-spacing: 0; pointer-events: auto;][font=Bitter]role here[/font][/border]
[/border]

[/border]
[/tab][/tabs][/border]
[/border]
[border=0; height: 30px; width: fit-content; color: #808080; font-size: 10px; margin: auto; margin-top: -20px; padding: 0; text-align: center;][font=Karla]coded by xayah.ღ[/font][/border]