• 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 ᴘʀᴏᴊᴇᴄᴛ ʀᴇᴡɪɴᴅ <<

Reader mode
RI.a

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
  • Index
    • 02 mandarin cat <<
    code here |
    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
     
  • Index




    • 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 ❤️
     
    Reader mode
    You must log in or register to reply here.

    Users who are viewing this thread

    Total: 2 (members: 0, guests: 2)
    Back
    Top