• 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

"愛を知りたいのです."
[class=mainCon] display:flex; flex-wrap:wrap; margin:auto;center; min-width:200px; max-width:1100px; height:auto; justify-content:center; align-items:center; background:white; [/class] [class=pic] width:500px; height:600px; background:url('https://static.zerochan.net/Tachibana.Makoto.full.1629626.jpg'); background-size:cover; background-position:top; [/class] [class name=pic maxWidth=600px] display:none; [/class] [class=contentCon] display:flex; min-width:200px; max-width:500px; flex-wrap:wrap; justify-content:center; height:470px; [/class] [class=border] display:flex; align-self:flex-end; width:500px; height:100px; background:#5a5353; clip-path: polygon(0 0, 100% 0, 95% 100%, 0 75%); justify-content:center; [/class] [class name=border maxWidth=600px] display:none; [/class] [class=buttonUp] text-align:center; color:white; cursor:pointer; font-size:2em; [/class] [class=buttonDown] text-align:center; color:white; cursor:pointer; font-size:2em; [/class] [class=textWrap] min-width:200px; max-width:400px; height:40vh; padding:0.5em; overflow:hidden; border:1px solid #8c8080; border-top:50px solid #8c8080; align-self:center; background:white; [/class] [class=scrollbox] width:105%; height:40vh; overflow:scroll; [/class] [class=textbox] width:95%; font-family:Roboto; font-size:0.8em; color:#707070; [/class] [class=bubble] width:180px; padding:0.5em; padding-bottom:0.8em; height:20px; border-top-right-radius:20px; border-top-left-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; background:#b8cbf0; text-align:center; font-size:1.5em; position:absolute; left:440px; top:60px; color:#222; opacity:0; [/class] [class name=bubble maxWidth=600px] display:none; [/class] [class=fadein] animation:{post_id}fade 1s linear forwards; [/class] [animation=fade] [keyframe=0]opacity:0;transform:scale(0);[/keyframe] [keyframe=25]opacity:0.5;transform:scale(0.5);[/keyframe] [keyframe=50]opacity:0.9;transform:scale(1);[/keyframe] [keyframe=75]opacity:0.9;transform:scale(1.15);[/keyframe] [keyframe=100]opacity:0.9;transform:scale(1);[/keyframe] [/animation] [script class=none] hide buttonDown [/script] [script class=contentCon on=mouseenter] addClass "fadein" "bubble" [/script] [script class=buttonUp on=click] hide buttonUp fadeIn 1000 buttonDown slideUp 750 page01 fadeIn 1000 page02 [/script] [script class=buttonDown on=click] hide buttonDown fadeIn 1000 buttonUp slideDown 1000 page01 fadeOut 750 page02 [/script] [class=spoilerdisplay] max-width:600px; height:auto; [/class] [class name=spoilerdisplay minWidth=600px] display:none; [/class] [div class=mainCon][div class=pic][/div][div class=bubble]Shop is closed![/div] [div class=contentCon][div class=textWrap][div class="scrollbox page01"][div class=textbox]
いらっしゃいませ!
Welcome!
Shop is CLOSED

Currently working on: Noivian Noivian

Hello! It's been a while, hasn't it? It's now the long-awaited summer break and I'm free~~ So I can get back to making codes. Now, it has been a while since I've made anything. There are tons of uncompleted codes in my PWS and I honestly don't know if I will finish them hahaha. So I may take a bit longer than normal to complete your request. So without further ado, please read the rules below and fill in the request form. Hope everyone has a nice summer!

01. You can see my previous codes (i.e. what I can do) in my freebie thread. All the codes there are free to use. You just gotta keep the creds (; As a creator, I will be updating you on how I'm getting on with your request. I will PM you my progress to check if I am on the right track. It'll be much more smooth sailing for both of us instead of me restarting an entire code.
02. I will only be working on ONE request at a time. I'd also like to add that users are only allowed one request at a time. Depending on how jank the requests are, it may take me a week or longer to make it. Please bear this in mind when you make your request.
02.1. Continuing from that, I will tag the user when I am working on said user's request above in "currently serving". This means that the shop is closed until the request is completed. However, feel free to fill in the form and post it here and check back at a later time.
03. Try to fill in as much of the form (the more detailed the better) as you can and post it on this thread.
04. By requesting, users are hereby agreeing to leave the credits on and not calling them theirs. Users are not permitted to call codes theirs by merely adjusting a few things. However, users are allowed to tear apart the codes to learn but do not expect me to fix it back for them.
05. Please know that I am doing this voluntarily and I try to do my best to fulfill your requests. Please also be reasonable with your requests. While I am willing to tweak a few things such as dimensions and colors if you are not sure how it works, I will not redo an entire code for you if you are not completely happy with the end result. I also do not tolerate any types of hate comments towards others and myself. Let's be civil and polite!
06. I have the right to decline your request if I don't understand what you are asking for or I think I will not be able to achieve what you've requested.
07. Mobile users are not able to see this entire code BUT I have included the request form in the spoiler below for you. All desktop/laptop lads can click on the little up arrow. [/div][/div] [div class="scrollbox page02"][div class=textbox]
Request Fom

Function: Character Sheet, IC Reply, Interest Check, Etc
Mobile Friendly: Yes/No
Color Scheme: Put a color name, hex, or rgb code here, even better if you could share a whole color scheme you have in mind!
No. of images and/or gifs: I would like to say that there is no limit to this but don't prove me wrong lel
Image URL/Source: paste the .jpg/.png/.gif here. It'll be great if you can include the artist/faceclaim too
Style: Simple/Concise, Extravagent Jank (from hidden scrollbars, borders to unicorns slurping on smoothies-- no I'm jk. Idk how to that. Please don't ask for too much uwu) Try to be as detailed as possible please! It gives me a better idea of what you want.
Theme: Fluff/Cute, Dark/Grunge/Edgy, Futuristic/Sci-Fi, etc etc
Specific Features: Features such as tabs, columns, hovers, shapes etc that you must have in the template. If you have location of where you want this to be, put it here too.
Anything else?:
Do you mind sharing the code with others?: Yes/No/Only to a few. Depending on your answer, I will PM it to you or post it here and/or in my freebie thread. [/div] [/div][/div] [div class=border][div class=buttonUp][/div][div class=buttonDown][/div][/div] [/div] [div class=spoilerdisplay]
Function: Character Sheet, IC Reply, Interest Check, Etc
Mobile Friendly: Yes/No
Color Scheme: Put a color name, hex, or rgb code here, even better if you could share a whole color scheme you have in mind!
No. of images and/or gifs: I would like to say that there is no limit to this but don't prove me wrong lel
Image URL/Source: paste the .jpg/.png/.gif here. It'll be great if you can include the artist/faceclaim too
Style: Simple/Concise, Extravagent Jank (from hidden scrollbars, borders to unicorns slurping on smoothies-- no I'm jk. Idk how to that. Please don't ask for too much uwu) Try to be as detailed as possible please! It gives me a better idea of what you want.
Theme: Fluff/Cute, Dark/Grunge/Edgy, Futuristic/Sci-Fi, etc etc
Specific Features: Features such as tabs, columns, hovers, shapes etc that you must have in the template. If you have location of where you want this to be, put it here too.
Anything else?:
Do you mind sharing the code with others?: Yes/No/Only to a few. Depending on your answer, I will PM it to you or post it here and/or in my freebie thread.
[/div] [/div]
 
Last edited:
Request 1
Function: IC post
Mobile Friendly: Preferably, however not required.
Color Scheme: #250F01, #401004, #600807
No. of images and/or gifs: 37 jkjk, just 2-3
Image URL/Source: minsung8809, any photo will do.
Style: Simple/Minimalistic, easy to change colors and images.
Theme: Dark/Edgy
Specific Features: If you could do like circles around the images I would really like that?? other than that I just need a place for a lot of text, and a separate place for tags and other info.
Do you mind sharing the code with others?: You can if you want, doesn't bother me.
 
Request 2
Function: IC POST/Character Sheet (either or is fine)
Mobile Friendly: Preffered Highly
Color Scheme: Dark shades of colors, Deep Blues, Black, Somewhat dark colors — I was going for a whole moody/grungy vibe
# of Images/GIFs: one to two is fine with me!

Images/GIFs: x — my character ; x — gif
Style: Something very minimal, but also very well composed
Theme: Grungy/Dark, mostly grungey
Specific features: maybe some circles around the images, or a hidden tab for my tags and things? nothing too extravagant
Mind sharing this code with others?: No, I don’t mine! That’s conpletely okay!
 
Finished 1
[class=riaBox]margin:auto;center;min-width:200px;max-width:450px;height:auto;display:flex;--color1:#fff;--color2:#707070;--color3:#5a5353;--img1:url('https://i.imgur.com/5Ft7td8.jpg');background:var(--color3);font-family:Oswald;color:var(--color1);[/class][class=riaPic]width:100px;height:100px;background:var(--img1);background-size:200%;background-position:-1em -1em;border:1px solid var(--color3)[/class][class=riaText]min=width:200px;max-width:290px;border:1px solid var(--color3);background:var(--color1);font-family:Roboto;font-size:0.8em;color:var(--color2);padding-left:0.5em;padding-right:0.5em;[/class][div class=riaBox][div class=riaPic][/div][div class=riaText]Code for Sunnyside
...and done! Thanks again for requesting Sunnyside Sunnyside !
Type: IC Post | Theme: Dark | Mobile Friendly: Yes | Features: Hidden Scroll
Free to use with credits[/div]
01
[/div]

[div class=Container]
[div class=Mainpic]
[/div]

[div class=infobanner][div class=title]NAME HERE[/div]

|[div class=title]Outfit[/div] |
|[div class=title]Mood[/div] feels|
|[div class=title]Location[/div] somewhere|
|[div class=title]Mentions[/div] @tag |
|[div class=title]Interactions[/div] @tag |[/div]

[div class=textWrap][div class=scrollWrap][div class=textBox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a blandit nulla, vitae dignissim lacus. Pellentesque vitae neque ultricies, lobortis orci ut, dapibus leo. Nam hendrerit sagittis nunc, quis mattis purus auctor ac. Sed at tellus vitae tellus sodales rhoncus id sed dui. Proin egestas vitae est ac ornare. Morbi non risus vulputate purus euismod tincidunt nec nec enim. Sed in volutpat sapien, a sagittis turpis.

Donec ut egestas arcu, vel aliquam orci. Praesent et aliquam ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur bibendum justo eget magna semper, non gravida lacus vestibulum. Vivamus nec sapien lacinia, blandit metus eget, malesuada metus. Nunc quis enim quis eros mollis convallis non sit amet augue. Aenean commodo vehicula metus et malesuada. Phasellus quam metus, lacinia vel vehicula ac, semper non metus. Ut vehicula magna in risus interdum, at imperdiet elit efficitur. Suspendisse pharetra purus id erat mattis interdum. Mauris sagittis arcu massa. Nam mollis blandit leo nec facilisis. In sit amet purus a justo tempor tincidunt nec vel augue.

Aliquam gravida felis id tellus bibendum scelerisque. Quisque in condimentum tellus. Nullam euismod egestas est, vitae elementum dui pulvinar a. Vivamus ullamcorper mauris vel magna consequat elementum in non ante. Pellentesque malesuada nibh lacus, eget posuere arcu vulputate et. Praesent rhoncus varius malesuada. Donec nec imperdiet velit. Donec eu dolor tellus. Nam ultricies rutrum lacus, quis rutrum mi porta vel. Nullam sed condimentum dolor. Pellentesque non velit non ligula vestibulum dictum. Phasellus eu sem vel nisl luctus varius nec elementum sem. Quisque id odio scelerisque, egestas purus eget, sodales lectus. Morbi et diam eget elit faucibus interdum et sed eros.

Phasellus pulvinar ligula at feugiat fermentum. Phasellus molestie, enim eu faucibus mattis, ex erat sagittis orci, quis posuere dui ex sed dui. Nam placerat euismod tincidunt. In euismod finibus lorem at vehicula. Mauris malesuada porttitor metus vitae accumsan. Vivamus lobortis libero eu leo ultricies, et pharetra massa suscipit. Nulla nec ligula facilisis, efficitur eros et, ultricies libero. Nam egestas nisi eros, in finibus ipsum egestas eu. Phasellus ullamcorper suscipit eros, at rutrum nunc efficitur et.

Donec a elit tempor, finibus nibh blandit, suscipit orci. Maecenas fermentum diam non nisl pharetra elementum. Vestibulum hendrerit neque tempus justo tincidunt luctus. Aenean nec turpis vel lacus placerat egestas at in sem. Phasellus quis dolor malesuada, elementum massa vitae, sagittis magna. Aenean rutrum est quis tempor iaculis. Morbi accumsan ipsum massa, ut cursus purus dignissim ut. Etiam in felis nec justo dignissim ultrices vitae eu tortor.[/div][/div][/div]
[/div]
code by RI.a|fc: minsung8809 {ig}
[class=Container] min-width:200px; max-width:700px; height:auto; display:flex; flex-wrap:wrap; padding:0.3em; padding-bottom:0.8em; align-items:center; justify-content:space-evenly; margin:auto;center; --color1:#CCCCCC; --color2:#600807; --color3:#401004; --color4:#250F01; --color5:#222222; background:var(--color4); [/class] [class=Mainpic] width:250px; height:250px; border-radius:50%; background:url('https://i.pinimg.com/originals/26/89/d8/2689d8591d53d599227edba629a3a20d.jpg'); background-size:130%; background-position:0em 0em; filter:grayscale(0); [/class] [class=infobanner] width:250px; height:150px; color:var(--color1); font-family: Montserrat; font-size:0.8em; padding-top:1em; padding-bottom:1em; border-bottom:3px solid var(--color2); [/class] [class=title] font-family: Major Mono Display; font-size:1em; color:var(--color1); display:inline-block; [/class] [class=textWrap] min-width:200px; max-width:680px; height:40vh; overflow:hidden; padding:0.3em; box-shadow:3px 3px 0px var(--color2); [/class] [class=scrollWrap] width:105%; height:40vh; overflow:scroll; [/class] [class=textBox] width:95%; font-family: Montserrat; font-size:0.8em; color:var(--color1); text-align:justify; [/class]

Code:
[div class=Container]
[div=width:250px;height:250px;border-radius:50%;border:1px solid var(--color3);padding:1em;box-shadow:-3px 2px 0px var(--color2);][div class=Mainpic][/div][/div]

[div class=infobanner][div class=title][size=35px]NAME HERE[/size][/div][div=float:right;margin:auto;center;width:50px;height:50px;border-radius:50%;border:1px solid var(--color3);padding:0.5em;][div=width:50px;height:50px;border-radius:50%;background:url('https://i.pinimg.com/564x/f1/af/39/f1af399c849bf963debe1fb5f04b2f12.jpg');background-size:cover;background-position:center;filter:grayscale(50);][/div][/div]
|[div class=title][font=Major Mono Display]Outfit[/font][/div] [url=][fa]fa-play[/fa][/url]|
|[div class=title]Mood[/div] [font=Montserrat]feels|[/font]
|[div class=title]Location[/div] somewhere|
|[div class=title]Mentions[/div] @tag |
|[div class=title]Interactions[/div] @tag |[/div]

[div class=textWrap][div class=scrollWrap][div class=textBox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a blandit nulla, vitae dignissim lacus. Pellentesque vitae neque ultricies, lobortis orci ut, dapibus leo. Nam hendrerit sagittis nunc, quis mattis purus auctor ac. Sed at tellus vitae tellus sodales rhoncus id sed dui. Proin egestas vitae est ac ornare. Morbi non risus vulputate purus euismod tincidunt nec nec enim. Sed in volutpat sapien, a sagittis turpis.

Donec ut egestas arcu, vel aliquam orci. Praesent et aliquam ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur bibendum justo eget magna semper, non gravida lacus vestibulum. Vivamus nec sapien lacinia, blandit metus eget, malesuada metus. Nunc quis enim quis eros mollis convallis non sit amet augue. Aenean commodo vehicula metus et malesuada. Phasellus quam metus, lacinia vel vehicula ac, semper non metus. Ut vehicula magna in risus interdum, at imperdiet elit efficitur. Suspendisse pharetra purus id erat mattis interdum. Mauris sagittis arcu massa. Nam mollis blandit leo nec facilisis. In sit amet purus a justo tempor tincidunt nec vel augue.

Aliquam gravida felis id tellus bibendum scelerisque. Quisque in condimentum tellus. Nullam euismod egestas est, vitae elementum dui pulvinar a. Vivamus ullamcorper mauris vel magna consequat elementum in non ante. Pellentesque malesuada nibh lacus, eget posuere arcu vulputate et. Praesent rhoncus varius malesuada. Donec nec imperdiet velit. Donec eu dolor tellus. Nam ultricies rutrum lacus, quis rutrum mi porta vel. Nullam sed condimentum dolor. Pellentesque non velit non ligula vestibulum dictum. Phasellus eu sem vel nisl luctus varius nec elementum sem. Quisque id odio scelerisque, egestas purus eget, sodales lectus. Morbi et diam eget elit faucibus interdum et sed eros.

Phasellus pulvinar ligula at feugiat fermentum. Phasellus molestie, enim eu faucibus mattis, ex erat sagittis orci, quis posuere dui ex sed dui. Nam placerat euismod tincidunt. In euismod finibus lorem at vehicula. Mauris malesuada porttitor metus vitae accumsan. Vivamus lobortis libero eu leo ultricies, et pharetra massa suscipit. Nulla nec ligula facilisis, efficitur eros et, ultricies libero. Nam egestas nisi eros, in finibus ipsum egestas eu. Phasellus ullamcorper suscipit eros, at rutrum nunc efficitur et.

Donec a elit tempor, finibus nibh blandit, suscipit orci. Maecenas fermentum diam non nisl pharetra elementum. Vestibulum hendrerit neque tempus justo tincidunt luctus. Aenean nec turpis vel lacus placerat egestas at in sem. Phasellus quis dolor malesuada, elementum massa vitae, sagittis magna. Aenean rutrum est quis tempor iaculis. Morbi accumsan ipsum massa, ut cursus purus dignissim ut. Etiam in felis nec justo dignissim ultrices vitae eu tortor.[/div][/div][/div]
[/div][div=max-width:700px;opacity:0.6;letter-spacing:0.3em;font-size:0.5em;text-align:right;margin:auto;center;]code by RI.a|fc: minsung8809 {ig}[/div][nobr]

[comment]--------------------------main classes here--------------------------[/comment]
[class=Container]
min-width:200px;
max-width:700px;
height:auto;
display:flex;
flex-wrap:wrap;
padding:0.3em;
padding-bottom:0.8em;
align-items:center;
justify-content:space-evenly;
margin:auto;center;
--color1:#CCCCCC;
--color2:#600807;
--color3:#401004;
--color4:#250F01;
--color5:#222222;
background:var(--color4);
[/class]

[class=Mainpic]
width:250px;
height:250px;
border-radius:50%;
background:url('https://i.pinimg.com/originals/26/89/d8/2689d8591d53d599227edba629a3a20d.jpg');
background-size:130%;
background-position:0em 0em;
filter:grayscale(0);
[/class]

[comment]--------------------------content classes here--------------------------[/comment]

[class=infobanner]
width:250px;
height:150px;
color:var(--color1);
font-family: Montserrat;
font-size:0.8em;
padding-top:1em;
padding-bottom:1em;
border-bottom:3px solid var(--color2);
[/class]

[class=title]
font-family: Major Mono Display;
font-size:1em;
color:var(--color1);
display:inline-block;
[/class]

[class=textWrap]
min-width:200px;
max-width:680px;
height:40vh;
overflow:hidden;
padding:0.3em;
box-shadow:3px 3px 0px var(--color2);
[/class]

[class=scrollWrap]
width:105%;
height:40vh;
overflow:scroll;
[/class]

[class=textBox]
width:95%;
font-family: Montserrat;
font-size:0.8em;
color:var(--color1);
text-align:justify;
[/class]
[/nobr]
 
Last edited:
Woah thank you.I needed this one.
...and done! Thanks again for requesting Sunnyside Sunnyside !

[div class=Container]
[div class=Mainpic]
[/div]

[div class=infobanner][div class=title]NAME HERE[/div]

|[div class=title]Outfit[/div] |
|[div class=title]Mood[/div] feels|
|[div class=title]Location[/div] somewhere|
|[div class=title]Mentions[/div] @tag |
|[div class=title]Interactions[/div] @tag |[/div]

[div class=textWrap][div class=scrollWrap][div class=textBox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a blandit nulla, vitae dignissim lacus. Pellentesque vitae neque ultricies, lobortis orci ut, dapibus leo. Nam hendrerit sagittis nunc, quis mattis purus auctor ac. Sed at tellus vitae tellus sodales rhoncus id sed dui. Proin egestas vitae est ac ornare. Morbi non risus vulputate purus euismod tincidunt nec nec enim. Sed in volutpat sapien, a sagittis turpis.

Donec ut egestas arcu, vel aliquam orci. Praesent et aliquam ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur bibendum justo eget magna semper, non gravida lacus vestibulum. Vivamus nec sapien lacinia, blandit metus eget, malesuada metus. Nunc quis enim quis eros mollis convallis non sit amet augue. Aenean commodo vehicula metus et malesuada. Phasellus quam metus, lacinia vel vehicula ac, semper non metus. Ut vehicula magna in risus interdum, at imperdiet elit efficitur. Suspendisse pharetra purus id erat mattis interdum. Mauris sagittis arcu massa. Nam mollis blandit leo nec facilisis. In sit amet purus a justo tempor tincidunt nec vel augue.

Aliquam gravida felis id tellus bibendum scelerisque. Quisque in condimentum tellus. Nullam euismod egestas est, vitae elementum dui pulvinar a. Vivamus ullamcorper mauris vel magna consequat elementum in non ante. Pellentesque malesuada nibh lacus, eget posuere arcu vulputate et. Praesent rhoncus varius malesuada. Donec nec imperdiet velit. Donec eu dolor tellus. Nam ultricies rutrum lacus, quis rutrum mi porta vel. Nullam sed condimentum dolor. Pellentesque non velit non ligula vestibulum dictum. Phasellus eu sem vel nisl luctus varius nec elementum sem. Quisque id odio scelerisque, egestas purus eget, sodales lectus. Morbi et diam eget elit faucibus interdum et sed eros.

Phasellus pulvinar ligula at feugiat fermentum. Phasellus molestie, enim eu faucibus mattis, ex erat sagittis orci, quis posuere dui ex sed dui. Nam placerat euismod tincidunt. In euismod finibus lorem at vehicula. Mauris malesuada porttitor metus vitae accumsan. Vivamus lobortis libero eu leo ultricies, et pharetra massa suscipit. Nulla nec ligula facilisis, efficitur eros et, ultricies libero. Nam egestas nisi eros, in finibus ipsum egestas eu. Phasellus ullamcorper suscipit eros, at rutrum nunc efficitur et.

Donec a elit tempor, finibus nibh blandit, suscipit orci. Maecenas fermentum diam non nisl pharetra elementum. Vestibulum hendrerit neque tempus justo tincidunt luctus. Aenean nec turpis vel lacus placerat egestas at in sem. Phasellus quis dolor malesuada, elementum massa vitae, sagittis magna. Aenean rutrum est quis tempor iaculis. Morbi accumsan ipsum massa, ut cursus purus dignissim ut. Etiam in felis nec justo dignissim ultrices vitae eu tortor.[/div][/div][/div]
[/div]
code by RI.a|fc: minsung8809 {ig}
[class=Container] min-width:200px; max-width:700px; height:auto; display:flex; flex-wrap:wrap; padding:0.3em; padding-bottom:0.8em; align-items:center; justify-content:space-evenly; margin:auto;center; --color1:#CCCCCC; --color2:#600807; --color3:#401004; --color4:#250F01; --color5:#222222; background:var(--color4); [/class] [class=Mainpic] width:250px; height:250px; border-radius:50%; background:url('https://i.pinimg.com/originals/26/89/d8/2689d8591d53d599227edba629a3a20d.jpg'); background-size:130%; background-position:0em 0em; filter:grayscale(0); [/class] [class=infobanner] width:250px; height:150px; color:var(--color1); font-family: Montserrat; font-size:0.8em; padding-top:1em; padding-bottom:1em; border-bottom:3px solid var(--color2); [/class] [class=title] font-family: Major Mono Display; font-size:1em; color:var(--color1); display:inline-block; [/class] [class=textWrap] min-width:200px; max-width:680px; height:40vh; overflow:hidden; padding:0.3em; box-shadow:3px 3px 0px var(--color2); [/class] [class=scrollWrap] width:105%; height:40vh; overflow:scroll; [/class] [class=textBox] width:95%; font-family: Montserrat; font-size:0.8em; color:var(--color1); text-align:justify; [/class]

Code:
[div class=Container]
[div=width:250px;height:250px;border-radius:50%;border:1px solid var(--color3);padding:1em;box-shadow:-3px 2px 0px var(--color2);][div class=Mainpic][/div][/div]

[div class=infobanner][div class=title][size=35px]NAME HERE[/size][/div][div=float:right;margin:auto;center;width:50px;height:50px;border-radius:50%;border:1px solid var(--color3);padding:0.5em;][div=width:50px;height:50px;border-radius:50%;background:url('https://i.pinimg.com/564x/f1/af/39/f1af399c849bf963debe1fb5f04b2f12.jpg');background-size:cover;background-position:center;filter:grayscale(50);][/div][/div]
|[div class=title][font=Major Mono Display]Outfit[/font][/div] [url=][fa]fa-play[/fa][/url]|
|[div class=title]Mood[/div] [font=Montserrat]feels|[/font]
|[div class=title]Location[/div] somewhere|
|[div class=title]Mentions[/div] @tag |
|[div class=title]Interactions[/div] @tag |[/div]

[div class=textWrap][div class=scrollWrap][div class=textBox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a blandit nulla, vitae dignissim lacus. Pellentesque vitae neque ultricies, lobortis orci ut, dapibus leo. Nam hendrerit sagittis nunc, quis mattis purus auctor ac. Sed at tellus vitae tellus sodales rhoncus id sed dui. Proin egestas vitae est ac ornare. Morbi non risus vulputate purus euismod tincidunt nec nec enim. Sed in volutpat sapien, a sagittis turpis.

Donec ut egestas arcu, vel aliquam orci. Praesent et aliquam ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur bibendum justo eget magna semper, non gravida lacus vestibulum. Vivamus nec sapien lacinia, blandit metus eget, malesuada metus. Nunc quis enim quis eros mollis convallis non sit amet augue. Aenean commodo vehicula metus et malesuada. Phasellus quam metus, lacinia vel vehicula ac, semper non metus. Ut vehicula magna in risus interdum, at imperdiet elit efficitur. Suspendisse pharetra purus id erat mattis interdum. Mauris sagittis arcu massa. Nam mollis blandit leo nec facilisis. In sit amet purus a justo tempor tincidunt nec vel augue.

Aliquam gravida felis id tellus bibendum scelerisque. Quisque in condimentum tellus. Nullam euismod egestas est, vitae elementum dui pulvinar a. Vivamus ullamcorper mauris vel magna consequat elementum in non ante. Pellentesque malesuada nibh lacus, eget posuere arcu vulputate et. Praesent rhoncus varius malesuada. Donec nec imperdiet velit. Donec eu dolor tellus. Nam ultricies rutrum lacus, quis rutrum mi porta vel. Nullam sed condimentum dolor. Pellentesque non velit non ligula vestibulum dictum. Phasellus eu sem vel nisl luctus varius nec elementum sem. Quisque id odio scelerisque, egestas purus eget, sodales lectus. Morbi et diam eget elit faucibus interdum et sed eros.

Phasellus pulvinar ligula at feugiat fermentum. Phasellus molestie, enim eu faucibus mattis, ex erat sagittis orci, quis posuere dui ex sed dui. Nam placerat euismod tincidunt. In euismod finibus lorem at vehicula. Mauris malesuada porttitor metus vitae accumsan. Vivamus lobortis libero eu leo ultricies, et pharetra massa suscipit. Nulla nec ligula facilisis, efficitur eros et, ultricies libero. Nam egestas nisi eros, in finibus ipsum egestas eu. Phasellus ullamcorper suscipit eros, at rutrum nunc efficitur et.

Donec a elit tempor, finibus nibh blandit, suscipit orci. Maecenas fermentum diam non nisl pharetra elementum. Vestibulum hendrerit neque tempus justo tincidunt luctus. Aenean nec turpis vel lacus placerat egestas at in sem. Phasellus quis dolor malesuada, elementum massa vitae, sagittis magna. Aenean rutrum est quis tempor iaculis. Morbi accumsan ipsum massa, ut cursus purus dignissim ut. Etiam in felis nec justo dignissim ultrices vitae eu tortor.[/div][/div][/div]
[/div][div=max-width:700px;opacity:0.6;letter-spacing:0.3em;font-size:0.5em;text-align:right;margin:auto;center;]code by RI.a|fc: minsung8809 {ig}[/div][nobr]

[comment]--------------------------main classes here--------------------------[/comment]
[class=Container]
min-width:200px;
max-width:700px;
height:auto;
display:flex;
flex-wrap:wrap;
padding:0.3em;
padding-bottom:0.8em;
align-items:center;
justify-content:space-evenly;
margin:auto;center;
--color1:#CCCCCC;
--color2:#600807;
--color3:#401004;
--color4:#250F01;
--color5:#222222;
background:var(--color4);
[/class]

[class=Mainpic]
width:250px;
height:250px;
border-radius:50%;
background:url('https://i.pinimg.com/originals/26/89/d8/2689d8591d53d599227edba629a3a20d.jpg');
background-size:130%;
background-position:0em 0em;
filter:grayscale(0);
[/class]

[comment]--------------------------content classes here--------------------------[/comment]

[class=infobanner]
width:250px;
height:150px;
color:var(--color1);
font-family: Montserrat;
font-size:0.8em;
padding-top:1em;
padding-bottom:1em;
border-bottom:3px solid var(--color2);
[/class]

[class=title]
font-family: Major Mono Display;
font-size:1em;
color:var(--color1);
display:inline-block;
[/class]

[class=textWrap]
min-width:200px;
max-width:680px;
height:40vh;
overflow:hidden;
padding:0.3em;
box-shadow:3px 3px 0px var(--color2);
[/class]

[class=scrollWrap]
width:105%;
height:40vh;
overflow:scroll;
[/class]

[class=textBox]
width:95%;
font-family: Montserrat;
font-size:0.8em;
color:var(--color1);
text-align:justify;
[/class]
[/nobr]
 
Request 3
oooo your codes are so pretty! like each one is a special snowflake that is pretty! also here's my request if you dont mind

Function: IC Post
Mobile-Friendly: Totally!
Color Scheme:
#ff48c4 (255,72,196), #2bd1fc (43,209,252), #f3ea5f (243,234,95), #c04df9 (192,77,249), #ff3f3f (255,63,63)
Images/Gif: Just 2-3 photos would be fine.
Image URL/GIF URL: Photo 1, Photo 2, Photo 3, GIF 1, GIF 2 (just pick from any of these!)
Style: Simple but still cool
Theme: Full On 80's aesthetic! (If you can't, then just go for something retro.)
Specific Features: If you could make it look like an old computer in the 80's, I would be happy! One hidden scrollbar with some pictures and GIFs on the side.
Do you mind sharing the code with others?: Nope! I always tell myself that sharing is caring!

thats all for my request! hopefully you can do it, your codes are literally works of art! ;D
 
final girl. final girl. I can't access the links on your request form. Could you check the privacy settings or send them to me via pm?

thefinalgirl thefinalgirl That's so sweet thank you! And thanks for requesting! 80s theme sound very fun to make! I'll let you know when I start working on your request!
 
Finished 2
[class=riaBox]margin:auto;center;min-width:200px;max-width:450px;height:auto;display:flex;--color1:#fff;--color2:#707070;--color3:#5a5353;--img1:url('https://i.imgur.com/5Ft7td8.jpg');background:var(--color3);font-family:Oswald;color:var(--color1);[/class][class=riaPic]width:100px;height:100px;background:var(--img1);background-size:200%;background-position:-1em -1em;border:1px solid var(--color3)[/class][class=riaText]min=width:200px;max-width:290px;border:1px solid var(--color3);background:var(--color1);font-family:Roboto;font-size:0.8em;color:var(--color2);padding-left:0.5em;padding-right:0.5em;[/class][div class=riaBox][div class=riaPic][/div][div class=riaText]Code for Wonderously
Thank you for requesting final girl. final girl. !
Type: IC Post | Theme: Grunge | Mobile Friendly: Yes | Features: Hidden scroll, hidden tag information (click the 2nd pic at the bottom!)
Free to use with credits[/div]
02
[/div]

[div class=mainContainer][div class=leftBar]
[div class=mainPic]
[/div]
[div class=header]name here.[/div][/div][div class=contentWrap][div class=scrollWrap][div class=grungeText]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam purus nec sapien tempor eleifend. Ut accumsan sollicitudin gravida. Praesent facilisis hendrerit malesuada. Duis a sem purus. Mauris tellus urna, iaculis quis sollicitudin ac, placerat vitae quam. Cras aliquam malesuada placerat. Nulla ac lectus sodales, tincidunt tortor vitae, rhoncus arcu. Nam hendrerit venenatis porttitor. Maecenas tincidunt sapien ac euismod congue.

Duis tincidunt diam quis ornare cursus. Praesent hendrerit interdum consequat. Cras interdum nisi nulla. Curabitur eu dictum nisi, nec viverra turpis. Nam fermentum efficitur magna euismod dapibus. Proin rutrum ipsum nec risus pretium venenatis eget a tellus. Duis eget porta dolor, laoreet cursus urna. Curabitur eros nunc, fringilla at tellus quis, porttitor porttitor erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id sapien vel eros mollis convallis.

Morbi condimentum, ex in varius imperdiet, odio nisi pulvinar mi, id accumsan nunc dui sit amet magna. Mauris nec accumsan magna. Proin consequat turpis ut justo tristique, feugiat tempor felis semper. Aenean tincidunt sem nibh, in suscipit nisl mollis eu. Pellentesque ac laoreet mi, at malesuada sapien. Donec semper mi justo, lobortis vehicula risus lobortis et. Donec efficitur efficitur magna. Pellentesque ultricies lacinia sapien, at viverra lectus iaculis id. Donec lorem nibh, ultricies ac lacus id, varius pharetra orci. Nunc ut massa eget massa vehicula vehicula. Morbi vel porta ante, pharetra posuere arcu.

Proin sodales elementum ligula quis luctus. Aenean sagittis justo lacinia, bibendum ex tristique, tempus elit. Vivamus interdum lorem in leo mattis, non volutpat urna dapibus. Duis volutpat dui aliquet, luctus massa vel, facilisis risus. Aliquam ullamcorper pharetra tellus eu facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis at congue sem. Ut non interdum est. Sed sit amet auctor arcu, sed faucibus est. Nunc cursus urna sed metus posuere volutpat. Nullam convallis, mi ornare rhoncus mattis, nisi mauris fermentum libero, in tempus leo sapien id lacus.

Integer et justo aliquam dui auctor faucibus dignissim porta enim. Morbi ultrices mauris ligula, dapibus iaculis mauris facilisis quis. Maecenas vel blandit diam, eu scelerisque eros. Integer ante arcu, venenatis vitae ornare ut, lacinia nec nunc. Ut bibendum at nisl ut luctus. Donec ac luctus nisl. Integer vitae ligula in est imperdiet suscipit. Maecenas enim orci, lacinia nec urna id, consectetur posuere nibh. Nulla ut dignissim nulla. Phasellus justo dui, iaculis et orci ut, euismod rhoncus eros. [/div][/div]
[div class=footer]
[div class=button]
[/div][div class=infoBar][div class=infoScroll][div class=infoText]{location} somewhere
{mood} feels
{outfit} link
{mentions} @tag
{interactions} @tag [/div][/div][/div][/div]
[/div]
[/div]
code by RI.a
[class=mainContainer] margin:auto;center; min-width:200px; max-width:805px; height:auto; display:flex; flex-wrap:wrap; justify-content:center; --color1:#EAEBED; --color2:#075082; --color3:#2B303A; --color4:#1D2D44; --img1:url('https://i.pinimg.com/564x/49/b2/89/49b289d93c7bd97b98263b00b85d38f0.jpg'); --img2:url('https://i.pinimg.com/564x/18/bb/6f/18bb6f6340961fd89d48ea0aeef0ee14.jpg'); background:var(--color3); border-top-right-radius:50px; border-bottom-right-radius:50px; border-bottom-left-radius:50px; [/class] [class=leftBar] display:flex; flex-wrap:wrap; width:240px; height:auto; justify-content:space-evenly; [/class] [class=mainPic] flex:1; width:200px; height:200px; border-radius:50%; background:var(--img1); background-size:cover; background-position:center; [/class] [class=header] flex:1; width:auto; height:auto; text-align:center; font-family:Special Elite; text-shadow:3px 0px 3px var(--color1); font-size:50px; color:var(--color2); [/class] [class=footer] display:flex; width:100%; height:auto; align-items:center; [/class] [class=button] display:inline-block; flex:1; width:80px; height:80px; border-radius:50%; background:var(--img2); background-size:cover; background-position:center; filter:grayscale(100) brightness(105%); transition:all 0.5s ease-in; cursor:pointer; z-index:2; [/class] [class name=button state=hover] filter:grayscale(0) brightness(100%); [/class] [class=contentWrap] min-width:200px; max-width:540px; height:auto; border-top-right-radius:50px; border-bottom-right-radius:50px; border-bottom-left-radius:50px; border:10px solid var(--color2); overflow:hidden; [/class] [class=scrollWrap] width:105%; height:50vh; overflow:scroll; [/class] [class=grungeText] padding:0.8em; width:92%; font-family:Oswald; font-size:0.8em; color:var(--color1); text-align:justify; [/class] [class=infoBar] display:none; flex:2; max-width:250px; height:10vh; overflow:hidden; background:var(--color4); [/class] [class=infoScroll] width:105%; height:10vh; overflow:scroll; [/class] [class=infoText] width:92%; font-family:Oswald; font-size:0.8em; color:var(--color1); padding:0.8em; [/class] [script class=button on=click] fadeIn 750 infoBar [/script] [script class=grungeText on=mouseenter] fadeOut 750 infoBar [/script]

Code:
[div class=mainContainer][div class=leftBar][div=width:200px;height:200px;padding:20px;border-radius:50%;border:1px solid var(--color1);][div class=mainPic][/div][/div]
[div class=header][font=Special Elite]name here.[/font][/div][/div][div class=contentWrap][div class=scrollWrap][div class=grungeText]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam purus nec sapien tempor eleifend. Ut accumsan sollicitudin gravida. Praesent facilisis hendrerit malesuada. Duis a sem purus. Mauris tellus urna, iaculis quis sollicitudin ac, placerat vitae quam. Cras aliquam malesuada placerat. Nulla ac lectus sodales, tincidunt tortor vitae, rhoncus arcu. Nam hendrerit venenatis porttitor. Maecenas tincidunt sapien ac euismod congue.

Duis tincidunt diam quis ornare cursus. Praesent hendrerit interdum consequat. Cras interdum nisi nulla. Curabitur eu dictum nisi, nec viverra turpis. Nam fermentum efficitur magna euismod dapibus. Proin rutrum ipsum nec risus pretium venenatis eget a tellus. Duis eget porta dolor, laoreet cursus urna. Curabitur eros nunc, fringilla at tellus quis, porttitor porttitor erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id sapien vel eros mollis convallis.

Morbi condimentum, ex in varius imperdiet, odio nisi pulvinar mi, id accumsan nunc dui sit amet magna. Mauris nec accumsan magna. Proin consequat turpis ut justo tristique, feugiat tempor felis semper. Aenean tincidunt sem nibh, in suscipit nisl mollis eu. Pellentesque ac laoreet mi, at malesuada sapien. Donec semper mi justo, lobortis vehicula risus lobortis et. Donec efficitur efficitur magna. Pellentesque ultricies lacinia sapien, at viverra lectus iaculis id. Donec lorem nibh, ultricies ac lacus id, varius pharetra orci. Nunc ut massa eget massa vehicula vehicula. Morbi vel porta ante, pharetra posuere arcu.

Proin sodales elementum ligula quis luctus. Aenean sagittis justo lacinia, bibendum ex tristique, tempus elit. Vivamus interdum lorem in leo mattis, non volutpat urna dapibus. Duis volutpat dui aliquet, luctus massa vel, facilisis risus. Aliquam ullamcorper pharetra tellus eu facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis at congue sem. Ut non interdum est. Sed sit amet auctor arcu, sed faucibus est. Nunc cursus urna sed metus posuere volutpat. Nullam convallis, mi ornare rhoncus mattis, nisi mauris fermentum libero, in tempus leo sapien id lacus.

Integer et justo aliquam dui auctor faucibus dignissim porta enim. Morbi ultrices mauris ligula, dapibus iaculis mauris facilisis quis. Maecenas vel blandit diam, eu scelerisque eros. Integer ante arcu, venenatis vitae ornare ut, lacinia nec nunc. Ut bibendum at nisl ut luctus. Donec ac luctus nisl. Integer vitae ligula in est imperdiet suscipit. Maecenas enim orci, lacinia nec urna id, consectetur posuere nibh. Nulla ut dignissim nulla. Phasellus justo dui, iaculis et orci ut, euismod rhoncus eros. [/div][/div]
[div class=footer][div=width:80px;height:80px;border-radius:50%;padding:0.5em;border:1px solid var(--color1);][div class=button][/div][/div][div class=infoBar][div class=infoScroll][div class=infoText][font=Oswald]{location}[/font] somewhere
{mood} feels
{outfit} [URL="http://link"]link[/URL]
{mentions} @tag 
{interactions} @tag [/div][/div][/div][/div]
[/div]
[/div][div=max-width:990px;text-align:right;font-size:0.5em;letter-spacing:0.3em;opacity:0.6;]code by RI.a[/div][nobr]

[comment]----------------------------------main classes here----------------------------------[/comment]
[class=mainContainer]
margin:auto;center;
min-width:200px;
max-width:805px;
height:auto;
display:flex;
flex-wrap:wrap;
justify-content:center;
--color1:#EAEBED;
--color2:#075082;
--color3:#2B303A;
--color4:#1D2D44;
--img1:url('https://i.pinimg.com/564x/49/b2/89/49b289d93c7bd97b98263b00b85d38f0.jpg');
--img2:url('https://i.pinimg.com/564x/18/bb/6f/18bb6f6340961fd89d48ea0aeef0ee14.jpg');
background:var(--color3);
border-top-right-radius:50px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;
[/class]

[class=leftBar]
display:flex;
flex-wrap:wrap;
width:240px;
height:auto;
justify-content:space-evenly;
[/class]

[class=mainPic]
flex:1;
width:200px;
height:200px;
border-radius:50%;
background:var(--img1);
background-size:cover;
background-position:center;
[/class]

[class=header]
flex:1;
width:auto;
height:auto;
text-align:center;
font-family:Special Elite;
text-shadow:3px 0px 3px var(--color1);
font-size:50px;
color:var(--color2);
[/class]

[class=footer]
display:flex;
width:100%;
height:auto;
align-items:center;
[/class]

[class=button]
display:inline-block;
flex:1;
width:80px;
height:80px;
border-radius:50%;
background:var(--img2);
background-size:cover;
background-position:center;
filter:grayscale(100) brightness(105%);
transition:all 0.5s ease-in;
cursor:pointer;
z-index:2;
[/class]

[class name=button state=hover]
filter:grayscale(0) brightness(100%);
[/class]

[comment]----------------------------------text classes here----------------------------------[/comment]
[class=contentWrap]
min-width:200px;
max-width:540px;
height:auto;
border-top-right-radius:50px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;
border:10px solid var(--color2);
overflow:hidden;
[/class]

[class=scrollWrap]
width:105%;
height:50vh;
overflow:scroll;
[/class]

[class=grungeText]
padding:0.8em;
width:92%;
font-family:Oswald;
font-size:0.8em;
color:var(--color1);
text-align:justify;
[/class]

[class=infoBar]
display:none;
flex:2;
max-width:250px;
height:10vh;
overflow:hidden;
background:var(--color4);
[/class]

[class=infoScroll]
width:105%;
height:10vh;
overflow:scroll;
[/class]

[class=infoText]
width:92%;
font-family:Oswald;
font-size:0.8em;
color:var(--color1);
padding:0.8em;
[/class]

[comment]----------------------------------script classes here----------------------------------[/comment]
[script class=button on=click]
fadeIn 750 infoBar
[/script]

[script class=grungeText on=mouseenter]
fadeOut 750 infoBar
[/script][/nobr]
 
Request 4
Function: Character Sheet
Mobile Friendly: Nah
Color Scheme: maybe a soft red/pink vibe?
No. of images and/or gifs: 2
tumblr_pk0k9xSRDk1r8ko3mo1_400.gif
tumblr_pk0k9xSRDk1r8ko3mo2_400.gif
faceclaim is moon taeil
Image URL/Source: paste the .jpg/.png/.gif here. It'll be great if you can include the artist/faceclaim too
Style: Hidden scrollbars, maybe like an social media type layout, tabs aren't needed unless you think they'd fit.
Theme: Fluff/Cute
Specific Features: Just hidden scrolls.
Anything else?: Nope! just go crazy with this honestly.
Do you mind sharing the code with others?: Yes
 
Finished 3
[class=riaBox]margin:auto;center;min-width:200px;max-width:450px;height:auto;display:flex;--color1:#fff;--color2:#707070;--color3:#5a5353;--img1:url('https://i.imgur.com/5Ft7td8.jpg');background:var(--color3);font-family:Oswald;color:var(--color1);[/class][class=riaPic]width:100px;height:100px;background:var(--img1);background-size:200%;background-position:-1em -1em;border:1px solid var(--color3)[/class][class=riaText]min=width:200px;max-width:290px;border:1px solid var(--color3);background:var(--color1);font-family:Roboto;font-size:0.8em;color:var(--color2);padding-left:0.5em;padding-right:0.5em;[/class][div class=riaBox][div class=riaPic][/div][div class=riaText]Code for LittleRedAssassin
This was fun to make! Hope you like it thefinalgirl thefinalgirl !
Type: IC Post | Theme: 80's computer | Mobile Friendly: Yes, the pictures won't be displayed on mobile | Features: Hidden scroll
Free to use with credits[/div]
03
[/div]

[div class=screenContainer][div class=screenPage][div class=screenScroll][div class=screenText][div class=mainPic][/div]
[div class=screenHeader]FULL NAME HERE[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis placerat lectus, in aliquet libero tempus vel. In nisi magna, posuere ut pulvinar at, laoreet nec est. Proin faucibus enim arcu, non maximus felis viverra vel. Phasellus pulvinar pellentesque nunc. Maecenas condimentum arcu sed enim condimentum maximus. Integer at risus sodales, maximus ex vel, fringilla eros. Donec a enim nibh. Pellentesque nec turpis ante. Ut eget rhoncus libero. Nulla facilisi. Nullam mollis nulla justo, sit amet iaculis lectus bibendum quis. Morbi tristique suscipit dolor.

Nam ex lacus, lacinia sit amet volutpat vel, ultricies vel neque. Donec ut tristique neque. Proin mollis arcu turpis, non facilisis erat hendrerit sit amet. Aenean porta, dolor lacinia tempor aliquet, massa dolor cursus nibh, ut consequat odio turpis nec mauris. Sed dictum odio nisi. In volutpat elementum massa ac congue. Fusce condimentum egestas elit nec convallis.[/div][/div]
[/div][div class=buttonWrap][div class=button][/div][/div][/div]

[div class=blockContainer][div class=tagBox]outfit:
location:
mentions:
interactions: [/div][div class=gaPics]
[/div][div class=gaPics]
[/div][/div]
code by RI.a

[class=screenContainer] margin:auto;center; min-width:200px; max-width:600px; height:auto; padding:3em; display:flex; flex-wrap:wrap; --colorw:#AAA; --colorb:#707070; --color1:#FF48C4; --color2:#2BD1FC; --color3:#F3EA5F; --img1:url('https://i.pinimg.com/564x/18/5c/a2/185ca2eb5591b562b7227fdd92fe4f96.jpg'); background:var(--colorw); border-radius:20px; [/class] [class=buttonWrap] padding:1em; width:53px; height:auto; display:flex; flex-wrap:wrap; [/class] [class=button] align-self:flex-end; width:50px; height:50px; border-radius:50%; background:var(--colorb); box-shadow:3px 3px 0px var(--color1); [/class] [class=screenPage] min-width:200px; max-width:500px; height:60vh; overflow:hidden; box-shadow:3px 3px 0px var(--color3); border-radius:50px; border:1px solid var(--color3); [/class] [class=screenScroll] width:105%; height:60vh; overflow:scroll; [/class] [class=screenText] width:90%; padding:1em; font-family:Anton; font-size:1em; color:var(--colorb); margin-left:-0.2em; [/class] [class=screenHeader] font-family:Bungee Shade; font-size:3em; color:var(--colorb); text-shadow:2px 2px 0px var(--color2); [/class] [class=mainPic] margin:auto;center; width:300px; height:30vh; background:var(--img1); background-size:cover; background-position:center; border-radius:20px; [/class] [class name=mainPic maxWidth=600px] display:none; [/class] [class=gaPics] width:330px; height:30vh; [/class] [class name=gaPics maxWidth=600px] display:none; [/class] [class=blockContainer] margin:auto;center; min-width:200px; max-width:1000px; height:auto; display:flex; flex-wrap:wrap; justify-content:space-evenly; align-items:center; padding:0.8em; --colorw:#AAA; --colorb:#707070; --color3:#F3EA5F; --color4:#C04DF9; --color5:#FF3F3F; --img2:url('https://i.pinimg.com/564x/8f/7d/da/8f7ddaa0f0e9506110fd4fdd49a94f0f.jpg'); --gif1:url('https://66.media.tumblr.com/1afc0c05d1cf8825c45ed7691a8bf004/tumblr_p9ujs6J3NK1vuefjyo1_540.gif'); background:var(--colorw); border-radius:20px; [/class] [class=tagBox] min-width:200px; max-width:330px; height:auto; font-family:Anton; font-size:0.8em; color:var(--colorb); align-self:flex-end; [/class]

Code:
[div class=screenContainer][div class=screenPage][div class=screenScroll][div class=screenText][div class=mainPic][/div]
[div class=screenHeader][font=Bungee Shade]FULL NAME HERE[/font][/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis placerat lectus, in aliquet libero tempus vel. In nisi magna, posuere ut pulvinar at, laoreet nec est. Proin faucibus enim arcu, non maximus felis viverra vel. Phasellus pulvinar pellentesque nunc. Maecenas condimentum arcu sed enim condimentum maximus. Integer at risus sodales, maximus ex vel, fringilla eros. Donec a enim nibh. Pellentesque nec turpis ante. Ut eget rhoncus libero. Nulla facilisi. Nullam mollis nulla justo, sit amet iaculis lectus bibendum quis. Morbi tristique suscipit dolor.

Nam ex lacus, lacinia sit amet volutpat vel, ultricies vel neque. Donec ut tristique neque. Proin mollis arcu turpis, non facilisis erat hendrerit sit amet. Aenean porta, dolor lacinia tempor aliquet, massa dolor cursus nibh, ut consequat odio turpis nec mauris. Sed dictum odio nisi. In volutpat elementum massa ac congue. Fusce condimentum egestas elit nec convallis.[/div][/div]
[/div][div class=buttonWrap][div class=button][/div][/div][/div]

[div class=blockContainer][div class=tagBox][font=Anton]outfit:[/font]
location:
mentions:
interactions: [/div][div class=gaPics][div=width:330px;height:30vh;background:var(--gif1);background-size:cover;border-radius:20px;box-shadow:3px 3px 0px var(--color5);][/div][/div][div class=gaPics][div=width:330px;height:30vh;background:var(--img2);background-size:cover;border-radius:20px;box-shadow:3px 3px 0px var(--color4);][/div][/div][/div][div=max-width:1130px;text-align:right;letter-spacing:0.3em;opacity:0.6;font-size:0.5em;]code by RI.a[/div]
[nobr]
[comment]---------------------main classes here---------------------[/comment]
[class=screenContainer]
margin:auto;center;
min-width:200px;
max-width:600px;
height:auto;
padding:3em;
display:flex;
flex-wrap:wrap;
--colorw:#AAA;
--colorb:#707070;
--color1:#FF48C4;
--color2:#2BD1FC;
--color3:#F3EA5F;
--img1:url('https://i.pinimg.com/564x/18/5c/a2/185ca2eb5591b562b7227fdd92fe4f96.jpg');
background:var(--colorw);
border-radius:20px;
[/class]

[class=buttonWrap]
padding:1em;
width:53px;
height:auto;
display:flex;
flex-wrap:wrap;
[/class]

[class=button]
align-self:flex-end;
width:50px;
height:50px;
border-radius:50%;
background:var(--colorb);
box-shadow:3px 3px 0px var(--color1);
[/class]

[comment]---------------------text classes here---------------------[/comment]
[class=screenPage]
min-width:200px;
max-width:500px;
height:60vh;
overflow:hidden;
box-shadow:3px 3px 0px var(--color3);
border-radius:50px;
border:1px solid var(--color3);
[/class]

[class=screenScroll]
width:105%;
height:60vh;
overflow:scroll;
[/class]

[class=screenText]
width:90%;
padding:1em;
font-family:Anton;
font-size:1em;
color:var(--colorb);
margin-left:-0.2em;
[/class]

[class=screenHeader]
font-family:Bungee Shade;
font-size:3em;
color:var(--colorb);
text-shadow:2px 2px 0px var(--color2);
[/class]

[comment]---------------------picture classes here---------------------[/comment]
[class=mainPic]
margin:auto;center;
width:300px;
height:30vh;
background:var(--img1);
background-size:cover;
background-position:center;
border-radius:20px;
[/class]

[class name=mainPic maxWidth=600px]
display:none;
[/class]

[class=gaPics]
width:330px;
height:30vh;
[/class]

[class name=gaPics maxWidth=600px]
display:none;
[/class]

[comment]---------------------bottom box classes here---------------------[/comment]
[class=blockContainer]
margin:auto;center;
min-width:200px;
max-width:1000px;
height:auto;
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
align-items:center;
padding:0.8em;
--colorw:#AAA;
--colorb:#707070;
--color3:#F3EA5F;
--color4:#C04DF9;
--color5:#FF3F3F;
--img2:url('https://i.pinimg.com/564x/8f/7d/da/8f7ddaa0f0e9506110fd4fdd49a94f0f.jpg');
--gif1:url('https://66.media.tumblr.com/1afc0c05d1cf8825c45ed7691a8bf004/tumblr_p9ujs6J3NK1vuefjyo1_540.gif');
background:var(--colorw);
border-radius:20px;
[/class]

[class=tagBox]
min-width:200px;
max-width:330px;
height:auto;
font-family:Anton;
font-size:0.8em;
color:var(--colorb);
align-self:flex-end;
[/class]
[/nobr]
 
Request 5
hiiii ria. I hope you're doing okay bby. <3

Function: IC please!
Mobile Friendly: Yes please!!
Color Scheme: I'm thinking black, white and #550000 all over. :p
No. of images and/or gifs: two please!!
Image URL/Source:
[ background img ] https://st2.depositphotos.com/14027...illustration-pattern-with-alchemy-symbols.jpg
[ character img; fc: mishti rahman ] https://data.whicdn.com/images/309783265/large.jpg
Style: gimme da unicorns. heh. ily. okay, but actually: super simplistic.
Theme: is simple and clean a theme? jk. but go nuts bby.
Specific Features: if I could have space for a background img to put in a pattern (posted above!), hidden scrollbars, + a separate div for name/location/mood, that would be absolutely perfect. before that div I'll be placing a quote unless you can fit a div in there between the character img and the details div? if the character img and the post itself could have a thick border around it I'd love that too. last - I'd love the character img and the div for the name/location/mood to be on the right if that's okay. < 3
Anything else?: no...no I think I asked for enough LOL. bless yew ria. <3
Do you mind sharing the code with others?: I don't mind at all~.
 
Finished 4
[class=riaBox]margin:auto;center;min-width:200px;max-width:450px;height:auto;display:flex;--color1:#fff;--color2:#707070;--color3:#5a5353;--img1:url('https://i.imgur.com/5Ft7td8.jpg');background:var(--color3);font-family:Oswald;color:var(--color1);[/class][class=riaPic]width:100px;height:100px;background:var(--img1);background-size:200%;background-position:-1em -1em;border:1px solid var(--color3)[/class][class=riaText]min=width:200px;max-width:290px;border:1px solid var(--color3);background:var(--color1);font-family:Roboto;font-size:0.8em;color:var(--color2);padding-left:0.5em;padding-right:0.5em;[/class][div class=riaBox][div class=riaPic][/div][div class=riaText]Code for houseplant
This code uses CSS grids. Tabs are 'read/see more'. Use the [br][/br] tags for breaks. Try to keep the number of words in each bubble as shown (except of the relationship one) if not they'll overlap. Enjoy houseplant houseplant ^^
Type: CS | Theme: Pinterest inspired | Mobile Friendly: No | Features: Hidden scroll, Tabs, Hovers, nobr
Free to use with credits[/div]
04
[/div]

[div class=Wrap][div class=mainContainer] [div class="scrollWrap One"][div class=textWrap]
[div class=bubbleWrap] [div class=header]Full Name Here
[div class=tagsBox][div class=title]n.name[/div][div class=tagsText]name here[/div][/div] [div class=tagsBox][div class=title]age[/div][div class=tagsText]xx[/div][/div] [div class=tagsBox][div class=title]gender[/div][div class=tagsText]something[/div][/div] [div class=tagsBox][div class=title]pronoun[/div][div class=tagsText]he/him[/div][/div] [div class=tagsBox][div class=title]occupation[/div][div class=tagsText]something[/div][/div] [div class=tagsBox][div class=title]fc[/div][div class=tagsText]moon taeil[/div][/div] [div class=tagsBox][div class=title]code[/div][div class=tagsText]ri.a[/div][/div] [/div][/div]
[div class=bubbleWrap][div class=header]Personality
[div class=tagsBox][div class=title]like[/div][div class=tagsText]something[/div][/div] [div class=tagsBox][div class=title]dislike[/div][div class=tagsText]something[/div][/div] [div class=tagsBox][div class=title]vice[/div][div class=tagsText]something[/div][/div] [div class=tagsBox][div class=title]virtue[/div][div class=tagsText]something[/div][/div] [div class=tagsBox][div class=title][/div][div class="socialTab ttwo"]...read more[/div][/div][/div][/div]
[div class=bubbleWrap][div class=header]Biography
[div class=title]"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." Once upon a time... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque suscipit diam eget elementum. Phasellus bibendum diam eget purus placerat, vitae commodo turpis faucibus. Keep this to 50 words.[/div] [div class=tagsBox][div class=title][/div][div class="socialTab tthree"]...read more[/div][/div][/div][/div]
[div class=bubbleWrap][div class=header]Relationships
[div class=tagsBox]
U0zWZw7.png
[div class=tagsText][div class=title]Name | Relation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. restrict to about 15 ish words max
[div class=tagsBox]
U0zWZw7.png
[div class=tagsText][div class=title]Name | Relation [/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. restrict to about 15 ish words max[/div][/div] [div class=tagsBox]
U0zWZw7.png
[div class=tagsText][div class=title]Name | Relation [/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. restrict to about 15 ish words max[/div][/div] [div class=tagsBox]
U0zWZw7.png
[div class=tagsText][div class=title]Name | Relation [/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. restrict to about 15 ish words max[/div][/div] [div class=tagsBox]
U0zWZw7.png
[div class=tagsText][div class=title]Name | Relation [/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. restrict to about 15 ish words max[/div][/div] [/div][/div][/div][/div][/div]
[div class=bubbleWrap][div class=header]Play
[div class=sbuttoncontainer][div class=sbuttonfilter]
[/div][div class=sbuttoncontainer][div class=sbuttonfilter][/div][/div][/div] [div class=title]Because Of You - Moon Taeil | Some - Bolbbalgan4[/div] [/div][/div]
[div class=bubbleWrap][div class=header]Description
tumblr_pk0k9xSRDk1r8ko3mo2_400.gif
[div class=tagsBox][div class=title][/div][div class="socialTab tfour"]...see more[/div][/div][/div][/div] [/div][/div] [div class="scrollWrap Two"][div class=textWrap]
[div class=button]
[/div]
[div class=bubbleWrap][div class=tagsBox][div class=header]Biography
[div class="socialTab tthree"]...read more[/div][/div] [div class=tagsBox][div class=header]Description[/div][div class="socialTab tfour"]...read more[/div][/div] [/div][/div]
[div class=bubbleWrap][div class=header]Personality
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque suscipit diam eget elementum. Phasellus bibendum diam eget purus placerat, vitae commodo turpis faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris bibendum lectus dui, in condimentum lectus pulvinar in. Quisque auctor tincidunt nulla, a faucibus lectus maximus at. Aliquam id facilisis ante, ut malesuada felis. Nam venenatis fringilla leo sollicitudin accumsan. Nulla in tortor eget libero viverra fringilla. Nulla facilisi. Nam mi arcu, feugiat luctus felis et, dignissim fermentum purus. Mauris augue mauris, sagittis vitae sem et, placerat tempor turpis. Suspendisse rutrum dolor non tellus suscipit maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eleifend mi et arcu dictum, vel rhoncus urna tempor. Vestibulum et vulputate ex, in porttitor nulla. Maecenas id dignissim purus, aliquet bibendum lectus.

Nunc nisi diam, lacinia nec elit vel, faucibus fringilla sapien. Etiam feugiat mi et mi convallis tincidunt. Donec porta eget urna sit amet fermentum. Nam lobortis tortor ut tincidunt semper. Vestibulum ipsum est, luctus vel nulla quis, auctor faucibus massa. Aenean bibendum lectus id nibh mollis venenatis. Curabitur at porttitor elit. Curabitur vel est posuere, luctus nibh nec, tempus ipsum. Fusce posuere dui sit amet urna ullamcorper pulvinar. Vestibulum vel lacus ipsum. Proin luctus, nisl sagittis lacinia posuere, nisl sapien ullamcorper neque, quis scelerisque urna metus ut mauris. Cras quis rutrum sem. Ut vestibulum urna nisi, in imperdiet mi fringilla sit amet. Sed a sem odio.

[div class=title]Virtues[/div] faega gjoaegea goepmga
[div class=title]Vices[/div] faega gjoaegea goepmga

[div class=title]Likes[/div] faega gjoaegea goepmga
[div class=title]Dislikes[/div] faega gjoaegea goepmga
[/div][/div] [/div][/div] [div class="scrollWrap Three"][div class=textWrap]
[div class=button]
[/div]
[div class=bubbleWrap][div class=tagsBox][div class=header]Personality
[div class="socialTab ttwo"]...read more[/div][/div] [div class=tagsBox][div class=header]Description[/div][div class="socialTab tfour"]...read more[/div][/div] [/div][/div]
[div class=bubbleWrap][div class=header]Biography
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque suscipit diam eget elementum. Phasellus bibendum diam eget purus placerat, vitae commodo turpis faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris bibendum lectus dui, in condimentum lectus pulvinar in. Quisque auctor tincidunt nulla, a faucibus lectus maximus at. Aliquam id facilisis ante, ut malesuada felis. Nam venenatis fringilla leo sollicitudin accumsan. Nulla in tortor eget libero viverra fringilla. Nulla facilisi. Nam mi arcu, feugiat luctus felis et, dignissim fermentum purus. Mauris augue mauris, sagittis vitae sem et, placerat tempor turpis. Suspendisse rutrum dolor non tellus suscipit maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eleifend mi et arcu dictum, vel rhoncus urna tempor. Vestibulum et vulputate ex, in porttitor nulla. Maecenas id dignissim purus, aliquet bibendum lectus.

Nunc nisi diam, lacinia nec elit vel, faucibus fringilla sapien. Etiam feugiat mi et mi convallis tincidunt. Donec porta eget urna sit amet fermentum. Nam lobortis tortor ut tincidunt semper. Vestibulum ipsum est, luctus vel nulla quis, auctor faucibus massa. Aenean bibendum lectus id nibh mollis venenatis. Curabitur at porttitor elit. Curabitur vel est posuere, luctus nibh nec, tempus ipsum. Fusce posuere dui sit amet urna ullamcorper pulvinar. Vestibulum vel lacus ipsum. Proin luctus, nisl sagittis lacinia posuere, nisl sapien ullamcorper neque, quis scelerisque urna metus ut mauris. Cras quis rutrum sem. Ut vestibulum urna nisi, in imperdiet mi fringilla sit amet. Sed a sem odio.

Maecenas sed dignissim lectus. Mauris et ante nibh. Suspendisse potenti. Vivamus ac dui ac risus euismod laoreet ut eu sapien. Suspendisse potenti. Phasellus aliquet urna nec eros ullamcorper ullamcorper. Sed cursus porta ipsum quis aliquet. Integer consequat sapien sem. Vivamus placerat quam risus, sit amet dictum mi fermentum in. Ut id lorem quis ipsum pretium sagittis sed interdum dui.

Phasellus pretium mauris id libero vulputate, nec pretium purus vulputate. Donec aliquam mauris nec ex pellentesque cursus. Duis ligula purus, tristique non arcu eu, hendrerit vehicula ante. Ut dignissim egestas lacus quis dapibus. Nam vel commodo urna, et lacinia orci. Praesent vulputate mattis tristique. Aliquam tempor semper neque, ut fringilla ante dapibus at. In nec dolor felis. Nunc interdum ligula ac purus gravida, sit amet pharetra metus rutrum. Fusce nec gravida nisi. Phasellus pulvinar vestibulum nibh sit amet efficitur. Mauris sed turpis sit amet erat volutpat sollicitudin ut quis quam. Curabitur interdum, sapien non suscipit consequat, ipsum arcu ultrices turpis, eu venenatis mi mi eu purus. Donec urna urna, porttitor eget euismod aliquet, auctor at enim.[/div][/div] [/div][/div] [div class="scrollWrap Four"][div class=textWrap]
[div class=button]
[/div]
[div class=bubbleWrap][div class=tagsBox][div class=header]Personality
[div class="socialTab ttwo"]...read more[/div][/div] [div class=tagsBox][div class=header]Biography[/div][div class="socialTab tthree"]...read more[/div][/div] [/div][/div]
[div class=bubbleWrap][div class=header]Description
tumblr_pk0k9xSRDk1r8ko3mo2_400.gif
[div class=title]Height[/div] xx [div class=title]Weight[/div] xx [div class=title]Hair Color[/div] color [div class=title]Eye Color[/div] color [div class=title]Physique[/div] sexy [div class=title]Tattoos/Piercings[/div] giepg [div class=title]Distinguishing Feature[/div] ghiwog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque suscipit diam eget elementum. Phasellus bibendum diam eget purus placerat, vitae commodo turpis faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris bibendum lectus dui, in condimentum lectus pulvinar in. Quisque auctor tincidunt nulla, a faucibus lectus maximus at. Aliquam id facilisis ante, ut malesuada felis. Nam venenatis fringilla leo sollicitudin accumsan. Nulla in tortor eget libero viverra fringilla. Nulla facilisi. Nam mi arcu, feugiat luctus felis et, dignissim fermentum purus. Mauris augue mauris, sagittis vitae sem et, placerat tempor turpis. Suspendisse rutrum dolor non tellus suscipit maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eleifend mi et arcu dictum, vel rhoncus urna tempor. Vestibulum et vulputate ex, in porttitor nulla. Maecenas id dignissim purus, aliquet bibendum lectus. [/div][/div] [/div][/div] [/div][div class=block][/div][/div] [class=Wrap] margin:auto;center; width:1050px; height:auto; display:flex; --color1:#F1F1F1; --color2:#FFCAD4; --color3:#FFA0AA; --color4:#9D8189; --img1:url('https://66.media.tumblr.com/889c8b6471fb365316794d32439392e8/tumblr_pk0k9xSRDk1r8ko3mo1_400.gif'); --img2:url('https://66.media.tumblr.com/82482fa7b5de88eb7c8ca1798183ffce/tumblr_pk0k9xSRDk1r8ko3mo2_400.gif'); cursor:crosshair; [/class] [class=block] width:200px; height:85vh; background:var(--color3); [/class] [class=mainContainer] width:850px; height:85vh; background:var(--color1); overflow:hidden; [/class] [class=socialTab] width:100px; height:auto; text-align:right; color:var(--color4); font-family:Open Sans; font-size:0.8em; cursor:pointer; align-self:flex-end; [/class] [class=scrollWrap] display:none; width:105%; height:85vh; overflow:scroll; [/class] [class=textWrap] width:93.9%; padding:0.5em; display:grid; grid-template-columns: [first] 270px [second] 270px [third] 270px [last]; grid-template-rows: [row1] 170px [row2] 183px [row3] auto [row4] 10% [bottom]; grid-column-gap: 10px; grid-row-gap: 10px; [/class] [class=bubbleWrap] min-width:250px; height:auto; padding:0.8em; border-radius:30px; background:#fff; opacity:0.5; transition:all 1s ease-in; font-family:Open Sans; font-size:0.8em; color:var(--color4); [/class] [class name=bubbleWrap state=hover] opacity:1; box-shadow:1px 1px 1px var(--color4); [/class] [class=header] font-family:Poppins; font-size:2em; color:var(--color4); [/class] [class=title] font-family:Poppins; font-size:0.8em; color:var(--color3); [/class] [class=tagsBox] display:flex; width:auto; height:auto; padding:0.3em; justify-content:space-between; [/class] [class=tagsText] font-family:Open Sans; font-size:0.8em; color:var(--color4); padding-left:0.3em; [/class] [class=button] display:none; width:50px; height:50px; display:flex; justify-content:center; align-items:center; background:#fff; font-size:2em; color:var(--color4); border-radius:50%; cursor:pointer; opacity:0.7; [/class] [class name=sbuttoncontainer] display:block; height:50px; width:50px; font-size:0px; overflow:hidden; border-radius:50%; transform:perspective(0); [/class] [class name=sbuttonfilter] overflow: hidden; position: relative; top:-5px; left:-5px; width:300px; height:110px; [/class] [script class=none] show One [/script] [script class=button on=click] fadeOut 1000 scrollWrap fadeIn 1000 One [/script] [script class=ttwo on=click] fadeOut 750 scrollWrap fadeIn 1000 Two [/script] [script class=tthree on=click] fadeOut 750 scrollWrap fadeIn 1000 Three [/script] [script class=tfour on=click] fadeOut 750 scrollWrap fadeIn 1000 Four [/script]

Code:
[nobr][comment]----------------------code begins here----------------------[/comment]

[div class=Wrap][div class=mainContainer]

[comment]----------------------1st page begins here----------------------[/comment]

[div class="scrollWrap One"][div class=textWrap]
[div=grid-area: 1 / first / row3 / second;justify-self:stretch;][div=width:270px;height:353px;border-radius:30px;background:var(--img1);background-size:cover;background-position:center;][/div][/div]
[div=grid-area: row3 / first / row4 / second;justify-self:stretch;][div class=bubbleWrap]
[div class=header][font=Poppins]Full Name Here[/font][/div]
[div class=tagsBox][div class=title]n.name[/div][div class=tagsText][font=Open Sans]name here[/font][/div][/div]
[div class=tagsBox][div class=title]age[/div][div class=tagsText]xx[/div][/div]
[div class=tagsBox][div class=title]gender[/div][div class=tagsText]something[/div][/div]
[div class=tagsBox][div class=title]pronoun[/div][div class=tagsText]he/him[/div][/div]
[div class=tagsBox][div class=title]occupation[/div][div class=tagsText]something[/div][/div]
[div class=tagsBox][div class=title]fc[/div][div class=tagsText]moon taeil[/div][/div]
[div class=tagsBox][div class=title]code[/div][div class=tagsText]ri.a[/div][/div]
[/div][/div]

[div=grid-area: 1 / second / row2 / third;justify-self:center;][div class=bubbleWrap][div class=header]Personality[/div]
[div class=tagsBox][div class=title]like[/div][div class=tagsText]something[/div][/div]
[div class=tagsBox][div class=title]dislike[/div][div class=tagsText]something[/div][/div]
[div class=tagsBox][div class=title]vice[/div][div class=tagsText]something[/div][/div]
[div class=tagsBox][div class=title]virtue[/div][div class=tagsText]something[/div][/div]
[div class=tagsBox][div class=title][/div][div class="socialTab ttwo"]...read more[/div][/div][/div][/div]

[div=grid-area: row2 / second / row3 / third;justify-self:center;][div class=bubbleWrap][div class=header]Biography[/div]
[div class=title]"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." Once upon a time... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque suscipit diam eget elementum. Phasellus bibendum diam eget purus placerat, vitae commodo turpis faucibus. Keep this to 50 words.[/div]
[div class=tagsBox][div class=title][/div][div class="socialTab tthree"]...read more[/div][/div][/div][/div]

[div=grid-area: row3 / second / bottom / third;][div class=bubbleWrap][div class=header]Relationships[/div]
[div=width:100%;height:220px;overflow:hidden;][div=width:110%;height:220px;overflow:scroll;][div=width:90%;]
[div class=tagsBox][img]https://i.imgur.com/U0zWZw7.png[/img][div class=tagsText][div class=title]Name | Relation [/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. restrict to about 15 ish words max[/div][/div]
[div class=tagsBox][img]https://i.imgur.com/U0zWZw7.png[/img][div class=tagsText][div class=title]Name | Relation [/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. restrict to about 15 ish words max[/div][/div]
[div class=tagsBox][img]https://i.imgur.com/U0zWZw7.png[/img][div class=tagsText][div class=title]Name | Relation [/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. restrict to about 15 ish words max[/div][/div]
[div class=tagsBox][img]https://i.imgur.com/U0zWZw7.png[/img][div class=tagsText][div class=title]Name | Relation [/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. restrict to about 15 ish words max[/div][/div]
[div class=tagsBox][img]https://i.imgur.com/U0zWZw7.png[/img][div class=tagsText][div class=title]Name | Relation [/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. restrict to about 15 ish words max[/div][/div]
[/div][/div][/div][/div][/div]

[div=grid-area: row1 / third / row2 / last;][div class=bubbleWrap][div class=header]Play[/div]
[div=display:flex;justify-content:space-evenly;][div class=sbuttoncontainer][div class=sbuttonfilter][media=Soundcloud]https://soundcloud.com/ren910403/moon-taeil-because-of-you[/media][/div][/div][div class=sbuttoncontainer][div class=sbuttonfilter][media=Soundcloud]https://soundcloud.com/chi-mai-21/bolbbalgan4-somechic-ver[/media][/div][/div][/div]
[div class=title]Because Of You - Moon Taeil | Some - Bolbbalgan4[/div]
[/div][/div]

[div=grid-area: row2 / third / row4 / last;][div class=bubbleWrap][div class=header]Description[/div]
[img]https://66.media.tumblr.com/82482fa7b5de88eb7c8ca1798183ffce/tumblr_pk0k9xSRDk1r8ko3mo2_400.gif[/img]
[div class=tagsBox][div class=title][/div][div class="socialTab tfour"]...see more[/div][/div][/div][/div]
[/div][/div]

[comment]----------------------2nd page begins here----------------------[/comment]

[div class="scrollWrap Two"][div class=textWrap]
[div=grid-area: 1 / first / row2 / second;][div class=button][fa]fa-arrow-left[/fa][/div][/div]

[div=grid-area: row2 / first / row3 / second;][div class=bubbleWrap][div class=tagsBox][div class=header]Biography[/div][div class="socialTab tthree"]...read more[/div][/div]
[div class=tagsBox][div class=header]Description[/div][div class="socialTab tfour"]...read more[/div][/div]
[/div][/div]

[div=grid-area: 1 / second / bottom / last;justify-self:stretch;][div class=bubbleWrap][div class=header]Personality[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque suscipit diam eget elementum. Phasellus bibendum diam eget purus placerat, vitae commodo turpis faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris bibendum lectus dui, in condimentum lectus pulvinar in. Quisque auctor tincidunt nulla, a faucibus lectus maximus at. Aliquam id facilisis ante, ut malesuada felis. Nam venenatis fringilla leo sollicitudin accumsan. Nulla in tortor eget libero viverra fringilla. Nulla facilisi. Nam mi arcu, feugiat luctus felis et, dignissim fermentum purus. Mauris augue mauris, sagittis vitae sem et, placerat tempor turpis. Suspendisse rutrum dolor non tellus suscipit maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eleifend mi et arcu dictum, vel rhoncus urna tempor. Vestibulum et vulputate ex, in porttitor nulla. Maecenas id dignissim purus, aliquet bibendum lectus.

[br][/br][br][/br]Nunc nisi diam, lacinia nec elit vel, faucibus fringilla sapien. Etiam feugiat mi et mi convallis tincidunt. Donec porta eget urna sit amet fermentum. Nam lobortis tortor ut tincidunt semper. Vestibulum ipsum est, luctus vel nulla quis, auctor faucibus massa. Aenean bibendum lectus id nibh mollis venenatis. Curabitur at porttitor elit. Curabitur vel est posuere, luctus nibh nec, tempus ipsum. Fusce posuere dui sit amet urna ullamcorper pulvinar. Vestibulum vel lacus ipsum. Proin luctus, nisl sagittis lacinia posuere, nisl sapien ullamcorper neque, quis scelerisque urna metus ut mauris. Cras quis rutrum sem. Ut vestibulum urna nisi, in imperdiet mi fringilla sit amet. Sed a sem odio.

[br][/br][br][/br][row][column=span4][div class=title]Virtues[/div]
faega
gjoaegea
goepmga[/column][column=span4][div class=title]Vices[/div]
faega
gjoaegea
goepmga[/column][/row]

[br][/br][row][column=span4][div class=title]Likes[/div]
faega
gjoaegea
goepmga[/column][column=span4][div class=title]Dislikes[/div]
faega
gjoaegea
goepmga[/column][/row][/div][/div]

[/div][/div]

[comment]----------------------3rd page begins here----------------------[/comment]

[div class="scrollWrap Three"][div class=textWrap]
[div=grid-area: 1 / first / row2 / second;][div class=button][fa]fa-arrow-left[/fa][/div][/div]

[div=grid-area: row2 / first / row3 / second;][div class=bubbleWrap][div class=tagsBox][div class=header]Personality[/div][div class="socialTab ttwo"]...read more[/div][/div]
[div class=tagsBox][div class=header]Description[/div][div class="socialTab tfour"]...read more[/div][/div]
[/div][/div]

[div=grid-area: 1 / second / bottom / last;justify-self:stretch;][div class=bubbleWrap][div class=header]Biography[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque suscipit diam eget elementum. Phasellus bibendum diam eget purus placerat, vitae commodo turpis faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris bibendum lectus dui, in condimentum lectus pulvinar in. Quisque auctor tincidunt nulla, a faucibus lectus maximus at. Aliquam id facilisis ante, ut malesuada felis. Nam venenatis fringilla leo sollicitudin accumsan. Nulla in tortor eget libero viverra fringilla. Nulla facilisi. Nam mi arcu, feugiat luctus felis et, dignissim fermentum purus. Mauris augue mauris, sagittis vitae sem et, placerat tempor turpis. Suspendisse rutrum dolor non tellus suscipit maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eleifend mi et arcu dictum, vel rhoncus urna tempor. Vestibulum et vulputate ex, in porttitor nulla. Maecenas id dignissim purus, aliquet bibendum lectus.

[br][/br][br][/br]Nunc nisi diam, lacinia nec elit vel, faucibus fringilla sapien. Etiam feugiat mi et mi convallis tincidunt. Donec porta eget urna sit amet fermentum. Nam lobortis tortor ut tincidunt semper. Vestibulum ipsum est, luctus vel nulla quis, auctor faucibus massa. Aenean bibendum lectus id nibh mollis venenatis. Curabitur at porttitor elit. Curabitur vel est posuere, luctus nibh nec, tempus ipsum. Fusce posuere dui sit amet urna ullamcorper pulvinar. Vestibulum vel lacus ipsum. Proin luctus, nisl sagittis lacinia posuere, nisl sapien ullamcorper neque, quis scelerisque urna metus ut mauris. Cras quis rutrum sem. Ut vestibulum urna nisi, in imperdiet mi fringilla sit amet. Sed a sem odio.

[br][/br][br][/br]Maecenas sed dignissim lectus. Mauris et ante nibh. Suspendisse potenti. Vivamus ac dui ac risus euismod laoreet ut eu sapien. Suspendisse potenti. Phasellus aliquet urna nec eros ullamcorper ullamcorper. Sed cursus porta ipsum quis aliquet. Integer consequat sapien sem. Vivamus placerat quam risus, sit amet dictum mi fermentum in. Ut id lorem quis ipsum pretium sagittis sed interdum dui.

[br][/br][br][/br]Phasellus pretium mauris id libero vulputate, nec pretium purus vulputate. Donec aliquam mauris nec ex pellentesque cursus. Duis ligula purus, tristique non arcu eu, hendrerit vehicula ante. Ut dignissim egestas lacus quis dapibus. Nam vel commodo urna, et lacinia orci. Praesent vulputate mattis tristique. Aliquam tempor semper neque, ut fringilla ante dapibus at. In nec dolor felis. Nunc interdum ligula ac purus gravida, sit amet pharetra metus rutrum. Fusce nec gravida nisi. Phasellus pulvinar vestibulum nibh sit amet efficitur. Mauris sed turpis sit amet erat volutpat sollicitudin ut quis quam. Curabitur interdum, sapien non suscipit consequat, ipsum arcu ultrices turpis, eu venenatis mi mi eu purus. Donec urna urna, porttitor eget euismod aliquet, auctor at enim.[/div][/div]

[/div][/div]

[comment]----------------------4th page begins here----------------------[/comment]

[div class="scrollWrap Four"][div class=textWrap]
[div=grid-area: 1 / first / row2 / second;][div class=button][fa]fa-arrow-left[/fa][/div][/div]

[div=grid-area: row2 / first / row3 / second;][div class=bubbleWrap][div class=tagsBox][div class=header]Personality[/div][div class="socialTab ttwo"]...read more[/div][/div]
[div class=tagsBox][div class=header]Biography[/div][div class="socialTab tthree"]...read more[/div][/div]
[/div][/div]

[div=grid-area: 1 / second / bottom / last;justify-self:stretch;][div class=bubbleWrap][div class=header]Description[/div][imageFloat=right][img]https://66.media.tumblr.com/82482fa7b5de88eb7c8ca1798183ffce/tumblr_pk0k9xSRDk1r8ko3mo2_400.gif[/img][/imageFloat]
[div class=title]Height[/div] xx 
[div class=title]Weight[/div] xx
[div class=title]Hair Color[/div] color
[div class=title]Eye Color[/div] color
[div class=title]Physique[/div] sexy
[div class=title]Tattoos/Piercings[/div] giepg
[div class=title]Distinguishing Feature[/div] ghiwog

[br][/br][br][/br]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque suscipit diam eget elementum. Phasellus bibendum diam eget purus placerat, vitae commodo turpis faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris bibendum lectus dui, in condimentum lectus pulvinar in. Quisque auctor tincidunt nulla, a faucibus lectus maximus at. Aliquam id facilisis ante, ut malesuada felis. Nam venenatis fringilla leo sollicitudin accumsan. Nulla in tortor eget libero viverra fringilla. Nulla facilisi. Nam mi arcu, feugiat luctus felis et, dignissim fermentum purus. Mauris augue mauris, sagittis vitae sem et, placerat tempor turpis. Suspendisse rutrum dolor non tellus suscipit maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eleifend mi et arcu dictum, vel rhoncus urna tempor. Vestibulum et vulputate ex, in porttitor nulla. Maecenas id dignissim purus, aliquet bibendum lectus.
[/div][/div]

[/div][/div]
[/div][div class=block][/div][/div]
[comment]----------------------code ends here----------------------[/comment]
[comment]----------------------classes begins here----------------------[/comment]
[class=Wrap]
margin:auto;center;
width:1050px;
height:auto;
display:flex;
--color1:#F1F1F1;
--color2:#FFCAD4;
--color3:#FFA0AA;
--color4:#9D8189;
--img1:url('https://66.media.tumblr.com/889c8b6471fb365316794d32439392e8/tumblr_pk0k9xSRDk1r8ko3mo1_400.gif');
--img2:url('https://66.media.tumblr.com/82482fa7b5de88eb7c8ca1798183ffce/tumblr_pk0k9xSRDk1r8ko3mo2_400.gif');
cursor:crosshair;
[/class]

[class=block]
width:200px;
height:85vh;
background:var(--color3);
[/class]

[class=mainContainer]
width:850px;
height:85vh;
background:var(--color1);
overflow:hidden;
[/class]

[comment]----------------------tab class here----------------------[/comment]

[class=socialTab]
width:100px;
height:auto;
text-align:right;
color:var(--color4);
font-family:Open Sans;
font-size:0.8em;
cursor:pointer;
align-self:flex-end;
[/class]

[comment]----------------------content classes begins here----------------------[/comment]

[class=scrollWrap]
display:none;
width:105%;
height:85vh;
overflow:scroll;
[/class]

[class=textWrap]
width:93.9%;
padding:0.5em;
display:grid;
grid-template-columns: [first] 270px [second] 270px [third] 270px [last];
grid-template-rows: [row1] 170px [row2] 183px [row3] auto [row4] 10% [bottom];
grid-column-gap: 10px;
grid-row-gap: 10px;
[/class]

[class=bubbleWrap]
min-width:250px;
height:auto;
padding:0.8em;
border-radius:30px;
background:#fff;
opacity:0.5;
transition:all 1s ease-in;
font-family:Open Sans;
font-size:0.8em;
color:var(--color4);
[/class]

[class name=bubbleWrap state=hover]
opacity:1;
box-shadow:1px 1px 1px var(--color4);
[/class]

[class=header]
font-family:Poppins;
font-size:2em;
color:var(--color4);
[/class]

[class=title]
font-family:Poppins;
font-size:0.8em;
color:var(--color3);
[/class]

[class=tagsBox]
display:flex;
width:auto;
height:auto;
padding:0.3em;
justify-content:space-between;
[/class]

[class=tagsText]
font-family:Open Sans;
font-size:0.8em;
color:var(--color4);
padding-left:0.3em;
[/class]

[class=button]
display:none;
width:50px;
height:50px;
display:flex;
justify-content:center;
align-items:center;
background:#fff;
font-size:2em;
color:var(--color4);
border-radius:50%;
cursor:pointer;
opacity:0.7;
[/class]

[comment]----------------------souncloud classes begins here----------------------[/comment]

[class name=sbuttoncontainer]
display:block;
height:50px;
width:50px;
font-size:0px;
overflow:hidden;
border-radius:50%;
transform:perspective(0);
[/class]

[class name=sbuttonfilter]
overflow: hidden;
position: relative;
top:-5px;
left:-5px;
width:300px;
height:110px;
[/class]

[comment]----------------------script classes begins here----------------------[/comment]

[script class=none]
show One
[/script]

[script class=button on=click]
fadeOut 1000 scrollWrap
fadeIn 1000 One
[/script]

[script class=ttwo on=click]
fadeOut 750 scrollWrap
fadeIn 1000 Two
[/script]

[script class=tthree on=click]
fadeOut 750 scrollWrap
fadeIn 1000 Three
[/script]

[script class=tfour on=click]
fadeOut 750 scrollWrap
fadeIn 1000 Four
[/script][/nobr]
 
Request 6
Function: IC reply
Mobile Friendly: Yes
Color Scheme: pastel or neutral colors :`D maybe in the soft cream range?
No. of images and/or gifs: 1-2 maybe? surprise me!
Image URL/Source:
f5e368a6e3682547f00e9064d686dc74.jpg
Style: Hidden scroll bars please! Feel free to be janky if you like or not. I'd like a simple design tbh that's easy to read :`D
Theme: Fluff/Cute, Dark/Grunge/Edgy, Futuristic/Sci-Fi, etc etc
Specific Features: oo a hover would be nice to show their mood, location, etc. I'd like a place for their image to be shown too and a header for their name?
Anything else?: umm surprise me? tysm ria!
Do you mind sharing the code with others?: Idm! go for it :`)
 
Request 7
Function: character sheet / about me thingie??
Mobile Friendly: doesn't have to be!
Color Scheme: black, white, grey.. can be different shades.
No. of images and/or gifs: 2-3 , or more. i don't mind. you don't have to use the pictures i provide.. you could also use placeholders!
Image URL/Source:
1549044815977.png
1549044830845.png
Style: hidden scroll bars, tabs if possible?
Theme: minimalistic!
Specific Features: playlist / music player feature?
Anything else?: whatever makes it look good, uwu <3
Do you mind sharing the code with others?: sure~!
 
Finished 5
[class=riaBox]margin:auto;center;min-width:200px;max-width:450px;height:auto;display:flex;--color1:#fff;--color2:#707070;--color3:#5a5353;--img1:url('https://i.imgur.com/5Ft7td8.jpg');background:var(--color3);font-family:Oswald;color:var(--color1);[/class][class=riaPic]width:100px;height:100px;background:var(--img1);background-size:200%;background-position:-1em -1em;border:1px solid var(--color3)[/class][class=riaText]min=width:200px;max-width:290px;border:1px solid var(--color3);background:var(--color1);font-family:Roboto;font-size:0.8em;color:var(--color2);padding-left:0.5em;padding-right:0.5em;[/class][div class=riaBox][div class=riaPic][/div][div class=riaText]Code for cinnabuns cinnabuns
Adjust the font-size in quote class if word count exceeds 15 words. Lemme know if there any issues!
Type: IC Post | Theme: Simple | Mobile Friendly: Yes | Features: Hidden scroll
Free to use with credits[/div]
05
[/div]

[div class=mainCon][div class=contentWrap][div class=scrollWrap][div class=textWrap]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet turpis eget ligula varius sodales nec et nunc. Praesent pulvinar urna dignissim posuere scelerisque. Quisque ac enim tincidunt enim dictum condimentum. Pellentesque ligula arcu, egestas sed efficitur id, egestas vitae nulla. Donec vehicula posuere urna accumsan lobortis. Etiam ut risus at massa finibus rhoncus sed ut purus. Curabitur sed gravida lorem, nec pulvinar justo. Aliquam sed lorem ultricies, fringilla risus eget, malesuada sapien. Praesent gravida mattis maximus. Suspendisse sed neque nibh.

Ut elementum libero eget suscipit viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus quis imperdiet tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dolor nisi, cursus at lacus ultrices, vulputate convallis urna. Aliquam libero leo, laoreet at mollis non, iaculis in lectus. Praesent volutpat condimentum ante vel porttitor. Maecenas vel dignissim ante, id bibendum massa. Nunc sit amet lobortis purus. Sed auctor ut ante at aliquam. Fusce quis dui vestibulum, faucibus nibh nec, ultrices velit.

Vivamus tristique in lorem a tincidunt. Pellentesque malesuada vehicula tempor. Morbi sed hendrerit ex, vitae laoreet tellus. Integer tincidunt, velit vitae facilisis fringilla, augue risus fringilla ipsum, in volutpat lectus nunc ut elit. Duis ultrices pulvinar neque, in tincidunt justo rhoncus congue. Morbi suscipit lorem velit, a interdum est maximus in. Etiam id dui et erat posuere vestibulum vel id augue. Phasellus fermentum enim nec rhoncus pharetra. Nullam non sapien vestibulum, iaculis massa eu, sodales nunc. Fusce ac laoreet nisl, at sollicitudin mi. Aliquam iaculis, nisl et laoreet vestibulum, leo nunc mattis urna, in vulputate mi eros et ante. Fusce est nunc, pellentesque a molestie eu, dapibus et risus. Ut non mattis justo, ut consectetur lacus. Maecenas urna tellus, finibus id enim id, aliquet eleifend sapien. Phasellus in rutrum enim.[/div][/div][/div][div class=rightBanner][div class=mainPic][/div][div class=quote]Once you learn that, you’ll never be the same again.[/div][div class=tagBox]NAME HERE
Location:
Mood:
Tags: [/div][/div][/div]
code by RI.a


[class=mainCon] margin:auto;center; min-width:200px; max-width:730px; padding:1em; display:flex; flex-wrap:wrap; justify-content:center; --color1:#FFFFFF; --color2:#550000; --color3:#222222; --img1:url('https://data.whicdn.com/images/309783265/large.jpg'); --img2:url('https://st2.depositphotos.com/1402765/8873/v/950/depositphotos_88736508-stock-illustration-pattern-with-alchemy-symbols.jpg'); background:var(--img2); backgrouns-size:cover; [/class] [class=contentWrap] min-width:200px; max-width:400px; height:60vh; background:var(--color2); border:5px solid var(--color1); overflow:hidden; [/class] [class=scrollWrap] width:103%; height:60vh; overflow:scroll; [/class] [class=textWrap] width:93%; text-align:justify; padding:0.8em; font-family:Josefin Sans; font-size:0.8em; color:var(--color1); [/class] [class=rightBanner] display:flex; flex-wrap:wrap; justify-content:center; min-width:200px; max-width:300px; height:calc(60vh + 10px); padding-left:1em; [/class] [class name=rightBanner maxWidth=900px] padding-left:0em; padding-top:1em; [/class] [class=mainPic] width:100%; height:200px; background:var(--img1); background-size:cover; background-postion:top; border:5px solid var(--color1); align-self:flex-start; [/class] [class=quote] width:100%; text-align:center; font-family:Pacifico; font-size:2em; color:var(--color1); text-shadow:3px 3px 0px (--color2); [/class] [class=tagBox] width:100%; height:10vh; background:var(--color3); text-align:center; padding:0.8em; color:var(--color1); font-family:Josefin Sans; font-size:0.8em; align-self:flex-end; [/class]
Code:
[div class=mainCon][div class=contentWrap][div class=scrollWrap][div class=textWrap]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet turpis eget ligula varius sodales nec et nunc. Praesent pulvinar urna dignissim posuere scelerisque. Quisque ac enim tincidunt enim dictum condimentum. Pellentesque ligula arcu, egestas sed efficitur id, egestas vitae nulla. Donec vehicula posuere urna accumsan lobortis. Etiam ut risus at massa finibus rhoncus sed ut purus. Curabitur sed gravida lorem, nec pulvinar justo. Aliquam sed lorem ultricies, fringilla risus eget, malesuada sapien. Praesent gravida mattis maximus. Suspendisse sed neque nibh.

Ut elementum libero eget suscipit viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus quis imperdiet tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dolor nisi, cursus at lacus ultrices, vulputate convallis urna. Aliquam libero leo, laoreet at mollis non, iaculis in lectus. Praesent volutpat condimentum ante vel porttitor. Maecenas vel dignissim ante, id bibendum massa. Nunc sit amet lobortis purus. Sed auctor ut ante at aliquam. Fusce quis dui vestibulum, faucibus nibh nec, ultrices velit.

Vivamus tristique in lorem a tincidunt. Pellentesque malesuada vehicula tempor. Morbi sed hendrerit ex, vitae laoreet tellus. Integer tincidunt, velit vitae facilisis fringilla, augue risus fringilla ipsum, in volutpat lectus nunc ut elit. Duis ultrices pulvinar neque, in tincidunt justo rhoncus congue. Morbi suscipit lorem velit, a interdum est maximus in. Etiam id dui et erat posuere vestibulum vel id augue. Phasellus fermentum enim nec rhoncus pharetra. Nullam non sapien vestibulum, iaculis massa eu, sodales nunc. Fusce ac laoreet nisl, at sollicitudin mi. Aliquam iaculis, nisl et laoreet vestibulum, leo nunc mattis urna, in vulputate mi eros et ante. Fusce est nunc, pellentesque a molestie eu, dapibus et risus. Ut non mattis justo, ut consectetur lacus. Maecenas urna tellus, finibus id enim id, aliquet eleifend sapien. Phasellus in rutrum enim.[/div][/div][/div][div class=rightBanner][div class=mainPic][/div][div class=quote][font=Pacifico]Once you learn that, you’ll never be the same again.[/font][/div][div class=tagBox]NAME HERE
[font=Josefin Sans]Location:[/font] 
Mood: 
Tags: [/div][/div][/div][div=margin:auto;center;max-width:760px;text-align:right;opacity:0.6;letter-spacing:0.3em;font-size:0.5em;]code by RI.a[/div]
[comment]-----------------------------------classes begin here-----------------------------------[/comment]
[nobr][class=mainCon]
margin:auto;center;
min-width:200px;
max-width:730px;
padding:1em;
display:flex;
flex-wrap:wrap;
justify-content:center;
--color1:#FFFFFF;
--color2:#550000;
--color3:#222222;
--img1:url('https://data.whicdn.com/images/309783265/large.jpg');
--img2:url('https://st2.depositphotos.com/1402765/8873/v/950/depositphotos_88736508-stock-illustration-pattern-with-alchemy-symbols.jpg');
background:var(--img2);
backgrouns-size:cover;
[/class]

[comment]-----------------------------------content classes begin here-----------------------------------[/comment]
[class=contentWrap]
min-width:200px;
max-width:400px;
height:60vh;
background:var(--color2);
border:5px solid var(--color1);
overflow:hidden;
[/class]

[class=scrollWrap]
width:103%;
height:60vh;
overflow:scroll;
[/class]

[class=textWrap]
width:93%;
text-align:justify;
padding:0.8em;
font-family:Josefin Sans;
font-size:0.8em;
color:var(--color1);
[/class]

[comment]-----------------------------------right side classes begin here-----------------------------------[/comment]
[class=rightBanner]
display:flex;
flex-wrap:wrap;
justify-content:center;
min-width:200px;
max-width:300px;
height:calc(60vh + 10px);
padding-left:1em;
[/class]

[class name=rightBanner maxWidth=900px]
padding-left:0em;
padding-top:1em;
[/class]

[class=mainPic]
width:100%;
height:200px;
background:var(--img1);
background-size:cover;
background-postion:top;
border:5px solid var(--color1);
align-self:flex-start;
[/class]

[class=quote]
width:100%;
text-align:center;
font-family:Pacifico;
font-size:2em;
color:var(--color1);
text-shadow:3px 3px 0px (--color2);
[/class]

[class=tagBox]
width:100%;
height:10vh;
background:var(--color3);
text-align:center;
padding:0.8em;
color:var(--color1);
font-family:Josefin Sans;
font-size:0.8em;
align-self:flex-end;
[/class]
[/nobr]
 
Request 8
Function: IC post
Mobile Friendly: Preferred, but not needed!
Color Scheme: #cdaa7d // #b89970 // #937a59 (I don't need all these colors, but I felt they were a good spectrum of the type I liked! A tawny sort of theme, can go even lighter with a creme color!)
No. of images and/or gifs: Just one!
Image URL/Source: https://cdn.discordapp.com/attachme...75079690/3bb35635e9aced2850cd7703bd47ba1f.png
Style: Hidden scroll bar, simple! If possible an aesthetic pointer to fit the theme, but not needed if too difficult to find
Theme: Something like...Into the woods/story-book esqe. (https://media.npr.org/assets/bakert...a40a649799c4975940cf2da6230cfa27-s400-c85.jpg) That sort of look! Mostly the top part with the branches and such, but if that's too hard don't worry about it! Just basically a nature-look to it.
Specific Features: Maybe like, if the image was a circle with branches around it? That may be way too hard, so just tell me if it is!
Do you mind sharing the code with others?: Nope! You made the code, so it's your work to share!
 
Finished 6
[class=riaBox]margin:auto;center;min-width:200px;max-width:450px;height:auto;display:flex;--color1:#fff;--color2:#707070;--color3:#5a5353;--img1:url('https://i.imgur.com/5Ft7td8.jpg');background:var(--color3);font-family:Oswald;color:var(--color1);[/class][class=riaPic]width:100px;height:100px;background:var(--img1);background-size:200%;background-position:-1em -1em;border:1px solid var(--color3)[/class][class=riaText]min=width:200px;max-width:290px;border:1px solid var(--color3);background:var(--color1);font-family:Roboto;font-size:0.8em;color:var(--color2);padding-left:0.5em;padding-right:0.5em;[/class][div class=riaBox][div class=riaPic][/div][div class=riaText]Code for mon mon
Hover over the bottom to reveal tags! Enjoy! ^^
Type: IC Post | Theme: Simple | Mobile Friendly: Yes | Features: Hidden scroll, Hover
Free to use with credits[/div]
06
[/div]

[div class=mainCon][div class=header]Name Here[/div][div class=contentWrap][div class=scrollWrap][div class=textWrap]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet turpis eget ligula varius sodales nec et nunc. Praesent pulvinar urna dignissim posuere scelerisque. Quisque ac enim tincidunt enim dictum condimentum. Pellentesque ligula arcu, egestas sed efficitur id, egestas vitae nulla. Donec vehicula posuere urna accumsan lobortis. Etiam ut risus at massa finibus rhoncus sed ut purus. Curabitur sed gravida lorem, nec pulvinar justo. Aliquam sed lorem ultricies, fringilla risus eget, malesuada sapien. Praesent gravida mattis maximus. Suspendisse sed neque nibh.

Ut elementum libero eget suscipit viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus quis imperdiet tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dolor nisi, cursus at lacus ultrices, vulputate convallis urna. Aliquam libero leo, laoreet at mollis non, iaculis in lectus. Praesent volutpat condimentum ante vel porttitor. Maecenas vel dignissim ante, id bibendum massa. Nunc sit amet lobortis purus. Sed auctor ut ante at aliquam. Fusce quis dui vestibulum, faucibus nibh nec, ultrices velit.

Vivamus tristique in lorem a tincidunt. Pellentesque malesuada vehicula tempor. Morbi sed hendrerit ex, vitae laoreet tellus. Integer tincidunt, velit vitae facilisis fringilla, augue risus fringilla ipsum, in volutpat lectus nunc ut elit. Duis ultrices pulvinar neque, in tincidunt justo rhoncus congue. Morbi suscipit lorem velit, a interdum est maximus in. Etiam id dui et erat posuere vestibulum vel id augue. Phasellus fermentum enim nec rhoncus pharetra. Nullam non sapien vestibulum, iaculis massa eu, sodales nunc. Fusce ac laoreet nisl, at sollicitudin mi. Aliquam iaculis, nisl et laoreet vestibulum, leo nunc mattis urna, in vulputate mi eros et ante. Fusce est nunc, pellentesque a molestie eu, dapibus et risus. Ut non mattis justo, ut consectetur lacus. Maecenas urna tellus, finibus id enim id, aliquet eleifend sapien. Phasellus in rutrum enim.[/div][/div][/div][div class=footer]
[div class=mainPic]
[/div][div class=tagBox]Location: somewhere
Interactions: @tag
Mentions: @tag [/div][/div][/div]
code by RI.a
[class=mainCon] margin:auto;center; min-width200px; max-width:700px; height:auto; display:flex; flex-wrap:wrap; justify-content:center; --color1:#FDEFF0; --color2:#E4D8DA; --color3:#8C8C8C; --img1:url('https://i.pinimg.com/564x/f5/e3/68/f5e368a6e3682547f00e9064d686dc74.jpg'); background:var(--color1); [/class] [class=contentWrap] min-width:200px; max-width:700px; height:40vh; overflow:hidden; border-bottom:3px double var(--color2); border-top:3px double var(--color2); [/class] [class=scrollWrap] width:105%; height:40vh; overflow-y:scroll; overflow-x:hidden; [/class] [class=textWrap] width:93%; padding:0.8em; font-family:Josefin Slab; font-size:0.8em; color:var(--color3); [/class] [class=header] width:100%; height:auto; font-family:Fredericka the Great; font-size:3em; color:var(--color3); align-self:flex-start; [/class] [class=footer] width:100%; align-self:flex-end; padding:10px; display:flex; padding-top:10px; align-items:center; [/class] [class=mainPic] flex:1; min-width:150px; height:150px; border-radius:50%; border:1px solid var(--color2); background:var(--img1); background-size:cover; background-position:center; transform:rotateY(180deg); [/class] [class=tagBox] flex:4; height:auto; padding:10px; font-family:Josefin Slab; font-size:0.8em; color:var(--color3); border-top:3px double var(--color2); border-bottom:3px double var(--color2); opacity:0; transition:all 0.75s ease-in; [/class] [class name=tagBox state=hover] opacity:1; [/class]
Code:
[div class=mainCon][div class=header][font=Fredericka the Great]Name Here[/font][/div][div class=contentWrap][div class=scrollWrap][div class=textWrap]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet turpis eget ligula varius sodales nec et nunc. Praesent pulvinar urna dignissim posuere scelerisque. Quisque ac enim tincidunt enim dictum condimentum. Pellentesque ligula arcu, egestas sed efficitur id, egestas vitae nulla. Donec vehicula posuere urna accumsan lobortis. Etiam ut risus at massa finibus rhoncus sed ut purus. Curabitur sed gravida lorem, nec pulvinar justo. Aliquam sed lorem ultricies, fringilla risus eget, malesuada sapien. Praesent gravida mattis maximus. Suspendisse sed neque nibh.

Ut elementum libero eget suscipit viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus quis imperdiet tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dolor nisi, cursus at lacus ultrices, vulputate convallis urna. Aliquam libero leo, laoreet at mollis non, iaculis in lectus. Praesent volutpat condimentum ante vel porttitor. Maecenas vel dignissim ante, id bibendum massa. Nunc sit amet lobortis purus. Sed auctor ut ante at aliquam. Fusce quis dui vestibulum, faucibus nibh nec, ultrices velit.

Vivamus tristique in lorem a tincidunt. Pellentesque malesuada vehicula tempor. Morbi sed hendrerit ex, vitae laoreet tellus. Integer tincidunt, velit vitae facilisis fringilla, augue risus fringilla ipsum, in volutpat lectus nunc ut elit. Duis ultrices pulvinar neque, in tincidunt justo rhoncus congue. Morbi suscipit lorem velit, a interdum est maximus in. Etiam id dui et erat posuere vestibulum vel id augue. Phasellus fermentum enim nec rhoncus pharetra. Nullam non sapien vestibulum, iaculis massa eu, sodales nunc. Fusce ac laoreet nisl, at sollicitudin mi. Aliquam iaculis, nisl et laoreet vestibulum, leo nunc mattis urna, in vulputate mi eros et ante. Fusce est nunc, pellentesque a molestie eu, dapibus et risus. Ut non mattis justo, ut consectetur lacus. Maecenas urna tellus, finibus id enim id, aliquet eleifend sapien. Phasellus in rutrum enim.[/div][/div][/div][div class=footer][div=width:150px;height:150px;padding:0.8em;border-radius:50%;border:3px double var(--color2);][div class=mainPic][/div][/div][div class=tagBox][font=Josefin Slab]Location:[/font] somewhere
Interactions: @tag 
Mentions: @tag [/div][/div][/div][div=margin:auto;center;max-width:700px;text-align:right;letter-spacing:0.3em;opacity:0.6;font-size:0.5em;]code by RI.a[/div][nobr]

[comment]------------------------------------classes begin here------------------------------------[/comment]
[class=mainCon]
margin:auto;center;
min-width200px;
max-width:700px;
height:auto;
display:flex;
flex-wrap:wrap;
justify-content:center;
--color1:#FDEFF0;
--color2:#E4D8DA;
--color3:#8C8C8C;
--img1:url('https://i.pinimg.com/564x/f5/e3/68/f5e368a6e3682547f00e9064d686dc74.jpg');
background:var(--color1);
[/class]

[comment]------------------------------------text classes here------------------------------------[/comment]
[class=contentWrap]
min-width:200px;
max-width:700px;
height:40vh;
overflow:hidden;
border-bottom:3px double var(--color2);
border-top:3px double var(--color2);
[/class]

[class=scrollWrap]
width:105%;
height:40vh;
overflow-y:scroll;
overflow-x:hidden;
[/class]

[class=textWrap]
width:93%;
padding:0.8em;
font-family:Josefin Slab;
font-size:0.8em;
color:var(--color3);
[/class]

[class=header]
width:100%;
height:auto;
font-family:Fredericka the Great;
font-size:3em;
color:var(--color3);
align-self:flex-start;
[/class]

[comment]------------------------------------bottom classes here------------------------------------[/comment]
[class=footer]
width:100%;
align-self:flex-end;
padding:10px;
display:flex;
padding-top:10px;
align-items:center;
[/class]

[class=mainPic]
flex:1;
min-width:150px;
height:150px;
border-radius:50%;
border:1px solid var(--color2);
background:var(--img1);
background-size:cover;
background-position:center;
transform:rotateY(180deg);
[/class]

[class=tagBox]
flex:4;
height:auto;
padding:10px;
font-family:Josefin Slab;
font-size:0.8em;
color:var(--color3);
border-top:3px double var(--color2);
border-bottom:3px double var(--color2);
opacity:0;
transition:all 0.75s ease-in;
[/class]

[class name=tagBox state=hover]
opacity:1;
[/class]
[/nobr]
 
Request 9
Hello!

I am trying to make a quest thread, and since I can't really code to save my life, I was wondering if I could commission you for some coding for a template to my Quest RP posts?

Thank you in advance and I hope you consider my request?

Function: Quest RP template for main posts in upcoming quest rp!
Mobile Friendly: Yes
Color Scheme: Blue, cyan, and white! (I don't have any specific colors in mind BBC code wise, though maybe the main body of the code should be white, as character dialogue in the Quest RP I'd like to be colored and some character dialogue will be blue)
No. of images and/or gifs: 1
Image URL/Source: https://www.adorama.com/alc/wp-content/uploads/2017/11/shutterstock_114802408.jpg <-adorama photography I think is the original photographer?
Style: Extravagant: fancy scrollbars and borders please!
Theme: Elegant and ancient
Specific Features: Hover might be neat! Definitely would like a fancy scroll bar as well! Maybe the BG pic I have above a little faded so the main black of he text and colored character dialogue can still be seen easily?
Anything else?:
Do you mind sharing the code with others?:
Nah, it's cool!
 

Attachments

  • 1549491991398.png
    1549491991398.png
    1.8 MB · Views: 0
Last edited:
Finished 7
[class=riaBox]margin:auto;center;min-width:200px;max-width:450px;height:auto;display:flex;--color1:#fff;--color2:#707070;--color3:#5a5353;--img1:url('https://i.imgur.com/5Ft7td8.jpg');background:var(--color3);font-family:Oswald;color:var(--color1);[/class][class=riaPic]width:100px;height:100px;background:var(--img1);background-size:200%;background-position:-1em -1em;border:1px solid var(--color3)[/class][class=riaText]min=width:200px;max-width:290px;border:1px solid var(--color3);background:var(--color1);font-family:Roboto;font-size:0.8em;color:var(--color2);padding-left:0.5em;padding-right:0.5em;[/class][div class=riaBox][div class=riaPic][/div][div class=riaText]Code for kouzcy kouzcy
Hover at the bottom picture for a souncloud playlist! Feel free to change media (i.e. youtube and etc) Enjoy!
Type: CS | Theme: Minimal grey | Mobile Friendly: Yes | Features: Hidden scroll, Tabs, Hover
Free to use with credits[/div]
07
[/div]

[div class=mainCon][div class=tabBar][div class="miniTab 01"]♠[/div][div class="miniTab 02"]♥[/div][div class="miniTab 03"]♣[/div][div class="miniTab 04"]♦[/div][/div][div class=pageWrap][div class=scrollWrap][div class="textWrap One"]
[div class=header]BASICS[/div] [div class=title]Character Name[/div]
[div class=title]Nickname(s)[/div] name
[div class=title]Title[/div] role
[div class=title]Age[/div] xx
[div class=title]Gender[/div] blep
[div class=title]Occupation[/div] thing
[div class=title]Alignment[/div] thing
[div class=header]APPEARANCE[/div] [div class=title]Height[/div] XX
[div class=title]Weight[/div] xx
[div class=title]Hair Color[/div] color
[div class=title]Eye Color[/div] color
[div class=title]Complexion[/div] thing
[div class=title]Physique[/div] thing
[div class=title]Distinguishing Feature(s)[/div] thing
[div class=title]Tattoo(s)[/div] pepe [/div] [div class="textWrap Two"]
[div class=header]PERSONA[/div] [div class=title]Vices[/div] gjapg | ghioang | nfafama
[div class=title]Virtues[/div] gjapg | ghioang | nfafama
[div class=title]Likes[/div] gjapg | ghioang | nfafama
[div class=title]Dislikes[/div] gjapg | ghioang | nfafama
[div class=title]Habits[/div] gjapg | ghioang | nfafama

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur arcu purus, ac posuere nulla malesuada sit amet. Nam convallis venenatis venenatis. Mauris gravida dui non porta lobortis. Suspendisse sollicitudin turpis eu odio iaculis, eu facilisis ex lacinia. In quis viverra dolor. Ut non convallis magna, eget convallis diam. Fusce bibendum rhoncus urna sit amet dictum. Duis enim ligula, fermentum sit amet lobortis ac, porttitor eget magna. Etiam posuere rutrum ultrices. Nunc blandit, nibh vel tincidunt finibus, justo diam consectetur risus, sed rhoncus nunc nunc condimentum ante.

Donec rhoncus, lacus vel efficitur congue, magna nulla aliquam ipsum, quis suscipit elit justo id risus. Pellentesque eu tellus ut mauris cursus auctor ac ut orci. Pellentesque pharetra velit id mi pharetra suscipit. Vivamus commodo blandit egestas. Vivamus tincidunt tincidunt turpis, in eleifend diam egestas vel. In fringilla tristique fermentum. Phasellus felis nunc, gravida ac convallis id, sollicitudin id nibh. Nunc vehicula, ipsum vitae pellentesque eleifend, massa odio placerat felis, ut lobortis enim ligula id erat. Mauris dapibus bibendum risus eget tincidunt. Duis lorem ipsum, posuere eget risus ac, pellentesque viverra lectus. Donec vestibulum ante sed risus pharetra viverra. Aliquam porta sapien vitae metus luctus hendrerit. [/div] [div class="textWrap Three"][div class=header]BIOGRAPHY[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur arcu purus, ac posuere nulla malesuada sit amet. Nam convallis venenatis venenatis. Mauris gravida dui non porta lobortis. Suspendisse sollicitudin turpis eu odio iaculis, eu facilisis ex lacinia. In quis viverra dolor. Ut non convallis magna, eget convallis diam. Fusce bibendum rhoncus urna sit amet dictum. Duis enim ligula, fermentum sit amet lobortis ac, porttitor eget magna. Etiam posuere rutrum ultrices. Nunc blandit, nibh vel tincidunt finibus, justo diam consectetur risus, sed rhoncus nunc nunc condimentum ante.

Donec rhoncus, lacus vel efficitur congue, magna nulla aliquam ipsum, quis suscipit elit justo id risus. Pellentesque eu tellus ut mauris cursus auctor ac ut orci. Pellentesque pharetra velit id mi pharetra suscipit. Vivamus commodo blandit egestas. Vivamus tincidunt tincidunt turpis, in eleifend diam egestas vel. In fringilla tristique fermentum. Phasellus felis nunc, gravida ac convallis id, sollicitudin id nibh. Nunc vehicula, ipsum vitae pellentesque eleifend, massa odio placerat felis, ut lobortis enim ligula id erat. Mauris dapibus bibendum risus eget tincidunt. Duis lorem ipsum, posuere eget risus ac, pellentesque viverra lectus. Donec vestibulum ante sed risus pharetra viverra. Aliquam porta sapien vitae metus luctus hendrerit.

Mauris iaculis ligula vitae sollicitudin egestas. Morbi rutrum tempus turpis in dignissim. Morbi lacinia nunc vel ex semper, ut interdum elit lacinia. Fusce semper dui sit amet lectus fringilla, eu congue mauris dignissim. Mauris dapibus eleifend ipsum, sit amet laoreet dolor vestibulum in. In fringilla in leo id rutrum. Vestibulum commodo rhoncus nibh, faucibus auctor arcu eleifend quis. Nunc a fringilla erat, eget pellentesque lorem. Praesent feugiat metus in neque placerat consequat. Nulla eleifend auctor odio, vitae aliquet ipsum ornare id. Sed euismod hendrerit lectus, non euismod tellus dignissim eu. Suspendisse metus diam, mollis sit amet bibendum tempus, iaculis eu augue. Aenean convallis tellus gravida aliquet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales, tortor non vestibulum lobortis, libero lacus malesuada libero, sed volutpat dolor libero ut purus. [/div] [div class="textWrap Four"]
[div class=header]STATS[/div] [div class=title]01 Name[/div] [div class=statBar]
[/div]
description here

[div class=title]02 Name[/div] [div class=statBar]
[/div]
description here

[div class=title]03 Name[/div] [div class=statBar]
[/div]
description here
[div class=header]COMBAT[/div] [div class=title]01 Name[/div] [div class=statBar]
[/div]
description here

[div class=title]02 Name[/div] [div class=statBar]
[/div]
description here

[div class=title]03 Name[/div] [div class=statBar]
[/div]
description here [/div] [/div][/div][div class=bottomPic][div class=soundWrap][div class=soundScroll][div class=soundMedia][/div][/div][/div][/div] [/div]
code by RI.a
[class=mainCon] margin:auto;center; min-width:200px; max-width:900px; height:auto; display:flex; flex-wrap:wrap; justify-content:space-evenly; align-items:center; --color1:#FFFFFF; --color2:#D1D3D4; --color3:#8C8C8C; --color4:#222222; --img1:url('https://66.media.tumblr.com/e4fbb4f1cbeaeb0b35886241252015bb/tumblr_ozkvmrBFhR1ve1krvo1_540.png'); --img2:url('https://i.imgur.com/KNnQSoe.png'); --img3:url('http://pm1.narvii.com/6844/71f4a0795858955044c4549383edb5eb1abf2740v2_00.jpg'); --img4:url('https://i.pinimg.com/originals/02/02/32/020232fccf5cc7bb1a87abed71d7c896.png'); background:var(--color1); [/class] [class=tabBar] width:25px; height:auto; [/class] [class name=tabBar maxWidth=700px] width:100px; [/class] [class=miniTab] display:inline-block; width:20px; height:30px; padding:2.5px; text-align:center; font-size:25px; color:var(--color2); cursor:pointer; transition:all 1s ease-in-out; [/class] [class name=miniTab state=hover] color:var(--color4); [/class] [class=tabSelect] color:var(--color4)!important; [/class] [class=pageWrap] width:400px; height:40vh; overflow:hidden; padding:0.8em; [/class] [class=scrollWrap] width:110%; height:40vh; overflow-y:scroll; overflow-x:hidden; [/class] [class=textWrap] display:none; width:87%; padding:0.8em; font-family:Lato; font-size:0.8em; color:var(--color4); [/class] [class=title] display:inline-block; font-family:Alegreya; font-size:1em; color:var(--color3); [/class] [class=header] font-family:Alegreya; font-size:3em; color:var(--color2); [/class] [class=statBar] width:150px; height:5px; display:inline-block; border:1px solid var(--color3); [/class] [class=bottomPic] width:100%; height:25vh; background:var(--img1); background-size:cover; background-position:right; padding:0.8em; [/class] [class=soundWrap] margin-left:200px; width:310px; height:25vh; padding:0.3em; background:var(--color2); overflow-y:hidden; overflow-x:hidden; filter:grayscale(100); opacity:0; transition:all 1s ease-in-out; [/class] [class name=soundWrap state=hover] opacity:0.8; [/class] [class name=soundWrap maxWidth=700px] display:none; [/class] [class=soundScroll] width:110%; height:25vh; overflow-y:scroll; [/class] [class=soundMedia] margin-left:5px; width:600px; height:50vh; [/class] [script class=none] show One addClass tabSelect 01 [/script] [script class=01 on=click] removeClass tabSelect miniTab addClass tabSelect 01 fadeOut 750 textWrap fadeIn 750 One [/script] [script class=02 on=click] removeClass tabSelect miniTab addClass tabSelect 02 fadeOut 750 textWrap fadeIn 750 Two [/script] [script class=03 on=click] removeClass tabSelect miniTab addClass tabSelect 03 fadeOut 750 textWrap fadeIn 750 Three [/script] [script class=04 on=click] removeClass tabSelect miniTab addClass tabSelect 04 fadeOut 750 textWrap fadeIn 750 Four [/script]
Code:
[nobr]
[comment]-------------------------code begin here-------------------------[/comment]
[div class=mainCon][div class=tabBar][div class="miniTab 01"]♠[/div][div class="miniTab 02"]♥[/div][div class="miniTab 03"]♣[/div][div class="miniTab 04"]♦[/div][/div][div class=pageWrap][div class=scrollWrap][div class="textWrap One"][div=float:right;width:150px;height:150px;background:var(--img2);background-size:cover;background-position:right;border:1px solid var(--color3);box-shadow:2px 2px 0px var(--color3);][/div]
[div class=header][font=Alegreya]BASICS[/font][/div]
[div class=title]Character Name[/div]
[br][/br][div class=title]Nickname(s)[/div] [font=Lato]name[/font]
[br][/br][div class=title]Title[/div] role
[br][/br][div class=title]Age[/div] xx
[br][/br][div class=title]Gender[/div] blep
[br][/br][div class=title]Occupation[/div] thing
[br][/br][div class=title]Alignment[/div] thing

[br][/br][div class=header]APPEARANCE[/div]
[div class=title]Height[/div] XX
[br][/br][div class=title]Weight[/div] xx
[br][/br][div class=title]Hair Color[/div] color
[br][/br][div class=title]Eye Color[/div] color
[br][/br][div class=title]Complexion[/div] thing
[br][/br][div class=title]Physique[/div] thing
[br][/br][div class=title]Distinguishing Feature(s)[/div] thing
[br][/br][div class=title]Tattoo(s)[/div] pepe

[/div]
[div class="textWrap Two"][div=float:right;width:150px;height:150px;background:var(--img3);background-size:cover;background-position:center;border:1px solid var(--color3);box-shadow:2px 2px 0px var(--color3);][/div][div class=header]PERSONA[/div]
[div class=title]Vices[/div] gjapg | ghioang | nfafama
[br][/br][div class=title]Virtues[/div] gjapg | ghioang | nfafama
[br][/br][div class=title]Likes[/div] gjapg | ghioang | nfafama
[br][/br][div class=title]Dislikes[/div] gjapg | ghioang | nfafama
[br][/br][div class=title]Habits[/div] gjapg | ghioang | nfafama

[br][/br][br][/br]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur arcu purus, ac posuere nulla malesuada sit amet. Nam convallis venenatis venenatis. Mauris gravida dui non porta lobortis. Suspendisse sollicitudin turpis eu odio iaculis, eu facilisis ex lacinia. In quis viverra dolor. Ut non convallis magna, eget convallis diam. Fusce bibendum rhoncus urna sit amet dictum. Duis enim ligula, fermentum sit amet lobortis ac, porttitor eget magna. Etiam posuere rutrum ultrices. Nunc blandit, nibh vel tincidunt finibus, justo diam consectetur risus, sed rhoncus nunc nunc condimentum ante.

[br][/br][br][/br]Donec rhoncus, lacus vel efficitur congue, magna nulla aliquam ipsum, quis suscipit elit justo id risus. Pellentesque eu tellus ut mauris cursus auctor ac ut orci. Pellentesque pharetra velit id mi pharetra suscipit. Vivamus commodo blandit egestas. Vivamus tincidunt tincidunt turpis, in eleifend diam egestas vel. In fringilla tristique fermentum. Phasellus felis nunc, gravida ac convallis id, sollicitudin id nibh. Nunc vehicula, ipsum vitae pellentesque eleifend, massa odio placerat felis, ut lobortis enim ligula id erat. Mauris dapibus bibendum risus eget tincidunt. Duis lorem ipsum, posuere eget risus ac, pellentesque viverra lectus. Donec vestibulum ante sed risus pharetra viverra. Aliquam porta sapien vitae metus luctus hendrerit.
[/div]

[div class="textWrap Three"][div class=header]BIOGRAPHY[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur arcu purus, ac posuere nulla malesuada sit amet. Nam convallis venenatis venenatis. Mauris gravida dui non porta lobortis. Suspendisse sollicitudin turpis eu odio iaculis, eu facilisis ex lacinia. In quis viverra dolor. Ut non convallis magna, eget convallis diam. Fusce bibendum rhoncus urna sit amet dictum. Duis enim ligula, fermentum sit amet lobortis ac, porttitor eget magna. Etiam posuere rutrum ultrices. Nunc blandit, nibh vel tincidunt finibus, justo diam consectetur risus, sed rhoncus nunc nunc condimentum ante.

[br][/br][br][/br]Donec rhoncus, lacus vel efficitur congue, magna nulla aliquam ipsum, quis suscipit elit justo id risus. Pellentesque eu tellus ut mauris cursus auctor ac ut orci. Pellentesque pharetra velit id mi pharetra suscipit. Vivamus commodo blandit egestas. Vivamus tincidunt tincidunt turpis, in eleifend diam egestas vel. In fringilla tristique fermentum. Phasellus felis nunc, gravida ac convallis id, sollicitudin id nibh. Nunc vehicula, ipsum vitae pellentesque eleifend, massa odio placerat felis, ut lobortis enim ligula id erat. Mauris dapibus bibendum risus eget tincidunt. Duis lorem ipsum, posuere eget risus ac, pellentesque viverra lectus. Donec vestibulum ante sed risus pharetra viverra. Aliquam porta sapien vitae metus luctus hendrerit.

[br][/br][br][/br]Mauris iaculis ligula vitae sollicitudin egestas. Morbi rutrum tempus turpis in dignissim. Morbi lacinia nunc vel ex semper, ut interdum elit lacinia. Fusce semper dui sit amet lectus fringilla, eu congue mauris dignissim. Mauris dapibus eleifend ipsum, sit amet laoreet dolor vestibulum in. In fringilla in leo id rutrum. Vestibulum commodo rhoncus nibh, faucibus auctor arcu eleifend quis. Nunc a fringilla erat, eget pellentesque lorem. Praesent feugiat metus in neque placerat consequat. Nulla eleifend auctor odio, vitae aliquet ipsum ornare id. Sed euismod hendrerit lectus, non euismod tellus dignissim eu. Suspendisse metus diam, mollis sit amet bibendum tempus, iaculis eu augue. Aenean convallis tellus gravida aliquet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales, tortor non vestibulum lobortis, libero lacus malesuada libero, sed volutpat dolor libero ut purus.
[/div]
[div class="textWrap Four"][div=float:right;width:150px;height:250px;background:var(--img4);background-size:cover;background-position:center;border:1px solid var(--color3);box-shadow:-2px 2px 0px var(--color3);transform:rotateY(180deg);][/div]
[div class=header]STATS[/div]
[div class=title]01 Name[/div] [div class=statBar][div=width:30%;height:5px;background:var(--color3);][/div][/div]
[br][/br]description here

[br][/br][br][/br][div class=title]02 Name[/div] [div class=statBar][div=width:78%;height:5px;background:var(--color3);][/div][/div]
[br][/br]description here

[br][/br][br][/br][div class=title]03 Name[/div] [div class=statBar][div=width:56%;height:5px;background:var(--color3);][/div][/div]
[br][/br]description here

[br][/br][div class=header]COMBAT[/div]
[div class=title]01 Name[/div] [div class=statBar][div=width:30%;height:5px;background:var(--color3);][/div][/div]
[br][/br]description here

[br][/br][br][/br][div class=title]02 Name[/div] [div class=statBar][div=width:78%;height:5px;background:var(--color3);][/div][/div]
[br][/br]description here

[br][/br][br][/br][div class=title]03 Name[/div] [div class=statBar][div=width:56%;height:5px;background:var(--color3);][/div][/div]
[br][/br]description here
[/div]
[/div][/div][div class=bottomPic][div class=soundWrap][div class=soundScroll][div class=soundMedia][media=soundcloud]https://soundcloud.com/raijin-senkei/sets/my-hero-academia-boku-no-hero[/media][/div][/div][/div][/div]
[/div][div=max-width:900px;margin:auto;center;text-align:right;letter-spacing:0.3em;opacity:0.6;font-size:0.5em;]code by RI.a[/div]

[comment]-------------------------code ends here-------------------------[/comment]
[comment]-------------------------classes begin here-------------------------[/comment]
[class=mainCon]
margin:auto;center;
min-width:200px;
max-width:900px;
height:auto;
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
align-items:center;
--color1:#FFFFFF;
--color2:#D1D3D4;
--color3:#8C8C8C;
--color4:#222222;
--img1:url('https://66.media.tumblr.com/e4fbb4f1cbeaeb0b35886241252015bb/tumblr_ozkvmrBFhR1ve1krvo1_540.png');
--img2:url('https://i.imgur.com/KNnQSoe.png');
--img3:url('http://pm1.narvii.com/6844/71f4a0795858955044c4549383edb5eb1abf2740v2_00.jpg');
--img4:url('https://i.pinimg.com/originals/02/02/32/020232fccf5cc7bb1a87abed71d7c896.png');
background:var(--color1);
[/class]

[comment]-------------------------tab classes here-------------------------[/comment]
[class=tabBar]
width:25px;
height:auto;
[/class]

[class name=tabBar maxWidth=700px]
width:100px;
[/class]

[class=miniTab]
display:inline-block;
width:20px;
height:30px;
padding:2.5px;
text-align:center;
font-size:25px;
color:var(--color2);
cursor:pointer;
transition:all 1s ease-in-out;
[/class]

[class name=miniTab state=hover]
color:var(--color4);
[/class]

[class=tabSelect]
color:var(--color4)!important;
[/class]

[comment]-------------------------content classes here-------------------------[/comment]
[class=pageWrap]
width:400px;
height:40vh;
overflow:hidden;
padding:0.8em;
[/class]

[class=scrollWrap]
width:110%;
height:40vh;
overflow-y:scroll;
overflow-x:hidden;
[/class]

[class=textWrap]
display:none;
width:87%;
padding:0.8em;
font-family:Lato;
font-size:0.8em;
color:var(--color4);
[/class]

[class=title]
display:inline-block;
font-family:Alegreya;
font-size:1em;
color:var(--color3);
[/class]

[class=header]
font-family:Alegreya;
font-size:3em;
color:var(--color2);
[/class]

[class=statBar]
width:150px;
height:5px;
display:inline-block;
border:1px solid var(--color3);
[/class]

[comment]-------------------------bottom classes here-------------------------[/comment]
[class=bottomPic]
width:100%;
height:25vh;
background:var(--img1);
background-size:cover;
background-position:right;
padding:0.8em;
[/class]

[class=soundWrap]
margin-left:200px;
width:310px;
height:25vh;
padding:0.3em;
background:var(--color2);
overflow-y:hidden;
overflow-x:hidden;
filter:grayscale(100);
opacity:0;
transition:all 1s ease-in-out;
[/class]

[class name=soundWrap state=hover]
opacity:0.8;
[/class]

[class name=soundWrap maxWidth=700px]
display:none;
[/class]

[class=soundScroll]
width:110%;
height:25vh;
overflow-y:scroll;
[/class]

[class=soundMedia]
margin-left:5px;
width:600px;
height:50vh;
[/class]

[comment]-------------------------script classes here-------------------------[/comment]
[script class=none]
show One
addClass tabSelect 01
[/script]

[script class=01 on=click]
removeClass tabSelect miniTab
addClass tabSelect 01
fadeOut 750 textWrap
fadeIn 750 One
[/script]

[script class=02 on=click]
removeClass tabSelect miniTab
addClass tabSelect 02
fadeOut 750 textWrap
fadeIn 750 Two
[/script]

[script class=03 on=click]
removeClass tabSelect miniTab
addClass tabSelect 03
fadeOut 750 textWrap
fadeIn 750 Three
[/script]

[script class=04 on=click]
removeClass tabSelect miniTab
addClass tabSelect 04
fadeOut 750 textWrap
fadeIn 750 Four
[/script][/nobr]
 

Users who are viewing this thread

Back
Top