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

    Remember to credit artists when using work not your own.

Resource ᴘʀᴏᴊᴇᴄᴛ ʀᴇᴡɪɴᴅ <<

RI.a

"愛を知りたいのです."

re: project REWIND
hello everyone! welcome to project rewind; a bbcode workshop. as many of you know, we are going to have to say goodbye to the beloved bbcode+ for now, but i trust our very talented and hardworking admin committee will be bringing it back with even more capabilities in the future. so while we wait, i decided to start a thread for the new chapter of rpn coding. there are a couple of amazing coders rapidly producing bbcode friendly and super aesthetic codes, so check them out too! ok, moving on to what you are actually here for-- codes. this code is also available below for a super clean interest check or wtv you wish to use it for. before you take them and go on your merry way, i would appreciate it if you could read what i have to say first. (:

working conditions <<

i am entirely self-taught! my first experience coding was on rpn, mostly using bbcode+ and very limited knowledge of css. i will be re-learning with bbcode and try my best at producing pleasant codes for everyone, but do bear with me if stuff breaks etc. do let me know if they do and i'll do my best to fix them or suggest a faster, cleaner way to achieve stuff (:
i am working full-time so this thread will most likely not be updated as frequently as i would like to and so will not be taking requests.
i render my codes on a 13-inch mac on chrome with the default theme at 100%. apologies if i mis-colour text and backgrounds.
i get inspired by pictures, anime, shows and of course rps so this thread won't have a definite 'theme' to it. i'll be experimenting with different styles i.e. cool cinematic sheets, cute teeny codes, sleek and simple ones etc i hope you'll find one that you like (:

rules <<

all codes are free to use! please do not remove credit if there is one (i say if because i foresee making simple ones that i wouldn't bother signing lol)
feel free to change properties but i ask that you limit these changes to images, colour and text. do not claim them as your own if you do.
go ahead and break the codes apart to learn but do not ask me to fix them if it breaks.

media queries <<

unfortunately, i will not be focussing on making every code (especially large ones) adaptable to all screen sizes yet.
do keep a look out for those that are mobile-friendly and if i do find a way to make everything look acceptable on phones i may come back and edit them but there's always desktop mode on mobile chrome hehe
i'll be marking codes that are mobile-friendly with a and those that aren't with a

completed <<

01 project rewind | interest check | code here |
02 mandarin cat | character sheet | code here |
03 be kind | ic post | code here |
04 e-passport | character sheet | code here |
05 crossing cs | character sheet | code here |
06 crossing ic | ic post | code here |
code by RI.a
 
Last edited:
02 mandarin cat
02 mandarin cat <<
character sheet | rows & columns | hidden scrolls

can you tell my fav boy is kyo? haha i've enjoyed this manga and anime in my teen years and i'm so glad they redid it last year and i'm enjoying it all over again :') what do you think of furuba? have you read the manga or seen the old/new anime? anyway, this here code is GIGANTIC; lots of space to give life to your character! there's 2 hidden scrolls at persona and bio sections. i tried to center it, but i think it's still towards the left for bigger screens. it is also not a 100% mobile-friendly as some text is still being cut off, but it tiles up nicely thanks to the default rows and columns. hope you like it!

Honda Tohru

nickname: xxx
age: xxx
gender: xxx
pronouns: xxx
race: xxx
hometown: xxx
occupation: xxx
school: xxx
grade: xxx

requisite

height: xxx
weight: xxx
build: xxxx
hair color: xxx
hair: length: xxx
eye color: xxx
skin tone: xxx
distinguishing feature: xxx
artist: juwei

appearance

stat:
stat:
stat:
stat:
stat:


stats


likes: xxx
dislikes: xxx
hobbies: xxx
fears: xxx
quirks: xxx
habits: xxx
others: xxx
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim sapien eu nunc rhoncus, ac fermentum lacus dignissim. Suspendisse consectetur urna quis quam finibus ultricies ac sed nulla. Phasellus at consectetur velit. Sed consectetur dui sed sapien consequat ullamcorper. Phasellus ac condimentum arcu. Sed sagittis placerat metus, et tincidunt nunc viverra porttitor. Aliquam tempus erat sed mattis vehicula. Curabitur vel mollis elit. Sed nisi libero, consequat et neque ac, dictum bibendum lectus.

Cras et interdum nunc, et tempor justo. Maecenas imperdiet, turpis non consectetur bibendum, sapien augue rhoncus elit, sed pharetra justo arcu ac lectus. Sed efficitur mattis metus et pharetra. Suspendisse eu arcu nisl. Phasellus sed dolor varius dui interdum posuere. Curabitur scelerisque diam id libero tempus, at dignissim velit aliquet. Maecenas lobortis, purus at fermentum vehicula, ante ligula convallis magna, at ullamcorper risus mauris ut ipsum. Cras non nulla sed lectus porta lacinia non porta nunc. Etiam cursus diam sed ipsum tempor egestas. In hac habitasse platea dictumst. Integer in sapien id velit fermentum viverra. Maecenas viverra euismod volutpat.
personality

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim sapien eu nunc rhoncus, ac fermentum lacus dignissim. Suspendisse consectetur urna quis quam finibus ultricies ac sed nulla. Phasellus at consectetur velit. Sed consectetur dui sed sapien consequat ullamcorper. Phasellus ac condimentum arcu. Sed sagittis placerat metus, et tincidunt nunc viverra porttitor. Aliquam tempus erat sed mattis vehicula. Curabitur vel mollis elit. Sed nisi libero, consequat et neque ac, dictum bibendum lectus.

Cras et interdum nunc, et tempor justo. Maecenas imperdiet, turpis non consectetur bibendum, sapien augue rhoncus elit, sed pharetra justo arcu ac lectus. Sed efficitur mattis metus et pharetra. Suspendisse eu arcu nisl. Phasellus sed dolor varius dui interdum posuere. Curabitur scelerisque diam id libero tempus, at dignissim velit aliquet. Maecenas lobortis, purus at fermentum vehicula, ante ligula convallis magna, at ullamcorper risus mauris ut ipsum. Cras non nulla sed lectus porta lacinia non porta nunc. Etiam cursus diam sed ipsum tempor egestas. In hac habitasse platea dictumst. Integer in sapien id velit fermentum viverra. Maecenas viverra euismod volutpat.

Nulla interdum libero in augue lobortis, vitae sodales neque efficitur. Duis dolor leo, auctor maximus ante vel, facilisis malesuada mi. Nunc eu leo at mi congue aliquet sed vel eros. Nullam quis quam ornare turpis pulvinar viverra quis in enim. Sed lacinia ut quam id tincidunt. Integer sollicitudin, felis sollicitudin mollis consequat, odio purus sagittis erat, in molestie purus tortor in augue. Fusce vitae ex lectus. Sed eget eros ac augue rhoncus cursus. Aenean sem ipsum, venenatis nec est iaculis, ultricies sagittis lacus. In porta vulputate tellus quis bibendum. Morbi facilisis suscipit quam vitae interdum. Aenean egestas turpis lacus, at blandit urna consectetur sit amet. Cras dictum mauris ut velit maximus tempus. Aenean vitae tincidunt nibh. Nunc vel metus purus.

Pellentesque fringilla dolor eget ornare molestie. Maecenas interdum justo sed urna sollicitudin elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam eleifend scelerisque lorem sed interdum. Quisque ut felis ultricies, convallis augue quis, fermentum lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et sollicitudin urna. Ut pretium scelerisque justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus interdum lectus vitae placerat. Sed luctus magna non urna malesuada, eget blandit lectus auctor. In tempus ex viverra tortor tincidunt lacinia. Proin volutpat libero at turpis suscipit viverra. Etiam id turpis rhoncus, auctor turpis eu, maximus lectus. Integer luctus mi felis, fermentum tempor est mattis eu.
biography

code by RI.a
 




03 be kind << code here |
IC post| hidden scroll | flex boxes | filters

yes, i am addicted to the song by marshmello & halsey. anyway, this is mobile friendly thanks to the wondersof flex! YAY or at least it is on my phone. please let me know if it isn't! it's a relatively simple code, but i wanted to share anyway. there's a hidden scroll at the text and you can add tags at the bottom. the images also uses filter: sepia(XX%); feel free to toggle this! shout if you've got any questions. enjoy! (:








Be Kind
Wanna believe, wanna believe
That you don't have a bad bone in your body
But the bruises on your ego make you go wild, wild, wild, yeah
Wanna believe, wanna believe
That even when you're stone cold, you're sorry
Tell me why you gotta be so out of your mind, yeah

I know you're chokin' on your fears
Already told you I'm right here
I will stay by your side every night

I don't know why you hide from the one
And close your eyes to the one
Mess up and lie to the one that you love
When you know you can cry to the one
Always confide in the one
You can be kind to the one that you love

I know you need, I know you need
The upper hand even when we aren't fighting
'Cause in the past, you had to prepare every time, yeah
Don't wanna leave, don't wanna leave
But if you're gonna fight then do it for me
I know you're built to love, but broken now, so just try, yeah

I know you're chokin' on your fears
Already told you, I'm right here
I will stay by your side every night

I don't know why you hide from the one
And close your eyes to the one
Mess up and lie to the one that you love
When you know you can cry to the one
Always confide in the one
You can be kind to the one that you love

I know it's hard for you, but it's not fair
Going sick in the head tryna get you there
And I know it's hard for you, but it's not fair
It's not fair

I don't know why you hide from the one
And close your eyes to the one
Mess up and lie to the one that you love
When you know you can cry to the one
Always confide in the one
You can be kind to the one that you love






Location:
Mood:
Tags:

code by RI.a
 




04 e-passport << code here |
cs | tabs | hidden scroll | gallery space | fa-spin

passports of a cyberpunk/dystopian world idk? haha but anyway tabs! the serial number gibberish are the tabs hahaha feel free to change it but i don't recommend having long words there. maybe max of 6 characters each. there's hidden scroll in the picture on the left and all the content. also made use of the fa-spin i thought it was cool but remove it if you don't ._. you can add as many pictures in the gallery portion, just copy the relevant tags and replace the image link. ALSO there's a sigil at the bottom right since passports have their respective country's C: toggle the opacity to your liking! anyway i hope you like it! (:

p.s. might make a dark theme version of this?




Height: xxx
Weight: xxx
Hair color: xxx
Eye color: xxx
Distinguishing feature: xxx
Tattoo(s): xxx
Style: xxx
Faceclaim/Artist: WLOP





  • Name: xxx
    Nickname/Alias: xxx
    Age: xxx
    Gender: xxx
    Ethnicity: xxx
    Sexuality: xxx
    Hometown: xxx
    Occupation: xxx









N9TT

9G0A

B7FQ

RANC



code by RI.a
 




05 crossing cs << code here |
cs | accordion | hidden scrolls | flex

anyone else still obsessed with acnh? i definitely am hahaha so i finally tried messing around with accordions, thanks to Fyuri's tutorial. This is unfortunately not entirely mobile-friendly and i don't really like how the layout shifts when you collapse all the accordions. gosh i miss the min/maxWidth haha i hope you like it anyway :p enjoy!


name here


quote here? this box also has a hidden scroll!



profile
Full Name: xxx
Nickname/Alias: xxx
Age: xxx
Gender: xxx
Race: xxx
Sexuality: xxx
Hometown: xxx
Occupation: xxx
Timezone: xxx
Northern/Southern Hemisphere: xxx
Reason for xxx: xxx
Current Debt: $$$$$

WjLpNEQ.png
Appearance
Written Description:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis nisi vel ex vehicula volutpat. Sed et hendrerit massa, sed varius turpis. Nullam eget lorem quam. Nullam nec libero elit. Pellentesque vitae euismod urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed consequat est lorem, at fermentum nibh auctor sodales. Nulla aliquam sapien vel purus dapibus eleifend. Donec aliquet nunc sit amet lorem placerat, in sagittis nisi scelerisque. Fusce condimentum libero sit amet dignissim convallis. Nullam commodo odio sed nibh sollicitudin tempor.
Faceclaim/Artist: echoianart
Character Creator: Mayor Maker by kyoosh

personality
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis nisi vel ex vehicula volutpat. Sed et hendrerit massa, sed varius turpis. Nullam eget lorem quam. Nullam nec libero elit. Pellentesque vitae euismod urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed consequat est lorem, at fermentum nibh auctor sodales. Nulla aliquam sapien vel purus dapibus eleifend. Donec aliquet nunc sit amet lorem placerat, in sagittis nisi scelerisque. Fusce condimentum libero sit amet dignissim convallis. Nullam commodo odio sed nibh sollicitudin tempor.

Donec molestie consequat nibh at rutrum. Nunc quis sem a felis facilisis mattis. Donec a pulvinar ligula. Vestibulum vehicula, lacus a commodo porta, mauris sem elementum velit, et luctus ligula purus nec orci. Curabitur vestibulum orci diam, eu placerat quam ultrices a. Sed velit dolor, vestibulum finibus lobortis eu, dignissim non massa. Nulla facilisis massa semper tincidunt suscipit.
biography
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis nisi vel ex vehicula volutpat. Sed et hendrerit massa, sed varius turpis. Nullam eget lorem quam. Nullam nec libero elit. Pellentesque vitae euismod urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed consequat est lorem, at fermentum nibh auctor sodales. Nulla aliquam sapien vel purus dapibus eleifend. Donec aliquet nunc sit amet lorem placerat, in sagittis nisi scelerisque. Fusce condimentum libero sit amet dignissim convallis. Nullam commodo odio sed nibh sollicitudin tempor.

Donec molestie consequat nibh at rutrum. Nunc quis sem a felis facilisis mattis. Donec a pulvinar ligula. Vestibulum vehicula, lacus a commodo porta, mauris sem elementum velit, et luctus ligula purus nec orci. Curabitur vestibulum orci diam, eu placerat quam ultrices a. Sed velit dolor, vestibulum finibus lobortis eu, dignissim non massa. Nulla facilisis massa semper tincidunt suscipit.
islanders
MfsVM8Q.jpg
Name
Quisque vitae ex posuere, consectetur ligula at, tempor nunc. Mauris ut nunc non orci rutrum bibendum sit amet ut turpis. Nullam aliquam fermentum urna, in laoreet velit. Suspendisse finibus mauris in diam tristique, nec tempus quam vulputate

rddVlte.jpg
Name
Quisque vitae ex posuere, consectetur ligula at, tempor nunc. Mauris ut nunc non orci rutrum bibendum sit amet ut turpis. Nullam aliquam fermentum urna, in laoreet velit. Suspendisse finibus mauris in diam tristique, nec tempus quam vulputate

o6zqP3a.jpg
Name
Quisque vitae ex posuere, consectetur ligula at, tempor nunc. Mauris ut nunc non orci rutrum bibendum sit amet ut turpis. Nullam aliquam fermentum urna, in laoreet velit. Suspendisse finibus mauris in diam tristique, nec tempus quam vulputate

GejVr3g.jpg
Name
Quisque vitae ex posuere, consectetur ligula at, tempor nunc. Mauris ut nunc non orci rutrum bibendum sit amet ut turpis. Nullam aliquam fermentum urna, in laoreet velit. Suspendisse finibus mauris in diam tristique, nec tempus quam vulputate


code by RI.a
 




06 crossing ic << code here |
ic | hidden scrolls | flex

what?! another code? and a matching one?? lol yes long story short, i de-stress by making codes and I've been fiddling around with it the past few weeks (especially the cs one) but i also get stress if it doesn't turn out the way i want it to then i take a break and repeat the whole cycle. anyone else? just me? huh.. anyway the tag box scrolls as well so go crazy :p


name here
interacting with: raymond
season: winter
equipment: fishing rod
mood: joy


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus magna, varius sit amet quam et, mattis egestas ipsum. Nam aliquet sapien dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec mauris lectus, consectetur ut dolor ut, interdum pulvinar nunc. Mauris et sodales nulla, ut mattis ante. Curabitur dictum finibus massa at auctor. Suspendisse convallis, arcu tristique commodo interdum, turpis augue tempor orci, at convallis est dolor in ante. Vivamus aliquam porttitor tincidunt. Etiam feugiat, magna quis vestibulum scelerisque, tellus massa posuere risus, accumsan hendrerit urna odio et purus.

Suspendisse in finibus est. Phasellus maximus quam eu lectus scelerisque, feugiat convallis neque volutpat. Etiam sodales consectetur rhoncus. Nam justo risus, commodo quis feugiat id, rhoncus ut nisi. Vivamus rutrum, libero quis vulputate interdum, felis lectus pharetra nibh, non tincidunt erat ipsum eget libero. In sed hendrerit eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras porttitor, dolor a commodo suscipit, metus ligula pretium felis, quis volutpat ex est ut eros. Vivamus in augue nulla. Phasellus sed mi sagittis magna ultrices vulputate eu ac sem. Suspendisse non consequat nisl. Quisque malesuada justo a dolor tristique bibendum. Fusce nisl nulla, dignissim vel eros porttitor, tempus tristique justo. Nam mi tortor, dignissim vitae consectetur aliquet, efficitur sed orci.

Ut vitae eros at risus bibendum pulvinar ac eu ligula. Mauris nunc nibh, posuere et rutrum dapibus, consectetur sed leo. Nullam sollicitudin, orci sed feugiat pharetra, sem ligula molestie sem, eget ultrices diam lorem id leo. Integer eget nisi volutpat, mollis elit vitae, faucibus nunc. Etiam dictum tortor sapien, porttitor eleifend urna suscipit at. Vivamus id venenatis augue. Donec et metus non massa laoreet imperdiet. Donec sed dolor ut neque scelerisque consequat ac quis libero. Morbi mollis in risus eget hendrerit. Mauris maximus luctus semper. Proin in velit felis.


code by RI.a
 
Omygod these are soooooo good thank you so so so so Much ❤️
 

Users who are viewing this thread

Back
Top