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

[sox]

MOVE - NOT MOBILE FRIENDLY

hoo boy this code gave me grief. click the name to enter the in-character sheet, and the text scrolls c: PLEASE avoid using this code if you're looking for something quick and easy for an in character code. this has lots of little knobs and wheels to it, and you'll probably have to edit a lot of background-position properties. ALSO there is a comment in the code with relevant information if you plan on changing the picture coating the second title, so pls pay attention to it. to change the stats levels, change the width of the "pc" div in the actual div area, NOT the class! you'll see what i mean when you look at the code c: tbh tho i rly like how this looks so i hope you all do too! please do not remove the credit! enjoy and lmk if u have any requests! c:

[class=bkgd] --color1: #010714; --color2: #073948; --color3: #3492A4; --color4: #A1CDD4; --color5: #dff2f2; --texture: url(https://previews.123rf.com/images/epicstockmedia/epicstockmedia1602/epicstockmedia160200012/52185149-abstract-ocean-water-texture.jpg); --splash: url(https://i.pinimg.com/originals/65/3f/05/653f0597749350164f2197714c23aeef.jpg); --pic1: url(https://i.pinimg.com/originals/ef/4f/cd/ef4fcd7c5bfae0948894682d8bb55467.gif); --pic2: url(https://i.pinimg.com/originals/00/9c/51/009c517ffc3ca8fab35a4c2f28aee2ff.gif); --pic3: url(https://i.pinimg.com/originals/61/25/ce/6125ce51adc565d48ba101ce684364fa.gif); --outfit: url(https://i.pinimg.com/474x/c8/37/1e/c8371e5b6552c8bcec1ffff2b5c5b1a5.jpg); position: relative; margin-left: auto; margin-right: auto; width: 800px; height: 490px; background-color: var(--color1); border-radius: 5px; overflow: hidden; cursor: url('https://i.imgur.com/FMvuswx.png'), auto; [/class] [class=name] position: absolute; width: auto; height: auto; font-size: 90px; line-height: 72px; left: 30px; top: 27px; text-transform: uppercase; font-weight: 900; font-family: 'Hammersmith One', sans-serif; font-style: black; letter-spacing: 10px; background: var(--texture); background-size: cover; -webkit-text-fill-color: transparent; -webkit-background-clip: text; [/class] [class=role] position: absolute; width: 50%; height: 25px; font-size: 20px; line-height: 25px; left: 30px; top: 103px; color: var(--color3); text-transform: uppercase; font-weight: 900; font-family: 'Hammersmith One', sans-serif; font-style: italic; letter-spacing: 2px; overflow: hidden; text-align: left; [/class] [class=pic] position: absolute; width: 110px; height: 70px; top: 170px; border-radius: 5px; [/class] [class=pic1] background: var(--pic1); background-size: 200%; background-position: 40% 50%; left: 30px; [/class] [class=pic2] background: var(--pic2); background-size: 100%; background-position: 50% 50%; left: 150px; [/class] [class=pic3] background: var(--pic3); background-size: 100%; background-position: 50% 50%; left: 270px; [/class] [class=outfitpic] position: absolute; width: 90px; height: 110px; top: 290px; left: 290px; border-radius: 5px; background: var(--outfit); background-size: 100%; background-position: 0% 100%; [/class] [class=chip] position: absolute; width: auto; height: 18px; text-align: center; text-transform: uppercase; color: var(--color4); font-size: 12px; line-height: 22px; left: 30px; border: 0.5px solid var(--color3); padding: 0px 5px 0px 5px; border-radius: 3px; font-family: 'Josefin Sans', sans-serif; [/class] [class=header] position: absolute; width: auto; height: auto; text-align: left; text-transform: uppercase; color: var(--color3); font-size: 10px; line-height: 22px; left: 30px; font-family: 'Josefin Sans', sans-serif; [/class] [class=info] position: absolute; height: 20px; text-align: left; text-transform: uppercase; color: var(--color3); font-size: 10px; line-height: 22px; font-family: 'Josefin Sans', sans-serif; overflow: hidden; [/class] [class=button] position: absolute; width: 100%; height: auto; text-align: center; top: 390px; font-size: 50px; color: var(--color3); transition-duration: 0.3s; text-transform: uppercase; font-weight: 900; font-family: 'Hammersmith One', sans-serif; font-style: black; letter-spacing: 10px; [/class] [class name=button state=hover] color: var(--color4); font-size: 55px; top: 385px; transition-duration: 0.3s; [/class] [class=texturebar] position: absolute; width: 100%; height: 380px; background: var(--splash); background-size: 100%; [/class] [class=textcontainer] position: absolute; width: 400px; height: 290px; left: 410px; top: 140px; overflow: hidden; [/class] [class=text] position: relative; width: 380px; height: 290px; font-size: 10px; line-height: 14px; color: var(--color5); text-align: justify; white-space: pre-wrap; overflow: auto; padding-right: 70px; font-family: 'Quicksand', sans-serif; [/class] [class=pc] position: relative; height: 100%; [/class] [class=progressouter] position: absolute; overflow: hidden; left: 30px; background-color: var(--color2); width: 240px; height: 3px; border-radius: 50px; [/class] [class=progressinner] position: absolute; background-color: var(--color4); height: 100%; border-radius: 50px; [/class] [class=progressanimation] animation: {post_id}loading 1s; animation-fill-mode: forwards; animation-delay: 1s; [/class] [class=hidden] display: none; [/class] [class=charactercontent] display: none; [/class] [class=headercontent] display: none; [/class] [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.2; [/class] [animation=loading] [keyframe=0]width: 0%;[/keyframe] [keyframe=100]width: 100%;[/keyframe] [/animation] [script class=button on=click] fadeOut 100 splashcontent fadeIn 500 headercontent fadeIn 1000 charactercontent addClass progressanimation progressinner [/script] [div class=bkgd] [div class="button splashcontent"]lee taemin[/div] [div class="texturebar splashcontent"][/div] [div class="name headercontent"]lee taemin.[/div] [div class="role headercontent"]move — you got the rhythm.[/div] [div class="chip charactercontent" style="top: 140px;"] visuals[/div] [div class="pic pic1 headercontent"][/div] [div class="pic pic2 headercontent"][/div] [div class="pic pic3 headercontent"][/div] [div class="chip charactercontent" style="top: 260px;"] current stats[/div] [div class="header charactercontent" style="top: 285px;"] health[/div] [div class="progressouter charactercontent" style="top: 305px;"] [div class=pc style="width: 80%;"][div class=progressinner][/div][/div] [/div] [div class="header charactercontent" style="top: 315px;"] magic energy[/div] [div class="progressouter charactercontent" style="top: 335px;"] [div class=pc style="width: 40%;"][div class=progressinner][/div][/div] [/div] [div class="header charactercontent" style="top: 345px;"] strength[/div] [div class="progressouter charactercontent" style="top: 365px;"] [div class=pc style="width: 60%;"][div class=progressinner][/div][/div] [/div] [div class="header charactercontent" style="top: 375px;"] ammunition[/div] [div class="progressouter charactercontent" style="top: 395px;"] [div class=pc style="width: 10%;"][div class=progressinner][/div][/div] [/div] [div class="chip charactercontent" style="top: 260px; left: 290px;"] outfit[/div] [div class="outfitpic charactercontent"][/div] [div class="chip charactercontent" style="top: 105px; left: 410px;"] in character[/div] [div class="chip charactercontent" style="top: 418px; left: 30px;"] location[/div] [div class="info charactercontent" style="top: 418px; left: 130px; width: 290px;"]not a single facial expression[/div] [div class="chip charactercontent" style="top: 443px; left: 30px;"] tags[/div] [div class="info charactercontent" style="top: 443px; left: 95px; width: auto;"]not a single sentence can express all of you, because we're perfect just the way we are[/div] [div class="textcontainer charactercontent"][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Urna cursus eget nunc scelerisque viverra mauris in aliquam sem. Sed augue lacus viverra vitae congue eu. Elementum nisi quis eleifend quam adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Accumsan in nisl nisi scelerisque eu. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Platea dictumst vestibulum rhoncus est pellentesque. Justo laoreet sit amet cursus sit amet dictum. Tristique magna sit amet purus gravida. Felis imperdiet proin fermentum leo vel orci porta. Feugiat nibh sed pulvinar proin gravida. Convallis convallis tellus id interdum. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nulla pellentesque dignissim enim sit amet venenatis urna. Dignissim enim sit amet venenatis urna cursus eget. Dui sapien eget mi proin sed libero. Viverra accumsan in nisl nisi scelerisque eu. Aliquam etiam erat velit scelerisque in. Bibendum neque egestas congue quisque egestas diam in arcu. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Lobortis scelerisque fermentum dui faucibus in. Pharetra pharetra massa massa ultricies mi quis hendrerit. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Interdum velit euismod in pellentesque massa placerat. Mattis enim ut tellus elementum sagittis vitae. Ut consequat semper viverra nam libero. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Pretium lectus quam id leo in vitae turpis. Vitae congue mauris rhoncus aenean. Sagittis eu volutpat odio facilisis mauris sit. Eu augue ut lectus arcu bibendum at varius vel. Dolor sed viverra ipsum nunc. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Semper quis lectus nulla at volutpat diam. Velit egestas dui id ornare arcu odio. Vitae congue mauris rhoncus aenean vel elit scelerisque. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Blandit libero volutpat sed cras ornare arcu dui vivamus arcu. Bibendum arcu vitae elementum curabitur. Lacus laoreet non curabitur gravida arcu ac tortor dignissim. Ultricies tristique nulla aliquet enim. Tellus molestie nunc non blandit massa enim nec. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Libero volutpat sed cras ornare. Ornare suspendisse sed nisi lacus. Vel pharetra vel turpis nunc eget. Varius quam quisque id diam vel quam elementum. Dolor sit amet consectetur adipiscing elit ut aliquam. Tristique et egestas quis ipsum suspendisse ultrices. Lacus sed viverra tellus in hac habitasse platea dictumst vestibulum. Sed velit dignissim sodales ut eu sem integer vitae justo. Dui nunc mattis enim ut tellus. Orci sagittis eu volutpat odio facilisis mauris sit. Massa sapien faucibus et molestie ac feugiat. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Viverra nam libero justo laoreet sit amet cursus sit amet. Suspendisse in est ante in nibh mauris cursus. Placerat in egestas erat imperdiet sed euismod nisi porta. Risus nullam eget felis eget nunc. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Et molestie ac feugiat sed lectus. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Cras semper auctor neque vitae. Sodales ut eu sem integer vitae justo eget. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Bibendum at varius vel pharetra vel turpis nunc eget. Eget est lorem ipsum dolor sit. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Tristique sollicitudin nibh sit amet. Varius quam quisque id diam vel quam elementum. Mi proin sed libero enim sed faucibus turpis. Quam nulla porttitor massa id neque aliquam vestibulum morbi. Elit pellentesque habitant morbi tristique senectus et. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Dictum varius duis at consectetur lorem donec massa. At risus viverra adipiscing at in tellus. Porttitor eget dolor morbi non arcu risus quis. Amet venenatis urna cursus eget nunc scelerisque viverra mauris in. Id aliquet lectus proin nibh nisl condimentum id venenatis a. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Ultrices mi tempus imperdiet nulla malesuada. Massa vitae tortor condimentum lacinia. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Egestas congue quisque egestas diam. Purus sit amet luctus venenatis lectus. [/div][/div] [/div] [div class=credit]code by sox [/div]

pastebin: xxx​

 

[electric]

you are so so so so so so so talented!

 

[sox]

you are so so so so so so so talented!

oh gosh thank you!! im only just learning still but i appreciate you saying so

 

[Virus]

Ahhhhhhhhhh, I'm so astonished!
I'm going to dive in The hamper, and admire these
*dives, faceplants*

 

[sox]

Ahhhhhhhhhh, I'm so astonished!
I'm going to dive in The hamper, and admire these
*dives, faceplants*

ahhh thank you!! i hope you like them C:

 

[blackout]

sorry but the way the stat bars filled up? i cried

 

[sox]

sorry but the way the stat bars filled up? i cried

UR MAKING ME CRY TF lowkey tho it took my dumb stupid smolbrain too long to figure out how to animate them properly

 

[Virus]

Are requests free?
If so, may I submit one?
Mobile friendly please

 

[sox]

Are requests free?
If so, may I submit one?
Mobile friendly please

yes, i take requests for no cost! i'll make a proper request thread another time, but for now, the information i need is:

• what type of code (in character, interest check, character sheet, etc.)?
• vertical or horizontal (vertical is easier to make mobile friendly, as a heads up!)?
• how many tabs (if applicable)?
• how many pictures?
• do you have a color scheme in mind?

 

[Virus]

Spoiler: request

Character sheet
Vertical
4
4, if it fits
Black, purples and pinks.

Extra piece to skeleton.
If you could, make it a hacker scene. If not cause of my restriction of mobile, it's ok. Ill take any code request ^^

I hope this works, for putting it here. If it's supposed to be in messages, I apologize for not asking that ^^
I'd love to see what you come up with, sock bb

 

[sox]

well, it is what it is!

i would like to say that i'll still post codes using purely bbcode, but to be honest with you, i only learned to
code by writing html/css and translating it into bb+. in other words, i only ever learned how to code using
bb+, so i'll have to go back and research all the parts of bbcode that were replaced with bb+ and
figure it out from there if i want to keep putting out freebies (which i'd make a new thread for).

ofc i'll leave all of these up in case bb+ ever does come back! and i hope it does, bc while i'm perfectly
okay not coding my rp posts, putting out freebies was one of my favorite parts of rpn ;-; regardless, i loved
seeing how you guys used my codes (yes, i looked at every single one!!) and all the great feedback i got c:

but wait, there's more! even though coding isn't gonna be as big of a thing here anymore, i was thinking of
making some coding tutorials for people who just want to learn html/css/javascipt! ik the admins said they might
implement that in the future, but even if its not for rpn, knowing front-end code is super useful and boosts your resume!
if that's something you guys might be interested in, i'll definitely get around to doing that for you lovelies c:

until then, thank you so so so much for all the love i've received on this thread! i really didn't expect so many of
you to use my codes and my heart got so happy every time i saw them ;-;

love you guys!
~ sox ♡
​

 

[neon reverie]

thank you for dedicating so much time and effort in your codes !! each and every one of them are absolutely amazing and I could not be more thankful for having such a talented coder like you here on rpn sharing her work
i'm also extremely happy to hear that you will still be posting codes using normal bb-codes and am without a doubt that you are able to create something as wonderful with it as you did with bb code+

stay amazing sox !!

P.S I would definitely be interested in receiving a tutorial on html/css/java-script c:

 

[sox]

thank you for dedicating so much time and effort in your codes !! each and every one of them are absolutely amazing and I could not be more thankful for having such a talented coder like you here on rpn sharing her work
i'm also extremely happy to hear that you will still be posting codes using normal bb-codes and am without a doubt that you are able to create something as wonderful with it as you did with bb code+

stay amazing sox !!

P.S I would definitely be interested in receiving a tutorial on html/css/java-script c:

i wasn't supposed to cry today wth ;-; i'll do my best!!!

 

[neon reverie]

i wasn't supposed to cry today wth ;-; i'll do my best!!!

ajsdbj sorrybutnotsorry
you deserve to hear the truth !! i don't know what i would have done without your codes brightening up my posts and character sheets.
i'm 100% sure your talent will spark through, no matter which coding format you use

 

[calypso]

I'm saddened to see that BBCode will be gone soon, but I'm glad I was able to see such lovely coding from creators like you!

 

[thirteen]

i've been on an unofficial hiatus from rpn and just returned, and i'm big sad about bb+ and your codes ;-;

thanks so much for your time and dedication, not only for creating these wonderful codes for us to use, but also giving us step by step lessons. I have a whole google drive folder dedicated to your videos, learning your tips and tricks. seriously.

(ur still a brat tho lmfao)

 

[Virus]

I'm so upset about The language going away cause your codes is what Keeps The site experimenting with more. It Will be a hard challenge in The long Run, but all Of this is just part Of The site. As a site ages like we do, we get diseases And such, just like a site, and sometimes like we do, a site loses things along the way.

I know this site is old cause I've seen posts from 2008 in the archives, way before I even knew the internet existed! But, just because it's a site, doesn't mean there's no obstacles, I know we can pull through this strong. It also gives us new tools and other languages to explore. Lets find a treasure of new codes to explore despite this hard time. I hope you stay awesome and keep making your beautiful codes, sox

 

[sox]

i've been on an unofficial hiatus from rpn and just returned, and i'm big sad about bb+ and your codes ;-;

thanks so much for your time and dedication, not only for creating these wonderful codes for us to use, but also giving us step by step lessons. I have a whole google drive folder dedicated to your videos, learning your tips and tricks. seriously.

(ur still a brat tho lmfao)

YOU'RE THE CUTEST EVER BYE ;-;

I'm so upset about The language going away cause your codes is what Keeps The site experimenting with more. It Will be a hard challenge in The long Run, but all Of this is just part Of The site. As a site ages like we do, we get diseases And such, just like a site, and sometimes like we do, a site loses things along the way.

I know this site is old cause I've seen posts from 2008 in the archives, way before I even knew the internet existed! But, just because it's a site, doesn't mean there's no obstacles, I know we can pull through this strong. It also gives us new tools and other languages to explore. Lets find a treasure of new codes to explore despite this hard time. I hope you stay awesome and keep making your beautiful codes, sox

oh you're so sweet ~ i'll try and learn as quick as i can!

 

[calypso]

stalker...