• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Closed ► sox's laundry hamper [broken af lol] ◄

do you prefer simple, mobile friendly codes or complex codes made for monitors?

  • mobile friendly (cmon sox the future is now old man)

  • big and complex pls

  • complex AND mobile friendly step it up sox


Results are only viewable after voting.
So -- I, uh
I'm in love???
What the heck these are all so aesthetic and pretty and baHHHHhHHHHH I will be carrying these around with me for the rest of my life dangit
 
these are some of the most visually appealing yet not overcomplicated codes i've ever seen on here

they look like they smell good
your codes look like they taste good
^this is a very valid and true observation
i'm like lowkey attracted to them.. on a physical level

thank u for sharing ur great coding talent with us
 
these are some of the most visually appealing yet not overcomplicated codes i've ever seen on here

they look like they smell good

^this is a very valid and true observation
i'm like lowkey attracted to them.. on a physical level

thank u for sharing ur great coding talent with us
i’m legitimately blushing o my goodness thank you so much ;-; i’ll keep making tasty codes that also smell good for u guys
 
REVERIE - NOT MOBILE FRIENDLY

this one has some messy code tbh but it is what it is lmao both text boxes scroll, and if you hover over the image, there's a secondary image and room for a quote if you want! or just having a second face claim picture works too ~ this was the result of me not having enough work to do at my job so pls enjoy the offspring of my boredom!

[class=bkgd] position: relative; box-sizing: border-box; background: #000259; width: 740px; height: 630px; overflow: hidden; margin: auto; padding: 0; align-content: center; [/class] [class=bkgdpic] position: relative; box-sizing: border-box; background-image: url(https://media.giphy.com/media/UYBDCJjwOd9Re/giphy.gif); width: 740px; height: 630px; overflow: hidden; opacity: 0.7; margin: 0; padding: 0; align-content: center; [/class] [class=name] position: absolute; left: 55px; top: -8px; overflow: hidden; width: 294px; height: 80px; text-align: center; font-style: normal; font-weight: normal; font-size: 60px; color: #c5ecf1; align-content: center; text-shadow: 3px 3px #c24f66; [/class] [class=circlepic] position: absolute; overflow: visible; width: 245px; height: 245px; left: 75px; top: 80px; border-radius: 100%; background-image: url(https://66.media.tumblr.com/96a8d737e8d9c0a621927cd64fd25053/tumblr_nyabr9GcTP1us1c0qo1_1280.jpg); background-size: 180%; background-position: 60% 50%; border: 2px solid #c5ecf1; box-shadow: 5px 5px #c24f66; [/class] [class=circletext] position: absolute; overflow: visible; width: 100%; height: 100%; left: 0px; top: 0px; border-radius: 100%; background-image: url(https://66.media.tumblr.com/d05dfcef4f1b3486153ed5bd42e6830e/tumblr_ntf36pInAL1tchrkco1_500.gif); background-size: 250%; background-position: 60% 50%; border: 1px solid #c5ecf1; box-shadow: 5px 5px #c24f66; text-align: center; font-family: Calligraffitti; font-size: 12px; color: #c5ecf1; [/class] [class=hidden] display:none; [/class] [script class=circlepic on=mouseenter] fadeIn 0500 circletext [/script] [script class=circlepic on=mouseleave] fadeOut 0500 circletext [/script] [class=basics] position: absolute; overflow: auto; width: 330px; height: 210px; border-radius: 10px; background: #87bfd6; padding: 10px; font-size: 10px; line-height: 14px; [/class] [class=basicscontainer] position: absolute; overflow: hidden; width: 330px; height: 229px; left: 25px; top: 361px; border: 1px solid #c5ecf1; border-radius: 10px; background: #87bfd6; box-shadow: 5px 5px #c24f66; [/class] [class=pages] position: absolute; overflow: auto; width: 308px; height: 530px; border-radius: 10px; background: #87bfd6; padding: 10px; font-size: 10px; text-align: justify; line-height: 14px; [/class] [class=textcontainer] position: absolute; overflow: hidden; width: 310px; height: 545px; left: 400px; top: 45px; border: 1px solid #c5ecf1; border-radius: 10px; background: #87bfd6; box-shadow: 5px 5px #c24f66; [/class] [class=subtitle] height: 10px; display: inline-block; background: #000131; padding: 0px 4px 5px 3px; color: #c5ecf1; font-size: 10px; font-family: Source Sans Pro; font-weight: 200; box-shadow: 2px 2px #c24f66; text-transform: uppercase; margin: 2px; [/class] [class=header1] position: absolute; left: -22px; top: 336px; overflow: hidden; width: 294px; height: 60px; text-align: center; font-style: normal; font-family: Calligraffitti; font-weight: normal; font-size: 20px; color: #c5ecf1; align-content: center; text-shadow: 3px 3px #c24f66; [/class] [class=header2] position: absolute; left: 340px; top: 20px; overflow: hidden; width: 294px; height: 60px; text-align: center; font-style: normal; font-family: Calligraffitti; font-weight: normal; font-size: 20px; color: #c5ecf1; align-content: center; text-shadow: 3px 3px #c24f66; [/class] [class=credit] position: absolute; left: 260px; top: 610px; overflow: hidden; width: 225px; height: 26px; text-align: center; font-family: Segoe UI; font-style: normal; font-weight: normal; font-size: 8px; color: #730b29; [/class]
[div class=bkgd][div class=bkgdpic][/div]
[div class=name]reverie[/div]
[div class=circlepic][div class="circletext hidden"]



let's fall back in love
with the world and who we are,
and do the things we talked about
but never did before.

[/div][/div]
[div class=basicscontainer][div class=basics][div class=subtitle]full name[/div] it may be bittersweet

[div class=subtitle]nickname[/div] 'cause we're no longer seventeen

[div class=subtitle]age[/div] 23

[div class=subtitle]gender[/div] female

[div class=subtitle]sexuality[/div] bisexual

[div class=subtitle]role[/div] follow endlessly

[div class=subtitle]occupation[/div] searching

[div class=subtitle]height/weight[/div] 5'8" / 130lbs

[div class=subtitle]eye color[/div] black

[div class=subtitle]haircolor[/div] black
[/div][/div][div class=header1]how would you define me?[/div]
[div class=textcontainer][div class=pages][div class=subtitle]personality[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed augue lacus viverra. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Vestibulum lectus mauris ultrices eros. Quam nulla porttitor massa id neque. Euismod lacinia at quis risus sed vulputate odio ut enim. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Lobortis elementum nibh tellus molestie nunc non blandit massa. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Arcu non sodales neque sodales ut etiam. Sit amet cursus sit amet dictum. Mauris a diam maecenas sed. Elementum sagittis vitae et leo duis.

[div class=subtitle]likes[/div]
Augue mauris augue neque gravida in fermentum et sollicitudin ac. Semper feugiat nibh sed pulvinar proin gravida hendrerit. Accumsan lacus vel facilisis volutpat. Vel turpis nunc eget lorem dolor sed viverra ipsum. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Nunc vel risus commodo viverra. Arcu risus quis varius quam quisque id diam. Aenean pharetra magna ac placerat vestibulum. Senectus et netus et malesuada fames ac turpis egestas integer. Ornare massa eget egestas purus. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum.

[div class=subtitle]dislikes[/div]
Lobortis scelerisque fermentum dui faucibus. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed odio morbi quis commodo odio aenean sed. Quis hendrerit dolor magna eget est. Ipsum faucibus vitae aliquet nec. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Aliquam etiam erat velit scelerisque. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Porttitor eget dolor morbi non. Diam vel quam elementum pulvinar. Aliquam purus sit amet luctus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Quis viverra nibh cras pulvinar mattis nunc sed blandit libero. Tortor posuere ac ut consequat. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Risus in hendrerit gravida rutrum quisque. Condimentum vitae sapien pellentesque habitant morbi.

[div class=subtitle]strengths[/div]
Consectetur adipiscing elit duis tristique sollicitudin. In hendrerit gravida rutrum quisque. Pulvinar pellentesque habitant morbi tristique. Nulla at volutpat diam ut. Luctus venenatis lectus magna fringilla urna. Faucibus turpis in eu mi bibendum neque. Venenatis urna cursus eget nunc scelerisque viverra. Imperdiet massa tincidunt nunc pulvinar. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Fringilla urna porttitor rhoncus dolor purus non enim. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.

[div class=subtitle]weaknesses[/div]
Ipsum dolor sit amet consectetur adipiscing. Sed augue lacus viverra vitae congue. Eu tincidunt tortor aliquam nulla facilisi cras. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Praesent tristique magna sit amet purus gravida. Iaculis at erat pellentesque adipiscing commodo elit at. Eget dolor morbi non arcu risus quis varius quam quisque. Id ornare arcu odio ut sem nulla pharetra diam. Aliquam malesuada bibendum arcu vitae. Ut diam quam nulla porttitor massa id. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Maecenas volutpat blandit aliquam etiam erat. Sit amet massa vitae tortor condimentum lacinia quis. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Leo in vitae turpis massa sed elementum tempus. Urna et pharetra pharetra massa massa ultricies.

[div class=subtitle]habits[/div]
Integer feugiat scelerisque varius morbi. Quis blandit turpis cursus in hac habitasse. Enim ut sem viverra aliquet eget. Maecenas ultricies mi eget mauris pharetra et. Feugiat in ante metus dictum at tempor commodo. Amet nisl purus in mollis. Amet mattis vulputate enim nulla aliquet. Feugiat sed lectus vestibulum mattis. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Non curabitur gravida arcu ac. Risus sed vulputate odio ut enim blandit. Fermentum leo vel orci porta non pulvinar neque laoreet suspendisse. Donec ultrices tincidunt arcu non sodales neque sodales.

[div class=subtitle]quirks[/div]
Nulla facilisi etiam dignissim diam. Sodales ut etiam sit amet nisl purus in mollis nunc. Quam id leo in vitae turpis massa sed elementum tempus. Arcu bibendum at varius vel pharetra vel turpis nunc. Sed ullamcorper morbi tincidunt ornare. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Sed felis eget velit aliquet sagittis id consectetur. Duis ut diam quam nulla porttitor massa. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Neque aliquam vestibulum morbi blandit cursus risus. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Volutpat blandit aliquam etiam erat velit scelerisque. Aliquam sem et tortor consequat id porta. Pulvinar pellentesque habitant morbi tristique senectus et netus. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida.

[div class=subtitle]fears[/div]
Commodo elit at imperdiet dui accumsan sit. Duis ultricies lacus sed turpis tincidunt. Egestas sed tempus urna et pharetra pharetra massa massa. Eu volutpat odio facilisis mauris. Arcu risus quis varius quam quisque id. Sit amet risus nullam eget felis eget. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Vel turpis nunc eget lorem dolor sed viverra. Molestie nunc non blandit massa enim nec dui nunc mattis. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Cursus turpis massa tincidunt dui. Felis eget nunc lobortis mattis aliquam faucibus purus in massa. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Massa vitae tortor condimentum lacinia quis vel. Praesent semper feugiat nibh sed. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Vel elit scelerisque mauris pellentesque. Et ultrices neque ornare aenean.

[div class=subtitle]history[/div]
Augue mauris augue neque gravida in fermentum et sollicitudin ac. Semper feugiat nibh sed pulvinar proin gravida hendrerit. Accumsan lacus vel facilisis volutpat. Vel turpis nunc eget lorem dolor sed viverra ipsum. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Nunc vel risus commodo viverra. Arcu risus quis varius quam quisque id diam. Aenean pharetra magna ac placerat vestibulum. Senectus et netus et malesuada fames ac turpis egestas integer. Ornare massa eget egestas purus. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum.

[div class=subtitle]motivations[/div]
Lobortis scelerisque fermentum dui faucibus. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed odio morbi quis commodo odio aenean sed. Quis hendrerit dolor magna eget est. Ipsum faucibus vitae aliquet nec. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Aliquam etiam erat velit scelerisque. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Porttitor eget dolor morbi non.

[div class=subtitle]other[/div]
Consectetur adipiscing elit duis tristique sollicitudin. In hendrerit gravida rutrum quisque. Pulvinar pellentesque habitant morbi tristique. Nulla at volutpat diam ut. Luctus venenatis lectus magna fringilla urna. Faucibus turpis in eu mi bibendum neque. Venenatis urna cursus eget nunc scelerisque viverra. Imperdiet massa tincidunt nunc pulvinar. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Fringilla urna porttitor rhoncus dolor purus non enim. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.
[/div][/div][div class=header2]how would i define me?[/div]
[div class=credit]code by sox sox [/div]
[/div]
Code:
[nobr]
    [class=bkgd]
        position: relative;
        box-sizing: border-box;
        background: #000259;
        width: 740px;
        height: 630px;
        overflow: hidden;
        margin: auto;
        padding: 0;
                align-content: center;
    [/class]
    [class=bkgdpic]
        position: relative;
        box-sizing: border-box;
                background-image: url(https://media.giphy.com/media/UYBDCJjwOd9Re/giphy.gif);
        width: 740px;
        height: 630px;
        overflow: hidden;
                opacity: 0.7;
        margin: 0;
        padding: 0;
                align-content: center;
    [/class]
    [class=name]
        position: absolute;
        left: 55px;
        top: -8px;
        overflow: hidden;
        width: 294px;
        height: 80px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 60px;
        color: #c5ecf1;
                align-content: center;
                text-shadow: 3px 3px #c24f66;
    [/class]
    [class=circlepic]
        position: absolute;
        overflow: visible;
        width: 245px;
        height: 245px;
        left: 75px;
        top: 80px;
        border-radius: 100%;
                background-image: url(https://66.media.tumblr.com/96a8d737e8d9c0a621927cd64fd25053/tumblr_nyabr9GcTP1us1c0qo1_1280.jpg);
                background-size: 180%;
                background-position: 60% 50%;
        border: 2px solid #c5ecf1;
                box-shadow: 5px 5px #c24f66;
    [/class]
    [class=circletext]
        position: absolute;
        overflow: visible;
        width: 100%;
                height: 100%;
        left: 0px;
        top: 0px;
        border-radius: 100%;
                background-image: url(https://66.media.tumblr.com/d05dfcef4f1b3486153ed5bd42e6830e/tumblr_ntf36pInAL1tchrkco1_500.gif);
                background-size: 250%;
                background-position: 60% 50%;
        border: 1px solid #c5ecf1;
                box-shadow: 5px 5px #c24f66;
                text-align: center;
                font-family: Calligraffitti;
                font-size: 12px;
                color: #c5ecf1;
    [/class]
        [class=hidden]
                display:none;
        [/class]
        [script class=circlepic on=mouseenter]
                fadeIn 0500 circletext
        [/script]
        [script class=circlepic on=mouseleave]
                fadeOut 0500 circletext
        [/script]
    [class=basics]
        position: absolute;
        overflow: auto;
        width: 330px;
        height: 210px;
                border-radius: 10px;
                background: #87bfd6;
                padding: 10px;
                font-size: 10px;
                line-height: 14px;
        [/class]
        [class=basicscontainer]
                position: absolute;
        overflow: hidden;
        width: 330px;
        height: 229px;
        left: 25px;
        top: 361px;
        border: 1px solid #c5ecf1;
                border-radius: 10px;
                background: #87bfd6;
                box-shadow: 5px 5px #c24f66;
        [/class]
    [class=pages]
        position: absolute;
        overflow: auto;
        width: 308px;
        height: 530px;
                border-radius: 10px;
                background: #87bfd6;
                padding: 10px;
                font-size: 10px;
                text-align: justify;
                line-height: 14px;
    [/class]
        [class=textcontainer]
                position: absolute;
        overflow: hidden;
        width: 310px;
        height: 545px;
        left: 400px;
        top: 45px;
        border: 1px solid #c5ecf1;
                border-radius: 10px;
                background: #87bfd6;
                box-shadow: 5px 5px #c24f66;
[/class]
        [class=subtitle]
                height: 10px;
                display: inline-block;
                background: #000131;
                padding: 0px 4px 5px 3px;
                color: #c5ecf1;
                font-size: 10px;
                font-family: Source Sans Pro;
                font-weight: 200;
                box-shadow: 2px 2px #c24f66;
                text-transform: uppercase;
                margin: 2px;
        [/class]
    [class=header1]
        position: absolute;
        left: -22px;
        top: 336px;
        overflow: hidden;
        width: 294px;
        height: 60px;
        text-align: center;
        font-style: normal;
                font-family: Calligraffitti;
        font-weight: normal;
        font-size: 20px;
        color: #c5ecf1;
                align-content: center;
                text-shadow: 3px 3px #c24f66;
    [/class]
    [class=header2]
        position: absolute;
        left: 340px;
        top: 20px;
        overflow: hidden;
        width: 294px;
        height: 60px;
        text-align: center;
        font-style: normal;
                font-family: Calligraffitti;
        font-weight: normal;
        font-size: 20px;
        color: #c5ecf1;
                align-content: center;
                text-shadow: 3px 3px #c24f66;
    [/class]
        [class=credit]
        position: absolute;
        left: 260px;
        top: 610px;
        overflow: hidden;
        width: 225px;
        height: 26px;
        text-align: center;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 8px;
        color: #730b29;
        [/class]
[/nobr]
[div class=bkgd][div class=bkgdpic][/div]
[div class=name][font=Calligraffitti]reverie[/font][/div]
[div class=circlepic][div class="circletext hidden"][br][/br][br][/br][br][/br]
let's fall back in love
with the world and who we are,
and do the things we talked about
but never did before.

[/div][/div]
[div class=basicscontainer][div class=basics][div class=subtitle]full name[/div] it may be bittersweet

[div class=subtitle]nickname[/div] 'cause we're no longer seventeen

[div class=subtitle]age[/div] 23

[div class=subtitle]gender[/div] female

[div class=subtitle]sexuality[/div] bisexual

[div class=subtitle]role[/div] follow endlessly

[div class=subtitle]occupation[/div] searching

[div class=subtitle]height/weight[/div] 5'8" / 130lbs

[div class=subtitle]eye color[/div] black

[div class=subtitle]haircolor[/div] black
[/div][/div][div class=header1]how would you define me?[/div]
[div class=textcontainer][div class=pages][div class=subtitle]personality[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed augue lacus viverra. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Vestibulum lectus mauris ultrices eros. Quam nulla porttitor massa id neque. Euismod lacinia at quis risus sed vulputate odio ut enim. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Lobortis elementum nibh tellus molestie nunc non blandit massa. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Arcu non sodales neque sodales ut etiam. Sit amet cursus sit amet dictum. Mauris a diam maecenas sed. Elementum sagittis vitae et leo duis.

[div class=subtitle]likes[/div]
Augue mauris augue neque gravida in fermentum et sollicitudin ac. Semper feugiat nibh sed pulvinar proin gravida hendrerit. Accumsan lacus vel facilisis volutpat. Vel turpis nunc eget lorem dolor sed viverra ipsum. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Nunc vel risus commodo viverra. Arcu risus quis varius quam quisque id diam. Aenean pharetra magna ac placerat vestibulum. Senectus et netus et malesuada fames ac turpis egestas integer. Ornare massa eget egestas purus. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum.

[div class=subtitle]dislikes[/div]
Lobortis scelerisque fermentum dui faucibus. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed odio morbi quis commodo odio aenean sed. Quis hendrerit dolor magna eget est. Ipsum faucibus vitae aliquet nec. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Aliquam etiam erat velit scelerisque. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Porttitor eget dolor morbi non. Diam vel quam elementum pulvinar. Aliquam purus sit amet luctus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Quis viverra nibh cras pulvinar mattis nunc sed blandit libero. Tortor posuere ac ut consequat. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Risus in hendrerit gravida rutrum quisque. Condimentum vitae sapien pellentesque habitant morbi.

[div class=subtitle]strengths[/div]
Consectetur adipiscing elit duis tristique sollicitudin. In hendrerit gravida rutrum quisque. Pulvinar pellentesque habitant morbi tristique. Nulla at volutpat diam ut. Luctus venenatis lectus magna fringilla urna. Faucibus turpis in eu mi bibendum neque. Venenatis urna cursus eget nunc scelerisque viverra. Imperdiet massa tincidunt nunc pulvinar. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Fringilla urna porttitor rhoncus dolor purus non enim. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.

[div class=subtitle]weaknesses[/div]
Ipsum dolor sit amet consectetur adipiscing. Sed augue lacus viverra vitae congue. Eu tincidunt tortor aliquam nulla facilisi cras. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Praesent tristique magna sit amet purus gravida. Iaculis at erat pellentesque adipiscing commodo elit at. Eget dolor morbi non arcu risus quis varius quam quisque. Id ornare arcu odio ut sem nulla pharetra diam. Aliquam malesuada bibendum arcu vitae. Ut diam quam nulla porttitor massa id. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Maecenas volutpat blandit aliquam etiam erat. Sit amet massa vitae tortor condimentum lacinia quis. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Leo in vitae turpis massa sed elementum tempus. Urna et pharetra pharetra massa massa ultricies.

[div class=subtitle]habits[/div]
Integer feugiat scelerisque varius morbi. Quis blandit turpis cursus in hac habitasse. Enim ut sem viverra aliquet eget. Maecenas ultricies mi eget mauris pharetra et. Feugiat in ante metus dictum at tempor commodo. Amet nisl purus in mollis. Amet mattis vulputate enim nulla aliquet. Feugiat sed lectus vestibulum mattis. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Non curabitur gravida arcu ac. Risus sed vulputate odio ut enim blandit. Fermentum leo vel orci porta non pulvinar neque laoreet suspendisse. Donec ultrices tincidunt arcu non sodales neque sodales.

[div class=subtitle]quirks[/div]
Nulla facilisi etiam dignissim diam. Sodales ut etiam sit amet nisl purus in mollis nunc. Quam id leo in vitae turpis massa sed elementum tempus. Arcu bibendum at varius vel pharetra vel turpis nunc. Sed ullamcorper morbi tincidunt ornare. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Sed felis eget velit aliquet sagittis id consectetur. Duis ut diam quam nulla porttitor massa. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Neque aliquam vestibulum morbi blandit cursus risus. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Volutpat blandit aliquam etiam erat velit scelerisque. Aliquam sem et tortor consequat id porta. Pulvinar pellentesque habitant morbi tristique senectus et netus. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida.

[div class=subtitle]fears[/div]
Commodo elit at imperdiet dui accumsan sit. Duis ultricies lacus sed turpis tincidunt. Egestas sed tempus urna et pharetra pharetra massa massa. Eu volutpat odio facilisis mauris. Arcu risus quis varius quam quisque id. Sit amet risus nullam eget felis eget. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Vel turpis nunc eget lorem dolor sed viverra. Molestie nunc non blandit massa enim nec dui nunc mattis. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Cursus turpis massa tincidunt dui. Felis eget nunc lobortis mattis aliquam faucibus purus in massa. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Massa vitae tortor condimentum lacinia quis vel. Praesent semper feugiat nibh sed. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Vel elit scelerisque mauris pellentesque. Et ultrices neque ornare aenean.

[div class=subtitle]history[/div]
Augue mauris augue neque gravida in fermentum et sollicitudin ac. Semper feugiat nibh sed pulvinar proin gravida hendrerit. Accumsan lacus vel facilisis volutpat. Vel turpis nunc eget lorem dolor sed viverra ipsum. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Nunc vel risus commodo viverra. Arcu risus quis varius quam quisque id diam. Aenean pharetra magna ac placerat vestibulum. Senectus et netus et malesuada fames ac turpis egestas integer. Ornare massa eget egestas purus. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum.

[div class=subtitle]motivations[/div]
Lobortis scelerisque fermentum dui faucibus. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed odio morbi quis commodo odio aenean sed. Quis hendrerit dolor magna eget est. Ipsum faucibus vitae aliquet nec. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Aliquam etiam erat velit scelerisque. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Porttitor eget dolor morbi non.

[div class=subtitle]other[/div]
Consectetur adipiscing elit duis tristique sollicitudin. In hendrerit gravida rutrum quisque. Pulvinar pellentesque habitant morbi tristique. Nulla at volutpat diam ut. Luctus venenatis lectus magna fringilla urna. Faucibus turpis in eu mi bibendum neque. Venenatis urna cursus eget nunc scelerisque viverra. Imperdiet massa tincidunt nunc pulvinar. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Fringilla urna porttitor rhoncus dolor purus non enim. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.
[/div][/div][div class=header2]how would i define me?[/div]
[div class=credit]code by [USER=2383]sox[/USER][/div]
[/div]
i honestly love how this looks. ty for making these freebies!
 
can i...perchance...marry a code? marry several? just be in love with them unconditionally & possibly forever? 🥺
 
WANT - NOT MOBILE FRIENDLY

well hello there ~ you may have been wondering, "sox!! where the hell have you been?? the laundry hamper is empty!!" to that, my only answer is: i am a lazy pos :^) regardless of that, here's a code i've been designing for forever but never actually got around to coding until today c: just a heads up, the code is... l o n g and m e s s y, but i rly like how it turned out so hopefully y'all do too! all the text boxes scroll, and to change the colors, change the hex values at the top in the bkgd class! please do not remove the credit! enjoy peeps and lmk if u have any requests! c:

[class=bkgd] --main: #fff; --accent: #000; position: relative; width: 50em; height: 30em; background-color: var(--main); overflow: hidden; margin-left: auto; margin-right: auto; [/class] [class=flexcont] width: 100%; display: flex; flex-direction: row; justify-content: space-evenly; [/class] [class=accent] position: relative; background-color: var(--accent); overflow: hidden; [/class] [class=accent0] width: 100%; height: 30em; [/class] [class=accent02] width: 5%; height: 30em; margin-left: 0.75em; [/class] [class=introright] width: 100%; height: 100%; position: relative; [/class] [class=accentcont] position: relative; margin-right: auto; margin-left: auto; margin-top: 2em; width: 80%; height: 80%; [/class] [class=intropic] background: url(https://i.pinimg.com/564x/9d/de/03/9dde03561f2a6fdb70b8759b6213063d.jpg); background-size: 100%; background-position: 0% 40%; width: 100%; height: 90%; border: 0.5px solid var(--main); [/class] [class=role] position: relative; font-size: 2em; color: var(--main); text-transform: uppercase; margin-top: 0.3em; line-height: 2em; [/class] [class=name] position: absolute; font-size: 2em; color: var(--accent); text-transform: uppercase; text-align: right; transform: rotate(-90deg); width: 75%; height: auto; top: 5em; left: 6.5em; [/class] [class=accent1] width: 60%; height: 30em; [/class] [class=header1] position: relative; font-size: 2em; color: var(--main); text-transform: uppercase; margin-bottom: 0.5em; [/class] [class=pic1] position: absolute; width: 10em; height: 18em; top: 2.4em; border: 0.5px solid var(--main); [/class] [class=pic11] background: url(https://i.pinimg.com/564x/d4/4d/d3/d44dd3b19311ff872602825e4467f15c.jpg); background-size: 105%; background-position: 0% 0%; left: 22em; [/class] [class=pic12] background: url(https://i.pinimg.com/564x/01/f4/a9/01f4a9fe819a54607fd87617e45426ca.jpg); background-size: 105%; background-position: 0% 0%; left: 33em; [/class] [class=text]; font-size: 10px; line-height: 12px; text-align: justify; text-transform: lowercase; overflow: auto; [/class] [class=text1] color: var(--main); width: 28em; height: 30em; padding-right: 20px; [/class] [class=text1cont] overflow: hidden; margin-top: 1em; width: 18em; height: 30em; [/class] [class=num] color: var(--main); font-size: 90px; font-family: 'Times New Roman'; position: absolute; font-style: italic; [/class] [class=num1] left: 3.75em; top: 2.75em; [/class] [class=accent21] width: 12%; height: 30em; [/class] [class=accent22] position: absolute; width: 60%; height: 30em; top: 5em; left: 20em; [/class] [class=pic2] position: absolute; width: 10em; height: 13em; border: 0.5px solid var(--main); [/class] [class=pic21] background: url(https://i.pinimg.com/564x/10/d8/89/10d889107fe0edeaa257b2dbda5461c0.jpg); background-size: 130%; background-position: 50% 0%; top: 10em; left: 13em; [/class] [class=pic22] background: url(https://i.pinimg.com/564x/8c/05/7f/8c057fd1d99f7082d35d659c7a3fa97d.jpg); background-size: 130%; background-position: 50% 0%; top: 1em; left: 25em; [/class] [class=text2] color: var(--main); width: 35em; height: 17em; padding-right: 20px; [/class] [class=text2cont] position: absolute; top: 14.5em; left: 25em; overflow: hidden; margin-top: 1em; width: 23em; height: 12em; [/class] [class=header2] position: absolute; font-size: 2em; color: var(--accent); text-transform: uppercase; transform: rotate(-90deg); width: 75%; height: auto; top: 4.2em; left: -5em; [/class] [class=num2] left: 7.3em; top: 1em; [/class] [class=accent31] width: 70%; height: 27em; [/class] [class=header3] position: relative; font-size: 2em; color: var(--main); text-transform: uppercase; margin-bottom: 0.5em; [/class] [class=text3cont] overflow: hidden; margin-top: 1em; width: 23em; height: 36em; [/class] [class=text3] color: var(--main); width: 35em; height: 27em; padding-right: 20px; [/class] [class=pic3] position: absolute; width: 20em; height: 15em; border: 0.5px solid var(--main); [/class] [class=pic31] background: url(https://i.pinimg.com/564x/bb/8d/89/bb8d89b22de1a67061976b399660b65b.jpg); background-size: 100%; background-position: 50% 0%; top: 3em; left: 28em; [/class] [class=num3] left: 5em; top: 2.35em; [/class] [class=accent4] width: 60%; height: 30em; position: absolute; left: 20em; [/class] [class=gallerycont] width: 80%; margin-left: 2em; overflow: auto; padding-right: 8em; [/class] [class=header4] position: absolute; font-size: 2em; color: var(--accent); text-transform: uppercase; transform: rotate(-90deg); width: 75%; height: auto; top: 4.2em; left: -8.25em; [/class] [class=header5] position: absolute; font-size: 2em; color: var(--main); text-transform: uppercase; transform: rotate(90deg); width: 75%; height: auto; top: 9.65em; left: 14.2em; [/class] [class=text4cont] position: absolute; top: 10em; left: 5em; overflow: hidden; margin-top: 1em; width: 13em; height: 30em; [/class] [class=text4] color: var(--accent); width: 19em; height: 26em; padding-right: 25px; [/class] [class=num4] color: var(--accent); left: 2.5em; top: 0em; [/class] [class=tag] position: relative; display: inline; width: auto; height: auto; margin-right: 5px; color: var(--main); font-size: 9px; padding-right: 5px; text-align: center; text-transform: uppercase; font-weight: 700; text-decoration: underline; letter-spacing: 1px; [/class] [class=tagb] position: relative; display: inline; width: auto; height: auto; margin-right: 5px; color: var(--accent); font-size: 9px; padding-right: 5px; text-align: center; text-transform: uppercase; font-weight: 700; text-decoration: underline; letter-spacing: 1px; [/class] [class=tabflex] width: 6em; display: flex; flex-direction: row; justify-content: space-evenly; position: absolute; top: 28em; left: 42.5em; [/class] [class=tab] width: 3em; height: 3em; background-color: var(--accent); border: 1px solid var(--main); font-size: 0.2em; color: var(--accent); [/class] [class name=tab state=hover] background-color: var(--main); color: var(--main); transition-duration: 0.2s; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} 0) (fadeIn 500 tabsContent0) if (eq ${currentTab} 1) (fadeIn 500 tabsContent1) if (eq ${currentTab} 2) (fadeIn 500 tabsContent2) if (eq ${currentTab} 3) (fadeIn 500 tabsContent3) if (eq ${currentTab} 4) (fadeIn 500 tabsContent4) [/script] [class=credit] position: relative; overflow: hidden; width: 100%; height: 10px; text-align: center; font-style: normal; font-weight: normal; font-size: 8px; color: #dedede; opacity: 0.25; [/class] [div class=bkgd] [div class="tabsContent tabsContent0 flexcont"] [div class="accent accent0"] [div class=accentcont] [div class=intropic][/div] [div class=role]want.[/div] [/div] [/div] [div class=introright] [div class="accent accent02"][/div] [div class=name]kim taehyung.[/div] [/div] [/div] [div class="tabsContent tabsContent1" style="display: none;"] [div class="accent accent1"] [div class=accentcont] [div class=header1]basics.[/div] [div class=text1cont][div class="text text1"] [div class=tag]name[/div] kim taehyung

[div class=tag]nickname:[/div] taehyungie to close friends

[div class=tag]age:[/div] 24

[div class=tag]birthday:[/div] december 30, 1995

[div class=tag]gender:[/div] male

[div class=tag]sexuality:[/div] heterosexual

[div class=tag]role:[/div] winter bear

[div class=tag]height:[/div] 5' 10"

[div class=tag]weight:[/div] 137 lbs

[div class=tag]eye color:[/div] dark brown

[div class=tag]hair color:[/div] dark brown

[div class=tag]body type:[/div] ectomorph

[div class=tag]ethnicity:[/div] korean

[div class=tag]dist. marks:[/div] a mole on his check

[div class=tag]body mods:[/div] piercings in both ears

[div class=tag]faceclaim:[/div] kim taehyung
[/div][/div] [/div] [/div] [div class="pic1 pic11"][/div] [div class="pic1 pic12"][/div] [div class="num num1"]1.[/div] [/div] [div class="tabsContent tabsContent2" style="display: none;"] [div class="accent accent21"][/div] [div class="accent accent22"][/div] [div class=header2]persona.[/div] [div class="pic2 pic21"][/div] [div class="pic2 pic22"][/div] [div class="num num2"]2.[/div] [div class=text2cont][div class="text text2"] [div class=tag]vices[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed egestas egestas fringilla phasellus. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. A condimentum vitae sapien pellentesque habitant morbi tristique. Sit amet justo donec enim. Eleifend mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus.

[div class=tag]virtues[/div]Fermentum leo vel orci porta non pulvinar neque laoreet. Facilisis sed odio morbi quis commodo. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Quis risus sed vulputate odio ut enim blandit volutpat. Urna nunc id cursus metus aliquam eleifend mi. Pellentesque adipiscing commodo elit at. Sagittis orci a scelerisque purus semper eget.

[div class=tag]strengths[/div]Quam quisque id diam vel quam elementum pulvinar etiam. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Vulputate ut pharetra sit amet aliquam id diam maecenas ultricies. Nam libero justo laoreet sit amet cursus sit. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.

[div class=tag]weaknesses[/div]Ut porttitor leo a diam. Mauris in aliquam sem fringilla ut morbi tincidunt. Sollicitudin nibh sit amet commodo nulla. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Ac tortor dignissim convallis aenean et tortor at. Nec feugiat in fermentum posuere urna. Nibh nisl condimentum id venenatis a condimentum vitae. Scelerisque varius morbi enim nunc faucibus a pellentesque. Ligula ullamcorper malesuada proin libero. Vitae semper quis lectus nulla.

[div class=tag]fears[/div]Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Adipiscing tristique risus nec feugiat in fermentum posuere urna.

[div class=tag]ambitions[/div]Duis at consectetur lorem donec. Elementum nisi quis eleifend quam adipiscing vitae proin. Facilisis sed odio morbi quis commodo odio aenean sed. Eget nullam non nisi est. Laoreet id donec ultrices tincidunt.

[div class=tag]habits[/div]Penatibus et magnis dis parturient montes nascetur ridiculus. Praesent tristique magna sit amet purus gravida quis blandit.

[div class=tag]quirks[/div]Id aliquet risus feugiat in. Nullam non nisi est sit amet facilisis magna etiam. Nisl pretium fusce id velit. At auctor urna nunc id cursus metus aliquam. Quisque non tellus orci ac auctor augue mauris augue. Elementum pulvinar etiam non quam lacus. Accumsan lacus vel facilisis volutpat.

[div class=tag]likes[/div]Non odio euismod lacinia at quis risus sed vulputate. Augue ut lectus arcu bibendum at varius vel. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus.

[div class=tag]dislikes[/div]Sagittis orci a scelerisque purus semper eget duis. Velit sed ullamcorper morbi tincidunt. Netus et malesuada fames ac. Sed blandit libero volutpat sed cras ornare arcu dui. Vulputate enim nulla aliquet porttitor. Pellentesque id nibh tortor id aliquet lectus proin nibh.
[/div][/div] [/div] [div class="tabsContent tabsContent3" style="display: none;"] [div class="accent accent31"] [div class=accentcont] [div class=header3]background.[/div] [div class=text3cont][div class="text text3"] [div class=tag]family[/div]yeontan

[div class=tag]occupation[/div]performer, photographer, composer, saxophonist

[div class=tag]education[/div]high school degree

[div class=tag]residence[/div]some rich person apartment probably

[div class=tag]history[/div]Orci ac auctor augue mauris augue neque gravida in fermentum. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Egestas dui id ornare arcu. Maecenas sed enim ut sem viverra. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Quis vel eros donec ac odio tempor orci dapibus ultrices. Leo a diam sollicitudin tempor id eu. Scelerisque purus semper eget duis at tellus. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Non arcu risus quis varius.

Eros in cursus turpis massa tincidunt dui ut. Vitae turpis massa sed elementum tempus egestas sed. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Posuere morbi leo urna molestie. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Vel pretium lectus quam id leo in vitae turpis massa. Tellus cras adipiscing enim eu turpis egestas pretium aenean. Et tortor consequat id porta nibh venenatis. Pellentesque adipiscing commodo elit at imperdiet dui. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Adipiscing commodo elit at imperdiet dui accumsan sit. Enim ut tellus elementum sagittis vitae. Diam in arcu cursus euismod quis viverra nibh cras. Vulputate dignissim suspendisse in est ante in nibh mauris. Pellentesque elit eget gravida cum sociis natoque penatibus.
[/div][/div] [/div] [/div] [div class="pic3 pic31"][/div] [div class="num num3"]3.[/div] [/div] [div class="tabsContent tabsContent4" style="display: none;"] [div class="accent accent4"] [div class="accentcont gallerycont"]
f77e9bc6295776b8f90660ebf8e26a0a.jpg
fb0d36fbf3a800c3f8613a300291822e.jpg
9130136297200ebf967ba6eb67719496.jpg
9077ef2c8babb7ea487fc8c357bc627d.jpg
0423e30fbb2ae08da1978237a4a95587.jpg
[/div] [/div] [div class=header4]misc.[/div] [div class=header5]gallery.[/div] [div class="num num4"]4.[/div] [div class=text4cont][div class="text text4"] [div class=tagb]theme song[/div]4 o'clock by v

[div class=tagb]favorite food[/div]bang bang shrimp

[div class=tagb]favorite drink[/div]shirley temples

[div class=tagb]favorite book[/div]the ones who walk away from omelas

[div class=tagb]favorite movie[/div]avengers: endgame

[div class=tagb]favorite color[/div]purple

[div class=tagb]relationships[/div]
- one: Egestas dui id ornare arcu. Maecenas sed enim ut sem viverra.

- two: Orci ac auctor augue mauris augue neque gravida in fermentum. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam.

- three: Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Quis vel eros donec ac odio tempor orci dapibus ultrices.

- four: Leo a diam sollicitudin tempor id eu. Scelerisque purus semper eget duis at tellus. Id interdum velit laoreet id donec ultrices tincidunt arcu non.

- five: Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat.

- six: Sit amet consectetur adipiscing elit ut. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Non arcu risus quis varius.
[/div][/div] [/div] [div class=tabflex] [div class=tab]0[/div] [div class=tab]1[/div] [div class=tab]2[/div] [div class=tab]3[/div] [div class=tab]4[/div] [/div] [/div][div class=credit]code by sox sox [/div]
pastebin: xxx
 
Last edited:
bro i was taken aback at how pretty the last one is- don't get me wrong, all your codes are beautiful, but i love the simple black and white you went with
absolutely marvelous
keep making sensory appealing codes, you bbcode god
 
bro i was taken aback at how pretty the last one is- don't get me wrong, all your codes are beautiful, but i love the simple black and white you went with
absolutely marvelous
keep making sensory appealing codes, you bbcode god
some of us are trying to not cry pls and thank u ;-; thank u so much i will <3
 
for someone who had several meltdowns over this most recent code, it sure turned out nice
 

Users who are viewing this thread

Back
Top