Resource Free For All

[AgWordSmith]

[class=NAV] background-Color:lightslategrey ; border-radius:5px; color:white; padding:10px; font-family:Courier new; float:left; height:30px; overflow:hidden; width:90%; margin:3px; transition: all 0.5s ease-in 0.5s;] [/class] [class name=NAV state=hover] background-Color:Gray; border-radius:5px; align-items: start; height:250px; color:white; padding:10px; font-family:Courier new; float:left; transition: all 0.5s ease-in 0.5s;] [/class] [class=NAV4] background-Color:lightslategrey ; border-radius:5px; color:white; padding:10px; font-family:Courier new; float:left; height:30px; overflow:hidden; width:90%; margin:3px; transition: all 0.5s ease-in 0.5s;] [/class] [class name=NAV4 state=hover] background-Color:Gray; border-radius:5px; align-items: start; height:450px; color:white; padding:10px; font-family:Courier new; float:left; transition: all 0.5s ease-in 0.5s;] [/class] [class=Link] background-color: #E2DDDD; padding-left:3px; height:18px; Width:16px; border-radius:70%; margin-right:3px; text-algin:center; float:left; [/class] [class=CodeTitle] margin:2px; [/class] [div class=NAV]

Information

Information Coming Soon [/div]

[div class="NAV 2"]

.Not Mobile Friendly

[div class="CodeTitle']Karkat Loop[div class="Link"] ❀[/div][/div] [div class="CodeTitle']Simplicity [div class="Link"]❀[/div][/div] [/div]

[div class="NAV 3"]

.Mobile Compatible

[div class="CodeTitle"]Dragon Scales[div class="Link"]❀[/div][/div] [/div]

[div class="NAV4"]

.Mobile Friendly

[div class="CodeTitle']Progression of Buttons[div class="Link"]❀[/div][/div] [div class="CodeTitle']IC Dragon Scales[div class="Link"]❀[/div][/div] [div class="CodeTitle']Stars[div class="Link"]❀[/div][/div] [div class="CodeTitle']IC Stars[div class="Link"]❀[/div][/div] [div class="CodeTitle']Pastel Slides[div class="Link"]❀[/div][/div] [div class="CodeTitle']Simple Case File CS[div class="Link"]❀[/div][/div] [div class="CodeTitle']Simple Case File IC[div class="Link"]❀[/div][/div] [div class="CodeTitle']Student ID[div class="Link"]❀[/div][/div] [div class="CodeTitle']Student IC[div class="Link"]❀[/div][/div] [div class="CodeTitle']Color Code CS[div class="Link"]❀[/div][/div] [div class="CodeTitle']Color Code IC[div class="Link"]❀[/div][/div] [div class="CodeTitle']Simple Fantasy (old)[div class="Link"]❀[/div][/div] [div class="CodeTitle']Simple Fantasy IC (old)[div class="Link"]❀[/div][/div] [div class="CodeTitle']Simple Fantasy [div class="Link"]❀ [/div][/div] [div class="CodeTitle']Simple Fantasy IC [div class="Link"]❀[/div][/div] [div class="CodeTitle']Simple Border CS [div class="Link"]❀[/div][/div] [div class="CodeTitle']Simple Border IC[div class="Link"]❀[/div][/div] [/div]

So everything here you can take for yourselves and do what you want.
(as long as my itty bitty credit tag is still there)

But if you ever see codes I do outside this thread, please ask to use first.

I am also willing to answer bbc related questions; questions regarding my codes
and will be happy to edit/alter a code present in this thread.
(would prefer questions by PM)

I WILL NOT create a custom code from scratch.
(Not yet anyways)​

 

[AgWordSmith]

The Progression of button making:

First Attempt:

[Script class=button on=click] addClass ButtonClick [/script] [class=button] Cursor:pointer; background-color:grey; border:2px Solid Black; [/class] [class=ButtonClick] background-color:white; border:2px Solid Black; [/class] [div class=button]Hello[/div]

Spoiler: code

[nobr]
[Script class=button on=click]
addClass ButtonClick

[/script]


[class=button]
Cursor:pointer;
background-color:grey;
border:2px Solid Black;
[/class]

[class=ButtonClick]
background-color:white;
border:2px Solid Black;
[/class]

[div class=button]Hello[/div]
[/nobr]

 

[AgWordSmith]

The Progression of button making:

Second Attempt:
Thank you Lyro for helping me with this one!

[class=button] Cursor:pointer; background-color:grey; border:2px Solid Black; [/class] [class=ButtonClick] background-color:white; border:2px Solid Black; [/class] [Script class=button] set addedClass 0 [/script] [Script class=button on=click] if (eq ${addedClass} 0) (addClass ButtonClick) (removeClass ButtonClick) if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0) [/script] [div class=button style="padding:2px;"] Hello[/div]

Spoiler: code

[nobr]

[class=button]
Cursor:pointer;
background-color:grey;
border:2px Solid Black;
[/class]

[class=ButtonClick]
background-color:white;
border:2px Solid Black;
[/class]

[Script class=button]
set addedClass 0
[/script]

[Script class=button on=click]
if (eq ${addedClass} 0) (addClass ButtonClick) (removeClass ButtonClick)
if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0)
[/script]

[div class=button style="padding:2px;"]  [font=The Girl Next Door]Hello[/font][/div]
[/nobr]

 

[AgWordSmith]

The Progression of button making:

Third Attempt: What I liked to call "The Text Switching Conundrum" since it took me forever to figure out how to make the text and colors switch as well as keeping the font for both.
(final attempt as of now)
[class=button] Cursor:pointer; background-color: red; Border-radius:5px; margin: 10px auto; text-align: center; width: 200px; padding:10px; [/class] [class=ButtonClick] Cursor:pointer; background-color:rgb(209,213,216); Border-radius:5px; margin: 10px auto; text-align: center; width: 200px; padding:10px; [/class] [class=red] color:red; [/class] [class=grey] color:rgb(209,213,216); [/class] [class=Text] font-family:Courier New; [/class] [Script class=button] set addedClass 0 [/script] [Script class=button on=click] if (eq ${addedClass} 0) (addClass ButtonClick) (removeClass ButtonClick) if (eq ${addedClass} 0) (addClass red) (removeClass red) if (eq ${addedClass} 0) (removeClass grey) (addClass grey) if (eq ${addedClass} 0) (setText "THE SIGNLESS") (setText "KARKAT VANTAS") if (eq ${addedClass} 0) (addClass Text) if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0) [/script] [div class=button Style"font-family:Courier New;"]KARKAT VANTAS[/div]

Spoiler: code

[nobr]
[class=button]
Cursor:pointer;
background-color: red;
Border-radius:5px;
margin: 10px auto;
text-align: center;
width: 200px;
padding:10px;
[/class]

[class=ButtonClick]
Cursor:pointer;
background-color:rgb(209,213,216);
Border-radius:5px;
margin: 10px auto;
text-align: center;
width: 200px;
padding:10px;
[/class]

[class=red]
color:red;
[/class]

[class=grey]
color:rgb(209,213,216);
[/class]

[class=Text]
font-family:Courier New;
[/class]

[Script class=button]
set addedClass 0
[/script]

[Script class=button on=click]
if (eq ${addedClass} 0) (addClass ButtonClick) (removeClass ButtonClick)
if (eq ${addedClass} 0) (addClass red) (removeClass red)
if (eq ${addedClass} 0) (removeClass grey) (addClass grey)
if (eq ${addedClass} 0) (setText "THE SIGNLESS") (setText "KARKAT VANTAS")
if (eq ${addedClass} 0) (addClass Text)
if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0)
[/script]

[div class=button Style"font-family:Courier New;"][FONT=courier new][color=rgb(209,213,216)]KARKAT VANTAS[/color][/FONT][color=rgb(209,213,216)][/color][/div][/nobr]

 

[AgWordSmith]

FREE TO USE JUST KEEP THE CREDITS YO

Name: Dragon Scales

[class=base] background:white; width:90%; margin:10px auto; padding:10px; color:black; //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 but 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// //the only color named by its name is White// //this is the white background// //or the base of the design// [/class] [class=hidden] display: none; //this allows all the content I don't want to be seen until clicked to be hidden, or not on display until I code otherwise// [/class] [class=Img] border:2px solid #000000; line-height:0px; margin-left:5px; pointer-events:none; //the border around the Image// //pointer-evnets:none; is my favorite peice of// //code because it removes the "click for full size" tool tip// //on the image and I personally find that really annoying // //and distracting// [/class] [class=ImagButton] background:#AA0101; border-radius:5px; margin:10px Auto;margin-right:5px; padding:5px; float:left; Width:23%; text-align:center; float:left; font-family:Book Antiqua; color:White; //The red buttons above the Images// [/class] [class name=ImagButton state=hover] cursor:pointer; Background-color:#48107E; color:red; //what the Imagebutton looks like// // when a cursor hovers over it// [/class] [class=ImagButtonClick] background:#330B5A; border-radius:5px; margin:10px Auto; margin-right:5px; padding:5px; float:left; Width:23%; color:white; //what the image button looks like when clicked on// [/class] [script class=ImagButton on=click] removeClass ImagButtonClick ImagButton addClass ImagButtonClick //above allows the user to toggle between a clicked and unclicked colored button// set link (getText) //above sets the link to what ever text I put on the button within a div// if (eq "${link}" "Face") (show Head) if (eq "${link}" "Face") (hide Body) if (eq "${link}" "Face") (hide Form) if (eq "${link}" "Clothes") (show Body) if (eq "${link}" "Clothes") (hide Head) if (eq "${link}" "Clothes") (hide Form) if (eq "${link}" "Dragon") (show Form) if (eq "${link}" "Dragon") (hide Head) if (eq "${link}" "Dragon") (hide Body) //this says "if the class "ImageButton" is used and div says "Face" set that as a link,// //and when it's clicked show the class named "Head". The next linesays to hide the other classes or in this case images// [/script] [class=CSButton] background:#AA0101; border-radius:5px; margin:10px Auto;margin-right:50px; padding:5px; Width:15%; float:right; font-family:Book Antiqua; color:White; text-align:center; //The Buttons for the extra CS information// [/class] [class name=CSButton state=hover] cursor:pointer; Background-color:#48107E; color:red; //How the extra info looks when a cursor hovers over it// [/class] [class=CSButtonClick] background:#330B5A; border-radius:5px; margin10px Auto;margin-right:50px; padding:5px; Width:15%; float:right; font-family:Book Antiqua; color:White; text-align:center; //How the extra info button looks when clicked// [/class] [class=MobileButton] cursor:pointer; background:#AA0101; border-radius:5px; margin:3px Auto;margin-right:5px; padding:1px; float:left; Width:15%; text-align:center; float:left; font-family:Book Antiqua; color:white; //The Button that switches between a mobile friendly design and desktop design// [/class] [class=MobileButtonClick] cursor:pointer; background:#330B5A; border-radius:5px; margin:3px Auto;margin-right:5px; padding:1px; float:left; Width15%; text-align:center; float:left; font-family:Book Antiqua; color:red; //The switching button when its clicked// [/class] [class name=MobileButton state=hover] Background-color:#48107E; color:red; border-radius:5px; margin:3px Auto;margin-right:5px; padding:1px; float:left; Width:15%; text-align:center; float:left; font-family:Book Antiqua; //the switch button when a cursor points over it// [/class] [script class=MobileButton on=click] removeClass MobileButtonClick MobileButton addClass MobileButtonClick //Above toggled the clicked and non-clicked coloring// set link (getText) //sets a link with the text inside the Divs using this class// if (eq "${link}" "Mobile Users") (hide Desktop) if (eq "${link}" "Mobile Users") (show MobileContent) if (eq "${link}" "Mobile Users") (hide MobileButtonOne) if (eq "${link}" "Desktop Users") (hide MobileContent) if (eq "${link}" "Desktop Users") (show Desktop) if (eq "${link}" "Desktop Users") (show MobileButtonOne) // "If the class is used on a div saying "Mobile Users"" Show the mobile design and hide the desktop design"// // The Difference between Mobile and Desktop designs are that the Buttons above the Third Column are IN the column and not in the First Row with the Image Button, this allows a phone to// //display it with the information and not at the Top of the design with the Image buttons, causing a user to scroll up and down continuously, also with my margins set how they are the buttons // //will look scattered on the page. // [/script] [script class=CSButton on=click] removeClass CSButtonClick CSButton addClass CSButtonClick set link (getText) if (eq "${link}" "History") (show ContentHistory) if (eq "${link}" "History") (hide ContentPersonality) if (eq "${link}" "Personality") (show ContentPersonality) if (eq "${link}" "Personality") (hide ContentHistory) //The same as the other scripts but with the extra info buttons, half of coding, for me at least, is copy, paste, change one little thing, repeat.// [/script] [class=Notes] //So below is where I actually put together the design and one thing to keep in mind is that within the// //Divs you can name new classes inside it and that's what you use when using the show [new named class] // //or hide [new named class] or any script function with the class. // //Anything in the [div] [/div] tags with the button class are what the links are set to,// // so if you change the name here you have to go back to the scripts and change the name to match. // //BUT You can style that individual element with a: style="Regular div code" // //This adds to that specific Div and only with in that div // //(but it may affect other elements depending on what you add,// // like where I set a right margin pushes the other button as well)// // Just remember that long urls are Images // //and # followed by letters and numbers are colors // //and the only color that is named is white// [/class]

[div class="MobileButtonOne MobileButton"]Mobile Users

[div class="Desktop base" style="color:black"]

[div class=ImagButton style="Margin-left:40px;"]Face[/div][div class=ImagButton]Clothes[/div][div class=ImagButton]Dragon[/div]

[div class=CSButton style="margin-right:80px;"]History[/div][div class=CSButton]Personality[/div]

[div class="Img Head"]

[/div][div class="Img Body hidden"]

[/div][div class="Img Form hidden"]

[/div]

NAME

Age:
Gender:
Species:
Height:
Weight:
Country of Origin:
Occupation:

Appearance:


Depending on how big your image is you will need more text like this to here like this to match the size of the FIRST Image as much as posiible to look nice

[div class="ContentPersonality"]
Skills:

Personality: You need a paragraph to line up the sizes of the text to match (if your image is the same size as the one I used), or a bunch otf
or press enter a lot after to match your FIRST image
accumsan lacinia libero vitae aliquam. Vivamus quis purus a nunc consectetur rhoncus. Maecenas eget mauris augue. Nam rutrum egestas arcu, et mollis lectus aliquet vel. Mauris semper ante in vestibulum facilisis. Nulla pellentesque nibh dolor, vel posuere dui interdum eget. Phasellus commodo sit amet magna et volutpat. Quisque ac feugiat turpis. Nullam euismod tortor nec lorem

Likes:

Dislikes:
[/div][div class="ContentHistory hidden"]

You need a bout two paragraphs here to line up the sizes of the text to match (if your image is the same size as the one I used), or a bunch of
or press enter a lot after to match your FIRST image
Phasellus commodo sit amet magna et volutpat. Quisque ac feugiat turpis. Nullam euismod tortor nec lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac ipsum ut augue placerat pretium sed sed augue. Ut ipsum leo, tincidunt vitae dictum at, maximus et nulla. Donec accumsan lacinia libero vitae aliquam. Vivamus quis purus a nunc consectetur rhoncus. Maecenas eget mauris augue. Nam rutrum egestas arcu, et mollis lectus aliquet vel. Mauris semper ante in vestibulum facilisis. Nulla pellentesque nibh dolor, vel posuere dui interdum eget. Phasellus commodo sit amet magna et volutpat. Quisque ac feugiat turpis. Nullam euismod tortor nec lorem iaculis, vel cursus felis consequat. Quisque in purus luctus, cursus mi et, scelerisque dui.​

[/div]

[/div][div class="MobileContent hidden"][class=base] background:white; width:90%; margin:10px auto; padding:10px; //Ok so if you want to keep the Mobile design you will do a lot of copy and pasting // //BUT do not name anything besides "base" and "MobileButton" the same as the classes and links above// //they HAVE TO BE SEPARATE IN ORDER TO WORK PROPERLY.// //as you can see I just put the letter B behind everything to separate it// //Numbers don't work in class names from what I can tell// //IF YOU DON"T WANT THE MOBILE FRIENDLY PART// // 1. delete from [div class="MobileContent hidden"]// //all the way to the last [/column][/row] in the design// //you may have to delete a [/div] or two, how you can tell is when you preview the code you'll see// // [/div] at the bottom of the design and you just need to delete it at the bottom and you will be good// //2. Delete all the MobileButton classes and, the Mobile Button Script// // and the Div that uses the MobileButton class// [/class] [class=hiddenB] display: none; [/class] [class=ImgB] border:2px solid #000000; line-height:0px; margin-left:5px; pointer-events:none; [/class] [class=ImagButtonB] background:#AA0101; border-radius:5px; margin:10px Auto;margin-right:5px; padding:5px; float:left; Width:23%; text-align:center; float:left; font-family:Book Antiqua; color:White; [/class] [class name=ImagButtonB state=hover] cursor:pointer; Background-color:#48107E; color:red; [/class] [class=ImagButtonClickB] background:#330B5A; border-radius:5px; margin:10px Auto; margin-right:5px; padding:5px; float:left; Width:23%; color:white; [/class] [class=contentB] box-sizing: border-box; margin-top: 15px; text-align: justify; [/class] [script class=ImagButtonB on=click] removeClass ImagButtonClickB ImagButtonB addClass ImagButtonClickB set link (getText) if (eq "${link}" "Face") (show HeadB) if (eq "${link}" "Face") (hide BodyB) if (eq "${link}" "Face") (hide FormB) if (eq "${link}" "Clothes") (show BodyB) if (eq "${link}" "Clothes") (hide HeadB) if (eq "${link}" "Clothes") (hide FormB) if (eq "${link}" "Dragon") (show FormB) if (eq "${link}" "Dragon") (hide HeadB) if (eq "${link}" "Dragon") (hide BodyB) [/script] [class=CSButtonB] background:#AA0101; border-radius:5px; margin:5px Auto;margin-right:5px; padding:5px; Width:35%; float:right; font-family:Book Antiqua; color:White; text-align:center; [/class] [class name=CSButtonB state=hover] cursor:pointer; Background-color:#48107E; color:red; [/class] [class=CSButtonClickB] background:#330B5A; border-radius:5px; margin:5px Auto;margin-right:5px; padding:5px; Width:35%; float:right; font-family:Book Antiqua; color:White; text-align:center; [/class] [script class=CSButtonB on=click] removeClass CSButtonClickB CSButtonB addClass CSButtonClickB set link (getText) if (eq "${link}" "History") (show ContentHistoryB) if (eq "${link}" "History") (hide ContentPersonalityB) if (eq "${link}" "Personality") (show ContentPersonalityB) if (eq "${link}" "Personality") (hide ContentHistoryB) [/script][div class=MobileButton]Desktop Users[/div]
[div class=base style="color:black;"]

[div class=ImagButtonB style="Margin-left:30px;"]Face[/div][div class=ImagButtonB]Clothes[/div][div class=ImagButtonB]Dragon[/div]

[div class="Img HeadB"]

[/div][div class="Img BodyB hidden"]

[/div][div class="Img FormB hidden"]

[/div]

NAME

Age: 16
Gender:
Species:
Height:
Weight:
Country of Origin:
Occupation: S

Appearance:

ON Mobile the size of the ammount of text doesn't matter since mobile stacks columns ontop of each other but I still like to make it match as much as I can cause it looks nice

[div class=CSButtonB style="margin-right:55px;"]History[/div][div class=CSButtonB]Personality[/div]
[div class="ContentPersonalityB"]

Skills:

Personality: You need a paragraph to line up the sizes of the text to match (if your image is the same size as the one I used), or a bunch otf
or press enter a lot after to match your FIRST image
accumsan lacinia libero vitae aliquam. Vivamus quis purus a nunc consectetur rhoncus. Maecenas eget mauris augue. Nam rutrum egestas arcu, et mollis lectus aliquet vel. Mauris semper ante in vestibulum facilisis. Nulla pellentesque nibh dolor, vel posuere dui interdum eget.

Likes:

Dislikes:
[/div][div class="ContentHistoryB hidden"]

Character History​

You need a bout two paragraphs here to line up the sizes of the text to match (if your image is the same size as the one I used), or a bunch otf
or press enter a lot after to match your FIRST image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac ipsum ut augue placerat pretium sed sed augue. Ut ipsum leo, tincidunt vitae dictum at, maximus et nulla. Donec accumsan lacinia libero vitae aliquam. Vivamus quis purus a nunc consectetur rhoncus. Maecenas eget mauris augue. Nam rutrum egestas arcu, et mollis lectus aliquet vel. Mauris semper ante in vestibulum facilisis. Nulla pellentesque nibh dolor, vel posuere dui interdum eget.



[/div]

[/div][/div]Code by AgWordSmith
[/div]

 

[AgWordSmith]

Spoiler: code

[nobr][class=base]
background:white;
width:90%;
margin:10px auto;
padding:10px;

//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 (at least explain it in how I understand it to be don't know if its the Real explanation) //
//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//
//the only color named by its name is White//

//this is the white background//
//or the base of the design//

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

//this allows all the content I don't want to be
seen until clicked to be hidden,
or not on display until I code otherwise//

[/class]

[class=Img]
border:2px solid #000000;
line-height:0px;
margin-left:5px;
pointer-events:none;

//the border around the Image//

//pointer-evnets:none; is my favorite peice of//
//code because it removes the "click for full size" tool tip//
//on the image and I personally find that really annoying //
//and distracting//
[/class]


[class=ImagButton]
background:#AA0101;
border-radius:5px;
margin:10px Auto;margin-right:5px;
padding:5px;
float:left;
Width:23%;
text-align:center;
float:left;
font-family:Book Antiqua;
color:White;

//The red buttons above the Images//

[/class]

[class name=ImagButton state=hover]
cursor:pointer;
Background-color:#48107E;
color:red;

//what the Imagebutton looks like//
// when a cursor hovers over it//

[/class]

[class=ImagButtonClick]
background:#330B5A;
border-radius:5px;
margin:10px Auto;
margin-right:5px;
padding:5px;
float:left;
Width:23%;
color:white;

//what the image button looks like when clicked on//
[/class]

[script class=ImagButton on=click]
    removeClass ImagButtonClick ImagButton
    addClass ImagButtonClick
//above allows the user to toggle between a clicked and non-clicked colored button//

set link (getText)
//above sets the link to what ever text I put on the button within a div//

    if (eq "${link}" "Face") (show Head)
    if (eq "${link}" "Face") (hide Body)
    if (eq "${link}" "Face") (hide Form)
    if (eq "${link}" "Clothes") (show Body)
    if (eq "${link}" "Clothes") (hide Head)
    if (eq "${link}" "Clothes") (hide Form)
if (eq "${link}" "Dragon") (show Form)
    if (eq "${link}" "Dragon") (hide Head)
    if (eq "${link}" "Dragon") (hide Body)

//this says "if the class "ImageButton" is used and div says "Face" set that as a link,//
//and when it's clicked show the class named "Head". The next line says to hide the other classes or in this case images//
[/script]

[class=CSButton]
background:#AA0101;
border-radius:5px;
margin:10px Auto;margin-right:50px;
padding:5px;
Width:15%;
float:right;
font-family:Book Antiqua;
color:White;
text-align:center;

//The Buttons for the extra CS information//
[/class]

[class name=CSButton state=hover]
cursor:pointer;
Background-color:#48107E;
color:red;

//How the extra info looks when a cursor hovers over it//
[/class]

[class=CSButtonClick]
background:#330B5A;
border-radius:5px;
margin10px Auto;margin-right:50px;
padding:5px;
Width:15%;
float:right;
font-family:Book Antiqua;
color:White;
text-align:center;

//How the extra info button looks when clicked//
[/class]

[class=MobileButton]
cursor:pointer;
background:#AA0101;
border-radius:5px;
margin:3px Auto;margin-right:5px;
padding:1px;
float:left;
Width:15%;
text-align:center;
float:left;
font-family:Book Antiqua;
color:white;

//The Button that switches between a mobile friendly design and desktop design//
[/class]

[class=MobileButtonClick]
cursor:pointer;
background:#330B5A;
border-radius:5px;
margin:3px Auto;margin-right:5px;
padding:1px;
float:left;
Width15%;
text-align:center;
float:left;
font-family:Book Antiqua;
color:red;

//The switching button when its clicked//
[/class]

[class name=MobileButton state=hover]
Background-color:#48107E;
color:red;
border-radius:5px;
margin:3px Auto;margin-right:5px;
padding:1px;
float:left;
Width:15%;
text-align:center;
float:left;
font-family:Book Antiqua;

//the switch button when a cursor points over it//
[/class]

[script class=MobileButton on=click]
    removeClass MobileButtonClick MobileButton
    addClass MobileButtonClick

//Above toggles the clicked and non-clicked coloring//

set link (getText)
//sets a link with the text inside the Divs using this class//
    if (eq "${link}" "Mobile Users") (hide Desktop)
    if (eq "${link}" "Mobile Users") (show MobileContent)
    if (eq "${link}" "Mobile Users") (hide MobileButtonOne)
    if (eq "${link}" "Desktop Users") (hide MobileContent)
    if (eq "${link}" "Desktop Users") (show Desktop)
    if (eq "${link}" "Desktop Users") (show MobileButtonOne)

// "If the class is used on a div saying 'Mobile Users' Show the mobile design and hide the desktop design"//

// The Difference between Mobile and Desktop designs are that the Buttons above the Third Column are IN the column and not in the First Row with the Image Buttons, this allows a phone to// //display it With the information and not at the Top of the design with the Image buttons, causing a user to scroll up and down continuously, also with my margins set how they are the buttons //
//will look scattered on the page. //

[/script]
[script class=CSButton on=click]
    removeClass CSButtonClick CSButton
    addClass CSButtonClick
set link (getText)
    if (eq "${link}" "History") (show ContentHistory)
    if (eq "${link}" "History") (hide ContentPersonality)
    if (eq "${link}" "Personality") (show ContentPersonality)
   if (eq "${link}" "Personality") (hide ContentHistory)

//The same as the other scripts but with the extra info buttons, half of coding, for me at least, is copy, paste, change one little thing, repeat.//
[/script]

[class=Notes]
//So below is where I actually put together the design and one thing to keep in mind is that within the//
//Divs you can name new classes inside it and that's what you use when using the show [new named class] //
//or hide [new named class] or any script function with the class. //
//Anything in the [div] [/div] tags with the button class are what the links are set to,//
// so if you change the name here you have to go back to the scripts and change the name to match. //

//^^^DO NOT STYLIZE THE LINK TEXT  IN THE DIV WITH REGULAR BBC USE THE CLASS OR THE INSTRUCTIONS BELOW TO STYLIZEvvv//
// You can style that Individual element with a: style="Regular div code"  in a div tag after the class 
//EX [div class=Classname style="Background-color:#000000;"]//
//style="  " adds to that specific Div and only with in that div //
//(but it may affect other elements depending on what you add,//
// like where I set a right margin pushes the other button as well)//
// Remember that long urls are Images //
//and # followed by letters and numbers are colors //
//and the only color that is named is white within the classes above//
[/class]

[/nobr][div=background:url(https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX9371251.jpg);][div class="MobileButtonOne MobileButton"]Mobile Users[/div]
[div class="Desktop base"][row][column=span3][div class=ImagButton style="Margin-left:40px;"]Face[/div][div class=ImagButton]Clothes[/div][div class=ImagButton]Dragon[/div][/column][column=span2]           [/column][column=span5][div class=CSButton style="margin-right:80px;"]History[/div][div class=CSButton]Personality[/div][/column][/row][row][column=span3]
[div class="Img Head"][IMG]https://cdn.discordapp.com/attachments/407317571080290306/409841484431360001/image.jpg[/IMG][/div][div class="Img Body hidden"][IMG]https://cdn.discordapp.com/attachments/359734207024463882/409911585449050143/4.png[/IMG][/div][div class="Img Form hidden"][IMG]https://cdn.discordapp.com/attachments/407317571080290306/409898863260991497/2.png[/IMG][/div][/column][column=span2][FONT=book antiqua][COLOR=#330B5A][SIZE=7]NAME[/SIZE][/COLOR][/FONT]
[div=border-top:2px Solid #AA0101;][/div][COLOR=#48107E][FONT=book antiqua]Age:[/FONT][/COLOR][FONT=book antiqua]
[COLOR=#48107E]Gender[/COLOR]:
[COLOR=#48107E]Species[/COLOR]:
[COLOR=#48107E]Height[/COLOR]:
[COLOR=#48107E]Weight[/COLOR]:
[COLOR=#48107E]Country of Origin[/COLOR]:
[COLOR=#48107E]Occupation[/COLOR]:

[COLOR=#48107E]Appearance[/COLOR]:


Depending on how big your image is you will need more text like this  to here like this to match the size of the FIRST Image as much as posiible to look nice

[div=border-bottom:2px Solid #AA0101;margin-top:10px;][/div][/font][/column][column=span3][div class="ContentPersonality"]
[FONT=book antiqua][COLOR=#48107E]Skills[/COLOR]:

[COLOR=#48107E]Personality[/COLOR]: You need a paragraph to line up the sizes of the text to match (if your image is the same size as the one I used), or a bunch otf [br][/br] or press enter a lot after  to match your FIRST image
accumsan lacinia libero vitae aliquam. Vivamus quis purus a nunc consectetur rhoncus. Maecenas eget mauris augue. Nam rutrum egestas arcu, et mollis lectus aliquet vel. Mauris semper ante in vestibulum facilisis. Nulla pellentesque nibh dolor, vel posuere dui interdum eget. Phasellus commodo sit amet magna et volutpat. Quisque ac feugiat turpis. Nullam euismod tortor nec lorem

[COLOR=#48107E]Likes:[/COLOR]

[COLOR=#48107E]Dislikes:[/COLOR][/FONT]
[/div][div class="ContentHistory hidden"][FONT=Book Antiqua]
[CENTER][COLOR=#000000]You need a bout two paragraphs here to line up the sizes of the text to match (if your image is the same size as the one I used), or a bunch of [br][/br] or press enter a lot after  to match your FIRST image
  Phasellus commodo sit amet magna et volutpat. Quisque ac feugiat turpis. Nullam euismod tortor nec lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac ipsum ut augue placerat pretium sed sed augue. Ut ipsum leo, tincidunt vitae dictum at, maximus et nulla. Donec accumsan lacinia libero vitae aliquam. Vivamus quis purus a nunc consectetur rhoncus. Maecenas eget mauris augue. Nam rutrum egestas arcu, et mollis lectus aliquet vel. Mauris semper ante in vestibulum facilisis. Nulla pellentesque nibh dolor, vel posuere dui interdum eget. Phasellus commodo sit amet magna et volutpat. Quisque ac feugiat turpis. Nullam euismod tortor nec lorem iaculis, vel cursus felis consequat. Quisque in purus luctus, cursus mi et, scelerisque dui.[/COLOR][/CENTER]
[/font][/div][/column][/row]
[SIZE=1][FONT=courier new][COLOR=rgb(147, 101, 184)] [/COLOR][/FONT][/SIZE]
[/div][div class="MobileContent hidden"][nobr][class=base]
background:white;
width:90%;
margin:10px auto;
padding:10px;

//Ok so if you want to keep the Mobile design you will do a lot of copy and pasting //
//BUT do not name anything besides "base" and "MobileButton" the same as the classes and links above//
//they HAVE TO BE SEPARATE IN ORDER TO WORK PROPERLY.//
//as you can see I just put the letter B behind everything to separate it//
//Numbers don't work in class names from what I can tell//

//IF YOU DON"T WANT THE MOBILE FRIENDLY PART//
// 1. delete from [div class="MobileContent hidden"]//
//all the way to the last [/column][/row] in the design//
//you may have to delete a [/div] or two after that , how you can tell is when you preview the code you'll see//
// [/div] at the bottom of the design and you just need to delete it at the bottom f the code and you will be good//

//2. Delete all  the MobileButton classes and, the Mobile Button Script//
// and the Div that uses the MobileButton class//

[/class]

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

[class=ImgB]
border:2px solid #000000;
line-height:0px;
margin-left:5px;
pointer-events:none;
[/class]


[class=ImagButtonB]
background:#AA0101;
border-radius:5px;
margin:10px Auto;margin-right:5px;
padding:5px;
float:left;
Width:23%;
text-align:center;
float:left;
font-family:Book Antiqua;
color:White;
[/class]

[class name=ImagButtonB state=hover]
cursor:pointer;
Background-color:#48107E;
color:red;
[/class]

[class=ImagButtonClickB]
background:#330B5A;
border-radius:5px;
margin:10px Auto;
margin-right:5px;
padding:5px;
float:left;
Width:23%;
color:white;
[/class]

[class=contentB]
    box-sizing: border-box;
    margin-top: 15px;
    text-align: justify;
[/class]

[script class=ImagButtonB on=click]
    removeClass ImagButtonClickB ImagButtonB
    addClass ImagButtonClickB
set link (getText)
    if (eq "${link}" "Face") (show HeadB)
    if (eq "${link}" "Face") (hide BodyB)
    if (eq "${link}" "Face") (hide FormB)
    if (eq "${link}" "Clothes") (show BodyB)
    if (eq "${link}" "Clothes") (hide HeadB)
    if (eq "${link}" "Clothes") (hide FormB)
if (eq "${link}" "Dragon") (show FormB)
    if (eq "${link}" "Dragon") (hide HeadB)
    if (eq "${link}" "Dragon") (hide BodyB)
[/script]

[class=CSButtonB]
background:#AA0101;
border-radius:5px;
margin:5px Auto;margin-right:5px;
padding:5px;
Width:35%;
float:right;
font-family:Book Antiqua;
color:White;
text-align:center;
[/class]

[class name=CSButtonB state=hover]
cursor:pointer;
Background-color:#48107E;
color:red;
[/class]

[class=CSButtonClickB]
background:#330B5A;
border-radius:5px;
margin:5px Auto;margin-right:5px;
padding:5px;
Width:35%;
float:right;
font-family:Book Antiqua;
color:White;
text-align:center;
[/class]

[script class=CSButtonB on=click]
    removeClass CSButtonClickB CSButtonB
    addClass CSButtonClickB
set link (getText)
    if (eq "${link}" "History") (show ContentHistoryB)
    if (eq "${link}" "History") (hide ContentPersonalityB)
    if (eq "${link}" "Personality") (show ContentPersonalityB)
   if (eq "${link}" "Personality") (hide ContentHistoryB)
[/script][/nobr][div class=MobileButton]Desktop Users[/div]
[div class=base][row][column=span3][div class=ImagButtonB style="Margin-left:30px;"]Face[/div][div class=ImagButtonB]Clothes[/div][div class=ImagButtonB]Dragon[/div][/column][/row]

[row][column=span3][div class="Img HeadB"][IMG]https://cdn.discordapp.com/attachments/407317571080290306/409841484431360001/image.jpg[/IMG][/div][div class="Img BodyB hidden"][IMG]https://cdn.discordapp.com/attachments/359734207024463882/409911585449050143/4.png[/IMG][/div][div class="Img FormB hidden"][IMG]https://cdn.discordapp.com/attachments/407317571080290306/409898863260991497/2.png[/IMG][/div][/column][column=span2][FONT=book antiqua][COLOR=#330B5A][SIZE=7]NAME[/SIZE][/COLOR][/FONT]
[div=border-top:2px Solid #AA0101;][/div][COLOR=#48107E][FONT=book antiqua]Age:[/FONT][/COLOR][FONT=book antiqua] 16
[COLOR=#48107E]Gender[/COLOR]:
[COLOR=#48107E]Species[/COLOR]:
[COLOR=#48107E]Height[/COLOR]:
[COLOR=#48107E]Weight[/COLOR]:
[COLOR=#48107E]Country of Origin[/COLOR]:
[COLOR=#48107E]Occupation[/COLOR]: S

[COLOR=#48107E]Appearance[/COLOR]:

ON Mobile the size of the ammount of text doesn't matter since mobile stacks columns ontop of each other  but I still like to make it match as much as I can cause it looks nice

[div=border-bottom:2px Solid #AA0101;margin-top:10px;][/div][/font][/column][column=span3][div class=CSButtonB style="margin-right:55px;"]History[/div][div class=CSButtonB]Personality[/div]
[div class="ContentPersonalityB"]

[FONT=book antiqua][COLOR=#48107E]Skills[/COLOR]:

[COLOR=#48107E]Personality[/COLOR]: [s]You need a paragraph to line up the sizes of the text to match (if your image is the same size as the one I used), or a bunch otf [br][/br] or press enter a lot after  to match your FIRST image[/s]
accumsan lacinia libero vitae aliquam. Vivamus quis purus a nunc consectetur rhoncus. Maecenas eget mauris augue. Nam rutrum egestas arcu, et mollis lectus aliquet vel. Mauris semper ante in vestibulum facilisis. Nulla pellentesque nibh dolor, vel posuere dui interdum eget.

[COLOR=#48107E]Likes:[/COLOR]

[COLOR=#48107E]Dislikes:[/COLOR] [/FONT]
[/div][div class="ContentHistoryB hidden"][FONT=Book Antiqua]

[CENTER][COLOR=#000000] Character History[/COLOR][/CENTER]
[s]You need a bout two paragraphs here to line up the sizes of the text to match (if your image is the same size as the one I used), or a bunch otf [br][/br] or press enter a lot after  to match your FIRST image  [/s]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac ipsum ut augue placerat pretium sed sed augue. Ut ipsum leo, tincidunt vitae dictum at, maximus et nulla. Donec accumsan lacinia libero vitae aliquam. Vivamus quis purus a nunc consectetur rhoncus. Maecenas eget mauris augue. Nam rutrum egestas arcu, et mollis lectus aliquet vel. Mauris semper ante in vestibulum facilisis. Nulla pellentesque nibh dolor, vel posuere dui interdum eget.

[/font]

[/div]
[/column][/row]
[/div][/div]
[SIZE=1][FONT=courier new][COLOR=rgb(147, 101, 184)]Code by @AgWordSmith[/COLOR][/FONT][/SIZE]
[/div]

 

[AgWordSmith]

FREE TO USE JUST KEEP THE CREDITS DUDE

Name: IC Dragon Scales

[class=base] background:white; width:90%; margin:10px auto; padding:10px; //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 put 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// //the only color named by its name is White// //this is the white background// //or the base of the design// [/class] [class=hidden] display: none; //this allows all the content I don't want to be seen until clicked to be hidden, or not on display until I code otherwise// [/class] [class=Img] border:2px solid #000000; line-height:0px; margin-left:5px; pointer-events:none; //the border around the Image// [/class] [class=ImagButton] background:#AA0101; border-radius:5px; margin:0px Auto;margin-right:5px; padding:5px; float:left; Width:70%; text-align:center; float:left; font-family:Book Antiqua; color:White; //The red buttons above the Images// [/class] [class name=ImagButton state=hover] cursor:pointer; Background-color:#48107E; color:red; //what the Imagebutton looks like// // when a cursor hovers over it// [/class] [class=ImagButtonClick] background:#330B5A; border-radius:5px; margin:10px Auto; margin-right:5px; padding:5px; float:left; Width:70%; color:white; //what the image button looks like when clicked on// [/class] [script class=ImagButton on=click] removeClass ImagButtonClick ImagButton addClass ImagButtonClick //above allows the user to toggle between a clicked and non-clicked colored button// set link (getText) //above sets the link to what ever text I put on the button within a div// if (eq "${link}" "Currently") (hide Head) if (eq "${link}" "Currently") (show Tags) if (eq "${link}" "Currently") (show Image) if (eq "${link}" "Currently") (hide Current) if (eq "${link}" "Image") (show Head) if (eq "${link}" "Image") (hide Tags) if (eq "${link}" "Image") (show Current) if (eq "${link}" "Image") (hide Image) // So this more or less translates to// //if the div has the text "Currently" in it it's set as a link and when clicked it will hide the Head class (my image) and show the Tags class and the class named Image (the new button)// //oh and below
means to put a break in the code, like pressing the enter button. it's necessary since the beginning means no breaks unless other wise told with that br code// //for anyone who doesn't know// [/script]

[div class="Desktop base" style="color:black;"]

[div class="Current ImagButton" style="Margin-left:15px;"]Currently

[div class="Image ImagButton hidden" style="Margin-left:15px;"]Image[/div]

[div class="Img Head"]

[/div] [div class="Tags hidden" style="margin-left:5px;"]Interacting: @tag
Mentioned: @ Tag
Located: Location; Action
[/div]

NAME

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at est et urna sollicitudin consectetur sed vitae magna. Sed ultricies dictum congue. Morbi vel justo mi. Vestibulum justo libero, suscipit sit amet lorem at, suscipit volutpat augue. Aliquam nec enim efficitur, feugiat ipsum ac, egestas ante. Donec ornare risus at tortor auctor viverra. Fusce sit amet cursus libero, at sodales urna. Aenean tempor accumsan porttitor. Maecenas ultrices volutpat est sollicitudin bibendum. Proin interdum eget enim in sodales. Nam faucibus varius quam ut malesuada. Nulla fringilla ligula erat, eu viverra velit tincidunt vel. Phasellus interdum quis nibh a finibus. Duis nec vestibulum mi, sed molestie turpis. Maecenas mollis blandit felis nec ultrices.​

[/div] Code by AgWordSmith [/div]

 

[AgWordSmith]

Spoiler: Code

[nobr][class=base]

background:white;

width:90%;

margin:10px auto;

padding:10px;


//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 put 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//

//the only color named by its name is White//


//this is the white background//

//or the base of the design//


[/class]

[class=hidden]

    display: none;


//this allows all the content I don't want to be

seen until clicked to be hidden,

or not on display until I code otherwise//


[/class]


[class=Img]

border:2px solid #000000;

line-height:0px;

margin-left:5px;

pointer-events:none;

//the border around the Image//

[/class]



[class=ImagButton]

background:#AA0101;

border-radius:5px;

margin:0px Auto;margin-right:5px;

padding:5px;

float:left;

Width:70%;

text-align:center;

float:left;

font-family:Book Antiqua;

color:White;


//The red buttons above the Images//


[/class]


[class name=ImagButton state=hover]

cursor:pointer;

Background-color:#48107E;

color:red;


//what the Imagebutton looks like//

// when a cursor hovers over it//


[/class]


[class=ImagButtonClick]

background:#330B5A;

border-radius:5px;

margin:10px Auto;

margin-right:5px;

padding:5px;

float:left;

Width:70%;

color:white;


//what the image button looks like when clicked on//

[/class]


[script class=ImagButton on=click]

    removeClass ImagButtonClick ImagButton

    addClass ImagButtonClick

//above allows the user to toggle between a clicked and non-clicked colored button//


set link (getText)

//above sets the link to what ever text I put on the button within a div//


    if (eq "${link}" "Currently") (hide Head)

    if (eq "${link}" "Currently") (show Tags)

    if (eq "${link}" "Currently") (show Image)

    if (eq "${link}" "Currently") (hide Current)

    if (eq "${link}" "Image") (show Head)

    if (eq "${link}" "Image") (hide Tags)

    if (eq "${link}" "Image") (show Current)

    if (eq "${link}" "Image") (hide Image)

// So this more or less translates to//

//if the div has the text "Currently" in it it's set as a link and when clicked it will hide the Head class (my image) and show the Tags class and the class named Image (the new button)//

//oh and below [br][/br] means to put a break in the code, like pressing the enter button. it's necessary since the beginning [nobr] means no breaks unless other wise told with that br code//

//for anyone who doesn't know//

[/script]


[div=background:url(https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX9371251.jpg);][br][/br]

[div class="Desktop base"][row][column=span3][/column][/row]

[row][column=span1][div class="Current ImagButton" style="Margin-left:15px;"]Currently[/div][div class="Image ImagButton hidden" style="Margin-left:15px;"]Image[/div]

[br][/br][br][/br]

[div class="Img Head"][/div]

[div class="Tags hidden" style="margin-left:5px;"][FONT=book antiqua]Interacting:[/FONT] @tag[br][/br]

[FONT=book antiqua]Mentioned:[/FONT] @ Tag[br][/br]

[FONT=book antiqua]Located: Location; Action[/FONT][br][/br]

[/div][/column][column=span6][FONT=book antiqua] NAME[/FONT]

[div=border-top:2px Solid #AA0101;][/div][br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at est et urna sollicitudin consectetur sed vitae magna. Sed ultricies dictum congue. Morbi vel justo mi. Vestibulum justo libero, suscipit sit amet lorem at, suscipit volutpat augue. Aliquam nec enim efficitur, feugiat ipsum ac, egestas ante. Donec ornare risus at tortor auctor viverra. Fusce sit amet cursus libero, at sodales urna. Aenean tempor accumsan porttitor. Maecenas ultrices volutpat est sollicitudin bibendum. Proin interdum eget enim in sodales. Nam faucibus varius quam ut malesuada. Nulla fringilla ligula erat, eu viverra velit tincidunt vel. Phasellus interdum quis nibh a finibus. Duis nec vestibulum mi, sed molestie turpis. Maecenas mollis blandit felis nec ultrices.

[br][/br]

[div=border-bottom:2px Solid #AA0101;margin-top:10px;][/div][/column][/row][br][/br]

[br][/br]

[/div]

[FONT=courier new] Code by[/FONT] [USER=44533]@AgWordSmith[/USER][/div]

[/nobr]

 

[AgWordSmith]

FREE TO USE JUST KEEP THE CREDITS MY GUY

Name: Stars
An older code I fixed up to look nicer

[class=Notes] //So this is an older code that i tried to fix up to look nicer// //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// //the only color named by its name is White// //DO NOT EDIT THE CODE IN RICH TEXT MODE// //This causes the Accordion title's to be moved down and you will have to move them back up yourself// [/class]

[class=notes] //so above is the background image// [/class]

[class=notes] //above is the white transparent background the "0.8" controls the opacity// [/class]

[class=notes] //The character image as well as the border for it// [/class]

NAME​

[class=notes] //The Name and the background for it// [/class]

Nickname:

Species:

Age:

Gender:

Sexuality:

Role: ​

[class=notes] //the transparent t box on the left and its border// [/class] Hair color:

Eye color:

Height:

Weight:

Body Type:

Zodiac:

Pet Peeve:

Mood:

[class=notes] //the transparent box on the right and its border// [/class] Likes:

Dislikes:

Strengths:

Weaknesses:

Relationships:

[class=notes] //the box around the accordions// //and in the slide title's I put a div around them to add the purple background// [/class]

Personality​

Text

Biography​

Text

code by AgWordSmith

 

[AgWordSmith]

Spoiler: code

[nobr]
[class=Notes]
//So this is an older code that i tried to fix up to look nicer//

//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//
//the only color named by its name is White//

//DO NOT EDIT THE CODE IN RICH TEXT MODE//
//This causes the Accordion title's to be moved down and you will have to move them back up yourself//
[/class]

[div=border: 5px SOLID #660006;
border-radius: 10px;
Background: url(https://media.giphy.com/media/10s421g4bUltFC/giphy.gif);
padding: 10px;
background-attachment: fixed;][br][/br]
[class=notes]
//so above is the background image//
[/class]

[Centerblock=80]
[div=background-color:rgba(255,255,255,0.8);
padding: 5px;
border-radius: 10px;]
[class=notes]
//above is the white transparent background the "0.8" controls the opacity//
[/class]

[row][column=span3]
[div=background-color:#000000;
pointer-events:none;
border-radius: 10px;
overflow:hidden;
border: 5px DOUBLE #660066;
line-height:0px;]
[IMG]https://cdn.discordapp.com/attachments/359734207024463882/380746961063510016/Victoria.jpg[/IMG][/div][/column]
[class=notes]
//The character image as well as the border for it//
[/class]

[column=span5][br][/br]
[div=float:center;background-color: #660066;border-radius: 20px;padding:5px;width:max;]
[CENTER][SIZE=5][COLOR=#ffffff]NAME[/COLOR][/SIZE][/CENTER]
[/div][br][/br]
[class=notes]
//The Name and the background for it//
[/class]

[CENTER][COLOR=#000000]Nickname: [/COLOR][br][/br]
[br][/br]
[COLOR=#000000]Species: [/COLOR][br][/br]
[br][/br]
[COLOR=#000000]Age: [/COLOR][br][/br]
[br][/br]
[COLOR=#000000]Gender: [/COLOR][br][/br]
[br][/br]
[COLOR=#000000]Sexuality: [/COLOR][br][/br]
[br][/br]
[COLOR=#000000]Role: [/COLOR][/CENTER]
[br][/br]
[/column][/row][/div]
[br][/br]

[row][column=span4]

[div=background-color:rgba(255,255,255, 0.8);
border: 2px SOLID #660066;
border-radius: 5px;
padding: 10px;]
[class=notes]
//the transparent t box on the left and its border//
[/class]

[COLOR=#000000][B]Hair color:[/B][/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B]Eye color:[/B] [/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B]Height:[/B][/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B]Weight: [/B][/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B]Body Type:[/B] [/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B]Zodiac:[/B][/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B]Pet Peeve:[/B][/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B]Mood:[/B] [/COLOR][br][/br]
[br][/br]
[/div][/column]
[column=span4]

[div=background-color:rgba(255,255,255,0.8);
border: 2px SOLID #660066;
border-radius: 5px;
padding: 10px;]
[class=notes]
//the transparent box on the right and its border//
[/class]

[COLOR=#000000][B]Likes: [/B][/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B] Dislikes:[/B] [/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B] Strengths:[/B][/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B] Weaknesses:[/B] [/COLOR][br][/br]
[br][/br]
[COLOR=#000000][B]Relationships:[/B] [/COLOR][br][/br]
[br][/br]
[/div][/column][/row]
[br][/br]

[div=background-color:rgba(255,255,255, 0.8);
border: 2px SOLID #660066
;border-radius: 5px
;padding: 10px;]
[class=notes]
//the box around the accordions//
//and in the slide title's I put a div around them to add the purple background//
[/class]
[accordion=100%]{slide=[div=float:center
;background-color: #660066;
border-radius: 20px;
padding:5px;
width:max;][CENTER][SIZE=5][COLOR=#ffffff]Personality[/COLOR][/SIZE][/CENTER]
[/div]}

[bg=#ffffff][br][/br]
[COLOR=#000000] Text[/COLOR][br][/br]
[/bg]
{/slide}[/accordion]

[accordion=100%]{slide=[div=background-color: #660066;
border-radius: 20px;
padding:5px;
width:max;][CENTER][SIZE=5][COLOR=#ffffff]Biography[/COLOR][/SIZE][/CENTER]
[/div]}

[bg=#ffffff][br][/br]
[COLOR=#000000] Text[/COLOR]
[br][/br]
[/bg]
{/slide}[/accordion][/div][br][/br]
[SIZE=1][COLOR=rgb(147, 101, 184)][FONT=courier new]code by [/FONT][/COLOR][USER=44533]@AgWordSmith[/USER][/SIZE]
[/Centerblock][/div][/nobr]

 

[AgWordSmith]

FREE TO USE JUST KEEP THE CREDITS GIRL

Name: IC Stars
An older code I fixed up to look nicer

[class=Notes] //So this is an older code that I tried to fix up to look nicer// //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 ente// // it will not show that you did. you'll have to use the
tags// [/class]

[class=Notes] //The background image// [/class]

[class=Notes] //the image in the cirlce and the border// [/class]

[class=Notes] //the transparent with background and the border and below is the text// [/class]

"There is something." Something could be done.​

[class=Notes] //Below is the purple box and the content meant for tags// [/class]

Interacting:
Located:
Mentioned:

code by AgWordSmith

 

[AgWordSmith]

Spoiler: code

[nobr]
[centerblock=75]
[class=Notes]
//So this is an older code that I tried to fix up to look nicer//

//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 ente//
// it will not show that you did. you'll have to use the [br][/br] tags//

[/class]
[div=
position: relative;
padding: 10px;
border: 5px SOLID #660006;
border-radius: 10px;
background:url(https://media.giphy.com/media/10s421g4bUltFC/giphy.gif);background-attachment: fixed;
box-sizing: border-box;
overflow: hidden;]
[class=Notes]
//The background image//
[/class][br][/br]

[div=
float:center;
margin: auto;
border-radius: 50%;
overflow:hidden;
background-color:#ffffff;
height:130px;
width:130px;
border: 3px solid #ffffff;][IMG]https://cdn.discordapp.com/attachments/359734207024463882/380746961063510016/Victoria.jpg[/IMG]
[/div]
[class=Notes]
//the image in the cirlce and the border//
[/class]
[br][/br]

[div=
position: relative;
background-color:rgba(255,255,255,0.8);
border:double 3px #000000;
border-radius:10px;
padding:10px;]
[class=Notes]
//the transparent with background and the border and below is the text//
[/class]
[br][/br]

[CENTER][COLOR=rgb(102, 0, 102)][FONT=Georgia]"There is something."[/FONT][/COLOR]
[COLOR=#000000]Something could be done.[/COLOR][/CENTER]
[br][/br]
[/div]
[br][/br]

[class=Notes]
//Below is the purple box and the content meant for tags//
[/class]
[div=padding: 10px;opacity:0.7; border: SOLID 1px #ffffff; background-color:#660066;border-radius:10px][FONT=Indie Flower] [COLOR=#ffffff][U]Interacting:[br][/br]
Located:[br][/br]
Mentioned:[/U][/COLOR] [/FONT]
[/div]
[SIZE=1][COLOR=rgb(147, 101, 184)][FONT=courier new]code by[/FONT][/COLOR] [USER=44533]@AgWordSmith[/USER][/SIZE]
[/div][/centerblock]

[/nobr]

 

[AgWordSmith]

Legacy Of Button Making

A fun little flip-book like animation thing

[class=button] background-color:Grey; Border-radius:5px; margin: 10px auto; text-align: center; width: 200px; padding:10px; font-family:Courier New; color:black; user-select:none; cursor:pointer; [/class] [class=hidden] display:none; [/class] [Script class=button] set addedClass 0 [/script] [Script class=button on=click] if (eq ${addedClass} 0) (show Kar) (hide Kar) if (eq ${addedClass} 0) (hide Kat) (show Kat) if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0) [/script]
[Div class="button Kar"]

YOU are APPROACHED by a CRABBY TROLL

He Babbles on about something you don't Understand
But CLICKING on him is rather fun[/div][Div class="button Kat hidden"]

YOU are APPROACHED by a CRABBY TROLL

He Babbles on about something you don't Understand
But CLICKING on him is rather fun
[/div]
[class=Gif]
background-color:Grey;
Border-radius:5px;
margin: 10px auto;
text-align: center;
width: 200px;
padding:10px;
font-family:Courier New;
color:black;]
[/class][div class=Gif]

Or you know a GIF could work

But Where's the FUN in that?
[/div]

 

[AgWordSmith]

Spoiler: Code 1

[nobr]
[class=button]
background-color:Grey;
Border-radius:5px;
margin: 10px auto;
text-align: center;
width: 200px;
padding:10px;
font-family:Courier New;
color:black;
user-select:none;
cursor:pointer;
[/class]

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

[Script class=button]
set addedClass 0
[/script]

[Script class=button on=click]
if (eq ${addedClass} 0) (show Kar) (hide Kar)
if (eq ${addedClass} 0) (hide Kat) (show Kat)
if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0)
[/script]
[/nobr]
[Div class="button Kar"][div=pointer-events:none;]YOU are APPROACHED by a CRABBY TROLL[img]https://cdn.discordapp.com/attachments/359734207024463882/411600676343382016/Frame_1.png[/img][/div]
He Babbles on about something you don't Understand
But CLICKING on him is rather fun[/div][Div class="button Kat hidden"][div=pointer-events:none;]YOU are APPROACHED by a CRABBY TROLL[img]https://cdn.discordapp.com/attachments/359734207024463882/411600673705033728/Frame_2.png[/img][/div]
He Babbles on about something you don't Understand
But CLICKING on him is rather fun
[/div]

Spoiler: Code 2

[class=Gif]
background-color:Grey;
Border-radius:5px;
margin: 10px auto;
text-align: center;
width: 200px;
padding:10px;
font-family:Courier New;
color:black;]
[/class][div class=Gif][div=pointer-events:none;]Or you know a GIF could work[img]https://cdn.discordapp.com/attachments/359734207024463882/411606683069186058/tumblr_inline_nc47h2ywrK1rw77sb.gif[/img][/div]
 But Where's the FUN in that?
[/div]

 

[AgWordSmith]

Karkat Loop

Not exactly what I wanted but turned out pretty cool
at this point I'm just messing around to see what I can and can't pull off

[class=Base] background-color:Grey; Border-radius:5px; margin: 10px auto; text-align: center; width:300px; padding:10px; font-family:Courier New; color:black; //grey Base// [/class] [class=button] background-color:Red; border-radius:5px; margin: 10px auto; width:80%; padding:5px; text-align:center; font-family:Courier New; color:silver; //red button// [/class] [class=button2] background-color:Red; border-radius:5px; margin: 10px auto; width:80%; padding:5px; text-align:center; font-family:Courier New; color:silver; //a second red button exactly like the first// [/class] [class=buttonClick] background-color:silver; border-radius:5px; margin: 10px auto; width:80%; padding:5px; text-align:center; font-family:Courier New; color:red; cursor:pointer; //what the button looks like when clicked// [/class] [class=hidden] display:none; //to hide elements until needed// [/class] [script class=button on=mouseenter] setText "Speak to him" addClass buttonClick //changes the text on Hover// [/script] [script class=button on=mouseleave] setText "What do you do?" removeClass buttonClick //puts text back when the mouse leaves the button// [/script] [script class=button on=click] addClass button removeClass buttonClick show Speak hide Quiet //Switches to the speaking Gif, words spoken and the second button// [/script] [script class=button2 on=mouseenter] setText "Leave" addClass buttonClick //Second button text switch on hover// [/script] [script class=button2 on=mouseleave] setText "What do you do?" removeClass buttonClick //putting back text wh nthe mouse leaves the button// [/script] [script class=button2 on=click] addClass button2 removeClass buttonClick show Quiet hide Speak //switches or loops back to the "begging"// [/script] [Div class=Base][Div class=Quiet]You APPROACH a CRABBY TROLL

He seems to be thinking [div class="button"]What do you do?[/div][/div] [div class="Speak hidden"]He starts to YELL

WHAT DO YOU THINK YOU ARE DOING?? CAN"T YOU SEE I'M BUSY!? [div class=button2]What do you Do?[/div] [/div] [/div]

 

[AgWordSmith]

Spoiler: Code

[nobr]
[class=Base]
background-color:Grey;
Border-radius:5px;
margin: 10px auto;
text-align: center;
width:300px;
padding:10px;
font-family:Courier New;
color:black;
//grey Base//
[/class]

[class=button]
background-color:Red;
border-radius:5px;
margin: 10px auto;
width:80%;
padding:5px;
text-align:center;
font-family:Courier New;
color:silver;
//red button//
[/class]

[class=button2]
background-color:Red;
border-radius:5px;
margin: 10px auto;
width:80%;
padding:5px;
text-align:center;
font-family:Courier New;
color:silver;
//a second red button exactly like the first//
[/class]

[class=buttonClick]
background-color:silver;
border-radius:5px;
margin: 10px auto;
width:80%;
padding:5px;
text-align:center;
font-family:Courier New;
color:red;
cursor:pointer;
//what the button looks like when clicked//
[/class]


[class=hidden]
display:none;
//to hide elements until needed//
[/class]

[script class=button on=mouseenter]
setText "Speak to him"
addClass buttonClick
//changes the text on Hover//
[/script]

[script class=button on=mouseleave]
setText "What do you do?"
removeClass buttonClick
//puts text back when the mouse leaves the button//
[/script]

[script class=button on=click]
addClass button
removeClass buttonClick
show Speak
hide Quiet
//Switches to the speaking Gif, words spoken and the second button//
[/script]

[script class=button2 on=mouseenter]
setText "Leave"
addClass buttonClick
//Second button text switch on hover//
[/script]

[script class=button2 on=mouseleave]
setText "What do you do?"
removeClass buttonClick
//putting back text when the mouse leaves the button//
[/script]

[script class=button2 on=click]
addClass button2
removeClass buttonClick
show Quiet
hide Speak
//switches or loops back to the "beginning"//
[/script]

[Div class=Base][Div class=Quiet]You  APPROACH a CRABBY TROLL
[div=pointer-events:none;][IMG]https://vignette.wikia.nocookie.net/vsbattles/images/9/9d/Karkat_talksprite.gif/revision/latest?cb=20150628131946[/IMG][/div]
[br][/br]
He seems to be thinking
[div class="button"]What do you do?[/div][/div]

[div class="Speak hidden"]He starts to YELL
[div=pointer-events:none;][IMG]https://cdn.discordapp.com/attachments/359734207024463882/411915446846226443/brows.gif[/IMG][/div]
[br][/br]
WHAT DO YOU THINK YOU ARE DOING?? CAN"T YOU SEE I'M BUSY!?
[div class=button2]What do you Do?[/div]
[/div]

[/div]
[/nobr]

 

[AgWordSmith]

FREE TO USE JUST KEEP THE CREDIT MISSY
------------------------------
Name: Simplicity
a simple code for simple times
The grey box is positioned in a way that if you put anything above the code it will float over that instead of the image
if any one knows how to fix this (Believe me I tried) that would be welcomed!
Fixed!

[class=wrap] position:relative; //allows everything to work// [/class] [class=Img] border:2px SOLID slategrey; border-radius:5px; line-height:none; Float:left; background-color:white; text-align:left; Z-index:1; //the image border// [/class] [class=Info] Background-color:rgba(47, 79, 79,0.9); border:2px SOLID darkslategrey; width:310px; Height:425px; border-radius:5px; padding:5px; z-index:2; Opacity:0.0; transition: opacity 0.5s ease-in 0.5s; //the dark grey box// //starts off transparent// [/class] [class name=Info state=hover] Opacity:1; transition: opacity 0.5s ease-in 0.5s; //allows the box to fade in when a cursor points over it// [/class] [div class=wrap][div class=Img]

Code by AgWordSmith [/div] [div class=Info style="position:absolute;Left:40px;Top:40px;text-align:center;"] NAME
AGE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros sapien, luctus eu nulla quis, ornare semper est. Nullam vitae massa volutpat, lobortis nisl ac, commodo nibh. Vestibulum tincidunt non ex at interdum. Vestibulum ac odio nec nunc rhoncus aliquet. Etiam ac fermentum quam. Praesent eget felis eget leo volutpat iaculis. Nam et pretium orci.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros sapien, luctus eu nulla quis, ornare semper est. Nullam vitae massa volutpat, lobortis nisl ac, commodo nibh. Vestibulum tincidunt non ex at interdum. Vestibulum ac odio nec nunc. [/div][/div]

 

[AgWordSmith]

Spoiler: Simplicity

[nobr]
[class=wrap]
position:relative;

//allows everything to work//
[/class]

[class=Img]
border:2px SOLID slategrey;
border-radius:5px;
line-height:none;
Float:left;
text-align:left;
Z-index:1;

//the image border//
[/class]

[class=Info]
Background-color:rgba(47, 79, 79,0.9);
border:2px SOLID darkslategrey;
width:310px;
Height:425px;
border-radius:5px;
padding:5px;
z-index:2;
Opacity:0.0;
transition: opacity 0.5s ease-in 0.5s;

//the dark grey box//
//starts off transparent//
[/class]


[class name=Info state=hover]
Opacity:1;
transition: opacity 0.5s ease-in 0.5s;

//allows the box to fade in when a cursor points over it//
[/class]

[div class=wrap][div class=Img][IMG]https://i.pinimg.com/originals/75/50/08/75500861c506afc526d4a14a1ea2a9f2.jpg[/IMG]
[br][/br][br][/br]
[SIZE=1][COLOR=rgb(147, 101, 184)][FONT=courier new]Code by[/FONT][/COLOR] [USER=44533]@AgWordSmith[/USER][/SIZE][/div]

[div class=Info style="position:absolute;Left:40px;Top:40px;text-align:center;"]

[FONT=book antiqua][COLOR=rgb(239, 239, 239)][SIZE=6]NAME[/SIZE][/COLOR][/FONT]
[br][/br]
[SIZE=5][FONT=book antiqua][COLOR=rgb(239, 239, 239)]AGE[/COLOR][/FONT][/SIZE]
[br][/br]
[FONT=book antiqua][COLOR=rgb(239, 239, 239)][SIZE=4]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros sapien, luctus eu nulla quis, ornare semper est. Nullam vitae massa volutpat, lobortis nisl ac, commodo nibh. Vestibulum tincidunt non ex at interdum. Vestibulum ac odio nec nunc rhoncus aliquet. Etiam ac fermentum quam. Praesent eget felis eget leo volutpat iaculis. Nam et pretium orci. [br][/br]
[br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros sapien, luctus eu nulla quis, ornare semper est. Nullam vitae massa volutpat, lobortis nisl ac, commodo nibh. Vestibulum tincidunt non ex at interdum. Vestibulum ac odio nec nunc. [/SIZE][/COLOR][/FONT]
[/div][/div][/nobr]

 

[AgWordSmith]

FREE TO USE JUST KEEP THE CREDIT MATE
------------------------------
Name: Pastel Slides

[Class=Wrap] Height:450px; width:70%; margin:0px Auto; overflow:hidden; transition: height 0.5s ease-in 0s; //This is the Height of the Accordions in Full View PLUS a closed accordion showwing at the bottom // //This will hided anything out side the Height Specified// [/class] [Class=AccHeading] border:2px SOLID white; border-radius:5px; color:white; padding:3px; margin:0px auto; text-align:center; background:url(https://cdn.discordapp.com/attachments/359734207024463882/414476705382531073/Shapes.PNG); //The Accordion Title and the neato box it's in// [/class] [Class=Accordion] position:relative; background-color:#B0C4DE; padding: 10px; Height:40px; margin:0px auto; z-index: 3; overflow:hidden; text-align:center; transition: height 0.5s ease-in 0s; //If you want to add more accordions just copy and paste this code and put a number behind the name// //just remember to adjust the Margin-top on hover, by adding -60px to it. // //The Container right now can Hold 5 accordion slides with out adjusting a single thing// //This is only if you want a 360px height for your full slide// [/class] [class name=Accordion state=hover] position:relative; Height:370px; z-index: 3; background-color: #DDA0DD; transition: height 0.5s ease-in 0s; //This makes the Accordion do its accordion thing when a cursor hovers over the title// [/class] [Class=Accordion2] position:relative; background-color:#B0C4DE; padding: 10px; Height:40px; margin:0px auto; overflow:hidden; z-index: 5; text-align:center; transition: margin-top 0.5s ease 0s, height 0.5s ease 0.0s; //the Second Accordion// [/class] [class name=Accordion2 state=hover] position:relative; Height:370px; Margin-top:-60px; z-index: 5; background-color: #DDA0DD; transition: Margin-top 0.5s ease 0.0s, height 0.5s ease 0.5s, [/class] [Class=Accordion3] position:relative; background-color:#B0C4DE; padding: 10px; Height:40px; margin:0px auto; overflow:hidden; z-index: 7; text-align:center; transition: Margin-top 0.5s ease 0s,height 0.5s ease 0.0s; //the Third Accordion// [/class] [class name=Accordion3 state=hover] position:relative; Height:370px; Margin-top:-120px; z-index: 7; background-color: #DDA0DD; transition:Margin-top 0.5s ease 0.0s, height 0.5s ease 0.5s, [/class] [Class=Accordion4] position:relative; background-color:#B0C4DE; padding: 10px; Height:40px; margin:0px auto; overflow:hidden; z-index: 9; text-align:center; transition: Margin-top 0.5s ease 0s,height 0.5s ease 0.0s; //the Fourth Accordion// [/class] [class name=Accordion4 state=hover] position:relative; Height:370px; Margin-top:-180px; z-index: 9; background-color: #DDA0DD; transition:Margin-top 0.5s ease 0.0s, height 0.5s ease 0.5s, [/class] [Class=Accordion5] position:relative; background-color:#B0C4DE; padding: 10px; Height:50px; margin:0px auto; overflow:hidden; z-index: 11; text-align:center; transition: Margin-top 0.5s ease 0s,height 0.5s ease 0.0s; //the Fifth Accordion// [/class] [class name=Accordion5 state=hover] position:relative; Height:370px; Margin-top:-240px; z-index: 11; background-color: #DDA0DD; transition:Margin-top 0.5s ease 0.0s, height 0.5s ease 0.5s, [/class] [div class=Wrap][div class=Accordion][div class=AccHeading]Heading 1[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac vestibulum felis. Sed at diam at leo imperdiet finibus. Quisque eu nisl maximus, molestie lacus a, luctus neque. Suspendisse potenti. Phasellus imperdiet mauris leo, sed gravida turpis varius non. Mauris eget turpis in leo sollicitudin interdum quis sed leo. Curabitur elementum, est sed tincidunt varius, sapien justo cursus metus, sed viverra velit massa in tellus. Sed et quam velit. Nunc non auctor tellus. Maecenas felis nulla, hendrerit et elit non, auctor blandit eros. Donec eu nunc orci. Mauris aliquam, ex a fermentum fermentum, est eros euismod arcu, ac interdum turpis nisi quis tortor. In facilisis ex nulla, at faucibus ante convallis vel.

[/div] [div class=Accordion2][div class=AccHeading]Heading 2[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac vestibulum felis. Sed at diam at leo imperdiet finibus. Quisque eu nisl maximus, molestie lacus a, luctus neque. Suspendisse potenti. Phasellus imperdiet mauris leo, sed gravida turpis varius non. Mauris eget turpis in leo sollicitudin interdum quis sed leo. Curabitur elementum, est sed tincidunt varius, sapien justo cursus metus, sed viverra velit massa in tellus. Sed et quam velit. Nunc non auctor tellus. Maecenas felis nulla, hendrerit et elit non, auctor blandit eros. Donec eu nunc orci. Mauris aliquam, ex a fermentum fermentum, est eros euismod arcu, ac interdum turpis nisi quis tortor. In facilisis ex nulla, at faucibus ante convallis vel.

[/div] [div class=Accordion3][div class=AccHeading]Heading 3[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac vestibulum felis. Sed at diam at leo imperdiet finibus. Quisque eu nisl maximus, molestie lacus a, luctus neque. Suspendisse potenti. Phasellus imperdiet mauris leo, sed gravida turpis varius non. Mauris eget turpis in leo sollicitudin interdum quis sed leo. Curabitur elementum, est sed tincidunt varius, sapien justo cursus metus, sed viverra velit massa in tellus. Sed et quam velit. Nunc non auctor tellus. Maecenas felis nulla, hendrerit et elit non, auctor blandit eros. Donec eu nunc orci. Mauris aliquam, ex a fermentum fermentum, est eros euismod arcu, ac interdum turpis nisi quis tortor. In facilisis ex nulla, at faucibus ante convallis vel.

[/div]

[div class=Accordion4][div class=AccHeading]Heading 4[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac vestibulum felis. Sed at diam at leo imperdiet finibus. Quisque eu nisl maximus, molestie lacus a, luctus neque. Suspendisse potenti. Phasellus imperdiet mauris leo, sed gravida turpis varius non. Mauris eget turpis in leo sollicitudin interdum quis sed leo. Curabitur elementum, est sed tincidunt varius, sapien justo cursus metus, sed viverra velit massa in tellus. Sed et quam velit. Nunc non auctor tellus. Maecenas felis nulla, hendrerit et elit non, auctor blandit eros. Donec eu nunc orci. Mauris aliquam, ex a fermentum fermentum, est eros euismod arcu, ac interdum turpis nisi quis tortor. In facilisis ex nulla, at faucibus ante convallis vel.

[/div] [div class=Accordion5][div class=AccHeading]Heading 5[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac vestibulum felis. Sed at diam at leo imperdiet finibus. Quisque eu nisl maximus, molestie lacus a, luctus neque. Suspendisse potenti. Phasellus imperdiet mauris leo, sed gravida turpis varius non. Mauris eget turpis in leo sollicitudin interdum quis sed leo. Curabitur elementum, est sed tincidunt varius, sapien justo cursus metus, sed viverra velit massa in tellus. Sed et quam velit. Nunc non auctor tellus. Maecenas felis nulla, hendrerit et elit non, auctor blandit eros. Donec eu nunc orci. Mauris aliquam, ex a fermentum fermentum, est eros euismod arcu, ac interdum turpis nisi quis tortor. In facilisis ex nulla, at faucibus ante convallis vel.

[/div] Code by AgWordSmith [/div]

 

[AgWordSmith]

Spoiler: Pastel Slides Code

[nobr]
[Class=Wrap]
Height:450px;
width:70%;
margin:0px Auto;
overflow:hidden;
transition: height 0.5s ease-in 0s;

//This is  the Height of the Accordions in Full View PLUS a closed accordion showwing at the bottom //
//This will hided anything out side the Height Specified//
[/class]

[Class=AccHeading]
border:2px SOLID white;
border-radius:5px;
color:white;
padding:3px;
margin:0px auto;
text-align:center;
background:url(https://cdn.discordapp.com/attachments/359734207024463882/414476705382531073/Shapes.PNG);

//The Accordion Title and the neato box it's in//
[/class]

[Class=Accordion]
position:relative;
background-color:#B0C4DE;
padding: 10px;
Height:40px;
margin:0px auto;
z-index: 3;
overflow:hidden;
text-align:center;
transition: height 0.5s ease-in 0s;

//If you want to add more accordions just copy and paste this code and put a number behind the name//
//just remember to adjust the Margin-top on hover, by adding -60px to it. //
//The Container right now can Hold 5 accordion slides with out adjusting a single thing//
//This is only if you want a 360px height for your full slide//

[/class]

[class name=Accordion state=hover]
position:relative;
Height:370px;
z-index: 3;
background-color:     #DDA0DD;
transition: height 0.5s ease-in 0s;

//This makes the Accordion do its accordion thing when a cursor hovers over the title//
[/class]

[Class=Accordion2]
position:relative;
background-color:#B0C4DE;
padding: 10px;
Height:40px;
margin:0px auto;
overflow:hidden;
z-index: 5;
text-align:center;
transition:  margin-top 0.5s ease 0s, height 0.5s ease 0.0s;

//the Second Accordion//
[/class]

[class name=Accordion2 state=hover]
position:relative;
Height:370px;
Margin-top:-60px;
z-index: 5;
background-color:     #DDA0DD;
transition: Margin-top 0.5s ease 0.0s, height 0.5s ease 0.5s,
[/class]

[Class=Accordion3]
position:relative;
background-color:#B0C4DE;
padding: 10px;
Height:40px;
margin:0px auto;
overflow:hidden;
z-index: 7;
text-align:center;
transition:  Margin-top 0.5s ease 0s,height 0.5s ease 0.0s;

//the Third Accordion//
[/class]

[class name=Accordion3 state=hover]
position:relative;
Height:370px;
Margin-top:-120px;
z-index: 7;
background-color:     #DDA0DD;
transition:Margin-top 0.5s ease 0.0s, height 0.5s ease 0.5s,
[/class]

[Class=Accordion4]
position:relative;
background-color:#B0C4DE;
padding: 10px;
Height:40px;
margin:0px auto;
overflow:hidden;
z-index: 9;
text-align:center;
transition:  Margin-top 0.5s ease 0s,height 0.5s ease 0.0s;

//the Fourth Accordion//
[/class]

[class name=Accordion4 state=hover]
position:relative;
Height:370px;
Margin-top:-180px;
z-index: 9;
background-color:     #DDA0DD;
transition:Margin-top 0.5s ease 0.0s, height 0.5s ease 0.5s,
[/class]

[Class=Accordion5]
position:relative;
background-color:#B0C4DE;
padding: 10px;
Height:50px;
margin:0px auto;
overflow:hidden;
z-index: 11;
text-align:center;
transition:  Margin-top 0.5s ease 0s,height 0.5s ease 0.0s;

//the Fifth Accordion//
[/class]

[class name=Accordion5 state=hover]
position:relative;
Height:370px;
Margin-top:-240px;
z-index: 11;
background-color:     #DDA0DD;
transition:Margin-top 0.5s ease 0.0s, height 0.5s ease 0.5s,
[/class]


[div class=Wrap][div class=Accordion][div class=AccHeading][SIZE=7][font=macondo]Heading 1[/font][/SIZE][/div]

[row][column=span4][div=margin-right:10px;][IMG]https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png[/IMG][/div][/column][column=span4]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac vestibulum felis. Sed at diam at leo imperdiet finibus. Quisque eu nisl maximus, molestie lacus a, luctus neque. Suspendisse potenti. Phasellus imperdiet mauris leo, sed gravida turpis varius non. Mauris eget turpis in leo sollicitudin interdum quis sed leo. Curabitur elementum, est sed tincidunt varius, sapien justo cursus metus, sed viverra velit massa in tellus. Sed et quam velit. Nunc non auctor tellus. Maecenas felis nulla, hendrerit et elit non, auctor blandit eros. Donec eu nunc orci. Mauris aliquam, ex a fermentum fermentum, est eros euismod arcu, ac interdum turpis nisi quis tortor. In facilisis ex nulla, at faucibus ante convallis vel.[/column][/row]
[/div]

[div class=Accordion2][div class=AccHeading][SIZE=7][font=macondo]Heading 2[/font][/SIZE][/div][br][/br]

[row][column=span4][div=margin-right:10px;][IMG]https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png[/IMG][/div]][/column][column=span4]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac vestibulum felis. Sed at diam at leo imperdiet finibus. Quisque eu nisl maximus, molestie lacus a, luctus neque. Suspendisse potenti. Phasellus imperdiet mauris leo, sed gravida turpis varius non. Mauris eget turpis in leo sollicitudin interdum quis sed leo. Curabitur elementum, est sed tincidunt varius, sapien justo cursus metus, sed viverra velit massa in tellus. Sed et quam velit. Nunc non auctor tellus. Maecenas felis nulla, hendrerit et elit non, auctor blandit eros. Donec eu nunc orci. Mauris aliquam, ex a fermentum fermentum, est eros euismod arcu, ac interdum turpis nisi quis tortor. In facilisis ex nulla, at faucibus ante convallis vel.[/column][/row]
[/div]

[div class=Accordion3][div class=AccHeading][SIZE=7][font=macondo]Heading 3[/font][/SIZE][/div][br][/br]

[row][column=span4][div=width:350px;margin-right:10px;float:left;][IMG]https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png[/IMG][/div][/column][column=span4]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac vestibulum felis. Sed at diam at leo imperdiet finibus. Quisque eu nisl maximus, molestie lacus a, luctus neque. Suspendisse potenti. Phasellus imperdiet mauris leo, sed gravida turpis varius non. Mauris eget turpis in leo sollicitudin interdum quis sed leo. Curabitur elementum, est sed tincidunt varius, sapien justo cursus metus, sed viverra velit massa in tellus. Sed et quam velit. Nunc non auctor tellus. Maecenas felis nulla, hendrerit et elit non, auctor blandit eros. Donec eu nunc orci. Mauris aliquam, ex a fermentum fermentum, est eros euismod arcu, ac interdum turpis nisi quis tortor. In facilisis ex nulla, at faucibus ante convallis vel.
[/div][/column][/row]

[div class=Accordion4][div class=AccHeading][SIZE=7][font=macondo]Heading 4[/font][/SIZE][/div][br][/br]
[row][column=span4][div=margin-right:10px;][IMG]https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png[/IMG][/div][/column][column=span4]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac vestibulum felis. Sed at diam at leo imperdiet finibus. Quisque eu nisl maximus, molestie lacus a, luctus neque. Suspendisse potenti. Phasellus imperdiet mauris leo, sed gravida turpis varius non. Mauris eget turpis in leo sollicitudin interdum quis sed leo. Curabitur elementum, est sed tincidunt varius, sapien justo cursus metus, sed viverra velit massa in tellus. Sed et quam velit. Nunc non auctor tellus. Maecenas felis nulla, hendrerit et elit non, auctor blandit eros. Donec eu nunc orci. Mauris aliquam, ex a fermentum fermentum, est eros euismod arcu, ac interdum turpis nisi quis tortor. In facilisis ex nulla, at faucibus ante convallis vel.[/column][/row]
[/div]

[div class=Accordion5][div class=AccHeading][SIZE=7][font=macondo]Heading 5[/font][/SIZE][/div][br][/br]
[row][column=span4][div=margin-right:10px;][IMG]https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png[/IMG][/div][/column][column=span4]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac vestibulum felis. Sed at diam at leo imperdiet finibus. Quisque eu nisl maximus, molestie lacus a, luctus neque. Suspendisse potenti. Phasellus imperdiet mauris leo, sed gravida turpis varius non. Mauris eget turpis in leo sollicitudin interdum quis sed leo. Curabitur elementum, est sed tincidunt varius, sapien justo cursus metus, sed viverra velit massa in tellus. Sed et quam velit. Nunc non auctor tellus. Maecenas felis nulla, hendrerit et elit non, auctor blandit eros. Donec eu nunc orci. Mauris aliquam, ex a fermentum fermentum, est eros euismod arcu, ac interdum turpis nisi quis tortor. In facilisis ex nulla, at faucibus ante convallis vel.[/column][/row]
[/div]

[SIZE=1][COLOR=rgb(147, 101, 184)][FONT=courier new]Code by[/FONT][/COLOR] [USER=44533]@AgWordSmith[/USER][/SIZE]
[/div]
[/nobr]

 

[AgWordSmith]

Simplicity has been revised! the positioning problem has been fixed!

 

[birdup]

Spoiler: Car

 

[birdup]

Spoiler: Song

 

[AgWordSmith]

Um, what?
birdup

 

[birdup]

AgWordSmith

oh sorry
I'm completely new to coding, so when I read "free for all" and misread the "do whatever you want", I assumed this was the ideal place for me to try out new things. In this case, spoilers ...

I'll delete my stuff soon!