• 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 codes // wonhae

.
[class=overlay] height: 400px; width: 400px; margin: auto; background-colour: transparent; z-index: 1; [/class] [class name=overlay state=hover] cursor: url(https://i.imgur.com/kphxwZq.png), auto; [/class] [class=bg] height: 300px; width: 300px; background-color: #DEF1F8; position: relative; border-radius: 8px; padding: 3px; margin: auto; [/class] [class=content] box-sizing: border-box; text-align: justify; z-index: 1; [/class] [class=hidden] display: none; [/class] [class=home] height: 40px; width: 40px; margin-left: -25px; margin-top: 60px; border-radius: 50%; overflow: hidden; background-color: #fdfdfd; border: 5px solid #def1f8; [/class] [class=nav_home] font-size: 24px; color: #def1f8; text-align: center; margin-top: 4px; transition: 0.4s; z-index: 1; [/class] [class name=nav_home state=hover] cursor: url(https://i.imgur.com/kphxwZq.png), auto; transform: scale(1.3); transition: 0.4s; [/class] [class=info] height: 40px; width: 40px; margin-left: -25px; margin-top: 10px; border-radius: 50%; overflow: hidden; background-color: #fdfdfd; border: 5px solid #def1f8; position: relative; [/class] [class=nav_info] font-size: 24px; color: #def1f8; text-align: center; margin-top: 4px; transition: 0.4s; [/class] [class name=nav_info state=hover] cursor: url(https://i.imgur.com/kphxwZq.png), auto; transform: scale(1.3); transition: 0.4s; [/class] [class=links] height: 40px; width: 40px; margin-left: -25px; margin-top: 10px; border-radius: 50%; overflow: hidden; background-color: #fdfdfd; border: 5px solid #def1f8; [/class] [class=nav_links] font-size: 25px; color: #def1f8; text-align: center; margin-top: 4px; margin-left: 0px; transition: 0.4s; [/class] [class name=nav_links state=hover] cursor: url(https://i.imgur.com/kphxwZq.png), auto; transform: scale(1.3); transition: 0.4s; [/class] [class=title] font-size: 52px; font-family: 'Arial', sans-serif; margin-top: 30px; margin-left: 113px; color: white; letter-spacing: 1px; position: absolute; font-weight: bold; font-style: italic; z-index: 1; [/class] [class=title_bg] font-size: 52px; font-family: 'Arial', sans-serif; margin-top: 33px; margin-left: 116px; color: #def1f8; letter-spacing: 1px; position: absolute; font-weight: bold; font-style: italic; [/class] [class name=title state=hover] cursor: url(https://i.imgur.com/kphxwZq.png), auto; [/class] [class=textbg] background-color: #fdfdfd; height: 170px; width: 180px; margin-top: -170px; margin-left: 65px; position: relative; border-radius: 8px; z-index: 0; overflow: hidden; [/class] [class=text] width: 160px; height: 150px; margin: 10px; font-size: 10px; padding-right: 30px; font-family: 'Arial', sans-serif; color: black; text-align: justify; overflow-y: scroll; line-height: 13px; opacity: 0.6; letter-spacing: 0.4px; [/class] [class=infotitle] color: #fdfdfd; font-size: 42px; font-family: 'Arial', sans-serif; font-style: italic; font-weight: bold; position: absolute; margin-top: -30px; margin-left: 50px; z-index: 10; [/class] [class=infotitle_bg] color: #def1f8; font-size: 42px; font-family: 'Arial', sans-serif; font-style: italic; font-weight: bold; position: absolute; margin-top: -26px; margin-left: 52px; z-index: 1; [/class] [class=linktext] font-size: 10px; font-style: italic; [/class] [class name=linktext state=hover] cursor: pointer; [/class] [class=frontimage] width: 177px; height: 177px; background-color: transparent; position: absolute; margin-left: 68px; margin-top: -170px; border-radius: 8px; overflow: hidden; opacity: 0.7; pointer-events: none; [/class] [class name=frontimage state=hover] cursor: url(https://i.imgur.com/kphxwZq.png), auto; [/class] [script class=home on=click] hide content set link (getText) if (eq "${link}" "1") (show content1) [/script] [script class=info on=click] hide content set link (getText) if (eq "${link}" "2") (show content2) [/script] [script class=links on=click] hide content set link (getText) if (eq "${link}" "3") (show content3) [/script] [div class=overlay]

[div class=bg] [div class=home][div class=hidden]1[/div] [div class=nav_home][/div] [/div] [div class=info][div class=hidden]2[/div] [div class=nav_info][/div] [/div] [div class=links][div class=hidden]3[/div] [div class=nav_links][/div] [/div] [div class=title]wonhae[/div] [div class=title_bg]wonhae[/div] [div class="content content1"] [div class=frontimage]
tumblr_ot1mz9gL8l1u6h6bqo5_250.gif
[/div] [/div] [div class="content content2 hidden"] [div class=infotitle]info[/div][div class=infotitle_bg]info[/div] [div class=textbg] [div class=text]
Welcome to my workshop! I made a resource/workshop thread a while ago on a different account; I was actually in the process of doing an Instagram duplicate on that thread. But then BBCode+ came out and I have been messing around with that.

This thread is going to be a dump for all my codes, and most likely none will be free to use. Or at least, I would prefer if people didn't use them freely. If you do use my codes, keep the credit in. I can't stop you using it, as I've learnt, but I would appreciate it if you credited my hard work back to this thread.

As you can see, this is a pretty basic code itself. I suck at aesthetics. My inspiration has been lacking lately so don't expect much from this thread. And as of right now, my Instagram duplicate code is taking up most of my time.

Anyway, check the links tab for shortcuts to the codes I have posted!
[/div] [/div] [/div] [div class="content content3 hidden"] [div class=infotitle]links[/div][div class=infotitle_bg]links[/div] [div class=textbg] [div class=text]
- None of these codes have been made specifically for mobile. They should be compatible with mobile but they certainly wont be optimized for mobile use.

- I am also using the Light RPNation theme and my display is zoomed out to 80% so, but the codes should work on all display sizes/themes.

[div class=linktext]code one

[div class=linktext]code two[/div]
[div class=linktext]code three[/div]
[div class=linktext]code four[/div] [/div][/div] [/div] [/div] [/div] [/div]
 
Last edited:
[class=main] height: 90px; width: 200px; border-radius: 10px; overflow: hidden; background-color: white; margin: auto; margin-top: 10px; border: 10px solid #DEF1F8; [/class] [class name=main state=hover] cursor: default; [/class] [class=textbox] padding-right: 100px; overflow-y: scroll; height: 90px; width: 200px; [/class] [class name=textbox state=hover] cursor: default; [/class] [class=text] font-size: 12px; color: black; line-height: 15px; letter-spacing: 0px; font-family: 'Arial', sans-serif; text-align: justify; padding: 10px; opacity: 0.6; [/class] [class name=text state=hover] cursor: default; [/class] [div class=main] [div class=textbox] [div class=text]because of the size of the post, ive put it in the following post, fyi.

okay so. this code took forever and is probably the most complicated code ive done yet, except for maybe my insta-copy code. ahh, anyway, this isn't free to use. i understand bbcode is creative commons, so do whatever, but i'd prefer if no one used this. it took a hell of a long time and a lot of effort and honestly, i'm super proud of it.

it is also super glitchy, maybe. i mean. it works fine for me, so far. i use chrome and it seems to work fine. i had to switch over from safari because the filters and the transitions were acting up, so keep that in mind. alsooooo the gallery section, if you wanna reset the images back to the first image (to scroll through them again bc who wouldn't want to look at him more), you have to close the section and open it again.. i couldn't figure out the gallery style i originally wanted. so when i do figure that out, i might edit it in.

goldleaf goldleaf thank u for putting up with me whilst i made this, ily [/div] [/div] [/div]
 
Last edited:
[div class=hidden].[/div] [class=container] height: 600px; width: 800px; background-color: transparent; margin: auto; border: solid 3px transparent; [/class] [class=hidden] display: none; z-index: -10; transition: 1s; [/class] [class=para] font-size: 12px; color: black; text-align: justify; padding: 10px; opacity: 1; [/class] [class=first_box] height: 260px; width: 260px; background-color: white; position: absolute; z-index: 10; opacity: 0; transition: 2s; box-shadow: 4px 4px 3px lightgray; [/class] [class=first_image] height: 260px; width: 260px; position: absolute; z-index: 1; opacity: 0; border-radius: 0px; overflow: hidden; transition: 2s; [/class] [class=overlay_box] width: 260px; height: 260px; position: absolute; z-index: 0; margin-top: 170px; margin-left: 270px; transition: opacity 1s , -webkit-filter 4s; opacity: 0; -webkit-filter: grayscale(0%); background-color: transparent; [/class] [class name=overlay_box state=hover] -webkit-filter: grayscale(100%); transition: 4s; [/class] [class=showbox] opacity: 1; transition: 2s; [/class] [class=box_one] height: 120px; width: 120px; margin-left: 270px; margin-top: 170px; position: absolute; border-radius: 100%; background-color: transparent; overflow: hidden; transition: 1s; z-index: 1; opacity: 0; transform: translate(70px,70px) rotate(-90deg) scale(0.2); [/class] [class=one_move] transform: translate(0px,0px) rotate(0deg) scale(1); border-radius: 5%; opacity: 1; transition: transform 1s , border-radius 1s , opacity 1s; transition-delay: 0.3s; opacity: 1; [/class] [class=box_two] height: 120px; width: 120px; margin-left: 410px; margin-top: 170px; position: absolute; border-radius: 100%; overflow: hidden; transition: 1s; opacity: 0; z-index: 0; background-color: transparent; transform: translate(-70px,70px) rotate(90deg) scale(0.2); [/class] [class=two_move] transform: translate(0px,0px) rotate(0deg) scale(1); border-radius: 5%; transition: transform 1s , border-radius 1s , opacity 1s; transition-delay: 0.5s; opacity: 1; [/class] [class=box_three] height: 120px; width: 120px; margin-left: 270px; margin-top: 310px; position: absolute; border-radius: 100%; overflow: hidden; transition: 1s; opacity: 0; z-index: 0; background-color: transparent; transform: translate(70px,-70px) rotate(90deg) scale(0.2); [/class] [class=three_move] transform: translate(0px,0px) rotate(0deg) scale(1); border-radius: 5%; transition: transform 1s , border-radius 1s , opacity 1s; transition-delay: 0.7s; opacity: 1; [/class] [class=box_four] height: 120px; width: 120px; margin-left: 410px; margin-top: 310px; position: absolute; border-radius: 100%; overflow: hidden; transition: 1s; opacity: 0; z-index: 0; background-color: transparent; transform: translate(-70px,-70px) rotate(-90deg) scale(0.2); [/class] [class=four_move] transform: translate(0px,0px) rotate(0deg) scale(1); border-radius: 5%; transition: transform 1s , border-radius 1s , opacity 1s; transition-delay: 0.9s; opacity: 1; [/class] [class=boxbgone] background-color: rgba(255, 255, 255, 0.0); opacity: 0; height: 120px; width: 120px; transform: scale(0.5); transition: 2s 0.5s; z-index: 1; position: absolute; border-radius: 28px; [/class] [class=bgfadeone] opacity: 1; background-color: rgba(255, 255, 255, 0.6); transform: scale(1.1); transition: transform 1s , opacity 1.5s , border-radius 2s , background-color 0.7s; border-radius: 8px; [/class] [class=bgtextone] font-size: 14px; color: white; z-index: -10; text-align: center; opacity: 0; transition: 1s; margin-top: 50px; margin-left: 26px; font-variant: lowercase; font-style: italic; letter-spacing: 1px; font-weight: bold; position: absolute; background-color: black; height: 20px; width: 70px; transform: scale(0.8); pointer-events: none; [/class] [class=textfadeone] opacity: 1; transition: opacity 1s , transform 0s; z-index: 1; transform: scale(1); pointer-events: auto; [/class] [class name=bgtextone state=hover] cursor: pointer; [/class] [class=closeone] font-size: 14px; color: white; z-index: -10; text-align: center; opacity: 0; transition: 1s; margin-top: 50px; margin-left: 26px; font-variant: lowercase; font-style: italic; letter-spacing: 1px; font-weight: bold; position: absolute; transition: 1s; background-color: black; height: 20px; width: 70px; transform: scale(0.8); pointer-events: none; [/class] [class=showclose] opacity: 1; transition: 1s; z-index: 10; transform: scale(1); pointer-events: auto; [/class] [class name=closeone state=hover] cursor: pointer; [/class] [class=boxbgtwo] background-color: rgba(255, 255, 255, 0); opacity: 0; height: 120px; width: 120px; transform: scale(0.5); transition: 2s 0.5s; z-index: 1; position: absolute; border-radius: 28px; [/class] [class=bgfadetwo] opacity: 1; background-color: rgba(255, 255, 255, 0.6); transform: scale(1.1); transition: transform 1s , opacity 1.5s , border-radius 2s , background-color 0.7s; border-radius: 8px; [/class] [class=bgtexttwo] font-size: 14px; color: white; z-index: -1; text-align: center; opacity: 0; transition: 1s; margin-top: 50px; margin-left: 26px; font-variant: lowercase; font-style: italic; letter-spacing: 1px; font-weight: bold; position: absolute; background-color: black; height: 20px; width: 70px; transform: scale(0.8); pointer-events: none; [/class] [class=textfadetwo] opacity: 1; transition: opacity 1s , transform 0s; z-index: 1; transform: scale(1); pointer-events: auto; [/class] [class name=bgtexttwo state=hover] cursor: pointer; [/class] [class=closetwo] font-size: 14px; color: white; z-index: -1; text-align: center; opacity: 0; transition: 1s ; margin-top: 50px; margin-left: 26px; font-variant: lowercase; font-style: italic; letter-spacing: 1px; font-weight: bold; position: absolute; transition: 1s; background-color: black; height: 20px; width: 70px; transform: scale(0.8); pointer-events: none; [/class] [class=showclosetwo] opacity: 1; transition: 1s; z-index: 10; transform: scale(1); pointer-events: auto; [/class] [class name=closetwo state=hover] cursor: pointer; [/class] [class=boxbgthree] background-color: rgba(255, 255, 255, 0); opacity: 0; height: 120px; width: 120px; transform: scale(0.5); transition: 2s 0.5s; z-index: 1; position: absolute; border-radius: 28px; [/class] [class=bgfadethree] opacity: 1; background-color: rgba(255, 255, 255, 0.6); transform: scale(1.1); transition: transform 1s , opacity 1.5s , border-radius 2s , background-color 0.7s; border-radius: 8px; [/class] [class=bgtextthree] font-size: 14px; color: white; z-index: -1; text-align: center; opacity: 0; transition: 1s; margin-top: 50px; margin-left: 26px; font-variant: lowercase; font-style: italic; letter-spacing: 1px; font-weight: bold; position: absolute; background-color: black; height: 20px; width: 70px; transform: scale(0.8); pointer-events: none; [/class] [class=textfadethree] opacity: 1; transition: opacity 1s , transform 0s; z-index: 1; transform: scale(1); pointer-events: auto; [/class] [class name=bgtextthree state=hover] cursor: pointer; [/class] [class=closethree] font-size: 14px; color: white; z-index: -1; text-align: center; opacity: 0; transition: 1s; margin-top: 50px; margin-left: 26px; font-variant: lowercase; font-style: italic; letter-spacing: 1px; font-weight: bold; position: absolute; transition: 1s; background-color: black; height: 20px; width: 70px; transform: scale(0.8); pointer-events: none; [/class] [class=showclosethree] opacity: 1; transition: 1s; z-index: 10; transform: scale(1); pointer-events: auto; [/class] [class name=closethree state=hover] cursor: pointer; [/class] [class=boxbgfour] background-color: rgba(255, 255, 255, 0); opacity: 0; height: 120px; width: 120px; transform: scale(0.5); transition: 2s 0.5s; z-index: 1; position: absolute; border-radius: 28px; [/class] [class=bgfadefour] opacity: 1; background-color: rgba(255, 255, 255, 0.6); transform: scale(1.1); transition: transform 1s , opacity 1.5s , border-radius 2s , background-color 0.7s; border-radius: 8px; [/class] [class=bgtextfour] font-size: 14px; color: white; z-index: -1; text-align: center; opacity: 0; transition: 1s; margin-top: 50px; margin-left: 26px; font-variant: lowercase; font-style: italic; letter-spacing: 1px; font-weight: bold; position: absolute; background-color: black; height: 20px; width: 70px; transform: scale(0.8); pointer-events: none; [/class] [class=textfadefour] opacity: 1; transition: opacity 1s; z-index: 1; transform: scale(1); pointer-events: auto; [/class] [class name=bgtextfour state=hover] cursor: pointer; [/class] [class=closefour] font-size: 14px; color: white; z-index: -1; text-align: center; opacity: 0; transition: 1s; margin-top: 50px; margin-left: 26px; font-variant: lowercase; font-style: italic; letter-spacing: 1px; font-weight: bold; position: absolute; transition: 1s; background-color: black; height: 20px; width: 70px; transform: scale(0.8); pointer-events: none; [/class] [class=showclosefour] opacity: 1; transition: 1s; z-index: 10; transform: scale(1); pointer-events: auto; [/class] [class name=closefour state=hover] cursor: pointer; [/class] [class=closeall] font-size: 14px; color: white; z-index: 1; text-align: center; opacity: 0; transition: 0.5s; margin-top: 445px; margin-left: 350px; font-variant: lowercase; font-style: italic; letter-spacing: 1px; font-weight: bold; position: absolute; transition: 1s; background-color: black; height: 22px; width: 100px; [/class] [class=showcloseall] opacity: 1; transition: 2s; transition-delay: 0.5s; z-index: 10; [/class] [class name=closeall state=hover] cursor: pointer; [/class] [class=back] font-size: 14px; color: white; z-index: 1; text-align: center; opacity: 0; transition: 0.5s; margin-top: 445px; margin-left: 350px; font-variant: lowercase; font-style: italic; letter-spacing: 1px; font-weight: bold; position: absolute; transition: 1s; background-color: black; height: 22px; width: 100px; [/class] [class=showback] opacity: 1; transition: 2s; transition-delay: 0.5s; z-index: 10; [/class] [class name=back state=hover] cursor: pointer; [/class] [class=hideboxes] opacity: 0; pointer-events: none; transition: 1s; [/class] [class=front_line] background-color: black; height: 32px; width: 100px; position: absolute; margin-top: 40px; margin-left: 150px; z-index: 10; opacity: 1; [/class] [class=front_text] font-size: 22px; color: white; font-style: italic; font-weight: bold; font-variant: lowercase; text-align: center; padding-top: -3px; font-family: 'Arial', sans-serif; letter-spacing: 1px; [/class] [class name=front_line state=hover] cursor: pointer; [/class] [class name=front_text state=hover] cursor: pointer; [/class] [class=header_one] background-color: black; height: 30px; width: 0px; margin-left: 20px; margin-top: 30px; position: absolute; opacity: 1; transition: 2s 1.9s ease-in-out; [/class] [class=headerone_text] font-size: 24px; color: white; font-style: italic; font-weight: bold; letter-spacing: 1px; font-family: 'Arial', sans-serif; text-align: center; opacity: 0; transition: 1.5s 1s; [/class] [class name=headerone_text state=hover] cursor: default; [/class] [class=header_two] background-color: black; height: 30px; width: 0px; margin-left: 550px; margin-top: 30px; position: absolute; opacity: 1; transition: 2s 1.9s ease-in-out; [/class] [class=headertwo_text] font-size: 24px; color: white; font-style: italic; font-weight: bold; letter-spacing: 1px; font-family: 'Arial', sans-serif; text-align: center; opacity: 0; transition: 1.5s 1s; [/class] [class name=headertwo_text state=hover] cursor: default; [/class] [class=header_three] background-color: black; height: 30px; width: 0px; margin-left: 20px; margin-top: 313px; position: absolute; opacity: 1; transition: 2s 1.9s ease-in-out; [/class] [class=headerthree_text] font-size: 24px; color: white; font-style: italic; font-weight: bold; letter-spacing: 1px; font-family: 'Arial', sans-serif; text-align: center; opacity: 0; transition: 1.5s 1s; [/class] [class name=headerthree_text state=hover] cursor: default; [/class] [class=header_four] background-color: black; height: 30px; width: 0px; margin-left: 550px; margin-top: 313px; position: absolute; opacity: 1; transition: 2s 1.9s ease-in-out; [/class] [class=headerfour_text] font-size: 24px; color: white; font-style: italic; font-weight: bold; letter-spacing: 1px; font-family: 'Arial', sans-serif; text-align: center; opacity: 0; transition: 1.5s 1s; [/class] [class name=headerfour_text state=hover] cursor: default; [/class] [class=box_1] height: 0px; width: 220.5px; background-color: white; margin-top: 60px; margin-left: 20px; position: absolute; border-left: solid 5px black; border-right: solid 5px black; overflow: hidden; transition: height 2s ease-in-out , border-bottom 0.3s 1.9s; border-bottom: solid 0px black; [/class] [class=title1] color: black; font-size: 18px; font-weight: bold; font-style: italic; position: absolute; margin-left: 10px; margin-top: 10px; opacity: 0; font-family: 'Arial', sans-serif; transform: translateX(-50px); transition: 0s 4s; [/class] [class name=title1 state=hover] cursor: default; [/class] [class=para1] font-size: 13px; font-family: 'Arial', sans-serif; margin-left: 20px; margin-top: 35px; opacity: 0; position: absolute; letter-spacing: 0.5px; line-height: 20px; transition: 0s 4s; [/class] [class name=para1 state=hover] cursor: default; [/class] [class=musicplayer] height: 30px; width: 185px; background-color: black; position: absolute; margin-top: 180px; margin-left: 18px; overflow: hidden; opacity: 0; transition: 0s 4s; [/class] [class=soundcloud] height: 20px; width: 20px; position: relative; overflow: hidden; margin-left: 89px; margin-top: 5px; -webkit-filter: brightness(90%) grayscale(100%) contrast(500%); transform: scale(0.75); [/class] [class=skipback] font-size: 14px; color: white; margin-left: 48px; margin-top: 5.5px; position: absolute; z-index: 1; [/class] [class name=skipback state=hover] cursor: pointer; [/class] [class=skipforward] font-size: 14px; color: white; margin-left: 138px; margin-top: 5.5px; position: absolute; z-index: 1; [/class] [class name=skipforward state=hover] cursor: pointer; [/class] [class=nowplaying] font-size: 14px; font-weight: bold; font-style: italic; margin-left: 30px; margin-top: 155px; position: absolute; color: black; font-family: 'Arial', sans-serif; letter-spacing: 0.5px; opacity: 0; transition: 0s 4s; [/class] [class name=nowplaying state=hover] cursor: default; [/class] [class=box_2] height: 0px; width: 220.5px; background-color: white; margin-top: 60px; margin-left: 550px; position: absolute; border-left: solid 5px black; border-right: solid 5px black; overflow: hidden; transition: height 2s ease-in-out , border-bottom 0.3s 1.9s; border-bottom: solid 0px black; [/class] [class=title2] color: black; font-size: 18px; font-weight: bold; font-style: italic; position: absolute; margin-left: 10px; margin-top: 10px; opacity: 0; font-family: 'Arial', sans-serif; transform: translateX(-50px); transition: 0s 4s; [/class] [class name=title2 state=hover] cursor: default; [/class] [class=title3] color: black; font-size: 18px; font-weight: bold; font-style: italic; position: absolute; margin-left: 10px; margin-top: 120px; opacity: 0; font-family: 'Arial', sans-serif; transform: translateX(-50px); transition: 0s 4s; [/class] [class name=title3 state=hover] cursor: default; [/class] [class=title4] color: black; font-size: 18px; font-weight: bold; font-style: italic; position: absolute; margin-left: 110px; margin-top: 120px; opacity: 0; font-family: 'Arial', sans-serif; transform: translateX(-110px); transition: 0s 4s; [/class] [class name=title4 state=hover] cursor: default; [/class] [class=para2] height: 80px; width: 185px; background-color: transparent; font-size: 13px; font-family: 'Arial', sans-serif; margin-left: 20px; margin-top: 35px; opacity: 0; position: absolute; letter-spacing: 0.5px; line-height: 15px; overflow-y: scroll; padding-right: 40px; text-align: justify; transition: 0s 4s; [/class] [class name=para2 state=hover] cursor: default; [/class] [class=para3] background-color: transparent; height: 70px; width: 40px; font-size: 13px; font-family: 'Arial', sans-serif; margin-left: 20px; margin-top: 145px; opacity: 0; position: absolute; letter-spacing: 0.5px; line-height: 15px; overflow-y: scroll; padding-right: 500px; text-align: justify; transition: 0s 4s; [/class] [class name=para3 state=hover] cursor: default; [/class] [class=para4] background-color: transparent; height: 70px; width: 60px; font-size: 13px; font-family: 'Arial', sans-serif; margin-left: 120px; margin-top: 145px; opacity: 0; position: absolute; letter-spacing: 0.5px; line-height: 15px; overflow-y: scroll; padding-right: 500px; text-align: justify; transition: 0s 4s; [/class] [class name=para4 state=hover] cursor: default; [/class] [class=box_3] height: 0px; width: 220.5px; background-color: white; margin-top: 343px; margin-left: 20px; position: absolute; border-left: solid 5px black; border-right: solid 5px black; overflow: hidden; transition: height 2s ease-in-out , border-bottom 0.3s 1.9s; border-bottom: solid 0px black; [/class] [class=title5] color: black; font-size: 18px; font-weight: bold; font-style: italic; position: absolute; margin-left: 10px; margin-top: 10px; opacity: 0; font-family: 'Arial', sans-serif; transform: translateX(-110px); transition: 0s 4s; [/class] [class name=title5 state=hover] cursor: default; [/class] [class=para5] background-color: transparent; height: 178px; width: 185px; font-size: 13px; font-family: 'Arial', sans-serif; margin-left: 20px; margin-top: 35px; opacity: 0; position: absolute; letter-spacing: 0.5px; line-height: 15px; overflow-y: scroll; padding-right: 500px; text-align: justify; transition: 0s 4s; [/class] [class name=para5 state=hover] cursor: default; [/class] [class=box_4] height: 0px; width: 220.5px; background-color: white; margin-top: 343px; margin-left: 550px; position: absolute; border-left: solid 5px black; border-right: solid 5px black; overflow: hidden; transition: height 2s ease-in-out , border-bottom 0.3s 1.9s; border-bottom: solid 0px black; [/class] [class=imagebox] height: 200px; width: 200px; background-color: transparent; margin-left: 10px; margin-top: 12px; position: absolute; overflow: hidden; opacity: 0; -webkit-filter: grayscale(100%); transition: filter 2s , opacity 3s 4s; [/class] [class name=imagebox state=hover] -webkit-filter: grayscale(0%); transition: 2s; cursor: pointer; [/class] [class=image1] background-image: url('https://im5.ezgif.com/tmp/ezgif-5-462af4d332.jpg'); opacity: 1; transition: 1s 1s; [/class] [class=image2] background-image: url('https://im5.ezgif.com/tmp/ezgif-5-e506480ad5.jpg'); opacity: 1; transition: 1s 1s; [/class] [class=image3] background-image: url('https://im5.ezgif.com/tmp/ezgif-5-5fab3c40d8.jpg'); transition: 1s 1s; [/class] [class=image4] background-image: url('https://im5.ezgif.com/tmp/ezgif-5-9fe7c3854a.png'); transition: 1s 1s; [/class] [class=image5] background-image: url('https://im5.ezgif.com/tmp/ezgif-5-0381d1ca2e.jpg'); transition: 1s 1s; [/class] [class=image6] background-image: url('https://im5.ezgif.com/tmp/ezgif-5-459463cb4c.png'); transition: 1s 1s; [/class] [class=transform] height: 225px; transition: height 1.5s 2s ease-out , border-bottom 0.1s 2s; border-bottom: solid 5px black; [/class] [class=reveal] width: 230px; transition: 1.5s 0.5s ease-out; [/class] [class=text_reveal] opacity: 1; transition: opacity 2s 1.2s; [/class] [class=text_reveal1] opacity: 1; transition: opacity 1s 3s; [/class] [class=title_reveal1] opacity: 1; transition: opacity 1s 2.8s , transform 1.1s 2.7s; transform: translateX(0); [/class] [class=title_reveal2] opacity: 1; transition: opacity 1s 3.3s , transform 1.1s 3.2s; transform: translateX(0); [/class] [class=text_reveal2] opacity: 1; transition: opacity 1s 3.5s; [/class] [class=title_reveal3] opacity: 1; transition: opacity 1.7s 3.8s , transform 1.8s 3.7s; transform: translateX(0); [/class] [class=text_reveal3] opacity: 1; transition: opacity 1s 4.8s; [/class] [class=nowplaying_reveal] opacity: 1; transition: opacity 1s 3.3s; [/class] [class=music_reveal] opacity: 1; transition: opacity 1s 3.3s; [/class] [script class=container on=init] addClass showbox overlay_box addClass showbox first_box addClass showbox first_image [/script] [script class=front_line on=click] addClass hideboxes first_box addClass hideboxes overlay_box addClass hideboxes first_image addClass one_move box_one addClass two_move box_two addClass three_move box_three addClass four_move box_four addClass showback back [/script] [script class=front_text on=click] addClass hideboxes first_box addClass hideboxes overlay_box addClass hideboxes first_image addClass one_move box_one addClass two_move box_two addClass three_move box_three addClass four_move box_four addClass showback back [/script] [script=bgtextone] set one 1 [/script] [script=bgtexttwo] set two 1 [/script] [script=bgtextthree] set three 1 [/script] [script=bgtextfour] set four 1 [/script] [script class=bgtextone on=click] set one 2 if (eq "${one}" "2") (addClass showclose closeone) if (eq "${one}" "2") (removeClass textfadeone bgtextone) if (eq "${one}" "2") (addClass showcloseall closeall) if (eq "${one}" "2") (removeClass showback back) if (eq "${one}" "2") (addClass transform box_1) if (eq "${one}" "2") (addClass reveal header_one) if (eq "${one}" "2") (addClass text_reveal headerone_text) if (eq "${one}" "2") (addClass title_reveal1 title1) if (eq "${one}" "2") (addClass text_reveal1 para1) if (eq "${one}" "2") (addClass nowplaying_reveal nowplaying) if (eq "${one}" "2") (addClass music_reveal musicplayer) [/script] [script class=box_one on=mouseenter] if (eq "${one}" "2") (set one 2) (set one 1) if (eq "${one}" "1") (addClass textfadeone bgtextone) if (eq "${one}" "1") (addClass bgfadeone boxbgone) [/script] [script class=box_one on=mouseleave] if (eq "${one}" "1") (removeClass showclose closeone) if (eq "${one}" "1") (removeClass textfadeone bgtextone) if (eq "${one}" "1") (removeClass bgfadeone boxbgone) if (eq "${one}" "2") (addClass showclose closeone) if (eq "${one}" "2") (removeClass textfadeone bgtextone) if (eq "${one}" "0") (set one 1) [/script] [script class=bgfadeone on=mouseleave] if (eq "${one}" "1") (removeClass showclose closeone) if (eq "${one}" "1") (removeClass textfadeone bgtextone) if (eq "${one}" "1") (removeClass bgfadeone boxbgone) if (eq "${one}" "2") (addClass showclose closeone) if (eq "${one}" "2") (removeClass textfadeone bgtextone) if (eq "${one}" "0") (set one 1) [/script] [script class=closeone on=click] set one 0 if (eq "${one}" "0") (removeClass showclose closeone) if (eq "${one}" "0") (removeClass textfadeone bgtextone) if (eq "${one}" "0") (removeClass bgfadeone boxbgone) if (eq "${one}" "0") (removeClass showcloseall closeall) if (eq "${one}" "0") (addClass showback back) if (eq "${one}" "0") (removeClass transform box_1) if (eq "${one}" "0") (removeClass reveal header_one) if (eq "${one}" "0") (removeClass text_reveal headerone_text) if (eq "${one}" "0") (removeClass title_reveal1 title1) if (eq "${one}" "0") (removeClass text_reveal1 para1) if (eq "${one}" "0") (removeClass nowplaying_reveal nowplaying) if (eq "${one}" "0") (removeClass music_reveal musicplayer) [/script] [script class=bgtexttwo on=click] set two 2 if (eq "${two}" "2") (addClass showclosetwo closetwo) if (eq "${two}" "2") (removeClass textfadetwo bgtexttwo) if (eq "${two}" "2") (addClass showcloseall closeall) if (eq "${two}" "2") (removeClass showback back) if (eq "${two}" "2") (addClass transform box_2) if (eq "${two}" "2") (addClass reveal header_two) if (eq "${two}" "2") (addClass text_reveal headertwo_text) if (eq "${two}" "2") (addClass title_reveal1 title2) if (eq "${two}" "2") (addClass title_reveal2 title3) if (eq "${two}" "2") (addClass title_reveal3 title4) if (eq "${two}" "2") (addClass text_reveal1 para2) if (eq "${two}" "2") (addClass text_reveal2 para3) if (eq "${two}" "2") (addClass text_reveal3 para4) [/script] [script class=box_two on=mouseenter] if (eq "${two}" "2") (set two 2) (set two 1) if (eq "${two}" "1") (addClass textfadetwo bgtexttwo) if (eq "${two}" "1") (addClass bgfadetwo boxbgtwo) [/script] [script class=box_two on=mouseleave] if (eq "${two}" "1") (removeClass showclose closetwo) if (eq "${two}" "1") (removeClass textfadetwo bgtexttwo) if (eq "${two}" "1") (removeClass bgfadetwo boxbgtwo) if (eq "${two}" "2") (addClass showclose closetwo) if (eq "${two}" "2") (removeClass textfadetwo bgtexttwo) if (eq "${two}" "0") (set two 1) [/script] [script class=bgfadetwo on=mouseleave] if (eq "${two}" "1") (removeClass showclose closetwo) if (eq "${two}" "1") (removeClass textfadetwo bgtexttwo) if (eq "${two}" "1") (removeClass bgfadetwo boxbgtwo) if (eq "${two}" "2") (addClass showclose closetwo) if (eq "${two}" "2") (removeClass textfadetwo bgtexttwo) if (eq "${two}" "0") (set two 1) [/script] [script class=closetwo on=click] set two 0 if (eq "${two}" "0") (removeClass showclosetwo closetwo) if (eq "${two}" "0") (removeClass textfadetwo bgtexttwo) if (eq "${two}" "0") (removeClass bgfadetwo boxbgtwo) if (eq "${two}" "0") (removeClass showcloseall closeall) if (eq "${two}" "0") (addClass showback back) if (eq "${two}" "0") (removeClass transform box_2) if (eq "${two}" "0") (removeClass reveal header_two) if (eq "${two}" "0") (removeClass text_reveal headertwo_text) if (eq "${two}" "0") (removeClass title_reveal1 title2) if (eq "${two}" "0") (removeClass title_reveal2 title3) if (eq "${two}" "0") (removeClass title_reveal3 title4) if (eq "${two}" "0") (removeClass text_reveal1 para2) if (eq "${two}" "0") (removeClass text_reveal2 para3) if (eq "${two}" "0") (removeClass text_reveal3 para4) [/script] [script class=bgtextthree on=click] set three 2 if (eq "${three}" "2") (addClass showclosethree closethree) if (eq "${three}" "2") (removeClass textfadethree bgtextthree) if (eq "${three}" "2") (addClass showcloseall closeall) if (eq "${three}" "2") (removeClass showback back) if (eq "${three}" "2") (addClass transform box_3) if (eq "${three}" "2") (addClass reveal header_three) if (eq "${three}" "2") (addClass text_reveal headerthree_text) if (eq "${three}" "2") (addClass title_reveal1 title5) if (eq "${three}" "2") (addClass text_reveal1 para5) [/script] [script class=box_three on=mouseenter] if (eq "${three}" "2") (set three 2) (set three 1) if (eq "${three}" "1") (addClass textfadethree bgtextthree) if (eq "${three}" "1") (addClass bgfadethree boxbgthree) [/script] [script class=box_three on=mouseleave] if (eq "${three}" "1") (removeClass showclose closethree) if (eq "${three}" "1") (removeClass textfadethree bgtextthree) if (eq "${three}" "1") (removeClass bgfadethree boxbgthree) if (eq "${three}" "2") (addClass showclose closethree) if (eq "${three}" "2") (removeClass textfadethree bgtextthree) if (eq "${three}" "0") (set three 1) [/script] [script class=bgfadethree on=mouseleave] if (eq "${three}" "1") (removeClass showclose closethree) if (eq "${three}" "1") (removeClass textfadethree bgtextthree) if (eq "${three}" "1") (removeClass bgfadethree boxbgthree) if (eq "${three}" "2") (addClass showclose closethree) if (eq "${three}" "2") (removeClass textfadethree bgtextthree) if (eq "${three}" "0") (set three 1) [/script] [script class=closethree on=click] set three 0 if (eq "${three}" "0") (removeClass showclosethree closethree) if (eq "${three}" "0") (removeClass textfadethree bgtextthree) if (eq "${three}" "0") (removeClass bgfadethree boxbgthree) if (eq "${three}" "0") (removeClass showcloseall closeall) if (eq "${three}" "0") (addClass showback back) if (eq "${three}" "0") (removeClass transform box_3) if (eq "${three}" "0") (removeClass reveal header_three) if (eq "${three}" "0") (removeClass text_reveal headerthree_text) if (eq "${three}" "0") (removeClass title_reveal1 title5) if (eq "${three}" "0") (removeClass text_reveal1 para5) [/script] [script class=bgtextfour on=click] set four 2 set image 1 if (eq "${four}" "2") (addClass showclosefour closefour) if (eq "${four}" "2") (removeClass textfadefour bgtextfour) if (eq "${four}" "2") (addClass showcloseall closeall) if (eq "${four}" "2") (removeClass showback back) if (eq "${four}" "2") (addClass transform box_4) if (eq "${four}" "2") (addClass reveal header_four) if (eq "${four}" "2") (addClass text_reveal headerfour_text) if (eq "${image}" "1") (addClass image1 imagebox) if (eq "${image}" "1") (removeClass image2 imagebox) if (eq "${image}" "1") (removeClass image3 imagebox) if (eq "${image}" "1") (removeClass image4 imagebox) if (eq "${image}" "1") (removeClass image5 imagebox) if (eq "${image}" "1") (removeClass image6 imagebox) [/script] [script class=imagebox on=click] if (eq "${image}" "${image}") (inc image 1) if (eq "${image}" "1") (addClass image1 imagebox) if (eq "${image}" "2") (addClass image2 imagebox) if (eq "${image}" "3") (addClass image3 imagebox) if (eq "${image}" "4") (addClass image4 imagebox) if (eq "${image}" "5") (addClass image5 imagebox) if (eq "${image}" "6") (addClass image6 imagebox) [/script] [script class=box_four on=mouseenter] if (eq "${four}" "2") (set four 2) (set four 1) if (eq "${four}" "1") (addClass textfadefour bgtextfour) if (eq "${four}" "1") (addClass bgfadefour boxbgfour) [/script] [script class=box_four on=mouseleave] if (eq "${four}" "1") (removeClass showclose closefour) if (eq "${four}" "1") (removeClass textfadefour bgtextfour) if (eq "${four}" "1") (removeClass bgfadefour boxbgfour) if (eq "${four}" "2") (addClass showclose closefour) if (eq "${four}" "2") (removeClass textfadefour bgtextfour) if (eq "${four}" "0") (set four 1) [/script] [script class=bgfadefour on=mouseleave] if (eq "${four}" "1") (removeClass showclose closefour) if (eq "${four}" "1") (removeClass textfadefour bgtextfour) if (eq "${four}" "1") (removeClass bgfadefour boxbgfour) if (eq "${four}" "2") (addClass showclose closefour) if (eq "${four}" "2") (removeClass textfadefour bgtextfour) if (eq "${four}" "0") (set four 1) [/script] [script class=closefour on=click] set four 0 if (eq "${four}" "0") (removeClass showclosefour closefour) if (eq "${four}" "0") (removeClass textfadefour bgtextfour) if (eq "${four}" "0") (removeClass bgfadefour boxbgfour) if (eq "${four}" "0") (removeClass showcloseall closeall) if (eq "${four}" "0") (addClass showback back) if (eq "${four}" "0") (removeClass transform box_4) if (eq "${four}" "0") (removeClass reveal header_four) if (eq "${four}" "0") (removeClass text_reveal headerfour_text) if (eq "${four}" "0") (removeClass image2) if (eq "${four}" "0") (removeClass image3) if (eq "${four}" "0") (removeClass image4) if (eq "${four}" "0") (removeClass image5) if (eq "${four}" "0") (removeClass image6) [/script] [script=closeall] set close 0 [/script] [script=back] set back 0 [/script] [script class=closeall on=click] set close 0 set back 0 if (eq "${close}" "0") (removeClass showcloseall closeall) if (eq "${close}" "0") (addClass showback back) set one 0 if (eq "${one}" "0") (removeClass showclose closeone) if (eq "${one}" "0") (removeClass textfadeone bgtextone) if (eq "${one}" "0") (removeClass bgfadeone boxbgone) if (eq "${one}" "0") (removeClass transform box_1) if (eq "${one}" "0") (removeClass reveal header_one) if (eq "${one}" "0") (removeClass text_reveal headerone_text) if (eq "${one}" "0") (removeClass title_reveal1 title1) if (eq "${one}" "0") (removeClass text_reveal1 para1) if (eq "${one}" "0") (removeClass nowplaying_reveal nowplaying) if (eq "${one}" "0") (removeClass music_reveal musicplayer) set two 0 if (eq "${two}" "0") (removeClass showclosetwo closetwo) if (eq "${two}" "0") (removeClass textfadetwo bgtexttwo) if (eq "${two}" "0") (removeClass bgfadetwo boxbgtwo) if (eq "${two}" "0") (removeClass twocont_move two_content) if (eq "${two}" "0") (removeClass transform box_2) if (eq "${two}" "0") (removeClass reveal header_two) if (eq "${two}" "0") (removeClass text_reveal headertwo_text) if (eq "${two}" "0") (removeClass title_reveal1 title2) if (eq "${two}" "0") (removeClass title_reveal2 title3) if (eq "${two}" "0") (removeClass title_reveal3 title4) if (eq "${two}" "0") (removeClass text_reveal1 para2) if (eq "${two}" "0") (removeClass text_reveal2 para3) if (eq "${two}" "0") (removeClass text_reveal3 para4) set three 0 if (eq "${three}" "0") (removeClass showclosethree closethree) if (eq "${three}" "0") (removeClass textfadethree bgtextthree) if (eq "${three}" "0") (removeClass bgfadethree boxbgthree) if (eq "${three}" "0") (removeClass transform box_3) if (eq "${three}" "0") (removeClass reveal header_three) if (eq "${three}" "0") (removeClass text_reveal headerthree_text) if (eq "${three}" "0") (removeClass transform box_3) if (eq "${three}" "0") (removeClass reveal header_three) if (eq "${three}" "0") (removeClass text_reveal headerthree_text) if (eq "${three}" "0") (removeClass title_reveal1 title5) if (eq "${three}" "0") (removeClass text_reveal1 para5) set four 0 if (eq "${four}" "0") (removeClass showclosefour closefour) if (eq "${four}" "0") (removeClass textfadefour bgtextfour) if (eq "${four}" "0") (removeClass bgfadefour boxbgfour) if (eq "${four}" "0") (removeClass transform box_4) if (eq "${four}" "0") (removeClass reveal header_four) if (eq "${four}" "0") (removeClass text_reveal headerfour_text) if (eq "${four}" "0") (removeClass transform box_4) if (eq "${four}" "0") (removeClass reveal header_four) if (eq "${four}" "0") (removeClass text_reveal headerfour_text) if (eq "${four}" "0") (removeClass image2) if (eq "${four}" "0") (removeClass image3) if (eq "${four}" "0") (removeClass image4) if (eq "${four}" "0") (removeClass image5) if (eq "${four}" "0") (removeClass image6) [/script] [script class=back on=click] set back 1 if (eq "${back}" "1") (removeClass one_move box_one) if (eq "${back}" "1") (removeClass two_move box_two) if (eq "${back}" "1") (removeClass three_move box_three) if (eq "${back}" "1") (removeClass four_move box_four) if (eq "${back}" "1") (removeClass showback back) if (eq "${back}" "1") (removeClass hideboxes first_box) if (eq "${back}" "1") (removeClass hideboxes overlay_box) if (eq "${back}" "1") (removeClass hideboxes first_image) [/script] [div class=container] [div class=overlay_box] [div class=first_box] [div class=first_image]
3vDniJr.jpg
[/div] [div class=front_line][div class=front_text]enter[/div][/div] [/div][/div] [div class=box_one] [div class=boxbgone] [div class=closeone]close[/div] [div class=bgtextone] basics[/div] [/div]
TLI5pYQ.jpg
[/div] [div class=header_one][div class=headerone_text]
basics
[/div][/div] [div class=box_1] [div class=title1]details[/div] [div class=para1] name: kim jongdae
gender: male
age: twenty-five
sexuality: heterosexual
ethnicity: south korean[/div] [div class=nowplaying]grandson – overdose[/div] [div class=musicplayer] [div class=skipback][/div] [div class=skipforward][/div] [div class=soundcloud]
[/div] [/div] [/div] [div class=box_two] [div class=boxbgtwo] [div class=closetwo]close[/div] [div class=bgtexttwo]info[/div] [/div]
QrUWY1T.jpg
[/div] [div class=header_two][div class=headertwo_text]
info
[/div][/div] [div class=box_2] [div class=title2]personality[/div] [div class=para2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum id ex porttitor gravida. Fusce ullamcorper sem mi, vel euismod libero sollicitudin sed. Nam at dui quis orci elementum semper quis vitae risus. Sed quis bibendum leo. Nunc interdum in diam in elementum. Proin dolor nunc, eleifend sed gravida ac, ullamcorper in nisl. Phasellus ut faucibus elit. Duis pretium, sem at tristique pharetra, nisi elit volutpat lorem, a imperdiet ex ex vitae turpis.[/div] [div class=title3]likes[/div] [div class=para3]+ like
+ like
+ like
+ like
+ like
+ like
+ like[/div] [div class=title4]dislikes[/div] [div class=para4]+ dislike
+ dislike
+ dislike
+ dislike
+ dislike
+ dislike
+ dislike[/div] [/div] [div class=box_three] [div class=boxbgthree] [div class=closethree]close[/div] [div class=bgtextthree]history[/div] [/div]
3aXshSn.jpg
[/div] [div class=header_three][div class=headerthree_text]
history
[/div][/div] [div class=box_3] [div class=title5]biography[/div] [div class=para5]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum id ex porttitor gravida. Fusce ullamcorper sem mi, vel euismod libero sollicitudin sed. Nam at dui quis orci elementum semper quis vitae risus. Sed quis bibendum leo. Nunc interdum in diam in elementum. Proin dolor nunc, eleifend sed gravida ac, ullamcorper in nisl. Phasellus ut faucibus elit. Duis pretium, sem at tristique pharetra, nisi elit volutpat lorem, a imperdiet ex ex vitae turpis.[/div] [/div] [div class=box_four] [div class=boxbgfour] [div class=closefour]close[/div] [div class=bgtextfour]gallery[/div] [/div]
DLiboZn.png
[/div] [div class=header_four][div class=headerfour_text]
gallery
[/div][/div] [div class=box_4] [div class=imagebox][/div] [/div] [div class=closeall]
close all
[/div] [div class=back]
back
[/div] [/div]
 
[class=main] height: 90px; width: 200px; border-radius: 10px; overflow: hidden; background-color: white; margin: auto; margin-top: 10px; border: 10px solid #DEF1F8; [/class] [class name=main state=hover] cursor: default; [/class] [class=textbox] padding-right: 100px; overflow-y: scroll; height: 90px; width: 200px; [/class] [class name=textbox state=hover] cursor: default; [/class] [class=text] font-size: 12px; color: black; line-height: 15px; letter-spacing: 0px; font-family: 'Arial', sans-serif; text-align: justify; padding: 10px; opacity: 0.6; [/class] [class name=text state=hover] cursor: default; [/class] [div class=main] [div class=textbox] [div class=text]this post has been sitting in my workshop for about three weeks now and i was debating whether to post it or not. i don't really like it, honestly. i mean, i do. i just feel that it isn't anything special. but still, here it is. again, i'd prefer if you didn't use this - at least without asking first.[/div] [/div] [/div]

[class=container] width: 600px; height: 490px; border: 1px solid white; background-color: white; margin: auto; z-index: 1; overflow: hidden; [/class] [class name=container state=hover] cursor: url(https://i.imgur.com/kphxwZq.png), auto; [/class]
.
.
.
.
[class=box_one] width: 240px; height: 420px; background-color: #fdfdfd; margin-top: 25px; margin-left: 25px; border: 10px solid #fafafa; position: absolute; overflow: hidden; [/class] [class=containerbox] width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 10; overflow: hidden; [/class] [class=containerboxi] width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 10; overflow: hidden; [/class] [class=image] height: 100% width: 100% opacity: 1; transition: 3s; -webkit-filter: grayscale(0%); position: relative; [/class] [class=imagefade] opacity: 0.6; -webkit-filter: grayscale(35%); transition: 2s; [/class] [class=imagei] height: 100% width: 100% opacity: 1; transition: 1s; -webkit-filter: grayscale(0%); position: relative; transition-delay: 0.5s; [/class] [class=imagefadei] transition: opacity 1s; opacity: 0.8; [/class] [class=slidebox] height: 40px; width: 190px; margin-top: 50px; background-color: #fdfdfd; opacity: 0; transform: translateX(-200px); transition: 1s; transition-delay: 0.6s; position: absolute; z-index: 1; [/class] [class=slideboxfade] opacity: 0.7; transform: translateX(25px); transition: opacity 1s , transform 1s; [/class] [class=slidetwo] height: 40px; width: 190px; margin-top: 120px; background-color: #fdfdfd; opacity: 0; transform: translateX(-200px); transition: 1s; transition-delay: 0.45s; position: absolute; z-index: 1; [/class] [class=slidefadetwo] opacity: 0.7; transform: translateX(25px); transition: opacity 1s , transform 1s; transition-delay: 0.15s; [/class] [class=slidethree] height: 40px; width: 190px; margin-top: 190px; background-color: #fdfdfd; opacity: 0; transform: translateX(-200px); transition: 1s; transition-delay: 0.3s; position: absolute; z-index: 1; [/class] [class=slidefadethree] opacity: 0.7; transform: translateX(25px); transition: opacity 1s , transform 1s; transition-delay: 0.3s; [/class] [class=slidefour] height: 40px; width: 190px; margin-top: 260px; background-color: #fdfdfd; opacity: 0; transform: translateX(-200px); transition: 1s; transition-delay: 0.15s; position: absolute; z-index: 1; [/class] [class=slidefadefour] opacity: 0.7; transform: translateX(25px); transition: opacity 1s , transform 1s; transition-delay: 0.45s; [/class] [class=slidefive] height: 40px; width: 190px; margin-top: 330px; background-color: #fdfdfd; opacity: 0; transform: translateX(-200px); transition: 1s; transition-delay: 0s; position: absolute; z-index: 1; [/class] [class=slidefadefive] opacity: 0.7; transform: translateX(25px); transition: opacity 1s , transform 1s; transition-delay: 0.6s; [/class] [script class=containerbox on=mouseenter] addClass imagefade image addClass slideboxfade slidebox addClass slidefadetwo slidetwo addClass slidefadethree slidethree addClass slidefadefour slidefour addClass slidefadefive slidefive [/script] [script class=containerbox on=mouseleave] removeClass imagefade image removeClass slideboxfade slidebox removeClass slidefadetwo slidetwo removeClass slidefadethree slidethree removeClass slidefadefour slidefour removeClass slidefadefive slidefive [/script] [script class=one on=click] addClass imagefadei imagei removeClass index outerii removeClass index outeriii removeClass index conti removeClass index contii addClass index outeri addClass index cont addClass clicked one removeClass clicked two removeClass clicked three hide conti show cont hide contii hide outerii show outeri hide outeriii [/script] [script class=two on=click] addClass imagefadei imagei addClass index outerii addClass index conti addClass clicked two removeClass clicked one removeClass index outeri removeClass index outeriii removeClass index cont removeClass index contii removeClass clicked three hide cont show conti hide contii hide outeri show outerii hide outeriii [/script] [script class=three on=click] addClass imagefadei imagei addClass index outeriii addClass index contii addClass clicked three removeClass clicked one removeClass index outeri removeClass index outerii removeClass index conti removeClass index cont removeClass clicked two hide cont show contii hide conti hide outerii show outeriii hide outeri [/script] [script class=show] set show 1 [/script] [script class=show on=click] if (eq ${show} 1) (addClass rotate show) (removeClass rotate show) if (eq ${show} 1) (addClass tabshow tabsbg) (removeClass tabshow tabsbg) if (eq ${show} 0) (removeClass index outeri) if (eq ${show} 0) (removeClass clicked one) if (eq ${show} 0) (removeClass index outerii) if (eq ${show} 0) (removeClass clicked two) if (eq ${show} 0) (removeClass index outeriii) if (eq ${show} 0) (removeClass clicked three) if (eq ${show} 0) (removeClass imagefadei imagei) if (eq ${show} 1) (addClass polhide polaroid) (removeClass polhide polaroid) if (eq ${show} 1) (set show 0) (set show 1) [/script] [class=box_two] width: 240px; height: 250px; background-color: #fdfdfd; margin-top: 105px; margin-left: 315px; border: 10px solid #fafafa; position: absolute; overflow: hidden; [/class] [class=tabsbg] background-color: transparent; width: 260px; height: 50px; margin-top: 365px; margin-left: 315px; position: absolute; opacity: 0; transition: opacity 1s; transition-delay: 0s; z-index: 1; [/class] [class=tabsbgi] background-color: #fafafa; width: 260px; height: 50px; margin-top: 365px; margin-left: 315px; position: absolute; opacity: 1; transition: opacity 1s; transition-delay: 0s; z-index: 1; pointer-events: none; [/class] [class=tabshow] opacity: 1; transition: opacity 1s; [/class] [class=polaroid] margin-top: 350px; margin-left: 320px; font-size: 52px; color: #2d2d2d; opacity: 0.7; position: absolute; z-index: 10; font-family: 'Nanum Brush Script', serif; transform: rotate(-10deg); font-weight: bold; transition: 1s; pointer-events: none; transition-delay: 0.2s; [/class] [class=polhide] opacity: 0; transition: opacity 0.8s; [/class] [class=one] width: 20px; height: 20px; position: absolute; z-index: 1; margin-left: 140px; margin-top: 25px; font-family: 'Lora', serif; font-size: 12px; text-align: center; color: black; opacity: 0.8; [/class] [class name=one state=hover] cursor: pointer; [/class] [class=two] width: 20px; height: 20px; position: absolute; z-index: 1; margin-left: 170px; margin-top: 25px; font-family: 'Lora', serif; font-size: 12px; text-align: center; color: black; opacity: 0.8; [/class] [class name=two state=hover] cursor: pointer; [/class] [class=three] width: 20px; height: 20px; position: absolute; z-index: 1; margin-left: 200px; margin-top: 25px; font-family: 'Lora', serif; font-size: 12px; text-align: center; color: black; opacity: 0.8; [/class] [class name=three state=hover] cursor: pointer; [/class] [class=clicked] font-weight: bold; letter-spacing: -1px; color: #8F7131; [/class]
.
[class=showbg] width: 25px; height: 25px; background-color: transparent; position: absolute; z-index: 10; margin-left: 545px; margin-top: 375px; [/class] [class=show] font-family: 'EB Garamond', serif; font-size: 24px; text-align: center; color: black; transition: 1s; margin-top: -7px; transform: rotate(180deg); [/class] [class name=show state=hover] cursor: pointer; [/class] [class=rotate] transform: rotate(0deg); transition: transform 1s; [/class] [class=textinner] width: 100%; height: 100%; background-color: transparent; overflow-y: scroll; transition: 1s; color: black; z-index: 10; text-align: justify; padding-right: 25px; [/class] [class=outeri] height: 235px; width: 175px; position: absolute; margin-top: 115px; margin-left: 348px; background-color: transparent; opacity: 0; transition: 1s; z-index: 1; [/class] [class=outerii] height: 235px; width: 175px; position: absolute; margin-top: 115px; margin-left: 348px; background-color: transparent; opacity: 0; transition: 1s; z-index: 1; [/class] [class=outeriii] height: 235px; width: 175px; position: absolute; margin-top: 115px; margin-left: 348px; background-color: transparent; opacity: 0; transition: 1s; z-index: 1; [/class] [class=cont] height: 235px; width: 175px; background-color: rgba(255, 255, 255, 0.6); position: absolute; transition: 1s; z-index: 1; padding: 10px; overflow: hidden; [/class] [class=conti] height: 235px; width: 175px; background-color: rgba(255, 255, 255, 0.6); position: absolute; transition: 1s; z-index: 1; padding: 10px; overflow: hidden; [/class] [class=contii] height: 235px; width: 175px; background-color: rgba(255, 255, 255, 0.6); position: absolute; transition: 1s; z-index: 1; padding: 10px; overflow: hidden; [/class] [class=index] opacity: 1; transition: opacity 1s; transition-delay: 0s; [/class] [class=para] font-size: 11px; font-family: 'Lora', serif; color: black; line-height: 20px; opacity: 0.8; [/class] [class=personality] font-size: 38px; color: #2d2d2d; margin-top: 245px; margin-left: -23px; opacity: 0.6; z-index: 10; position: absolute; transform: rotate(-4deg); font-family: 'Caveat', serif; pointer-events: none; letter-spacing: -6px; font-weight: bold; transition: 1s; [/class] [class=history] font-size: 38px; color: #2d2d2d; margin-top: 245px; margin-left: -23px; opacity: 0.6; z-index: 10; position: absolute; transform: rotate(-4deg); font-family: 'Caveat', serif; pointer-events: none; letter-spacing: -4px; font-weight: bold; transition: 1s; [/class] [class=extra] font-size: 38px; color: #2d2d2d; margin-top: 245px; margin-left: -23px; opacity: 0.6; z-index: 10; position: absolute; transform: rotate(-4deg); font-family: 'Caveat', serif; pointer-events: none; letter-spacing: -4px; font-weight: bold; transition: 1s; [/class] [class=slidetext] font-size: 12px; font-family: 'Lora', serif; color: black; opacity: 0.7; text-align: center; margin-top: 16px; font-variant: lowercae; line-height: 8px; [/class] [div class=container] [div class=box_one] [div class=containerbox][/div] [div class=slidebox][div class=slidetext]jennie kim[/div][/div] [div class=slidetwo][div class=slidetext]twenty-two[/div][/div] [div class=slidethree][div class=slidetext]female[/div][/div] [div class=slidefour][div class=slidetext]gay as fuck[/div][/div] [div class=slidefive][div class=slidetext]south korean[/div][/div] [div class=image]
QskhcB4.png
[/div] [/div] [div class=tabsbgi][/div][div class=polaroid]제니김[/div] [div class=tabsbg][div class=one]i.[/div][div class=two]ii.[/div][div class=three]iii.[/div][/div] [div class=showbg][div class=show]^[/div][/div] [div class=outeri] [div class=personality]personality[/div] [div class=cont] [div class=textinner] [div class=para]“As if to build a fence around the fatal emptiness inside her, she had to create a sunny person that she became. But if you peeled away the ornamental egos that she had built, there was only an abbys of nothingness and the intense thirst that came with it. Though she tried to forget it, the nothingness would visit her periodically - on a lonely rainy afternoon, or at dawn when she woke up from a nightmare. What she needed at such times was to be held by someone, anyone.”
– Haruki Murakami, 1Q84

[/div] [/div] [/div] [/div] [div class=outerii] [div class=history]history[/div] [div class=conti] [div class=textinner] [div class=para]“In the uncertain ebb and flow of time and emotions, much of one’s life history is etched in the senses. And things of no particular importance, or irreplaceable things, can suddenly resurface in a café one winter night.”
– Banana Yoshimoto, Kitchen

[/div] [/div] [/div] [/div] [div class=outeriii] [div class=extra]extra[/div] [div class=contii] [div class=textinner] [div class=para]“Such uncanny serenity actually frightened him, making him think that perhaps this was a surface impression left behind after any amount of unspeakable viciousness had been digested, or else settled down inside her as a kind of sediment.”
– Han Kang, The Vegetarian

[/div] [/div] [/div] [/div] [div class=box_two] [div class=imagei]
fPu0Hqb.png
[/div] [/div] [/div]
 
what kind of fucking sorcery is this
how
do you make such great cod e s
 
[class=main] height: 90px; width: 200px; border-radius: 10px; overflow: hidden; background-color: white; margin: auto; margin-top: 10px; border: 10px solid #DEF1F8; margin-bottom: -10px; [/class] [class name=main state=hover] cursor: default; [/class] [class=textbox] padding-right: 100px; overflow-y: scroll; height: 90px; width: 200px; [/class] [class name=textbox state=hover] cursor: default; [/class] [class=text] font-size: 12px; color: black; line-height: 15px; letter-spacing: 0px; font-family: 'Arial', sans-serif; text-align: justify; padding: 10px; opacity: 0.6; [/class] [class name=text state=hover] cursor: default; [/class] [div class=main] [div class=textbox] [div class=text]please do not remove the credit if you use this code. if you want the code, click here.

i finally finished this. it has taken soooo long.. not because it was difficult - its actually really basic - but because i couldnt decide on a layout. this cs is for an rp goldleaf goldleaf and i are doing eventually. the guy in the pictures is ji changwook and he's an actor.. if anyone knows the drama suspicious partner come scream at me. i am so obsessed with this show its painful.. no ji wook and eun bong hee are the cutest couple istg. [/div] [/div] [/div]

.
.
[class=container] height: 310px; width: 360px; margin: auto; background-color: white; overflow: hidden; [/class] [class=box1] height: 250px; width: 200px; background-color: white; margin-left: 140px; margin-top: 40px; position: absolute; border: 1px solid lightgray; overflow: hidden; [/class] [class=image] height: 140px; width: 160px; margin-top: 55px; margin-left: 20px; position: absolute; opacity: 0; transition: 1s; z-index: 1; background-image: url('https://i.imgur.com/d1FOXfT.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; [/class] [class name=image state=hover] cursor: default; [/class] [class=personality] width: 80px; height: 20px; font-size: 10px; font-family: 'Arial', sans-serif; font-weight: bold; color: black; opacity: 0; position: absolute; background-color: transparent; margin-top: 168px; margin-left: 5px; transform: translateY(-10px); transition: 1s; z-index: 0; pointer-events: none; letter-spacing: 0.5px; [/class] [class=history] width: 80px; height: 20px; font-size: 10px; font-family: 'Arial', sans-serif; font-weight: bold; color: black; opacity: 0; position: absolute; background-color: transparent; margin-top: 168px; margin-left: 40px; transform: translateY(-10px); transition: 1s; z-index: 0; pointer-events: none; letter-spacing: 0.5px; [/class] [class=extra] width: 80px; height: 20px; font-size: 10px; font-family: 'Arial', sans-serif; font-weight: bold; color: black; opacity: 0; position: absolute; background-color: transparent; margin-top: 168px; margin-left: 65px; transform: translateY(-10px); transition: 1s; z-index: 0; pointer-events: none; letter-spacing: 0.5px; [/class] [class=gallery] width: 80px; height: 20px; font-size: 10px; font-family: 'Arial', sans-serif; font-weight: bold; color: black; opacity: 0; position: absolute; background-color: transparent; margin-top: 168px; margin-left: 85px; transform: translateY(-10px); transition: 1s; z-index: 0; pointer-events: none; letter-spacing: 0.5px; [/class] [class=slide] transform: translateX(0); opacity: 0.2; transition: opacity 0.5s , transform 1s; [/class] [class=image1] height: 140px; width: 160px; margin-top: 55px; margin-left: 20px; opacity: 0.8; transition: 1s; background-image: url('https://i.imgur.com/2749PJ9.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; margin-bottom: 47px; [/class] [class name=image1 state=hover] cursor: default; [/class] [class=image2] height: 140px; width: 160px; margin-top: 55px; margin-left: 20px; opacity: 0.8; transition: 1s; background-image: url('https://i.imgur.com/ApT6AO0.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; margin-bottom: 47px; [/class] [class name=image2 state=hover] cursor: default; [/class] [class=image3] height: 140px; width: 160px; margin-top: 55px; margin-left: 20px; opacity: 0.8; transition: 1s; background-image: url('https://i.imgur.com/ZJQfkvf.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; margin-bottom: 47px; [/class] [class name=image3 state=hover] cursor: default; [/class] [class=showimg] opacity: 0.8; transition: 1s; [/class] [class=name] font-size: 18px; font-family: 'Arial', sans-serif; font-style: italic; font-weight: bold; margin-left: 20px; margin-top: 120px; color: black; position: absolute; opacity: 0.3; transition: 1s; [/class] [class name=name state=hover] cursor: default; [/class] [class=tabcontainer] height: 20px; width: 80px; position: absolute; margin-top: 140px; margin-left: 25px; background-color: transparent; padding: 5px; [/class] [class=tab1] font-size: 14px; font-family: 'Cardo', serif; color: black; font-weight: lighter; position: absolute; margin-left: 0px; margin-top: 0px; opacity: 0.3; transition: 1s; [/class] [class name=tab1 state=hover] opacity: 0.8; transition: opacity 1s; cursor: default; [/class] [class=tab2] font-size: 14px; font-family: 'Cardo', serif; color: black; font-weight: lighter; position: absolute; margin-left: 20px; margin-top: 0px; opacity: 0.3; transition: 1s; [/class] [class name=tab2 state=hover] opacity: 0.8; transition: opacity 1s; cursor: default; [/class] [class=tab3] font-size: 14px; font-family: 'Cardo', serif; color: black; font-weight: lighter; position: absolute; margin-left: 40px; margin-top: 0px; opacity: 0.3; transition: 1s; [/class] [class name=tab3 state=hover] opacity: 0.8; transition: opacity 1s; cursor: default; [/class] [class=tab4] font-size: 14px; font-family: 'Cardo', serif; color: black; font-weight: lighter; position: absolute; margin-left: 65px; margin-top: 0px; opacity: 0.3; transition: 1s; [/class] [class name=tab4 state=hover] opacity: 0.8; transition: opacity 1s; cursor: default; [/class] [class=content1] height: 250px; width: 200px; background-color: transparent; overflow-y: scroll; padding-right: 20px; position: absolute; opacity: 0; transition: 1s; [/class] [class=content2] height: 250px; width: 200px; background-color: transparent; overflow-y: scroll; padding-right: 20px; position: absolute; opacity: 0; transition: 1s; [/class] [class=content3] height: 250px; width: 200px; background-color: transparent; overflow-y: scroll; padding-right: 20px; position: absolute; opacity: 0; transition: 1s; [/class] [class=content4] height: 250px; width: 200px; background-color: transparent; overflow-y: scroll; padding-right: 20px; position: absolute; opacity: 0; transition: 1s; [/class] [class=para] font-size: 11px; text-align: justify; color: black; padding: 5px; opacity: 0.7; [/class] [class name=para state=hover] cursor: default; [/class] [class=show] opacity: 1; transition: 1s; z-index: 1; [/class] [class=g1] height: 140px; width: 160px; margin-top: 55px; margin-left: 20px; opacity: 0.8; transition: 1s; background-image: url('https://i.imgur.com/tLzMOCM.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; margin-bottom: 75px; [/class] [class name=g1 state=hover] cursor: default; [/class] [class=g2] height: 140px; width: 160px; margin-top: 55px; margin-left: 20px; opacity: 0.8; transition: 1s; background-image: url('https://i.imgur.com/1l9VsPP.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; margin-bottom: 75px; [/class] [class name=g2 state=hover] cursor: default; [/class] [class=g3] height: 140px; width: 160px; margin-top: 55px; margin-left: 20px; opacity: 0.8; transition: 1s; background-image: url('https://i.imgur.com/4pojK4A.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; margin-bottom: 55px; [/class] [class name=g3 state=hover] cursor: default; [/class] [class=credit] font-size: 10px; color: rgba(0,0,0,0.3); font-family: 'Arial', sans-serif; font-style: italic; position: absolute; margin-top: 295px; margin-left: 200px; [/class] [script class=image on=init] addClass showimg image removeClass show content1 removeClass show content2 removeClass show content3 removeClass show content4 [/script] [script class=name on=click] addClass showimg image removeClass show content1 removeClass show content2 removeClass show content3 removeClass show content4 [/script] [script class=tab1 on=click] addClass show content1 removeClass show content2 removeClass show content3 removeClass show content4 removeClass showimg image [/script] [script class=tab2 on=click] addClass show content2 removeClass show content1 removeClass show content3 removeClass show content4 removeClass showimg image [/script] [script class=tab3 on=click] addClass show content3 removeClass show content1 removeClass show content2 removeClass show content4 removeClass showimg image [/script] [script class=tab4 on=click] addClass show content4 removeClass show content1 removeClass show content2 removeClass show content3 removeClass showimg image [/script] [script class=tab1 on=mouseenter] addClass slide personality [/script] [script class=tab1 on=mouseleave] removeClass slide personality [/script] [script class=tab2 on=mouseenter] addClass slide history [/script] [script class=tab2 on=mouseleave] removeClass slide history [/script] [script class=tab3 on=mouseenter] addClass slide extra [/script] [script class=tab3 on=mouseleave] removeClass slide extra [/script] [script class=tab4 on=mouseenter] addClass slide gallery [/script] [script class=tab4 on=mouseleave] removeClass slide gallery [/script] [div class=container] [div class=box1] [div class=image][/div] [div class=content1] [div class=image1][/div] [div class=para]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a enim odio. Pellentesque viverra sapien eget libero gravida, nec consequat justo pharetra. Ut vel orci ipsum. Pellentesque ornare, massa vitae consectetur vulputate, ipsum urna interdum tortor, nec convallis lectus lectus eu sapien. Etiam id congue lectus. Phasellus a rhoncus nulla. Suspendisse mollis dolor in tellus ultrices vehicula. Nullam non ipsum at tortor interdum ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pulvinar nulla dui, ut iaculis ex efficitur sed. Donec malesuada elementum dolor nec maximus. Pellentesque scelerisque ac sapien ut rutrum. Aliquam ullamcorper, odio lacinia varius accumsan, leo ligula dictum urna, ac accumsan lacus arcu in enim. In hac habitasse platea dictumst. Aenean porta massa sit amet placerat fringilla. Sed quis libero dictum, congue nibh in, bibendum purus. Nunc pulvinar ultrices congue. Nam mauris nisi, sagittis et felis sed, efficitur mattis tortor. Nam risus lacus, sodales ac sem sit amet, lobortis fermentum tortor. Nulla id tellus vitae erat rutrum mollis. Praesent aliquet risus vitae tincidunt scelerisque. Vivamus vitae ligula aliquam ligula pharetra ultricies vitae vitae lorem. Pellentesque aliquam magna nec lectus lacinia luctus. Suspendisse id molestie velit, et tincidunt lorem. Duis varius est nibh, a efficitur ante bibendum nec. Nulla auctor a ex id pharetra. Integer nec leo tincidunt, egestas dui tempus, elementum elit. Curabitur convallis, velit a rutrum iaculis, libero nibh blandit odio, vitae dapibus mauris orci nec lacus. [/div] [/div] [div class=content2] [div class=image2][/div] [div class=para]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a enim odio. Pellentesque viverra sapien eget libero gravida, nec consequat justo pharetra. Ut vel orci ipsum. Pellentesque ornare, massa vitae consectetur vulputate, ipsum urna interdum tortor, nec convallis lectus lectus eu sapien. Etiam id congue lectus. Phasellus a rhoncus nulla. Suspendisse mollis dolor in tellus ultrices vehicula. Nullam non ipsum at tortor interdum ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pulvinar nulla dui, ut iaculis ex efficitur sed. Donec malesuada elementum dolor nec maximus. Pellentesque scelerisque ac sapien ut rutrum. Aliquam ullamcorper, odio lacinia varius accumsan, leo ligula dictum urna, ac accumsan lacus arcu in enim. In hac habitasse platea dictumst. Aenean porta massa sit amet placerat fringilla. Sed quis libero dictum, congue nibh in, bibendum purus. Nunc pulvinar ultrices congue. Nam mauris nisi, sagittis et felis sed, efficitur mattis tortor. Nam risus lacus, sodales ac sem sit amet, lobortis fermentum tortor. Nulla id tellus vitae erat rutrum mollis. Praesent aliquet risus vitae tincidunt scelerisque. Vivamus vitae ligula aliquam ligula pharetra ultricies vitae vitae lorem. Pellentesque aliquam magna nec lectus lacinia luctus. Suspendisse id molestie velit, et tincidunt lorem. Duis varius est nibh, a efficitur ante bibendum nec. Nulla auctor a ex id pharetra. Integer nec leo tincidunt, egestas dui tempus, elementum elit. Curabitur convallis, velit a rutrum iaculis, libero nibh blandit odio, vitae dapibus mauris orci nec lacus. [/div] [/div] [div class=content3] [div class=image3][/div] [div class=para]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a enim odio. Pellentesque viverra sapien eget libero gravida, nec consequat justo pharetra. Ut vel orci ipsum. Pellentesque ornare, massa vitae consectetur vulputate, ipsum urna interdum tortor, nec convallis lectus lectus eu sapien. Etiam id congue lectus. Phasellus a rhoncus nulla. Suspendisse mollis dolor in tellus ultrices vehicula. Nullam non ipsum at tortor interdum ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pulvinar nulla dui, ut iaculis ex efficitur sed. Donec malesuada elementum dolor nec maximus. Pellentesque scelerisque ac sapien ut rutrum. Aliquam ullamcorper, odio lacinia varius accumsan, leo ligula dictum urna, ac accumsan lacus arcu in enim. In hac habitasse platea dictumst. Aenean porta massa sit amet placerat fringilla. Sed quis libero dictum, congue nibh in, bibendum purus. Nunc pulvinar ultrices congue. Nam mauris nisi, sagittis et felis sed, efficitur mattis tortor. Nam risus lacus, sodales ac sem sit amet, lobortis fermentum tortor. Nulla id tellus vitae erat rutrum mollis. Praesent aliquet risus vitae tincidunt scelerisque. Vivamus vitae ligula aliquam ligula pharetra ultricies vitae vitae lorem. Pellentesque aliquam magna nec lectus lacinia luctus. Suspendisse id molestie velit, et tincidunt lorem. Duis varius est nibh, a efficitur ante bibendum nec. Nulla auctor a ex id pharetra. Integer nec leo tincidunt, egestas dui tempus, elementum elit. Curabitur convallis, velit a rutrum iaculis, libero nibh blandit odio, vitae dapibus mauris orci nec lacus. [/div] [/div] [div class=content4] [div class=g1][/div] [div class=g2][/div] [div class=g3][/div] [/div] [/div] [div class=credit]code by wonhae[/div] [div class=name]park eunjae[/div] [div class=tabcontainer] [div class=tab1]i.[/div] [div class=tab2]ii.[/div] [div class=tab3]iii.[/div] [div class=tab4]vi.[/div] [/div] [div class=personality]personality[/div] [div class=history]history[/div] [div class=extra]extra[/div] [div class=gallery]gallery[/div] [/div]
 
Last edited:
[class=main] height: 90px; width: 200px; border-radius: 10px; overflow: hidden; background-color: white; margin: auto; margin-top: 20px; border: 10px solid #DEF1F8; [/class] [class name=main state=hover] cursor: default; [/class] [class=textbox] padding-right: 100px; overflow-y: scroll; height: 90px; width: 200px; [/class] [class name=textbox state=hover] cursor: default; [/class] [class=text] font-size: 12px; color: black; line-height: 15px; letter-spacing: 0px; font-family: 'Arial', sans-serif; text-align: justify; padding: 10px; opacity: 0.6; [/class] [class name=text state=hover] cursor: default; [/class] [div class=main] [div class=textbox] [div class=text](click on the no. 6) wooo hello! oh my god. this was fun, but damn was it complicated. i was going to do a different 'character section' for each of the highlighted dates, but it turned out to be way too complex and i'm tired af right now, so i might come back to this and add more on, but for now, this is how im leaving it.

goldleaf goldleaf once again ily thank u for putting up with constantly asking for ur opinion [/div] [/div] [/div]


.
[class=outer] width: 700px; height: 310px; margin: auto; border: 0px solid green; [/class] [class name=outer state=hover] cursor: url(http://i.imgur.com/2qleX.jpg), auto; [/class] [class=container] width: 300px; height: 230px; background-color: white; margin-left: 10px; margin-top: 20px; [/class] [class name=container state=hover] cursor: url(http://i.imgur.com/2qleX.jpg), auto; [/class] [class=h1] height: 35px; width: 298px; background-color: white; border-right: #F9C2CD 2px solid; border-bottom: #F9C2CD 2px solid; position: absolute; [/class] [class=month] font-size: 24px; font-family: 'Arial' , sans-serif; font-weight: bold; font-style: italic; letter-spacing: 1px; margin-left: 180px; color: #F9C2CD; position: absolute; margin-top: 2px; [/class] [class=icon_bg] height: 35px; width: 35px; border-radius: 10px 0px 0px 0px; overflow: hidden; background-color: #F9C2CD; margin-left: 264px; position: absolute; [/class] [class=icon1] font-size: 24px; color: white; text-align: center; margin-left: 1px; [/class] [class=cal] height: 220px; width: 300px; background-color: white; margin-top: 37px; position: absolute; margin-left: 4px; [/class] [class=week_txt] font-size: 14px; font-weight: bold; color: black; font-family: 'Arial' , sans-serif; text-align: center; display: default; margin-top: -1px; [/class] [class name=week_txt state=hover] cursor: url(http://i.imgur.com/2qleX.jpg), auto; [/class] [class=day] height: 20px; width: 43px; background-color: white; margin-left: -4px; margin-top: 5px; display: inline-block; border-bottom: #F9C2CD 2px solid; [/class] [class name=day state=hover] cursor: url(http://i.imgur.com/2qleX.jpg), auto; [/class] [class=date] height: 38px; width: 38px; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; border-bottom: #F9C2CD 0px solid; transition: 0.5s; [/class] [class=no] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; [/class] [class=date1] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=1] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date2] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=2] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date3] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=3] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date4] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=4] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date5] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=5] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date6] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=6] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date7] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=7] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date8] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=8] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date9] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=9] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date10] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=10] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date11] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=11] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date12] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=12] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date13] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=13] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date14] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=14] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date15] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=15] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date16] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=16] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date17] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=17] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date18] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=18] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date19] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=19] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date20] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=20] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date21] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=21] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date22] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=22] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date23] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=23] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date24] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=24] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date25] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=25] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date26] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=26] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date27] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=27] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date28] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=28] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date29] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=29] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date30] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=30] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=date31] height: 38px; width: 38px; border-radius: 100%; background-color: white; margin-left: 1px; margin-top: 2px; display: inline-block; transition: 0.5s; [/class] [class=31] font-size: 16px; font-weight: bold; text-align: center; font-family: 'Arial' , sans-serif; color: black; margin-top: 8px; transition: 0.5s; [/class] [class=bg_hover] border-radius: 100%; background-color: #F9C2CD; transition: 0.5s; [/class] [class=txt_hover] color: white; transition: 0.2s; [/class] [class=active_date] color: #F9C2CD; cursor: url(http://i.imgur.com/IepP2.jpg), auto; [/class] [class=bg_click] background-color: #F9C2CD; transition: 0.5s; [/class] [class=txt_click] color: white; transition: 0.2s; cursor: url(http://i.imgur.com/IepP2.jpg), auto; [/class] [class=cursor] cursor: url(http://i.imgur.com/IepP2.jpg), auto; [/class] [class=hover1] font-size: 16px; font-family: 'Arial', sans-serif; font-style: italic; font-weight: bold; letter-spacing: 1px; color: #F9C2CD; position: absolute; margin-left: 110px; margin-top: 260px; opacity: 0; transition: 0.5s; [/class] [class=show] opacity: 1; transition: 0.8s; transition-delay: 0.2s; [/class] [class=image_box] height: 90px; width: 90px; border-radius: 100%; position: absolute; margin-left: 580px; margin-top: 0px; border: solid 3px #F9C2CD; overflow: hidden; opacity: 0; transition: 1s; [/class] [class=show_imgbox] opacity: 1; transition: 1s; [/class] [class=image1] border-radius: 100%; opacity: 0; transition: 1s; overflow: hidden; margin-left: -1px; [/class] [class=showimg] opacity: 0.8; transition: 1s; [/class] [class=close] font-size: 22px; font-weight: bold; font-style: italic; font-family: 'Arial' , sans-serif; color: #f9c2cd; position: absolute; margin-top: 32px; margin-left: 600px; z-index: 1; transition: 1s; opacity: 0; [/class] [class=close_bg] font-size: 22px; font-weight: bold; font-style: italic; font-family: 'Arial' , sans-serif; color: white; position: absolute; margin-top: 33px; margin-left: 602px; transition: 1s; opacity: 0; [/class] [class name=close state=hover] cursor: url(http://i.imgur.com/IepP2.jpg), auto; [/class] [class name=close_bg state=hover] cursor: url(http://i.imgur.com/IepP2.jpg), auto; [/class] [class=showclose] opacity: 1; transition: 1.1s; [/class] [class=opacityimg] opacity: 0.2; transition: 1s; [/class] [class=name1] padding: 3px; font-size: 32px; font-family: 'Arial' , sans-serif; font-weight: bold; font-style: italic; color: #F9C2CD; margin-left: 490px; margin-top: 237px; position: absolute; z-index: 1; background-color: white; transition: 1s; opacity: 0; [/class] [class name=name1 state=hover] cursor: url(http://i.imgur.com/IepP2.jpg), auto; [/class] [class=info_bg] height: 30px; width: 30px; border-radius: 100%; overflow: hidden; border: 3px solid #F9C2CD; background-color: white; margin-left: 608.5px; margin-top: 120px; position: absolute; font-size: 18px; color: #F9C2CD; text-align: center; z-index: 1; transition: background-color 0.5s , color 0.5s , opacity 1s; opacity: 0; transition-delay: 0s; [/class] [class name=info_bg state=hover] cursor: url(http://i.imgur.com/IepP2.jpg), auto; background-color: #F9C2CD; color: white; transition: 0.3s; transition-delay: 0s; [/class] [class=gallery_bg] height: 30px; width: 30px; border-radius: 100%; overflow: hidden; border: 3px solid #F9C2CD; background-color: white; margin-left: 608.5px; margin-top: 170px; position: absolute; font-size: 18px; color: #F9C2CD; text-align: center; z-index: 1; opacity: 0; transition: background-color 0.5s , color 0.5s , opacity 1s; transition-delay: 0s; [/class] [class name=gallery_bg state=hover] cursor: url(http://i.imgur.com/IepP2.jpg), auto; background-color: #F9C2CD; color: white; transition: color 0.3s , background-color 0.3s , cursor 0s; transition-delay: 0s; [/class] [class=showtab1] opacity: 1; transition: opacity 1s 1s; [/class] [class=showtab2] opacity: 1; transition: opacity 1s 1.2s; [/class] [class=showname] opacity: 1; transition: 1s; transition-delay: 0.6s; [/class] [class=line1] height: 3px; width: 0px; background-color: #F9C2CD; position: absolute; margin-left: 335px; margin-top: 262px; opacity: 0.3; transition: all 1s; [/class] [class=line1_transform] width: 315px; opacity: 1; transition: width 2s 0.2s ease-in-out , opacity 1s 0.1s; [/class] [class=line2] height: 0px; width: 3px; background-color: #F9C2CD; position: absolute; margin-left: 625px; margin-top: 110px; opacity: 0.3; transition: all 1s; [/class] [class=line2_transform] height: 170px; opacity: 1; transition: height 2s 0.2s ease-in-out , opacity 1s 0.1s; [/class] [class=quotebg] height: 135px; width: 250px; background-color: white; margin-left: 370px; margin-top: 70px; position: absolute; border: 2px solid #f9c2cd; padding: 5px; transition: all 1s; opacity: 1; z-index: 10; [/class] [class=quote_txt] font-size: 24px; font-weight: bold; font-style: italic; font-family: 'Arial', sans-serif; text-align: center; color: #F9C2CD; transition: all 1s; opacity: 1; z-index: 10; [/class] [class=quotebg_hover] background-color: #f9c2cd; transition: 1s; [/class] [class=quotetxt_hover] color: white; transition: 1s; [/class] [class=hidequote] opacity: 0; transition: 1s; z-index: -1; [/class] [class=hidden] height: 300px; width: 370px; background-color: transparent; position: absolute; margin-left: 310px; margin-top: 0px; z-index: 1; pointer-events: default; [/class] [class=musicplayer1] height: 20px; width: 20px; background-color: white; position: absolute; overflow: hidden; opacity: 0; margin-left: 476px; margin-top: 215px; z-index: 1; transition: 1s; pointer-events: auto; [/class] [class name=musicplayer1 state=hover] cursor: url(http://i.imgur.com/IepP2.jpg), auto; [/class] [class=soundcloud1] height: 15px; width: 15px; position: relative; overflow: hidden; transform: scale(0.75); opacity: 0; z-index: -1; transition: 1s; cursor: url(http://i.imgur.com/IepP2.jpg), auto; [/class] [class name=soundcloud1 state=hover] cursor: url(http://i.imgur.com/IepP2.jpg), auto; [/class] [class=play1] font-size: 16px; color: black; margin-left: 5px; position: absolute; pointer-events: none; z-index: 1; opacity: 0; transition: 1s; [/class] [class name=play1 state=hover] cursor: url(http://i.imgur.com/IepP2.jpg), auto; [/class] [class=skipback1] height: 15px; width: 15px; font-size: 16px; color: black; margin-left: 431px; margin-top: 215px; position: absolute; z-index: 1; opacity: 0; transition: 1s; [/class] [class=skipfor1] height: 15px; width: 15px; font-size: 16px; color: black; margin-left: 523px; margin-top: 215px; position: absolute; z-index: 1; opacity: 0; transition: 1s; [/class] [class=timebar1] height: 2px; width: 180px; position: absolute; background-color: rgba(249,194,205,0.4); margin-top: 205px; margin-left: 395px; z-index: 1; opacity: 0; border-radius: 10px; transition: 1s; [/class] [class=timemark1] height: 2px; width: 80px; position: absolute; background-color: rgba(249,194,205,1); margin-top: 205px; margin-left: 395px; z-index: 1; opacity: 0; border-radius: 10px; transition: 1s; [/class] [class=time1] font-size: 10px; font-family: 'Arial' , sans-serif; color: black; margin-left: 398px; margin-top: 190px; position: absolute; font-weight: bold; letter-spacing: 0.5px; opacity: 0; transition: 1s; [/class] [class=time2] font-size: 10px; font-family: 'Arial' , sans-serif; color: black; margin-left: 551px; margin-top: 190px; position: absolute; font-weight: bold; letter-spacing: 0.5px; opacity: 0; transition: 1s; [/class] [class=songtitle1] font-size: 14px; color: black; font-weight: bold; position: absolute; margin-top: 152px; margin-left: 410px; font-family: 'Arial' , sans-serif; opacity: 0; letter-spacing: 0.5px; transition: 1s; [/class] [class=songartist1] font-size: 14px; color: black; font-weight: bold; position: absolute; margin-top: 170px; margin-left: 468px; letter-spacing: 1px; font-family: 'Arial' , sans-serif; opacity: 0; transition: 1s; [/class] [class=album1] height: 125px; width: 125px; background-image: url('https://i.imgur.com/hVFnaAc.jpg'); position: absolute; margin-left: 421px; margin-top: 10px; border: 3px solid #f9c2cd; opacity: 0; transition: 1s; [/class] [class=showmp1] opacity: 1; transition: 1s 1s; [/class] [class=container1] height: 200px; width: 230px; background-color: transparent; position: absolute; margin-left: 370px; margin-top: 45px; opacity: 0; transition: 1s; overflow: hidden; [/class] [class=showcontainer1] opacity: 1; transition: 1s; [/class] [class=tabh1] font-size: 24px; color: #f9c2cd; font-weight: bold; letter-spacing: 1px; position: absolute; margin-top: 10px; margin-left: 20px; font-style: italic; font-family: 'Arial' , sans-serif; transition: 1s; [/class] [class=txtbox1] height: 165px; width: 215px; background-color: transparent; margin-top: 45px; margin-left: 5px; border-left: 3px solid #f9c2cd; overflow-y: scroll; padding-right: 25px; position: absolute; transition: 1s; z-index: 1; [/class] [class=para] font-size: 12px; font-family: 'Arial' , sans-serif; text-align: justify; color: black; padding-left: 5px; padding-bottom: 5px; opacity: 0.5; z-index: 1; [/class] [class=container2] height: 210px; width: 230px; background-color: transparent; position: absolute; margin-left: 370px; margin-top: 30px; opacity: 0; transition: 1s; overflow: hidden; [/class] [class=showcontainer2] opacity: 1; transition: 1s; [/class] [class=img1] height: 90px; width: 90px; background-color: white; position: absolute; border: 3px solid #f9c2cd; opacity: 0; transition: 1s; [/class] [class=showimg1] opacity: 1; transition: 1s 1s; [/class] [class=img2] height: 90px; width: 90px; background-color: white; position: absolute; margin-top: 102px; border: 3px solid #f9c2cd; opacity: 0; transition: 1s; [/class] [class=showimg2] opacity: 1; transition: 1s 1.2s; [/class] [class=img3] height: 90px; width: 90px; background-color: white; position: absolute; margin-left: 102px; border: 3px solid #f9c2cd; opacity: 0; transition: 1s; [/class] [class=showimg3] opacity: 1; transition: 1s 1.4s; [/class] [class=img4] height: 90px; width: 90px; background-color: white; position: absolute; margin-left: 102px; margin-top: 102px; border: 3px solid #f9c2cd; opacity: 0; transition: 1s; [/class] [class=showimg4] opacity: 1; transition: 1s 1.6s; [/class] [class=credit] font-size: 10px; color: rgba(0,0,0,0.2); font-family: 'Arial', sans-serif; font-style: italic; font-weight: bold; position: absolute; margin-top: 15px; margin-left: 10px; letter-spacing: 0.5px; [/class] [script class=date1 on=mouseenter] addClass bg_hover date1 addClass txt_hover 1 [/script] [script class=date1 on=mouseleave] removeClass bg_hover date1 removeClass txt_hover 1 [/script] [script class=date2 on=mouseenter] addClass bg_hover date2 addClass txt_hover 2 [/script] [script class=date2 on=mouseleave] removeClass bg_hover date2 removeClass txt_hover 2 [/script] [script class=date3 on=mouseenter] addClass bg_hover date3 addClass txt_hover 3 [/script] [script class=date3 on=mouseleave] removeClass bg_hover date3 removeClass txt_hover 3 [/script] [script class=date4 on=mouseenter] addClass bg_hover date4 addClass txt_hover 4 [/script] [script class=date4 on=mouseleave] removeClass bg_hover date4 removeClass txt_hover 4 [/script] [script class=date5 on=mouseenter] addClass bg_hover date5 addClass txt_hover 5 [/script] [script class=date5 on=mouseleave] removeClass bg_hover date5 removeClass txt_hover 5 [/script] [script class=date6 on=mouseenter] addClass bg_hover date6 addClass txt_hover 6 removeClass active_date 6 addClass show hover1 [/script] [script class=date6 on=mouseleave] removeClass bg_hover date6 removeClass txt_hover 6 addClass active_date 6 removeClass show hover1 [/script] [script class=date7 on=mouseenter] addClass bg_hover date7 addClass txt_hover 7 [/script] [script class=date7 on=mouseleave] removeClass bg_hover date7 removeClass txt_hover 7 [/script] [script class=date8 on=mouseenter] addClass bg_hover date8 addClass txt_hover 8 [/script] [script class=date8 on=mouseleave] removeClass bg_hover date8 removeClass txt_hover 8 [/script] [script class=date9 on=mouseenter] addClass bg_hover date9 addClass txt_hover 9 [/script] [script class=date9 on=mouseleave] removeClass bg_hover date9 removeClass txt_hover 9 [/script] [script class=date10 on=mouseenter] addClass bg_hover date10 addClass txt_hover 10 [/script] [script class=date10 on=mouseleave] removeClass bg_hover date10 removeClass txt_hover 10 [/script] [script class=date11 on=mouseenter] addClass bg_hover date11 addClass txt_hover 11 [/script] [script class=date11 on=mouseleave] removeClass bg_hover date11 removeClass txt_hover 11 [/script] [script class=date12 on=mouseenter] addClass bg_hover date12 addClass txt_hover 12 [/script] [script class=date12 on=mouseleave] removeClass bg_hover date12 removeClass txt_hover 12 [/script] [script class=date13 on=mouseenter] addClass bg_hover date13 addClass txt_hover 13 [/script] [script class=date13 on=mouseleave] removeClass bg_hover date13 removeClass txt_hover 13 [/script] [script class=date14 on=mouseenter] addClass bg_hover date14 addClass txt_hover 14 [/script] [script class=date14 on=mouseleave] removeClass bg_hover date14 removeClass txt_hover 14 [/script] [script class=date15 on=mouseenter] addClass bg_hover date15 addClass txt_hover 15 removeClass active_date 15 [/script] [script class=date15 on=mouseleave] removeClass bg_hover date15 removeClass txt_hover 15 addClass active_date 15 [/script] [script class=date16 on=mouseenter] addClass bg_hover date16 addClass txt_hover 16 [/script] [script class=date16 on=mouseleave] removeClass bg_hover date16 removeClass txt_hover 16 [/script] [script class=date17 on=mouseenter] addClass bg_hover date17 addClass txt_hover 17 [/script] [script class=date17 on=mouseleave] removeClass bg_hover date17 removeClass txt_hover 17 [/script] [script class=date18 on=mouseenter] addClass bg_hover date18 addClass txt_hover 18 removeClass active_date 18 [/script] [script class=date18 on=mouseleave] removeClass bg_hover date18 removeClass txt_hover 18 addClass active_date 18 [/script] [script class=date19 on=mouseenter] addClass bg_hover date19 addClass txt_hover 19 [/script] [script class=date19 on=mouseleave] removeClass bg_hover date19 removeClass txt_hover 19 [/script] [script class=date20 on=mouseenter] addClass bg_hover date20 addClass txt_hover 20 [/script] [script class=date20 on=mouseleave] removeClass bg_hover date20 removeClass txt_hover 20 [/script] [script class=date21 on=mouseenter] addClass bg_hover date21 addClass txt_hover 21 removeClass active_date 21 [/script] [script class=date21 on=mouseleave] removeClass bg_hover date21 removeClass txt_hover 21 addClass active_date 21 [/script] [script class=date22 on=mouseenter] addClass bg_hover date22 addClass txt_hover 22 [/script] [script class=date22 on=mouseleave] removeClass bg_hover date22 removeClass txt_hover 22 [/script] [script class=date23 on=mouseenter] addClass bg_hover date23 addClass txt_hover 23 [/script] [script class=date23 on=mouseleave] removeClass bg_hover date23 removeClass txt_hover 23 [/script] [script class=date24 on=mouseenter] addClass bg_hover date24 addClass txt_hover 24 [/script] [script class=date24 on=mouseleave] removeClass bg_hover date24 removeClass txt_hover 24 [/script] [script class=date25 on=mouseenter] addClass bg_hover date25 addClass txt_hover 25 [/script] [script class=date25 on=mouseleave] removeClass bg_hover date25 removeClass txt_hover 25 [/script] [script class=date26 on=mouseenter] addClass bg_hover date26 addClass txt_hover 26 [/script] [script class=date26 on=mouseleave] removeClass bg_hover date26 removeClass txt_hover 26 [/script] [script class=date27 on=mouseenter] addClass bg_hover date27 addClass txt_hover 27 [/script] [script class=date27 on=mouseleave] removeClass bg_hover date27 removeClass txt_hover 27 [/script] [script class=date28 on=mouseenter] addClass bg_hover date28 addClass txt_hover 28 [/script] [script class=date28 on=mouseleave] removeClass bg_hover date28 removeClass txt_hover 28 [/script] [script class=date29 on=mouseenter] addClass bg_hover date29 addClass txt_hover 29 [/script] [script class=date29 on=mouseleave] removeClass bg_hover date29 removeClass txt_hover 29 [/script] [script class=date30 on=mouseenter] addClass bg_hover date30 addClass txt_hover 30 [/script] [script class=date30 on=mouseleave] removeClass bg_hover date30 removeClass txt_hover 30 [/script] [script class=date31 on=mouseenter] addClass bg_hover date31 addClass txt_hover 31 [/script] [script class=date31 on=mouseleave] removeClass bg_hover date31 removeClass txt_hover 31 [/script] [script class=6 on=init] addClass active_date 6 addClass cursor [/script] [script class=15 on=init] addClass active_date 15 addClass cursor [/script] [script class=18 on=init] addClass active_date 18 addClass cursor [/script] [script class=21 on=init] addClass active_date 21 addClass cursor [/script] [script class=name1 on=click] addClass showmp1 musicplayer1 addClass showmp1 play1 addClass showmp1 skipfor1 addClass showmp1 skipback1 addClass showmp1 timebar1 addClass showmp1 timemark1 addClass showmp1 time1 addClass showmp1 time2 addClass showmp1 songtitle1 addClass showmp1 songartist1 addClass showmp1 album1 removeClass showcontainer1 container1 removeClass showcontainer2 container2 removeClass showimg1 img1 removeClass showimg2 img2 removeClass showimg3 img3 removeClass showimg4 img4 [/script] [script class=date6 on=click] addClass active_date 6 addClass show_imgbox image_box addClass showimg image1 addClass bg_click date6 addClass txt_click 6 addClass line1_transform line1 addClass line2_transform line2 addClass showname name1 addClass showtab1 info_bg addClass showtab2 gallery_bg addClass hidequote quotebg hide hidden addClass showmp1 musicplayer1 addClass showmp1 play1 addClass showmp1 skipfor1 addClass showmp1 skipback1 addClass showmp1 timebar1 addClass showmp1 timemark1 addClass showmp1 time1 addClass showmp1 time2 addClass showmp1 songtitle1 addClass showmp1 songartist1 addClass showmp1 album1 removeClass showcontainer1 container1 removeClass showcontainer2 container2 removeClass showimg1 img1 removeClass showimg2 img2 removeClass showimg3 img3 removeClass showimg4 img4 [/script] [script class=info_bg on=click] addClass showcontainer1 container1 removeClass showmp1 musicplayer1 removeClass showmp1 play1 removeClass showmp1 skipfor1 removeClass showmp1 skipback1 removeClass showmp1 timebar1 removeClass showmp1 timemark1 removeClass showmp1 time1 removeClass showmp1 time2 removeClass showmp1 songtitle1 removeClass showmp1 songartist1 removeClass showmp1 album1 removeClass showimg1 img1 removeClass showimg2 img2 removeClass showimg3 img3 removeClass showimg4 img4 [/script] [script class=gallery_bg on=click] addClass showcontainer2 container2 removeClass showmp1 musicplayer1 removeClass showmp1 play1 removeClass showmp1 skipfor1 removeClass showmp1 skipback1 removeClass showmp1 timebar1 removeClass showmp1 timemark1 removeClass showmp1 time1 removeClass showmp1 time2 removeClass showmp1 songtitle1 removeClass showmp1 songartist1 removeClass showmp1 album1 addClass showimg1 img1 addClass showimg2 img2 addClass showimg3 img3 addClass showimg4 img4 removeClass showcontainer1 container1 [/script] [script class=image_box on=mouseenter] addClass showclose close_bg addClass showclose close addClass opacityimg image1 [/script] [script class=image_box on=mouseleave] removeClass showclose close_bg removeClass showclose close removeClass opacityimg image1 [/script] [script class=close_bg on=mouseenter] addClass showclose close_bg addClass showclose close addClass opacityimg image1 [/script] [script class=close_bg on=mouseleave] removeClass showclose close_bg removeClass showclose close removeClass opacityimg image1 [/script] [script class=close on=mouseenter] addClass showclose close_bg addClass showclose close addClass opacityimg image1 [/script] [script class=close on=mouseleave] removeClass showclose close_bg removeClass showclose close removeClass opacityimg image1 [/script] [script class=close on=click] removeClass show_imgbox image_box removeClass showimg image1 removeClass bg_click date6 removeClass txt_click 6 removeClass line1_transform line1 removeClass line2_transform line2 removeClass showname name1 removeClass showtab1 info_bg removeClass showtab2 gallery_bg removeClass hidequote quotebg show hidden removeClass showcontainer1 container1 removeClass showmp1 musicplayer1 removeClass showmp1 play1 removeClass showmp1 skipfor1 removeClass showmp1 skipback1 removeClass showmp1 timebar1 removeClass showmp1 timemark1 removeClass showmp1 time1 removeClass showmp1 time2 removeClass showmp1 songtitle1 removeClass showmp1 songartist1 removeClass showmp1 album1 removeClass showimg1 img1 removeClass showimg2 img2 removeClass showimg3 img3 removeClass showimg4 img4 removeClass showcontainer2 container2 [/script] [script class=close_bg on=click] removeClass show_imgbox image_box removeClass showimg image1 removeClass bg_click date6 removeClass txt_click 6 removeClass line1_transform line1 removeClass line2_transform line2 removeClass showname name1 removeClass showtab1 info_bg removeClass showtab2 gallery_bg removeClass hidequote quotebg show hidden removeClass showcontainer1 container1 removeClass showmp1 musicplayer1 removeClass showmp1 play1 removeClass showmp1 skipfor1 removeClass showmp1 skipback1 removeClass showmp1 timebar1 removeClass showmp1 timemark1 removeClass showmp1 time1 removeClass showmp1 time2 removeClass showmp1 songtitle1 removeClass showmp1 songartist1 removeClass showmp1 album1 removeClass showimg1 img1 removeClass showimg2 img2 removeClass showimg3 img3 removeClass showimg4 img4 removeClass showcontainer2 container2 [/script] [script class=quotebg on=mouseenter] addClass quotebg_hover quotebg addClass quotetxt_hover quote_txt [/script] [script class=quotebg on=mouseleave] removeClass quotebg_hover quotebg removeClass quotetxt_hover quote_txt [/script] [div class=outer] [div class=container] [div class=h1] [div class=icon_bg][div class=icon1][/div][/div] [div class=month]march[/div] [/div] [div class=cal] [div class=day][div class=week_txt]mon[/div][/div] [div class=day][div class=week_txt]tue[/div][/div] [div class=day][div class=week_txt]wed[/div][/div] [div class=day][div class=week_txt]thu[/div][/div] [div class=day][div class=week_txt]fri[/div][/div] [div class=day][div class=week_txt]sat[/div][/div] [div class=day][div class=week_txt]sun[/div][/div] [div class=date][div class=no]
0
[/div][/div] [div class=date][div class=no]
0
[/div][/div] [div class=date][div class=no]
0
[/div][/div] [div class=date1][div class=1]1[/div][/div] [div class=date2][div class=2]2[/div][/div] [div class=date3][div class=3]3[/div][/div] [div class=date4][div class=4]4[/div][/div] [div class=date5][div class=5]5[/div][/div] [div class=date6][div class=6]6[/div][/div] [div class=date7][div class=7]7[/div][/div] [div class=date8][div class=8]8[/div][/div] [div class=date9][div class=9]9[/div][/div] [div class=date10][div class=10]10[/div][/div] [div class=date11][div class=11]11[/div][/div] [div class=date12][div class=12]12[/div][/div] [div class=date13][div class=13]13[/div][/div] [div class=date14][div class=14]14[/div][/div] [div class=date15][div class=15]15[/div][/div] [div class=date16][div class=16]16[/div][/div] [div class=date17][div class=17]17[/div][/div] [div class=date18][div class=18]18[/div][/div] [div class=date19][div class=19]19[/div][/div] [div class=date20][div class=20]20[/div][/div] [div class=date21][div class=21]21[/div][/div] [div class=date22][div class=22]22[/div][/div] [div class=date23][div class=23]23[/div][/div] [div class=date24][div class=24]24[/div][/div] [div class=date25][div class=25]25[/div][/div] [div class=date26][div class=26]26[/div][/div] [div class=date27][div class=27]27[/div][/div] [div class=date28][div class=28]28[/div][/div] [div class=date29][div class=29]29[/div][/div] [div class=date30][div class=30]30[/div][/div] [div class=date31][div class=31]31[/div][/div] [div class=date][div class=no]
0
[/div][/div] [/div] [div class=hover1]lee hayi[/div] [div class=credit]code by wonhae[/div] [div class=quotebg] [div class=quote_txt]si l'amour n'est qu'une illusion, alors qu'est-ce que la réalité?[/div] [/div] [div class=image_box][div class=image1]
UWp5fpO.png
[/div][/div] [div class=close]close[/div][div class=close_bg]close[/div] [div class=line1][/div] [div class=line2][/div] [div class=name1]lee hayi[/div] [div class=info_bg]
[/div] [div class=gallery_bg]
[/div] [div class=musicplayer1] [div class=play1][/div] [div class=soundcloud1]
[/div] [/div] [div class=skipback1][/div] [div class=skipfor1][/div] [div class=timebar1][/div] [div class=time1]0:34[/div] [div class=time2]1:30[/div] [div class=songtitle1]Put My Hands On You[/div] [div class=songartist1]DΞΔN[/div] [div class=album1][/div] [div class=timemark1][/div] [div class=hidden][/div] [div class=container1] [div class=tabh1]about[/div] [div class=txtbox1] [div class=para]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu massa, laoreet at viverra ut, semper at mi. Vestibulum vitae purus vel ipsum dictum tristique. Suspendisse potenti. Nam vel laoreet tortor. Duis non aliquam sem. Praesent tortor nisi, fermentum et erat vitae, scelerisque varius diam. Donec efficitur risus non fermentum ultricies. Pellentesque varius pulvinar elit vitae varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis venenatis non diam sit amet dapibus. Nunc accumsan diam at lacus euismod aliquam. Nunc malesuada sollicitudin interdum.[/div] [/div] [/div] [div class=container2] [div class=img1]
TeO1cS8.jpg
[/div] [div class=img2]
PNvIycA.jpg
[/div] [div class=img3]
wSCycjm.jpg
[/div] [div class=img4]
dAWT72x.jpg
[/div] [/div] [/div] [/div]
 
Last edited:
[class=containerbig] height: 600px; width: 600px; margin: auto; background-color: transparent; [/class] [class=main] height: 90px; width: 200px; border-radius: 10px; overflow: hidden; background-color: white; position: absolute; margin-left: 10px; margin-top: 100px; border: 10px solid #DEF1F8; [/class] [class name=main state=hover] cursor: default; [/class] [class=textbox] padding-right: 100px; overflow-y: scroll; height: 90px; width: 200px; [/class] [class name=textbox state=hover] cursor: default; [/class] [class=text] font-size: 12px; color: black; line-height: 15px; letter-spacing: 0px; font-family: 'Arial', sans-serif; text-align: justify; padding: 10px; opacity: 0.6; [/class] [class name=text state=hover] cursor: default; [/class]
.
[class=container] height: 570px; width: 340px; background: linear-gradient(to bottom, rgba(85,75,77,1), rgba(18,18,18,1)); margin-left: 300px; margin-top: 10px; position: absolute; border-radius: 5px; border: 1px solid gray; overflow: hidden; [/class] [class=back] font-size: 26px; color: white; position: absolute; margin-left: 20px; margin-top: 7px; z-index: 10; [/class] [class name=back state=hover] cursor: pointer; [/class] [class=ellipsis_top] font-family: 'Arial' , sans-serif; font-size: 26px; color: white; position: absolute; margin-left: 300px; margin-top: -3px; letter-spacing: 2px; font-weight: lighter; z-index: 10; [/class] [class name=ellipsis_top state=hover] cursor: pointer; [/class] [class=header_container] height: 240px; width: 340px; background-color: transparent; position: absolute; margin-top: 0px; margin-left: 0px; z-index: 1; overflow: hidden; [/class] [class=container1] height: 170px; width: 340px; margin-top: 45px; margin-left: 0px; position: absolute; opacity: 1; transform: translateX(0px); transition: 0.5s; [/class] [class=containerbg] height: 230px; width: 340px; background-image: url('https://i.imgur.com/sFjG3an.png'); position: absolute; margin-top: -45px; opacity: 0.1; z-index: -1; -webkit-filter: blur(20px); filter: blur(20px); -webkit-box-shadow:inset 0px -30px 30px 10px rgba(85,75,77,0.2); box-shadow:inset 0px -30px 30px 10px rgba(85,75,77,0.2); [/class] [class=playlist_img] height: 110px; width: 110px; position: absolute; margin-left: 120px; margin-top: 0px; overflow: hidden; pointer-events: none; box-shadow: 3px 3px 20px rgba(0,0,0,0.2); opacity: 0.8; [/class] [class=playlist_title] font-family: 'Arial' , sans-serif; font-size: 18px; font-weight: bold; letter-spacing: 2px; color: white; position: absolute; margin-left: 133px; margin-top: 115px; [/class] [class name=playlist_title state=hover] cursor: default; [/class] [class=followers] font-family: 'Arial' , sans-serif; font-size: 9px; color: rgba(255,255,255,0.6); margin-left: 120px; margin-top: 140px; position: absolute; letter-spacing: 1px; [/class] [class name=followers state=hover] cursor: default; [/class] [class=container2] height: 170px; width: 340px; margin-top: 45px; margin-left: 0px; position: absolute; opacity: 0; transform: translateX(340px); transition: 0.5s; [/class] [class=user_img] height: 80px; width: 80px; position: absolute; margin-left: 130px; margin-top: 20px; border-radius: 100%; overflow: hidden; pointer-events: none; [/class] [class=playlist_by] font-family: 'Arial' , sans-serif; font-size: 14px; font-weight: normal; font-variant: small-caps; letter-spacing: 2px; color: white; position: absolute; margin-left: 127px; margin-top: -5px; [/class] [class name=playlist_by state=hover] cursor: default; [/class] [class=user_title] height: 20px; width: 110px; background-color: rgba(255,255,255,0.2); margin-left: 115px; margin-top: 110px; position: absolute; border-radius: 20px; [/class] [class name=user_title state=hover] cursor: pointer; [/class] [class=user_txt] font-size: 15px; font-family: 'Arial' , sans-serif; font-weight: bold; font-variant: small-caps; color: white; text-align: center; margin-top: -1px; margin-left: 2px; letter-spacing: 2px; [/class] [class=date] font-size: 9px; font-weight: normal; font-family: 'Arial' , sans-serif; letter-spacing: 1px; color: white; position: absolute; margin-left: 20px; margin-top: 140px; [/class] [class name=date state=hover] cursor: default; [/class] [class=length] font-size: 9px; font-weight: normal; font-family: 'Arial' , sans-serif; letter-spacing: 1px; color: white; position: absolute; margin-left: 270px; margin-top: 140px; [/class] [class name=length state=hover] cursor: default; [/class] [class=circle1] font-size: 8px; margin-left: 162px; margin-top: 210px; position: absolute; color: rgba(255,255,255,0.2); z-index: 1; [/class] [class name=circle1 state=hover] cursor: pointer; [/class] [class=circle2] font-size: 8px; margin-left: 175px; margin-top: 210px; position: absolute; color: rgba(255,255,255,0.2); z-index: 1; [/class] [class name=circle2 state=hover] cursor: pointer; [/class] [class=slide] transform: translateX(-340px); transition: 0.5s; opacity: 0; [/class] [class=slide2] transform: translateX(0px); transition: 0.5s; opacity: 1; [/class] [class=clicked] color: white; [/class] [class=main_container] height: 520px; width: 340px; background-color: transparent; position: absolute; margin-top: 0px; margin-left: 0px; overflow: hidden; [/class] [class=content1] height: 500px; width: 340px; background-color: transparent; margin-top: 235px; position: absolute z-index: 1; [/class] [class=shuffle_all] height: 40px; width: 160px; position: sticky; position: -webkit-sticky; background-color: #2BB858; border-radius: 20px; margin-left: 93px; margin-top: -7px; top: 25px; [/class] [class name=shuffle_all state=hover] cursor: pointer; [/class] [class=shuffle_txt] font-size: 15px; font-weight: bold; font-variant: small-caps; font-family: 'Arial' , sans-serif; position: absolute; margin-left: 32px; margin-top: 8px; letter-spacing: 1px; color: white; [/class] [class=dl_txt] font-size: 12px; color: white; font-family: 'Arial' , sans-serif; position: absolute; letter-spacing: 0.5px; font-weight: bold; margin-left: 20px; margin-top: 15px; opacity: 1; transition: 0.2s; [/class] [class=dl_toggle] position: absolute; margin-left: 290px; margin-top: 15px; height: 15px; width: 30px; border-radius: 50px; border: 1px solid white; background-color: transparent; transition: 0.5s; [/class] [class name=dl_toggle state=hover] cursor: pointer; [/class] [class=dl_circle] position: absolute; margin-left: 290px; margin-top: 15px; height: 17px; width: 17px; border-radius: 100%; background-color: white; transform: translateX(0px); transition: 0.5s; [/class] [class name=dl_circle state=hover] cursor: pointer; [/class] [class=toggle_on] transform: translateX(15px); transition: 0.5s; [/class] [class=toggle_color] background-color: #2BB858; border: 1px solid #2BB858; transition: 0.5s; [/class] [class=progress] font-size: 12px; color: white; font-family: 'Arial' , sans-serif; position: absolute; letter-spacing: 0.5px; font-weight: bold; margin-left: 20px; margin-top: 15px; opacity: 1; transition: 0.2s; [/class] [class=songtxt1] font-size: 13px; color: white; position: absolute; font-family: 'Arial', sans-serif; font-weight: bold; letter-spacing: 0.75px; margin-left: 20px; margin-top: 50px; [/class] [class name=songtxt1 state=hover] cursor: pointer; [/class] [class=dl1] color: #2BB858; font-size: 12px; position: absolute; margin-top: 67px; margin-left: 20px; opacity: 0; [/class] [class=artisttxt1] font-size: 12px; color: rgba(255,255,255,0.8); position: absolute; font-family: 'Arial', sans-serif; font-weight: normal; letter-spacing: 0.75px; margin-left: 20px; margin-top: 68px; transform: translateX(0px); transition: 0.1s; [/class] [class name=artisttxt1 state=hover] cursor: pointer; [/class] [class=elip1] font-family: 'Arial' , sans-serif; font-size: 20px; color: white; position: absolute; margin-left: 300px; margin-top: 50px; letter-spacing: 1px; font-weight: lighter; [/class] [class name=elip1 state=hover] cursor: pointer; [/class] [class=songtxt2] font-size: 13px; color: white; position: absolute; font-family: 'Arial', sans-serif; font-weight: bold; letter-spacing: 0.75px; margin-left: 20px; margin-top: 100px; [/class] [class name=songtxt2 state=hover] cursor: pointer; [/class] [class=dl2] color: #2BB858; font-size: 12px; position: absolute; margin-top: 117px; margin-left: 20px; opacity: 0; [/class] [class=artisttxt2] font-size: 12px; color: rgba(255,255,255,0.8); position: absolute; font-family: 'Arial', sans-serif; font-weight: normal; letter-spacing: 0.75px; margin-left: 70px; margin-top: 118px; transform: translateX(0px); transition: 0.1s; [/class] [class name=artisttxt2 state=hover] cursor: pointer; [/class] [class=elip2] font-family: 'Arial' , sans-serif; font-size: 20px; color: white; position: absolute; margin-left: 300px; margin-top: 100px; letter-spacing: 1px; font-weight: lighter; [/class] [class name=elip2 state=hover] cursor: pointer; [/class] [class=songtxt3] font-size: 13px; color: white; position: absolute; font-family: 'Arial', sans-serif; font-weight: bold; letter-spacing: 0.75px; margin-left: 20px; margin-top: 150px; [/class] [class name=songtxt3 state=hover] cursor: pointer; [/class] [class=dl3] color: #2BB858; font-size: 12px; position: absolute; margin-top: 167px; margin-left: 20px; opacity: 0; [/class] [class=artisttxt3] font-size: 12px; color: rgba(255,255,255,0.8); position: absolute; font-family: 'Arial', sans-serif; font-weight: normal; letter-spacing: 0.75px; margin-left: 20px; margin-top: 168px; transform: translateX(0px); transition: 0.1s; [/class] [class name=artisttxt3 state=hover] cursor: pointer; [/class] [class=elip3] font-family: 'Arial' , sans-serif; font-size: 20px; color: white; position: absolute; margin-left: 300px; margin-top: 150px; letter-spacing: 1px; font-weight: lighter; [/class] [class name=elip3 state=hover] cursor: pointer; [/class] [class=moveartist] transform: translateX(15px); transition: 0.5s 0.2s; [/class] [class=showdl] opacity: 1; transition: 0.2s 0.25s; [/class] [class=songselected] color: #2BB858; [/class] [class=explicit] height: 13px; width: 44px; color: rgba(0,0,0,0.8); background-color: rgba(255,255,255,0.7); border-radius: 2px; margin-left: 20px; margin-top: 119px; font-size: 10px; font-family: 'Arial' , sans-serif; font-variant: small-caps; font-weight: bold; letter-spacing: 0.5px; text-align: center; position: absolute; transform: translateX(0px); transition: 0.2s; [/class] [class=movexpl] transform: translateX(15px); transition: 0.5s 0.2s; [/class] [class=playbar] height: 43px; width: 340px; margin-top: 209px; position: absolute; background-color: rgba(255,255,255,0.1); border-bottom: 0.5px solid rgba(0,0,0,0.7); [/class] [animation=musicplay] [keyframe=0]width: 0px;[/keyframe] [keyframe=25]width: 25%;[/keyframe] [keyframe=50]width: 50%;[/keyframe] [keyframe=75]width: 75%;[/keyframe] [keyframe=100]width: 339px;[/keyframe] [/animation] [class=musictime] height: 3px; width: 0px; background-color: white; position: absolute; margin-top: 209px; margin-left: 1px; [/class] [class name=musictime state=hover] cursor: default; [/class] [class=musicanim] animation: {post_id}musicplay 154s linear 1; -webkit-animation: {post_id}musicplay 154s linear 1; [/class] [class=pauseanim] animation-play-state: paused; -webkit-animation-play-state: paused; [/class] [class=up] font-size: 26px; color: white; position: absolute; margin-left: 20px; margin-top: 210px; [/class] [class name=up state=hover] cursor: pointer; [/class] [class=bartxt] font-size: 13px; color: rgba(255,255,255,0.8); position: absolute; font-family: 'Arial', sans-serif; font-weight: normal; letter-spacing: 0.5px; margin-left: 95px; margin-top: 6px; [/class] [class name=bartxt state=hover] cursor: pointer; [/class] [class=comp] font-size: 14px; color: rgba(255,255,255,1); position: absolute; margin-left: 123px; margin-top: 20px; [/class] [class name=comp state=hover] cursor: default; [/class] [class=devices] font-size: 10px; color: rgba(255,255,255,0.9); position: absolute; margin-left: 133.5px; margin-top: 23px; letter-spacing: 0.5px; font-family: 'Arial', sans-serif; font-weight: normal; [/class] [class name=devices state=hover] cursor: default; [/class] [class=playbox] height: 30px; width: 30px; position: absolute; margin-left: 295px; margin-top: 3px; background-color: transparent; [/class] [class=playcircle] font-size: 28px; color: rgba(255,255,255,0.8); text-align: center; margin-top: -4px; [/class] [class name=playcircle state=hover] cursor: pointer; [/class] [class=play] font-size: 10px; color: rgba(255,255,255,0.8); margin-left: 11px; margin-top: -25.5px; position: absolute; opacity: 0; transition: 0.1s; [/class] [class name=play state=hover] cursor: pointer; [/class] [class=pause] font-size: 9px; color: rgba(255,255,255,0.8); margin-left: 10.25px; margin-top: -25.5px; position: absolute; opacity: 0; transition: 0.1s; [/class] [class name=pause state=hover] cursor: pointer; [/class] [class=showpl] opacity: 1; transition: 0.1s; [/class] [class=bgup] height: 0; bottom: 87px; width: 340px; background: linear-gradient(rgba(18,18,18,1), rgba(61,61,61,1), rgba(18,18,18,1)); position: absolute; z-index: 10; overflow: hidden; border-radius: 5px; transition: height 0.8s ease-in-out , opacity 0.3s 0.4s linear; opacity: 0; [/class] [class=down] font-size: 26px; color: white; position: absolute; margin-left: 20px; margin-top: 7px; z-index: 10; [/class] [class name=down state=hover] cursor: pointer; [/class] [class=bgtransition] height: 568px; opacity: 1; transition: height 0.8s 0s ease-in-out , opacity 0.2s 0.2s linear; [/class] [class=album1] height: 220px; width: 220px; background-color: transparent; margin-top: 105px; margin-left: 62px; position: absolute; box-shadow: 3px 3px 20px rgba(0,0,0,0.1); border-radius: 5px; overflow: hidden; opacity: 0.9; [/class] [class=albumcontainer] height: 220px; width: 220px; overflow-y: scroll; padding-right: 25px; position: absolute; [/class] [class=albumblur1] width: 340px; height: 100%; background-image: url('https://im.ezgif.com/tmp/ezgif-1-fadc968cae.png'); transform: scale(1.5); -webkit-filter: blur(20px); filter: blur(20px); position: absolute; opacity: 0.25; [/class] [class=queue] font-size: 16px; color: rgba(255,255,255,0.7); position: absolute; margin-top: 14px; margin-left: 305px; [/class] [class name=queue state=hover] cursor: pointer; [/class] [class=pltitle] font-size: 15px; color: rgba(255,255,255,0.8); font-weight: normal; font-variant: small-caps; position: absolute; margin-left: 90px; margin-top: 30px; letter-spacing: 1px; font-family: 'Arial' , sans-serif; [/class] [class name=pltitle state=hover] cursor: default; [/class] [class=title] font-size: 14px; color: rgba(255,255,255,0.6); font-weight: normal; position: absolute; margin-left: 143px; margin-top: 50px; letter-spacing: 0.5px; font-family: 'Arial' , sans-serif; [/class] [class name=title state=hover] cursor: pointer; [/class] [class=songtitle1] font-size: 16px; color: white; font-weight: bold; font-family: 'Arial' , sans-serif; letter-spacing: 0.5px; position: absolute; margin-top: 345px; margin-left: 103px; [/class] [class name=songtitle1 state=hover] cursor: pointer; [/class] [class=artist1] font-size: 14px; color: rgba(255,255,255,0.6); position: absolute; margin-top: 370px; margin-left: 150px; font-family: 'Arial' , sans-serif; letter-spacing: 0.5px; [/class] [class name=artist1 state=hover] cursor: pointer; [/class] [class=add1] font-size: 32px; color: rgba(255,255,255,0.6); position: absolute; font-weight: lighter; font-family: 'Arial' , sans-serif; margin-top: 385px; margin-left: 30px; [/class] [class name=add1 state=hover] cursor: pointer; [/class] [class=elip4] font-family: 'Arial' , sans-serif; font-size: 20px; color: white; position: absolute; margin-left: 290px; margin-top: 385px; letter-spacing: 1px; font-weight: default; [/class] [class name=elip4 state=hover] cursor: pointer; [/class] [class=timebar] height: 1px; width: 280px; margin-left: 30px; margin-top: 450px; position: absolute; background-color: rgba(255,255,255,0.2); [/class] [class=timemark] height: 1px; width: 100px; margin-left: 30px; margin-top: 450px; position: absolute; background-color: rgba(255,255,255,1); [/class] [class=timepoint] font-size: 10px; color: white; margin-left: 123px; margin-top: 444px; position: absolute; [/class] [class name=timepoint state=hover] cursor: pointer; [/class] [class=timestamp1] font-size: 12px; font-family: 'Arial' , sans-serif; position: absolute; margin-left: 30px; margin-top: 430px; color: rgba(255,255,255,0.8); [/class] [class=timestamp2] font-size: 12px; font-family: 'Arial' , sans-serif; position: absolute; margin-left: 283px; margin-top: 430px; color: rgba(255,255,255,0.8); [/class] [class=play2] height: 128px; width: 128px; transform: scale(0.4); margin-left: 108px; margin-top: 435px; position: absolute; opacity: 0.8; pointer-events: none; [/class] [class=backward2] font-size: 22px; color: rgba(255,255,255,0.9); margin-left: 108px; margin-top: 483px; position: absolute; pointer-events: none; [/class] [class=forward2] font-size: 22px; color: rgba(255,255,255,0.9); margin-left: 220px; margin-top: 483px; position: absolute; pointer-events: none; [/class] [class=shuffleicn] width: 24px; height: 24px; margin-left: 30px; margin-top: 485px; position: absolute; transform: scale(0.8); pointer-events: none; [/class] [class=repeaticn] font-size: 24px; color: #2BB858; opacity: 0.8; margin-left: 290px; margin-top: 480px; position: absolute; transform: rotate(90deg); pointer-events: none; [/class] [class=textbox1] height: 220px; width: 220px; position: absolute; top: -20px; margin-top: 220px; padding: 5px; background-color: rgba(255,255,255,0.9); [/class] [class=bottom_bar] height: 50px; width: 340px; margin-top: 520px; position: absolute; background-color: rgba(255,255,255,0.1); [/class] [class=library_icn] font-size: 18px; color: white; margin-left: 302px; margin-top: 3px; position: absolute; [/class] [class name=library_icn state=hover] cursor: pointer; [/class] [class=library_txt] font-size: 9px; font-family: 'Arial' , sans-seri; font-weight: bold; margin-left: 290px; margin-top: 28px; position: absolute; color: white; letter-spacing: 0.5px; transform: scaleY(1.1); [/class] [class name=library_txt state=hover] cursor: pointer; [/class] [class=radio_icn] font-size: 16px; color: rgba(255,255,255,0.5); margin-left: 245px; margin-top: 5.5px; position: absolute; transform: rotate(45deg); [/class] [class name=radio_icn state=hover] cursor: pointer; [/class] [class=radio_icn2] font-size: 17px; color: rgba(255,255,255,0.5); margin-left: 234px; margin-top: 3.8px; position: absolute; transform: rotate(-135deg); [/class] [class name=radio_icn2 state=hover] cursor: pointer; [/class] [class=radio_txt] font-size: 9px; font-family: 'Arial' , sans-seri; font-weight: normal; margin-left: 232px; margin-top: 29px; position: absolute; color: white; letter-spacing: 0.5px; transform: scaleY(1.1); [/class] [class name=radio_txt state=hover] cursor: pointer; [/class] [class=search_icn] font-size: 22px; color: rgba(255,255,255,0.5); margin-left: 172px; margin-top: 1.5px; position: absolute; transform: rotate(-45deg); [/class] [class name=search_icn state=hover] cursor: pointer; [/class] [class=search_txt] font-size: 9px; font-family: 'Arial' , sans-seri; font-weight: normal; margin-left: 162px; margin-top: 29px; position: absolute; color: white; letter-spacing: 0.5px; transform: scaleY(1.1); [/class] [class name=search_txt state=hover] cursor: pointer; [/class] [class=browse_icn] font-size: 18px; color: rgba(255,255,255,0.5); margin-left: 97px; margin-top: 4px; position: absolute; [/class] [class name=browse_icn state=hover] cursor: pointer; [/class] [class=browse_txt] font-size: 9px; font-family: 'Arial' , sans-seri; font-weight: normal; margin-left: 88px; margin-top: 29px; position: absolute; color: white; letter-spacing: 0.5px; transform: scaleY(1.1); [/class] [class name=browse_txt state=hover] cursor: pointer; [/class] [class=browse_inner] font-size: 8px; color: rgba(255,255,255,0.5); margin-left: 104px; margin-top: 13px; position: absolute; [/class] [class=home_icn] font-size: 24px; color: rgba(255,255,255,0.5); margin-left: 24px; margin-top: 1px; position: absolute; [/class] [class name=home_icn state=hover] cursor: pointer; [/class] [class=home_txt] font-size: 9px; font-family: 'Arial' , sans-seri; font-weight: normal; margin-left: 20px; margin-top: 28px; position: absolute; color: white; letter-spacing: 0.5px; transform: scaleY(1.1); [/class] [class name=home_txt state=hover] cursor: pointer; [/class] [script class=songtxt2 on=init] addClass songselected songtxt1 [/script] [script class=circle1 on=init] addClass clicked circle1 [/script] [script class=circle1 on=click] removeClass slide container1 removeClass slide2 container2 removeClass clicked circle2 addClass clicked circle1 [/script] [script class=circle2 on=click] addClass slide container1 addClass slide2 container2 addClass clicked circle2 removeClass clicked circle1 [/script] [script class=dl_circle version=2] (= state 0) [/script] [script class=dl_circle on=click version=2] (if (== state 0) (group (setText "Downloading..." "progress") (setVal "Cancel") (addClass "toggle_on" "dl_circle") (addClass "toggle_color" "dl_toggle") (addClass "moveartist" "artisttxt1") (addClass "movexpl" "explicit") (addClass "moveartist" "artisttxt2") (addClass "moveartist" "artisttxt3") (= percentage 30) (= interval (setInterval 1 (group (if (< percentage 100) (group (if (== percentage 30) (addClass "showdl" "dl1") ) (if (== percentage 60) (addClass "showdl" "dl2") ) (if (== percentage 90) (addClass "showdl" "dl3") ) (setText (+ "Downloading...") "progress") (= percentage (+ percentage 30)) ) (group (clearInterval interval) (setText (+ "Downloaded") "progress") ) ) ))) (= state 1) ) (group (setText "Download" "progress") (setVal "Download") (removeClass "toggle_on" "dl_circle") (removeClass "toggle_color" "dl_toggle") (removeClass "showdl" "dl1") (removeClass "showdl" "dl2") (removeClass "showdl" "dl3") (removeClass "moveartist" "artisttxt1") (removeClass "movexpl" "explicit") (removeClass "moveartist" "artisttxt2") (removeClass "moveartist" "artisttxt3") (clearTimeout interval) (= state 0) ) ) [/script] [script class=dl_toggle version=2] (= state 0) [/script] [script class=dl_toggle on=click version=2] (if (== state 0) (group (setText "Downloading..." "progress") (setVal "Cancel") (addClass "toggle_on" "dl_circle") (addClass "toggle_color" "dl_toggle") (addClass "moveartist" "artisttxt1") (addClass "movexpl" "explicit") (addClass "moveartist" "artisttxt2") (addClass "moveartist" "artisttxt3") (= percentage 30) (= interval (setInterval 1 (group (if (< percentage 100) (group (if (== percentage 30) (addClass "showdl" "dl1") ) (if (== percentage 60) (addClass "showdl" "dl2") ) (if (== percentage 90) (addClass "showdl" "dl3") ) (setText (+ "Downloading...") "progress") (= percentage (+ percentage 30)) ) (group (clearInterval interval) (setText (+ "Downloaded") "progress") ) ) ))) (= state 1) ) (group (setText "Download" "progress") (setVal "Download") (removeClass "toggle_on" "dl_circle") (removeClass "toggle_color" "dl_toggle") (removeClass "showdl" "dl1") (removeClass "showdl" "dl2") (removeClass "showdl" "dl3") (removeClass "moveartist" "artisttxt1") (removeClass "movexpl" "explicit") (removeClass "moveartist" "artisttxt2") (removeClass "moveartist" "artisttxt3") (clearTimeout interval) (= state 0) ) ) [/script] [script class=play on=init] addClass showpl play [/script] [script class=playbox] set pl 0 [/script] [script class=playbox on=click] if (eq ${pl} 0) (removeClass showpl play) (addClass showpl play) if (eq ${pl} 0) (addClass musicanim musictime) if (eq ${pl} 1) (addClass pauseanim musictime) (removeClass pauseanim musictime) if (eq ${pl} 0) (addClass showpl pause) (removeClass showpl pause) if (eq ${pl} 1) (set pl 0) (set pl 1) [/script] [div class=containerbig] [div class=main] [div class=textbox] [div class=text]!! rly unfinished spotify replica !! – click the download toggle! click the play button! and the lil circles above the shuffle.. they do stuff..

pls ignore the glitchy radio symbol. ill fix it another time.. it was hell to figure out but i have something to replace it - which ill do when it isn't 2:30am.

this really isn't finished, at all. i have a lot more planned for it. and i was originally going to use it for a krp as a character sheet but i have other ideas that will likely be less complicated to actually finish. that and i have too much schoolwork right now, so i cant devote all the time this code deserves.. i will come back to it. but for now, the first page (i guess its a page) is the only one that is near complete. there is a second page that appears when you click the up arrow (it shows the same as it does on the spotify app) but it was glitching out too much so i've taken it off for the time being.
[/div] [/div] [/div] [div class=container] [div class=back][/div] [div class=ellipsis_top]...[/div] [div class=header_container] [div class=container1] [div class=containerbg][/div] [div class=playlist_img]
ezgif-1-3d021e54a7.png
[/div] [div class=playlist_title]untitled.[/div] [div class=followers]4,378 FOLLOWERS[/div] [/div] [div class=container2] [div class=playlist_by]playlist by[/div] [div class=user_img]
6jv9mDv.png
[/div] [div class=user_title] [div class=user_txt]eunhalo[/div] [/div] [div class=date] 12 Apr 2018[/div] [div class=length] 47min[/div] [/div] [div class=circle1][/div] [div class=circle2][/div] [/div] [div class=main_container] [div class=content1] [div class=shuffle_all] [div class=shuffle_txt]shuffle play[/div] [/div] [div class=dl_txt]Download[/div][div class=progress][/div] [div class=dl_toggle][/div][div class=dl_circle][/div] [div class=songtxt1]Girl, Interrupted[/div] [div class=dl1][/div] [div class=artisttxt1]2xxx!, Miso • Life[/div] [div class=elip1]...[/div] [div class=songtxt2]Will He[/div] [div class=dl2][/div] [div class=explicit]
explicit
[/div][div class=artisttxt2]Joji• In Tongues (Deluxe)[/div] [div class=elip2]...[/div] [div class=songtxt3]Downtown Baby[/div] [div class=dl3][/div] [div class=artisttxt3]Bloo • Downtown Baby[/div] [div class=elip3]...[/div] [div class=playbar] [div class=bartxt]Girl, Interrupted 2xxx![/div] [div class=comp][/div][div class=devices]Devices Available[/div] [div class=playbox] [div class=playcircle][/div] [div class=play][/div] [div class=pause][/div] [/div] [/div] [div class=musictime][/div] [div class=up][/div] [/div] [/div] [div class=bgup] [div class=albumblur1][/div] [div class=down][/div][div class=queue][/div] [div class=pltitle]playing from playlist[/div] [div class=title]untitled.[/div] [div class=album1]
ezgif-1-f3e9c619ed.png
[div class=albumcontainer] [div class=textbox1]hello[/div] [/div] [/div] [div class=songtitle1]Girl, Interrupted[/div] [div class=artist1]2xxx![/div] [div class=add1]+[/div][div class=elip4]...[/div] [div class=timebar][/div][div class=timemark][/div][div class=timepoint][/div] [div class=timestamp1]1:14[/div][div class=timestamp2]-1:47[/div] [div class=play2]
OL2puCC.png
[/div] [div class=backward2][/div][div class=forward2][/div] [div class=shuffleicn]
42ynJsr.png
[/div][div class=repeaticn]↻[/div] [/div] [div class=bottom_bar] [div class=library_icn][/div] [div class=library_txt]Library[/div] [div class=radio_icn2][/div][div class=radio_icn][/div] [div class=radio_txt]Radio[/div] [div class=search_icn][/div] [div class=search_txt]Search[/div] [div class=browse_icn][/div][div class=browse_inner][/div] [div class=browse_txt]Browse[/div] [div class=home_icn][/div] [div class=home_txt]Home[/div] [/div] [/div] [/div]
 
[class=containerbig] height: 600px; width: 600px; margin: auto; background-color: transparent; [/class] [class=main] height: 90px; width: 200px; border-radius: 10px; overflow: hidden; background-color: white; position: absolute; margin-left: 10px; margin-top: 100px; border: 10px solid #DEF1F8; [/class] [class name=main state=hover] cursor: default; [/class] [class=textbox] padding-right: 100px; overflow-y: scroll; height: 90px; width: 200px; [/class] [class name=textbox state=hover] cursor: default; [/class] [class=text] font-size: 12px; color: black; line-height: 15px; letter-spacing: 0px; font-family: 'Arial', sans-serif; text-align: justify; padding: 10px; opacity: 0.6; [/class] [class name=text state=hover] cursor: default; [/class]
.
[class=container] height: 570px; width: 340px; background: linear-gradient(to bottom, rgba(85,75,77,1), rgba(18,18,18,1)); margin-left: 300px; margin-top: 10px; position: absolute; border-radius: 5px; border: 1px solid gray; overflow: hidden; [/class] [class=back] font-size: 26px; color: white; position: absolute; margin-left: 20px; margin-top: 7px; z-index: 10; [/class] [class name=back state=hover] cursor: pointer; [/class] [class=ellipsis_top] font-family: 'Arial' , sans-serif; font-size: 26px; color: white; position: absolute; margin-left: 300px; margin-top: -3px; letter-spacing: 2px; font-weight: lighter; z-index: 10; [/class] [class name=ellipsis_top state=hover] cursor: pointer; [/class] [class=header_container] height: 240px; width: 340px; background-color: transparent; position: absolute; margin-top: 0px; margin-left: 0px; z-index: 1; overflow: hidden; [/class] [class=container1] height: 170px; width: 340px; margin-top: 45px; margin-left: 0px; position: absolute; opacity: 1; transform: translateX(0px); transition: 0.5s; [/class] [class=containerbg] height: 230px; width: 340px; background-image: url('https://i.imgur.com/sFjG3an.png'); position: absolute; margin-top: -45px; opacity: 0.1; z-index: -1; -webkit-filter: blur(20px); filter: blur(20px); -webkit-box-shadow:inset 0px -30px 30px 10px rgba(85,75,77,0.2); box-shadow:inset 0px -30px 30px 10px rgba(85,75,77,0.2); [/class] [class=playlist_img] height: 110px; width: 110px; position: absolute; margin-left: 120px; margin-top: 0px; overflow: hidden; pointer-events: none; box-shadow: 3px 3px 20px rgba(0,0,0,0.2); opacity: 0.8; [/class] [class=playlist_title] font-family: 'Arial' , sans-serif; font-size: 18px; font-weight: bold; letter-spacing: 2px; color: white; position: absolute; margin-left: 133px; margin-top: 115px; [/class] [class name=playlist_title state=hover] cursor: default; [/class] [class=followers] font-family: 'Arial' , sans-serif; font-size: 9px; color: rgba(255,255,255,0.6); margin-left: 120px; margin-top: 140px; position: absolute; letter-spacing: 1px; [/class] [class name=followers state=hover] cursor: default; [/class] [class=container2] height: 170px; width: 340px; margin-top: 45px; margin-left: 0px; position: absolute; opacity: 0; transform: translateX(340px); transition: 0.5s; [/class] [class=user_img] height: 80px; width: 80px; position: absolute; margin-left: 130px; margin-top: 20px; border-radius: 100%; overflow: hidden; pointer-events: none; [/class] [class=playlist_by] font-family: 'Arial' , sans-serif; font-size: 14px; font-weight: normal; font-variant: small-caps; letter-spacing: 2px; color: white; position: absolute; margin-left: 127px; margin-top: -5px; [/class] [class name=playlist_by state=hover] cursor: default; [/class] [class=user_title] height: 20px; width: 110px; background-color: rgba(255,255,255,0.2); margin-left: 115px; margin-top: 110px; position: absolute; border-radius: 20px; [/class] [class name=user_title state=hover] cursor: pointer; [/class] [class=user_txt] font-size: 15px; font-family: 'Arial' , sans-serif; font-weight: bold; font-variant: small-caps; color: white; text-align: center; margin-top: -1px; margin-left: 2px; letter-spacing: 2px; [/class] [class=date] font-size: 9px; font-weight: normal; font-family: 'Arial' , sans-serif; letter-spacing: 1px; color: white; position: absolute; margin-left: 20px; margin-top: 140px; [/class] [class name=date state=hover] cursor: default; [/class] [class=length] font-size: 9px; font-weight: normal; font-family: 'Arial' , sans-serif; letter-spacing: 1px; color: white; position: absolute; margin-left: 270px; margin-top: 140px; [/class] [class name=length state=hover] cursor: default; [/class] [class=circle1] font-size: 8px; margin-left: 162px; margin-top: 210px; position: absolute; color: rgba(255,255,255,0.2); z-index: 1; [/class] [class name=circle1 state=hover] cursor: pointer; [/class] [class=circle2] font-size: 8px; margin-left: 175px; margin-top: 210px; position: absolute; color: rgba(255,255,255,0.2); z-index: 1; [/class] [class name=circle2 state=hover] cursor: pointer; [/class] [class=slide] transform: translateX(-340px); transition: 0.5s; opacity: 0; [/class] [class=slide2] transform: translateX(0px); transition: 0.5s; opacity: 1; [/class] [class=clicked] color: white; [/class] [class=main_container] height: 520px; width: 340px; background-color: transparent; position: absolute; margin-top: 0px; margin-left: 0px; overflow: hidden; [/class] [class=content1] height: 500px; width: 340px; background-color: transparent; margin-top: 235px; position: absolute z-index: 1; [/class] [class=shuffle_all] height: 40px; width: 160px; position: sticky; position: -webkit-sticky; background-color: #2BB858; border-radius: 20px; margin-left: 93px; margin-top: -7px; top: 25px; [/class] [class name=shuffle_all state=hover] cursor: pointer; [/class] [class=shuffle_txt] font-size: 15px; font-weight: bold; font-variant: small-caps; font-family: 'Arial' , sans-serif; position: absolute; margin-left: 32px; margin-top: 8px; letter-spacing: 1px; color: white; [/class] [class=dl_txt] font-size: 12px; color: white; font-family: 'Arial' , sans-serif; position: absolute; letter-spacing: 0.5px; font-weight: bold; margin-left: 20px; margin-top: 15px; opacity: 1; transition: 0.2s; [/class] [class=dl_toggle] position: absolute; margin-left: 290px; margin-top: 15px; height: 15px; width: 30px; border-radius: 50px; border: 1px solid white; background-color: transparent; transition: 0.5s; [/class] [class name=dl_toggle state=hover] cursor: pointer; [/class] [class=dl_circle] position: absolute; margin-left: 290px; margin-top: 15px; height: 17px; width: 17px; border-radius: 100%; background-color: white; transform: translateX(0px); transition: 0.5s; [/class] [class name=dl_circle state=hover] cursor: pointer; [/class] [class=toggle_on] transform: translateX(15px); transition: 0.5s; [/class] [class=toggle_color] background-color: #2BB858; border: 1px solid #2BB858; transition: 0.5s; [/class] [class=progress] font-size: 12px; color: white; font-family: 'Arial' , sans-serif; position: absolute; letter-spacing: 0.5px; font-weight: bold; margin-left: 20px; margin-top: 15px; opacity: 1; transition: 0.2s; [/class] [class=songtxt1] font-size: 13px; color: white; position: absolute; font-family: 'Arial', sans-serif; font-weight: bold; letter-spacing: 0.75px; margin-left: 20px; margin-top: 50px; [/class] [class name=songtxt1 state=hover] cursor: pointer; [/class] [class=dl1] color: #2BB858; font-size: 12px; position: absolute; margin-top: 67px; margin-left: 20px; opacity: 0; [/class] [class=artisttxt1] font-size: 12px; color: rgba(255,255,255,0.8); position: absolute; font-family: 'Arial', sans-serif; font-weight: normal; letter-spacing: 0.75px; margin-left: 20px; margin-top: 68px; transform: translateX(0px); transition: 0.1s; [/class] [class name=artisttxt1 state=hover] cursor: pointer; [/class] [class=elip1] font-family: 'Arial' , sans-serif; font-size: 20px; color: white; position: absolute; margin-left: 300px; margin-top: 50px; letter-spacing: 1px; font-weight: lighter; [/class] [class name=elip1 state=hover] cursor: pointer; [/class] [class=songtxt2] font-size: 13px; color: white; position: absolute; font-family: 'Arial', sans-serif; font-weight: bold; letter-spacing: 0.75px; margin-left: 20px; margin-top: 100px; [/class] [class name=songtxt2 state=hover] cursor: pointer; [/class] [class=dl2] color: #2BB858; font-size: 12px; position: absolute; margin-top: 117px; margin-left: 20px; opacity: 0; [/class] [class=artisttxt2] font-size: 12px; color: rgba(255,255,255,0.8); position: absolute; font-family: 'Arial', sans-serif; font-weight: normal; letter-spacing: 0.75px; margin-left: 70px; margin-top: 118px; transform: translateX(0px); transition: 0.1s; [/class] [class name=artisttxt2 state=hover] cursor: pointer; [/class] [class=elip2] font-family: 'Arial' , sans-serif; font-size: 20px; color: white; position: absolute; margin-left: 300px; margin-top: 100px; letter-spacing: 1px; font-weight: lighter; [/class] [class name=elip2 state=hover] cursor: pointer; [/class] [class=songtxt3] font-size: 13px; color: white; position: absolute; font-family: 'Arial', sans-serif; font-weight: bold; letter-spacing: 0.75px; margin-left: 20px; margin-top: 150px; [/class] [class name=songtxt3 state=hover] cursor: pointer; [/class] [class=dl3] color: #2BB858; font-size: 12px; position: absolute; margin-top: 167px; margin-left: 20px; opacity: 0; [/class] [class=artisttxt3] font-size: 12px; color: rgba(255,255,255,0.8); position: absolute; font-family: 'Arial', sans-serif; font-weight: normal; letter-spacing: 0.75px; margin-left: 20px; margin-top: 168px; transform: translateX(0px); transition: 0.1s; [/class] [class name=artisttxt3 state=hover] cursor: pointer; [/class] [class=elip3] font-family: 'Arial' , sans-serif; font-size: 20px; color: white; position: absolute; margin-left: 300px; margin-top: 150px; letter-spacing: 1px; font-weight: lighter; [/class] [class name=elip3 state=hover] cursor: pointer; [/class] [class=moveartist] transform: translateX(15px); transition: 0.5s 0.2s; [/class] [class=showdl] opacity: 1; transition: 0.2s 0.25s; [/class] [class=songselected] color: #2BB858; [/class] [class=explicit] height: 13px; width: 44px; color: rgba(0,0,0,0.8); background-color: rgba(255,255,255,0.7); border-radius: 2px; margin-left: 20px; margin-top: 119px; font-size: 10px; font-family: 'Arial' , sans-serif; font-variant: small-caps; font-weight: bold; letter-spacing: 0.5px; text-align: center; position: absolute; transform: translateX(0px); transition: 0.2s; [/class] [class=movexpl] transform: translateX(15px); transition: 0.5s 0.2s; [/class] [class=playbar] height: 43px; width: 340px; margin-top: 209px; position: absolute; background-color: rgba(255,255,255,0.1); border-bottom: 0.5px solid rgba(0,0,0,0.7); [/class] [animation=musicplay] [keyframe=0]width: 0px;[/keyframe] [keyframe=25]width: 25%;[/keyframe] [keyframe=50]width: 50%;[/keyframe] [keyframe=75]width: 75%;[/keyframe] [keyframe=100]width: 339px;[/keyframe] [/animation] [class=musictime] height: 3px; width: 0px; background-color: white; position: absolute; margin-top: 209px; margin-left: 1px; [/class] [class name=musictime state=hover] cursor: default; [/class] [class=musicanim] animation: {post_id}musicplay 154s linear 1; -webkit-animation: {post_id}musicplay 154s linear 1; [/class] [class=pauseanim] animation-play-state: paused; -webkit-animation-play-state: paused; [/class] [class=up] font-size: 26px; color: white; position: absolute; margin-left: 20px; margin-top: 210px; [/class] [class name=up state=hover] cursor: pointer; [/class] [class=bartxt] font-size: 13px; color: rgba(255,255,255,0.8); position: absolute; font-family: 'Arial', sans-serif; font-weight: normal; letter-spacing: 0.5px; margin-left: 95px; margin-top: 6px; [/class] [class name=bartxt state=hover] cursor: pointer; [/class] [class=comp] font-size: 14px; color: rgba(255,255,255,1); position: absolute; margin-left: 123px; margin-top: 20px; [/class] [class name=comp state=hover] cursor: default; [/class] [class=devices] font-size: 10px; color: rgba(255,255,255,0.9); position: absolute; margin-left: 133.5px; margin-top: 23px; letter-spacing: 0.5px; font-family: 'Arial', sans-serif; font-weight: normal; [/class] [class name=devices state=hover] cursor: default; [/class] [class=playbox] height: 30px; width: 30px; position: absolute; margin-left: 295px; margin-top: 3px; background-color: transparent; [/class] [class=playcircle] font-size: 28px; color: rgba(255,255,255,0.8); text-align: center; margin-top: -4px; [/class] [class name=playcircle state=hover] cursor: pointer; [/class] [class=play] font-size: 10px; color: rgba(255,255,255,0.8); margin-left: 11px; margin-top: -25.5px; position: absolute; opacity: 0; transition: 0.1s; [/class] [class name=play state=hover] cursor: pointer; [/class] [class=pause] font-size: 9px; color: rgba(255,255,255,0.8); margin-left: 10.25px; margin-top: -25.5px; position: absolute; opacity: 0; transition: 0.1s; [/class] [class name=pause state=hover] cursor: pointer; [/class] [class=showpl] opacity: 1; transition: 0.1s; [/class] [class=bgup] height: 0; bottom: 87px; width: 340px; background: linear-gradient(rgba(18,18,18,1), rgba(61,61,61,1), rgba(18,18,18,1)); position: absolute; z-index: 10; overflow: hidden; border-radius: 5px; transition: height 0.8s ease-in-out , opacity 0.3s 0.4s linear; opacity: 0; [/class] [class=down] font-size: 26px; color: white; position: absolute; margin-left: 20px; margin-top: 7px; z-index: 10; [/class] [class name=down state=hover] cursor: pointer; [/class] [class=bgtransition] height: 568px; opacity: 1; transition: height 0.8s 0s ease-in-out , opacity 0.2s 0.2s linear; [/class] [class=album1] height: 220px; width: 220px; background-color: transparent; margin-top: 105px; margin-left: 62px; position: absolute; box-shadow: 3px 3px 20px rgba(0,0,0,0.1); border-radius: 5px; overflow: hidden; opacity: 0.9; [/class] [class=albumcontainer] height: 220px; width: 220px; overflow-y: scroll; padding-right: 25px; position: absolute; [/class] [class=albumblur1] width: 340px; height: 100%; background-image: url('https://im.ezgif.com/tmp/ezgif-1-fadc968cae.png'); transform: scale(1.5); -webkit-filter: blur(20px); filter: blur(20px); position: absolute; opacity: 0.25; [/class] [class=queue] font-size: 16px; color: rgba(255,255,255,0.7); position: absolute; margin-top: 14px; margin-left: 305px; [/class] [class name=queue state=hover] cursor: pointer; [/class] [class=pltitle] font-size: 15px; color: rgba(255,255,255,0.8); font-weight: normal; font-variant: small-caps; position: absolute; margin-left: 90px; margin-top: 30px; letter-spacing: 1px; font-family: 'Arial' , sans-serif; [/class] [class name=pltitle state=hover] cursor: default; [/class] [class=title] font-size: 14px; color: rgba(255,255,255,0.6); font-weight: normal; position: absolute; margin-left: 143px; margin-top: 50px; letter-spacing: 0.5px; font-family: 'Arial' , sans-serif; [/class] [class name=title state=hover] cursor: pointer; [/class] [class=songtitle1] font-size: 16px; color: white; font-weight: bold; font-family: 'Arial' , sans-serif; letter-spacing: 0.5px; position: absolute; margin-top: 345px; margin-left: 103px; [/class] [class name=songtitle1 state=hover] cursor: pointer; [/class] [class=artist1] font-size: 14px; color: rgba(255,255,255,0.6); position: absolute; margin-top: 370px; margin-left: 150px; font-family: 'Arial' , sans-serif; letter-spacing: 0.5px; [/class] [class name=artist1 state=hover] cursor: pointer; [/class] [class=add1] font-size: 32px; color: rgba(255,255,255,0.6); position: absolute; font-weight: lighter; font-family: 'Arial' , sans-serif; margin-top: 385px; margin-left: 30px; [/class] [class name=add1 state=hover] cursor: pointer; [/class] [class=elip4] font-family: 'Arial' , sans-serif; font-size: 20px; color: white; position: absolute; margin-left: 290px; margin-top: 385px; letter-spacing: 1px; font-weight: default; [/class] [class name=elip4 state=hover] cursor: pointer; [/class] [class=timebar] height: 1px; width: 280px; margin-left: 30px; margin-top: 450px; position: absolute; background-color: rgba(255,255,255,0.2); [/class] [class=timemark] height: 1px; width: 100px; margin-left: 30px; margin-top: 450px; position: absolute; background-color: rgba(255,255,255,1); [/class] [class=timepoint] font-size: 10px; color: white; margin-left: 123px; margin-top: 444px; position: absolute; [/class] [class name=timepoint state=hover] cursor: pointer; [/class] [class=timestamp1] font-size: 12px; font-family: 'Arial' , sans-serif; position: absolute; margin-left: 30px; margin-top: 430px; color: rgba(255,255,255,0.8); [/class] [class=timestamp2] font-size: 12px; font-family: 'Arial' , sans-serif; position: absolute; margin-left: 283px; margin-top: 430px; color: rgba(255,255,255,0.8); [/class] [class=play2] height: 128px; width: 128px; transform: scale(0.4); margin-left: 108px; margin-top: 435px; position: absolute; opacity: 0.8; pointer-events: none; [/class] [class=backward2] font-size: 22px; color: rgba(255,255,255,0.9); margin-left: 108px; margin-top: 483px; position: absolute; pointer-events: none; [/class] [class=forward2] font-size: 22px; color: rgba(255,255,255,0.9); margin-left: 220px; margin-top: 483px; position: absolute; pointer-events: none; [/class] [class=shuffleicn] width: 24px; height: 24px; margin-left: 30px; margin-top: 485px; position: absolute; transform: scale(0.8); pointer-events: none; [/class] [class=repeaticn] font-size: 24px; color: #2BB858; opacity: 0.8; margin-left: 290px; margin-top: 480px; position: absolute; transform: rotate(90deg); pointer-events: none; [/class] [class=textbox1] height: 220px; width: 220px; position: absolute; top: -20px; margin-top: 220px; padding: 5px; background-color: rgba(255,255,255,0.9); [/class] [class=bottom_bar] height: 50px; width: 340px; margin-top: 520px; position: absolute; background-color: rgba(255,255,255,0.1); [/class] [class=library_icn] font-size: 18px; color: white; margin-left: 302px; margin-top: 3px; position: absolute; [/class] [class name=library_icn state=hover] cursor: pointer; [/class] [class=library_txt] font-size: 9px; font-family: 'Arial' , sans-seri; font-weight: bold; margin-left: 290px; margin-top: 28px; position: absolute; color: white; letter-spacing: 0.5px; transform: scaleY(1.1); [/class] [class name=library_txt state=hover] cursor: pointer; [/class] [class=radio_icn] font-size: 16px; color: rgba(255,255,255,0.5); margin-left: 245px; margin-top: 5.5px; position: absolute; transform: rotate(45deg); [/class] [class name=radio_icn state=hover] cursor: pointer; [/class] [class=radio_icn2] font-size: 17px; color: rgba(255,255,255,0.5); margin-left: 234px; margin-top: 3.8px; position: absolute; transform: rotate(-135deg); [/class] [class name=radio_icn2 state=hover] cursor: pointer; [/class] [class=radio_txt] font-size: 9px; font-family: 'Arial' , sans-seri; font-weight: normal; margin-left: 232px; margin-top: 29px; position: absolute; color: white; letter-spacing: 0.5px; transform: scaleY(1.1); [/class] [class name=radio_txt state=hover] cursor: pointer; [/class] [class=search_icn] font-size: 22px; color: rgba(255,255,255,0.5); margin-left: 172px; margin-top: 1.5px; position: absolute; transform: rotate(-45deg); [/class] [class name=search_icn state=hover] cursor: pointer; [/class] [class=search_txt] font-size: 9px; font-family: 'Arial' , sans-seri; font-weight: normal; margin-left: 162px; margin-top: 29px; position: absolute; color: white; letter-spacing: 0.5px; transform: scaleY(1.1); [/class] [class name=search_txt state=hover] cursor: pointer; [/class] [class=browse_icn] font-size: 18px; color: rgba(255,255,255,0.5); margin-left: 97px; margin-top: 4px; position: absolute; [/class] [class name=browse_icn state=hover] cursor: pointer; [/class] [class=browse_txt] font-size: 9px; font-family: 'Arial' , sans-seri; font-weight: normal; margin-left: 88px; margin-top: 29px; position: absolute; color: white; letter-spacing: 0.5px; transform: scaleY(1.1); [/class] [class name=browse_txt state=hover] cursor: pointer; [/class] [class=browse_inner] font-size: 8px; color: rgba(255,255,255,0.5); margin-left: 104px; margin-top: 13px; position: absolute; [/class] [class=home_icn] font-size: 24px; color: rgba(255,255,255,0.5); margin-left: 24px; margin-top: 1px; position: absolute; [/class] [class name=home_icn state=hover] cursor: pointer; [/class] [class=home_txt] font-size: 9px; font-family: 'Arial' , sans-seri; font-weight: normal; margin-left: 20px; margin-top: 28px; position: absolute; color: white; letter-spacing: 0.5px; transform: scaleY(1.1); [/class] [class name=home_txt state=hover] cursor: pointer; [/class] [script class=songtxt2 on=init] addClass songselected songtxt1 [/script] [script class=circle1 on=init] addClass clicked circle1 [/script] [script class=circle1 on=click] removeClass slide container1 removeClass slide2 container2 removeClass clicked circle2 addClass clicked circle1 [/script] [script class=circle2 on=click] addClass slide container1 addClass slide2 container2 addClass clicked circle2 removeClass clicked circle1 [/script] [script class=dl_circle version=2] (= state 0) [/script] [script class=dl_circle on=click version=2] (if (== state 0) (group (setText "Downloading..." "progress") (setVal "Cancel") (addClass "toggle_on" "dl_circle") (addClass "toggle_color" "dl_toggle") (addClass "moveartist" "artisttxt1") (addClass "movexpl" "explicit") (addClass "moveartist" "artisttxt2") (addClass "moveartist" "artisttxt3") (= percentage 30) (= interval (setInterval 1 (group (if (< percentage 100) (group (if (== percentage 30) (addClass "showdl" "dl1") ) (if (== percentage 60) (addClass "showdl" "dl2") ) (if (== percentage 90) (addClass "showdl" "dl3") ) (setText (+ "Downloading...") "progress") (= percentage (+ percentage 30)) ) (group (clearInterval interval) (setText (+ "Downloaded") "progress") ) ) ))) (= state 1) ) (group (setText "Download" "progress") (setVal "Download") (removeClass "toggle_on" "dl_circle") (removeClass "toggle_color" "dl_toggle") (removeClass "showdl" "dl1") (removeClass "showdl" "dl2") (removeClass "showdl" "dl3") (removeClass "moveartist" "artisttxt1") (removeClass "movexpl" "explicit") (removeClass "moveartist" "artisttxt2") (removeClass "moveartist" "artisttxt3") (clearTimeout interval) (= state 0) ) ) [/script] [script class=dl_toggle version=2] (= state 0) [/script] [script class=dl_toggle on=click version=2] (if (== state 0) (group (setText "Downloading..." "progress") (setVal "Cancel") (addClass "toggle_on" "dl_circle") (addClass "toggle_color" "dl_toggle") (addClass "moveartist" "artisttxt1") (addClass "movexpl" "explicit") (addClass "moveartist" "artisttxt2") (addClass "moveartist" "artisttxt3") (= percentage 30) (= interval (setInterval 1 (group (if (< percentage 100) (group (if (== percentage 30) (addClass "showdl" "dl1") ) (if (== percentage 60) (addClass "showdl" "dl2") ) (if (== percentage 90) (addClass "showdl" "dl3") ) (setText (+ "Downloading...") "progress") (= percentage (+ percentage 30)) ) (group (clearInterval interval) (setText (+ "Downloaded") "progress") ) ) ))) (= state 1) ) (group (setText "Download" "progress") (setVal "Download") (removeClass "toggle_on" "dl_circle") (removeClass "toggle_color" "dl_toggle") (removeClass "showdl" "dl1") (removeClass "showdl" "dl2") (removeClass "showdl" "dl3") (removeClass "moveartist" "artisttxt1") (removeClass "movexpl" "explicit") (removeClass "moveartist" "artisttxt2") (removeClass "moveartist" "artisttxt3") (clearTimeout interval) (= state 0) ) ) [/script] [script class=play on=init] addClass showpl play [/script] [script class=playbox] set pl 0 [/script] [script class=playbox on=click] if (eq ${pl} 0) (removeClass showpl play) (addClass showpl play) if (eq ${pl} 0) (addClass musicanim musictime) if (eq ${pl} 1) (addClass pauseanim musictime) (removeClass pauseanim musictime) if (eq ${pl} 0) (addClass showpl pause) (removeClass showpl pause) if (eq ${pl} 1) (set pl 0) (set pl 1) [/script] [div class=containerbig] [div class=main] [div class=textbox] [div class=text]!! rly unfinished spotify replica !! – click the download toggle! click the play button! and the lil circles above the shuffle.. they do stuff..

pls ignore the glitchy radio symbol. ill fix it another time.. it was hell to figure out but i have something to replace it - which ill do when it isn't 2:30am.

this really isn't finished, at all. i have a lot more planned for it. and i was originally going to use it for a krp as a character sheet but i have other ideas that will likely be less complicated to actually finish. that and i have too much schoolwork right now, so i cant devote all the time this code deserves.. i will come back to it. but for now, the first page (i guess its a page) is the only one that is near complete. there is a second page that appears when you click the up arrow (it shows the same as it does on the spotify app) but it was glitching out too much so i've taken it off for the time being.
[/div] [/div] [/div] [div class=container] [div class=back][/div] [div class=ellipsis_top]...[/div] [div class=header_container] [div class=container1] [div class=containerbg][/div] [div class=playlist_img]
ezgif-1-3d021e54a7.png
[/div] [div class=playlist_title]untitled.[/div] [div class=followers]4,378 FOLLOWERS[/div] [/div] [div class=container2] [div class=playlist_by]playlist by[/div] [div class=user_img]
6jv9mDv.png
[/div] [div class=user_title] [div class=user_txt]eunhalo[/div] [/div] [div class=date] 12 Apr 2018[/div] [div class=length] 47min[/div] [/div] [div class=circle1][/div] [div class=circle2][/div] [/div] [div class=main_container] [div class=content1] [div class=shuffle_all] [div class=shuffle_txt]shuffle play[/div] [/div] [div class=dl_txt]Download[/div][div class=progress][/div] [div class=dl_toggle][/div][div class=dl_circle][/div] [div class=songtxt1]Girl, Interrupted[/div] [div class=dl1][/div] [div class=artisttxt1]2xxx!, Miso • Life[/div] [div class=elip1]...[/div] [div class=songtxt2]Will He[/div] [div class=dl2][/div] [div class=explicit]
explicit
[/div][div class=artisttxt2]Joji• In Tongues (Deluxe)[/div] [div class=elip2]...[/div] [div class=songtxt3]Downtown Baby[/div] [div class=dl3][/div] [div class=artisttxt3]Bloo • Downtown Baby[/div] [div class=elip3]...[/div] [div class=playbar] [div class=bartxt]Girl, Interrupted 2xxx![/div] [div class=comp][/div][div class=devices]Devices Available[/div] [div class=playbox] [div class=playcircle][/div] [div class=play][/div] [div class=pause][/div] [/div] [/div] [div class=musictime][/div] [div class=up][/div] [/div] [/div] [div class=bgup] [div class=albumblur1][/div] [div class=down][/div][div class=queue][/div] [div class=pltitle]playing from playlist[/div] [div class=title]untitled.[/div] [div class=album1]
ezgif-1-f3e9c619ed.png
[div class=albumcontainer] [div class=textbox1]hello[/div] [/div] [/div] [div class=songtitle1]Girl, Interrupted[/div] [div class=artist1]2xxx![/div] [div class=add1]+[/div][div class=elip4]...[/div] [div class=timebar][/div][div class=timemark][/div][div class=timepoint][/div] [div class=timestamp1]1:14[/div][div class=timestamp2]-1:47[/div] [div class=play2]
OL2puCC.png
[/div] [div class=backward2][/div][div class=forward2][/div] [div class=shuffleicn]
42ynJsr.png
[/div][div class=repeaticn]↻[/div] [/div] [div class=bottom_bar] [div class=library_icn][/div] [div class=library_txt]Library[/div] [div class=radio_icn2][/div][div class=radio_icn][/div] [div class=radio_txt]Radio[/div] [div class=search_icn][/div] [div class=search_txt]Search[/div] [div class=browse_icn][/div][div class=browse_inner][/div] [div class=browse_txt]Browse[/div] [div class=home_icn][/div] [div class=home_txt]Home[/div] [/div] [/div] [/div]
this is so cool like wtf ur a god
 
vliamint vliamint I need help with your Park Eunjae template. I tried replacing the gifs with other gifs but they seem too big. You can only see one part of the gif when you put it in, Do you think you could figure what I'm doing wrong?
 

Users who are viewing this thread

Back
Top