kouzcy
♡
AAAAAAAAAAA?!?!?! !
it's SOOOOO GOOD THANK YOUUUUU~!!
it's SOOOOO GOOD THANK YOUUUUU~!!
-
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 〔 ✾ 欢 ˑ 迎 ✾ 〕 - - 𝚛𝚒.𝚊'𝚜 𝚌𝚘𝚍𝚎 𝚜𝚑𝚘𝚙
- Thread starter RI.a
- Start date
Request 10
Sterling_wolf
Super unlucky member
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
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
Finished 8
RI.a
"愛を知りたいのです."
[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
swald;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
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]
[div class=header]
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]
[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-familypen Sans;
font-size:0.8em;
[/class]
swald;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
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
pen 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]
calypso
fairest
Absolutely lovely!! For some reason I looked at this and forgot to reply because of my work, but another beautiful code! I'm so grateful and amazed you take these requests!
Request 11
Mena
Noming on Treats
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
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
RI.a
"愛を知りたいのです."
Thank you for your request
Mena
! I will contact you when I am working on it. (:
--
Thank you to everyone who has requested/used the codes thus far! I hope you like it as much as I enjoyed making them! ^^
As of now, the shop is CLOSED until further notice. Even if you post your request after this post, I will not be working on it until I re-open the shop.
Mena
! I will contact you when I am working on it. (:--
Thank you to everyone who has requested/used the codes thus far! I hope you like it as much as I enjoyed making them! ^^
As of now, the shop is CLOSED until further notice. Even if you post your request after this post, I will not be working on it until I re-open the shop.
Minako
🎮Super High School Level Gamer: Chiaki Nanami🎮
Oh neat! Can't wait to see what you make! Thanks so much in advance!
Finished 9
RI.a
"愛を知りたいのです."
[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-familyswald;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
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]
[div class=mainCon][div class=header][div class=charaPic][/div]
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]
etit 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]
swald;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
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-familyetit 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]Minako
🎮Super High School Level Gamer: Chiaki Nanami🎮
It’s perfect! Thank you!!!!! 
Finished 10
RI.a
"愛を知りたいのです."
[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-familyswald;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
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]
[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]
swald;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
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]
Finished 11
RI.a
"愛を知りたいのです."
[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-familyswald;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
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
Type: IC Post | Theme: Pokemon | Mobile Friendly: Yes | Features: Hidden scroll
Free to use with credits[/div]
[div class=Container][div class=leftCol]
Interactions: @tag
Mentions: @tag
[div class=statusItem style="width:95%;border-top: 2px solid var(--color4);"][div class=pokeImg]
[/div][div class=pokeImg]
[/div][div class=pokeImg]
[/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]
swald;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
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]
Interactions: @tag
Mentions: @tag
[div class=statusItem style="width:95%;border-top: 2px solid var(--color4);"][div class=pokeImg]
[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]Mena
Noming on Treats
Thank you~~~
RI.a
"愛を知りたいのです."
Hope everyone is having an amazing summer! I'm officially re-opening this request shop. Hope to hear from you (:
Request 12
intergalactic
𝙖 𝙬𝙖𝙨𝙩𝙚 𝙤𝙛 𝙪𝙧 𝙨𝙥𝙖𝙘𝙚
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:
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
RI.a
"愛を知りたいのです."
[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-familyswald;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
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]
[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]
swald;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
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]tea sis
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
Noivian
Drinker of coffees
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:
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!
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
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!