Resource BBCode Game!

Necessity4Fun · Feb 3, 2018

Okay, I'm back! Here it goes. We've had a more navy palette and then a 'pale colors' palette, so going the opposite route, here's a really bright one!

Rules:

Your code can be anything of your liking, but you must use at least three of the above colors in it!
Everyone seems comfortable with the 72 hours time limit, so I'm going with that one as well;
Colors: #01C5C4 , #B8DE6F , #F1E189 , #F39233 and #FE547B

myfanwy · Feb 3, 2018

prompt no. four
~~aka pastel hell this is why i'm almost legally blind~~

.

[class=tabs] background-color: #FFFFFF; border-radius: 2px; box-shadow: 0px 0px 1px #FFFFFF; box-sizing: border-box; color: black; font-family: Cinzel; font-size: 13px; font-weight: initial; line-height: 1; margin: 20px auto; min-width: 250px; text-align: center; width: 30%; position: relative; top: 0px; [/class] [class=tab] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 2px 0; width: 33%; [/class] [class name=tab state=hover] background-color: transparent; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} i) (show tabsContenti) if (eq ${currentTab} ii) (show tabsContentii) if (eq ${currentTab} iii) (show tabsContentiii) [/script] [script=tab] hide tabsContent show tabsContenti [/script] [div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]

[div class=tab]

[div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"][/div][/div] [div class="tabsContent tabsContenti"]

basics

I can see it in your eyes // All the years that passed us by // Just say //You remember all the times // All the memories we hide // Away // So now you're here with me // She's waiting patiently // But what you say // Tell me I'm not crazy // That you feel the same // Oh, don't you walk away // How can I make you stay? // Tell me you've been waiting // That I'm not too late // I never walked away // How can I make you stay? // Tell me what I gotta do // Show me what I gotta lose // For you // Did I speak too soon? // How can I make you chose? // Your move // So now you're here with me // She's waiting patiently // But what you say // Tell me I'm not crazy // That you feel the same // Oh, don't you walk away // How can I make you stay? // Tell me you've been waiting // That I'm not too late // I never walked away // How can I make you stay?

[/div] [div class="tabsContent tabsContentii"]

history

I can see it in your eyes // All the years that passed us by // Just say //You remember all the times // All the memories we hide // Away // So now you're here with me // She's waiting patiently // But what you say // Tell me I'm not crazy // That you feel the same // Oh, don't you walk away // How can I make you stay? // Tell me you've been waiting // That I'm not too late // I never walked away // How can I make you stay? // Tell me what I gotta do // Show me what I gotta lose // For you // Did I speak too soon? // How can I make you chose? // Your move // So now you're here with me // She's waiting patiently // But what you say // Tell me I'm not crazy // That you feel the same // Oh, don't you walk away // How can I make you stay? // Tell me you've been waiting // That I'm not too late // I never walked away // How can I make you stay?

[/div] [div class="tabsContent tabsContentiii"]

personality

I can see it in your eyes // All the years that passed us by // Just say //You remember all the times // All the memories we hide // Away // So now you're here with me // She's waiting patiently // But what you say // Tell me I'm not crazy // That you feel the same // Oh, don't you walk away // How can I make you stay? // Tell me you've been waiting // That I'm not too late // I never walked away // How can I make you stay? // Tell me what I gotta do // Show me what I gotta lose // For you // Did I speak too soon? // How can I make you chose? // Your move // So now you're here with me // She's waiting patiently // But what you say // Tell me I'm not crazy // That you feel the same // Oh, don't you walk away // How can I make you stay? // Tell me you've been waiting // That I'm not too late // I never walked away // How can I make you stay?

[/div]
[/div][/div]

coded by

myfanwy

fluticasone · Feb 4, 2018

Mobile compatible CS with fancy hovers and stuff. free for use and editing, but no variation of this may be submitted for contests/prompts. Feel free to add more textblocks by copy pasting the code below into the appropriate tab. Don't worry about choosing the right colors; it's scripted to copy the color of the tab. c: To make line breaks, add [br][/br] at the end of the paragraph.

Code:

[div class=textblock][div class=number]##[/div][div class=postbg][div class=subtitle][b]personality[/b][div class=smalltext]lyrics lyrics lyrics[/div][/div]Vivamus nulla velit, vestibulum vel risus ut, lacinia fringilla tellus. Nulla dignissim, turpis non imperdiet hendrerit, ante justo auctor est, sodales ornare sapien nunc nec libero. Proin tellus quam, molestie ac convallis eu, ullamcorper a ipsum. Vestibulum imperdiet placerat sodales. Suspendisse faucibus iaculis elit, eget finibus orci ultrices ut. Curabitur id tortor diam. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed ex tempor, aliquet tortor pulvinar, molestie libero. Donec a lacus sed orci pulvinar scelerisque. Aliquam vel orci elit.[/div][/div]

FULL CODE: https://pastebin.com/Wpynpcb1

[class name=body] width: 100%; display: block; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 20px 0px; background: url('https://i.imgur.com/Vf6E1U1.jpg'); [/class] [class name=navbar] display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; position: relative; width: 100%; bottom: -65px; padding-bottom: 10px; z-index: 1; [/class] [class name=navcolumn] display: inline-block; flex: 1 0 300px; max-width: 600px; [/class] [class name=pinktab] height: 5px; width: 80%; background: #FE547B; font-size: 0px; margin-bottom: 4px; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; cursor: pointer; [/class] [class name=pinktab state=hover] width: 85%; [/class] [class name=orangetab] height: 5px; width: 85%; background: #F39233; font-size: 0px; margin-bottom: 4px; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; cursor: pointer; [/class] [class name=orangetab state=hover] width: 90%; [/class] [class name=yellowtab] height: 5px; width: 95%; background: #F1E189; font-size: 0px; margin-bottom: 4px; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; cursor: pointer; [/class] [class name=yellowtab state=hover] width: 100%; [/class] [class name=greentab] height: 5px; width: 90%; background: #B8DE6F; font-size: 0px; margin-bottom: 4px; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; cursor: pointer; [/class] [class name=greentab state=hover] width: 95%; [/class] [class name=cyantab] height: 5px; width: 83%; background: #01C5C4; font-size: 0px; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; cursor: pointer; [/class] [class name=cyantab state=hover] width: 88%; [/class] [class name=titlecolumn] flex: 1 1 300px; color: #d5d5d5; font-family: 'Montserrat', sanserif; font-weight: bold; font-size: 2.5em; text-transform: uppercase; box-sizing: border-box; padding-left: 46px; [/class] [class name=pinktitlecolumn] color: #FE547B; font-family: 'Montserrat', sanserif; font-weight: bold; font-size: 1em; text-transform: uppercase; box-sizing: border-box; display: none; position: absolute; z-index: 1; [/class] [class name=orangetitlecolumn] color: #F39233; font-family: 'Montserrat', sanserif; font-weight: bold; font-size: 1em; text-transform: uppercase; box-sizing: border-box; display: none; position: absolute; z-index: 1; [/class] [class name=yellowtitlecolumn] color: #F1E189; font-family: 'Montserrat', sanserif; font-weight: bold; font-size: 1em; text-transform: uppercase; box-sizing: border-box; display: none; position: absolute; z-index: 1; [/class] [class name=greentitlecolumn] color: #B8DE6F; font-family: 'Montserrat', sanserif; font-weight: bold; font-size: 1em; text-transform: uppercase; box-sizing: border-box; display: none; position: absolute; z-index: 1; [/class] [class name=cyantitlecolumn] color: #01C5C4; font-family: 'Montserrat', sanserif; font-weight: bold; font-size: 1em; text-transform: uppercase; box-sizing: border-box; display: none; position: absolute; z-index: 1; [/class] [class name=positioning] display: block; height: 100%; width: 100%; position: relative; [/class] [class name=navbox] width: 26px; height: 26px; box-sizing: border-box; background: #FFF; border: 1px solid #d5d5d5; display: inline-block; position: absolute; left: 10px; top: 7px; z-index: 5; cursor: pointer; text-align: center; padding: 5px; color: #d5d5d5; font-size: .8em; display: none; [/class] [class name=flexmain] display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; align-content: stretch; position: relative; left: 0px; z-index: 3; pointer-events: none; margin-bottom: -63px; max-width: 1200px; [/class] [class name=imagenav] flex: 2 0 300px; max-width: 400px; position: relative; order: 1; box-sizing: border-box; padding: 0px 30px 0px 46px; position: relative; top: -63px; [/class] [class name=image] font-size: 0px; box-sizing: border-box; padding: 20px; border: 1px solid #d5d5d5; background: #FFF; pointer-events: none; [/class] [class name=emptyspace] height: 20px; width: 100%; font-size: 0px; display: block; background: #FE547B; [/class] [class name=pinkemptyspace] height: 20px; width: 100%; font-size: 0px; display: block; background: #FE547B; [/class] [class name=orangeemptyspace] height: 20px; width: 100%; font-size: 0px; display: block; background: #F39233; [/class] [class name=yellowemptyspace] height: 20px; width: 100%; font-size: 0px; display: block; background: #F1E189; [/class] [class name=greenemptyspace] height: 20px; width: 100%; font-size: 0px; display: block; background: #B8DE6F; [/class] [class name=cyanemptyspace] height: 20px; width: 100%; font-size: 0px; display: block; background: #01C5C4; [/class] [class name=contentcol] flex: 3 0 300px; order: 2; box-sizing: border-box; padding: 75px 25px 0px 25px; overflow: hidden; height: 60vh; [/class] [class name=scrollbox] display: block; width: 100%; height: calc(100% - 75px); padding-right: 150px; overflow-x: visible; overflow-y: scroll; pointer-events: auto; [/class] [class name=tabcontents] width: 100%; height: 100%; display: none; pointer-events: auto; [/class] [class name=textblock] display: block; box-sizing: border-box; padding-left: 40px; width: 100%; margin-top: -40px; [/class] [class name=postbg] display: block; box-sizing: border-box; padding: 20px 25px; background: #FFF; border: 1px solid #d5d5d5; color: #5b5b5b; font-family: 'Lato', sanserif; text-align: justify; font-size: .85em; [/class] [class name=number] display: block; height: 50px; width: 50px; color: #FFF; background: #FE547B; text-align: center; box-sizing: border-box; padding-top: 5px; font-size: 2em; font-family: 'Montserrat', sanserif; font-weight: bold; position: relative; bottom: -70px; left: -40px; z-index: 5; [/class] [class name=subtitle] display: block; width: 100%; font-size: 2.2em; font-family: 'Montserrat', sanserif; text-align: left; margin-bottom: 13px; border-bottom: 1px solid #d5d5d5; padding-bottom: 5px; color: #FE547B; text-transform: lowercase; [/class] [class name=pinknumber] display: block; height: 50px; width: 50px; color: #FFF; background: #FE547B; text-align: center; box-sizing: border-box; padding-top: 5px; font-size: 2em; font-family: 'Montserrat', sanserif; font-weight: bold; position: relative; bottom: -70px; left: -40px; z-index: 5; [/class] [class name=pinksubtitle] display: block; width: 100%; font-size: 2.2em; font-family: 'Montserrat', sanserif; text-align: left; margin-bottom: 13px; border-bottom: 1px solid #d5d5d5; padding-bottom: 5px; color: #FE547B; text-transform: lowercase; [/class] [class name=orangenumber] display: block; height: 50px; width: 50px; color: #FFF; background: #F39233; text-align: center; box-sizing: border-box; padding-top: 5px; font-size: 2em; font-family: 'Montserrat', sanserif; font-weight: bold; position: relative; bottom: -70px; left: -40px; z-index: 5; [/class] [class name=orangesubtitle] display: block; width: 100%; font-size: 2.2em; font-family: 'Montserrat', sanserif; text-align: left; margin-bottom: 13px; border-bottom: 1px solid #d5d5d5; padding-bottom: 5px; color: #F39233; text-transform: lowercase; [/class] [class name=yellownumber] display: block; height: 50px; width: 50px; color: #FFF; background: #F1E189; text-align: center; box-sizing: border-box; padding-top: 5px; font-size: 2em; font-family: 'Montserrat', sanserif; font-weight: bold; position: relative; bottom: -70px; left: -40px; z-index: 5; [/class] [class name=yellowsubtitle] display: block; width: 100%; font-size: 2.2em; font-family: 'Montserrat', sanserif; text-align: left; margin-bottom: 13px; border-bottom: 1px solid #d5d5d5; padding-bottom: 5px; color: #F1E189; text-transform: lowercase; [/class] [class name=greennumber] display: block; height: 50px; width: 50px; color: #FFF; background: #B8DE6F; text-align: center; box-sizing: border-box; padding-top: 5px; font-size: 2em; font-family: 'Montserrat', sanserif; font-weight: bold; position: relative; bottom: -70px; left: -40px; z-index: 5; [/class] [class name=greensubtitle] display: block; width: 100%; font-size: 2.2em; font-family: 'Montserrat', sanserif; text-align: left; margin-bottom: 13px; border-bottom: 1px solid #d5d5d5; padding-bottom: 5px; color: #B8DE6F; text-transform: lowercase; [/class] [class name=cyannumber] display: block; height: 50px; width: 50px; color: #FFF; background: #01C5C4; text-align: center; box-sizing: border-box; padding-top: 5px; font-size: 2em; font-family: 'Montserrat', sanserif; font-weight: bold; position: relative; bottom: -70px; left: -40px; z-index: 5; [/class] [class name=cyansubtitle] display: block; width: 100%; font-size: 2.2em; font-family: 'Montserrat', sanserif; text-align: left; margin-bottom: 13px; border-bottom: 1px solid #d5d5d5; padding-bottom: 5px; color: #01C5C4; text-transform: lowercase; [/class] [class name=smalltext] font-size: 0.35em; color: #d5d5d5; display: block; margin-top: -5px; text-transform: uppercase; [/class] [class name=empty] font-size: 0px; height: 15px; display: block; [/class] [script class=pinktab on=mouseenter] fadeIn 400 pinktitlecolumn fadeIn 400 navboxpink [/script] [script class=pinktab on=click] hide tabcontents removeClass orangesubtitle subtitle removeClass orangenumber number removeClass orangeemptyspace emptyspace removeClass yellowsubtitle subtitle removeClass yellownumber number removeClass yellowemptyspace emptyspace removeClass greensubtitle subtitle removeClass greennumber number removeClass greenemptyspace emptyspace removeClass cyansubtitle subtitle removeClass cyannumber number removeClass cyanemptyspace emptyspace show tabcontentspink addClass pinksubtitle subtitle addClass pinknumber number addClass pinkemptyspace emptyspace [/script] [script class=pinktab on=mouseleave] fadeOut 400 pinktitlecolumn fadeOut 400 navboxpink [/script] [script class=orangetab on=mouseenter] fadeIn 400 orangetitlecolumn fadeIn 400 navboxorange [/script] [script class=orangetab on=click] hide tabcontents removeClass pinksubtitle subtitle removeClass pinknumber number removeClass pinkemptyspace emptyspace removeClass yellowsubtitle subtitle removeClass yellownumber number removeClass yellowemptyspace emptyspace removeClass greensubtitle subtitle removeClass greennumber number removeClass greenemptyspace emptyspace removeClass cyansubtitle subtitle removeClass cyannumber number removeClass cyanemptyspace emptyspace show tabcontentsorange addClass orangesubtitle subtitle addClass orangenumber number addClass orangeemptyspace emptyspace [/script] [script class=orangetab on=mouseleave] fadeOut 400 orangetitlecolumn fadeOut 400 navboxorange [/script] [script class=yellowtab on=mouseenter] fadeIn 400 yellowtitlecolumn fadeIn 400 navboxyellow [/script] [script class=yellowtab on=click] hide tabcontents removeClass pinksubtitle subtitle removeClass pinknumber number removeClass pinkemptyspace emptyspace removeClass orangesubtitle subtitle removeClass orangenumber number removeClass orangeemptyspace emptyspace removeClass greensubtitle subtitle removeClass greennumber number removeClass greenemptyspace emptyspace removeClass cyansubtitle subtitle removeClass cyannumber number removeClass cyanemptyspace emptyspace show tabcontentsyellow addClass yellowsubtitle subtitle addClass yellownumber number addClass yellowemptyspace emptyspace [/script] [script class=yellowtab on=mouseleave] fadeOut 400 yellowtitlecolumn fadeOut 400 navboxyellow [/script] [script class=greentab on=mouseenter] fadeIn 400 greentitlecolumn fadeIn 400 navboxgreen [/script] [script class=greentab on=click] hide tabcontents removeClass pinksubtitle subtitle removeClass pinknumber number removeClass pinkemptyspace emptyspace removeClass orangesubtitle subtitle removeClass orangenumber number removeClass orangeemptyspace emptyspace removeClass yellowsubtitle subtitle removeClass yellownumber number removeClass yellowemptyspace emptyspace removeClass cyansubtitle subtitle removeClass cyannumber number removeClass cyanemptyspace emptyspace show tabcontentsgreen addClass greensubtitle subtitle addClass greennumber number addClass greenemptyspace emptyspace [/script] [script class=greentab on=mouseleave] fadeOut 400 greentitlecolumn fadeOut 400 navboxgreen [/script] [script class=cyantab on=mouseenter] fadeIn 400 cyantitlecolumn fadeIn 400 navboxcyan [/script] [script class=cyantab on=click] hide tabcontents removeClass pinksubtitle subtitle removeClass pinknumber number removeClass pinkemptyspace emptyspace removeClass orangesubtitle subtitle removeClass orangenumber number removeClass orangeemptyspace emptyspace removeClass yellowsubtitle subtitle removeClass yellownumber number removeClass yellowemptyspace emptyspace removeClass greensubtitle subtitle removeClass greennumber number removeClass greenemptyspace emptyspace show tabcontentscyan addClass cyansubtitle subtitle addClass cyannumber number addClass cyanemptyspace emptyspace [/script] [script class=cyantab on=mouseleave] fadeOut 400 cyantitlecolumn fadeOut 400 navboxcyan [/script] [div class=body] [div class=navbar] [div class=navcolumn] [div class=positioning][div class="navbox navboxpink"][/div][div class="navbox navboxorange"][/div][div class="navbox navboxyellow"][/div][div class="navbox navboxgreen"][/div][div class="navbox navboxcyan"][/div][/div] [div class=pinktab]pinktab[/div] [div class=orangetab]orangetab[/div] [div class=yellowtab]yellowtab[/div] [div class=greentab]greentab[/div] [div class=cyantab]cyantab[/div] [/div] [div class=titlecolumn][div class=positioning][div class=pinktitlecolumn]RUNAROUND[/div][div class=orangetitlecolumn]RUNAROUND[/div][div class=yellowtitlecolumn]RUNAROUND[/div][div class=greentitlecolumn]RUNAROUND[/div][div class=cyantitlecolumn]RUNAROUND[/div][/div]RUNAROUND[/div] [/div] [div class=flexmain] [div class=imagenav] [div class=image]

[/div] [div class=emptyspace]

fluticasone [/div] [/div] [div class=contentcol] [div class=scrollbox] [div class="tabcontents tabcontentspink" style="display: block;"] [div class=textblock] [div class=number]01[/div] [div class=postbg] [div class=subtitle]basic information [div class=smalltext]LYRICS[/div] [/div]

▎ FULL NAME
▎ AGE (##)
▎ GENDER

[/div] [/div] [div class=textblock] [div class=number]02[/div] [div class=postbg] [div class=subtitle]appearance [div class=smalltext]lyrics lyrics[/div] [/div] physical description here, inclusive of things like manners, demeanor, fashion sense, etc. [/div] [/div] [div class=empty]

fluticasone [/div] [/div] [div class="tabcontents tabcontentsorange"] [div class=textblock] [div class=number]03[/div] [div class=postbg] [div class=subtitle]personality [div class=smalltext]lyrics lyrics lyrics[/div] [/div] Vivamus nulla velit, vestibulum vel risus ut, lacinia fringilla tellus. Nulla dignissim, turpis non imperdiet hendrerit, ante justo auctor est, sodales ornare sapien nunc nec libero. Proin tellus quam, molestie ac convallis eu, ullamcorper a ipsum. Vestibulum imperdiet placerat sodales. Suspendisse faucibus iaculis elit, eget finibus orci ultrices ut. Curabitur id tortor diam. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed ex tempor, aliquet tortor pulvinar, molestie libero. Donec a lacus sed orci pulvinar scelerisque. Aliquam vel orci elit.

Nulla facilisi. Sed at pellentesque neque, sit amet dictum felis. Morbi commodo auctor ante eget condimentum. Curabitur ac est vitae nulla hendrerit vulputate. In vitae tempus diam. Nunc a risus ac orci tristique dictum a in risus. Pellentesque sagittis tellus turpis, ac sollicitudin erat dapibus accumsan. Suspendisse non ornare sapien. Vestibulum non vehicula lectus. Cras condimentum euismod massa, ac eleifend eros porta scelerisque. Aliquam cursus euismod augue, non finibus arcu facilisis vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin auctor nulla mi, sit amet maximus lorem ornare eget. Fusce non leo ultricies lorem interdum eleifend vel vel leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam nec aliquam nunc, vel lobortis odio. [/div] [/div] [div class=textblock] [div class=number]04[/div] [div class=postbg] [div class=subtitle]preferences [div class=smalltext]lyrics lyrics lyrics[/div] [/div] qjkehkeh [/div] [/div] [div class=empty]

fluticasone [/div] [/div] [div class="tabcontents tabcontentsyellow"] [div class=textblock] [div class=number]05[/div] [div class=postbg] [div class=subtitle]history [div class=smalltext]lyrics lyrics[/div] [/div] Aliquam erat volutpat. Proin fermentum venenatis lacus, et faucibus enim auctor vel. Suspendisse non nunc eget urna tincidunt volutpat. Cras ac metus quis elit interdum luctus in quis nulla. Quisque neque elit, aliquam quis lacus nec, auctor viverra libero. Phasellus iaculis a enim quis blandit. In consequat mauris sagittis bibendum congue. Quisque et sagittis eros. Integer odio diam, vestibulum et auctor ut, mattis ut felis. Suspendisse ullamcorper faucibus nisl, feugiat dignissim tortor varius id.

Mauris pretium dui in dolor pretium vestibulum. Nulla rhoncus diam quis diam lacinia, in pellentesque elit blandit. Curabitur in tincidunt tellus. Suspendisse vitae lectus vel neque egestas blandit at et magna. Morbi eget ornare nulla. Mauris justo purus, maximus et arcu a, rhoncus mattis lacus. Praesent pellentesque, nibh nec convallis ultrices, nisi sem iaculis risus, et aliquet leo metus sed nibh. Duis sit amet felis quam. Cras faucibus dolor enim, eu dapibus dolor dignissim eget. Nam venenatis rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Proin vel nulla congue, tristique metus pharetra, posuere mi. Proin eget interdum odio, eu finibus est. [/div] [/div] [div class=empty]

fluticasone [/div] [/div] [div class="tabcontents tabcontentsgreen"] [div class=textblock] [div class=number]06[/div] [div class=postbg] [div class=subtitle]miscellaneous [div class=smalltext]lyrics lyrics[/div] [/div] qeqee [/div] [/div] [/div] [div class="tabcontents tabcontentscyan"] [div class=textblock] [div class=number]01[/div] [div class=postbg] [div class=subtitle]name here [div class=smalltext]THE IDIOT THAT KEEPS ON GIVING[/div] [/div] insert relationship description here [/div] [/div] [div class=textblock] [div class=number]02[/div] [div class=postbg] [div class=subtitle]name here [div class=smalltext]THE ASSHAT THAT LIKES CATS[/div] [/div] insert relationship description here [/div] [/div] [div class=textblock] [div class=number]03[/div] [div class=postbg] [div class=subtitle]name here [div class=smalltext]THE PRICK THAT NEEDS A REALITY CHECK[/div] [/div] insert relationship description here [/div] [/div] [div class=empty]

fluticasone [/div] [/div] [/div] [/div] [/div] [/div]

apolla · Feb 5, 2018

About This Code I found a wallpaper I love (the colorful lips) and used three of the colors from the palette given! Tbh the only cool thing about this code is the fact that the pics are hovers, lol. Wanted to share anyway!

Character Name

[class=xyz]
padding: 7px;
Height: 200px;
Width: 150px;
transition-duration: 0.5s;
z-index:-1;
color:transparent;[/class][class name=xyz state=hover]
background-color: whitesmoke;
opacity:0.6;
color:gray;
width:150px;
height:200px;
[/class][div class=xyz]

basic info?

here’s to the kids. the kids who would rather spend their night with a bottle of coke and Patrick or Sonny playing on their headphones than go to some vomit-stained high school party. here’s to the kids whose 11:11 wish was wasted on one person who will never be there for them. here’s to the kids whose idea of a good night is sitting on the hood of a car, watching the stars. here’s to the kids who were never too good at life, but still were wicked cool. here’s to the kids who listened to Fall Out Boy and Hawthorne Heights before they were on MTV and blame MTV for ruining their life. here’s to the kids who care more about the music than the haircuts. here’s to the kids who have crushes on a stupid lush. here’s to the kids who hum “a little less 16 candles, a little more touch me” when they’re stuck home, dateless, on a Saturday night. here’s to the kids who have ever had a broken heart from someone who didn’t even know they existed. here’s to the kids who have read The Perks of Being a Wallflower and didn’t feel so alone after doing so. here’s to the kids who spend their days in photobooths with their best friends. here’s to the kids who are straight up smartasses and just don’t care. here’s to the kids who speak their mind. here’s to the kids who consider screamo their lullaby for going to sleep. here’s to the kids who second guess themselves on everything they do. here’s to the kids who will never have 100 percent confidence in anything they do, and to the kids that are okay with that. here’s to the kids. this one’s not for the kids who always get what they want, but for the ones who never had it at all. it’s not for the ones who never get caught, but for the ones who always try and fail. this one’s for the kids who didn’t make it, we were the kids who never made it. the overcast girls and the underdog boys. not for the kids who had all their joys. this one’s for the kids who never faked it. we’re the kids who didn’t make it. they say “breaking hearts is what we do best,” and “we’ll make your heart be ripped out of your chest.” the only heart that i broke was mine, when i got my hopes up too high. we were the kids who didn’t make it. we are the kids who never made it. — Pete Wentz

[class=xyz]
padding: 7px;
Height: 200px;
Width: 150px;
transition-duration: 0.5s;
z-index:-1;
color:transparent;[/class][class name=xyz state=hover]
background-color: whitesmoke;
opacity:0.6;
color:gray;
width:150px;
height:200px;
[/class][div class=xyz]

basic info?

[/div]

here’s to the kids. the kids who would rather spend their night with a bottle of coke and Patrick or Sonny playing on their headphones than go to some vomit-stained high school party. here’s to the kids whose 11:11 wish was wasted on one person who will never be there for them. here’s to the kids whose idea of a good night is sitting on the hood of a car, watching the stars. here’s to the kids who were never too good at life, but still were wicked cool. here’s to the kids who listened to Fall Out Boy and Hawthorne Heights before they were on MTV and blame MTV for ruining their life. here’s to the kids who care more about the music than the haircuts. here’s to the kids who have crushes on a stupid lush. here’s to the kids who hum “a little less 16 candles, a little more touch me” when they’re stuck home, dateless, on a Saturday night. here’s to the kids who have ever had a broken heart from someone who didn’t even know they existed. here’s to the kids who have read The Perks of Being a Wallflower and didn’t feel so alone after doing so. here’s to the kids who spend their days in photobooths with their best friends. here’s to the kids who are straight up smartasses and just don’t care. here’s to the kids who speak their mind. here’s to the kids who consider screamo their lullaby for going to sleep. here’s to the kids who second guess themselves on everything they do. here’s to the kids who will never have 100 percent confidence in anything they do, and to the kids that are okay with that. here’s to the kids. this one’s not for the kids who always get what they want, but for the ones who never had it at all. it’s not for the ones who never get caught, but for the ones who always try and fail. this one’s for the kids who didn’t make it, we were the kids who never made it. the overcast girls and the underdog boys. not for the kids who had all their joys. this one’s for the kids who never faked it. we’re the kids who didn’t make it. they say “breaking hearts is what we do best,” and “we’ll make your heart be ripped out of your chest.” the only heart that i broke was mine, when i got my hopes up too high. we were the kids who didn’t make it. we are the kids who never made it. — Pete Wentz

[class=xyz]
padding: 7px;
Height: 200px;
Width: 120px;
transition-duration: 0.5s;
z-index:-1;
color:transparent;[/class][class name=xyz state=hover]
background-color: whitesmoke;
opacity:0.6;
color:gray;
width:150px;
height:200px;
[/class][div class=xyz]

basic info?

[/div]

here’s to the kids. the kids who would rather spend their night with a bottle of coke and Patrick or Sonny playing on their headphones than go to some vomit-stained high school party. here’s to the kids whose 11:11 wish was wasted on one person who will never be there for them. here’s to the kids whose idea of a good night is sitting on the hood of a car, watching the stars. here’s to the kids who were never too good at life, but still were wicked cool. here’s to the kids who listened to Fall Out Boy and Hawthorne Heights before they were on MTV and blame MTV for ruining their life. here’s to the kids who care more about the music than the haircuts. here’s to the kids who have crushes on a stupid lush. here’s to the kids who hum “a little less 16 candles, a little more touch me” when they’re stuck home, dateless, on a Saturday night. here’s to the kids who have ever had a broken heart from someone who didn’t even know they existed. here’s to the kids who have read The Perks of Being a Wallflower and didn’t feel so alone after doing so. here’s to the kids who spend their days in photobooths with their best friends. here’s to the kids who are straight up smartasses and just don’t care. here’s to the kids who speak their mind. here’s to the kids who consider screamo their lullaby for going to sleep. here’s to the kids who second guess themselves on everything they do. here’s to the kids who will never have 100 percent confidence in anything they do, and to the kids that are okay with that. here’s to the kids. this one’s not for the kids who always get what they want, but for the ones who never had it at all. it’s not for the ones who never get caught, but for the ones who always try and fail. this one’s for the kids who didn’t make it, we were the kids who never made it. the overcast girls and the underdog boys. not for the kids who had all their joys. this one’s for the kids who never faked it. we’re the kids who didn’t make it. they say “breaking hearts is what we do best,” and “we’ll make your heart be ripped out of your chest.” the only heart that i broke was mine, when i got my hopes up too high. we were the kids who didn’t make it. we are the kids who never made it. — Pete Wentz

Code by

apolla
[/div]

ewolf20 · Feb 6, 2018

[class name=sugar] border-radius: 70px; background-color: #F1E189; border: #01C5C4 solid 50px;margin:auto;width:760px [/class] [class=image] border: #FE547B solid 7px; width:400px ; height:395px;background-image:url('http://via.placeholder.com/400x395');color:transparent;background-repeat: no-repeat;background-size:400px 395px;margin:auto; [/class] [class name=spice] width: 650px; height:250px;box-sizing: border-box; overflow: hidden; background-color: #F1E189; padding: 10px;margin:auto; [/class] [class name=spice2] width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px;margin:auto; [/class]

[div class=sugar]
[div class=image]
.
.
.
[/div]
[div class=spice]

[div class=spice2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ullamcorper magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus id turpis nec massa bibendum elementum. Etiam neque augue, gravida volutpat fringilla ac, tincidunt non libero. Integer elementum nisi aliquet, fringilla tellus et, hendrerit ligula. Nam dapibus nec mauris at ultrices. Quisque auctor sem sodales blandit viverra.

Morbi sit amet erat efficitur, congue turpis et, feugiat ante. Proin volutpat ante metus, hendrerit semper dui eleifend at. Quisque at ullamcorper lacus. Vestibulum pharetra magna at sollicitudin elementum. Pellentesque vitae orci porttitor, sodales diam sit amet, vehicula orci. Sed nec efficitur erat, a consequat purus. Etiam at ex ultricies, cursus lectus nec, interdum quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ac tortor pretium, semper quam in, fermentum lorem.

Vivamus pretium tellus imperdiet sem sagittis porttitor. In pretium finibus mollis. Ut enim ante, tempus et nulla quis, vehicula egestas urna. Phasellus consequat mauris sed suscipit varius. Etiam eu purus leo. Suspendisse tristique consequat dignissim. Vestibulum viverra tellus et malesuada maximus. Fusce vehicula magna pellentesque velit malesuada, sollicitudin mollis ante auctor. Nullam blandit pulvinar diam et tristique. Curabitur at blandit erat. Suspendisse cursus mattis velit, et interdum augue finibus gravida. Praesent facilisis lacinia justo, sed venenatis tellus dapibus dapibus. Proin tristique augue sit amet porta rutrum. Etiam id urna fringilla, facilisis quam nec, efficitur magna. Nullam tincidunt elit pretium quam suscipit laoreet. Morbi at dictum justo, et euismod enim.

Mauris porta quam vel massa egestas sollicitudin. Vestibulum porta interdum est, eu finibus nulla blandit in. Nulla non orci sit amet tellus vehicula lacinia. Nam non quam purus. Maecenas faucibus dolor a libero ullamcorper, id eleifend nisl vulputate. Aenean placerat, eros vel sollicitudin cursus, justo elit lobortis erat, eu varius justo dui eget turpis. Vestibulum posuere libero libero, eget consectetur nisi blandit a. Vivamus id nisi sit amet sapien volutpat euismod. Suspendisse suscipit est sem, vitae condimentum augue rutrum ut. Mauris vitae tristique elit. Sed in nunc at orci vehicula porta non vitae ipsum. Aliquam gravida non justo at lacinia. Aliquam sed vestibulum massa. Proin faucibus orci a felis lobortis imperdiet. Nam congue iaculis vestibulum. Aenean arcu nunc, suscipit vitae justo at, efficitur pellentesque [/div][/div]

[/div]

Necessity4Fun · Feb 6, 2018

And the winner of this round is

fluticasone ! Congratulations!! You left me in complete awe~
Thanks everyone for participating as well, these are all extremely lovely and I hope you're all proud of them!

fluticasone · Feb 7, 2018

thanks for choosing my design! c: i'm excited to see what everyone comes up with my prompt~ Now onwards!

心
こころ

With Valentine's right around the corner, I'd love to see a Character Sheet themed around 心 (こころ, rom. kokoro). While literally translating to "heart", it can also mean "feelings", "mentality" or "the heart of things". You can be as tacky and corny as you want, throwing pink and red hearts everywhere in your design ala magical girl with all the sparkles and fanfare. Or be existentialist and deep, pulling from Natsume Soseki's novel. Any and all interpretations are acceptable because that's what makes this prompt fun.

The time limit is February 14, which is exactly a week from now (because I'm corny ok).

Other restrictions? It must cover the core bones of a CS template, which are basic information, personality and history. Mobile friendliness isn't required, but if you make a design where the most content is readable on mobile, it's definitely a point in your favor.

Nano · Feb 7, 2018

fluticasone hope you like your chocolates bitter-sweet c:

A Murder Of Corviknight · Feb 7, 2018

Nano said:
fluticasone hope you like your chocolates bitter-sweet c:

nah she likes them dark and bitter...and delicious. :3c

myfanwy · Feb 9, 2018

prompt no. 5
not at all mobile friendly and i s t g i want to kill myself after making this

"When the white moon rises I see you reflected in it"

// Gorgeously blossoming flowers / Even the wind is sweet in this dream like place / Whenever I’m with you / Wherever it is, my heart flutters as it enters a picture //

// I’m drunk with you / Leaning on the faraway scent / Leaving behind time I’m looking at you / When the white moon rises I see you reflected in it //

// My day and night are all you / Without any space left (you fill me up) / All sounds of life seem like you //

// Paint it on a little thicker / This night is deeply spreading / So I can’t escape / I’m closing my eyes and looking for you inside of me / I’m drunk, a little more drunk / I wanna fall into this dream / You came to me / Only to me //

// The night asks how I’m doing / Then the red camellia that resembles you gets jealous / Your sweet lips dazzle and shine / Causing waves to rise in my sleeping heart //

// Even unripe peaches taste sweet / Under the scattering flower petals / Following the tip of your silk clothes / Holding you close / I know the sound of your breath / You’re blowing over to me / In this dream-like imagination //

// My day and night are all you / Even my swaying heart / Your thick scent bewitches me //

// Paint it on a little thicker / This night is deeply spreading / So I can’t escape / I’m closing my eyes and looking for you inside of me / I’m drunk, a little more drunk / I wanna fall into this dream / You came to me / Only to me //

// My empty space / Gets filled up / With your colour / That is faint and dazzling / Beautiful, warm, mysterious //

// I’m flying, flying with you / Inside the fantasy spread in this dream / You’re getting closer // Blossoming in my heart once again / Just one thing, only you know / The place I’ve been looking for is you / When I open my eyes again / You only come into me //

b a s i c s

사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해

01

.
.

02

.

h i s t o r y

사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해

03

.

p e r s o n a

사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해

m i s c

사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해 사랑해

04

.
.

apolla · Feb 10, 2018

About this Code Mobile friendly! ^^ I used the heart picture, along with a pretty badass chick named Alaina Marie Beaton, AKA Porcelain Black. I thought she was giving off feeling in the picture... xD Hope you enjoy!

Put your basic information here
This scrolls
Put your basic information here
This scrolls
Put your basic information here
This scrolls
Put your basic information here
This scrolls
Put your basic information here
This scrolls
Put your basic information here
This scrolls

Put stats here
This scrolls
Put stats here
This scrolls
Put stats here
This scrolls
Put stats here
This scrolls
Put stats here
This scrolls
Put stats here
This scrolls
Put stats here
This scrolls

valentine-romantic-valentines-day-awesome-picture-ideas-sugar-lips-art-id-abyss-cardsromantic-gifts-for-1024x640.jpg

Put your persona here
This scrolls
Put your persona here
This scrolls
Put your persona here
This scrolls
Put your persona here
This scrolls
Put your persona here
This scrolls
Put your persona here
This scrolls

Put bio here
This scrolls
Put bio here
This scrolls
Put bio here
This scrolls
Put bio here
This scrolls
Put bio here
This scrolls
Put bio here
This scrolls
Put bio here
This scrolls

Code by

apolla

Alteras · Feb 12, 2018

Mobile Compatible. Things spin. Like a lot of things spin. The hearts (including the ones in the tabs) spin when you brush your mouse over them. Free to use. Please keep credit. Will post code and full breakdown of code in my workshop later.

[class=container] width: 100%; padding-top: calc( (3 / 7) * 100%); position: relative; --color-1: rgb(236, 225, 147); --bg-color-1: rgb(59, 45, 44); --bg-color-2: rgb(186,78,81); --bg-color-3: rgb(223, 203, 180); [/class] [class=colorC] --color-1: rgb(149, 112, 87); [/class] [class=flex] width: 100%; height: 100%; position: absolute; top:0; display: flex; flex-flow: row wrap; align-items: stretch; [/class] [class=imageholder] width: calc( 3 / 7 * 100%); height: 100%; box-sizing:border-box; position: relative; transform-style: preserve-3d; flex: 0 0 auto; [/class] [class=rightside] flex: 1 0 auto; position: relative; [/class] [class=tabholder] position: absolute; max-height: 5%; height: auto; bottom: 70%; left: -5%; border: 3px solid var(--color-1); border-bottom-width: 0px; border-top-right-radius: 20px; border-top-left-radius: 20px; padding: 3px 10px 3px 10px; font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) ); color: var(--color-1); transition: color 3s, border-color 3s; white-space: nowrap; [/class] [class=button] display: inline; cursor: pointer; [/class] [class=content] width: 100%; height: 65%; left:-5%; bottom: 5%; position: absolute; [/class] [class=contentHolder] position: relative; width: 100%; height: 100%; border-top: 3px solid var(--color-1); border-bottom: 3px solid var(--color-1); color: var(--color-1); transition: color 3s, border-color 3s; padding-top: 3px; overflow:hidden; transform-style: preserve-3D; box-sizing: border-box; [/class] [class=contentBox] width: 100%; height: 100%; position: absolute; top:0; left:0; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility: hidden; transition: transform 3s ease-out .5s, -webkit-transform 3s ease-out .5s; [/class] [class=contentFix] position: relative; height: 100%; width: 100%; overflow-Y: scroll; padding-right: 100px; [/class] [class=contentSpin] -webkit-transform: rotateY(.5turn); transform: rotateY(.5turn); [/class] [class=backgroundContainer] display: flex; position: absolute; width: 100%; height: 100%; top:0; transform: translateZ(-1000px); [/class] [class=backgroundPanel] flex-grow: 1; height: 100%; position: relative; [/class] [class=PanelA] height:100%; width:100%; position: absolute; top:0; left:0; -webkit-backface-visibility:hidden; backface-visibility: hidden; background-color: var(--bg-color-1); [/class] [class=PanelB] height:100%; width: 100%; position: absolute; top:0; left:0; -webkit-backface-visibility:hidden; backface-visibility: hidden; background-color: var(--bg-color-2); [/class] [class=PanelC] height:100%; width:100%; position: absolute; top:0; left:0; -webkit-backface-visibility:hidden; backface-visibility: hidden; background-color: var(--bg-color-3); [/class] [class=panelSpin] transform: rotateY(.5turn); [/class] [class=HeartsContainer] width: 100%; height: 25%; position: relative; [/class] [class=heart] transition: all 3s ease-out; display: block; position: absolute; width: auto; font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) ); [/class] [class=heartImage] right: 10%; top: 20%; z-index: 9; color: rgb(255, 229, 238); [/class] [class=heart1] top: 50%; left: 0%; color: rgb(233, 128, 140); [/class] [class=heart2] top: 20%; left: 15%; color: rgb(239, 69, 87); [/class] [class=heart3] bottom: 10%; left: 40%; color: rgb(241, 100, 143); [/class] [class=heart4] top: 40%; left: 60%; color: rgb(248, 173, 183); [/class] [class=heart5] bottom: 30%; right: 10%; color: rgb(227, 47, 108); [/class] [class=heartTab1] display: inline; position: absolute; transition: 3s ease-out; [/class] [class=heartTab2] display: inline; position: absolute; transition: 3s ease-out; [/class] [class=heartTab3] display: inline; position: absolute; transition: 3s ease-out; [/class] [class=spin] transform: rotateY(5turn); [/class] [class=spinHeartImage] transition: transform 3s ease-out; [/class] [class=spinHeart1] transition: transform 3s ease-out .25s; [/class] [class=spinHeart2] transition: transform 3s ease-out .5s; [/class] [class=spinHeart3] transition: transform 3s ease-out .75s; [/class] [class=spinHeart4] transition: transform 3s ease-out 1s; [/class] [class=spinHeart5] transition: transform 3s ease-out 1.25s; [/class] [class=spinHeartTab1] transition: transform 3s ease-out .275s; [/class] [class=spinHeartTab2] transition: transform 3s ease-out .525s; [/class] [class=spinHeartTab3] transition: transform 3s ease-out .775s; [/class] [script=heart] set heartImageIsSpun 0 set heart1IsSpun 0 set heart2IsSpun 0 set heart3IsSpun 0 set heart4IsSpun 0 set heart5IsSpun 0 set heartTab1IsSpun 0 set heartTab2IsSpun 0 set heartTab3IsSpun 0 [/script] [script class=heartImage on=mouseenter] removeClass spinHeartImage if (eq ${heartImageIsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) [/script] [script class=heart1 on=mouseenter] removeClass spinHeart1 if (eq ${heart1IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) [/script] [script class=heart2 on=mouseenter] removeClass spinHeart2 if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) [/script] [script class=heart3 on=mouseenter] removeClass spinHeart3 if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) [/script] [script class=heart4 on=mouseenter] removeClass spinHeart4 if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) [/script] [script class=heart5 on=mouseenter] removeClass spinHeart5 if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) [/script] [script class=heartTab1 on=mouseenter] removeClass spinHeartTab1 if (eq ${heartTab1IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) [/script] [script class=heartTab2 on=mouseenter] removeClass spinHeartTab2 if (eq ${heartTab2IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) [/script] [script class=heartTab3 on=mouseenter] removeClass spinHeartTab3 if (eq ${heartTab3IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [class=imageSideA] width: 100%; position: absolute; top:0; transition: all 3s; -webkit-backface-visibility:hidden; backface-visibility:hidden; pointer-events:none; [/class] [class=imageSideB] width: 100%; position: absolute; top:0; transition: all 3s; -webkit-backface-visibility:hidden; backface-visibility:hidden; pointer-events:none; [/class] [class=imageSideC] width: 100%; position: absolute; top:0; transition: all 3s; -webkit-backface-visibility:hidden; backface-visibility:hidden; pointer-events:none; [/class] [class=spinImage] transform: rotateY(1.5turn); [/class] [script=button] set CurSide A fadeOut 1 contentB fadeOut 1 contentC [/script] [script class=buttonA on=click] if (eq ${CurSide} A) (stop) fadeIn 3000 contentA fadeOut 3000 contentB fadeOut 3000 contentC removeClass colorC container removeClass contentSpin contentA addClass contentSpin contentB addClass contentSpin contentC removeClass panelSpin PanelA addClass panelSpin PanelB addClass panelSpin PanelC removeClass spinImage imageSideA addClass spinImage imageSideB addClass spinImage imageSideC set CurSide A //spinning hearts addClass spinHeartImage heartImage addClass spinHeart1 heart1 addClass spinHeart2 heart2 addClass spinHeart3 heart3 addClass spinHeart4 heart4 addClass spinHeart5 heart5 addClass spinHeartTab1 heartTab1 addClass spinHeartTab2 heartTab2 addClass spinHeartTab3 heartTab3 if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [script class=buttonB on=click] if (eq ${CurSide} B) (stop) fadeIn 3000 contentB fadeOut 3000 contentA fadeOut 3000 contentC removeClass colorC container removeClass contentSpin contentB addClass contentSpin contentA addClass contentSpin contentC removeClass panelSpin PanelB addClass panelSpin PanelA addClass panelSpin PanelC removeClass spinImage imageSideB addClass spinImage imageSideA addClass spinImage imageSideC set CurSide B //spinning hearts addClass spinHeartImage heartImage addClass spinHeart1 heart1 addClass spinHeart2 heart2 addClass spinHeart3 heart3 addClass spinHeart4 heart4 addClass spinHeart5 heart5 addClass spinHeartTab1 heartTab1 addClass spinHeartTab2 heartTab2 addClass spinHeartTab3 heartTab3 if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [script class=buttonC on=click] if (eq ${CurSide} C) (stop) addClass colorC container fadeIn 3000 contentC fadeOut 3000 contentA fadeOut 3000 contentB removeClass contentSpin contentC addClass contentSpin contentB addClass contentSpin contentA removeClass panelSpin PanelC addClass panelSpin PanelB addClass panelSpin PanelA removeClass spinImage imageSideC addClass spinImage imageSideB addClass spinImage imageSideA set CurSide C //spinning hearts addClass spinHeartImage heartImage addClass spinHeart1 heart1 addClass spinHeart2 heart2 addClass spinHeart3 heart3 addClass spinHeart4 heart4 addClass spinHeart5 heart5 addClass spinHeartTab1 heartTab1 addClass spinHeartTab2 heartTab2 addClass spinHeartTab3 heartTab3 if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [div class=container][div class=backgroundContainer] [div class=backgroundPanel][div class=PanelA style="transition: all 2s;"][/div][div class="PanelB panelSpin" style="transition: all 2s;"][/div][div class="PanelC panelSpin" style="transition: all 2s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s .25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .25s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s .5s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .5s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .5s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s .75s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .75s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .75s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s 1s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s 1.25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1.25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1.25s;"][/div][/div] [/div]

[div class=flex][div class=imageholder][div class="heart heartImage"][/div][div class=imageSideA]

[/div][div class="imageSideB spinImage"]

[/div][div class="imageSideC spinImage"]

[/div][/div][div class=rightside][div class=HeartsContainer]
[div class="heart heart1"][/div]
[div class="heart heart2"][/div]
[div class="heart heart3"][/div]
[div class="heart heart4"][/div]
[div class="heart heart5"][/div][/div][div class=tabholder][div class="buttonA button"][div class=heartTab1][/div]Milk[/div] | [div class="buttonB button"][div class=heartTab2][/div]Strawberry[/div] | [div class="buttonC button"][div class=heartTab3][/div]White[/div][/div][div class=content]

Code by

Alteras

[div class=contentHolder]

[div class="contentBox contentA"]

[div class=contentFix style="height: calc( (1.17364817766 * 9em) + 18em); padding-right: 100px;"]

Chocolate

Angela

Akiyama

Romance

[/div][/div]

[div class="contentBox contentB contentSpin"][div class=contentFix]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in nulla euismod, luctus diam vitae, laoreet mauris. Proin euismod risus id augue vestibulum elementum. Curabitur fringilla, enim nec venenatis dapibus, elit quam vehicula lectus, quis sollicitudin nulla quam consectetur lacus. Vivamus leo justo, tempus sit amet mauris ultrices, convallis venenatis ex. Duis sit amet ligula a mauris feugiat auctor. Aliquam tincidunt justo turpis, quis scelerisque tellus convallis non. Nam non lorem sed velit pulvinar laoreet. Morbi feugiat fringilla mauris, ac maximus lectus posuere eu. Maecenas dui elit, semper rhoncus est nec, vehicula gravida mi. Quisque non posuere lorem, dictum tristique velit. Quisque mi risus, iaculis nec blandit sed, maximus quis libero.

Praesent accumsan eu augue nec varius. Nam euismod felis ligula, eu pretium nibh sollicitudin quis. Proin nec suscipit lorem. Nulla iaculis imperdiet eros, eget sollicitudin ex eleifend eu. Duis nisi ligula, ultrices non gravida vitae, cursus vel augue. Ut odio quam, vehicula eleifend quam a, lacinia semper felis. Quisque laoreet commodo efficitur. Aenean eu risus sollicitudin, tristique eros sit amet, condimentum lacus. Vestibulum ullamcorper pulvinar augue, nec egestas ligula. Praesent imperdiet urna purus, nec elementum ex feugiat ut. Nullam aliquet, leo a facilisis pharetra, elit elit condimentum neque, et porta magna nunc nec nulla. Donec et dapibus ante. Praesent elit felis, ullamcorper et sapien eget, scelerisque convallis orci. Suspendisse interdum velit id faucibus mattis. Sed eu viverra libero.

Cras in libero lacinia, pharetra orci eget, tincidunt ex. Morbi vestibulum quis augue eget ultricies. Quisque placerat id lacus id egestas. Fusce laoreet porttitor mattis. Vivamus aliquet fringilla pulvinar. Cras et diam ultrices, semper massa a, elementum libero. Cras vel ligula eget nulla commodo congue. Phasellus euismod varius sagittis. Etiam tempor quam eu ligula tempus placerat. Duis vel orci quis leo ultricies egestas sed a sapien. Sed lorem nunc, venenatis vel quam sed, tincidunt rhoncus metus. Vestibulum nulla libero, dapibus vel orci eget, luctus fermentum turpis. Fusce sodales ipsum id lacus laoreet, eu vehicula turpis mollis. Morbi finibus enim purus, sit amet eleifend lectus eleifend quis. Vestibulum accumsan mollis sollicitudin.
[/div][/div]

[div class="contentBox contentC contentSpin"][div class=contentFix]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in nulla euismod, luctus diam vitae, laoreet mauris. Proin euismod risus id augue vestibulum elementum. Curabitur fringilla, enim nec venenatis dapibus, elit quam vehicula lectus, quis sollicitudin nulla quam consectetur lacus. Vivamus leo justo, tempus sit amet mauris ultrices, convallis venenatis ex. Duis sit amet ligula a mauris feugiat auctor. Aliquam tincidunt justo turpis, quis scelerisque tellus convallis non. Nam non lorem sed velit pulvinar laoreet. Morbi feugiat fringilla mauris, ac maximus lectus posuere eu. Maecenas dui elit, semper rhoncus est nec, vehicula gravida mi. Quisque non posuere lorem, dictum tristique velit. Quisque mi risus, iaculis nec blandit sed, maximus quis libero.

Praesent accumsan eu augue nec varius. Nam euismod felis ligula, eu pretium nibh sollicitudin quis. Proin nec suscipit lorem. Nulla iaculis imperdiet eros, eget sollicitudin ex eleifend eu. Duis nisi ligula, ultrices non gravida vitae, cursus vel augue. Ut odio quam, vehicula eleifend quam a, lacinia semper felis. Quisque laoreet commodo efficitur. Aenean eu risus sollicitudin, tristique eros sit amet, condimentum lacus. Vestibulum ullamcorper pulvinar augue, nec egestas ligula. Praesent imperdiet urna purus, nec elementum ex feugiat ut. Nullam aliquet, leo a facilisis pharetra, elit elit condimentum neque, et porta magna nunc nec nulla. Donec et dapibus ante. Praesent elit felis, ullamcorper et sapien eget, scelerisque convallis orci. Suspendisse interdum velit id faucibus mattis. Sed eu viverra libero.

Cras in libero lacinia, pharetra orci eget, tincidunt ex. Morbi vestibulum quis augue eget ultricies. Quisque placerat id lacus id egestas. Fusce laoreet porttitor mattis. Vivamus aliquet fringilla pulvinar. Cras et diam ultrices, semper massa a, elementum libero. Cras vel ligula eget nulla commodo congue. Phasellus euismod varius sagittis. Etiam tempor quam eu ligula tempus placerat. Duis vel orci quis leo ultricies egestas sed a sapien. Sed lorem nunc, venenatis vel quam sed, tincidunt rhoncus metus. Vestibulum nulla libero, dapibus vel orci eget, luctus fermentum turpis. Fusce sodales ipsum id lacus laoreet, eu vehicula turpis mollis. Morbi finibus enim purus, sit amet eleifend lectus eleifend quis. Vestibulum accumsan mollis sollicitudin.
心爱人！！！
[/div][/div]

[/div][/div][/div][/div][/div]

Code:

[nobr]

[class=container]
width: 100%;
padding-top: calc( (3 / 7) * 100%);
position: relative;
--color-1: rgb(236, 225, 147);
--bg-color-1: rgb(59, 45, 44);
--bg-color-2: rgb(186,78,81);
--bg-color-3: rgb(223, 203, 180);
[/class]

[class=colorC]
--color-1: rgb(149, 112, 87);
[/class]

[class=flex]
width: 100%;
height: 100%;
position: absolute;
top:0;
display: flex;
flex-flow: row wrap;
align-items: stretch;
[/class]

[class=imageholder]
width: calc( 3 / 7 * 100%);
height: 100%;
box-sizing:border-box;
position: relative;
transform-style: preserve-3d;
flex: 0 0 auto;
[/class]

[class=rightside]
flex: 1 0 auto;
position: relative;
[/class]

[class=tabholder]
position: absolute;
max-height: 5%;
height: auto;
bottom: 70%;
left: -5%;
border: 3px solid var(--color-1);
border-bottom-width: 0px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 3px 10px 3px 10px;
font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) );
color: var(--color-1);
transition: color 3s, border-color 3s;
white-space: nowrap;
[/class]

[class=button]
display: inline;
cursor: pointer;
[/class]

[class=content]
width: 100%;
height: 65%;
left:-5%;
bottom: 5%;
position: absolute;
[/class]

[class=contentHolder]
position: relative;
width: 100%;
height: 100%;
border-top: 3px solid var(--color-1);
border-bottom: 3px solid var(--color-1);
color: var(--color-1);
transition: color 3s, border-color 3s;
padding-top: 3px;
overflow:hidden;
transform-style: preserve-3D;
box-sizing: border-box;
[/class]

[class=contentBox]
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
overflow:hidden;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
transition: transform 3s ease-out .5s, -webkit-transform 3s ease-out .5s;
[/class]

[class=contentFix]
position: relative;
height: 100%;
width: 100%;
overflow-Y: scroll;
padding-right: 100px;
[/class]

[class=contentSpin]
-webkit-transform: rotateY(.5turn);
transform: rotateY(.5turn);
[/class]

[comment]Background Panels[/comment]
[class=backgroundContainer]
display: flex;
position: absolute;
width: 100%;
height: 100%;
top:0;
transform: translateZ(-1000px);
[/class]

[class=backgroundPanel]
flex-grow: 1;
height: 100%;
position: relative;
[/class]

[class=PanelA]
height:100%;
width:100%;
position: absolute;
top:0;
left:0;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
background-color: var(--bg-color-1);
[/class]

[class=PanelB]
height:100%;
width: 100%;
position: absolute;
top:0;
left:0;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
background-color: var(--bg-color-2);
[/class]

[class=PanelC]
height:100%;
width:100%;
position: absolute;
top:0;
left:0;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
background-color: var(--bg-color-3);
[/class]

[class=panelSpin]
transform: rotateY(.5turn);
[/class]

[comment]Background Panels End[/comment]

[comment]Hearts Start[/comment]

[class=HeartsContainer]
width: 100%;
height: 25%;
position: relative;
[/class]

[class=heart]
transition: all 3s ease-out;
display: block;
position: absolute;
width: auto;
font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) );
[/class]

[class=heartImage]
right: 10%;
top: 20%;
z-index: 9;
color: rgb(255, 229, 238);
[/class]

[class=heart1]
top: 50%;
left: 0%;
color: rgb(233, 128, 140);
[/class]

[class=heart2]
top: 20%;
left: 15%;
color: rgb(239, 69, 87);
[/class]

[class=heart3]
bottom: 10%;
left: 40%;
color: rgb(241, 100, 143);
[/class]

[class=heart4]
top: 40%;
left: 60%;
color: rgb(248, 173, 183);
[/class]

[class=heart5]
bottom: 30%;
right: 10%;
color: rgb(227, 47, 108);
[/class]

[class=heartTab1]
display: inline;
position: absolute;
transition: 3s ease-out;
[/class]

[class=heartTab2]
display: inline;
position: absolute;
transition: 3s ease-out;
[/class]

[class=heartTab3]
display: inline;
position: absolute;
transition: 3s ease-out;
[/class]

[class=spin]
transform: rotateY(5turn);
[/class]

[class=spinHeartImage]
transition: transform 3s ease-out;
[/class]

[class=spinHeart1]
transition: transform 3s ease-out .25s;
[/class]

[class=spinHeart2]
transition: transform 3s ease-out .5s;
[/class]

[class=spinHeart3]
transition: transform 3s ease-out .75s;
[/class]

[class=spinHeart4]
transition: transform 3s ease-out 1s;
[/class]

[class=spinHeart5]
transition: transform 3s ease-out 1.25s;
[/class]

[class=spinHeartTab1]
transition: transform 3s ease-out .275s;
[/class]

[class=spinHeartTab2]
transition: transform 3s ease-out .525s;
[/class]

[class=spinHeartTab3]
transition: transform 3s ease-out .775s;
[/class]

[script=heart]
set heartImageIsSpun 0
set heart1IsSpun 0
set heart2IsSpun 0
set heart3IsSpun 0
set heart4IsSpun 0
set heart5IsSpun 0
set heartTab1IsSpun 0
set heartTab2IsSpun 0
set heartTab3IsSpun 0
[/script]

[script class=heartImage on=mouseenter]
removeClass spinHeartImage
if (eq ${heartImageIsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
[/script]

[script class=heart1 on=mouseenter]
removeClass spinHeart1
if (eq ${heart1IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
[/script]

[script class=heart2 on=mouseenter]
removeClass spinHeart2
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
[/script]

[script class=heart3 on=mouseenter]
removeClass spinHeart3
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
[/script]

[script class=heart4 on=mouseenter]
removeClass spinHeart4
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
[/script]

[script class=heart5 on=mouseenter]
removeClass spinHeart5
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
[/script]

[script class=heartTab1 on=mouseenter]
removeClass spinHeartTab1
if (eq ${heartTab1IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
[/script]

[script class=heartTab2 on=mouseenter]
removeClass spinHeartTab2
if (eq ${heartTab2IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
[/script]

[script class=heartTab3 on=mouseenter]
removeClass spinHeartTab3
if (eq ${heartTab3IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]

[comment]Hearts end[/comment]

[comment]Image start[/comment]

[class=imageSideA]
width: 100%;
position: absolute;
top:0;
transition: all 3s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
[/class]

[class=imageSideB]
width: 100%;
position: absolute;
top:0;
transition: all 3s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
[/class]

[class=imageSideC]
width: 100%;
position: absolute;
top:0;
transition: all 3s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
[/class]

[class=spinImage]
transform: rotateY(1.5turn);
[/class]

[script=button]
set CurSide A
fadeOut 1 contentB
fadeOut 1 contentC
[/script]

[script class=buttonA on=click]
if (eq ${CurSide} A) (stop)
fadeIn 3000 contentA
fadeOut 3000 contentB
fadeOut 3000 contentC
removeClass colorC container
removeClass contentSpin contentA
addClass contentSpin contentB
addClass contentSpin contentC
removeClass panelSpin PanelA
addClass panelSpin PanelB
addClass panelSpin PanelC
removeClass spinImage imageSideA
addClass spinImage imageSideB
addClass spinImage imageSideC
set CurSide A

//spinning hearts
addClass spinHeartImage heartImage
addClass spinHeart1 heart1
addClass spinHeart2 heart2
addClass spinHeart3 heart3
addClass spinHeart4 heart4
addClass spinHeart5 heart5
addClass spinHeartTab1 heartTab1
addClass spinHeartTab2 heartTab2
addClass spinHeartTab3 heartTab3
if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]

[script class=buttonB on=click]
if (eq ${CurSide} B) (stop)
fadeIn 3000 contentB
fadeOut 3000 contentA
fadeOut 3000 contentC
removeClass colorC container
removeClass contentSpin contentB
addClass contentSpin contentA
addClass contentSpin contentC
removeClass panelSpin PanelB
addClass panelSpin PanelA
addClass panelSpin PanelC
removeClass spinImage imageSideB
addClass spinImage imageSideA
addClass spinImage imageSideC
set CurSide B

//spinning hearts
addClass spinHeartImage heartImage
addClass spinHeart1 heart1
addClass spinHeart2 heart2
addClass spinHeart3 heart3
addClass spinHeart4 heart4
addClass spinHeart5 heart5
addClass spinHeartTab1 heartTab1
addClass spinHeartTab2 heartTab2
addClass spinHeartTab3 heartTab3
if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]

[script class=buttonC on=click]
if (eq ${CurSide} C) (stop)
addClass colorC container
fadeIn 3000 contentC
fadeOut 3000 contentA
fadeOut 3000 contentB
removeClass contentSpin contentC
addClass contentSpin contentB
addClass contentSpin contentA
removeClass panelSpin PanelC
addClass panelSpin PanelB
addClass panelSpin PanelA
removeClass spinImage imageSideC
addClass spinImage imageSideB
addClass spinImage imageSideA
set CurSide C

//spinning hearts
addClass spinHeartImage heartImage
addClass spinHeart1 heart1
addClass spinHeart2 heart2
addClass spinHeart3 heart3
addClass spinHeart4 heart4
addClass spinHeart5 heart5
addClass spinHeartTab1 heartTab1
addClass spinHeartTab2 heartTab2
addClass spinHeartTab3 heartTab3
if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]

[comment]Image end[/comment]

[comment]Code by [USER=34809]@Alteras[/USER][/comment]

[/nobr][div class=container][div class=backgroundContainer][nobr]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s;"][/div][div class="PanelB panelSpin" style="transition: all 2s;"][/div][div class="PanelC panelSpin" style="transition: all 2s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s .25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .25s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s .5s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .5s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .5s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s .75s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .75s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .75s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s 1s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s 1.25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1.25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1.25s;"][/div][/div]
[/nobr][/div]

[div class=flex][div class=imageholder][div class="heart heartImage"][fa]fa-heart fa-fw fa-2x[/fa][/div][div class=imageSideA][IMG]https://www.rpnation.com/media/f799306e12a6cde82ae34e3358cfb2fd-png.34757/full[/IMG][/div][div class="imageSideB spinImage"][IMG]https://www.rpnation.com/media/c6cee57a7a843813ea4d64a64f653c0a-png.34756/full[/IMG][/div][div class="imageSideC spinImage"][img]https://www.rpnation.com/media/__monaca_burlone_uchi_no_hime_sama_ga_ichiban_kawaii_drawn_by_sheska_xue__720295ec68da1750bad5-png.34758/full[/img][/div][/div][div class=rightside][div class=HeartsContainer]
[div class="heart heart1"][fa]fa-heart fa-fw fa-2x[/fa][/div]
[div class="heart heart2"][fa]fa-heart fa-fw fa-3x[/fa][/div]
[div class="heart heart3"][fa]fa-heart fa-fw fa-3x[/fa][/div]
[div class="heart heart4"][fa]fa-heart fa-fw fa-4x[/fa][/div]
[div class="heart heart5"][fa]fa-heart fa-fw fa-5x[/fa][/div][/div][div class=tabholder][font=Fugaz One][div class="buttonA button"][div class=heartTab1][fa]fa-heartbeat fa-fw[/fa][/div][fa]fa-fw[/fa]Milk[/div] | [div class="buttonB button"][div class=heartTab2][fa]fa-heart fa-fw[/fa][/div][fa]fa-fw[/fa]Strawberry[/div] | [div class="buttonC button"][div class=heartTab3][fa]fa-heart-o fa-fw[/fa][/div][fa]fa-fw[/fa]White[/div][/font][/div][div class=content][div=position:absolute; top:100%; right:0; font: .75em "Fugaz One"; color: var(--color-1);]Code by [USER=34809]@Alteras[/USER][/div][div class=contentHolder][font=Montserrat]

[div class="contentBox contentA"][div=font-size: calc( 4px + (18 - 4) * (100vh - 200px) / (1280 - 200) );][div class=contentFix style="height: calc( (1.17364817766 * 9em) + 18em); padding-right: 100px;"][div=position:absolute; top:0; font: 3.5em "Fugaz One";]Chocolate[/div][div=font-size:9em; display: block; position:absolute; top:0; width: calc(100% - 100px); height:2em; line-height: .95; font-family:"Fugaz One"; transform: skewY(-10deg); transform-origin: top right;][u][left]name[/left]
[right]Name[/right][/u][/div]
[div=position:absolute; bottom:0; right: 100px; font: 3.5em "Fugaz One";]Romance[/div][/div]
[/div][/div]

[div class="contentBox contentB contentSpin"][div class=contentFix]Tab 2 Content
[/div][/div]

[div class="contentBox contentC contentSpin"][div class=contentFix]Tab 3 content


[/div][/div]

[/font][/div][/div][/div][/div][/div]

cherub. · Feb 12, 2018

omg that is so fucking epic !!!

Alteras

apolla · Feb 12, 2018

Alteras
WOW
I am amazed

But I was curious if the text was supposed to look like that >_> It's like mirrored and you can't read it? I can post a screenshot if you want

Alteras · Feb 12, 2018

Beauty_Belle said:
Alteras
WOW
I am amazed

But I was curious if the text was supposed to look like that >_> It's like mirrored and you can't read it? I can post a screenshot if you want

It's fine. I noticed it too. It worked on firefox, but not on any webkit device. fixing it rn.

apolla · Feb 12, 2018

Alteras said:
It's fine. I noticed it too. It worked on firefox, but not on any webkit device. fixing it rn.

Awesome! I was confused xD But really though, that code is BOMB

cherub. · Feb 12, 2018

c o d i n g
l e g e n d

Vesuvius · Feb 12, 2018

[class=imageHundred]background:url(https://images2.imgbox.com/de/9d/9CyEjeyv_o.jpeg);width:150px;height:150px;background-size:150px;border: 10px solid white[/class] [class=containerOne]padding:5%;width:80%;min-width:300px;max-width:1050px;margin:auto;background: url(https://i.stack.imgur.com/xJRXv.png);display:flex;flex-wrap:wrap[/class] [class=smallContainerSkies]margin-top:10px;text-align:right;padding-top:5px;font-size:12px;color:#555[/class] [class=labelSmallSkies]Margin-top:-5px;Margin-left:5px;float:right;display:inline-block;background:#555;color:white;padding:5px;font-size:12px;[/class] [class=tabLabel]margin-top:20px;text-align:center;padding-top:5px;font-size:12px;color:#555;font-family:Times New Roman;font-weight:bold;cursor:pointer[/class] [class=smallOocSkies]margin-top:10px;text-align:left;padding-top:5px;font-size:12px;color:#555[/class] [class=selected]background-color:#f1f1f1!important;box-shadow:1px 1px #e4e4e4!important;color:#555!important[/class] [class=labelOocSkies]Margin-top:-5px;Margin-right:5px;float:left;display:inline-block;background:#555;color:white;padding:5px;font-size:12px;[/class] [class=containerMediumOne]Flex-grow:2;width:300px;height:500px;overflow:hidden;margin-left:10px;[/class] [script class=tabOne on=click] addClass selected tabOne removeClass selected tabTwo removeClass selected tabThree fadeOut 500 tabPages fadeIn 1200 tabPageOne [/script] [script class=tabTwo on=click] addClass selected tabTwo removeClass selected tabOne removeClass selected tabThree fadeOut 500 tabPages fadeIn 1200 tabPageTwo [/script] [script class=tabThree on=click] addClass selected tabThree removeClass selected tabTwo removeClass selected tabOne fadeOut 500 tabPages fadeIn 1200 tabPageThree [/script] [div class=containerOne]

[div class=imageHundred]

[div class=smallContainerSkies][div class=labelSmallSkies]name[/div] namehere[/div] [div class=smallContainerSkies][div class=labelSmallSkies]age[/div] agehere[/div] [div class=smallContainerSkies][div class=labelSmallSkies]gender[/div] genderhere[/div] [div class=smallContainerSkies][div class=labelSmallSkies]something[/div] classhere[/div] [div class=tabLabel][div class="tabOne" style="background:#555;color:white;padding:10px 15px 10px 15px;font-size:12px;display:inline-block;margin-left:10px"]i[/div][div class="tabTwo" style="background:#555;color:white;padding:10px 14px 10px 14px;font-size:12px;display:inline-block;margin-left:10px"]ii[/div][div class="tabThree" style="background:#555;color:white;padding:10px 13px 10px 13px;font-size:12px;display:inline-block;margin-left:10px"]iii[/div][/div] [/div] [div class=containerMediumOne] [div class="tabPages tabPageOne"] [class=tabPages]height:500px;width:100%;padding-right:100px;overflow-y:auto[/class] [class=sectionTitle]flex-grow:1;padding:25px;font-size:25px;font-weight:bold;font-family:Montserrat;text-align:right;background:white;margin-left:10px;[/class] [class=songOfZipsgiv]border-top:1px solid black;font-size:10px;[/class] [class=textGoesInHere]background:white;padding:25px;font-size:11px;font-family:Montserrat;color:#555;margin-top:10px;text-align:justify[/class]

[div class=sectionTitle]SAY YOU'RE BACK [div class=songOfZipsgiv]APPEARANCE

[/div] [/div] [div class=textGoesInHere] “It’s perfectly true, gentlemen of the jury,” I said. “I murdered my wife. I put hemlock in her milk, she drank it, she died. It was no accident. I did it on purpose.”

I glanced nervously over their heads at the sundial on the far wall. Time was getting on. How long does it take to find a self-confessed murderer guilty and string him up, for crying out loud? But the jurors were gazing at me solemnly, still and quiet as little mice, expecting more. What? Did they think the confession, the cut-and-dried, open-and-shut admission of guilt I’d just so thoughtfully given them was some sort of rhetorical trick? Yes, probably. In any event, they weren’t convinced. I blame the lawyers.

“Just to clarify,” I said. “I did it. The mandatory sentence for murder is, I believe, death.” I lowered my head. “I rest my case.”

Awkward silence. The prosecutor was staring at me. For God’s sake, man,I could hear him thinking, pull yourself together. I gave him a polite nod; carry on. Please. We’re on the clock here.

Slowly he rose to his feet. He was probably a decent enough fellow, with a sense of fair play that I’d have admired in other circumstances. “Gentlemen,” he said, “we have a clear confession. I therefore move that—”

Out of the corner of my eye, I saw something scuttle across the floor. Hell, I thought.

The prosecutor was still banging on about something. “…Evidence we have heard from the investigating magistrate, I feel we ought to consider the issue of the accused man’s mental capacity. If, as would seem to be the case, this man is not in his right mind, it is open to you to substitute a sentence of detention for life at the monastery of the Golden Heart—”

I jumped up. The kettlehat made a grab for my arm, but I elbowed him in the eye. “Don’t listen to him,” I shouted. “I’m not mad, I’m as sane as you are. I killed her for her money, that’s all there is to it.”

I noticed a man in the front row of the jury benches pulling a frown. I got the impression he didn’t approve of killing rich wives for their money. Excellent. But the shadow on the sundial was almost touching the ornately gilded Six. I turned and faced the prosecutor. “Please,” I said. “I know you’re doing what you think is best, but really, I’m not worth it. I killed that poor, loving, trusting girl so I could get her money and marry a prostitute from the Velvet Shadow. My conscience—”

The prosecutor shrugged and sat down. The usher stood up and cleared his throat. I held my breath. Nearly there.

“Gentlemen of the jury—”

But they weren’t looking at him. They weren’t looking at me, either. Slowly, with an aching heart, I turned and looked over my shoulder at the crowd in the public seats. A beautiful young woman with light brown hair and a sweet and simple smile was standing up, about two rows from the front. “Excuse me,” she said.

“Silence in court,” the usher mumbled, but you could tell he didn’t mean it.

“I’m sorry,” the lovely girl said, “but I must speak. You see, I’m this man’s wife. And I’m not dead.”

Ah well. I sat down again.

It took the prosecutor a moment to pull himself together. He stood up. “Please approach the bench,” he said.

I could hear the murmur of voices behind me. As she passed me, she turned her head and smiled. Don’t worry, the smile said, it’s going to be all right. I closed my eyes. Why is there never a brick around when you need one?

With a little gentle prompting from the prosecutor, the lovely girl gave her evidence. Her name was Onofria; here was a copy of the register of births, sealed by the City Prefect, and here was a copy of the Temple register, recording her marriage to me on the 17th Feralia, AUC 667, and here were twelve affidavits sworn by leading citizens confirming that she was who she claimed to be. The prosecutor was happy to confirm that all the seals and signatures were in order. It had all been, she went on, a silly, silly misunderstanding. Because of an illness she’d had from childhood, she had to take special medicine, which contained a small amount of hemlock. To take the taste away, she drank it mixed with honey and milk. Usually, her husband poured it for her at bed-time; on this occasion, she’d mistakenly thought he’d be out for the evening, so she took a dose herself. Later, her husband had mixed another dose for her, as usual; absent-mindedly, entirely her own silly fault, she’d drunk the second dose out of force of habit. The two doses had made her very ill. The doctor came. They took her to the Priory hospital. Her poor husband, thinking she was dead and out of his mind with grief and guilt, had gone to the Prefecture and told them he’d just poisoned his wife. But it was all a silly mistake; she’d made a full recovery, only to discover that her poor darling was on trial for murder. So, of course, she’s rushed over straight away and, well, here she was—

Case dismissed.[/div] [/div] [div class="tabPages tabPageTwo"]

[div class=sectionTitle]SAY YOU'RE GOOD [div class=songOfZipsgiv]PERSONALITY

[/div] [/div] [div class=textGoesInHere] “You cow,” I muttered.

We were walking arm in arm through the arch that leads from the law courts into the Market Square. She was still smiling. She has a lovely smile, when she’s human.

“I’m not talking to you,” she said.

“Good.”

“Honestly.” Someone I knew vaguely stopped to stare. She beamed at him and he walked on. “If you ever kill me again, I shall be seriously annoyed.”[/div]

THAT WORDS CAN FLY

HISTORY

I first met her during my brief tenure as governor-general of the Leuga Islands.

It was a very brief tenure, and when we met it was rapidly drawing to an end, mostly because the real governor had showed up unexpectedly early. I was packing to leave. I like to travel light when running for my life; a few gold bars and a handful of uncut gemstones thrown into an old satchel, and I’m good to go. I’m always extremely careful about what I take around with me. In my line of work, you have to be; you never know when you’re going to be stopped and searched. Ironically, I distinctly remember going through my bag just to make sure I wasn’t carrying anything that could possibly cause me problems later. Of course, she wasn’t in the damn bag.

I remember walking briskly down the steps of the governor’s palace, across the square and out to the private jetty, where a boat was waiting to take me to Sezanza. It was one of those dazzlingly clear blue-sky days you get in the Leugas, when everything is crisp and sharp and you feel like you could do anything. I remember feeling a nip and an itch on the back of my neck as I climbed into the boat. I thought; shame it didn’t work out, but who wants to be in a place where even the governor’s palace has got bedbugs? All in all, I was feeling pretty good about myself. I was happy.

I felt something on the back of my neck, light but definitely perceptible. I slapped the area vaguely with the flat of my hand. The warmth of the sun and the gentler rocking of the boat were wonderfully soothing, and the excitement and stress of the last few days were starting to slip away. I lay down with my back to the rail and closed my eyes.

When I woke up I was in shadow. “Hello,” I said.

She really does have a nice smile. “Hello,” she said. “I’m Onofria. Who are you?”

Good question. For the last few days I’d been the honourable Leucas Metellas. I hadn’t quite made up my mind who I was going to be in Sezanza. “I’m Buto,” I said.

She sat down beside me. She was wearing a long yellow silk dress and yellow silk slippers, embroidered with red roses. “Where are you going?”

“Sezanza,” I said. “How about you?”

“Sezanza. I’m going to stay with my aunt and uncle. They live in a little village in the hills. Parecoina.”

“What an amazing coincidence,” I said.

We never got to Parecoina. Instead, we spent three days in a grubby little inn on the outskirts of the Tanners’ Quarter in Ap’Coele, which is what passes for civilisation in Sezanza. We didn’t go out much, but there’s precious little to see in Ap’Coele.

On the morning of the fourth day I woke up early, and she wasn’t in the bed with me. I got dressed and went to look for her, and found her in the stable yard. She’d got a clay cup from somewhere. It was half filled with woodlice, crawling and scrambling over each other. She put it down on the mounting block and smiled at me.

“You’re up and about early,” I said.

She leaned forward and kissed me on the nose. “It’s such a beautiful day,” she replied. “Let’s go for a walk.”

We went down to the harbour, where the fishing boats were just setting out. “Your uncle and aunt,” I said. “They’ll be wondering where you’ve got to.”

She frowned, for some reason. “Don’t worry about them,” she said. Then she stopped. “Are you trying to get rid of me?”

It seemed such an odd thing to say. “No, of course not.”

“That’s all right, then. I’ll write to them,” she said, and the smile came back. “They’re used to me,” she added.

“I see. You do this sort of thing all the time, then?”

I’d meant it as a silly joke. “Yes,” she said. “Oh look, a cormorant.”

You know how young men are when they’re showing off; mines of useless information. “That’s a trained cormorant,” I said. “If you look closely, you can see the collar.”

“What’s that for?”

“It’s to stop them swallowing the fish. They catch them, but they can’t eat them, so they fly back home again. The fish are stuck in their throats until the fishermen pull them out.”

She gave me an odd sort of a look, one which I’ve always remembered. “Sensible arrangement,” she said.

I shrugged. “For the fisherman. I can’t really see what the bird gets out of it.”

“It’s just a bird. And anyway, the fisherman looks after it.”

“Does a bird need looking after?”

“Let’s go and paddle in the sea.”

We didn’t stay out long. A bit later, she asked me, “What are you? I mean, what do you do?”

I was sleepy, the way you are afterwards. “Oh, not much.”

“Ah. A gentleman.”

Usually I’d have said yes, that’s right, because why bother with the truth when I’d be gone in a day or so? But I said, “How about you?”

She shrugged. “I’m not anything, really.”

I’d formed my own assessment some time earlier. You have to be able to sight-read people in my line; you don’t have the luxury of finding out slowly and possibly getting it wrong. I’d figured she was a merchant’s daughter—well-dressed, not gentry, but she’d never have to work for a living; she wouldn’t be marrying some farmer, or a tradesman or craftsman. I guessed she was what’s usually termed ‘difficult’; awkward, hard to control, the sort who won’t stay home and behave nicely. Not allowed in the best families, and down the other end of the social scale they don’t have the option, too busy helping put food on the table. But a merchant’s daughter can have a few years of gadding about if she wants to, and generally no harm done. “I find that hard to believe,” I said.

“No you don’t,” she replied. “But you haven’t answered my question. What do you do?”

Don’t get me wrong. It wasn’t love or anything. But I was beginning to think that maybe three or four days wasn’t quite enough. Besides, I was in no hurry. I had a bit of money for a change, and as far as I was aware, nobody was uncomfortably hot on my trail. The truth is, I liked her. A kindred spirit, perhaps; no ties, no commitments, a leaf in the wind. And there was something else, a hint of mischief, devilment. I like that in a person. Just possibly, I thought, she might understand. And wouldn’t that be fun? Someone I could be honest with, tell the truth to. A whole new experience for me. So I took a deep breath.

“Actually,” I said, “I’m a thief.”

She nodded. “Thought so.”

I really wasn’t expecting that. “You did?”

“Mphm. Well, you’re not a merchant, or where’s your stock in trade? Not a courier, because I looked in your bag while you were asleep.” She smiled. “That’s when I thought, thief.”

“Did you really.”

Two thoughts collided in my head. First, it takes one to know one; but I dismissed that, because the contents of my bag were still there; I’d checked. I check about once an hour, on average. The other thought was; she doesn’t seem to mind, particularly.

“What sort of a thief?” she said. “Do you climb in through windows, or hit people over the head, or what?”

I couldn’t believe I was having this conversation. But it was intoxicating. “Nothing so vulgar,” I said.

“You’re a con man,” she said, and there was a sort of girlish delight in her voice.

I sort of shrugged. “That’s overstating it a bit,” I said. “What I actually do is pretend to be people. Usually government officials. I read the government gazette when they post up the new appointments, to see who’s been posted where. Then I get there first.”

“I see.” Her eyes were laughing at me. “Sort of a shape-changer.”

“That would be a very useful skill,” I said. “It’s a shame it’s not actually possible. But I manage without it.”

She nodded. “Do you wear disguises? Wigs and false beards and stuff like that?”

“No need,” I said. “All I do is ask myself, what would it be like to be so-and-so? Like an actor, I guess. I thought of being an actor once, but there’s no money in it.” I smiled. “I like money.”

“Me too,” she said.

“A shared interest,” I said, “that’s good.” Well, I thought, we’re being honest with each other, asking the sort of questions you usually don’t, so why not? I asked, “Have you got any?”

“What? Oh, money. Yes, from time to time. It’s never been a problem.”

I’d previously arrived at the conclusion that she wasn’t any of the innumerable finely-distinguished subspecies of prostitute; you can tell, almost immediately, once you get to that stage in the proceedings. Not a thief, either. Of the three vocations open to women in our enlightened society, that was two ruled out. “Are you a musician?”

“I’m sorry?”

“Singer,” I said. “Do you sing? Professionally?”

She laughed. “People might well give me money to stop,” she said.

I leaned across and kissed her mouth. “This money you get from time to time,” I said. “How do you get it? Come on,” I added, with my best smile. “You can’t say I haven’t been straight with me.”

“Oh all right, then,” she said. “I’m a witch.”

[/div] [div class="tabPages tabPageThree"]

[div class=sectionTitle]MISUNDERSTOOD [div class=songOfZipsgiv]SKILLS

[/div] [/div] [div class=textGoesInHere] Properly speaking, since I’d been acquitted, I’d have been within my rights to go to the prefecture and demand the return of all the stuff they’d taken off me when I was arrested; my entire inventory of worldly goods, as it happened—one heavy wool travelling coat, one bag containing five hundred angels in gold and a copy of Vicentius’ Garden of Entrancing Images (with pictures), not to mention the nine hundred angels’ worth of uncut rubies sewn into the lining. Somehow, though, I figured that that would be pushing my luck, something I’ve always been hesitant to do. Now there’s irony.

She was talking to me again. “It’s humiliating,” she said. “Having to go to court to reclaim you, like a lost dog or something. I wish you wouldn’t do it.”

“You can’t blame a man for trying.”

Actually, she could. “Not to mention,” she went on, “drawing attention to us. You do realise, we’re going to have to clear out again. Everybody knows who we are.”

That made me laugh out loud.

“You know what I mean,” she said irritably. “And you know what I think about being conspicuous. How much money have you got?”

“None whatsoever.”

She sighed. “How do you fancy Mezentia?”

“I don’t even know where it is.”

“It’s about as far south as you can go without getting your feet wet. About twelve hundred miles.”

She’d have been there, of course, a long time ago. She’s been everywhere. I remember we were in this ruined temple in Prochoris; circumstances had dictated that we should live rough for a while, and the locals were afraid to go inside. There was this painting on the wall—it was sheltered, and only a little bit had survived, the rest had all crumbled away centuries ago—and I looked at it and thought, I know that face. Quite a good likeness, in fact. She told me it was supposed to be Aedoea the Bringer of Death. Well, yes, I thought.

“I’m sick of traipsing around all the time,” I said.

“Whose fault is that?”

“And I hate the south. It’s so hot. Why can’t we go somewhere nice, for a change?”

I don’t like myself when I whine. I never used to do it. Play the cards you’re dealt, was always my motto; when it’s time to fold, then fold, and if you lose, well, that’s how it goes. I’m not like that now, of course.

“Fine,” she said. “We’ll go to Thuria.”

“No way in hell,” I said. A woman passing by stopped and looked at me. I lowered my voice. “It’s freezing cold and the people smell. And what could there possibly be for us in Thuria?”

“You don’t know anything about it. Actually, it’s quite nice there.” Pause. “And there’s silver mines.”

“I don’t give a shit. I refuse to spend six weeks rattling around in a coach to get to some godforsaken ice floe in the middle of nowhere.”

She sighed. “All right,” she said. “What do you want?”[/div] [/div] [/div]

OOC

basically smol intro here i dunno

song lyrics from river of gold, filler text taken from the things we do for love by k.j. parker, available here. except for the image at the top right, no images were filtered b/c i totally don't hoard monochrome art nope what're you talking about.

this ooc box stretches until it reaches 320pxs of length, if it doesn't scroll use (width: calc 100% + 0px) rather than 100% + 17px but

mobile friendly but not necessarily mobile pretty - it depends on how wide your phone is.

Say you're back Say you're good That words can fly Misunderstood And we can take hold of the past When things were nice And I knew I was loved, skies were blue And we shared the things that we had But I've made the same mistakes twice

[div class=smallOocSkies][div class=labelOocSkies]face claim

something here

[div class=smallOocSkies][div class=labelOocSkies]player

something here[/div] [div class=smallOocSkies][div class=labelOocSkies]credit[/div]

Vesuvius [/div] [/div] [/div][/div][/div]

cherub. · Feb 12, 2018

I SIMPLY CANNOT TAKE THIS
SO MANY CODING LEGENDS HERE

Alteras · Feb 12, 2018

Beauty_Belle said:
Awesome! I was confused xD But really though, that code is BOMB

Fixed!!

Emmi · Feb 12, 2018

Character Name

"Insert Quote Here"

: || Name ||

||Alias(es) ||

|| Age ||

|| Gender ||
: ||Sexuality||

||Character Alignment||

||Relatives||

||Personality||

||Bio||

||Occupation||
: ||Appearance||

||Skills & Abilities||

||Weaknesses||
: ||Hobbies||

||Quote\s||

||Theme||

||Other||

Code by Emmi

Emmi · Feb 12, 2018

~~I'm proud of my shitty work~~

fluticasone · Feb 14, 2018

And the winner for my challenge is

Alteras ! I really am blown away by how much you can fiddle with it and all the effects!

Alteras · Feb 14, 2018

Thank you very much!! Now then, let us continue the thematic prompts with the Lunar New Year.

恭喜發財，新年快樂！！！
May you have a prosperous year, Happy New Year!!!

For this prompt, you'll be using the colors often seen in a Lunar New Year festival, red and gold!! The template is any code! You are not limited to a New Year's theme, as long as you use the colors. Time limit is the end of Friday, February 16. And here is your color palette!!

rgb(232, 59, 56)

rgb(244, 101, 101)

rgb( 228, 208, 183)

rgb(211, 168, 84)

rgb(195, 117, 56)

rgb(152, 43, 56)

ewolf20 · Feb 14, 2018

oh goodie

Resource BBCode Game!

I'll keep trying, even if I'm not good enough...

forever tilted

mushy canele

❛ it's only love, nobody dies ❜

the aspiring roleplayer

I'll keep trying, even if I'm not good enough...

mushy canele

procrastination symphony

one sheep two sheep three sheep four sheep

forever tilted

❛ it's only love, nobody dies ❜

The Sleepy Prisoner

𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳

❛ it's only love, nobody dies ❜

The Sleepy Prisoner

❛ it's only love, nobody dies ❜

𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳

‘ —◆— so cry me a river of gold ”

𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳

The Sleepy Prisoner

Jumin's Bae

Jumin's Bae

mushy canele

The Sleepy Prisoner

the aspiring roleplayer

Users who are viewing this thread

Similar threads