Resource ❝𝐢𝐧 𝐟𝐚𝐭𝐞'𝐬 𝐡𝐚𝐧𝐝𝐬.❞ freebies! ˎˊ˗

[blackout]

[class=v] cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important [/class] [class=backback] position: relative; margin: auto; width: 433px; height: 607px; background-color: #DCDCDC; overflow: hidden; [/class] [class=heckingback] position: absolute; left: 20px; top: 20px; width: 393px; height: 157px; background-color: rgba(238,238,238,1); overflow: hidden; border-radius: 7px; [/class] [class=alilone] position: absolute; left: 20px; top: 240px; width: 393px; height: 70px; background-color: rgba(238,238,238,1); overflow: hidden; border-radius: 7px; [/class] [class=bruhpfp] position: absolute; overflow: visible; width: 47px; height: 47px; left: 15px; top: 10px; border: 2px solid #8F8FB5; border-radius: 50px; background: url(https://i.pinimg.com/564x/d5/b8/f5/d5b8f588f56528bc0866d80dc05720ab.jpg); background-size: 160%; background-repeat: no-repeat; background-position: top left; [/class] [class=uglytitle] position: absolute; left: 70px; top: 26px; overflow: visible; width: 131px; height: 12px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: bold; text-size: 11px; color: #707070; display: inline-block; [/class] [class=thisline] overflow: visible; position: absolute; width: 214px; height: 1px; left: 155.5px; top: 37.5px; background: #707070; [/class] [class=textboxyuck] position: absolute; overflow: visible; width: 300px; height: 77px; left: 70px; top: 58px; background: #F9F9F9; border-radius: 5px; font-size: 9px; text-transform: lowercase; font-family: Roboto; color: #707070; text-align: justify; padding: 5px; [/class] [class=frickfronck] position: relative; overflow: visible; width: 240px; height: 17px; left: 70px; top: 52px; display: flex; flex-direction: row; justify-content: space-evenly; top: 30px; left: 140px; [/class] [class=za] background: #8F8FB5; border-radius: 10px; width: max-content; padding-right: 4px; padding-left: 4px; color: white; font-weight: bold; font-size: 9px; text-transform: lowercase; font-family: Calibri; [/class] [div class=v] [div class=backback] [div class=heckingback] [div class=bruhpfp] [/div] [div class=uglytitle] fated says: [/div] [div class=thisline] [/div] [div class=textboxyuck]

hello everyone! i'm fated, a returning veteran member of the site, and i've decided to share my codes with you. just a little warning that they might be janky as heck, broken (teehee), or just ugly, but i figured that i'd give it a go and put them on display anyways. there are so many incredible coders on this site (like way more than i can name) that have inspired me, but i'd like to thank sox Nano and deer , you all are absolutely amazing but also SORRY FOR THE PING YOU GODS. anyways, all my codes are free to use, just do not remove the credit. if you need help or advice, i'm always here!

[/div][/div] [div class=alilone] [div class=bruhpfp] [/div] [div class=uglytitle style="font-size: 12px;top: 27px;"] forbidden eden: [/div][div class=frickfronck] [div class=za]cs[/div][div class=za]simple[/div][div class=za]4 tabs[/div][div class=za]stable[/div] [/div] [/div]

[div class=alilone style="top:330px;"] [div class=bruhpfp] [/div] [div class=uglytitle] wanderlust: [/div][div class=frickfronck] [div class=za]cs[/div][div class=za]wack[/div][div class=za]4 tabs[/div][div class=za]animations[/div] [/div] [/div]

[div class=alilone style="top:510px;left: 20px;"] [div class=bruhpfp] [/div] [div class=uglytitle style="font-size: 14px;"] dreamland b: [/div][div class=frickfronck] [div class=za]cs[/div][div class=za]slide[/div][div class=za]4 tabs[/div][div class=za]simple[/div] [/div] [/div]

[div class=alilone style="top:420px;left: 20px;"] [div class=bruhpfp] [/div] [div class=uglytitle style="font-size: 14px;"] dreamland a: [/div][div class=frickfronck] [div class=za]interest[/div][div class=za]slide[/div][div class=za]4 tabs[/div][div class=za]simple[/div] [/div] [/div]

[/div] [/div]

 

[blackout]

[class=v] cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important [/class] [class=heckingback] position: relative; margin: auto; width: 393px; height: 177px; background-color: rgba(238,238,238,1); overflow: hidden; border-radius: 7px; [/class] [class=bruhpfp] position: absolute; overflow: visible; width: 47px; height: 47px; left: 15px; top: 10px; border: 2px solid #8F8FB5; border-radius: 50px; background: url(https://i.pinimg.com/564x/d5/b8/f5/d5b8f588f56528bc0866d80dc05720ab.jpg); background-size: 160%; background-repeat: no-repeat; background-position: top left; [/class] [class=uglytitle] position: absolute; left: 70px; top: 26px; overflow: visible; width: 131px; height: 12px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: bold; text-size: 11px; color: #707070; [/class] [class=thisline] overflow: visible; position: absolute; width: 214px; height: 1px; left: 155.5px; top: 37.5px; background: #707070; [/class] [class=textboxyuck] position: absolute; overflow: visible; width: 300px; height: 77px; left: 70px; top: 78px; background: #F9F9F9; border-radius: 5px; font-size: 9px; text-transform: lowercase; font-family: Roboto; color: #707070; text-align: justify; padding: 5px; [/class] [class=frickfronck] position: absolute; overflow: visible; width: 300px; height: 17px; left: 70px; top: 52px; display: flex; flex-direction: row; justify-content: space-evenly; [/class] [class=za] background: #8F8FB5; border-radius: 10px; width: max-content; padding-right: 4px; padding-left: 4px; color: white; font-weight: bold; font-size: 9px; text-transform: lowercase; font-family: Calibri; [/class] [div class=v] [div class=heckingback] [div class=bruhpfp] [/div] [div class=uglytitle] fated says: [/div] [div class=thisline] [/div] [div class=textboxyuck]

forbidden eden: not so mobile friendly
oh my ! i'm actually pretty proud of this code, especially considering it took me under an hour and is actually... pretty stable?? surprisingly the tabs didn't make me want to rip my hair out. i'm a bit rusty with coding, but i hope it's ok for you all! i decided to keep it pretty simple, especially with the (lack of) animations and hovers except for the lil tab color changes. i'm still learning and definitely have a lot to catch up on, but i just want to share my work with you guys ! this one does have a [nobr] tag, but in the content divs you don't need to use [br][/br] thanks to a little tweak.

[/div] [div class=frickfronck][div class=za]cs[/div] [div class=za]simple[/div] [div class=za]4 tabs[/div] [div class=za]stable??[/div] [/div] [/div] [/div]



[class=variables] --accent: #D1E1D5; cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important [/class] [class=bkg] position: relative; width: 695px; height: 488px; background-color: rgba(232,232,232,1); overflow: hidden; margin: auto; [/class] [class=img] position: absolute; overflow: visible; width: 202px; height: 256px; left: 467px; top: 25px; background: url('https://i.pinimg.com/564x/28/51/fa/2851fae4c8a3ca94bbbe23fb08f04456.jpg'); background-size: 100%; [/class] [class=head] position: absolute; left: 467px; top: 301px; overflow: visible; width: 203px; height: 40px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: bold; font-size: 20px; color: rgba(112,112,112,1); [/class] [class=out] overflow: visible; position: absolute; width: 155px; height: 1px; left: 467.5px; top: 334.5px; background: #707070; [/class] [class=style] position: absolute; left: 467px; top: 349px; overflow: hidden; width: 203px; height: 93px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: normal; font-size: 11px; color: rgba(112,112,112,1); text-transform: lowercase; [/class] [class=post] position: absolute; overflow: visible; width: 436px; height: 447px; left: 15px; top: 25px; background: #F6F6F6; text-transform: lowercase; [/class] [class=bar] position: absolute; overflow: visible; width: 11px; height: 428px; left: 25px; top: 35px; background: var(--accent); border-radius: 7px; [/class] [class=img1] position: absolute; overflow: visible; width: 114px; height: 92px; left: 53px; top: 35px; background: url('https://i.pinimg.com/564x/21/3b/5d/213b5d20cf46e734f0f3dd28d51beaad.jpg'); background-size: 100%; [/class] [class=img2] position: absolute; overflow: visible; width: 114px; height: 92px; left: 189px; top: 35px; background: url('https://i.pinimg.com/564x/21/3b/5d/213b5d20cf46e734f0f3dd28d51beaad.jpg'); background-size: 100%; [/class] [class=img3] position: absolute; overflow: visible; width: 114px; height: 92px; left: 324px; top: 35px; background: url('https://i.pinimg.com/564x/21/3b/5d/213b5d20cf46e734f0f3dd28d51beaad.jpg'); background-size: 100%; [/class] [class=sig] position: absolute; left: 53px; top: 143px; overflow: visible; width: 386px; height: 28px; text-align: center; font-family: Segoe UI; font-style: italic; font-weight: bold; font-size: 21px; color: rgba(112,112,112,1); [/class] [class=tabs] position: absolute; overflow: visible; width: 202px; height: 18px; left: 467px; top: 454px; [/class] [class=tab1] position: absolute; overflow: visible; width: 50px; height: 18px; left: 467px; top: 454px; border-radius: 7px 0px 0px 7px; text-align: center; color: white; background: var(--accent); border: 1px solid #707070; transition: 0.5s; [/class] [class=tab2] position: absolute; overflow: visible; width: 51px; height: 18px; left: 517px; top: 454px; text-align: center; color: white; background: var(--accent); border: 1px solid #707070; transition: 0.5s; [/class] [class=tab3] position: absolute; overflow: visible; width: 50px; height: 18px; left: 568px; top: 454px; text-align: center; color: white; background: var(--accent); border: 1px solid #707070; transition: 0.5s; [/class] [class=tab4] position: absolute; overflow: visible; width: 51px; height: 18px; left: 618px; top: 454px; border-radius: 0px 7px 7px 0px; text-align: center; color: white; background: var(--accent); border: 1px solid #707070; transition: 0.5s; [/class] [class=content] position: absolute; left: 10px; top: 177px; overflow: visible; width: 386px; height: 286px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: normal; font-size: 11px; color: rgba(112,112,112,1); white-space: pre-wrap; text-transform: lowercase; [/class] [class=content2] position: absolute; left: 10px; top: 177px; overflow: visible; width: 386px; height: 286px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: normal; font-size: 11px; color: rgba(112,112,112,1); white-space: pre-wrap; text-transform: lowercase; [/class] [class=content3] position: absolute; left: 10px; top: 177px; overflow: visible; width: 386px; height: 286px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: normal; font-size: 11px; color: rgba(112,112,112,1); white-space: pre-wrap; text-transform: lowercase; [/class] [class=content4] position: absolute; left: 10px; top: 177px; overflow: visible; width: 386px; height: 286px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: normal; font-size: 11px; color: rgba(112,112,112,1); white-space: pre-wrap; text-transform: lowercase; [/class] [class=tags] display: inline-block; border-bottom: 0.15em solid var(--accent); font-size: 11px; color: rgba(112,112,112,1); text-transform: lowercase; [/class] [class=hidden] display: none; [/class] [class name=tab1 state=hover] background: #E7F3EB; [/class] [class name=tab2 state=hover] background: #E7F3EB; [/class] [class name=tab3 state=hover] background: #E7F3EB; [/class] [class name=tab4 state=hover] background: #E7F3EB; [/class] [script class=tab1 on=click] hide content2 hide content3 hide content4 fadeIn 0900 content [/script] [script class=tab2 on=click] hide content hide content3 hide content4 fadeIn 0900 content2 [/script] [script class=tab3 on=click] hide content2 hide content hide content4 fadeIn 0900 content3 [/script] [script class=tab4 on=click] hide content2 hide content3 hide content fadeIn 0900 content4 [/script] [div class=variables] [div class=bkg] [div class=img] [/div] [div class=head] forbidden eden. [/div] [div class=out] [/div] [div class=style] I only see her late at night, When I'm too gone to realize... That everything is going right. Rain hit me with a note so dark, Rain hit me with a note so dark ! I only see her late at night, When it's too dark to realize... [/div] [div class=post] [/div] [div class=bar] [/div] [div class=img1] [/div] [div class=img2] [/div] [div class=img3] [/div] [div class=sig] - love, you [/div] [div class=tabs] [/div] [div class=tab1] [/div] [div class=tab2] [/div] [div class=tab3] [/div] [div class=tab4] [/div] [div class=content]

[div class=tags]question

tell me what you need, yeah [div class=tags]question

i'll be there for you [div class=tags]question[/div] for you, ah [div class=tags]question[/div] i only see her [div class=tags]question[/div] late at night [div class=tags]question[/div] when i'm too gone [div class=tags]question[/div] to realize [div class=tags]question[/div] that everything is going [div class=tags]question[/div] rain hit me with a note [div class=tags]question[/div] so dark [div class=tags]question[/div] rain hit me with a note so dark [/div][/div][/div] [div class="content2 hidden"]

[div class=tags]question

lonely lonely [div class=tags]question

lonely i [div class=tags]question[/div] wanna lead a [div class=tags]question[/div] lonely [div class=tags]question[/div] lonely life [div class=tags]question[/div] lone and [div class=tags]question[/div] on and on [div class=tags]question[/div] i wanna lead a [div class=tags]question[/div] lonely [div class=tags]question[/div] lonely [div class=tags]question[/div] life [/div][/div] [/div] [div class="content3 hidden"]

[div class=tags]question

i only see her in my dreams [div class=tags]question

when i'm too asleep [div class=tags]question[/div] to realize [div class=tags]question[/div] that life is going perfectly rain hit me with a note so dark rain hit me with a note so dark [/div][/div] [/div] [div class="content4 hidden"]

[div class=tags]question

lonely lonely lonely lonely i wanna lead a lonely lonely life lonely lonely lonely lonely i wanna lead a lonely lonely life lonely lonely lonely lonely i wanna lead a lonely lonely life i wanna be me i wanna be happy i wanna be free yeah i only see her late at night when it's too dark to realize that all the stars are shining bright rain hit me with a note so dark rain hit me with a note so dark

[/div] [/div] [/div] [class=cred] width:100%;text-align:center;font-size:8px;[/class][div class=cred]fated.[/div] [/div]

 

[blackout]

[class=v] cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important [/class] [class=heckingback] position: relative; margin: auto; width: 393px; height: 177px; background-color: rgba(238,238,238,1); overflow: hidden; border-radius: 7px; [/class] [class=bruhpfp] position: absolute; overflow: visible; width: 47px; height: 47px; left: 15px; top: 10px; border: 2px solid #8F8FB5; border-radius: 50px; background: url(https://i.pinimg.com/564x/d5/b8/f5/d5b8f588f56528bc0866d80dc05720ab.jpg); background-size: 160%; background-repeat: no-repeat; background-position: top left; [/class] [class=uglytitle] position: absolute; left: 70px; top: 26px; overflow: visible; width: 131px; height: 12px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: bold; text-size: 11px; color: #707070; [/class] [class=thisline] overflow: visible; position: absolute; width: 214px; height: 1px; left: 155.5px; top: 37.5px; background: #707070; [/class] [class=textboxyuck] position: absolute; overflow: visible; width: 300px; height: 77px; left: 70px; top: 78px; background: #F9F9F9; border-radius: 5px; font-size: 9px; text-transform: lowercase; font-family: Roboto; color: #707070; text-align: justify; padding: 5px; [/class] [class=frickfronck] position: absolute; overflow: visible; width: 300px; height: 17px; left: 70px; top: 52px; display: flex; flex-direction: row; justify-content: space-evenly; [/class] [class=za] background: #8F8FB5; border-radius: 10px; width: max-content; padding-right: 4px; padding-left: 4px; color: white; font-weight: bold; font-size: 9px; text-transform: lowercase; font-family: Calibri; [/class] [div class=v] [div class=heckingback] [div class=bruhpfp] [/div] [div class=uglytitle] fated says: [/div] [div class=thisline] [/div] [div class=textboxyuck]

wanderlust: not so mobile friendly
eeeeeek i'm so so happy with this one! i made it for sox's STUNNING rp (go join please) because my first code was kinda ugly haha. not quite sure how i ended up with this honestly?? but i mean it's fine so... i had a lot of big plans that didn't really turn out, but i'm happy with what a have! i'm really feeling the blue palette, ngl. originally i was going to do a cover that slid up but i had absolutely no clue how to work it, so i settled for what i did know and did a little slide! i've been practicing a lottt with animations, and i hope these are polished (the timing bits took me forever!). still, i'm like really glad i ended up with this, baha. but like, at this point i can CONFIDENTLY say that animation-delay and overflow: hidden; are just my favorite properties ever. just... amazing. finally, thank you so much for the AMAZING support on forbidden eden!! i love you all so much, ahhhh ♡

[/div] [div class=frickfronck][div class=za]cs[/div] [div class=za]wack[/div] [div class=za]4 tabs[/div] [div class=za]animations[/div] [/div] [/div] [/div]


[class=bkg] height: 405px; width: 600px; position: relative; margin: auto; color: transparent; cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important; overflow: hidden; [/class] [class=original] position: relative; overflow: hidden; height: 400px; width: 120px; left: 240px; border-radius: 40px; background-image: linear-gradient(rgba(106, 150, 189, 0), rgba(106, 150, 189, 0.8), rgba(106, 150, 189, 1)), url('https://i.pinimg.com/564x/5d/42/b6/5d42b6c4681797722377d19275aca55f.jpg'); background-size: cover; background-position: 65% 40%; [/class] [class=line1] position: absolute; height: 175px; width: 3px; background: white; left: 7px; border-radius: 0px 0px 7px 7px; [/class] [class=line2] position: absolute; height: 135px; width: 3px; background: white; left: 17px; border-radius: 0px 0px 7px 7px; [/class] [class=line3] position: absolute; height: 105px; width: 3px; background: white; left: 27px; border-radius: 0px 0px 7px 7px; [/class] [class=line4] position: absolute; height: 175px; width: 3px; background: white; top: 225px; left: 110px; border-radius: 7px 7px 0px 0px; [/class] [class=line5] position: absolute; height: 145px; width: 3.5px; background: white; top: 255px; left: 100px; border-radius: 7px 7px 0px 0px; [/class] [class=line6] position: absolute; height: 115px; width: 3px; background: white; top: 285px; left: 90px; border-radius: 7px 7px 0px 0px; [/class] [class=circle] position: relative; height: 50px; width: 50px; border-radius: 50px; background: #EAEAEA; left: 35px; top: 175px; [/class] [class=circle2] position: relative; height: 50px; width: 50px; border-radius: 50px; background: #EAEAEA; left: 35px; top: 175px; animation: {post_id}glide 2s; animation-fill-mode: forwards; [/class] [class=circletxt] position: relative; height: 50px; width: 50px; top: -1px; border-radius: 50px; color: black; animation: {post_id}pulse 2s linear infinite; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=original2] position: relative; height: 400px; width: 120px; left: 240px; border-radius: 40px; background: #F5D3C6; animation: {post_id}slide 2s ease-in-out; animation-fill-mode: forwards; background-image: linear-gradient(rgba(106, 150, 189, 0), rgba(106, 150, 189, 0.8), rgba(106, 150, 189, 1)), url('https://i.pinimg.com/564x/5d/42/b6/5d42b6c4681797722377d19275aca55f.jpg'); background-size: cover; background-position: 65% 40%; [/class] [class=container] position: absolute; top: 0px; left: 150px; height: 400px; width: 350px; [/class] [class=outline] position: relative; height: 400px; width: 350px; top: -440px; background: transparent; border: 2px solid #6A96BD; animation: {post_id}drop 3s ease-in-out; animation-fill-mode: forwards; animation-delay: 1.5s; overflow: visible; [/class] [class=real] position: absolute; height: 390px; width: 340px; left: 5px; top: 5px; background: #EFEFEF; font-size: 12px; display: inline-block; color: black; font-family: Calibri; [/class] [class=real2] position: absolute; height: 390px; width: 340px; left: 5px; top: 5px; background: #EFEFEF; font-size: 12px; display: inline-block; color: black; font-family: Calibri; [/class] [class=real3] position: absolute; height: 390px; width: 340px; left: 5px; top: 5px; background: #EFEFEF; font-size: 12px; display: inline-block; color: black; font-family: Calibri; [/class] [class=real4] position: absolute; height: 390px; width: 340px; left: 5px; top: 5px; background: #EFEFEF; font-size: 12px; display: inline-block; color: black; font-family: Calibri; [/class] [class=subtab] position: relative; height: 50px; width: 60px; border-radius: 0px 12px 12px 0px; left: 240px; top: 5px; background: #EFEFEF; animation: {post_id}reveal 3s ease-in-out; animation-fill-mode: forwards; animation-delay: 3.5s; opacity: 0; color: #6A96BD; font-size: 18px; [/class] [class=tab1] position: absolute; height: 15px; width: 15px; border-radius: 50px; left: 360px; top: 5px; background: #EDEDED; border: 1.5px solid #6A96BD; animation: {post_id}tab1 1.5s ease-in-out; animation-fill-mode: forwards; animation-delay: 5.5s; font-size: 18px; opacity: 0; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=tab2] position: absolute; height: 15px; width: 15px; border-radius: 50px; left: 360px; top: 5px; background: #EDEDED; border: 1.5px solid #6A96BD; animation: {post_id}tab2 1.5s ease-in-out; animation-fill-mode: forwards; animation-delay: 6s; font-size: 18px; opacity: 0; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=tab3] position: absolute; height: 15px; width: 15px; border-radius: 50px; left: 360px; top: 5px; background: #EDEDED; border: 1.5px solid #6A96BD; animation: {post_id}tab3 1.5s ease-in-out; animation-fill-mode: forwards; animation-delay: 6.5s; font-size: 18px; opacity: 0; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=tab4] position: absolute; height: 15px; width: 15px; border-radius: 50px; left: 360px; top: 5px; background: #EDEDED; border: 1.5px solid #6A96BD; animation: {post_id}tab4 1.5s ease-in-out; animation-fill-mode: forwards; animation-delay: 7s; font-size: 18px; opacity: 0; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=banner] position: absolute; height: 100px; width: 200px; left: 60px; top: 15px; background: url('https://img.pngio.com/16-blue-watercolor-brush-stroke-banner-png-transparent-onlygfxcom-mint-blue-png-1027_339.png'); background-size: 100%; background-repeat: no-repeat; color: white; font-size: 24px; padding: 7px; padding-left: 27px; [/class] [class=title] position: absolute; height: 150px; width: 180px; left: -26px; top: -55px; background: url('https://i.imgur.com/y5DfIO7.png'); background-size: 140%; background-repeat: no-repeat; [/class] [class=header] width: max-content; height: 15px; font-size: 13px; color: #6A96BD; font-weight: bold; font-family: DM Serif Display; position: relative; left: 20px; margin-bottom: 10px; display: inline; [/class] [class=hidden] display: none; [/class] [animation=button] [keyframe=0] transform: scale(0.9); [/keyframe] [keyframe=50] transform: scale(1.2); box-shadow: 0px 0px 0px 25px rgba(255,255,255, 0); [/keyframe] [keyframe=100] transform: scale(0.9); box-shadow: 0px 0px 0px 0px rgba(255,255,255, 0); [/keyframe] [/animation] [animation=pulse] [keyframe=0] transform: scale(1); [/keyframe] [keyframe=20] transform: scale(1.2); [/keyframe] [keyframe=40] transform: scale(1); [/keyframe] [keyframe=60] transform: scale(1.2); [/keyframe] [keyframe=80] transform: scale(1); [/keyframe] [keyframe=90] transform: scale(1.2); [/keyframe] [keyframe=100] transform: scale(1); [/keyframe] [/animation] [animation=slide] [keyframe=0] left: 240px; [/keyframe] [keyframe=100] left: 0px; [/keyframe] [/animation] [animation=reveal] [keyframe=0] left: 240px; [/keyframe] [keyframe=100] left: 335px; opacity: 1; [/keyframe] [/animation] [animation=tab1] [keyframe=0] top: 5px; opacity: 0; [/keyframe] [keyframe=100] top: 65px; opacity: 1; [/keyframe] [/animation] [animation=tab2] [keyframe=0] opacity: 0; [/keyframe] [keyframe=100] top: 95px; opacity: 1; [/keyframe] [/animation] [animation=tab3] [keyframe=0] opacity: 0; [/keyframe] [keyframe=100] top: 125px; opacity: 1; [/keyframe] [/animation] [animation=tab4] [keyframe=0] opacity: 0; [/keyframe] [keyframe=100] top: 155px; opacity: 1; [/keyframe] [/animation] [animation=grow] [keyframe=0] top: 175px; opacity: 0; [/keyframe] [keyframe=100] top: 190px; transform: scaleY(28); opacity: 1; [/keyframe] [/animation] [animation=glide] [keyframe=0] transform: rotate(0deg); left: 35px; [/keyframe] [keyframe=100] transform: rotate(-90deg); left: 56px; [/keyframe] [/animation] [animation=drop] [keyframe=0] top: -440px; [/keyframe] [keyframe=100] top: 0px; [/keyframe] [/animation] [animation=fade] [keyframe=0] opacity: 0; [/keyframe] [keyframe=100] opacity: 1; [/keyframe] [/animation] [script class=circletxt on=click] hide original show original2 fadeIn 0300 container fadeIn 0400 linecont [/script] [div class=bkg] [div class=original] [div class=line1][/div][div class=line2][/div][div class=line3][/div][div class=line4][/div][div class=line5][/div][div class=line6][/div] [div class=circle] [div class=circletxt]

[/div] [/div] [/div] [div class="original2 hidden"] [div class=line1][/div][div class=line2][/div][div class=line3][/div][div class=line4][/div][div class=line5][/div][div class=line6][/div] [div class=circle2] [div class=circletxt]

[/div] [/div] [/div] [div class="container hidden"] [div class=outline] [div class=tab1][/div] [div class=tab2][/div] [div class=tab3][/div] [div class=tab4][/div] [class=cont] width: 100%; [/class] [script class=tab1 on=click] hide real2 hide real3 hide real4 fadeIn 0700 real [/script] [script class=tab2 on=click] hide real hide real3 hide real4 fadeIn 0700 real2 [/script] [script class=tab3 on=click] hide real2 hide real hide real4 fadeIn 0700 real3 [/script] [script class=tab4 on=click] hide real2 hide real3 hide real fadeIn 0700 real4 [/script] [class=taggies] font-size: 14px; font: Merriweather; font-weight: bold; color: #6A96BD; display: inline-block; margin-bottom: 4px; position: relative; [/class] [div class=subtab]

[/div] [div class=real][div class=banner][div class=title][/div][/div]

[div class=taggies]here.

here
[div class=taggies]here.[/div] here
[div class=taggies]here.[/div] here
[div class=taggies]here.[/div] here
[/div][/div] [div class="real2 hidden"][div class=banner][div class=title][/div][/div]

[div class=taggies]ahere.

here
[div class=taggies]here.[/div] here
[div class=taggies]here.[/div] here
[div class=taggies]here.[/div] here
[/div][/div] [class=extra] width: 310px; left: -10px; height: 120px; border-radius: 17px; background: white; position: relative; overflow: hidden; font-size: 10px; text-tranform: lowercase; text-align: justify; [/class] [div class="real3 hidden"][div class=banner][div class=title][/div][/div]

[div class=taggies]aahere.

here
[div class=taggies]here.[/div] here
[div class=taggies]here.[/div] here
[div class=taggies]here.[/div] here

[div class=extra]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/div][/div] [/div] [div class="real4 hidden"][div class=banner][div class=title][/div][/div]

[div class=taggies]cahere.

here
[div class=taggies]here.[/div] here
[div class=taggies]here.[/div] here
[div class=taggies]here.[/div] here

[div class=extra]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/div] [/div][/div] [/div] [/div] [/div] [class=cred] width:100%;text-align:center;font-size:8px;[/class][div class=cred]fated.[/div]

 

[Ayama]

Wow these are really nice! ^w^

​

 

[blackout]

[class=v] cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important [/class] [class=heckingback] position: relative; margin: auto; width: 393px; height: 177px; background-color: rgba(238,238,238,1); overflow: hidden; border-radius: 7px; [/class] [class=bruhpfp] position: absolute; overflow: visible; width: 47px; height: 47px; left: 15px; top: 10px; border: 2px solid #8F8FB5; border-radius: 50px; background: url(https://i.pinimg.com/564x/d5/b8/f5/d5b8f588f56528bc0866d80dc05720ab.jpg); background-size: 160%; background-repeat: no-repeat; background-position: top left; [/class] [class=uglytitle] position: absolute; left: 70px; top: 26px; overflow: visible; width: 131px; height: 12px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: bold; text-size: 11px; color: #707070; [/class] [class=thisline] overflow: visible; position: absolute; width: 214px; height: 1px; left: 155.5px; top: 37.5px; background: #707070; [/class] [class=textboxyuck] position: absolute; overflow: visible; width: 300px; height: 77px; left: 70px; top: 78px; background: #F9F9F9; border-radius: 5px; font-size: 9px; text-transform: lowercase; font-family: Roboto; color: #707070; text-align: justify; padding: 5px; [/class] [class=frickfronck] position: absolute; overflow: visible; width: 300px; height: 17px; left: 70px; top: 52px; display: flex; flex-direction: row; justify-content: space-evenly; [/class] [class=za] background: #8F8FB5; border-radius: 10px; width: max-content; padding-right: 4px; padding-left: 4px; color: white; font-weight: bold; font-size: 9px; text-transform: lowercase; font-family: CALIBRI; [/class] [div class=v] [div class=heckingback] [div class=bruhpfp] [/div] [div class=uglytitle] fated says: [/div] [div class=thisline] [/div] [div class=textboxyuck]

dreamland a: mobile friendly
ah! my first mobile friendly code? this one is just overall super duper simple, and that's really why i like it so much! also, clouds just get me haha. this fits perfectly on mobile ( at least for me ) which is a bonus, especially because i wasn't even really planning it! this was my first time actually doing a slide animation well, so yay me ( again ). this one is relatively easy and simple, so honestly i'll be proud if you break it. again, i'm always here if you need help!

[/div] [div class=frickfronck][div class=za]cs[/div] [div class=za]slide[/div] [div class=za]4 tabs[/div] [div class=za]simple[/div] [/div] [/div] [/div]



[class=bkg] height: 388px; width: 368px; margin: auto; background: #EDEDED; cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important; [/class] [class=img] height: 308px; width: 308px; position: relative; top: 30px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; overflow: hidden; [/class] [class=box1] height: 308px; position: absolute; background: url('https://i.pinimg.com/originals/a4/a3/85/a4a38594c3e97c0cfa5412232849f491.jpg'); background-size: 250%; background-position: 37% 50%; width: 100px; left: 20px; [/class] [class=box2] height: 307px; position: absolute; background: rgb(255,255,255,0.6); width: 167px; left: 138px; font-family: Calibri; font-size: 1px; border: 0.5em solid black; [/class] [class=box22] height: 307px; position: absolute; background: rgb(255,255,255,0.6); width: 167px; left: 138px; font-family: Calibri; font-size: 1px; border: 0.5em solid black; [/class] [class=box23] height: 307px; position: absolute; background: rgb(255,255,255,0.6); width: 167px; left: 138px; font-family: Calibri; font-size: 1px; border: 0.5em solid black; [/class] [class=box24] height: 307px; position: absolute; background: rgb(255,255,255,0.6); width: 167px; left: 138px; font-family: Calibri; font-size: 1px; border: 0.5em solid black; [/class] [class=trueimg] height: 308px; width: 308px; position: absolute; background: url('https://i.imgur.com/djkeO7s.jpg'); background-size: 100%; background-position: center bottom; animation-fill-mode: forward; [/class] [class=text] font-size: 12px; width: 308px; text-align: right; font-family: Calibri; text-transform: uppercase; position: relative; color: black; top: 35px; [/class] [class=a] font-size: 23px; color: black; font-family: Merriweather; position: relative; top: -300px; left: 334px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=b] font-size: 23px; color: black; font-family: Merriweather; position: relative; top: -270px; left: 330px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=c] font-size: 23px; color: black; font-family: Merriweather; position: relative; top: -240px; left: 326px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=d] font-size: 23px; color: black; font-family: Merriweather; position: relative; top: -210px; left: 328px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=slide] animation: {post_id}slideout 2s; animation-fill-mode: forwards; [/class] [animation=slideout] [keyframe=0] left: 0px; [/keyframe] [keyframe=100] left: -400px; [/keyframe] [/animation] [script class=img on=click] addClass slide trueimg [/script] [script class=a on=click] hide box22 hide box23 hide box24 fadeIn 0400 box2 [/script] [script class=b on=click] hide box2 hide box23 hide box24 fadeIn 0400 box22 [/script] [script class=c on=click] hide box22 hide box2 hide box24 fadeIn 0400 box23 [/script] [script class=d on=click] hide box22 hide box23 hide box2 fadeIn 0400 box24 [/script] [class=taggies] font-size: 10px; font-family: Roboto Condensed; font-weight: bold; color: black; display: inline-block; margin-bottom: 4px; position: relative; letter-spacing: 1px; [/class] [class=hidden] display: none; [/class] [div class=bkg] [div class=img][div class=box1][/div] [div class=box2]

[div class=taggies]HEADER HERE

[div class=taggies]here.

here.
[div class=taggies]here.

here.
[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.
[/div][/div][/div] [/div] [div class="box22 hidden"]

[div class=taggies]HEADER HERE

[div class=taggies]here.

here.
[div class=taggies]here.

here.
[div class=taggies]here.[/div] here.

[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.

[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.
[/div][/div][/div] [/div] [div class="box23 hidden"]

[div class=taggies]HEADER HERE

[div class=taggies]here.

here.

[div class=taggies]here.

here.
[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.

[div class=taggies]here.[/div] here.
[div class=taggies]here.[/div] here.

[div class=taggies]here.[/div] here.
[/div][/div][/div] [/div] [div class="box24 hidden"]

[div class=taggies]HEADER HERE

[div class=taggies]here.

here.

[/div][/div] [/div] [div class=trueimg][/div][/div][div class=text]hazy dreamland escape[/div] [div class=a]I.[/div][div class=b]II.[/div][div class=c]III.[/div][div class=d]IV.[/div] [/div] [class=cred] width:100%;text-align:center;font-size:8px;[/class][div class=cred]fated.[/div]

 

[blackout]

[class=v] cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important [/class] [class=heckingback] position: relative; margin: auto; width: 393px; height: 177px; background-color: rgba(238,238,238,1); overflow: hidden; border-radius: 7px; [/class] [class=bruhpfp] position: absolute; overflow: visible; width: 47px; height: 47px; left: 15px; top: 10px; border: 2px solid #8F8FB5; border-radius: 50px; background: url(https://i.pinimg.com/564x/d5/b8/f5/d5b8f588f56528bc0866d80dc05720ab.jpg); background-size: 160%; background-repeat: no-repeat; background-position: top left; [/class] [class=uglytitle] position: absolute; left: 70px; top: 26px; overflow: visible; width: 131px; height: 12px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: bold; text-size: 11px; color: #707070; [/class] [class=thisline] overflow: visible; position: absolute; width: 214px; height: 1px; left: 155.5px; top: 37.5px; background: #707070; [/class] [class=textboxyuck] position: absolute; overflow: visible; width: 300px; height: 77px; left: 70px; top: 78px; background: #F9F9F9; border-radius: 5px; font-size: 9px; text-transform: lowercase; font-family: Roboto; color: #707070; text-align: justify; padding: 5px; [/class] [class=frickfronck] position: absolute; overflow: visible; width: 300px; height: 17px; left: 70px; top: 52px; display: flex; flex-direction: row; justify-content: space-evenly; [/class] [class=za] background: #8F8FB5; border-radius: 10px; width: max-content; padding-right: 4px; padding-left: 4px; color: white; font-weight: bold; font-size: 9px; text-transform: lowercase; font-family: cALIBRI; [/class] [div class=v] [div class=heckingback] [div class=bruhpfp] [/div] [div class=uglytitle] fated says: [/div] [div class=thisline] [/div] [div class=textboxyuck]

dreamland b: mobile friendly
this is the same as the previous code but with one box for an interest check ! ah! my first mobile friendly code? this one is just overall super duper simple, and that's really why i like it so much! also, clouds just get me haha. this fits perfectly on mobile ( at least for me ) which is a bonus, especially because i wasn't even really planning it! this was my first time actually doing a slide animation well, so yay me ( again ). this one is relatively easy and simple, so honestly i'll be proud if you break it. again, i'm always here if you need help!

[/div] [div class=frickfronck][div class=za]cs[/div] [div class=za]slide[/div] [div class=za]4 tabs[/div] [div class=za]simple[/div] [/div] [/div] [/div]



[class=bkg] height: 388px; width: 368px; margin: auto; background: #EDEDED; cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important; [/class] [class=img] height: 308px; width: 308px; position: relative; top: 30px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; overflow: hidden; [/class] [class=box2] height: 307px; position: absolute; background: rgb(255,255,255,0.6); width: 267px; left: 20px; font-family: Calibri; font-size: 1px; border: 0.5em solid black; [/class] [class=box22] height: 307px; position: absolute; background: rgb(255,255,255,0.6); width: 267px; left: 20px; font-family: Calibri; font-size: 1px; border: 0.5em solid black; [/class] [class=box23] height: 307px; position: absolute; background: rgb(255,255,255,0.6); width: 267px; left: 20px; font-family: Calibri; font-size: 1px; border: 0.5em solid black; [/class] [class=box24] height: 307px; position: absolute; background: rgb(255,255,255,0.6); width: 267px; left: 20px; font-family: Calibri; font-size: 1px; border: 0.5em solid black; [/class] [class=trueimg] height: 308px; width: 308px; position: absolute; background: url('https://i.imgur.com/djkeO7s.jpg'); background-size: 100%; background-position: center bottom; animation-fill-mode: forward; [/class] [class=text] font-size: 12px; width: 308px; text-align: right; font-family: Calibri; text-transform: uppercase; position: relative; color: black; top: 35px; [/class] [class=a] font-size: 23px; color: black; font-family: Merriweather; position: relative; top: -300px; left: 334px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=b] font-size: 23px; color: black; font-family: Merriweather; position: relative; top: -270px; left: 330px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=c] font-size: 23px; color: black; font-family: Merriweather; position: relative; top: -240px; left: 326px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=d] font-size: 23px; color: black; font-family: Merriweather; position: relative; top: -210px; left: 328px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; [/class] [class=slide] animation: {post_id}slideout 2s; animation-fill-mode: forwards; [/class] [animation=slideout] [keyframe=0] left: 0px; [/keyframe] [keyframe=100] left: -400px; [/keyframe] [/animation] [script class=img on=click] addClass slide trueimg [/script] [script class=a on=click] hide box22 hide box23 hide box24 fadeIn 0400 box2 [/script] [script class=b on=click] hide box2 hide box23 hide box24 fadeIn 0400 box22 [/script] [script class=c on=click] hide box22 hide box2 hide box24 fadeIn 0400 box23 [/script] [script class=d on=click] hide box22 hide box23 hide box2 fadeIn 0400 box24 [/script] [class=taggies] font-size: 10px; font-family: Roboto Condensed; font-weight: bold; color: black; display: inline-block; margin-bottom: 4px; position: relative; letter-spacing: 1px; [/class] [class=hidden] display: none; [/class] [div class=bkg] [div class=img] [div class=box2]

[div class=taggies]HEADER HERE

a. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/div] [/div] [div class="box22 hidden"]

[div class=taggies]HEADER HERE

b. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/div] [/div] [div class="box23 hidden"]

[div class=taggies]HEADER HERE

c. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/div] [/div] [div class="box24 hidden"]

[div class=taggies]HEADER HERE

d. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/div] [/div] [div class=trueimg][/div][/div][div class=text]hazy dreamland escape[/div] [div class=a]I.[/div][div class=b]II.[/div][div class=c]III.[/div][div class=d]IV.[/div] [/div] [class=cred] width:100%;text-align:center;font-size:8px;[/class][div class=cred]fated.[/div]