[class=Title]
font-family:'Oldenburg';
font-size:20px;
text-align:center;
[/class]
[div class="Title"]Welcome to Kolan and the Guild Wars![/div]
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature currently requires accessing the site using the built-in Safari browser.
User | Total |
---|---|
animegirl20 | 1 |
Roleplay Skittle | 1 |
Fenris | 1 |
shadowz1995 | 2 |
Zer0 | 1 |
Elenion Aura | 1 |
Phayne | 1 |
AI10100 | 1 |
Katsuya | 1 |
AgWordSmith | 3 |
LazyDaze | 1 |
DapperCat | 1 |
Jean Beaucant | 1 |
Clausewitz Halcyon | 1 |
[nobr]
[comment][font=oldenburg]Do Not Remove, if you want to change/add fonts change/add it here[/font][/comment]
[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.//
//The only named colors are Black, White and Silver//
// 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//
//the font is called Oldenburg, if you wish to change it look for that and replace it//
[/class]
[class=BG]
background-color: #ece7dc;
color:black;
font-family:Oldenburg;
padding: 10px 20px 10px 20px;
text-align:center;
font-size:20px;
//The back ground and default text//
[/class]
[class=TitleContainer]
display: flex;
flex-direction: row;
justify-content: space-between;
align-items:center;
//allows the title ends to work//
[/class]
[class=Title]
flex-grow: 2;
border-bottom: solid 3px #102f7e;
border-top: solid 3px #102f7e;
border-radius:5px;
background-color: #102f7e;
color: silver;
font-size: 25px;
line-height: 2;
text-align:center;
font-family:Oldenburg;
letter-spacing:3px;
text-transform: uppercase;
//the big fancy title//
[/class]
[class=Tborder]
border-top: 1px SOLID silver;
border-bottom: 1px SOLID silver;
border-radius:5px;
padding:7px;
margin:5px 0px 5px 0px;
//the little borders inside the title//
[/class]
[class=Ribbon1]
border-bottom: solid 35px #142551;
border-top: solid 35px #142551;
border-left: solid 20px #ece7dc;
border-right: solid 20px #142551;
//the left triangles to make it look like a ribbon//
[/class]
[class=Ribbon2]
border-bottom: solid 35px #142551;
border-top: solid 35px #142551;
border-right: solid 30px #ece7dc;
border-left: solid 20px #142551;
//the right triangles to make it look like a ribbon//
[/class]
[class=Left]
margin-left:20px;
pointer-events:none;
opacity:0.8;
width:55px;
height:45px;
line-height:0px;
background:url(https://cdn.discordapp.com/attachments/359734207024463882/421698718442717205/White_Raven.png);
background-size:100% 100%;
//crest on the left of the title//
[/class]
[class=Right]
pointer-events:none;
margin-right:20px;
opacity:0.8;
width:55px;
height:45px;
line-height:0px;
float:right;
background:url(https://cdn.discordapp.com/attachments/359734207024463882/421698718442717205/White_Raven.png);
background-size:100% 100%;
//crest on the right of the title//
[/class]
[class=FlagBar]
height:15px;
width:85%;
min-width:210px;
border:2px SOLID #142551;
border-radius:5px;
background-color:#142551;
margin:auto;
//the bar on the top of the flags//
[/class]
[class=Flag]
background-color:#102f7e;
width:80%;
font-family: Oldenburg;
Font-size: 85%;
Text-align:center;
color:silver;
margin:auto;
padding:3px 3px 50px 3px;
//the flag that contains the images//
[/class]
[class=FlagEnd]
width:81%;
margin:auto;
line-height:0px;
border-left:1px SOLID #102f7e;
border-right:1px SOLID #102f7e;
//allows the flag end pic to fit//
[/class]
[class=IMG]
pointer-events:none;
line-height:0px;
width:70%;
margin:20px auto;
border-radius:20px;
overflow:hidden;
//The character images//
[/class]
[class=hidden]
display:none;
//keeps hidden things hidden//
[/class]
[class=ButtonContainer]
display: flex;
flex-wrap:wrap;
flex-direction: row;
justify-content:center;
align-items:center;
//allows the buttons to be on one line together
instead of one line for each//
[/class]
[class=Button]
color: silver;
line-height: 1.5;
text-align:center;
font-family:Oldenburg;
border-top: 1px SOLID silver;
border-bottom: 1px SOLID silver;
padding:4px;
margin: 20px 10px 0px 10px;
cursor:pointer;
//The buttons in the flag//
[/class]
[class name=Button state=hover]
color: grey;
border-top: 1px SOLID Grey;
border-bottom: 1px SOLID Grey;
//what the button looks like when the mouse is over it//
[/class]
[class=ButtonClick]
color: grey;
line-height: 1.5;
text-align:center;
font-family:Oldenburg;
border-top: 1px SOLID Grey;
border-bottom: 1px SOLID Grey;
padding:4px;
margin: 20px 10px 0px 10px;
//what the button looks like after it's clicked
also to show which picture is currently selected//
[/class]
[script class=Button on=click]
//This allows the buttons to work, if you want to add a button
//you have to add a line of code for it here
//the text in the " " has to match the text in the buttons to work
//to add more Images just keep adding the class IMG# and add 1 number up
// if (eq "${link}" "Opt 3") (show IMG3)
//like so
hide IMG
removeClass ButtonClick Button
addClass ButtonClick
set link (getText)
if (eq "${link}" "Appearance") (show DEFAULT)
if (eq "${link}" "Opt 2") (show IMG2)
if (eq "${link}" "Weapon") (show WEAPON)
if (eq "${link}" "Weapon 2") (show WEAPON2)
if (eq "${link}" "Armor") (show ARMOR)
[/script]
[class=Details]
font-family:Oldenburg;
font-size:20px;
color:silver;
background-color:#102f7e;
width:200px;
margin:auto;
padding:5px;
cursor:pointer;
//the litle flag for the details//
[/class]
[class=DetailsBottom]
width:0%;
margin:auto;
margin-bottom:30px;
border-top: 30px solid #102f7e;
border-Left: 105px solid transparent;
border-Right: 105px solid transparent;
//the triangle for the bottom of the details flag//
[/class]
[class=Space]
width:80%;
margin:auto;
//manages space//
[/class]
[class=DetailsClose]
width:0%;
margin:auto;
border-Bottom: 30px solid #102f7e;
border-Left: 105px solid transparent;
border-Right: 105px solid transparent;
[/class]
[script class=Details on=click]
//this is what makes the details flag stuff work//
set link (getText)
if (eq "${link}" "Details") (slideDown 500 Deets)
if (eq "${link}" "Details") (slideUp 500 Open)
if (eq "${link}" "Details") (slideDown 500 Close)
if (eq "${link}" "Close") (slideUp 500 Deets)
if (eq "${link}" "Close") (slideDown 500 Open)
if (eq "${link}" "Close") (slideUp 500 Close)
[/script]
[class=Stamp]
pointer-events:none;
line-height:0px;
width:10%;
margin:10px auto;
overflow:hidden;
//the guild committee seal of approval//
[/class]
[div class=BG]
[div class=TitleContainer]
[div class=Ribbon1][/div]
[div class=Title][div class=Tborder]
[row][column=span1]
[div class=Left][/div]
[/column][column=span6]
RAVEN GUILD APPLICATION
[/column][column=span1]
[div class=Right][/div]
[/column][/row]
[/div][/div]
[div class=Ribbon2][/div]
[/div]
[br][/br][br][/br]
[row][column=span3]
[div class=FlagBar][/div]
[div class=Flag]
[comment] if you want to add an image here just make sure t add a IMG# (one number up) here: class="IMG IMG3"
and be sure to follow the instructions above to add the buttons correctly
be sure to copy and paste another button below and be sure to keep the same name there as it is in the button code way above
[/comment]
[div class="IMG DEFAULT"]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595380742322913299/placeholder.jpg[/IMG]
[/div]
[div class="hidden IMG IMG2 "]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595381159312097280/placeholder-600x400.png[/IMG]
[/div]
[div class="hidden IMG WEAPON"]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595380742322913299/placeholder.jpg[/IMG]
[/div]
[div class="hidden IMG WEAPON2"]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595381159312097280/placeholder-600x400.png[/IMG]
[/div]
[div class="hidden IMG ARMOR"]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595380742322913299/placeholder.jpg[/IMG]
[/div]
[div class=ButtonContainer]
[div class=Button]Appearance[/div]
[div class=Button]Opt 2[/div]
[div class=Button]Weapon[/div]
[div class=Button]Weapon 2[/div]
[div class=Button]Armor[/div]
[/div]
[/div]
[Div class=FlagEnd]
[img]https://cdn.discordapp.com/attachments/535146287876538379/593647813657755648/flag.png[/img]
[/div]
[/column][column=span5]
[div class=Space]
[br][/br]
[B]Name: [/B]
[br][/br]
[br][/br]
[B]True Age: [/B]
[br][/br]
[br][/br]
[B]Appearance Age: [/B]
[br][/br]
[br][/br]
[B]Gender: [/B]
[br][/br]
[br][/br]
[B]Species: [/B]
[br][/br]
[br][/br]
[B]Class: [/B] (Base Class; Subclass)
[br][/br]
[br][/br]
[B]Distinguishing features: [/B]
[br][/br]
[br][/br]
[B]Preferred weapon(s): [/B] (Two types)
[br][/br]
[br][/br]
[B]Preferred Type(s) of Magic: [/B] (Top four types maximum)
[br][/br]
[/div]
[/column]
[/row]
[br][/br][br][/br]
[div class=FlagBar][/div]
[div class="Open"][div class=Details]Details[/div]
[div class=DetailsBottom][/div]
[/div]
[div class="Deets Space hidden" style="Padding: 20px 0px 20px 0px;"]
[b]Skills:[/b][br][/br]
[br][/br]
[br][/br]
[b]Personality:[/b][br][/br]
[br][/br]
[br][/br]
[b]History:[/b][br][/br]
[br][/br](include where they came from and how they end up in Kolan if they are not from there)
[br][/br]
[/div]
[div class="Close hidden"]
[div class=DetailsClose style="margin-top:20px;"][/div]
[div class=Details]Close[/div]
[div class=FlagBar][/div]
[/div]
[br][/br]
[div class=Space]
[b]Views on the Hekaspectrum:[/b][br][/br]
[br][/br][br][/br]
[b]Reason for joining the Raven Guild:[/b][br][/br]
[/div]
[br][/br]
[div class=Stamp]
[img]https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/8/85/Flourish-horizontal-symbol-fancy-page-break-page-break-clip-art-640_320.png/revision/latest?cb=20170410033005[/img]
[/div]
[div class=TitleContainer]
[div class=Ribbon1][/div]
[div class=Title style="font-size:20px;line-height:2.5;"][div class=Tborder]
[row][column=span1]
[div class=Left][/div]
[/column][column=span6]
Official Document of the Kolan Guild Committee
[/column][column=span1]
[div class=Right][/div]
[/column][/row]
[/div][/div]
[div class=Ribbon2][/div]
[/div]
[/div]
[/nobr]
[nobr]
[comment][font=oldenburg]Do Not Remove, if you want to change/add fonts change/add it here[/font][/comment]
[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.//
//The only named colors are Black and White //
// 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//
//the font is called Oldenburg, if you wish to change it look for that and replace it//
[/class]
[class=BG]
background-color: #ece7dc;
color:black;
font-family:Oldenburg;
padding: 10px 20px 10px 20px;
text-align:center;
font-size:20px;
//The back ground and default text//
[/class]
[class=TitleContainer]
display: flex;
flex-direction: row;
justify-content: space-between;
align-items:center;
//allows the title ends to work//
[/class]
[class=Title]
flex-grow: 2;
border-bottom: solid 3px #35a22f;
border-top: solid 3px #35a22f;
border-radius:5px;
background-color: #35a22f;
color: #f8cc2d;
font-size: 25px;
line-height: 2;
text-align:center;
font-family:Oldenburg;
letter-spacing:3px;
text-transform: uppercase;
//the big fancy title//
[/class]
[class=Tborder]
border-top: 1px SOLID #f8cc2d;
border-bottom: 1px SOLID #f8cc2d;
border-radius:5px;
padding:7px;
margin:5px 0px 5px 0px;
//the little borders inside the title//
[/class]
[class=Ribbon1]
border-bottom: solid 35px #094c06;
border-top: solid 35px #094c06;
border-left: solid 20px #ece7dc;
border-right: solid 20px #094c06;
//the left triangles to make it look like a ribbon//
[/class]
[class=Ribbon2]
border-bottom: solid 35px #094c06;
border-top: solid 35px #094c06;
border-right: solid 30px #ece7dc;
border-left: solid 20px #094c06;
//the right triangles to make it look like a ribbon//
[/class]
[class=Left]
margin-left:20px;
pointer-events:none;
opacity:0.8;
width:35px;
height:50px;
line-height:0px;
background:url(https://cdn.discordapp.com/attachments/535146287876538379/595369868136808466/Gold_Wolf_Left.png);
background-size:100% 100%;
//crest on the left of the title//
[/class]
[class=Right]
pointer-events:none;
margin-right:20px;
opacity:0.8;
width:35px;
height:50px;
line-height:0px;
float:right;
background:url(https://cdn.discordapp.com/attachments/535146287876538379/595369754554925069/Gold_Wolf.png);
background-size:100% 100%;
//crest on the right of the title//
[/class]
[class=FlagBar]
height:15px;
width:85%;
min-width:210px;
border:2px SOLID #094c06;
border-radius:5px;
background-color:#094c06;
margin:auto;
//the bar on the top of the flags//
[/class]
[class=Flag]
background-color:#35a22f;
width:80%;
font-family: Oldenburg;
Font-size: 85%;
Text-align:center;
color:silver;
margin:auto;
padding:3px 3px 50px 3px;
//the flag that contains the images//
[/class]
[class=FlagEnd]
width:81%;
margin:auto;
line-height:0px;
border-left:1px SOLID #35a22f;
border-right:1px SOLID #35a22f;
//allows the flag end pic to fit//
[/class]
[class=IMG]
pointer-events:none;
line-height:0px;
width:70%;
margin:20px auto;
border-radius:20px;
overflow:hidden;
//The character images//
[/class]
[class=hidden]
display:none;
//keeps hidden things hidden//
[/class]
[class=ButtonContainer]
display: flex;
flex-wrap:wrap;
flex-direction: row;
justify-content:center;
align-items:center;
//allows the buttons to be on one line together
instead of one line for each//
[/class]
[class=Button]
color: #f8cc2d;
line-height: 1.5;
text-align:center;
font-family:Oldenburg;
border-top: 1px SOLID #f8cc2d;
border-bottom: 1px SOLID #f8cc2d;
padding:4px;
margin: 20px 10px 0px 10px;
cursor:pointer;
//The buttons in the flag//
[/class]
[class name=Button state=hover]
color: #c39b0e;
border-top: 1px SOLID #c39b0e;
border-bottom: 1px SOLID #c39b0e;
//what the button looks like when the mouse is over it//
[/class]
[class=ButtonClick]
color: #c39b0e;
line-height: 1.5;
text-align:center;
font-family:Oldenburg;
border-top: 1px SOLID #c39b0e;
border-bottom: 1px SOLID #c39b0e;
padding:4px;
margin: 20px 10px 0px 10px;
//what the button looks like after it's clicked
also to show which picture is currently selected//
[/class]
[script class=Button on=click]
//This allows the buttons to work, if you want to add a button
//you have to add a line of code for it here
//the text in the " " has to match the text in the buttons to work
//to add more Images just keep adding the class IMG# and add 1 number up
// if (eq "${link}" "Opt 3") (show IMG3)
//like so
hide IMG
removeClass ButtonClick Button
addClass ButtonClick
set link (getText)
if (eq "${link}" "Appearance") (show DEFAULT)
if (eq "${link}" "Opt 2") (show IMG2)
if (eq "${link}" "Weapon") (show WEAPON)
if (eq "${link}" "Weapon 2") (show WEAPON2)
if (eq "${link}" "Armor") (show ARMOR)
[/script]
[class=Details]
font-family:Oldenburg;
font-size:20px;
color:#f8cc2d;
background-color:#35a22f;
width:200px;
margin:auto;
padding:5px;
cursor:pointer;
//the litle flag for the details//
[/class]
[class=DetailsBottom]
width:0%;
margin:auto;
margin-bottom:30px;
border-top: 30px solid #35a22f;
border-Left: 105px solid transparent;
border-Right: 105px solid transparent;
//the triangle for the bottom of the details flag//
[/class]
[class=Space]
width:80%;
margin:auto;
//manages space//
[/class]
[class=DetailsClose]
width:0%;
margin:auto;
border-Bottom: 30px solid #35a22f;
border-Left: 105px solid transparent;
border-Right: 105px solid transparent;
[/class]
[script class=Details on=click]
//this is what makes the details flag stuff work//
set link (getText)
if (eq "${link}" "Details") (slideDown 500 Deets)
if (eq "${link}" "Details") (slideUp 500 Open)
if (eq "${link}" "Details") (slideDown 500 Close)
if (eq "${link}" "Close") (slideUp 500 Deets)
if (eq "${link}" "Close") (slideDown 500 Open)
if (eq "${link}" "Close") (slideUp 500 Close)
[/script]
[class=Stamp]
pointer-events:none;
line-height:0px;
width:10%;
margin:10px auto;
overflow:hidden;
//the guild committee seal of approval//
[/class]
[div class=BG]
[div class=TitleContainer]
[div class=Ribbon1][/div]
[div class=Title][div class=Tborder]
[row][column=span1]
[div class=Left][/div]
[/column][column=span6]
WOLF GUILD APPLICATION
[/column][column=span1]
[div class=Right][/div]
[/column][/row]
[/div][/div]
[div class=Ribbon2][/div]
[/div]
[br][/br][br][/br]
[row][column=span3]
[div class=FlagBar][/div]
[div class=Flag]
[comment] if you want to add an image here just make sure t add a IMG# (one number up) here: class="IMG IMG3"
and be sure to follow the instructions above to add the buttons correctly
be sure to copy and paste another button below and be sure to keep the same name there as it is in the button code way above
[/comment]
[div class="IMG DEFAULT"]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595380742322913299/placeholder.jpg[/IMG]
[/div]
[div class="hidden IMG IMG2 "]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595381159312097280/placeholder-600x400.png[/IMG]
[/div]
[div class="hidden IMG WEAPON"]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595380742322913299/placeholder.jpg[/IMG]
[/div]
[div class="hidden IMG WEAPON2"]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595381159312097280/placeholder-600x400.png[/IMG]
[/div]
[div class="hidden IMG ARMOR"]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595380742322913299/placeholder.jpg[/IMG]
[/div]
[div class=ButtonContainer]
[div class=Button]Appearance[/div]
[div class=Button]Opt 2[/div]
[div class=Button]Weapon[/div]
[div class=Button]Weapon 2[/div]
[div class=Button]Armor[/div]
[/div]
[/div]
[Div class=FlagEnd]
[IMG]https://cdn.discordapp.com/attachments/535146287876538379/595799560866103317/flag2.png[/IMG]
[/div]
[/column][column=span5]
[div class=Space]
[br][/br]
[B]Name: [/B]
[br][/br]
[br][/br]
[B]True Age: [/B]
[br][/br]
[br][/br]
[B]Appearance Age: [/B]
[br][/br]
[br][/br]
[B]Gender: [/B]
[br][/br]
[br][/br]
[B]Species: [/B]
[br][/br]
[br][/br]
[B]Class: [/B] (Base Class; Subclass)
[br][/br]
[br][/br]
[B]Distinguishing features: [/B]
[br][/br]
[br][/br]
[B]Preferred weapon(s): [/B] (Two types)
[br][/br]
[br][/br]
[B]Preferred Type(s) of Magic: [/B] (Top four types maximum)
[br][/br]
[/div]
[/column]
[/row]
[br][/br][br][/br]
[div class=FlagBar][/div]
[div class="Open"][div class=Details]Details[/div]
[div class=DetailsBottom][/div]
[/div]
[div class="Deets Space hidden" style="Padding: 20px 0px 20px 0px;"]
[B]Skills:[/B]
[br][/br][br][/br]
[B]Personality:[/B]
[br][/br][br][/br]
[B]History:[/B]
[br][/br](include where they came from and how they end up in Kolan if they are not from there)
[br][/br]
[/div]
[div class="Close hidden"]
[div class=DetailsClose style="margin-top:20px;"][/div]
[div class=Details]Close[/div]
[div class=FlagBar][/div]
[/div]
[br][/br]
[div class=Space]
[B]Views on the Hekaspectrum:[/B]
[br][/br][br][/br]
[B]Reason for joining the Raven Guild:[/B]
[/div]
[br][/br]
[div class=Stamp]
[IMG]https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/8/85/Flourish-horizontal-symbol-fancy-page-break-page-break-clip-art-640_320.png/revision/latest?cb=20170410033005[/IMG]
[/div]
[div class=TitleContainer]
[div class=Ribbon1][/div]
[div class=Title style="font-size:20px;line-height:2.5;"][div class=Tborder]
[row][column=span1]
[div class=Left][/div]
[/column][column=span6]
Official Document of the Kolan Guild Committee
[/column][column=span1]
[div class=Right][/div]
[/column][/row]
[/div][/div]
[div class=Ribbon2][/div]
[/div]
[/div]
[/nobr]