• 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 Free For All

FREE TO USE JUST KEEP THE CREDITS PARTNER
------------------------------

Name: Simple Fantasy ( Updated )
A very simple CS base that I've been using a lot lately for fantasy RPs. The color options are endless, don't just stick with red! I updated it cause this looks better to me.

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes.// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// [/class] [class=Lines] border-top:1px SOLID #680b0a; margin-bottom:5px; margin-Top:5px; //This is the line dividers in the code, the tiny ones.// [/class]
[class=Notes] //Above is the background color and main border// //below are the two borders around the image// [/class]
latest.jpg
Name
[div class="Lines"]
Age:
Species:
Class:
Likes:
Dislikes:

Weapons:
Combat Description:
Distinguishing features [class=notes] //you can remove the
below this just to add extra space to make the code look good while blank [/class]



[div class="Lines"][/div] Personality:

[div class="Lines"][/div] History:

[div class="Lines"][/div] Code by AgWordSmith AgWordSmith
[/div]


Code:
[nobr]

[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes.//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

[/class]

[class=Lines]
border-top:1px SOLID #680b0a;
margin-bottom:5px;
margin-Top:5px;

//This is the line dividers in the code, the tiny ones.//
[/class]

[div=background-color:#f6e9d5;
border:2px SOLID #680b0a;
padding:20px;color:black;]

[class=Notes]
//Above is the background color and main border//

//below are the two borders around the image//
[/class]



[div=border:2px SOLID #680b0a;
line-height:0px;
float:left;
width:25%;
margin-right:30px;
padding:1px;
line-height:0px;
background-color:#f9efdf;]

[div=border:2px SOLID #680b0a;]
[IMG]https://cdn.discordapp.com/attachments/359734207024463882/439046648375541760/latest.jpg[/IMG]
[/div][/div]

[font=Oldenburg][SIZE=7]Name[/SIZE]
[br][/br]
[div class="Lines"][/div]
[B]Age:[/B] 
[br][/br]

[B]Species:[/B]
[br][/br]
[B]Class:[/B]
[br][/br]
[B]Likes: [/B]
[B][br][/br]
Dislikes:[/B]
[br][/br]
[B]Weapons: [/B]
[br][/br]
[B]Combat Description: [/B]
[br][/br]
[B]Distinguishing features[/B] 

[class=notes]
//you can remove the[br][/br] below this just to add extra space to make the code look good while blank
[/class]

[br][/br][br][/br][br][/br][br][/br]
[div class="Lines"][/div]
[B]Personality: [/B]
[br][/br][br][/br]
[div class="Lines"][/div]
[B]History:[/B]
[br][/br][br][/br]
[div class="Lines"][/div]
[SIZE=1][FONT=courier new][COLOR=rgb(147, 101, 184)]Code by[/COLOR] [USER=44533]@AgWordSmith[/USER][/FONT][/SIZE]
[/font][/div][font=Oldenburg][/font]
[/nobr][/FONT]
 
Last edited:
FREE TO USE JUST KEEP THE CREDITS ACE
------------------------------

Name: Simple Fantasy IC ( Updated )
A very simple IC post base base that I've been using a lot lately for fantasy RPs. The color options are endless, don't just stick with red! I updated it cause this looks better to me.

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes.// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// [/class] [class=Lines] border-top:1px SOLID #680b0a; margin-bottom:5px; margin-Top:5px; //This is the line dividers in the code, the tiny ones.// [/class]
[class=Notes] //Above is the background color and main border// //below are the two borders around the image// [/class]
latest.jpg
Name I Interacting: I Mentioned: I Located:
[div class="Lines"]
"Lorem ipsum dolor sit amet," consectetur adipiscing elit. Morbi orci nunc, laoreet ac egestas eget, auctor vitae lectus. Morbi aliquam iaculis metus non elementum. Vivamus vel consequat nunc. Maecenas facilisis est sit amet ipsum rhoncus, vel mollis quam egestas. Aliquam commodo sit amet lorem non rutrum. Donec sit amet dapibus diam, vitae vulputate turpis. In hac habitasse platea dictumst. Etiam ut ligula scelerisque, condimentum est eu, imperdiet eros. Donec id auctor eros, quis tincidunt quam. Quisque a massa vitae nunc aliquet euismod. Nunc luctus aliquam metus. Vestibulum sit amet nunc dui. Cras feugiat, magna id posuere placerat, leo sem viverra augue, id lacinia purus quam vitae dui. Quisque eleifend in dui et egestas. [div class="Lines"][/div] Code by AgWordSmith AgWordSmith [/div]
 
Last edited:
Code:
[nobr]

[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes.//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

[/class]

[class=Lines]
border-top:1px SOLID #680b0a;
margin-bottom:5px;
margin-Top:5px;

//This is the line dividers in the code, the tiny ones.//
[/class]

[div=background-color:#f6e9d5;
border:2px SOLID #680b0a;
padding:20px;color:Black;]

[class=Notes]
//Above is the background color and main border//

//below are the two borders around the image//
[/class]



[div=border:2px SOLID #680b0a;
line-height:0px;
float:left;
width:15%;
margin-right:30px;
padding:1px;
line-height:0px;
background-color:#f9efdf;]

[div=border:2px SOLID #680b0a;]
[IMG]https://cdn.discordapp.com/attachments/359734207024463882/439046648375541760/latest.jpg[/IMG]
[/div][/div]

[font=Oldenburg][SIZE=7]Name[/SIZE] I Interacting: I Mentioned: I Located: 
[br][/br]
[div class="Lines"][/div]
[b]"Lorem ipsum dolor sit amet,"[/b] consectetur adipiscing elit. Morbi orci nunc, laoreet ac egestas eget, auctor vitae lectus. Morbi aliquam iaculis metus non elementum. Vivamus vel consequat nunc. Maecenas facilisis est sit amet ipsum rhoncus, vel mollis quam egestas. Aliquam commodo sit amet lorem non rutrum. Donec sit amet dapibus diam, vitae vulputate turpis. In hac habitasse platea dictumst. Etiam ut ligula scelerisque, condimentum est eu, imperdiet eros. Donec id auctor eros, quis tincidunt quam. Quisque a massa vitae nunc aliquet euismod. Nunc luctus aliquam metus. Vestibulum sit amet nunc dui. Cras feugiat, magna id posuere placerat, leo sem viverra augue, id lacinia purus quam vitae dui. Quisque eleifend in dui et egestas. 
[div class="Lines"][/div][/font]
[SIZE=1][FONT=courier new][COLOR=rgb(147, 101, 184)]Code by[/COLOR] [USER=44533]@AgWordSmith[/USER][/FONT][/SIZE]
[/div][/nobr][/FONT]
 
FREE TO USE JUST KEEP THE CREDITS GENIUS
------------------------------

Name: Simple Border CS
A very simple CS design from a different site redesigned for Rpn! You can do so much with this code (and any of my codes) ! It has a really nice image border that adds to the theme of your character.


[class=BackgroundPicture] Background:url(https://i.pinimg.com/564x/d9/c9/bf/d9c9bfeecc7cd23adce729f2fa10d11c.jpg); Padding:30px; //The background image that become the border// [/class] [class=BackgroundColor] padding:20px; background-color:#fbe7d1; Color:Black; //the solid block of color that makes the border appear as a border all your content will be in this box// [/class] [class=Name] float:right; margin-bottom:10px; text-align:center; border-radius:5px; background-color:#142740; padding:5px;color:#fbe7d1; width:calc(100% - 35% - 33px); //The Box around the name// [/class] [class=Img] border-right:20px SOLID #fbe7d1; border-bottom:10px SOLID #fbe7d1; width:35%; float:left; [/class] [class=Image] border:1px SOLID #142740; line-height:0px; //The border around the image and its margins// [/class] [class=Line] border-top:1px SOLID #142740; margin-top:10px; margin-bottom:10px; //The tiny lines everywhere// //You can see here they have a set width, which is the shorter length, the bottom two lines have a specific 'style' which overrides what happens here to make them full length. if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up) If you need the bottom lines to be shorter, delete the Style=" and such// [/class] [div class="BackgroundPicture"] [div class="BackgroundColor"] [div class="Img"] [div class="Image"]
a5959593502f7279d8634d94bc6f5b13.jpg
[/div][/div] [div class="Name"] NAME[/div]

Nickname:
Age:
Gender:
Orientation:
Height:
Weight:
Features:
[div class="Line"][/div] Magic:
Occupation:
Likes:
Dislikes:
Strengths:
Weaknesses:
Fears: Mother:
Father:
Sibling:
[div class="Line"][/div] Personality: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[div class="Line"][/div] History: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[div class="Line"][/div] [/div]
Code by AgWordSmith AgWordSmith
[/div]


[class=BackgroundPicture2] Background:url(https://media.giphy.com/media/l3V0iU0s9WkauP5N6/giphy.gif); Padding:30px; //The background image that become the border// [/class] [class=BackgroundColor2] padding:20px; background-color:#3A403B; color:#E0F2E3; //the solid block of color that makes the border appear as a border all your content will be in this box// [/class] [class=Name2] float:right; margin-bottom:10px; text-align:center; border-radius:5px; background-color:#EE07AF; padding:5px; color:#3A403B; width:calc(100% - 35% - 33px); //The Box around the name// [/class] [class=Img2] border-right:20px SOLID #3A403B; border-bottom:10px SOLID #3A403B; width:35%; float:left; [/class] [class=Image2] border:1px SOLID #EE07AF; line-height:0px; //The border around the image and its margins// [/class] [class=Line2] border-top:1px SOLID #EE07AF; margin-top:10px; margin-bottom:10px; //The tiny lines everywhere// //You can see here they have a set width, which is the shorter length, the bottom two lines have a specific 'style' which overrides what happens here to make them full length. if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up) If you need the bottom lines to be shorter, delete the Style=" and such// [/class] [div class="BackgroundPicture2"] [div class="BackgroundColor2"] [div class="Img2"] [div class="Image2"]
af249d799eeb99214bf4151a5a9b22c8.jpg
[/div][/div] [div class="Name2"] NAME[/div]

Nickname:
Age:
Gender:
Orientation:
Height:
Weight:
Features:
[div class="Line2"][/div] Magic:
Occupation:
Likes:
Dislikes:
Strengths:
Weaknesses:
Fears: Mother:
Father:
Sibling:
[div class="Line2"][/div] Personality: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[div class="Line2"][/div] History: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[div class="Line2"][/div] [/div]
Code by AgWordSmith AgWordSmith
[/div]

[class=BackgroundPicture3] Background:url(https://barbaradelong.com/wp-content/uploads/2017/01/732a8d4991fc4bd555430aa3f15bdca4.jpg); Padding:30px; //The background image that become the border// [/class] [class=BackgroundColor3] padding:20px; background-color:#F8EFFF; Color:Black; //the solid block of color that makes the border appear as a border all your content will be in this box// [/class] [class=Name3] float:right; margin-bottom:10px; text-align:center; border-radius:5px; background-color:#FDAED2; padding:5px; color:#F8EFFF; width:calc(100% - 35% - 33px); //The Box around the name// [/class] [class=Img3] border-right:20px SOLID #F8EFFF; border-bottom:10px SOLID #F8EFFF; width:35%; float:left; [/class] [class=Image3] border:1px SOLID #FDAED2; line-height:0px; //The border around the image and its margins// [/class] [class=Line3] border-top:1px SOLID #FDAED2; margin-top:10px; margin-bottom:10px; //The tiny lines everywhere// //You can see here they have a set width, which is the shorter length, the bottom two lines have a specific 'style' which overrides what happens here to make them full length. if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up) If you need the bottom lines to be shorter, delete the Style=" and such// [/class] [div class="BackgroundPicture3"] [div class="BackgroundColor3"] [div class="Img3"] [div class="Image3"]
ca507c074afc99a275a9e6d26154719b.jpg
[/div][/div] [div class="Name3"] NAME[/div]

Nickname:
Age:
Gender:
Orientation:
Height:
Weight:
Features:
[div class="Line3"][/div] Magic:
Occupation:
Likes:
Dislikes:
Strengths:
Weaknesses:
Fears: Mother:
Father:
Sibling:
[div class="Line"][/div] Personality: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[div class="Line"][/div] History: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[div class="Line"][/div] [/div]
Code by AgWordSmith AgWordSmith
[/div]
 
Last edited:
Code:
[nobr]

[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes.//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

[/class]

[class=BackgroundPicture]
Background:url(https://i.pinimg.com/564x/d9/c9/bf/d9c9bfeecc7cd23adce729f2fa10d11c.jpg);
Padding:30px;

//The background image that become the border//
[/class]

[class=BackgroundColor]
padding:20px;
background-color:#fbe7d1;
Color:Black;

//the solid block of color that makes the border appear as a border
all your content will be in this box//
[/class]

[class=Name]
float:right;
margin-bottom:10px;
text-align:center;
border-radius:5px;
background-color:#142740;
padding:5px;
color:#fbe7d1;
width:calc(100% - 35% - 33px);

//The Box around the name//
[/class]

[class=Img]
border-right:20px SOLID #fbe7d1;
border-bottom:10px SOLID #fbe7d1;
width:35%;
float:left;

//this class has a border to create a false margin
 so the horizontal lines don't appear to go behind the image
if you change the back ground you have to change the colors here too//
[/class]

[class=Image]
border:1px SOLID #142740;
line-height:0px;

//The border around the image//
[/class]




[class=Line]
border-top:1px SOLID #142740;
margin-top:10px;
margin-bottom:10px;
//The tiny lines everywhere//

//You can see here they have a set width, which is the shorter length, 
the bottom two lines have a specific 'style' which overrides what happens here to make them full length. 
if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up)

If you need the bottom lines to be shorter, delete the Style=" and such//
[/class]

[div class="BackgroundPicture"]
[div class="BackgroundColor"]

[div class="Img"]
[div class="Image"]
[img]https://i.pinimg.com/564x/a5/95/95/a5959593502f7279d8634d94bc6f5b13.jpg[/img]
[/div][/div]

[div class="Name"][font=georgia]
[size=5][B]NAME[/B][/size][/font][/div]
[br][/br]
[font=georgia]
[br][/br]
[B]Nickname[/B]: 
[br][/br]
[B]Age[/B]: 
[br][/br]
[B]Gender[/B]: 
[br][/br]
[B]Orientation[/B]:
[br][/br]
[B]Height[/B]:
[br][/br]
[B]Weight[/B]: 
[br][/br]
[B]Features[/B]: 
[br][/br]

[div class="Line"][/div]

[B]Magic[/B]: 
[br][/br]
[B]Occupation[/B]: 
[br][/br]
[B]Likes[/B]: 
[br][/br]
[B]Dislikes[/B]:
[br][/br]
[B]Strengths[/B]: 
[br][/br]
[B]Weaknesses[/B]: 
[br][/br]
[B]Fears[/B]:
[B]Mother[/B]:
[br][/br]
[B]Father[/B]: 
[br][/br]
[B]Sibling[/B]: 
[br][/br]


[div class="Line"][/div]

[B]Personality[/B]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[br][/br]


[div class="Line"][/div]


[B]History[/B]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[br][/br]
[/font]

[div class="Line"][/div]
[/div]
[div=float:left;][SIZE=1][FONT=courier new][COLOR=rgb(225, 225, 225)]Code by[/COLOR] [USER=44533]@AgWordSmith[/USER][/FONT][/SIZE][/div]
[/div][/nobr]

Code:
[nobr]

[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes.//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

[/class]

[class=BackgroundPicture]
Background:url(https://i.gifer.com/VRfm.gif);
Padding:30px;

//The background image that become the border//
[/class]

[class=BackgroundColor]
padding:20px;
background-color:#3A403B;
color:#E0F2E3;

//the solid block of color that makes the border appear as a border
all your content will be in this box//
[/class]

[class=Name]
float:right;
margin-bottom:10px;
text-align:center;
border-radius:5px;
background-color:#EE07AF;
padding:5px;
color:#3A403B;
width:calc(100% - 35% - 33px);

//The Box around the name//
[/class]

[class=Img]
border-right:20px SOLID #3A403B;
border-bottom:10px SOLID #3A403B;
width:35%;
float:left;

//this class has a border to create a false margin
 so the horizontal lines don't appear to go behind the image
if you change the back ground you have to change the colors here too//
[/class]

[class=Image]
border:1px SOLID #EE07AF;
line-height:0px;

//The border around the image//
[/class]




[class=Line]
border-top:1px SOLID #EE07AF;
margin-top:10px;
margin-bottom:10px;
//The tiny lines everywhere//

//You can see here they have a set width, which is the shorter length,
the bottom two lines have a specific 'style' which overrides what happens here to make them full length.
if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up)

If you need the bottom lines to be shorter, delete the Style=" and such//
[/class]

[div class="BackgroundPicture"]
[div class="BackgroundColor"]

[div class="Img"]
[div class="Image"]
[IMG]https://cdn.discordapp.com/attachments/359734207024463882/486596889316294657/af249d799eeb99214bf4151a5a9b22c8.jpg[/IMG]
[/div][/div]

[div class="Name"][font=Source Code Pro]
[SIZE=18px][B]NAME[/B][/SIZE][/font][/div]
[br][/br]
[font=Source Code Pro]
[br][/br]
[B]Nickname[/B]:
[br][/br]
[B]Age[/B]:
[br][/br]
[B]Gender[/B]:
[br][/br]
[B]Orientation[/B]:
[br][/br]
[B]Height[/B]:
[br][/br]
[B]Weight[/B]:
[br][/br]
[B]Features[/B]:
[br][/br]

[div class="Line"][/div]

[B]Magic[/B]:
[br][/br]
[B]Occupation[/B]:
[br][/br]
[B]Likes[/B]:
[br][/br]
[B]Dislikes[/B]:
[br][/br]
[B]Strengths[/B]:
[br][/br]
[B]Weaknesses[/B]:
[br][/br]
[B]Fears[/B]:
[B]Mother[/B]:
[br][/br]
[B]Father[/B]:
[br][/br]
[B]Sibling[/B]:
[br][/br]


[div class="Line"][/div]

[B]Personality[/B]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[br][/br]


[div class="Line"][/div]


[B]History[/B]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[br][/br]
[/font]

[div class="Line"][/div]
[/div]
[div=float:left;][SIZE=1][FONT=courier new][COLOR=rgb(225, 225, 225)]Code by[/COLOR] [USER=44533]@AgWordSmith[/USER][/FONT][/SIZE][/div]
[/div][/nobr]

Code:
[nobr]

[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes.//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

[/class]

[class=BackgroundPicture]
Background:url(https://barbaradelong.com/wp-content/uploads/2017/01/732a8d4991fc4bd555430aa3f15bdca4.jpg);
Padding:30px;

//The background image that become the border//
[/class]

[class=BackgroundColor]
padding:20px;
background-color:#F8EFFF;
Color:Black;

//the solid block of color that makes the border appear as a border
all your content will be in this box//
[/class]

[class=Name]
float:right;
margin-bottom:10px;
text-align:center;
border-radius:5px;
background-color:#FDAED2;
padding:5px;
color:#F8EFFF;
width:calc(100% - 35% - 33px);

//The Box around the name//
[/class]

[class=Img]
border-right:20px SOLID #F8EFFF;
border-bottom:10px SOLID #F8EFFF;
width:35%;
float:left;

//this class has a border to create a false margin
 so the horizontal lines don't appear to go behind the image
if you change the back ground you have to change the colors here too//

[/class]

[class=Image]
border:1px SOLID #FDAED2;
line-height:0px;

//The border around the image//
[/class]




[class=Line]
border-top:1px SOLID #FDAED2;
margin-top:10px;
margin-bottom:10px;
//The tiny lines everywhere//

//You can see here they have a set width, which is the shorter length, 
the bottom two lines have a specific 'style' which overrides what happens here to make them full length. 
if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up)

If you need the bottom lines to be shorter, delete the Style=" and such//
[/class]

[div class="BackgroundPicture"]
[div class="BackgroundColor"]

[div class="Img"]
[div class="Image"]
[img]https://i.pinimg.com/originals/ca/50/7c/ca507c074afc99a275a9e6d26154719b.jpg[/img]
[/div][/div]

[div class="Name"][font=The Girl Next Door]
[size=5][B]NAME[/B][/size][/font][/div]
[br][/br]
[font=The Girl Next Door]
[br][/br]
[B]Nickname[/B]: 
[br][/br]
[B]Age[/B]: 
[br][/br]
[B]Gender[/B]: 
[br][/br]
[B]Orientation[/B]:
[br][/br]
[B]Height[/B]:
[br][/br]
[B]Weight[/B]: 
[br][/br]
[B]Features[/B]: 
[br][/br]

[div class="Line"][/div]

[B]Magic[/B]: 
[br][/br]
[B]Occupation[/B]: 
[br][/br]
[B]Likes[/B]: 
[br][/br]
[B]Dislikes[/B]:
[br][/br]
[B]Strengths[/B]: 
[br][/br]
[B]Weaknesses[/B]: 
[br][/br]
[B]Fears[/B]:
[B]Mother[/B]:
[br][/br]
[B]Father[/B]: 
[br][/br]
[B]Sibling[/B]: 
[br][/br]


[div class="Line"][/div]

[B]Personality[/B]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[br][/br]


[div class="Line"][/div]


[B]History[/B]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[br][/br]
[/font]

[div class="Line"][/div]
[/div]
[div=float:left;][SIZE=1][FONT=courier new][COLOR=rgb(147, 101, 184)]Code by[/COLOR] [USER=44533]@AgWordSmith[/USER][/FONT][/SIZE][/div]
[/div][/nobr]
 
Last edited:
FREE TO USE JUST KEEP THE CREDITS FELLA
------------------------------

Name: Simple Border IC
A very simple IC design from a different site redesigned for Rpn! You can do so much with this code (and any of my codes) ! It has a really nice image border that adds to the theme of your character.

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes.// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// [/class] [class=BackgroundPicture] Background:url(https://i.pinimg.com/564x/d9/c9/bf/d9c9bfeecc7cd23adce729f2fa10d11c.jpg); Padding:30px; //The background image that become the border// [/class] [class=BackgroundColor] padding:20px; background-color:#fbe7d1; Color:Black; //the solid block of color that makes the border appear as a border all your content will be in this box// [/class] [class=Name] float:right; margin-bottom:10px; text-align:center; border-radius:5px; background-color:#142740; padding:5px;color:#fbe7d1; width:calc(100% - 15% - 20px); //The Box around the name// [/class] [class=Img] border-right:10px SOLID #fbe7d1; border-bottom:5px SOLID #fbe7d1; width:15%; float:left; //this class has a border to create a false margin so the horizontal lines don't appear to go behind the image if you change the back ground you have to change the colors here too// [/class] [class=Image] border:1px SOLID #142740; line-height:0px; //The border around the image// [/class] [class=Line] border-top:1px SOLID #142740; margin-top:5px; margin-bottom:5px; //The tiny lines everywhere// //You can see here they have a set width, which is the shorter length, the bottom two lines have a specific 'style' which overrides what happens here to make them full length. if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up) If you need the bottom lines to be shorter, delete the Style=" and such// [/class] [div class="BackgroundPicture"] [div class="BackgroundColor"] [div class="Img"] [div class="Image"]
a5959593502f7279d8634d94bc6f5b13.jpg
[/div][/div] [div class="Name"] NAME[/div]
Lorem ipsum dolor sit amet, "consectetur adipiscing elit."

Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[div class="Line"][/div] Interacting: | Mentioned: | Located: [div class="Line" style="margin-bottom:0px;"][/div]
[/div]
Code by AgWordSmith AgWordSmith
[/div]

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes.// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// [/class] [class=BackgroundPicture2] Background:url(https://media.giphy.com/media/l3V0iU0s9WkauP5N6/giphy.gif); Padding:30px; //The background image that become the border// [/class] [class=BackgroundColor2] padding:20px; background-color:#3A403B; Color:#E0F2E3; //the solid block of color that makes the border appear as a border all your content will be in this box// [/class] [class=Name2] float:right; margin-bottom:10px; text-align:center; border-radius:5px; background-color:#EE07AF; padding:5px; color:#3A403B; width:calc(100% - 15% - 20px); //The Box around the name// [/class] [class=Img2] border-right:10px SOLID #3A403B; border-bottom:5px SOLID #3A403B; width:15%; float:left; //this class has a border to create a false margin so the horizontal lines don't appear to go behind the image if you change the back ground you have to change the colors here too// [/class] [class=Image2] border:1px SOLID #EE07AF; line-height:0px; //The border around the image// [/class] [class=Line2] border-top:1px SOLID #EE07AF; margin-top:5px; margin-bottom:5px; //The tiny lines everywhere// //You can see here they have a set width, which is the shorter length, the bottom two lines have a specific 'style' which overrides what happens here to make them full length. if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up) If you need the bottom lines to be shorter, delete the Style=" and such// [/class] [div class="BackgroundPicture2"] [div class="BackgroundColor2"] [div class="Img2"] [div class="Image2"]
af249d799eeb99214bf4151a5a9b22c8.jpg
[/div][/div] [div class="Name2"] NAME[/div]
Lorem ipsum dolor sit amet, "consectetur adipiscing elit."

Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[div class="Line2"][/div] Interacting: | Mentioned: | Located: [div class="Line2" style="margin-bottom:0px;"][/div]
[/div]
Code by AgWordSmith AgWordSmith
[/div]

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes.// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// [/class] [class=BackgroundPicture3] Background:url(https://barbaradelong.com/wp-content/uploads/2017/01/732a8d4991fc4bd555430aa3f15bdca4.jpg); Padding:30px; //The background image that become the border// [/class] [class=BackgroundColor3] padding:20px; background-color:#F8EFFF; Color:black; //the solid block of color that makes the border appear as a border all your content will be in this box// [/class] [class=Name3] float:right; margin-bottom:10px; text-align:center; border-radius:5px; background-color:#FDAED2; padding:5px; color:#F8EFFF; width:calc(100% - 15% - 20px); //The Box around the name// [/class] [class=Img3] border-right:10px SOLID #F8EFFF; border-bottom:5px SOLID #F8EFFF; width:15%; float:left; //this class has a border to create a false margin so the horizontal lines don't appear to go behind the image if you change the back ground you have to change the colors here too// [/class] [class=Image3] border:1px SOLID #FDAED2; line-height:0px; //The border around the image and its margins// [/class] [class=Line3] border-top:1px SOLID #FDAED2; margin-top:5px; margin-bottom:5px; //The tiny lines everywhere// //You can see here they have a set width, which is the shorter length, the bottom two lines have a specific 'style' which overrides what happens here to make them full length. if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up) If you need the bottom lines to be shorter, delete the Style=" and such// [/class] [div class="BackgroundPicture3"] [div class="BackgroundColor3"] [div class="Img3"] [div class="Image3"]
ca507c074afc99a275a9e6d26154719b.jpg
[/div][/div] [div class="Name3"] NAME[/div]
Lorem ipsum dolor sit amet, "consectetur adipiscing elit."

Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[div class="Line3"][/div] Interacting: | Mentioned: | Located: [div class="Line3" style="margin-bottom:0px;"][/div]
[/div]
Code by AgWordSmith AgWordSmith
[/div]
 
Last edited:
Code:
[nobr]

[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes.//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

[/class]

[class=BackgroundPicture]
Background:url(https://i.pinimg.com/564x/d9/c9/bf/d9c9bfeecc7cd23adce729f2fa10d11c.jpg);
Padding:30px;

//The background image that become the border//
[/class]

[class=BackgroundColor]
padding:20px;
background-color:#fbe7d1;
Color:Black;

//the solid block of color that makes the border appear as a border
all your content will be in this box//
[/class]

[class=Name]
float:right;
margin-bottom:10px;
text-align:center;
border-radius:5px;
background-color:#142740;
padding:5px;color:#fbe7d1;
width:calc(100% - 15% - 20px);

//The Box around the name//
[/class]

[class=Img]
border-right:10px SOLID #fbe7d1;
border-bottom:5px SOLID #fbe7d1;
width:15%;
float:left;

//this class has a border to create a false margin
 so the horizontal lines don't appear to go behind the image
if you change the back ground you have to change the colors here too//

[/class]

[class=Image]
border:1px SOLID #142740;
line-height:0px;

//The border around the image//
[/class]




[class=Line]
border-top:1px SOLID #142740;
margin-top:5px;
margin-bottom:5px;
//The tiny lines everywhere//

//You can see here they have a set width, which is the shorter length, 
the bottom two lines have a specific 'style' which overrides what happens here to make them full length. 
if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up)

If you need the bottom lines to be shorter, delete the Style=" and such//
[/class]

[div class="BackgroundPicture"]
[div class="BackgroundColor"]

[div class="Img"]
[div class="Image"]
[img]https://i.pinimg.com/564x/a5/95/95/a5959593502f7279d8634d94bc6f5b13.jpg[/img]
[/div][/div]

[div class="Name"][font=georgia]
[size=5][B]NAME[/B][/size][/font][/div]
[font=Georgia]
[br][/br]
 Lorem ipsum dolor sit amet, [b]"consectetur adipiscing elit."[/b]
[br][/br][br][/br]
 Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[br][/br]

[div class="Line"][/div]
[size=3]
Interacting: | Mentioned: | Located:
[/size]
[div class="Line" style="margin-bottom:0px;"][/div]
[/font][/div]
[div=float:left;][SIZE=1][FONT=courier new][COLOR=rgb(225, 225, 225)]Code by[/COLOR] [USER=44533]@AgWordSmith[/USER][/FONT][/SIZE][/div]
[/div][/nobr]

Code:
[nobr]

[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes.//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

[/class]

[class=BackgroundPicture2]
Background:url(https://i.gifer.com/VRfm.gif);
Padding:30px;

//The background image that become the border//
[/class]

[class=BackgroundColor2]
padding:20px;
background-color:#3A403B;
Color:#E0F2E3;

//the solid block of color that makes the border appear as a border
all your content will be in this box//
[/class]

[class=Name2]
float:right;
margin-bottom:10px;
text-align:center;
border-radius:5px;
background-color:#EE07AF;
padding:5px;
color:#3A403B;
width:calc(100% - 15% - 20px);

//The Box around the name//
[/class]

[class=Img2]
border-right:10px SOLID #3A403B;
border-bottom:5px SOLID #3A403B;
width:15%;
float:left;

//this class has a border to create a false margin
 so the horizontal lines don't appear to go behind the image
if you change the back ground you have to change the colors here too//

[/class]

[class=Image2]
border:1px SOLID #EE07AF;
line-height:0px;

//The border around the image//
[/class]

[class=Line2]
border-top:1px SOLID #EE07AF;
margin-top:5px;
margin-bottom:5px;
//The tiny lines everywhere//

//You can see here they have a set width, which is the shorter length, 
the bottom two lines have a specific 'style' which overrides what happens here to make them full length. 
if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up)

If you need the bottom lines to be shorter, delete the Style=" and such//
[/class]

[div class="BackgroundPicture2"]
[div class="BackgroundColor2"]

[div class="Img2"]
[div class="Image2"]
[img]https://cdn.discordapp.com/attachments/359734207024463882/486596889316294657/af249d799eeb99214bf4151a5a9b22c8.jpg[/img]
[/div][/div]

[div class="Name2"][font=Source Code Pro]
[size=5][B]NAME[/B][/size][/font][/div]
[font=Source Code Pro]
[br][/br]
 Lorem ipsum dolor sit amet, [b]"consectetur adipiscing elit."[/b]
[br][/br][br][/br]
 Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[br][/br]

[div class="Line2"][/div]
[size=3]
Interacting: | Mentioned: | Located:
[/size]
[div class="Line2" style="margin-bottom:0px;"][/div]
[/font][/div]
[div=float:left;][SIZE=1][FONT=courier new][COLOR=rgb(225, 225, 225)]Code by[/COLOR] [USER=44533]@AgWordSmith[/USER][/FONT][/SIZE][/div]
[/div][/nobr]

Code:
[nobr]

[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes.//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

[/class]

[class=BackgroundPicture3]
Background:url(https://barbaradelong.com/wp-content/uploads/2017/01/732a8d4991fc4bd555430aa3f15bdca4.jpg);
Padding:30px;

//The background image that become the border//
[/class]

[class=BackgroundColor3]
padding:20px;
background-color:#F8EFFF;
Color:black;

//the solid block of color that makes the border appear as a border
all your content will be in this box//
[/class]

[class=Name3]
float:right;
margin-bottom:10px;
text-align:center;
border-radius:5px;
background-color:#FDAED2;
padding:5px;
color:#F8EFFF;
width:calc(100% - 15% - 20px);

//The Box around the name//
[/class]

[class=Img3]
border-right:10px SOLID #F8EFFF;
border-bottom:5px SOLID #F8EFFF;
width:15%;
float:left;

//this class has a border to create a false margin
 so the horizontal lines don't appear to go behind the image
if you change the back ground you have to change the colors here too//

[/class]

[class=Image3]
border:1px SOLID #FDAED2;
line-height:0px;

//The border around the image and its margins//
[/class]


[class=Line3]
border-top:1px SOLID #FDAED2;
margin-top:5px;
margin-bottom:5px;
//The tiny lines everywhere//

//You can see here they have a set width, which is the shorter length, 
the bottom two lines have a specific 'style' which overrides what happens here to make them full length. 
if you need longer lines, copy and paste the style from the bottom two (be careful, they float right, making them too big at the top messes the code up)

If you need the bottom lines to be shorter, delete the Style=" and such//
[/class]

[div class="BackgroundPicture3"]
[div class="BackgroundColor3"]

[div class="Img3"]
[div class="Image3"]
[img]https://i.pinimg.com/originals/ca/50/7c/ca507c074afc99a275a9e6d26154719b.jpg[/img]
[/div][/div]

[div class="Name3"][font=The Girl Next Door]
[size=5][B]NAME[/B][/size][/font][/div]
[font=The Girl Next Door]
[br][/br]
 Lorem ipsum dolor sit amet, [b]"consectetur adipiscing elit."[/b]
[br][/br][br][/br]
 Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacinia purus, sed posuere enim. Quisque rutrum metus ac eros luctus eleifend nec et arcu. Proin sed vestibulum nisl, in aliquam arcu. Nulla congue metus in velit fermentum aliquam. Donec mattis faucibus nisi. Ut tincidunt enim vitae pulvinar faucibus. Phasellus efficitur fringilla dolor vitae scelerisque. Sed in pretium sem. Suspendisse scelerisque efficitur purus a rutrum. Vestibulum ornare cursus enim pretium consectetur. Aenean consequat dolor eget pulvinar venenatis. Morbi nec diam ut justo finibus ornare id in odio. Nam iaculis turpis elementum erat molestie ultricies. In sit amet turpis nunc.
[br][/br]

[div class="Line3"][/div]
[size=3]
Interacting: | Mentioned: | Located:
[/size]
[div class="Line3" style="margin-bottom:0px;"][/div]
[/font][/div]
[div=float:left;][SIZE=1][FONT=courier new][COLOR=rgb(147, 101, 184)]Code by[/COLOR] [USER=44533]@AgWordSmith[/USER][/FONT][/SIZE][/div]
[/div][/nobr][/FONT]
 

FREE TO USE JUST KEEP THE CREDITS FRIENDO
------------------------------

Name: Peek-a-Boo CS
A spooky themed CS for October! This one likes to hide at first !
(Mobile friendly version on the way but it is readable on mobile)

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes orange is a named color in this code// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// [/class] [class=Background] background:url(https://cdn.discordapp.com/attachments/359734207024463882/497436131151839232/Dark_bg.jpg); position:relative; padding:20px; height:200px; width:200px; transition: width 3s, height 3s; // This is the background image as well as the backgrounds beginning size// [/class] [class=BackgroundFull] height:600px; width:99%; transition: width 1s, height 1s; //the back ground at its full size// [/class] [class=Hide] display: none; //hides what needs to be hidden// [/class] [class=Image] float:left; margin-right:20px; border:2px SOLID Orange; line-height:0; width:200px; height:200px; border-radius:50%; overflow:hidden; background:url(https://cdn.discordapp.com/attachments/359734207024463882/497447377318445066/6390a52af62996c042fa9c4d028bb214.jpg); background-position: 20% 5%; cursor:pointer; transition: width 3s, border-radius 3s, height 3s; //border around image and its starting size// [/class] [class=ImageFull] width:400px; height: 600px; border-radius:10px; overflow:hidden; background-position: 20% 5%; transition: width 3s , border-radius 3s, height 3s; //the image's full size// [/class] [class=Name] float:left; width:calc( 55% - 20px ); font-size:50px; text-align:center; color:orange; //How the Name looks// [/class] [class=Text] float:left; background-color:rgba(77,77,76,0.7); width:calc( 55% - 20px ); height:500px; overflow:scroll; overflow-x:hidden; padding:10px; font-size:15px; color:orange; box-shadow: 0px 0px 5px 10px rgba(77,77,76,0.6); //how the text looks// [/class] [Script class=Image] set addedClass 0 set fadedIn 0 //allows the script function below to work by setting variables// [/script] [Script class=Image on=click] if (eq ${addedClass} 0) (addClass ImageFull) (removeClass ImageFull) if (eq ${addedClass} 0) (addClass BackgroundFull Background) (removeClass BackgroundFull Background) if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0) if (eq ${fadedIn} 0) (fadeIn 1000 Name) (fadeOut 1000 Name) if (eq ${fadedIn} 0) (fadeIn 1000 Text) (fadeOut 1000 Text) if (eq ${fadedIn} 0) (set fadedIn 1) (set fadedIn 0) //makes it possible to click between the bigger and smaller sizes// [/script] [div class="Background"] [div class="Image"] [/div] [div class="Name Hide"] Name [/div] [div class="Text Hide"] Age:

Gender:

Height:

Weight:

Coven:

Magic:

Familiar:

Favorite Spells:

Likes:

Dislikes:

Personality:

Bio:
[/div] [/div]
Code by AgWordSmith AgWordSmith
 
Last edited:
Code:
[nobr]

[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes
orange is a named color in this code//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

[/class]

[class=Background]
background:url(https://cdn.discordapp.com/attachments/359734207024463882/497436131151839232/Dark_bg.jpg);
position:relative;
padding:20px;
height:200px;
width:200px;
transition: width 3s, height 3s;

// This is the background image as well as the backgrounds beginning size//
[/class]

[class=BackgroundFull]
height:600px;
width:99%;
transition: width 1s, height 1s;

//the back ground at its full size//
[/class]

[class=Hide]
display: none;

//hides what needs to be hidden//
[/class]

[class=Image]
float:left;
margin-right:20px;
border:2px SOLID Orange;
line-height:0;
width:200px;
height:200px;
border-radius:50%;
overflow:hidden;
background:url(https://cdn.discordapp.com/attachments/359734207024463882/497447377318445066/6390a52af62996c042fa9c4d028bb214.jpg);
background-position: 20% 5%;
cursor:pointer;
transition: width 3s, border-radius 3s, height 3s;

//border around image and its starting size//
[/class]

[class=ImageFull]
width:400px;
height: 600px;
border-radius:10px;
overflow:hidden;
background-position: 20% 5%;
transition: width 3s , border-radius 3s, height 3s;

//the image's full size//
[/class]

[class=Name]
float:left;
width:calc( 55% - 20px );
font-size:50px;
text-align:center;
color:orange;

//How the Name looks//
[/class]

[class=Text]
float:left;
background-color:rgba(77,77,76,0.7);
width:calc( 55% - 20px );
height:500px;
overflow:scroll;
overflow-x:hidden;
padding:10px;
font-size:15px;
color:orange;
box-shadow: 0px 0px 5px 10px rgba(77,77,76,0.6);

//how the text looks//
[/class]


[Script class=Image]
set addedClass 0
set fadedIn 0

//allows the script function below to work by setting variables//
[/script]

[Script class=Image on=click]
if (eq ${addedClass} 0) (addClass ImageFull) (removeClass ImageFull)
if (eq ${addedClass} 0) (addClass BackgroundFull Background) (removeClass BackgroundFull Background)
if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0)
if (eq ${fadedIn} 0) (fadeIn  1000 Name) (fadeOut 1000 Name)
if (eq ${fadedIn} 0) (fadeIn  1000 Text) (fadeOut 1000 Text)
if (eq ${fadedIn} 0) (set fadedIn 1) (set fadedIn 0)

//makes it possible to click between the bigger and smaller sizes//
[/script]


[div class="Background"]
[div class="Image"]
[/div] 
[div class="Name Hide"]
[font=New Rocker]Name[/font]
[/div]
[div class="Text Hide"]
[font=IM Fell Double Pica SC]
Age: 
[br][/br][br][/br]
Gender:
[br][/br][br][/br]
Height:
[br][/br][br][/br]
Weight:
[br][/br][br][/br]
Coven:
[br][/br][br][/br]
Magic:
[br][/br][br][/br]
Familiar:
[br][/br][br][/br]
Favorite Spells:
[br][/br][br][/br]
Likes:
[br][/br][br][/br]
Dislikes:
[br][/br][br][/br]
Personality:
[br][/br][br][/br]
Bio:

[/font]
[/div]

[/div][div=float:left;][FONT=courier new][size=2]Code by [USER=44533]@AgWordSmith[/size][/USER][/FONT]
[/div]
[/nobr]
 
Last edited:

Not Mobile Friendly
FREE TO USE JUST KEEP THE CREDITS CHAPS
------------------------------

Name: Peek-a-Boo IC
A spooky themed IC for October! This one likes to hide at first !
(Mobile friendly version on the way but it is readable on mobile)

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes orange is a named color in this code// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// [/class] [class=Background] background:url(https://cdn.discordapp.com/attachments/359734207024463882/497436131151839232/Dark_bg.jpg); position:relative; padding:20px; height:200px; width:200px; transition: width 3s, height 3s; // This is the background image as well as the backgrounds beginning size// [/class] [class=BackgroundFull] height:410px; width:99%; transition: width 1s, height 1s; //the back ground at its full size// [/class] [class=Hide] display: none; //hides what needs to be hidden// [/class] [class=Image] float:left; margin-right:20px; border:2px SOLID Orange; line-height:0; width:200px; height:200px; border-radius:50%; overflow:hidden; background:url(https://cdn.discordapp.com/attachments/359734207024463882/497447377318445066/6390a52af62996c042fa9c4d028bb214.jpg); background-position: 20% 5%; cursor:pointer; transition: width 3s, border-radius 3s, height 3s; //border around image and its starting size// [/class] [class=ImageFull] width:260px; height: 400px; border-radius:10px; overflow:hidden; background-position: 20% 5%; transition: width 3s , border-radius 3s, height 3s; //the image's full size// [/class] [class=Name] float:left; width:calc( 100% - 35%); font-size:50px; text-align:center; color:orange; //How the Name looks// [/class] [class=Text] float:left; background-color:rgba(77,77,76,0.7); width:calc( 100% - 35%); height:300px; overflow:scroll; overflow-x:hidden; padding:10px; font-size:15px; color:orange; box-shadow: 0px 0px 5px 10px rgba(77,77,76,0.6); //how the text looks// [/class] [Script class=Image] set addedClass 0 set fadedIn 0 //allows the script function below to work by setting variables// [/script] [Script class=Image on=click] if (eq ${addedClass} 0) (addClass ImageFull) (removeClass ImageFull) if (eq ${addedClass} 0) (addClass BackgroundFull Background) (removeClass BackgroundFull Background) if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0) if (eq ${fadedIn} 0) (fadeIn 1000 Name) (fadeOut 1000 Name) if (eq ${fadedIn} 0) (fadeIn 1000 Text) (fadeOut 1000 Text) if (eq ${fadedIn} 0) (set fadedIn 1) (set fadedIn 0) //makes it possible to click between the bigger and smaller sizes// [/script] [div class="Background"] [div class="Image"] [/div] [div class="Name Hide"] Name [/div] [div class="Text Hide"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non sapien nibh. Maecenas id dapibus turpis, luctus mollis justo. Duis sed mauris eu ante tempus mattis. Pellentesque laoreet eu purus vitae auctor. Sed et orci at purus varius lobortis. Ut augue arcu, scelerisque nec leo eget, consectetur elementum mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu semper diam. Vivamus velit neque, bibendum eu luctus eget, imperdiet a quam.

Suspendisse potenti. Nulla finibus rhoncus nisl, et blandit nisi tempus quis. Sed aliquet mollis libero, in lacinia nisl imperdiet semper. Aenean accumsan sollicitudin velit, vitae hendrerit mauris facilisis sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales risus vel odio faucibus, non ultricies dolor aliquet. Donec non dictum nulla. Etiam ut faucibus ante. Pellentesque suscipit posuere elit sed cursus. In hac habitasse platea dictumst.
[/div] [/div]
Code by AgWordSmith AgWordSmith
 
Last edited:
Code:
[nobr]

[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes
orange is a named color in this code//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

[/class]

[class=Background]
background:url(https://cdn.discordapp.com/attachments/359734207024463882/497436131151839232/Dark_bg.jpg);
position:relative;
padding:20px;
height:200px;
width:200px;
transition: width 3s, height 3s;

// This is the background image as well as the backgrounds beginning size//
[/class]

[class=BackgroundFull]
height:410px;
width:99%;
transition: width 1s, height 1s;

//the back ground at its full size//
[/class]

[class=Hide]
display: none;

//hides what needs to be hidden//
[/class]

[class=Image]
float:left;
margin-right:20px;
border:2px SOLID Orange;
line-height:0;
width:200px;
height:200px;
border-radius:50%;
overflow:hidden;
background:url(https://cdn.discordapp.com/attachments/359734207024463882/497447377318445066/6390a52af62996c042fa9c4d028bb214.jpg);
background-position: 20% 5%;
cursor:pointer;
transition: width 3s, border-radius 3s, height 3s;

//border around image and its starting size//
[/class]

[class=ImageFull]
width:260px;
height: 400px;
border-radius:10px;
overflow:hidden;
background-position: 20% 5%;
transition: width 3s , border-radius 3s, height 3s;

//the image's full size//
[/class]

[class=Name]
float:left;
width:calc( 100% - 35%);
font-size:50px;
text-align:center;
color:orange;

//How the Name looks//
[/class]

[class=Text]
float:left;
background-color:rgba(77,77,76,0.7);
width:calc( 100% - 35%);
height:300px;
overflow:scroll;
overflow-x:hidden;
padding:10px;
font-size:15px;
color:orange;
box-shadow: 0px 0px 5px 10px rgba(77,77,76,0.6);

//how the text looks//
[/class]


[Script class=Image]
set addedClass 0
set fadedIn 0

//allows the script function below to work by setting variables//
[/script]

[Script class=Image on=click]
if (eq ${addedClass} 0) (addClass ImageFull) (removeClass ImageFull)
if (eq ${addedClass} 0) (addClass BackgroundFull Background) (removeClass BackgroundFull Background)
if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0)
if (eq ${fadedIn} 0) (fadeIn  1000 Name) (fadeOut 1000 Name)
if (eq ${fadedIn} 0) (fadeIn  1000 Text) (fadeOut 1000 Text)
if (eq ${fadedIn} 0) (set fadedIn 1) (set fadedIn 0)

//makes it possible to click between the bigger and smaller sizes//
[/script]


[div class="Background"]
[div class="Image"]
[/div] 
[div class="Name Hide"]
[font=New Rocker]Name[/font]
[/div]
[div class="Text Hide"]
[font=IM Fell Double Pica SC]
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non sapien nibh. Maecenas id dapibus turpis, luctus mollis justo. Duis sed mauris eu ante tempus mattis. Pellentesque laoreet eu purus vitae auctor. Sed et orci at purus varius lobortis. Ut augue arcu, scelerisque nec leo eget, consectetur elementum mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu semper diam. Vivamus velit neque, bibendum eu luctus eget, imperdiet a quam.
[br][/br][br][/br]
Suspendisse potenti. Nulla finibus rhoncus nisl, et blandit nisi tempus quis. Sed aliquet mollis libero, in lacinia nisl imperdiet semper. Aenean accumsan sollicitudin velit, vitae hendrerit mauris facilisis sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales risus vel odio faucibus, non ultricies dolor aliquet. Donec non dictum nulla. Etiam ut faucibus ante. Pellentesque suscipit posuere elit sed cursus. In hac habitasse platea dictumst. 
[/font]
[/div]

[/div][div=float:left;][FONT=courier new][size=2]Code by [USER=44533]@AgWordSmith[/size][/USER][/FONT]
[/div]
[/nobr]
 
Last edited:
FREE TO USE JUST KEEP THE CREDITS GRUBS
------------------------------

Name: MSPA Page
Just a MSPA recreation for all your Homestuck needs; if you're good with BBC+ you could do a lot with just this page cx [Example ]
Also side note if you're screen is pretty big the image won't touch the sides like its supposed to, this happen because I made the code stretchy to also fit mobile screens instead of a fixed width like the actual site has.

[Class=BG1] background-color:#535353; padding-top:20px; padding-bottom:20px; padding-right:0px; padding-left:0px; //dark grey back ground// [/class] [Class=BG2] background-color:#C6C6C6; width:85%; margin:auto; padding-top:10px; padding-bottom:10px; padding-right:0px; padding-left:0px; //lighter grey back ground// [/class] [Class=Content] background-color:#efefef; margin:auto; color:black; width:75%; font-family:Courier New; text-align:center; padding-right:0px; padding-left:0px; //even lighter grey background// [/class] [Class=Img] padding:0px; margin:auto; width:100%; line-height:none; //Image, makes sure it's the same size as the light grey background // [/class] [Class=Text] padding:20px; font-weight:700; line-height: 18.9px; //how the text will look// [/class] [class=Link] font-family:Helvetica; font-weight:200px; line-height: 27.6px; font-size:24px; color:#0000ee; //how the bottom link looks// I just used a URL to show off other aspect of the character but if you know some bbc+ you can keep making page after page for a more Homestuck Experience, I make make a template where you can just add new pages to make something of the sort easier// [/class] [div class="BG1"] [div class="BG2"] [div class="Content"] Enter Name. [div class="Img"]
latest
[/div] [div class="Text"] Your name is [NAME]

Lorem ipsum dolor sit AMET, consectetur adipiscing elit. Donec dolor dolor, accumsan in vulputate ac, consequat ac ipsum. Phasellus porttitor QUAM ut nibh tristique vestibulum. Morbi nunc arcu, posuere nec commodo quis, viverra aliquet augue. MAURIS eget elit vel sem malesuada aliquam. Etiam porttitor mauris non MASSA vestibulum gravida. Curabitur semper eleifend justo, ut vestibulum risus viverra ut. In interdum consectetur EST, AT TRISIQUE enim facilisis non. PROIN mollis efficitur mauris, non mattis metus porta fringilla. Donec tellus odio, tempor iaculis aliquam vel, convallis eu est

What will you do?

[div class="Link"] > = = = = > [/div] [/div][/div][/div][/div]
 
Last edited:
Code:
[nobr]
[Class=BG1]
background-color:#535353;
padding-top:20px;
padding-bottom:20px;
padding-right:0px;
padding-left:0px;

//dark grey back ground//
[/class]

[Class=BG2]
background-color:#C6C6C6;
width:85%;
margin:auto;
padding-top:10px;
padding-bottom:10px;
padding-right:0px;
padding-left:0px;

//lighter grey back ground//
[/class]

[Class=Content]
background-color:#efefef;
margin:auto;
color:black;
width:75%;
font-family:Courier New;
text-align:center;
padding-right:0px;
padding-left:0px;

//even lighter grey background//
[/class]

[Class=Img]
padding:0px;
margin:auto;
width:100%;
line-height:none;

//Image, makes sure it's the same size as the light grey background //
[/class]

[Class=Text]
padding:20px;
font-weight:700;
line-height: 18.9px;

//how the text will look//
[/class]

[class=Link]
font-family:Helvetica;
font-weight:200px;
line-height: 27.6px;
font-size:24px;
color:#0000ee;

//how the bottom link looks//
I just used a URL to show off other aspect of the character 
but if you know some bbc+ you can keep making page after page for a more Homestuck Experience,
I make make a template where you can just add new pages to make something of the sort easier//

[/class]

[div class="BG1"]
[div class="BG2"]
[div class="Content"]

[SIZE=26px][B]Enter Name.[/B][/SIZE]

[div class="Img"]
[IMG]https://vignette.wikia.nocookie.net/mspaintadventures/images/0/05/Bluhjohnjuice.gif/revision/latest?cb=20100505211852[/IMG]
[/div]

[div class="Text"]
Your name is [NAME]
[br][/br][br][/br]
Lorem ipsum dolor sit AMET, consectetur adipiscing elit. Donec dolor dolor, accumsan in vulputate ac, consequat ac ipsum. Phasellus porttitor QUAM ut nibh tristique vestibulum. Morbi nunc arcu, posuere nec commodo quis, viverra aliquet augue. MAURIS eget elit vel sem malesuada aliquam. Etiam porttitor mauris non MASSA vestibulum gravida. Curabitur semper eleifend justo, ut vestibulum risus viverra ut. In interdum consectetur EST, AT TRISIQUE enim facilisis non. PROIN mollis efficitur mauris, non mattis metus porta fringilla. Donec tellus odio, tempor iaculis aliquam vel, convallis eu est
[br][/br][br][/br]

What will you do?
[br][/br][br][/br]


[div class="Link"]
[COLOR=black]>[/COLOR]

[U][URL='https://vignette.wikia.nocookie.net/mspaintadventures/images/0/05/Bluhjohnjuice.gif/revision/latest?cb=20100505211852']= = = = >[/URL][/U]

[/div]

[/div][/div][/div][/div][/nobr]
 
FREE TO USE JUST KEEP THE CREDITS CHUMS
------------------------------

Name: MSPA Pesterlog
Just a Pesterlog for all your Homestuck needs!

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes grey is a named color in this code// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// //remove -- and change pestering to Trolling for a trollian log!// [/class] [class=Hidden] display:none; //keeps hidden things hidden// [/class] [class=BG] background-color:#efefef; padding:5px; //the grey background// [/class] [class=Border] font-family:Trebuchet MS; color:black; padding:4px; border:1px dashed grey; //the dotted border// [/class] [class=Log] Font-family:Courier New; font-weight:bold; margin-top:10px; padding:20px; //the part where the actual pester log will go// [/class] [class=Button] background-color:white; margin:auto; width:85px; font-size:11px; border-radius:5px; box-shadow: 0px 0px 3px grey; text-align:center; //the show/hide pesterlog button// [/class] [class name=Button state=hover] cursor:pointer; background-color:#777777; border-radius:0px; border: 2px OUTSET #777777; box-shadow:0px 0px 0px 0px grey; //changes the show/hide pesterlog button when a cursor hovers over it// [/class] [script class=Button on=click] set link (getText) if (eq "${link}" "Show Pesterlog") (show HIDE) if (eq "${link}" "Show Pesterlog") (hide SHOW) if (eq "${link}" "Show Pesterlog") (show Log) if (eq "${link}" "Hide Pesterlog") (hide HIDE) if (eq "${link}" "Hide Pesterlog") (show SHOW) if (eq "${link}" "Hide Pesterlog") (hide Log) //This says when the button saying "Show Pesterlog" is clicked to hide the button that says "Show pesterlog" //and show the one hat says "Hide pesterlog" //and show the Log //when the button saying "Hide Pesterlog" is clicked to hide the button that says "Hide pesterlog" //and show the one hat says "Show pesterlog" //and hide the Log// [/script] [div class=BG][div class=Border] [div class="Button SHOW"]Show Pesterlog[/div] [div class="Button Hidden HIDE"]Hide Pesterlog[/div] [div class="Log Hidden"] -- thisPerson [TP] began pestering thatGuy [TG] --

TP: Hi
TG: Bye

-- thatGuy [TG] ceased pestering thisPerson [TP] -- [/div][/div][/div]
 
Code:
[nobr]
[class=Notes]
// Forward slashes are comments
and do no show up in the final design,
these are to help you find everything easily
and explain some code as well.
These comments must be with in a class or script tags
in order to be hidden, from what I know//

// Long URls are images
# followed by letter and numbers are Hex codes
or color codes
grey is a named color in this code//

// This code does not show breaks unless is shows the [br][/br] code
When typing responses to rps, be aware that when you press enter
it will not show that you did. 
You'll have to use the [br][/br] tags//

//remove -- and change pestering to Trolling for a trollian log!//

[/class]
[class=Hidden]
display:none;

//keeps hidden things hidden//
[/class] 

[class=BG]
background-color:#efefef;
padding:5px;

//the grey background//
[/class]

[class=Border]
font-family:Trebuchet MS;
color:black;
padding:4px;
border:1px dashed grey;

//the dotted border//
[/class]

[class=Log]
Font-family:Courier New;
font-weight:bold;
margin-top:10px;
padding:20px;

//the part where the actual pester log will go//
[/class]

[class=Button]
background-color:white;
margin:auto;
width:85px;
font-size:11px;
border-radius:5px;
box-shadow: 0px 0px 3px grey;
text-align:center;

//the show/hide pesterlog button//
[/class]

[class name=Button state=hover]
cursor:pointer;
background-color:#777777;
border-radius:0px;
border: 2px OUTSET #777777;
box-shadow:0px 0px 0px 0px grey;

//changes the show/hide pesterlog button when a cursor hovers over it//
[/class]

[script class=Button on=click]
set link (getText)
   if (eq "${link}" "Show Pesterlog") (show HIDE)
   if (eq "${link}" "Show Pesterlog") (hide SHOW)
   if (eq "${link}" "Show Pesterlog") (show Log)
   if (eq "${link}" "Hide Pesterlog") (hide HIDE)
   if (eq "${link}" "Hide Pesterlog") (show SHOW)
   if (eq "${link}" "Hide Pesterlog") (hide Log)

//This says when the button saying "Show Pesterlog" is clicked to hide the button that says "Show pesterlog"
//and show the one hat says "Hide pesterlog"
//and show the Log

//when the button saying "Hide Pesterlog" is clicked to hide the button that says "Hide pesterlog"
//and show the one hat says "Show pesterlog"
//and hide the Log//
[/script]


[div class=BG][div class=Border]
[div class="Button SHOW"]Show Pesterlog[/div]

[div class="Button Hidden HIDE"]Hide Pesterlog[/div]

[div class="Log Hidden"]
-- thisPerson [TP]  began pestering thatGuy [TG] --
[br][/br]
[br][/br]
TP: Hi[br][/br]
TG: Bye[br][/br]
[br][/br]
-- thatGuy [TG] ceased pestering thisPerson [TP] --
[/div][/div][/div]

[/nobr]
 
FREE TO USE JUST KEEP THE CREDITS GRUBS
------------------------------

Name: MSPA Page
Just a MSPA recreation for all your Homestuck needs; if you're good with BBC+ you could do a lot with just this page cx [Example ]
Also side note if you're screen is pretty big the image won't touch the sides like its supposed to, this happen because I made the code stretchy to also fit mobile screens instead of a fixed width like the actual site has.

[Class=BG1] background-color:#535353; padding-top:20px; padding-bottom:20px; padding-right:0px; padding-left:0px; //dark grey back ground// [/class] [Class=BG2] background-color:#C6C6C6; width:85%; margin:auto; padding-top:10px; padding-bottom:10px; padding-right:0px; padding-left:0px; //lighter grey back ground// [/class] [Class=Content] background-color:#efefef; margin:auto; color:black; width:75%; font-family:Courier New; text-align:center; padding-right:0px; padding-left:0px; //even lighter grey background// [/class] [Class=Img] padding:0px; margin:auto; width:100%; line-height:none; //Image, makes sure it's the same size as the light grey background // [/class] [Class=Text] padding:20px; font-weight:700; line-height: 18.9px; //how the text will look// [/class] [class=Link] font-family:Helvetica; font-weight:200px; line-height: 27.6px; font-size:24px; color:#0000ee; //how the bottom link looks// I just used a URL to show off other aspect of the character but if you know some bbc+ you can keep making page after page for a more Homestuck Experience, I make make a template where you can just add new pages to make something of the sort easier// [/class] [div class="BG1"] [div class="BG2"] [div class="Content"] Enter Name. [div class="Img"]
latest
[/div] [div class="Text"] Your name is [NAME]

Lorem ipsum dolor sit AMET, consectetur adipiscing elit. Donec dolor dolor, accumsan in vulputate ac, consequat ac ipsum. Phasellus porttitor QUAM ut nibh tristique vestibulum. Morbi nunc arcu, posuere nec commodo quis, viverra aliquet augue. MAURIS eget elit vel sem malesuada aliquam. Etiam porttitor mauris non MASSA vestibulum gravida. Curabitur semper eleifend justo, ut vestibulum risus viverra ut. In interdum consectetur EST, AT TRISIQUE enim facilisis non. PROIN mollis efficitur mauris, non mattis metus porta fringilla. Donec tellus odio, tempor iaculis aliquam vel, convallis eu est

What will you do?

[div class="Link"] > = = = = > [/div] [/div][/div][/div][/div]

FREE TO USE JUST KEEP THE CREDITS CHUMS
------------------------------

Name: MSPA Pesterlog
Just a Pesterlog for all your Homestuck needs!

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes grey is a named color in this code// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// //remove -- and change pestering to Trolling for a trollian log!// [/class] [class=Hidden] display:none; //keeps hidden things hidden// [/class] [class=BG] background-color:#efefef; padding:5px; //the grey background// [/class] [class=Border] font-family:Trebuchet MS; color:black; padding:4px; border:1px dashed grey; //the dotted border// [/class] [class=Log] Font-family:Courier New; font-weight:bold; margin-top:10px; padding:20px; //the part where the actual pester log will go// [/class] [class=Button] background-color:white; margin:auto; width:85px; font-size:11px; border-radius:5px; box-shadow: 0px 0px 3px grey; text-align:center; //the show/hide pesterlog button// [/class] [class name=Button state=hover] cursor:pointer; background-color:#777777; border-radius:0px; border: 2px OUTSET #777777; box-shadow:0px 0px 0px 0px grey; //changes the show/hide pesterlog button when a cursor hovers over it// [/class] [script class=Button on=click] set link (getText) if (eq "${link}" "Show Pesterlog") (show HIDE) if (eq "${link}" "Show Pesterlog") (hide SHOW) if (eq "${link}" "Show Pesterlog") (show Log) if (eq "${link}" "Hide Pesterlog") (hide HIDE) if (eq "${link}" "Hide Pesterlog") (show SHOW) if (eq "${link}" "Hide Pesterlog") (hide Log) //This says when the button saying "Show Pesterlog" is clicked to hide the button that says "Show pesterlog" //and show the one hat says "Hide pesterlog" //and show the Log //when the button saying "Hide Pesterlog" is clicked to hide the button that says "Hide pesterlog" //and show the one hat says "Show pesterlog" //and hide the Log// [/script] [div class=BG][div class=Border] [div class="Button SHOW"]Show Pesterlog[/div] [div class="Button Hidden HIDE"]Hide Pesterlog[/div] [div class="Log Hidden"] -- thisPerson [TP] began pestering thatGuy [TG] --

TP: Hi
TG: Bye

-- thatGuy [TG] ceased pestering thisPerson [TP] -- [/div][/div][/div]


Bless
 

Not Mobile Friendly
FREE TO USE JUST KEEP THE CREDITS CHAPS
------------------------------

Name: Peek-a-Boo IC
A spooky themed IC for October! This one likes to hide at first !
(Mobile friendly version on the way but it is readable on mobile)

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes orange is a named color in this code// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// [/class] [class=Background] background:url(https://cdn.discordapp.com/attachments/359734207024463882/497436131151839232/Dark_bg.jpg); position:relative; padding:20px; height:200px; width:200px; transition: width 3s, height 3s; // This is the background image as well as the backgrounds beginning size// [/class] [class=BackgroundFull] height:410px; width:99%; transition: width 1s, height 1s; //the back ground at its full size// [/class] [class=Hide] display: none; //hides what needs to be hidden// [/class] [class=Image] float:left; margin-right:20px; border:2px SOLID Orange; line-height:0; width:200px; height:200px; border-radius:50%; overflow:hidden; background:url(https://cdn.discordapp.com/attachments/359734207024463882/497447377318445066/6390a52af62996c042fa9c4d028bb214.jpg); background-position: 20% 5%; cursor:pointer; transition: width 3s, border-radius 3s, height 3s; //border around image and its starting size// [/class] [class=ImageFull] width:260px; height: 400px; border-radius:10px; overflow:hidden; background-position: 20% 5%; transition: width 3s , border-radius 3s, height 3s; //the image's full size// [/class] [class=Name] float:left; width:calc( 100% - 35%); font-size:50px; text-align:center; color:orange; //How the Name looks// [/class] [class=Text] float:left; background-color:rgba(77,77,76,0.7); width:calc( 100% - 35%); height:300px; overflow:scroll; overflow-x:hidden; padding:10px; font-size:15px; color:orange; box-shadow: 0px 0px 5px 10px rgba(77,77,76,0.6); //how the text looks// [/class] [Script class=Image] set addedClass 0 set fadedIn 0 //allows the script function below to work by setting variables// [/script] [Script class=Image on=click] if (eq ${addedClass} 0) (addClass ImageFull) (removeClass ImageFull) if (eq ${addedClass} 0) (addClass BackgroundFull Background) (removeClass BackgroundFull Background) if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0) if (eq ${fadedIn} 0) (fadeIn 1000 Name) (fadeOut 1000 Name) if (eq ${fadedIn} 0) (fadeIn 1000 Text) (fadeOut 1000 Text) if (eq ${fadedIn} 0) (set fadedIn 1) (set fadedIn 0) //makes it possible to click between the bigger and smaller sizes// [/script] [div class="Background"] [div class="Image"] [/div] [div class="Name Hide"] Name [/div] [div class="Text Hide"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non sapien nibh. Maecenas id dapibus turpis, luctus mollis justo. Duis sed mauris eu ante tempus mattis. Pellentesque laoreet eu purus vitae auctor. Sed et orci at purus varius lobortis. Ut augue arcu, scelerisque nec leo eget, consectetur elementum mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu semper diam. Vivamus velit neque, bibendum eu luctus eget, imperdiet a quam.

Suspendisse potenti. Nulla finibus rhoncus nisl, et blandit nisi tempus quis. Sed aliquet mollis libero, in lacinia nisl imperdiet semper. Aenean accumsan sollicitudin velit, vitae hendrerit mauris facilisis sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales risus vel odio faucibus, non ultricies dolor aliquet. Donec non dictum nulla. Etiam ut faucibus ante. Pellentesque suscipit posuere elit sed cursus. In hac habitasse platea dictumst.
[/div] [/div]
can i use this code?
 
FREE TO USE JUST KEEP THE CREDITS SURVIVORS
------------------------------

Name: Apocalypse Cs
A Cs I made for a zombie apocalypse rp.
[example]

[class=BackgroundPicture] Background:url(https://cdn.discordapp.com/attachments/359734207024463882/524331123145179137/Tileableerodedscratchmetaltexturebackground00.jpg); background-size: 25% 25%; Padding:30px; Padding-bottom:10px; background-attachment: fixed; [/class] [class=BackgroundColor] padding:20px; background-color:#f0ebe0; Color:Black; font-family:Fira Sans ; float:left; [/class] [class=Name] margin-bottom:10px; Border-top: 3px SOLID #4f1818; Border-bottom: 3px SOLID #4f1818; border-radius:5px; padding:5px; padding-left:20px; font-family: Fjalla One; font-size:27px; letter-spacing:3px; color:#4f1818; float:left; width:97%; [/class] [class=Img] background-color:#f0ebe0; text-align: center; border:1px SOLID #4f1818; line-height:0px; margin-top:10px; [/class] [class=Icon] color:#f0ebe0; background-color:#4f1818; padding:5px; padding-left:10px; font-size: 25px; margin:-10px -10px 10px -10px ; font-family: Fjalla One; [/class] [class=statbar] border-radius:5px; border-top: 1px Solid #4f1818; border-bottom: 1px Solid #4f1818; padding:2px; width:50%; margin-top:3px; margin-bottom:3px; [/class] [class=Line] border: 3px SOLID #4f1818; margin-top:10px; margin-bottom:10px; padding:10px; [/class] [div class="BackgroundPicture"] [div class="BackgroundColor"] [div class="Name"]
NAME
[/div]
[div class="Img"]
latest.jpg
[/div] [div class="Line"] [div class="Icon"] Proficiency[/div]
[/div]
[div class="Line"] [div class="Icon"] Information[/div] Age:
Gender:
Height:
Weight:
Occupation:

[/div] [div class="Line"] [div class="Icon"] Stats[/div]
Strength:
[div class=statbar][/div]
Endurance:
[div class=statbar] [/div]
Charisma:
[div class=statbar][/div]
Intelligence:
[div class=statbar] [/div]
Agility:
[div class=statbar style="width:75%;"] [/div]
[/div]
[div class="Line"] [div class="Icon"] Personality[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a suscipit augue. Suspendisse a ligula pretium, tempor enim vitae, bibendum lorem. Suspendisse laoreet lorem leo, a gravida justo molestie tempus. In et felis justo. Morbi id vehicula est. Aliquam rutrum nulla vestibulum, efficitur neque ac, rhoncus elit. Ut sed nisi ligula. Fusce vel varius eros. Curabitur non mauris convallis, varius arcu faucibus, interdum dolor. Duis scelerisque tortor non nisi laoreet commodo. Fusce mattis ultricies mauris quis volutpat. Ut leo orci, efficitur a magna placerat, iaculis tempus velit. Nam sed diam magna. Nulla a faucibus quam. Integer a sodales elit. Nulla quis condimentum enim, in ultricies ligula.
[/div] [div class="Line"] [div class="Icon"] Background[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a suscipit augue. Suspendisse a ligula pretium, tempor enim vitae, bibendum lorem. Suspendisse laoreet lorem leo, a gravida justo molestie tempus. In et felis justo. Morbi id vehicula est. Aliquam rutrum nulla vestibulum, efficitur neque ac, rhoncus elit. Ut sed nisi ligula. Fusce vel varius eros. Curabitur non mauris convallis, varius arcu faucibus, interdum dolor. Duis scelerisque tortor non nisi laoreet commodo. Fusce mattis ultricies mauris quis volutpat. Ut leo orci, efficitur a magna placerat, iaculis tempus velit. Nam sed diam magna. Nulla a faucibus quam. Integer a sodales elit. Nulla quis condimentum enim, in ultricies ligula.
[/div] [/div] Code by AgWordSmith AgWordSmith [/div]
 
Code:
[nobr]
[class=BackgroundPicture]
Background:url(https://cdn.discordapp.com/attachments/359734207024463882/524331123145179137/Tileableerodedscratchmetaltexturebackground00.jpg);
background-size: 25% 25%;
Padding:30px;
Padding-bottom:10px;
background-attachment: fixed;
[/class]

[class=BackgroundColor]
padding:20px;
background-color:#f0ebe0;
Color:Black;
font-family:Fira Sans ;
float:left;
[/class]

[class=Name]
margin-bottom:10px;
Border-top: 3px SOLID #4f1818;
Border-bottom: 3px SOLID #4f1818;
border-radius:5px;
padding:5px;
padding-left:20px;
font-family:  Fjalla One;
font-size:27px;
letter-spacing:3px;
color:#4f1818;
float:left;
width:97%;
[/class]

[class=Img]
background-color:#f0ebe0;
text-align: center;
border:1px SOLID #4f1818;
line-height:0px;
margin-top:10px;
[/class]

[class=Icon]
color:#f0ebe0;
background-color:#4f1818;
padding:5px;
padding-left:10px;
font-size: 25px;
margin:-10px -10px 10px -10px ;
font-family:  Fjalla One;
[/class]

[class=statbar]
border-radius:5px;
border-top: 1px Solid #4f1818;
border-bottom: 1px Solid #4f1818;
padding:2px;
width:50%;
margin-top:3px;
margin-bottom:3px;
[/class]

[class=Line]
border: 3px SOLID #4f1818;
margin-top:10px;
margin-bottom:10px;
padding:10px;
[/class]

[div class="BackgroundPicture"]
[div class="BackgroundColor"]
[div class="Name"]
[row][column=span3]
[COLOR=#4f1818][fa]fa-exclamation-triangle [/fa][/COLOR][COLOR=#000000]NAME[/COLOR] [/column][/row][/div][row][column=span3]
[div class="Img"]

[IMG]https://cdn.discordapp.com/attachments/359734207024463882/439046648375541760/latest.jpg[/IMG]
[/div]
[div class="Line"]
[div class="Icon"][fa]fa-crosshairs[/fa] Proficiency[/div]
[br][/br]
[/div]
[/column][column=span5]
[div class="Line"]
[div class="Icon"][fa]fa-id-card[/fa] Information[/div]
[B]Age:[/B] 
[br][/br]
[B]Gender:[/B] 
[br][/br]
[B]Height:[/B]
[br][/br]
[B]Weight:[/B] 
[br][/br]
[B]Occupation:[/B] 
[br][/br][br][/br]
[/div]

[div class="Line"]
[div class="Icon"][fa]fa-tasks [/fa] Stats[/div]
[br][/br]
[row][column=span3]Strength:[br][/br]
[div class=statbar][fa]fa-square[/fa][/div]
[br][/br]
Endurance:[br][/br]
[div class=statbar][fa]fa-square[/fa] [fa]fa-square[/fa][/div]
[br][/br]
[/column][column=span3]
Charisma:[br][/br]
[div class=statbar][fa]fa-square[/fa][/div]
[br][/br]
Intelligence:[br][/br]
[div class=statbar][fa]fa-square[/fa] [fa]fa-square[/fa][/div]
[/column][column=span2]
Agility:[br][/br]
[div class=statbar style="width:75%;"][fa]fa-square[/fa] [fa]fa-square[/fa][/div]
[/column][/row]
[/div]
[/column][/row]

[div class="Line"]
[div class="Icon"][fa] fa-heartbeat[/fa] Personality[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a suscipit augue. Suspendisse a ligula pretium, tempor enim vitae, bibendum lorem. Suspendisse laoreet lorem leo, a gravida justo molestie tempus. In et felis justo. Morbi id vehicula est. Aliquam rutrum nulla vestibulum, efficitur neque ac, rhoncus elit. Ut sed nisi ligula. Fusce vel varius eros. Curabitur non mauris convallis, varius arcu faucibus, interdum dolor. Duis scelerisque tortor non nisi laoreet commodo. Fusce mattis ultricies mauris quis volutpat. Ut leo orci, efficitur a magna placerat, iaculis tempus velit. Nam sed diam magna. Nulla a faucibus quam. Integer a sodales elit. Nulla quis condimentum enim, in ultricies ligula. 
[br][/br]
[/div]
[div class="Line"]
[div class="Icon"][fa]fa-free-code-camp [/fa] Background[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a suscipit augue. Suspendisse a ligula pretium, tempor enim vitae, bibendum lorem. Suspendisse laoreet lorem leo, a gravida justo molestie tempus. In et felis justo. Morbi id vehicula est. Aliquam rutrum nulla vestibulum, efficitur neque ac, rhoncus elit. Ut sed nisi ligula. Fusce vel varius eros. Curabitur non mauris convallis, varius arcu faucibus, interdum dolor. Duis scelerisque tortor non nisi laoreet commodo. Fusce mattis ultricies mauris quis volutpat. Ut leo orci, efficitur a magna placerat, iaculis tempus velit. Nam sed diam magna. Nulla a faucibus quam. Integer a sodales elit. Nulla quis condimentum enim, in ultricies ligula. 


[br][/br]
[/div]
[comment][font= Fira Sans] A[/font][font= Fjalla One] A[/font][/comment]
[/div]
[SIZE=9px][FONT=courier new][COLOR=rgb(225, 225, 225)]Code by[/COLOR] [USER=44533]@AgWordSmith[/USER][/FONT][/SIZE]
[/div][/nobr][/font]
 
FREE TO USE JUST KEEP THE CREDITS SCAVENGERS
------------------------------

Name: Apocalypse Cs
A IC Post I made for a zombie apocalypse rp.
[example]


[class=BackgroundPicture] Background:url(https://cdn.discordapp.com/attachments/359734207024463882/524331123145179137/Tileableerodedscratchmetaltexturebackground00.jpg); background-size: 25% 25%; Padding:30px; Padding-bottom:10px; background-attachment: fixed; [/class] [class=BackgroundColor] padding:20px; background-color:#f0ebe0; Color:Black; font-family:Fira Sans ; [/class] [class=Name] margin-bottom:10px; Border-top: 3px SOLID #4f1818; Border-bottom: 3px SOLID #4f1818; border-radius:5px; padding:5px; padding-left:20px; font-family: Fjalla One; font-size:27px; letter-spacing:3px; color:#4f1818; float:left; width:97%; [/class] [class=Img] background-color:#f0ebe0; text-align: center; border:1px SOLID #4f1818; line-height:0px; margin-top:10px; [/class] [class=Icon] color:#f0ebe0; background-color:#4f1818; padding:5px; padding-left:10px; font-size: 25px; margin:-10px -10px 10px -10px ; font-family: Fjalla One; [/class] [class=statbar] border-radius:5px; border-top: 1px Solid #4f1818; border-bottom: 1px Solid #4f1818; padding:2px; width:50%; margin-top:3px; margin-bottom:3px; [/class] [class=Line] border: 3px SOLID #4f1818; margin-top:10px; margin-bottom:10px; padding:10px; [/class] [class=Status] margin-bottom:10px; Border-top: 3px SOLID #4f1818; Border-bottom: 3px SOLID #4f1818; border-radius:5px; padding:5px; font-family: Fjalla One; font-size:12px; letter-spacing:3px; color:#000000; width:97%; [/class] [div class="BackgroundPicture"] [div class="BackgroundColor"] [div class="Name"]
NAME
[/div]
[div class="Img"]
latest.jpg
[/div]
[div class="Status"] Status

Interacting:

Mentioned:

Located:
[/div]
[div class="Line"] [div class="Icon"] Actions[/div] Lorem Impsum

[/div]
[/div] Code by AgWordSmith AgWordSmith [/div]
 
Code:
[nobr]
[class=BackgroundPicture]
Background:url(https://cdn.discordapp.com/attachments/359734207024463882/524331123145179137/Tileableerodedscratchmetaltexturebackground00.jpg);
background-size: 25% 25%;
Padding:30px;
Padding-bottom:10px;
background-attachment: fixed;
[/class]

[class=BackgroundColor]
padding:20px;
background-color:#f0ebe0;
Color:Black;
font-family:Fira Sans   ;
[/class]

[class=Name]
margin-bottom:10px;
Border-top: 3px SOLID #4f1818;
Border-bottom: 3px SOLID #4f1818;
border-radius:5px;
padding:5px;
padding-left:20px;
font-family:  Fjalla One;
font-size:27px;
letter-spacing:3px;
color:#4f1818;
float:left;
width:97%;
[/class]

[class=Img]
background-color:#f0ebe0;
text-align: center;
border:1px SOLID #4f1818;
line-height:0px;
margin-top:10px;
[/class]

[class=Icon]
color:#f0ebe0;
background-color:#4f1818;
padding:5px;
padding-left:10px;
font-size: 25px;
margin:-10px -10px 10px -10px ;
font-family:  Fjalla One;
[/class]

[class=statbar]
border-radius:5px;
border-top: 1px Solid #4f1818;
border-bottom: 1px Solid #4f1818;
padding:2px;
width:50%;
margin-top:3px;
margin-bottom:3px;
[/class]

[class=Line]
border: 3px SOLID #4f1818;
margin-top:10px;
margin-bottom:10px;
padding:10px;
[/class]

[class=Status]
margin-bottom:10px;
Border-top: 3px SOLID #4f1818;
Border-bottom: 3px SOLID #4f1818;
border-radius:5px;
padding:5px;
font-family:  Fjalla One;
font-size:12px;
letter-spacing:3px;
color:#000000;
width:97%;
[/class]


[div class="BackgroundPicture"]
[div class="BackgroundColor"]
[div class="Name"]
[row][column=span2]
[COLOR=#4f1818][fa]fa-exclamation-triangle [/fa][/COLOR][COLOR=#000000]NAME[/COLOR][/column][/row][/div][row][column=span2]
[div class="Img"]

[IMG]https://cdn.discordapp.com/attachments/359734207024463882/439046648375541760/latest.jpg[/IMG]
[/div]
[br][/br]
[div class="Status"]
[COLOR=#4f1818][fa]fa-tasks[/fa][/COLOR] Status
[div=border-top:1px Solid #000000;][/div]
[br][/br]
Interacting:
[div=border-top:1px Solid #000000;][/div]
[br][/br]
Mentioned:
[div=border-top:1px Solid #000000;][/div]
[br][/br]
Located:
[div=border-top:1px Solid #000000;][/div]
[/div]

[/column][column=span6]
[div class="Line"]
[div class="Icon"][fa]fa-bolt[/fa] Actions[/div]

Lorem Impsum
[br][/br][br][/br]
[/div]

[/column][/row]


[comment][font= Anton ] A[/font][font= Fjalla One ] A[/font][/comment]
[/div]
[SIZE=9px][FONT=courier new][COLOR=rgb(225, 225, 225)]Code by[/COLOR] [USER=44533]@AgWordSmith[/USER][/FONT][/SIZE]
[/div][/nobr]
 

Users who are viewing this thread

Back
Top