• 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.

Accepting Requests ๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜† โงพ ๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€ ๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜† ๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€ โช๐—ฐ๐—น๐—ผ๐˜€๐—ฒ๐—ฑโซ

christy

๐™˜๐™–๐™ฃ๐™™๐™ฎ ๐™˜๐™–๐™ฃ๐™š๐™จ
[class=tab1] box-sizing: border-box; background: #fff; padding-top: 13px; width: 100%; height: 100%; color: #aaa; text-align: center; border-top: 1px solid #eee; border-right: 1px solid #eee; transition: all .5s; font-family: Avenir; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab1 state=hover] color: #5f53b5; transition: all .5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tab2] box-sizing: border-box; background: #fff; padding-top: 13px; width: 100%; height: 100%; color: #aaa; text-align: center; border-top: 1px solid #eee; border-right: 1px solid #eee; transition: all .5s; font-family: Avenir; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab2 state=hover] color: #5f53b5; transition: all .5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tab3] box-sizing: border-box; background: #fff; padding-top: 13px; width: 100%; height: 100%; border-right: 1px solid #eee; color: #aaa; text-align: center; border-top: 1px solid #eee; transition: all .5s; font-family: Avenir; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab3 state=hover] color: #5f53b5; transition: all .5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tab4] box-sizing: border-box; background: #fff; padding-top: 13px; width: 100%; height: 100%; border-top: 1px solid #eee; color: #aaa; text-align: center; transition: all .5s; font-family: Avenir; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab4 state=hover] color: #5f53b5; transition: all .5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] background: #5f53b5; color: #fff; text-align: center; transition: all .5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=selectedTab state=hover] background: #5f53b5; color: #fff; transition: all .5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: all 1s; width: 880px; font-size: 11px; line-height: 26px; color: #000; height: 300px; box-sizing: border-box; [/class] [class=show] opacity: 1; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 [/script] [script class=tab2 on=click] addClass show tabContents02 removeClass show tabContents01 removeClass show tabContents03 removeClass show tabContents04 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 [/script] [script class=tab3 on=click] addClass show tabContents03 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents04 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab4 [/script] [script class=tab4 on=click] addClass show tabContents04 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 addClass selectedTab tab4 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 [/script]
[div class="selectedTab tab1"]
home
[div class="tab2"]
rules
[div class="tab3"]
form
[div class="tab4"]
index
[/div]
christy
&
constellation's
crispy codes
[/div]
[div class="show tabContents tabContents01"]
a general
overview
of what we do.
welcome to crispy codes! this code shop is run by me, christy christy and constellation constellation . we decided to open this up to offer freebies to people in need of quick codes they can use, and we're also offering requests, in case you have an idea for a code but might be having trouble executing it. the thread is open to anyone and everyone, and we offer a range of codes, with varying styles. just please make sure you read through all of our guidelines before putting in a request or using a freebie. thanks for stopping by!
[div class="tabContents tabContents02"]
we have some
guidelines
for you.
for any request, there are a few guidelines that need to be followed, to ensure that we can serve you best! adhere to these, and we should have no problem.

โ†’ please fill the form completely, and to the best of your abilities. the more info you give us, the easier it becomes to fulfil your request.​
โ†’ please be patient! you can't expect a complex code to be completed in a matter of hours, or a day. if it's been a couple of days and you haven't heard from either of us, then you may give us a poke. similarly, please owe us the courtesy of letting us know if you no longer want the code you requested, so we don't waste time continuing to make it.​
โ†’ understand that all requests of yours will also be given away as freebies for other people to use if they wish.​
โ†’ all codes provided will have a watermark stating that the code belongs to either me or constellation. do not remove or change this. doing so, and claiming the code as your own, will result in a confrontation, and if the issue is not resolved, you will be reported.​
โ†’ unless specified, please do not alter the codes we give you by changing a few things and then passing it off as your own. this is definitely not acceptable. if you have any questions about what you can or cannot change, please feel free to ask us. these codes are freebies, not a base for you to build your own code off of. inspiration is a completely different thing, so please ask us if you have any questions or confusions.​
โ†’ understand that not all codes will be mobile friendly, so keep that in mind when making a request or using a freebie.​
โ†’ all codes can be found by clicking the word 'code' in the beginning of each post. you'll know you're at the right place when you let the mouse hover over the word 'code' after either christy or constellation's code is posted and the colour of the link changes to a darker purple.​
[/div] [div class="tabContents tabContents03"]
fill up a
form
why don't you?
please fill this form for making a code request. fill it up completely:

โ†’ code type (character sheet, interest check, placeholder, etc. if you want to know what types of codes we can do, just ask)​
โ†’ overall size (small, medium, filling the whole page, etc.)​
โ†’ images (how many image placeholders do you want?)​
โ†’ colours (giving us a range or a palette makes it easier to work with)​
โ†’ fonts (are there any specific fonts you want us to use? make sure they're only google fonts.)​
โ†’ any specific details (do you want icons or titles for tabs? certain animations? do you have an idea as to how you want everything to be positioned? let us know all the details here, and if you have a set idea in mind, please be as descriptive as possible)​
โ†’ coder (do you have a preference over which one of us codes for you?)​
[/div] [div class="tabContents tabContents04"]
here is an
index
of everything.
each time we upload a freebie, or complete a request, we'll link the post here for ease of access!

01) dazed ; in character code ; by constellation
โ†’ link to post
02) purple rain ; character sheet code ; by christy
โ†’ link to post
03 ) cherry blossom ; character sheet code ; by constellation
โ†’ link to post
04) cold folio ; group interest check code ; by constellation
โ†’ link to post
05) cloud nine ; character sheet code ; by christy
โ†’ link to post
06) sorting hat ; hogwarts themed interest check ; by constellation
โ†’ link to post
07) wallflower ; character sheet code ; by constellation
โ†’ link to post
08) toffee ; interest check code ; by christy
โ†’ link to post
09) bubblegum ; in character code ; by constellation
โ†’ link to post
10) riptide ; character sheet code ; by christy
โ†’ link to post
11) winter blues ; character sheet code ; by constellation
โ†’ link to post
12) sky high ; character sheet code ; by christy
โ†’ link to post
13) just beachy ; group interest check code ; by constellation
โ†’ link to post
14) blue delphinium ; character sheet code ; by constellation
โ†’ link to post
15) orion ; in character code ; by christy
โ†’ link to post
16) รฉcailles ; character sheet code ; by constellation
โ†’ link to post
17) autumn leaves ; character sheet code ; by christy
โ†’ link to post
18) efflorescence ; character sheet code ; by constellation
โ†’ link to post
19) royal orchid ; in character code ; by christy
โ†’ link to post
20) royal orchid (ph) ; placeholder code ; by christy
โ†’ link to post
21) pomegranate ; character sheet code ; by constellation
โ†’ link to post
22) royal orchid (cs) ; character sheet code ; by christy
โ†’ link to post
23) a snowy road ; interest check code ; by constellation
โ†’ link to post
24) cotton candy ; in character code ; by christy
โ†’ link to post
[/div] [/div] [/div][/div]
 
Last edited:
christy
&
constellation's
crispy queue
christy's queue
closed for requests!
constellation's queue
closed for requests!
 
Last edited:
[class=image] width: 150px; height: 150px; background: url(https://cdn.discordapp.com/attachments/628281887613255680/632931907436412929/image1.jpg); background-size: cover; border-radius: 100% 100% 0% 100%; [/class] [class=number] width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s; [/class] [class=link] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; [/class] [class name=image state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=number state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5); [/class] [class name=link state=hover] color: #5f53b5; transition: 1s; [/class]
constellation's code
[div class=image][div class=number]
01
hi all! first freebie on the thread and i decided to go with a simple in-character post. this code features three images, a little banner at the bottom for character details and a text box with a lovely colourful scroll (something i just discovered was possible). sadly, this isn't the best on mobile as the images cut off slightly but the text is clear to read! feel free to alter the colours to your liking and if you have any questions, please do not be afraid to private message me! c:
[/div][/div][/div] [class=container]position: relative; top: 0px; right: 0px; left: 0px; bottom: 0px; margin: auto; height: 448px; width: 450px; background-color: #f2ebe4; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=textbox]position: absolute; top: 25px; left: 25px; padding-right: 5px; height: 305px; width: 235px; overflow-x: hidden; scrollbar-color: #85ccf2 #ffffff; font-size: 12px; line-height: 105%; white-space: pre-line; text-align: justify; color: black;[/class] [class=border]position: absolute; top: 349px; border-top: #d5e9f2 solid 10px; solid 10px; height: 89px; width: 450px; background-color: #85ccf2;[/class] [class=charname]margin: 15px 0px 0px 30px; font-size: 23px; color: #ffffff; text-transform: uppercase; font-weight: 600;[/class] [class=charinfo]margin: -8px 0px 0px 35px; color: #ffffff; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px;[/class]
[div class=container][div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in accumsan magna. Fusce tristique posuere nibh ac ullamcorper. Etiam in massa et metus ornare venenatis. Fusce eu dignissim purus. Curabitur vel volutpat nunc, at ultrices erat. Morbi id dapibus est. Praesent ut dapibus urna, ac semper lorem. Vivamus fringilla pulvinar tellus, vitae rhoncus libero gravida eget. Morbi sem massa, lacinia ac commodo et, convallis vel mi. Pellentesque vulputate convallis vestibulum. Aenean tempor, leo a pulvinar auctor, quam tellus tempor neque, a egestas eros ligula ut ante. Etiam mauris enim, tempor in convallis in, consequat vitae odio. Nunc enim nunc, interdum a urna a, posuere tincidunt urna. Phasellus blandit quis augue ut fermentum. Praesent id dapibus leo. Praesent ut aliquet magna, quis aliquet metus. In non lectus urna. Integer vehicula nunc at vehicula volutpat. Nulla cursus lectus et ante condimentum efficitur. Proin facilisis augue sed massa luctus facilisis. Vivamus placerat quam a augue auctor rutrum a nec mauris. Curabitur vel tortor eget dolor elementum iaculis eget eu arcu. Aliquam euismod mauris vel metus volutpat eleifend. Curabitur sed tellus nulla. Proin id dignissim urna, vitae placerat leo. Mauris et iaculis orci. Fusce lectus lacus, porttitor vel tristique et, rutrum dignissim arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tincidunt mi tortor, nec egestas sem accumsan eget. Cras a consectetur sapien. Integer tincidunt metus id nibh sollicitudin vehicula. Nunc rhoncus enim et tortor ultricies malesuada. Maecenas nibh purus, vehicula ut mauris in, interdum venenatis leo. Mauris blandit maximus luctus.
[div class=border][div class=charname]CHARACTER NAME[/div] [div class=charinfo]THE CHARACTER ROLE.[/div][/div]
arzodjQ.png
arzodjQ.png
arzodjQ.png
[/div][/div]
 
hello. i've got a request for you guys, if you have the time to fulfill it!

โ†’ code type: character sheet.

โ†’ overall size: medium? i don't want it super compacted, but i don't want it to fill the page either.

โ†’ images: one larger one for the home page, and then three 100x100 images on each tab.

โ†’ colours: palette.

โ†’ fonts: times new roman for the headers, rpn 12 pt font for everything else.

โ†’ any specific details: i'd prefer to have about four tabs on it, icons for each. one for basics, appearance, persona, and then miscellaneous info. i don't have a preference on those icons, you can pick whichever ones you'd think fit the best. as for layout, i'd prefer if there was a homepage with a picture and place for a name/role, and then on the left side, the tab placement. a tumblr theme for (mild) inspiration for what i want can be found here.

โ†’ coder: no preference. both of your works are all amazing.

thank you so much! can't wait to see what you all come up with.
 
constellation
says:
mattchampions mattchampions ; your request has been accepted and will be with you in a couple days! please be patient c:
 
Last edited:
Hello!

โ†’ code type: character sheet

โ†’ overall size: uh, I'd say medium--like what mattchampions said above, I don't want it tiny, but I don't want it HUMONGOUS either

โ†’ images: singular one for main part, and 2-3 on each tab

โ†’ colours: this or even this --and could it be adjustable? so I can use both palettes at some point if I really wanted to

โ†’ fonts: if you could have Gochi Hand as headers, and either RPN default or Avenir for other text

โ†’ any specific details: okay, so you know the code you did for Nat's CS? I really really liked how you did that, so I was hoping for something with the same "hover and show icons" thing for the tabs, but with hearts as all the icons, if that makes sense? but I want this hover thing at like the top of the code, with a bigger "main" image underneath that, with each tab, reveals the text for the different CS components. (5 pages is standard, right? that's all I need!) I'd kinda like the images for each tab be along the side, and if it's possible to have a button or something that goes back to the "main" page, that'd be great!
oh goodness I hope I made sense and this isn't too hard to do

โ†’ coder: christy! hence the code mentioned above


Thank you in advance! You two are amazing!!! <3
 
christy
says:
AnimeGenork AnimeGenork ; your request is accepted! i definitely understand the kind of look you're going for so i'll get back to you in two days or so with a code (probably less, we'll see how it goes).

thanks for requesting!
 
Last edited:
[class=image] width: 150px; height: 150px; background: url(https://i.pinimg.com/564x/ff/01/10/ff01106474b0c488d4671c6cb7699b80.jpg); background-size: cover; border-radius: 100% 100% 0% 100%; [/class] [class=number] width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s; [/class] [class=link2] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; [/class] [class name=image state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=number state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5); [/class] [class name=link2 state=hover] color: #5f53b5; transition: 1s; [/class]
christy's code
[div class=image][div class=number]
02
AnimeGenork AnimeGenork ; here is your code! i used the second colour palette you gave me, but feel free to make changes to the colours if you wish. the icons for the tabs are also changeable, you can just google search fa icons on google for a list of everything available. i tried using the font you wanted for the heading but it kind of messed with the whole aesthetic of the code so i just kept it as avenir, if that's okay! click the link in the heading to be taken to the raw code and please remember not to remove the credit. hope you like it!
[/div][/div][/div]
[class=link] display: inline-block; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; font-size: 9px; font-family: Avenir; padding-top: 5px; color: #999; [/class] [class=tag] display: inline; margin-top: 10px; padding: 0px 3px 2px 3px; background: #8186d5; color: #fff; [/class] [class=circle] height: 300px; width: 300px; margin: auto; margin-left: -50px; margin-top: 50px; border-radius: 100%; box-sizing: border-box; padding-top: 70px; background: #d8dff0; transition: .7s; [/class] [class name=circle state=hover] background: #c6cbef; transition: .7s; [/class] [script class=circle on=mouseenter] addClass show tab [/script] [script class=circle on=mouseleave] removeClass show tab addClass show selectedTab [/script] [class=tab] display: inline-block; box-sizing: border-box; background: #fff; padding: 2px; width: 25px; height: 25px; border: 1px solid #fff; border-radius: 100%; color: #999; text-align: center; transition: .7s; font-size: 12px; font-family: Avenir; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; opacity: 0; [/class] [class name=tab state=hover] color: #494ca2; transition: .7s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] color: #494ca2; transition: .7s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: all .7s; width: 350px; font-size: 11px; line-height: 26px; background: #e3e7f1; color: #000; height: 400px; box-sizing: border-box; [/class] [class=show] opacity: 1; transition: all .7s; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab2 on=click] addClass show tabContents02 removeClass show tabContents01 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab3 on=click] addClass show tabContents03 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab4 on=click] addClass show tabContents04 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents05 removeClass show tabContents06 addClass selectedTab tab4 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab5 on=click] addClass show tabContents05 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents06 addClass selectedTab tab5 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab6 [/script] [script class=tab6 on=click] addClass show tabContents06 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 addClass selectedTab tab6 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script]
[div class=circle]
[div class="tab tab1"]
[div class="tab tab2"]
[div class="tab tab3"]
[div class="tab tab4"]
[div class="tab tab5"]
[/div]
[div class="tab tab6"]
[/div] [/div] [/div] [/div]
[div class="tabContents tabContents06 show"]
character name
role name
[div class="tabContents tabContents01"]
[div class=tag]basics
info.
[div class=tag]name, etc.
info.
[/div] [/div][/div] [div class="tabContents tabContents02"]
[div class=tag]appearance
info.
[div class=tag]height, etc.
info.
[/div] [/div][/div] [div class="tabContents tabContents03"]
[div class=tag]psyche
info.
[div class=tag]persona, etc.
info.
[/div] [/div][/div] [div class="tabContents tabContents04"]
[div class=tag]relationships
info.
[div class=tag]parents, etc.
info.
[/div] [/div][/div] [div class="tabContents tabContents05"]
[div class=tag]history
info.
[div class=tag]background, etc.
info.
[/div] [/div][/div] [/div] [/div] https://www.rpnation.com/threads/๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜†-โงพ-๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€-๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜†-๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€.454487/post-9951524[/div][/div]
 
Last edited:
[class=image] width: 150px; height: 150px; background: url(https://i.pinimg.com/564x/ff/01/10/ff01106474b0c488d4671c6cb7699b80.jpg); background-size: cover; border-radius: 100% 100% 0% 100%; [/class] [class=number] width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s; [/class] [class=link2] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; [/class] [class name=image state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=number state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5); [/class] [class name=link2 state=hover] color: #5f53b5; transition: 1s; [/class]
christy's code
[div class=image][div class=number]
02
AnimeGenork AnimeGenork ; here is your code! i used the second colour palette you gave me, but feel free to make changes to the colours if you wish. the icons for the tabs are also changeable, you can just google search fa icons on google for a list of everything available. i tried using the font you wanted for the heading but it kind of messed with the whole aesthetic of the code so i just kept it as avenir, if that's okay! click the link in the heading to be taken to the raw code and please remember not to remove the credit. hope you like it!
[/div][/div][/div]
[class=link] display: inline-block; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; font-size: 9px; font-family: Avenir; padding-top: 5px; color: #999; [/class] [class=tag] display: inline; margin-top: 10px; padding: 0px 3px 2px 3px; background: #8186d5; color: #fff; [/class] [class=circle] height: 300px; width: 300px; margin: auto; margin-left: -50px; margin-top: 50px; border-radius: 100%; box-sizing: border-box; padding-top: 70px; background: #d8dff0; transition: .7s; [/class] [class name=circle state=hover] background: #c6cbef; transition: .7s; [/class] [script class=circle on=mouseenter] addClass show tab [/script] [script class=circle on=mouseleave] removeClass show tab addClass show selectedTab [/script] [class=tab] display: inline-block; box-sizing: border-box; background: #fff; padding: 2px; width: 25px; height: 25px; border: 1px solid #fff; border-radius: 100%; color: #999; text-align: center; transition: .7s; font-size: 12px; font-family: Avenir; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; opacity: 0; [/class] [class name=tab state=hover] color: #494ca2; transition: .7s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] color: #494ca2; transition: .7s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: all .7s; width: 350px; font-size: 11px; line-height: 26px; background: #e3e7f1; color: #000; height: 400px; box-sizing: border-box; [/class] [class=show] opacity: 1; transition: all .7s; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab2 on=click] addClass show tabContents02 removeClass show tabContents01 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab3 on=click] addClass show tabContents03 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab4 on=click] addClass show tabContents04 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents05 removeClass show tabContents06 addClass selectedTab tab4 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab5 on=click] addClass show tabContents05 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents06 addClass selectedTab tab5 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab6 [/script] [script class=tab6 on=click] addClass show tabContents06 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 addClass selectedTab tab6 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script]
[div class=circle]
[div class="tab tab1"]
[div class="tab tab2"]
[div class="tab tab3"]
[div class="tab tab4"]
[div class="tab tab5"]
[/div]
[div class="tab tab6"]
[/div] [/div] [/div] [/div]
[div class="tabContents tabContents06 show"]
character name
role name
[div class="tabContents tabContents01"]
[div class=tag]basics
info.
[div class=tag]name, etc.
info.
[/div] [/div][/div] [div class="tabContents tabContents02"]
[div class=tag]appearance
info.
[div class=tag]height, etc.
info.
[/div] [/div][/div] [div class="tabContents tabContents03"]
[div class=tag]psyche
info.
[div class=tag]persona, etc.
info.
[/div] [/div][/div] [div class="tabContents tabContents04"]
[div class=tag]relationships
info.
[div class=tag]parents, etc.
info.
[/div] [/div][/div] [div class="tabContents tabContents05"]
[div class=tag]history
info.
[div class=tag]background, etc.
info.
[/div] [/div][/div] [/div] [/div] https://www.rpnation.com/threads/๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜†-โงพ-๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€-๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜†-๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€.454487/post-9951524[/div][/div]

adlfkajsdlkfjalskdjf;laks;dfj I LOVE IT THANK YOU SO MUCH
AND THE NAME AAHHHHHH
You are a queeeeeen <3
 
[class=image] width: 150px; height: 150px; background: url(https://cdn.discordapp.com/attachments/628281887613255680/632931907436412929/image1.jpg); background-size: cover; border-radius: 100% 100% 0% 100%; [/class] [class=number] width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s; [/class] [class=link] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; [/class] [class name=image state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=number state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5); [/class] [class name=link state=hover] color: #5f53b5; transition: 1s; [/class]
constellation's code
[div class=image][div class=number]
03
mattchampions mattchampions ; here is your request, thank you for being patient! i stuck to the fonts and colour scheme that you provided, but feel free to change them to your liking. you may also change the icons, i chose what i would normally use. i had fun making it, so i hope you like it c:
[/div][/div][/div]
[class=container]position: relative; left: -20px; float: right; height: 350px; width: 375px; background: #96d1c7; border-radius: 15px;[/class] [class=tabs]float: left; position: relative; z-index: 0; height: 350px; width: 100px; background: #5eb7b7; border-top-left-radius: 15px; border-bottom-left-radius: 15px;[/class] [class=title]position: relative; width: 375px; font-size: 50px; font-weight: 900; -webkit-text-stroke-width: 2px; text-shadow: -1px 1px, 1px 1px, 1px 1px; color: #5eb7b7;[/class] [class=tab]display: inline-block; position: relative; left: 20px; width: 40px; height: 40px; background: #ffafb0; border-radius: 10px; line-height: 15px; text-align: center; color: #fc7978; font-size: 20px; line-height: 40px;[/class] [class=tabcontainer]margin: -8px 0 0 25px; height: 260px; width: 305px; border-radius: 15px; background-color: white; padding: 10px;[/class] [class=tag]display: inline; padding: 1px 4px 1px 3px; background: #fc7978; color: #fff;[/class] [animation=TabsAnima] [keyframe=50] -webkit-transform: scale(0.8); transform: scale(0.8); [/keyframe] [keyframe=100] -webkit-transform: scale(1); transform: scale(1); [/keyframe] [/animation] [class name="tab" state="hover"] animation-name: {post_id}TabsAnima; animation-duration: 0.5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [script class=tab1 on=click] hide tabContents02 hide tabContents03 hide tabContents04 hide tabContents05 fadeIn 1000 tabContents01 [/script] [script class=tab2 on=click] hide tabContents01 hide tabContents03 hide tabContents04 hide tabContents05 fadeIn 1000 tabContents02 [/script] [script class=tab3 on=click] hide tabContents01 hide tabContents02 hide tabContents04 hide tabContents05 fadeIn 1000 tabContents03 [/script] [script class=tab4 on=click] hide tabContents01 hide tabContents02 hide tabContents03 hide tabContents05 fadeIn 1000 tabContents04 [/script] [script class=tab5 on=click] hide tabContents01 hide tabContents02 hide tabContents03 hide tabContents04 fadeIn 1000 tabContents05 [/script]
[div class=tabs]
[div class="tab tab1"]
[div class="tab tab2"]
[div class="tab tab3"]
[div class="tab tab4"][/div] [div class="tab tab5"][/div][/div][/div] [div class=container][div class=title style="left: 20px; margin-top: -48px; text-align: left; font-family: Times New Roman;"]the name here[/div] [div class="tabContents tabContents05"]
[div class=title style="top: -10px; right: 20px; text-align: right; font-family: Times New Roman;"]the role here[/div][/div] [div class="tabContents tabContents01" style="display: none;"][div class=tabcontainer]
[div class=tag]tag here
info. [div class=tag]tag here[/div] info. [div class=tag]tag here[/div] info. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur iaculis sodales. Curabitur fermentum turpis vel sem condimentum, at sodales nibh sagittis. Sed id fringilla massa. Nulla sodales at sapien sit amet consequat. Vivamus varius urna vitae risus tempus, ut fringilla dui maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sed massa ligula. Maecenas tellus justo, aliquet quis dui eget, euismod rutrum ligula. Suspendisse potenti. Nam in justo elit. Pellentesque egestas risus faucibus lectus dapibus, et feugiat urna tincidunt.[/div][/div] [div class=title style="top: -10px; right: 20px; text-align: right; font-family: Times New Roman;"]the basics[/div][/div] [div class="tabContents tabContents02" style="display: none;"][div class=tabcontainer]
[div class=tag]tag here
info. [div class=tag]tag here[/div] info. [div class=tag]tag here[/div] info.[/div][/div] [div class=title style="top: -10px; right: 20px; text-align: right; font-family: Times New Roman;"]the appearance[/div][/div] [div class="tabContents tabContents03" style="display: none;"][div class=tabcontainer]
[div class=tag]tag here
info. [div class=tag]tag here[/div] info. [div class=tag]tag here[/div] info.[/div][/div] [div class=title style="top: -10px; right: 20px; text-align: right; font-family: Times New Roman;"]the persona[/div][/div] [div class="tabContents tabContents04" style="display: none;"][div class=tabcontainer]
[div class=tag]tag here
info. [div class=tag]tag here[/div] info. [div class=tag]tag here[/div] info.[/div][/div] [div class=title style="top: -10px; right: 20px; text-align: right; font-family: Times New Roman;"]the extras[/div][/div][/div]
coded by constellation constellation .
[/div][/div]
 
Last edited:
[class=image] width: 150px; height: 150px; background: url(https://cdn.discordapp.com/attachments/628281887613255680/632931907436412929/image1.jpg); background-size: cover; border-radius: 100% 100% 0% 100%; [/class] [class=number] width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s; [/class] [class=link] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; [/class] [class name=image state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=number state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5); [/class] [class name=link state=hover] color: #5f53b5; transition: 1s; [/class]
constellation's code
[div class=image][div class=number]
03
mattchampions mattchampions ; here is your request, thank you for being patient! i stuck to the fonts and colour scheme that you provided, but feel free to change them to your liking. you may also change the icons, i chose what i would normally use. i had fun making it, so i hope you like it c:
[/div][/div][/div]
[class=container]position: relative; left: -20px; float: right; height: 350px; width: 375px; background: #96d1c7; border-radius: 15px;[/class] [class=tabs]float: left; position: relative; z-index: 0; height: 350px; width: 100px; background: #5eb7b7; border-top-left-radius: 15px; border-bottom-left-radius: 15px;[/class] [class=title]position: relative; width: 375px; font-size: 50px; font-weight: 900; -webkit-text-stroke-width: 2px; text-shadow: -1px 1px, 1px 1px, 1px 1px; color: #5eb7b7;[/class] [class=tab]display: inline-block; position: relative; left: 20px; width: 40px; height: 40px; background: #ffafb0; border-radius: 10px; line-height: 15px; text-align: center; color: #fc7978; font-size: 20px; line-height: 40px;[/class] [class=tabcontainer]margin: -8px 0 0 25px; height: 270px; width: 315px; border-radius: 15px; background-color: white; padding: 5px;[/class] [class=tag]display: inline; padding: 1px 4px 1px 3px; background: #fc7978; color: #fff;[/class] [animation=TabsAnima] [keyframe=50] -webkit-transform: scale(0.8); transform: scale(0.8); [/keyframe] [keyframe=100] -webkit-transform: scale(1); transform: scale(1); [/keyframe] [/animation] [class name="tab" state="hover"] animation-name: {post_id}TabsAnima; animation-duration: 0.5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [script class=tab1 on=click] hide tabContents02 hide tabContents03 hide tabContents04 hide tabContents05 fadeIn 1000 tabContents01 [/script] [script class=tab2 on=click] hide tabContents01 hide tabContents03 hide tabContents04 hide tabContents05 fadeIn 1000 tabContents02 [/script] [script class=tab3 on=click] hide tabContents01 hide tabContents02 hide tabContents04 hide tabContents05 fadeIn 1000 tabContents03 [/script] [script class=tab4 on=click] hide tabContents01 hide tabContents02 hide tabContents03 hide tabContents05 fadeIn 1000 tabContents04 [/script] [script class=tab5 on=click] hide tabContents01 hide tabContents02 hide tabContents03 hide tabContents04 fadeIn 1000 tabContents05 [/script]
[div class=tabs]
[div class="tab tab1"]
[div class="tab tab2"]
[div class="tab tab3"]
[div class="tab tab4"][/div] [div class="tab tab5"][/div][/div][/div] [div class=container][div class=title style="left: 20px; margin-top: -48px; text-align: left; font-family: Times New Roman;"]the name here[/div] [div class="tabContents tabContents05"]
[div class=title style="top: -10px; right: 20px; text-align: right; font-family: Times New Roman;"]the role here[/div][/div] [div class="tabContents tabContents01" style="display: none;"][div class=tabcontainer]
[div class=tag]tag here
info. [div class=tag]tag here[/div] info. [div class=tag]tag here[/div] info. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur iaculis sodales. Curabitur fermentum turpis vel sem condimentum, at sodales nibh sagittis. Sed id fringilla massa. Nulla sodales at sapien sit amet consequat. Vivamus varius urna vitae risus tempus, ut fringilla dui maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sed massa ligula. Maecenas tellus justo, aliquet quis dui eget, euismod rutrum ligula. Suspendisse potenti. Nam in justo elit. Pellentesque egestas risus faucibus lectus dapibus, et feugiat urna tincidunt.[/div][/div] [div class=title style="top: -10px; right: 20px; text-align: right; font-family: Times New Roman;"]the basics[/div][/div] [div class="tabContents tabContents02" style="display: none;"][div class=tabcontainer]
[div class=tag]tag here
info. [div class=tag]tag here[/div] info. [div class=tag]tag here[/div] info.[/div][/div] [div class=title style="top: -10px; right: 20px; text-align: right; font-family: Times New Roman;"]the appearance[/div][/div] [div class="tabContents tabContents03" style="display: none;"][div class=tabcontainer]
[div class=tag]tag here
info. [div class=tag]tag here[/div] info. [div class=tag]tag here[/div] info.[/div][/div] [div class=title style="top: -10px; right: 20px; text-align: right; font-family: Times New Roman;"]the persona[/div][/div] [div class="tabContents tabContents04" style="display: none;"][div class=tabcontainer]
[div class=tag]tag here
info. [div class=tag]tag here[/div] info. [div class=tag]tag here[/div] info.[/div][/div] [div class=title style="top: -10px; right: 20px; text-align: right; font-family: Times New Roman;"]the extras[/div][/div][/div]
coded by constellation constellation .
[/div][/div]
oh, this is beautiful! i'll definitely be returning if i find myself in need of another code! thank you so so much!
 
oh, this is beautiful! i'll definitely be returning if i find myself in need of another code! thank you so so much!
eee thank you, iโ€™m happy you like! and please do, youโ€™re always welcome c:
 
oof this is amazing lovelies !

โ†’ code type : character sheet

โ†’ overall size : hmmm... i'm thinking medium to large-ish? i definitely don't want it to take up the whole page but don't want anyone to have to strain their eyes to read

โ†’ images : so one for the main/home page and i'm thinking maybe 4-5 on the last page to act as a photo gallery of sorts

โ†’ colors : here !

โ†’ fonts : anything sans! i'm not picky on which particular sans font it is

โ†’ any specific details : titles for tabs please, and probably 5 tabs total (one for basics, one for appearance, one for persona, one for background and one for misc/photo gallery). also, could the tabs be located on the left side of the cs? if it's possible, for animations, the fade in fade out thing? i don't know how to describe it but, yeah. and then, if possible, could there be a header for the character name and subheader for a quote? doesn't matter to me where they're positioned

โ†’ coder : any !

thanks again uwu
 
i have come!~

โ†’ code type : interest check!~

โ†’ overall size : medium to semi-large

โ†’ images : a main image for the home + small icons at the side for the roles section

โ†’ colours: this palette?

โ†’ fonts: futura, intro or any sans font

โ†’ any specific details: Around four tabs for main, lore, rules, character roles (or five including the home). a folder type design? maybe something like this?

โ†’ coder: ily both, whoever is free can do it^^

tysm in advance!~~
 
christy
says:
erised erised ; your request is accepted! i'm excited to work on your request! i'll get back to you in two days or so with a code (probably less, we'll see how it goes).

thanks for requesting!
 
constellation
says:
Feyrie Feyrie ; your request has been accepted and will be with you in a couple days, or maybe less - we shall see! looking forward to making it hehe
 
i'm baaaaack

โ†’ code type: 1x1 interest check.

โ†’ overall size: similar to the size of cherry blossom, not too small but not too big either!

โ†’ images: honestly, just a place on the homepage for three icons (80x80! i got my sizes right this time, lmao) would be perfect.

โ†’ colours:
here!

โ†’ fonts: rpn 12 px font, but times new roman for the headers!

โ†’ any specific details: i'd like there to be three tabs, one for introductions, one for my partner expectations/personal expectations, and then one for my plots/pairings/ideas! i'd also like the format to be incredibly simplistic, nothing too complicated looking or hard on the eyes. i'd also like it to be.... a portrait format? if that makes any sense? i'm not exactly sure how to explain it. i'd like the tabs to be on the left side, icons for each, and again use whichever ones you think would work best! tumblr theme for (mild) inspo can be found
here.

โ†’ coder: either! whoever this requests speaks to the most. thanks so much again, guys!
 
So I was struggling, thinking about how much time it would take to code everything on my own for a new RP and about how I'm the worst graphic designer on the planet, and then I remembered this thread! It's so great that you guys are offering this- I enjoy coding, but it's a time-consuming process so I was getting concerned about the feasibility of me starting this RP right now xD

I hope this is a request you can help with~ ^^

โ†’ code type interest check
โ†’ overall size filling the whole page is good (I like things being big and have no mercy for phone users ^^" )
โ†’ images no placeholders needed- this is for a Harry Potter RP so if the graphics could include the Hogwarts crest that'd be great~
โ†’ colours usual Hogwarts ones: scarlet and gold, blue and bronze, green and silver, yellow and black
โ†’ fonts Book Antiqua
โ†’ any specific details I actually want something super simple and basic- a header for the RP title up top, and then a box underneath that for the interest check contents
โ†’ coder either ^^
 
christy
says:
mattchampions mattchampions ; your request is accepted! i'll get started on it soon and get back to you in two days or so with a code.

thanks for requesting!
 
constellation
says:
Ayama Ayama ; your request has been accepted and will be completed in a couple days. please bare with me (: thank you for requesting
 

Users who are viewing this thread

Back
Top