code #7

[nobr]
[comment]CODE BY [USER=51813]@wonhae[/USER].[/comment]
[class=container]
--bg: #ececec;
--header: #363636;
--border: #555555;
--title: #fff;
--subtitle: #363636;
--txt: rgba(54, 54, 54, 0.6);
--txt2: rgba(54, 54, 54, 1);
--txthover: rgba(54, 54, 54, 0.8);
  height: 350px;
  width: 280px;
  margin: auto;
  background-color: var(--bg);
[/class]

[class=h1]
  height: 30px;
  width: 300px;
  margin-left: -12px;
  position: absolute;
  margin-top: 15px;
  background-color: var(--header);
  border: 1px solid var(--border);
  z-index: 1;
[/class]

[class=title]
  font-size: 16px;
  color: var(--title);
  text-align: right;
  margin-top: 2px;
  font-family: 'Roboto Slab' , serif;
  letter-spacing: 2px;
  margin-right: 20px;
[/class]

[class name=title state=hover]
  cursor: default;
[/class]

[class=subtitle]
  font-size: 12px;
  color: var(--subtitle);
  text-align: right;
  margin-top: 8px;
  font-family: 'Roboto Slab' , serif;
  letter-spacing: 1px;
  margin-right: 25px;
  text-transform: uppercase;
[/class]

[class=divide1]
  width: 250px;
  height: 1px;
  background-color: var(--header);
  position: absolute;
  margin-top: 70px;
  margin-left: 15px;
[/class]

[class=outer]
  height: 270px;
  width: 250px;
  margin-top: 70px;
  margin-left: 15px;
  background-color: transparent;
  position: absolute;
  overflow: hidden;
[/class]

[class=textbox1]
  height: 255px;
  width: 250px;
  position: absolute;
  overflow-y: scroll;
  padding-right: 20px;
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
[/class]

[class=textbox2]
  height: 240px;
  width: 250px;
  position: absolute;
  overflow-y: scroll;
  padding-right: 20px;
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
[/class]

[class=textbox3]
  height: 240px;
  width: 250px;
  position: absolute;
  overflow-y: scroll;
  padding-right: 20px;
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
[/class]

[class=textbox4]
  height: 240px;
  width: 250px;
  position: absolute;
  overflow-y: scroll;
  padding-right: 20px;
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
[/class]

[class=txt]
  font-size: 10px;
  color: var(--txt);
  text-align: justify;
  margin-top: 8px;
  line-height: 14px;
  font-family: 'Roboto Slab' , serif;
  letter-spacing: 1px;
[/class]

[class name=txt state=hover]
  cursor: default;
[/class]

[class=header]
  color: var(--txt2);
  font-size: 11px;
  display: inline;
  margin-left: 5px;
  font-weight: bold;
  text-decoration: underline;
[/class]

[class=col]
  color: rgba(54, 54, 54, 0.9);
  display: inline;
  font-weight: bold;
[/class]

[class=link]
  color: var(--txt2);
  font-weight: bold;
  display: inline;
  text-transform: uppercase;
  transition: 0.4s;
[/class]

[class name=link state=hover]
  color: var(--txthover);
  transition: 0.4s;
  cursor: pointer;
[/class]

[class=show]
  opacity: 1;
  z-index: 1;
  transition: 0.3s;
[/class]

[script class=container on=init]
  addClass show textbox1
  removeClass show textbox2
  removeClass show textbox3
  removeClass show textbox4
[/script]

[script class=link1 on=click]
  addClass show textbox1
  removeClass show textbox2
  removeClass show textbox3
  removeClass show textbox4
[/script]

[script class=link2 on=click]
  removeClass show textbox1
  addClass show textbox2
  removeClass show textbox3
  removeClass show textbox4
[/script]

[script class=link3 on=click]
  removeClass show textbox1
  removeClass show textbox2
  addClass show textbox3
  removeClass show textbox4
[/script]

[script class=link4 on=click]
  removeClass show textbox1
  removeClass show textbox2
  removeClass show textbox3
  addClass show textbox4
[/script]


[div style="display: none;"][font=Roboto Slab].[/font][/div]
[div class=container]
  [div class=h1]
    [div class=title]title[/div][div class=subtitle]subtitle[/div]
  [/div]
  [div class=divide1][/div]
  [div class=outer]
    [div class="textbox1 txt"]text here [br][/br][br][/br] these are tabs; this home page is 'page 1', click the here for [div class="link link2"]page 2[/div] and [div class="link link3"]page 3[/div]. these can be moved and changed, and placed anywhere in the text on each page. make sure to follow the format they are currently in though. [br][/br][br][/br][icode][div class="link link1"]for page 1 (this current page)[/div][/icode][br][/br][br][/br][icode][div class="link link2"]for page 2[/div][/icode][br][/br][br][/br][icode][div class="link link3"]for page 3[/div][/icode][/div]

    [div class="textbox2 txt"][div class=header]HEADER[/div]
    [br][/br][br][/br]the 'col' class is used here to make text [div class=col]bolded[/div] and darker in colour.
    [br][/br][br][/br]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor libero, blandit in leo eu, varius porta massa. Sed pretium sapien et dignissim porttitor. [div class=col]Nunc[/div] rutrum condimentum pharetra. Vivamus semper [div class=col]enim in velit[/div] lacinia porta. Sed in justo non felis fermentum bibendum at quis urna. Maecenas vitae metus tincidunt, laoreet risus eu, vehicula dui. [div class=col]Nulla hendrerit[/div] maximus tempor. Vestibulum quis laoreet eros. Nam a sapien lorem. Curabitur varius urna elementum luctus gravida. Proin fermentum turpis ipsum. Etiam neque mauris, imperdiet ut euismod at, semper ac nisl. Nunc imperdiet bibendum eleifend. In interdum, risus nec condimentum venenatis, arcu tellus convallis ligula, a sagittis dui risus nec libero. Nam luctus enim et lectus tincidunt, et vestibulum ipsum ultrices.
    [br][/br][br][/br]click to go to [div class="link link3"]page 3[/div] or click here to go to [div class="link link1"]page 1[/div] again[/div]

    [div class="textbox3 txt"]
    click here for [div class="link link4"]page 4[/div], only accessible through this page. you can add more links, take this out etc. make sure when you add a page, you add a [br][/br][br][/br][icode][div class="textbox5 txt"]this is your page 4[/div][/icode] [br][/br][br][/br]as a new section in your code as well as copy and pasting the class and changing the number to 5 (or whatever number page), you will also have to add the script, but if you read the script already there, it should be easy to understand what you need to change. if not, pm me and i can walk you through it or do it for you.
    [br][/br][br][/br][div class=header]LIST[/div]
    [br][/br]› one
    [br][/br]› two
    [br][/br]› three
    [br][/br]› four
    [br][/br][br][/br][div class=header]LIST 2[/div]
    [br][/br]› one
    [br][/br]› two
    [br][/br]› three
    [br][/br]› four
    [br][/br][br][/br][div class=header]NOTES[/div]
    [br][/br]› this is a little notes section
    [br][/br][br][/br]Click here for [div class="link link2"]page 2[/div] and here for the [div class="link link1"]page 1[/div] page.
    [/div]

    [div class="textbox4 txt"][div class=header]PAGE 4 HEADER![/div]
    [br][/br][i]this is your page only accessible through page 3[/i]
    [br][/br][br][/br][div class=col]misc//[/div] you can put whatever here; use it as an extra addition to your character profiles.
    [br][/br][br][/br]Click here to go back to [div class="link link3"]page 3 [/div], or here for [div class="link link2"]page 2[/div] and here for the [div class="link link1"]page 1 (the home page)[/div].
    [/div]
  [/div]
[/div][/nobr]