• 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 〔 ✾ 欢 ˑ 迎 ✾ 〕 - - 𝚛𝚒.𝚊'𝚜 𝚌𝚘𝚍𝚎 𝚜𝚑𝚘𝚙

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.
     
    • 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:
    • 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 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 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
     
    • 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 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 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 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 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 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 :`)
     
    • 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 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 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]
     
    • 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 8
    • [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 calypso calypso
    This uses a lot of clip-paths to create the branch looking lines d: Feel free to play with the numbers in the branch classes if you wish to change the shapes. Enjoy!
    Type: IC Post | Theme: Storybook/Woods| Mobile Friendly: Yes | Features: Hidden scroll, clip-path/polygon, custom cursor
    Free to use with credits[/div]
    08
    [/div]

    [div class=header]
    [div class=branch]
    [/div][div class=branch][/div][div class=Pic][/div]
    [div class=branch]
    [/div][/div][div class=contentWrap][div class=scrollWrap][div class=textWrap]
    Character Name
    location: somewhere|tags: @ tag

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sapien ut molestie accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consequat est dignissim leo maximus, sodales ornare risus convallis. Aliquam mollis nisi ex, quis fermentum tortor gravida feugiat. Sed sagittis mauris diam, et ultrices est eleifend a. Duis molestie egestas diam ac faucibus. Donec consequat tincidunt nibh. Ut eget gravida est. Vestibulum malesuada quis ipsum dignissim consequat. Sed dictum aliquet ultricies.

    Donec ut molestie lectus, mollis vestibulum enim. Quisque a quam in felis porttitor sagittis. Duis iaculis porta lacus a venenatis. Integer at convallis ex. Nunc pulvinar justo augue, quis molestie nisl aliquet sed. Morbi eget pretium odio. Curabitur nisl nisi, hendrerit ut volutpat ac, rhoncus et erat. Integer luctus ultrices nisi, ut dictum nisl fermentum quis. Etiam tincidunt fermentum varius. Nulla aliquam, nibh nec condimentum pulvinar, tortor massa vehicula tellus, vel consequat tellus est id sem. Fusce consectetur lorem urna, non fermentum diam euismod eget.

    Integer bibendum faucibus pretium. Vestibulum vestibulum ullamcorper augue et finibus. Aliquam ultrices odio pulvinar, maximus dolor eget, consequat justo. Etiam sodales dolor non tempor rutrum. Phasellus eget eros eu velit volutpat porta non non velit. Fusce condimentum venenatis bibendum. Mauris varius sapien sed dolor venenatis, finibus sodales nisi interdum. Donec eget accumsan enim. Cras dapibus elementum elit vel suscipit. Phasellus ac ullamcorper nisl. Mauris efficitur lobortis efficitur.[/div][/div][div class=branch2][/div][/div]
    code by RI.a

    [class=header] display:flex; margin:auto;center; min-width:200px; max-width:600px; height:auto; --color1:#937A59; --color2:#CDAA7D; --img1:url('https://cdn.discordapp.com/attachments/485998611402981396/540303932875079690/3bb35635e9aced2850cd7703bd47ba1f.png'); background:var(--color1); align-items:center; justify-content:center; cursor:url(https://i.imgur.com/Z8wS0On.png?1), auto; [/class] [class=Pic] width:200px; height:200px; border-radius:50%; border:1px solid var(--color2); background:var(--img1); background-size:cover; background-position:center; [/class] [class=branch] width:60px; height:230px; clip-path: polygon(40% 81%, 36% 73%, 44% 46%, 27% 39%, 48% 42%, 100% 0, 64% 40%, 60% 79%, 100% 100%, 72% 100%, 47% 89%, 0 73%); background:var(--color2); [/class] [class=branch2] width:100px; height:600px; clip-path: polygon(40% 81%, 36% 73%, 44% 46%, 27% 39%, 48% 42%, 100% 0, 64% 40%, 60% 79%, 100% 100%, 72% 100%, 47% 89%, 0 73%); background:#937A59; transform:rotateZ(-90deg); position:relative; left:250px; top:-250px; [/class] [class=contentWrap] margin:auto;center; min-width:200px; max-width:600px; height:63vh; --color2:#CDAA7D; --color3:#B89970; --color4:#222; background:var(--color2); overflow:hidden; cursor:url(https://i.imgur.com/Z8wS0On.png?1), auto; [/class] [class name=contentWrap maxWidth=600px] padding-top:0.8em; [/class] [class=scrollWrap] width:105%; height:50vh; overflow-y:scroll; overflow-x:hidden; [/class] [class=textWrap] width:92%; padding:0.8em; text-align:justify; color:var(--color4); font-family:Open Sans; font-size:0.8em; [/class]
    Code: 
    [div class=header][div=transform:rotateZ(-30deg);position:relative;left:-10px;][div class=branch][/div][/div][div class=branch][/div][div class=Pic][/div][div=transform:rotateY(180deg);][div class=branch][/div][/div][/div][div class=contentWrap][div class=scrollWrap][div class=textWrap][div=font-size:2em;text-align:center;][font=Goudy Bookletter 1911]Character Name[/font][/div][div=text-align:center;color:#937A59;][font=Open Sans]location:[/font] somewhere|tags: @ tag[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sapien ut molestie accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consequat est dignissim leo maximus, sodales ornare risus convallis. Aliquam mollis nisi ex, quis fermentum tortor gravida feugiat. Sed sagittis mauris diam, et ultrices est eleifend a. Duis molestie egestas diam ac faucibus. Donec consequat tincidunt nibh. Ut eget gravida est. Vestibulum malesuada quis ipsum dignissim consequat. Sed dictum aliquet ultricies.

Donec ut molestie lectus, mollis vestibulum enim. Quisque a quam in felis porttitor sagittis. Duis iaculis porta lacus a venenatis. Integer at convallis ex. Nunc pulvinar justo augue, quis molestie nisl aliquet sed. Morbi eget pretium odio. Curabitur nisl nisi, hendrerit ut volutpat ac, rhoncus et erat. Integer luctus ultrices nisi, ut dictum nisl fermentum quis. Etiam tincidunt fermentum varius. Nulla aliquam, nibh nec condimentum pulvinar, tortor massa vehicula tellus, vel consequat tellus est id sem. Fusce consectetur lorem urna, non fermentum diam euismod eget.

Integer bibendum faucibus pretium. Vestibulum vestibulum ullamcorper augue et finibus. Aliquam ultrices odio pulvinar, maximus dolor eget, consequat justo. Etiam sodales dolor non tempor rutrum. Phasellus eget eros eu velit volutpat porta non non velit. Fusce condimentum venenatis bibendum. Mauris varius sapien sed dolor venenatis, finibus sodales nisi interdum. Donec eget accumsan enim. Cras dapibus elementum elit vel suscipit. Phasellus ac ullamcorper nisl. Mauris efficitur lobortis efficitur.[/div][/div][div class=branch2][/div][/div][div=margin:auto;center;max-width:600px;text-align:right;opacity:0.6;letter-spacing:0.3em;font-size:0.5em;]code by RI.a[/div]
[nobr]
[comment]--------------------------------------classes begin here--------------------------------------[/comment]
[class=header]
display:flex;
margin:auto;center;
min-width:200px;
max-width:600px;
height:auto;
--color1:#937A59;
--color2:#CDAA7D;
--img1:url('https://cdn.discordapp.com/attachments/485998611402981396/540303932875079690/3bb35635e9aced2850cd7703bd47ba1f.png');
background:var(--color1);
align-items:center;
justify-content:center;
cursor:url(https://i.imgur.com/Z8wS0On.png?1), auto;
[/class]

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

[class=branch]
width:60px;
height:230px;
clip-path: polygon(40% 81%, 36% 73%, 44% 46%, 27% 39%, 48% 42%, 100% 0, 64% 40%, 60% 79%, 100% 100%, 72% 100%, 47% 89%, 0 73%);
background:var(--color2);
[/class]

[class=branch2]
width:100px;
height:600px;
clip-path: polygon(40% 81%, 36% 73%, 44% 46%, 27% 39%, 48% 42%, 100% 0, 64% 40%, 60% 79%, 100% 100%, 72% 100%, 47% 89%, 0 73%);
background:#937A59;
transform:rotateZ(-90deg);
position:relative;
left:250px;
top:-250px;
[/class]

[comment]--------------------------------------content classes begin here--------------------------------------[/comment]
[class=contentWrap]
margin:auto;center;
min-width:200px;
max-width:600px;
height:63vh;
--color2:#CDAA7D;
--color3:#B89970;
--color4:#222;
background:var(--color2);
overflow:hidden;
cursor:url(https://i.imgur.com/Z8wS0On.png?1), auto;
[/class]

[class name=contentWrap maxWidth=600px]
padding-top:0.8em;
[/class]

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

[class=textWrap]
width:92%;
padding:0.8em;
text-align:justify;
color:var(--color4);
font-family:Open Sans;
font-size:0.8em;
[/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 9
    • [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 Minako Minako
    Thanks so much for waiting! Here's your code ^^ Enjoy! Hover over the blank space!
    Type: IC Post | Theme: Elegant borders | Mobile Friendly: Yes | Features: Hover, hidden scroll
    Free to use with credits[/div]
    09
    [/div]

    [div class=mainCon][div class=header][div class=charaPic][/div]
    [div class=title]Character Name Here

    Location: Somewhere
    Mentions: @tag
    Interactions: @tag [/div][/div][div class=contentParent][div class=borderWrap][div class="border borderWide"][/div][div class="border borderTall"][/div][div class="border borderShort"][/div][div class=scrollWrap][div class=textWrap]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare elementum porttitor. Cras scelerisque sapien odio, vel ullamcorper dolor consequat quis. In rutrum maximus purus non vulputate. Phasellus sollicitudin tempus metus, vitae fermentum lacus. Donec nec mauris ut est egestas iaculis eget in ipsum. Morbi commodo sagittis sem, eu auctor purus vulputate vitae. Pellentesque porttitor hendrerit nisl, a laoreet erat elementum a. Phasellus fermentum tempus tempor. Sed ac felis placerat, rutrum elit ut, varius metus. Vivamus rhoncus rutrum lacus vitae tincidunt.

    [div class=dialogue]In non euismod felis, efficitur aliquet tortor. Ut eu velit et nunc tempus aliquam eu eu neque. Praesent at ipsum tincidunt, consectetur mi nec, sodales felis. Morbi mi magna, commodo sed diam ut, hendrerit condimentum diam. In sed nisl est. Mauris sed elit in magna porttitor consequat eget a ligula. In sed sollicitudin neque. Duis ut diam non erat sagittis imperdiet vel vitae enim. Vivamus quis efficitur erat, nec iaculis nibh.[/div]

    Mauris vitae dolor varius, efficitur leo id, tincidunt velit. In volutpat consequat varius. Etiam eget viverra neque, quis pellentesque massa. Vestibulum eu odio sit amet ex finibus tristique. Morbi eu metus at leo ultrices egestas vitae sit amet mi. Praesent in fringilla ligula. Morbi id cursus libero. Fusce varius vehicula feugiat. Maecenas eget turpis finibus, convallis velit sit amet, ultricies augue. Sed vitae rutrum nibh. Morbi libero lorem, scelerisque non ante eget, semper tincidunt turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In porta mi et interdum commodo.

    Quisque vitae mollis nisl, ut bibendum ligula. Morbi varius tortor sed mollis malesuada. Ut feugiat sed lacus vitae ornare. Donec finibus ultrices viverra. Mauris nec erat egestas, commodo risus a, mollis risus. Nulla elit augue, consequat nec mauris vitae, sodales fermentum est. In id auctor diam. Nullam nisl urna, tempus in tempus non, commodo sed tellus. [div class=dialogue]Nam magna tellus, ultricies porta aliquet vitae, dignissim pretium nibh. Sed tincidunt scelerisque est, vitae feugiat ante scelerisque non.[/div] Vivamus nulla ante, dapibus nec varius et, interdum quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elit leo, egestas quis purus quis, lobortis venenatis lorem. Praesent eleifend libero ut consectetur pulvinar.[/div][/div][/div][/div][/div]
    code by RI.a
    [class=mainCon] min-width:200px; max-width:80%; height:fit-content; margin:auto;center; --color1:#FFFFFF; --color2:#89ccdd; --color3:#184999; --color4:#000000; --img1:url('https://www.adorama.com/alc/wp-content/uploads/2017/11/shutterstock_114802408.jpg'); overflow:hidden; padding:1em; background:var(--img1); background-size:cover; background-attachment:fixed; background-repeat:no-repeat; [/class] [class=header] display:flex; align-items:center; padding:1em; border-bottom: 2px solid var(--color3); font-family:Montserrat; color:var(--color1); font-weight:bold; [/class] [class=charaPic] float:left; width:200px; height:200px; background:url('https://via.placeholder.com/200'); background-size:cover; background-position:center; border-bottom:5px double var(--color3); [/class] [class=title] width:fit-content; font-family:Petit Formal Script; font-size:2em; color:var(--color1); border-bottom:1px solid var(--color3); text-shadow:2px 0px 0px var(--color3); [/class] [class=contentParent] width:auto; height:fit-content; overflow:hidden; background:var(--color1); opacity:0; transition: all 1s ease-in-out; border-bottom:2px solid var(--color3); [/class] [class name=contentParent state=hover] opacity:0.9; [/class] [class=scrollWrap] margin-top:1%; width:105%; height:48vh; padding-bottom:1%; overflow-y:scroll; overflow-x:hidden; [/class] [class name=scrollWrap maxWidth=600px] height:43vh; [/class] [class=textWrap] width:93%; font-family:Montserrat; color:var(--color4); padding-left:1em; padding-right:1em; [/class] [class name=textWrap maxWidth=600px] padding:0em; [/class] [class=dialogue] display:inline-block; color:var(--color3); [/class] [class=borderWrap] margin:2em 1em; padding:2px 4px 0px 4px; position:relative; [/class] [class=border] box-sizing:content-box; width:100%; height:100%; pointer-events:none; position:absolute; [/class] [class=borderTall] width:calc(100% - 8px); height:100%; top:-8px; left:3px; padding:8px 0px 8px 0px; border:1px solid var(--color2); [/class] [class=borderWide] top:0; left:-5px; padding:0px 4px 0px 4px; border:1px solid var(--color2); [/class] [class=borderShort] top:-4px; left:-1px; padding:4px 0px 4px 0px; border:1px solid var(--color2); [/class]
    Code: 
    [div class=mainCon][div class=header][div class=charaPic][/div][div=width:auto;padding:1em;][div class=title][font=Petit Formal Script]Character Name Here[/font][/div] 
[font=Montserrat]Location:[/font] Somewhere
Mentions: @tag
Interactions: @tag [/div][/div][div class=contentParent][div class=borderWrap][div class="border borderWide"][/div][div class="border borderTall"][/div][div class="border borderShort"][/div][div class=scrollWrap][div class=textWrap]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare elementum porttitor. Cras scelerisque sapien odio, vel ullamcorper dolor consequat quis. In rutrum maximus purus non vulputate. Phasellus sollicitudin tempus metus, vitae fermentum lacus. Donec nec mauris ut est egestas iaculis eget in ipsum. Morbi commodo sagittis sem, eu auctor purus vulputate vitae. Pellentesque porttitor hendrerit nisl, a laoreet erat elementum a. Phasellus fermentum tempus tempor. Sed ac felis placerat, rutrum elit ut, varius metus. Vivamus rhoncus rutrum lacus vitae tincidunt.

[div class=dialogue]In non euismod felis, efficitur aliquet tortor. Ut eu velit et nunc tempus aliquam eu eu neque. Praesent at ipsum tincidunt, consectetur mi nec, sodales felis. Morbi mi magna, commodo sed diam ut, hendrerit condimentum diam. In sed nisl est. Mauris sed elit in magna porttitor consequat eget a ligula. In sed sollicitudin neque. Duis ut diam non erat sagittis imperdiet vel vitae enim. Vivamus quis efficitur erat, nec iaculis nibh.[/div]

Mauris vitae dolor varius, efficitur leo id, tincidunt velit. In volutpat consequat varius. Etiam eget viverra neque, quis pellentesque massa. Vestibulum eu odio sit amet ex finibus tristique. Morbi eu metus at leo ultrices egestas vitae sit amet mi. Praesent in fringilla ligula. Morbi id cursus libero. Fusce varius vehicula feugiat. Maecenas eget turpis finibus, convallis velit sit amet, ultricies augue. Sed vitae rutrum nibh. Morbi libero lorem, scelerisque non ante eget, semper tincidunt turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In porta mi et interdum commodo.

Quisque vitae mollis nisl, ut bibendum ligula. Morbi varius tortor sed mollis malesuada. Ut feugiat sed lacus vitae ornare. Donec finibus ultrices viverra. Mauris nec erat egestas, commodo risus a, mollis risus. Nulla elit augue, consequat nec mauris vitae, sodales fermentum est. In id auctor diam. Nullam nisl urna, tempus in tempus non, commodo sed tellus. [div class=dialogue]Nam magna tellus, ultricies porta aliquet vitae, dignissim pretium nibh. Sed tincidunt scelerisque est, vitae feugiat ante scelerisque non.[/div] Vivamus nulla ante, dapibus nec varius et, interdum quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elit leo, egestas quis purus quis, lobortis venenatis lorem. Praesent eleifend libero ut consectetur pulvinar.[/div][/div][/div][/div][/div][div=max-width:80%;margin:auto;center;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]
min-width:200px;
max-width:80%;
height:fit-content;
margin:auto;center;
--color1:#FFFFFF;
--color2:#89ccdd;
--color3:#184999;
--color4:#000000;
--img1:url('https://www.adorama.com/alc/wp-content/uploads/2017/11/shutterstock_114802408.jpg'); 
overflow:hidden;
padding:1em;
background:var(--img1);
background-size:cover;
background-attachment:fixed;
background-repeat:no-repeat;
[/class]

[comment]-------------------------------------header classes begin here-------------------------------------[/comment]
[class=header]
display:flex;
align-items:center;
padding:1em;
border-bottom: 2px solid var(--color3);
font-family:Montserrat;
color:var(--color1);
font-weight:bold;
[/class]

[class=charaPic]
float:left;
width:200px;
height:200px;
background:url('https://via.placeholder.com/200'); [comment]replace url here with image link (ends with.jpg .png or .gif)[/comment]
background-size:cover;
background-position:center;
border-bottom:5px double var(--color3);
[/class]

[class=title]
width:fit-content;
font-family:Petit Formal Script;
font-size:2em;
color:var(--color1);
border-bottom:1px solid var(--color3);
text-shadow:2px 0px 0px var(--color3);
[/class]

[comment]-------------------------------------content classes begin here-------------------------------------[/comment]
[class=contentParent]
width:auto;
height:fit-content;
overflow:hidden;
background:var(--color1);
opacity:0;
transition: all 1s ease-in-out;
border-bottom:2px solid var(--color3);
[/class]

[class name=contentParent state=hover]
opacity:0.9;
[/class]

[class=scrollWrap]
margin-top:1%;
width:105%;
height:48vh;
padding-bottom:1%;
overflow-y:scroll;
overflow-x:hidden;
[/class]

[class name=scrollWrap maxWidth=600px]
height:43vh;
[/class]

[class=textWrap]
width:93%;
font-family:Montserrat;
color:var(--color4);
padding-left:1em;
padding-right:1em;
[/class]

[class name=textWrap maxWidth=600px]
padding:0em;
[/class]

[class=dialogue]
display:inline-block;
color:var(--color3);
[/class]

[comment]-------------------------------------border classes begin here-------------------------------------[/comment]
[class=borderWrap]
margin:2em 1em;
padding:2px 4px 0px 4px;
position:relative;
[/class]

[class=border]
box-sizing:content-box;
width:100%;
height:100%;
pointer-events:none;
position:absolute;
[/class]

[class=borderTall]
width:calc(100% - 8px);
height:100%;
top:-8px;
left:3px;
padding:8px 0px 8px 0px;
border:1px solid var(--color2);
[/class]

[class=borderWide]
top:0;
left:-5px;
padding:0px 4px 0px 4px;
border:1px solid var(--color2);
[/class]

[class=borderShort]
top:-4px;
left:-1px;
padding:4px 0px 4px 0px;
border:1px solid var(--color2);
[/class]
[/nobr]
     
    • Finished 10
    • [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 Sterling_wolf Sterling_wolf
    A mobile friendly version of my 2nd code in my freebie thread. Hope you like it! ^^
    Type: IC Post | Theme: Misaligned | Mobile Friendly: Yes | Features: Hidden scroll
    Free to use with credits[/div]
    10
    [/div]

    [div class=wrapper][div class=background][div class=contentbox][div class=scrollbox][div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper sapien lectus, lacinia vestibulum lorem imperdiet in. Nullam vel nunc sit amet urna egestas rutrum. Maecenas congue odio ultricies ex pulvinar ultricies. Pellentesque faucibus, felis vel accumsan tincidunt, tellus tellus convallis purus, sit amet elementum elit diam vel felis. Nunc aliquam enim mauris. Fusce posuere auctor tellus, at ultricies ante eleifend fermentum. Suspendisse porta massa ac luctus semper. Phasellus vestibulum nunc interdum libero mattis, at varius quam tincidunt.

    Nulla eu ligula rhoncus justo euismod vestibulum. Suspendisse lacus arcu, venenatis lacinia pellentesque sit amet, porttitor sed est. Maecenas porta odio eu dui venenatis, vel elementum nisi bibendum. Curabitur ante libero, pretium ac diam eu, facilisis eleifend lacus. Suspendisse ut risus eget odio fringilla tempor. Phasellus a scelerisque nisl, in dictum eros. Aenean ut urna et dolor ullamcorper mattis ac ac nibh. Maecenas nisi diam, cursus eget scelerisque eget, egestas vel ligula. Morbi quis sem nibh.

    Sed aliquam rutrum sollicitudin. Aliquam erat volutpat. Fusce aliquam vulputate tortor, a eleifend nulla aliquam ut. Nullam viverra nec turpis eget aliquam. Integer in magna at metus finibus venenatis vel non turpis. In hac habitasse platea dictumst. In malesuada sit amet felis et volutpat. Pellentesque id bibendum elit. Nunc rhoncus consectetur quam ac imperdiet. Aenean hendrerit facilisis faucibus.[/div][/div][/div]
    [div class=tagbox][div class=pic][/div] Location: somewhere
    Mentions: @tag
    Interactions: @tag @tag [/div][/div][/div]
    code by RI.a
    [class=wrapper] margin:auto;center; min-width:200px; max-width:600px; height:auto; display:flex; flex-flow:column wrap; justify-conten:center; --color1: #00FFCC; --color2:#000000; --img1:url('https://lh3.googleusercontent.com/HA0UyAW4RJMIhGt1TqGwT1ZtTnmpgpwhmEudXVaksgjT7Fn_ncNfYvrALAPoby4LMdyn_dNA1B62ts-Ub2Zg1hPvLHh7CDx_SjE43oG6LVzrhimhr64JddFoP4srds0gwY5dgCRP'); --img2:url('https://lh3.googleusercontent.com/LOaMRl3UDXEnoIlubq_fgak4A3CEfa7y0_HL3R2MP7muwdz3ktl8Jyby6yITgRMfCcoKzFNkflK0MgGZNJTLcC9MuvEUMYCufQ9MUfNDsJw_2XU0CnCXcNKSHN1hu-IwTLHDVHWc'); [/class] [class=background] width:100%; height:fit-content; padding:1em; background:var(--img2); background-size:cover; background-position:10em 0em; background-repeat:no-repeat; [/class] [class name=background maxWidth=800px] background-position:top; padding:0.2em; [/class] [class=contentbox] margin:auto; width:90%; height:50vh; padding:0.2em; overflow:hidden; background:var(--color2); opacity:0.8; [/class] [class name=contentbox minWidth=800px] width:80%; margin-left:-6em; padding:0.8em; border-left:3px solid var(--color1); [/class] [class=scrollbox] width:107%; height:50vh; overflow-y:scroll; overflow-x:hidden; [/class] [class=textbox] width:93.5%; color:var(--color1); [/class] [class=pic] width:100px; height:100px; background:var(--img1); background-size:cover; border:3px solid var(--color2); [/class] [class=tagbox] margin:auto; display:flex; width:fit-content; height:auto; padding-right:5px; background:var(--color2); color:var(--color1); opacity:0.8; [/class] [class name=tagbox minWidth=800px] margin-left:2em; [/class]
    Code: 
    [div class=wrapper][div class=background][div class=contentbox][div class=scrollbox][div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper sapien lectus, lacinia vestibulum lorem imperdiet in. Nullam vel nunc sit amet urna egestas rutrum. Maecenas congue odio ultricies ex pulvinar ultricies. Pellentesque faucibus, felis vel accumsan tincidunt, tellus tellus convallis purus, sit amet elementum elit diam vel felis. Nunc aliquam enim mauris. Fusce posuere auctor tellus, at ultricies ante eleifend fermentum. Suspendisse porta massa ac luctus semper. Phasellus vestibulum nunc interdum libero mattis, at varius quam tincidunt.

Nulla eu ligula rhoncus justo euismod vestibulum. Suspendisse lacus arcu, venenatis lacinia pellentesque sit amet, porttitor sed est. Maecenas porta odio eu dui venenatis, vel elementum nisi bibendum. Curabitur ante libero, pretium ac diam eu, facilisis eleifend lacus. Suspendisse ut risus eget odio fringilla tempor. Phasellus a scelerisque nisl, in dictum eros. Aenean ut urna et dolor ullamcorper mattis ac ac nibh. Maecenas nisi diam, cursus eget scelerisque eget, egestas vel ligula. Morbi quis sem nibh.

Sed aliquam rutrum sollicitudin. Aliquam erat volutpat. Fusce aliquam vulputate tortor, a eleifend nulla aliquam ut. Nullam viverra nec turpis eget aliquam. Integer in magna at metus finibus venenatis vel non turpis. In hac habitasse platea dictumst. In malesuada sit amet felis et volutpat. Pellentesque id bibendum elit. Nunc rhoncus consectetur quam ac imperdiet. Aenean hendrerit facilisis faucibus.[/div][/div][/div]
[div class=tagbox][div class=pic][/div] Location: somewhere
Mentions: @tag 
Interactions: @tag @tag [/div][/div][/div][div=margin:auto;center;max-width:650px;text-align:right;letter-spacing:0.3em;font-size:0.5em;opacity:0.6;]code by RI.a[/div][nobr]

[class=wrapper]
margin:auto;center;
min-width:200px;
max-width:600px;
height:auto;
display:flex;
flex-flow:column wrap;
justify-conten:center;
--color1: #00FFCC;
--color2:#000000;
--img1:url('https://lh3.googleusercontent.com/HA0UyAW4RJMIhGt1TqGwT1ZtTnmpgpwhmEudXVaksgjT7Fn_ncNfYvrALAPoby4LMdyn_dNA1B62ts-Ub2Zg1hPvLHh7CDx_SjE43oG6LVzrhimhr64JddFoP4srds0gwY5dgCRP');
--img2:url('https://lh3.googleusercontent.com/LOaMRl3UDXEnoIlubq_fgak4A3CEfa7y0_HL3R2MP7muwdz3ktl8Jyby6yITgRMfCcoKzFNkflK0MgGZNJTLcC9MuvEUMYCufQ9MUfNDsJw_2XU0CnCXcNKSHN1hu-IwTLHDVHWc');
[/class]

[class=background]
width:100%;
height:fit-content;
padding:1em;
background:var(--img2);
background-size:cover;
background-position:10em 0em;
background-repeat:no-repeat;
[/class]

[class name=background maxWidth=800px]
background-position:top;
padding:0.2em;
[/class]

[class=contentbox]
margin:auto;
width:90%;
height:50vh;
padding:0.2em;
overflow:hidden;
background:var(--color2);
opacity:0.8;
[/class]

[class name=contentbox minWidth=800px]
width:80%;
margin-left:-6em;
padding:0.8em;
border-left:3px solid var(--color1);
[/class]

[class=scrollbox]
width:107%;
height:50vh;
overflow-y:scroll;
overflow-x:hidden;
[/class]

[class=textbox]
width:93.5%;
color:var(--color1);
[/class]

[class=pic]
width:100px;
height:100px;
background:var(--img1);
background-size:cover;
border:3px solid var(--color2);
[/class]

[class=tagbox]
margin:auto;
display:flex;
width:fit-content;
height:auto;
padding-right:5px;
background:var(--color2);
color:var(--color1);
opacity:0.8;
[/class]

[class name=tagbox minWidth=800px]
margin-left:2em;
[/class][/nobr]
     
    • Request 10
    • Function: IC reply
    Mobile Friendly: Yes (I am on mobile myself often.)
    Color Scheme: Text for name/location/other character info (#00FFCC) background? (#0000)
    No. of images and/or gifs: just two
    Image URL/Source: https://lh3.googleusercontent.com/L...UMYCufQ9MUfNDsJw_2XU0CnCXcNKSHN1hu-IwTLHDVHWc (im concerned... kinda just dragged them on my laptop...) https://lh3.googleusercontent.com/H...7CDx_SjE43oG6LVzrhimhr64JddFoP4srds0gwY5dgCRP
    Style: fairly simple, but a scrollbar can be used for the response
    Theme: I have no idea, but as long as it looks good, I don't really care, you have free liberty to do it how you please (edit: looked at your freebies, I kinda like the second one...)
    Specific Features: nada
    Anything else?: nada
    Do you mind sharing the code with others?: Yes, it can be shared
     
    • Request 11
    • Function: IC Post
    Mobile Friendly: Yes
    Color Scheme: Color Palette
    No. of images and/or gifs: 1
    Image URL/Source: Pic (Source), located to the left when the div is.

    Style: Simple/Concise
    Theme: Fluff/Cute, Pokemon theme
    Specific Features: Hidden scroll bars, a separate div of Location, Mood, Current Pokemon, Tags; (Located to the left), Additional tab that lists current party, custom cursor (Pokeball)
    Anything else?: N/A
    Do you mind sharing the code with others?: Yes
     
    • Finished 11
    • [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 Mena Mena
    The size of the .png links in the Pokemon team are restricted to a size, so you won't get extremely large images of 8-bit pokemon. Add more pokemon to your team with [div class=pokeImg]. Enjoy! ^^
    Type: IC Post | Theme: Pokemon | Mobile Friendly: Yes | Features: Hidden scroll
    Free to use with credits[/div]
    11
    [/div]

    [div class=Container][div class=leftCol]
    sample_b4bc8f9f8d5afc34ed6eae52b98a821a2bbec0fd.jpg

    Interactions: @tag
    Mentions: @tag
    [div class=statusItem style="width:95%;border-top: 2px solid var(--color4);"][div class=pokeImg]
    Z4lS11c.png
    [/div][div class=pokeImg]
    FTbN5AX.png
    [/div][div class=pokeImg]
    KqyPi2E.png
    [/div][/div][/div]

    [div class=textWrap][div class=scrollWrap][div class=textBox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate a magna a porttitor. Duis in accumsan lorem, id blandit sem. Curabitur id pharetra arcu. Suspendisse potenti. In at luctus sem. Vivamus fermentum egestas metus vel porta. Nulla mattis risus eu ante maximus, sollicitudin placerat massa aliquam. Proin quis urna viverra, aliquet metus at, tristique magna. Curabitur tristique aliquam neque at placerat. Ut lacinia ligula nec vestibulum dapibus.

    Ut convallis nec orci ac laoreet. Vestibulum venenatis vestibulum ligula quis viverra. Maecenas et elit neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam porta, ligula nec luctus ullamcorper, massa arcu posuere nibh, in facilisis tortor sapien a velit. Pellentesque in mauris quam. Nam eu lacus ipsum. In arcu dolor, mollis a purus ac, cursus gravida enim. Curabitur et leo sed lectus porttitor sodales et id nisl. Fusce porta purus eget diam gravida, vel semper lorem tincidunt.

    Nam ornare sagittis felis in imperdiet. Praesent at odio eget lorem suscipit tristique. Etiam maximus posuere rhoncus. Etiam dapibus quam id mauris fringilla ultrices. Phasellus massa sem, mollis at laoreet sit amet, lacinia sit amet mi. Fusce vitae dolor malesuada, vehicula purus sed, aliquam felis. Donec laoreet tortor ut ligula vehicula varius. Vivamus convallis magna id porttitor egestas. Sed sollicitudin dictum sodales. Aenean a mi sit amet ante semper maximus sit amet eu nisi. Vestibulum augue ligula, malesuada vitae nulla vestibulum, rhoncus aliquet sem. Nam euismod vulputate scelerisque. Nullam sit amet nulla sed justo interdum fringilla. [/div][/div][div class=statusBar][div class=statusItem style="border-top: 2px solid var(--color2);"]LOCATION: somewhere[/div] [div class=statusItem style="border-top: 2px solid var(--color3);"]MOOD: feeling[/div][/div][/div][/div]
    code by RI.a | artist @rabbitcapsule
    [class=Container] margin:auto;center; min-width:200px; max-width:600px; height:auto; padding:1em; border-radius:3px; display:flex; flex-wrap:wrap; cursor:url('http://www.rw-designer.com/cursor-view/113448.png'), auto; --color1:#eee; --color2:#FA9072; --color3:#FAD472; --color4:#7298FA; --color5:#000; --img1:url('http://safebooru.org//samples/2496/sample_b4bc8f9f8d5afc34ed6eae52b98a821a2bbec0fd.jpg?2603025'); background:var(--color1); [/class] [class name=Container maxWidth=600px] flex-flow:column wrap; padding:0.3em; [/class] [class=leftCol] flex:1; height:auto; font-family:Rajdhani; font-size:0.8em; color:var(--color5); pointer-events:none; [/class] [class=statusBar] margin-top:10px; width:100%; height:fit-content; align-self:flex-end; display:flex; flex-flow:row no-wrap; align-items:center; [/class] [class=statusItem] width:100%; height:fit-content; padding:1px 5px; font-family:Rajdhani; font-size:0.8em; color:var(--color5); [/class] [class=pokeImg] display:inline-block; width:3.2em; [/class] [class=textWrap] flex:2; min-width:200px; max-width:400px; height:auto; overflow:hidden; [/class] [class=scrollWrap] width:100%; height:45vh; overflow-y:scroll; padding:5px 12px 5px 9px; [/class] [class=textBox] width:97%; font-family:Rajdhani; font-size:0.8em; color:var(--color5); [/class]
    Code: 
    [div class=Container][div class=leftCol][img]http://safebooru.org//samples/2496/sample_b4bc8f9f8d5afc34ed6eae52b98a821a2bbec0fd.jpg?2603025[/img]
Interactions: @tag 
Mentions: @tag 
[div class=statusItem style="width:95%;border-top: 2px solid var(--color4);"][div class=pokeImg][img]https://i.imgur.com/Z4lS11c.png[/img][/div][div class=pokeImg][img]https://i.imgur.com/FTbN5AX.png[/img][/div][div class=pokeImg][img]https://i.imgur.com/KqyPi2E.png[/img][/div][/div][/div]

[div class=textWrap][div class=scrollWrap][div class=textBox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate a magna a porttitor. Duis in accumsan lorem, id blandit sem. Curabitur id pharetra arcu. Suspendisse potenti. In at luctus sem. Vivamus fermentum egestas metus vel porta. Nulla mattis risus eu ante maximus, sollicitudin placerat massa aliquam. Proin quis urna viverra, aliquet metus at, tristique magna. Curabitur tristique aliquam neque at placerat. Ut lacinia ligula nec vestibulum dapibus.

Ut convallis nec orci ac laoreet. Vestibulum venenatis vestibulum ligula quis viverra. Maecenas et elit neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam porta, ligula nec luctus ullamcorper, massa arcu posuere nibh, in facilisis tortor sapien a velit. Pellentesque in mauris quam. Nam eu lacus ipsum. In arcu dolor, mollis a purus ac, cursus gravida enim. Curabitur et leo sed lectus porttitor sodales et id nisl. Fusce porta purus eget diam gravida, vel semper lorem tincidunt.

Nam ornare sagittis felis in imperdiet. Praesent at odio eget lorem suscipit tristique. Etiam maximus posuere rhoncus. Etiam dapibus quam id mauris fringilla ultrices. Phasellus massa sem, mollis at laoreet sit amet, lacinia sit amet mi. Fusce vitae dolor malesuada, vehicula purus sed, aliquam felis. Donec laoreet tortor ut ligula vehicula varius. Vivamus convallis magna id porttitor egestas. Sed sollicitudin dictum sodales. Aenean a mi sit amet ante semper maximus sit amet eu nisi. Vestibulum augue ligula, malesuada vitae nulla vestibulum, rhoncus aliquet sem. Nam euismod vulputate scelerisque. Nullam sit amet nulla sed justo interdum fringilla. [/div][/div][div class=statusBar][div class=statusItem style="border-top: 2px solid var(--color2);"]LOCATION: somewhere[/div] [div class=statusItem style="border-top: 2px solid var(--color3);"]MOOD: feeling[/div][/div][/div][/div][div=margin:auto;center;max-width:600px;text-align:right;letter-spacing:0.3em;opacity:0.6;font-size:0.5em;]code by RI.a | artist [url=https://twitter.com/rabbitcapsule]@rabbitcapsule[/url][/div][nobr]

[comment]-------------------------------------classes begin here-------------------------------------[/comment]
[class=Container]
margin:auto;center;
min-width:200px;
max-width:600px;
height:auto;
padding:1em;
border-radius:3px;
display:flex;
flex-wrap:wrap;
cursor:url('http://www.rw-designer.com/cursor-view/113448.png'), auto;
--color1:#eee;
--color2:#FA9072;
--color3:#FAD472;
--color4:#7298FA;
--color5:#000;
--img1:url('http://safebooru.org//samples/2496/sample_b4bc8f9f8d5afc34ed6eae52b98a821a2bbec0fd.jpg?2603025');
background:var(--color1);
[/class]

[class name=Container maxWidth=600px]
flex-flow:column wrap;
padding:0.3em;
[/class]

[class=leftCol]
flex:1;
height:auto;
font-family:Rajdhani;
font-size:0.8em;
color:var(--color5);
pointer-events:none;
[/class]

[class=statusBar]
margin-top:10px;
width:100%;
height:fit-content;
align-self:flex-end;
display:flex;
flex-flow:row no-wrap;
align-items:center;
[/class]

[class=statusItem]
width:100%;
height:fit-content;
padding:1px 5px;
font-family:Rajdhani;
font-size:0.8em;
color:var(--color5);
[/class]

[class=pokeImg]
display:inline-block;
width:3.2em;
[/class]

[comment]-------------------------------------text classes begin here-------------------------------------[/comment]
[class=textWrap]
flex:2;
min-width:200px;
max-width:400px;
height:auto;
overflow:hidden;
[/class]

[class=scrollWrap]
width:100%;
height:45vh;
overflow-y:scroll;
padding:5px 12px 5px 9px;
[/class]

[comment][font=Rajdhani]font[/font][/comment]
[class=textBox]
width:97%;
font-family:Rajdhani;
font-size:0.8em;
color:var(--color5);
[/class][/nobr]
     
    • Request 12

    • function: character sheet
    mobile friendly?: hopefully, yes lol
    color scheme: pale chiffon colors, light ivory tones, pastels (basically)
    number of images/gifs: one
    image url/source:
    600388
    style:     quirky (is that even a thing?)
    theme: think #relatable teenage girl and pastels (that’s basically her in a nut shell)
    specific features: tabs and secret scroll, nothing too difficult
    anything else?: nope!!
    do you moment sharing the code with others?: i don’t mind!!
     
    • Finished 12
    • [class=riaBox]margin:auto;center;min-width:200px;max-width:450px;height:auto;display:flex;--color1:#fff;--color2:#707070;--color3:#5a5353;--img1:url('https://static.zerochan.net/Tachibana.Makoto.full.1629626.jpg');background:var(--color3);font-family:Oswald;color:var(--color1);[/class][class=riaPic]width:100px;height:100px;background:var(--img1);background-size:230%;background-position:-6.5em -0.5em;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]Squeezy Lemon for intergalactic intergalactic
    Thank you for requesting! PM me any questions or issues. Hope you like it!
    Type: CS | Theme: Lemon Chiffon | Mobile Friendly: Yes | Features: Hidden scroll, tabs, nobr, hover
    Free to use with credits[/div]
    12
    [/div]

    [div class=container] [div class=wrap][div class=img][/div] [div class=scon][div class="scrollbox first"] [div class=title] character name[/div]

    [div class=subt]full name[/div] name here
    [div class=subt]nickname(s)[/div] name
    [div class=subt]age[/div] xx
    [div class=subt]gender[/div] boop
    [div class=subt]sexuality[/div] boop
    [div class=subt]occupation[/div] boop
    [div class=subt]place of birth[/div] boop
    [div class=subt]sexuality[/div] boop

    [div class=title] appearance[/div]

    [div class=subt]height[/div] boop
    [div class=subt]weight[/div] boop
    [div class=subt]hair color[/div] boop
    [div class=subt]eye color[/div] boop
    [div class=subt]tattoos/piercings[/div] boop
    [div class=subt]distinguishing feature[/div] boop
    [div class=subt]faceclaim[/div] boop [/div] [div class="scrollbox second" style="display:none"] [div class=title] persona[/div]

    [div class=subt]likes[/div] one, two, three
    [div class=subt]dislikes[/div] one, two, three
    [div class=subt]vices[/div] one, two, three
    [div class=subt]virtues[/div] one, two, three
    [div class=subt]quirks/habits[/div] boops
    [div class=subt]hobbies[/div] one, two, three

    [div class=subt]personality [/div]

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi maximus dolor ut diam vestibulum fermentum. Mauris dui leo, gravida sed nulla quis, accumsan imperdiet dui. Cras eleifend tellus quis odio vestibulum scelerisque. Sed aliquam sapien non nisl sagittis, ut aliquam ipsum venenatis. Donec id nisl diam. Pellentesque imperdiet risus rhoncus, pharetra metus sed, dictum ante. Nunc congue purus semper justo ultricies, non tincidunt turpis hendrerit. Duis nec aliquam libero, a aliquam tellus. Sed vulputate imperdiet neque, ut porta sapien consectetur sed. Sed id dignissim enim. [/div] [div class="scrollbox third" style="display:none"] [div class=title] biography[/div]

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi maximus dolor ut diam vestibulum fermentum. Mauris dui leo, gravida sed nulla quis, accumsan imperdiet dui. Cras eleifend tellus quis odio vestibulum scelerisque. Sed aliquam sapien non nisl sagittis, ut aliquam ipsum venenatis. Donec id nisl diam. Pellentesque imperdiet risus rhoncus, pharetra metus sed, dictum ante. Nunc congue purus semper justo ultricies, non tincidunt turpis hendrerit. Duis nec aliquam libero, a aliquam tellus. Sed vulputate imperdiet neque, ut porta sapien consectetur sed. Sed id dignissim enim.

    Suspendisse ac vehicula quam. Mauris nec posuere nisi. Donec sed velit dolor. Pellentesque non nisi eu diam porttitor euismod ac et diam. Integer rhoncus non ipsum auctor lobortis. Praesent viverra libero vitae odio cursus, a blandit purus laoreet. Mauris auctor nec sapien quis finibus. Fusce volutpat ultricies erat dapibus blandit. Morbi id dui venenatis, tristique ex sit amet, viverra purus. Donec porttitor fermentum justo, et iaculis felis aliquam id. [/div] [/div] [/div] [div class=tabc]
    #that's the
    tea sis
    [div class="tabs one" style="top: 60%; left: -20%; transform: scale(1.2); display:none;"]1.[/div] [div class="tabs two" style="top: 50%; left: 5%; transform: scale(1.8); display:none;"]2.[/div] [div class="tabs three" style="top: 68%; left: 12%; transform: scale(1.6); display:none;"]3.[/div] [/div] [/div]
    code by Ri.a
    [class=container] margin: auto; center; min-width: 200px; max-width: 500px; padding: 20px; height: fit-content; --img1: url('https://i.imgur.com/PdGD1lq.jpg'); --color1: #FCFBFA; --color2: #F7F4E5; --color3: #F2E5B5; --color4: #0F0409; background: var(--color2); display: flex; flex-wrap: wrap; [/class] [class=wrap] display: flex; flex-wrap: wrap; flex: 1; height:fit-content; min-width: 300px; [/class] [class=img] flex: 1; height: 100px; background: var(--img1); background-size:cover; background-position: center; [/class] [class=scon] overflow: hidden; box-sizing: border-box; height: 350px; margin: 0 auto; padding: 10px; background: var(--color1); [/class] [class name=scrollbox] width: 100%; height: 100%; box-sizing: content-box; padding-right: 200px; overflow-Y: scroll; overflow-X: hidden; font-family: Open Sans; font-size: 0.8em; color: var(--color4); [/class] [class=title] display: inline-block; font-family: Muli; font-size: 1em; text-transform: uppercase; background: var(--color3); padding: 2px 5px; color: var(--color4); letter-spacing: 5px; font-weight: bold; [/class] [class=subt] display: inline-block; font-family: Muli; font-size: 0.8em; text-transform: uppercase; letter-spacing: 2px; background: var(--color2); color: var(--color4); padding: 2px 5px; [/class] [class=tabc] flex: 0.6; height: 450px; padding: 0px 2px 0px 5px; background: var(--color3); display:flex; [/class] [class=tabs] width: 20px; height: 20px; border-radius: 50%; background: var(--color1); color: var(--color4); font-size: 0.8em; text-align: center; cursor: pointer; position: relative; [/class] [script class=tabc on=mouseenter] fadeIn 750 tabs [/script] [script class=tabc on=mouseleave] fadeOut 750 tabs [/script] [script class=one on=click] hide scrollbox fadeIn 750 first [/script] [script class=two on=click] hide scrollbox fadeIn 750 second [/script] [script class=three on=click] hide scrollbox fadeIn 750 third [/script]

    Code: 
    [nobr][div class=container]
[div class=wrap][div class=img][/div]
[div class=scon][div class="scrollbox first"]
[div class=title][fa]fa-wave-square[/fa] character name[/div]

[br][/br][br][/br][div class=subt]full name[/div] name here
[br][/br][div class=subt]nickname(s)[/div] name
[br][/br][div class=subt]age[/div] xx
[br][/br][div class=subt]gender[/div] boop
[br][/br][div class=subt]sexuality[/div] boop
[br][/br][div class=subt]occupation[/div] boop
[br][/br][div class=subt]place of birth[/div] boop
[br][/br][div class=subt]sexuality[/div] boop

[br][/br][br][/br][div class=title][fa]fa-wave-square[/fa] appearance[/div]

[br][/br][br][/br][div class=subt]height[/div] boop
[br][/br][div class=subt]weight[/div] boop
[br][/br][div class=subt]hair color[/div] boop
[br][/br][div class=subt]eye color[/div] boop
[br][/br][div class=subt]tattoos/piercings[/div] boop
[br][/br][div class=subt]distinguishing feature[/div] boop
[br][/br][div class=subt]faceclaim[/div] boop
[/div]

[div class="scrollbox second" style="display:none"]
[div class=title][fa]fa-wave-square[/fa] persona[/div]

[br][/br][br][/br][div class=subt]likes[/div] one, two, three
[br][/br][div class=subt]dislikes[/div] one, two, three
[br][/br][div class=subt]vices[/div] one, two, three
[br][/br][div class=subt]virtues[/div] one, two, three
[br][/br][div class=subt]quirks/habits[/div] boops
[br][/br][div class=subt]hobbies[/div] one, two, three


[br][/br][br][/br][div class=subt]personality [/div] 

[br][/br][br][/br]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi maximus dolor ut diam vestibulum fermentum. Mauris dui leo, gravida sed nulla quis, accumsan imperdiet dui. Cras eleifend tellus quis odio vestibulum scelerisque. Sed aliquam sapien non nisl sagittis, ut aliquam ipsum venenatis. Donec id nisl diam. Pellentesque imperdiet risus rhoncus, pharetra metus sed, dictum ante. Nunc congue purus semper justo ultricies, non tincidunt turpis hendrerit. Duis nec aliquam libero, a aliquam tellus. Sed vulputate imperdiet neque, ut porta sapien consectetur sed. Sed id dignissim enim.
[/div]

[div class="scrollbox third" style="display:none"]
[div class=title][fa]fa-wave-square[/fa] biography[/div]

[br][/br][br][/br]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi maximus dolor ut diam vestibulum fermentum. Mauris dui leo, gravida sed nulla quis, accumsan imperdiet dui. Cras eleifend tellus quis odio vestibulum scelerisque. Sed aliquam sapien non nisl sagittis, ut aliquam ipsum venenatis. Donec id nisl diam. Pellentesque imperdiet risus rhoncus, pharetra metus sed, dictum ante. Nunc congue purus semper justo ultricies, non tincidunt turpis hendrerit. Duis nec aliquam libero, a aliquam tellus. Sed vulputate imperdiet neque, ut porta sapien consectetur sed. Sed id dignissim enim.

[br][/br][br][/br]Suspendisse ac vehicula quam. Mauris nec posuere nisi. Donec sed velit dolor. Pellentesque non nisi eu diam porttitor euismod ac et diam. Integer rhoncus non ipsum auctor lobortis. Praesent viverra libero vitae odio cursus, a blandit purus laoreet. Mauris auctor nec sapien quis finibus. Fusce volutpat ultricies erat dapibus blandit. Morbi id dui venenatis, tristique ex sit amet, viverra purus. Donec porttitor fermentum justo, et iaculis felis aliquam id.
[/div]

[/div]
[/div]

[div class=tabc][div=flex: 0.6; align-self: center; font-size: 1em; font-family: Muli;]#that's the [br][/br]tea sis[/div]
[div class="tabs one" style="top: 60%; left: -20%; transform: scale(1.2); display:none;"]1.[/div]
[div class="tabs two" style="top: 50%; left: 5%; transform: scale(1.8); display:none;"]2.[/div]
[div class="tabs three" style="top: 68%; left: 12%; transform: scale(1.6); display:none;"]3.[/div]
[/div]
[/div][div=margin:auto;center;max-width:530px;font-size:0.6em;opacity:0.5;text-align:right;]code by Ri.a[/div]


[comment]---------------------------------------classes begin here---------------------------------------[/comment]
[class=container]
margin: auto; center;
min-width: 200px;
max-width: 500px;
padding: 20px;
height: fit-content;
--img1: url('https://i.imgur.com/PdGD1lq.jpg');
--color1: #FCFBFA;
--color2: #F7F4E5;
--color3: #F2E5B5;
--color4: #0F0409;
background: var(--color2);
display: flex;
flex-wrap: wrap;
[/class]

[class=wrap]
display: flex;
flex-wrap: wrap;
flex: 1;
height:fit-content;
min-width: 300px;
[/class]

[class=img]
flex: 1;
height: 100px;
background: var(--img1);
background-size:cover;
background-position: center;
[/class]

[comment]---------------------------------------text classes begin here---------------------------------------[/comment]
[class=scon]
overflow: hidden;
box-sizing: border-box;
height: 350px;
margin: 0 auto;
padding: 10px;
background: var(--color1);
[/class]

[class name=scrollbox]
width: 100%;
height: 100%;
box-sizing: content-box;
padding-right: 200px;
overflow-Y: scroll;
overflow-X: hidden;
font-family: Open Sans;
font-size: 0.8em;
color: var(--color4);
[/class]

[class=title]
display: inline-block;
font-family: Muli;
font-size: 1em;
text-transform: uppercase;
background: var(--color3);
padding: 2px 5px;
color: var(--color4);
letter-spacing: 5px;
font-weight: bold;
[/class]

[class=subt]
display: inline-block;
font-family: Muli;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 2px;
background: var(--color2);
color: var(--color4);
padding: 2px 5px;
[/class]

[comment][font=Muli]font[/font]
[font=Open Sans]font[/font][/comment]

[comment]---------------------------------------tabs classes begin here---------------------------------------[/comment]
[class=tabc]
flex: 0.6;
height: 450px;
padding: 0px 2px 0px 5px;
background: var(--color3);
display:flex;
[/class]

[class=tabs]
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color1);
color: var(--color4);
font-size: 0.8em;
text-align: center;
cursor: pointer;
position: relative;
[/class]

[comment]---------------------------------------script classes begin here---------------------------------------[/comment]
[script class=tabc on=mouseenter]
fadeIn 750 tabs
[/script]

[script class=tabc on=mouseleave]
fadeOut 750 tabs
[/script]

[script class=one on=click]
hide scrollbox
fadeIn 750 first
[/script]

[script class=two on=click]
hide scrollbox
fadeIn 750 second
[/script]

[script class=three on=click]
hide scrollbox
fadeIn 750 third
[/script][/nobr]
     
    • Request 13
    • Function: Interest Check + theme matching first posts for RP start, OOC and CS pages
    Mobile Friendly: Yes
    Color Scheme: Coolors Something like this, summer-y, sunset-y
    No. of images and/or gifs: Literally no limit, whatever's gonna look good
    Image URL/Source:
    https://i.pinimg.com/originals/df/58/c5/df58c53a2903684bece60e47003f9551.jpg https://i.pinimg.com/474x/5e/1f/3f/5e1f3f72e8676f4cc4bcbde0927aa505.jpg https://i.pinimg.com/236x/6f/d6/33/6fd6335caef5375948c04483578dd31a--summer-vibes-summer-beach.jpg https://images.8tracks.com/cover/i/...83113908505255_4970646955391713280_n-4129.jpg https://i1.pickpik.com/photos/428/940/1001/sunset-girl-balloon-shadow-preview.jpg
    Style: Simple and neat.
    Theme: Summer drama, romance, cliche slice of life sharing a house with friends vibe
    Specific Features: Semi-hidden scroll bars if possible, if not just fully visible scroll bars. In the interest check, there needs to be a place for the plot hook/summary, and then the ooc information like page links, the rp goals and feel, stuff like that. In the RP start, it can literally just be a fancy box with an area for words. The OOC page i'd like to predominantly feature the ooc rules, with an aside for a list of members, whether or not they're active, who they play and what role that person is. The CS page would preferably have an outlined CS, which I would post the code for in a spoiler right below it for rper's to use for their character if they wanted to. the template needs a tab for basics, personality, history, and miscellaneous. Basics would probably have things like name, age, gender, sexuality, role, and other appearance things like special markings/piercings, etc. Personality would have vices/virtues, strengths/flaws, likes/dislikes/fears, etc. History is just a fancy box for the players to write 3+ paragraphs of their character's backstory, and misc. would probably be things like theme songs/playlists, talents/hobbies, starsign, bloodtype, whatever niche thing that didn't fit elsewhere would go.
    Anything else?: I would love you forever if you could do this in a week. If not, no rush! :)
    Do you mind sharing the code with others?: Feel free to share this code pack with others. I don't mind!
     
    • You must log in or register to reply here.
    Back
    Top