Awww thank you so much!! I'm so glad you like it!!I'm going to be using this one because it's literally what I've spent ages trying to achieve and you've done it so simply! Will totally tag you for credit and everything
AgWordSmith
[/div]
[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][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]
AgWordSmith
AgWordSmith
AgWordSmith
[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][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][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][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][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][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]
range;
//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;
colorrange;
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:
AgWordSmith
[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][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]
[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]
Aww thank you! (๑>◡<๑)
[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"][/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]
can i use this code?
Not Mobile FriendlyFREE 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
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]
yeah! just keep the credits in there!
AgWordSmith
[/div]
[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][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]
