Difference between revisions of "User:Felix/Test"

From City of Hope MUSH
Jump to navigation Jump to search
imported>Felix
imported>Felix
 
(35 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<noinclude>This is my main test page for template development.</noinclude>&#32;{{#css:
+
<noinclude>This is my main testing page.</noinclude>&#32;
−
.firstrow td, .firstrow th {
+
{{#css:
−
border-top: 1px dotted #102f45;
+
.slider {
 +
    height: 450px;
 +
    margin: 2em auto;
 +
    position: relative;
 +
    text-indent: 0;
 +
    width: 400px;
 
}
 
}
−
.dot5 {
+
.slider > ul {
−
margin-left: 1em;
+
    border: 2px solid black;
 +
    box-sizing: border-box;
 +
    height: 400px;
 +
    margin: 0;
 +
    max-width: 400px;
 +
    padding: 1em;
 +
    position: absolute;
 +
    width: 400px;
 
}
 
}
−
.dot5 img {
+
.prev, .next {
−
vertical-align: unset;
+
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
 +
    border-radius: 25px;
 +
    font-size: 3em;
 +
    left: -51px;
 +
    padding: 10px;
 +
    position: absolute;
 +
    top: 180px;
 
}
 
}
−
.wrapper {
+
.next {
−
position: relative;
+
    left: auto;
−
cursor: help;
+
    right: -52px;
 
}
 
}
−
.wrapper .tooltip {
+
.prev a, .next a {
−
visibility: hidden;
+
    color: white;
−
white-space:nowrap;
+
    left: -2px;
−
background-color: #C3D2E7;
+
    position: relative;
−
color: #461a00;
+
    top: 1px;
−
border:2px #461a00 solid;
 
−
text-align: center;
 
−
border-radius: 6px;
 
−
padding: 5px 1em;
 
−
position: absolute;
 
−
z-index: 1;
 
−
top: -7px;
 
−
left: 115%;
 
 
}
 
}
−
.wrapper .tooltip.wrap {
+
.next a {
−
white-space:normal;
+
    left: 2px;
−
width:20em;
 
 
}
 
}
−
.wrapper .tooltip::after {
+
.prev a:hover, .next a:hover, .prev a:focus, .next a:focus, .prev a:active, .next a:active {
−
content: "";
+
    font-weight: bold;
−
position: absolute;
+
    text-decoration: none;
−
top: 50%;
 
−
right: 100%;
 
−
margin-top: -8px;
 
−
border-width: 8px;
 
−
border-style: solid;
 
−
border-color: transparent #461a00 transparent transparent;
 
 
}
 
}
−
.wrapper .tooltip.wrap::after {
+
#panels {
−
top: 1.25em;
+
    display: flex;
 +
    flex-flow: row wrap;
 +
    justify-content: center;
 +
    width: 100%;
 
}
 
}
−
.wrapper:hover .tooltip {
+
.tab {
−
visibility: visible;
+
    font-weight: bold;
 +
    margin-top: -4em;
 +
    order: 1;
 +
    padding-top: 4em;
 +
}
 +
.first.tab {
 +
    order: 0;
 +
}
 +
.tab a,
 +
:target ~ .first.tab a {
 +
    border-bottom: medium none;
 +
    display: inline-block;
 +
    margin: 0 0.5em 0.5em;
 +
    opacity: 0.5;
 +
    padding: 0 1em;
 +
}
 +
.first.tab a,
 +
.first.anchor:target ~ .first.tab a,
 +
.second.anchor:target ~ .second.tab a,
 +
.third.anchor:target ~ .third.tab a,
 +
.fourth.anchor:target ~ .fourth.tab a,
 +
.fifth.anchor:target ~ .fifth.tab a,
 +
.sixth.anchor:target ~ .sixth.tab a {
 +
    opacity: 1;
 +
}
 +
.panel {
 +
    display: none;
 +
    order: 2;
 +
    text-indent: 1.5em;
 +
    width: 100%;
 +
}
 +
#First-panel,
 +
.panel .slider .slide:first-of-type {
 +
    display: block;
 +
}
 +
:target ~ #First-panel,
 +
:target ~ .panel .slider .slide:first-of-type,
 +
.anchor,
 +
.slide {
 +
    display: none;
 +
}
 +
.first:target ~ #First-panel,
 +
.second:target ~ #Second-panel,
 +
.third:target ~ #Third-panel,
 +
.fourth:target ~ #Fourth-panel,
 +
.fifth:target ~ #Fifth-panel,
 +
.sixth:target ~ #Sixth-panel,
 +
.main:target ~ .panel .slider .slide:first-of-type,
 +
div[id$="-1"]:target ~ .panel .slider .slide:first-of-type,
 +
div[id$="-2"]:target ~ .panel .slider .slide:nth-of-type(2),
 +
div[id$="-3"]:target ~ .panel .slider .slide:nth-of-type(3),
 +
div[id$="-4"]:target ~ .panel .slider .slide:nth-of-type(4),
 +
div[id$="-5"]:target ~ .panel .slider .slide:nth-of-type(5) {
 +
    display: block;
 
}
 
}
 
}}
 
}}
−
<table id="statbox" align="center" cellspacing=0>
+
<div id="panels">
−
{{#if: {{{attr-str|}}}|{{#if: {{{spec-str|}}}|<tr class="wrapper">|<tr>}}<td>'''Strength:'''</td>
+
<div id="second-1" class="second anchor"></div>
−
<td>{{Flexidot|{{{attr-str}}}|{{{attr-str-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}{{#if: {{{spec-str|}}}|<div class="tooltip">Specialty: {{{spec-str}}}</div>|}}</td></tr>|}}{{#if: {{{attr-dex|}}}|{{#if: {{{spec-dex|}}}|<tr class="wrapper">|<tr>}}<td>'''Dexterity:'''</td>
+
<div id="second-2" class="second anchor"></div>
−
<td>{{Flexidot|{{{attr-dex}}}|{{{attr-dex-count|{{{dot-count|{{{dot-count|5}}}}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}{{#if: {{{spec-dex|}}}|<div class="tooltip">Specialty: {{{spec-dex}}}</div>|}}</td></tr>|}}{{#if: {{{attr-sta|}}}|{{#if: {{{spec-sta|}}}|<tr  class="wrapper">|<tr>}}<td>'''Stamina:'''</td>
+
<div id="second-3" class="second anchor"></div>
−
<td>{{Flexidot|{{{attr-sta}}}|{{{attr-sta-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}{{#if: {{{spec-sta|}}}|<div class="tooltip">Specialty: {{{spec-sta}}}</div>|}}</td></tr>|}}{{#if: {{{attr-man|}}}|{{#if: {{{spec-man|}}}|<tr  class="wrapper">|<tr>}}<td>'''Manipulation:'''</td>
+
<div id="second-4" class="second anchor"></div>
−
<td>{{Flexidot|{{{attr-man}}}|{{{attr-man-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}{{#if: {{{spec-man|}}}|<div class="tooltip">Specialty: {{{spec-man}}}</div>|}}</td></tr>|}}{{#if: {{{attr-cha|}}}|{{#if: {{{spec-cha|}}}|<tr  class="wrapper">|<tr>}}<td>'''Charisma:'''</td>
+
<div id="second-5" class="second anchor"></div>
−
<td>{{Flexidot|{{{attr-cha}}}|{{{attr-cha-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}{{#if: {{{spec-cha|}}}|<div class="tooltip">Specialty: {{{spec-cha}}}</div>|}}</td></tr>|}}{{#if: {{{attr-app|}}}|{{#if: {{{spec-app|}}}|<tr  class="wrapper">|<tr>}}<td>'''Appearance:'''</td>
+
<div id="Puppet Maker" class="main second anchor" tabindex="0"></div>
−
<td>{{Flexidot|{{{attr-app}}}|{{{attr-app-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}{{#if: {{{spec-app|}}}|<div class="tooltip">Specialty: {{{spec-app}}}</div>|}}</td></tr>|}}{{#if: {{{attr-per|}}}|{{#if: {{{spec-per|}}}|<tr  class="wrapper">|<tr>}}<td>'''Perception:'''</td>
+
<div id="Second-tab" class="second tab" tabindex="0">[[#Puppet Maker|Puppet Maker]]</div>
−
<td>{{Flexidot|{{{attr-per}}}|{{{attr-per-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}{{#if: {{{spec-per|}}}|<div class="tooltip">Specialty: {{{spec-per}}}</div>|}}</td></tr>|}}{{#if: {{{attr-int|}}}|{{#if: {{{spec-int|}}}|<tr  class="wrapper">|<tr>}}<td>'''Intelligence:'''</td>
+
<div id="third-1" class="third anchor"></div>
−
<td>{{Flexidot|{{{attr-int}}}|{{{attr-int-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}{{#if: {{{spec-int|}}}|<div class="tooltip">Specialty: {{{spec-int}}}</div>|}}</td></tr>|}}{{#if: {{{attr-wit|}}}|{{#if: {{{spec-wit|}}}|<tr  class="wrapper">|<tr>}}<td>'''Wits:'''</td>
+
<div id="third-2" class="third anchor"></div>
−
<td>{{Flexidot|{{{attr-wit}}}|{{{attr-wit-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}{{#if: {{{spec-wit|}}}|<div class="tooltip">Specialty: {{{spec-wit}}}</div>|}}</td></tr>|}}
+
<div id="third-3" class="third anchor"></div>
−
---
+
<div id="third-4" class="third anchor"></div>
−
{{#if: {{{header-abil|}}}|<tr class="firstrow"><th colspan=2>{{{header-abil}}}</th></tr>}}
+
<div id="third-5" class="third anchor"></div>
−
{{#if: {{{abil-1-name|}}}|{{#if: {{{header-abil|}}}|<tr>|<tr class="firstrow">}}<td>'''{{{abil-1-name}}}:'''</td>
+
<div id="Sin Eater" class="main third anchor" tabindex="0"></div>
−
{{#if: {{{abil-1-spec|}}}|<td  class="wrapper">|<td>}}{{Flexidot|{{{abil-1-dots}}}|{{{abil-1-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}{{#if: {{{abil-1-spec|}}}|<div class="tooltip">Specialty: {{{abil-1-spec}}}</div>|}}</td></tr>|}}{{#if: {{{abil-2-name|}}}|<tr><td>'''{{{abil-2-name}}}:'''</td>
+
<div id="Third-tab" class="third tab" tabindex="0">[[#Sin Eater|Sin Eater]]</div>
−
{{#if: {{{abil-2-spec|}}}|<td  class="wrapper">|<td>}}{{Flexidot|{{{abil-2-dots}}}|{{{abil-2-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|20px}}} }}{{#if: {{{abil-2-spec|}}}|<div class="tooltip">Specialty: {{{abil-2-spec}}}</div>|}}</td></tr>|}}
+
<div id="fourth-1" class="fourth anchor"></div>
−
{{#if: {{{abil-3-name|}}}|<tr><td>'''{{{abil-3-name}}}:'''</td>
+
<div id="fourth-2" class="fourth anchor"></div>
−
{{#if: {{{abil-3-spec|}}}|<td  class="wrapper">|<td>}}{{Flexidot|{{{abil-3-dots}}}|{{{abil-3-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|30px}}} }}{{#if: {{{abil-3-spec|}}}|<div class="tooltip">Specialty: {{{abil-3-spec}}}</div>|}}</td></tr>|}}{{#if: {{{abil-4-name|}}}|<tr><td>'''{{{abil-4-name}}}:'''</td>
+
<div id="fourth-3" class="fourth anchor"></div>
−
{{#if: {{{abil-4-spec|}}}|<td  class="wrapper">|<td>}}{{Flexidot|{{{abil-4-dots}}}|{{{abil-4-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|40px}}} }}{{#if: {{{abil-4-spec|}}}|<div class="tooltip">Specialty: {{{abil-4-spec}}}</div>|}}</td></tr>|}}{{#if: {{{abil-5-name|}}}|<tr><td>'''{{{abil-5-name}}}:'''</td>
+
<div id="fourth-4" class="fourth anchor"></div>
−
{{#if: {{{abil-5-spec|}}}|<td  class="wrapper">|<td>}}{{Flexidot|{{{abil-5-dots}}}|{{{abil-5-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|50px}}} }}{{#if: {{{abil-5-spec|}}}|<div class="tooltip">Specialty: {{{abil-5-spec}}}</div>|}}</td></tr>|}}{{#if: {{{abil-6-name|}}}|<tr><td>'''{{{abil-6-name}}}:'''</td>
+
<div id="fourth-5" class="fourth anchor"></div>
−
{{#if: {{{abil-6-spec|}}}|<td  class="wrapper">|<td>}}{{Flexidot|{{{abil-6-dots}}}|{{{abil-6-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|60px}}} }}{{#if: {{{abil-6-spec|}}}|<div class="tooltip">Specialty: {{{abil-6-spec}}}</div>|}}</td></tr>|}}{{#if: {{{abil-7-name|}}}|<tr><td>'''{{{abil-7-name}}}:'''</td>
+
<div id="Hell Dancer" class="main fourth anchor" tabindex="0"></div>
−
{{#if: {{{abil-7-spec|}}}|<td  class="wrapper">|<td>}}{{Flexidot|{{{abil-7-dots}}}|{{{abil-7-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|70px}}} }}{{#if: {{{abil-7-spec|}}}|<div class="tooltip">Specialty: {{{abil-7-spec}}}</div>|}}</td></tr>|}}{{#if: {{{abil-8-name|}}}|<tr><td>'''{{{abil-8-name}}}:'''</td>
+
<div id="Fourth-tab" class="fourth tab" tabindex="0">[[#Hell Dancer|Hell Dancer]]</div>
−
{{#if: {{{abil-8-spec|}}}|<td  class="wrapper">|<td>}}{{Flexidot|{{{abil-8-dots}}}|{{{abil-8-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|80px}}} }}{{#if: {{{abil-8-spec|}}}|<div class="tooltip">Specialty: {{{abil-8-spec}}}</div>|}}</td></tr>|}}{{#if: {{{abil-9-name|}}}|<tr><td>'''{{{abil-9-name}}}:'''</td>
+
<div id="fifth-1" class="fifth anchor"></div>
−
{{#if: {{{abil-9-spec|}}}|<td  class="wrapper">|<td>}}{{Flexidot|{{{abil-9-dots}}}|{{{abil-9-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|90px}}} }}{{#if: {{{abil-9-spec|}}}|<div class="tooltip">Specialty: {{{abil-9-spec}}}</div>|}}</td></tr>|}}
+
<div id="fifth-2" class="fifth anchor"></div>
−
---
+
<div id="fifth-3" class="fifth anchor"></div>
−
{{#if: {{{header-other|}}}|<tr class="firstrow"><th colspan=2>{{{header-other}}}</th></tr>}}
+
<div id="fifth-4" class="fifth anchor"></div>
−
{{#if: {{{other-1-name|}}}|{{#if: {{{header-other|}}}|<tr>|<tr class="firstrow">}}<td>'''{{{other-1-name}}}:'''</td>
+
<div id="fifth-5" class="fifth anchor"></div>
−
<td>{{Flexidot|{{{other-1-dots}}}|{{{other-1-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|10px}}} }}</td></tr>|}}{{#if: {{{other-2-name|}}}|<tr><td>'''{{{other-2-name}}}:'''</td>
+
<div id="Secret Master" class="main fifth anchor" tabindex="0"></div>
−
<td>{{Flexidot|{{{other-2-dots}}}|{{{other-2-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|20px}}} }}</td></tr>|}}
+
<div id="Fifth-tab" class="fifth tab" tabindex="0">[[#Secret Master|Secret Master]]</div>
−
{{#if: {{{other-3-name|}}}|<tr><td>'''{{{other-3-name}}}:'''</td>
+
<div id="sixth-1" class="sixth anchor"></div>
−
<td>{{Flexidot|{{{other-3-dots}}}|{{{other-3-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|30px}}} }}</td></tr>|}}{{#if: {{{other-4-name|}}}|<tr><td>'''{{{other-4-name}}}:'''</td>
+
<div id="sixth-2" class="sixth anchor"></div>
−
<td>{{Flexidot|{{{other-4-dots}}}|{{{other-4-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|40px}}} }}</td></tr>|}}{{#if: {{{other-5-name|}}}|<tr><td>'''{{{other-5-name}}}:'''</td>
+
<div id="sixth-3" class="sixth anchor"></div>
−
<td>{{Flexidot|{{{other-5-dots}}}|{{{other-5-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|50px}}} }}</td></tr>|}}{{#if: {{{other-6-name|}}}|<tr><td>'''{{{other-6-name}}}:'''</td>
+
<div id="sixth-4" class="sixth anchor"></div>
−
<td>{{Flexidot|{{{other-6-dots}}}|{{{other-6-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|60px}}} }}</td></tr>|}}{{#if: {{{other-7-name|}}}|<tr><td>'''{{{other-7-name}}}:'''</td>
+
<div id="sixth-5" class="sixth anchor"></div>
−
<td>{{Flexidot|{{{other-7-dots}}}|{{{other-7-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|70px}}} }}</td></tr>|}}{{#if: {{{other-8-name|}}}|<tr><td>'''{{{other-8-name}}}:'''</td>
+
<div id="Gate Keeper" class="main sixth anchor" tabindex="0"></div>
−
<td>{{Flexidot|{{{other-8-dots}}}|{{{other-8-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|80px}}} }}</td></tr>|}}{{#if: {{{other-9-name|}}}|<tr><td>'''{{{other-9-name}}}:'''</td>
+
<div id="Sixth-tab" class="sixth tab" tabindex="0">[[#Gate Keeper|Gate Keeper]]</div>
−
<td>{{Flexidot|{{{other-9-dots}}}|{{{other-9-count|{{{dot-count|5}}}}}}|dot-filled={{{dot-filled|Dot-filled.png}}}|dot-empty={{{dot-empty|Dot.png}}}|dot-size={{{dot-size|90px}}} }}</td></tr>|}}
+
<div id="first-1" class="first anchor"></div>
−
---
+
<div id="first-2" class="first anchor"></div>
−
renown
+
<div id="first-3" class="first anchor"></div>
−
---
+
<div id="first-4" class="first anchor"></div>
−
<th colspan=2 style="padding-top: 5px;">Noticeable Merits</th></tr>
+
<div id="first-5" class="first anchor"></div>
−
<tr class="wrapper">
+
<div id="Ghost Walker" class="main first anchor" tabindex="0"></div>
−
<td colspan=2>{{{merit-1-name}}}<div class="tooltip wrap">{{{merit-1-info}}}</div></td></tr>
+
<div id="First-tab" class="first tab" tabindex="0">[[#Ghost Walker|Ghost Walker]]</div>
−
<tr class="wrapper">
+
<div id="First-panel" class="first panel">
−
<td colspan=2>{{{merit-2-name}}}<div class="tooltip wrap">{{{merit-2-info}}}</div></td></tr>
+
This is some information in the first panel.
−
</table>
+
<div class="slider">
 +
  <ul>
 +
    <li class="first-1" class="slide">
 +
      Slide 1-1
 +
      <div class="prev">[[#first-5|<]]</div>
 +
      <div class="next">[[#first-2|>]]</div>
 +
    </li>
 +
    <li class="first-2" class="slide">
 +
      Slide 1-2
 +
      <div class="prev">[[#first-1|<]]</div>
 +
      <div class="next">[[#first-3|>]]</div>        
 +
    </li>
 +
    <li class="first-3" class="slide">
 +
      Slide 1-3
 +
      <div class="prev">[[#first-2|<]]</div>
 +
      <div class="next">[[#first-4|>]]</div>         
 +
    </li>
 +
    <li class=first-4" class="slide">
 +
      Slide 1-4
 +
[[File:FelixGraffiti.jpg]]
 +
      <div class="prev">[[#first-3|<]]</div>
 +
      <div class="next">[[#first-5|>]]</div>        
 +
    </li>
 +
    <li class="first-5" class="slide">
 +
      Slide 1-5
 +
      <div class="prev">[[#first-4|<]]</div>
 +
      <div class="next">[[#first-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="Second-panel" class="second panel">
 +
Here's some info in the second panel.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="second-1" class="slide">
 +
      Slide 2-1
 +
      <div class="prev">[[#second-5|<]]</div>
 +
      <div class="next">[[#second-2|>]]</div>
 +
    </li>
 +
    <li class="second-2" class="slide">
 +
      Slide 2-2
 +
      <div class="prev">[[#second-1|<]]</div>
 +
      <div class="next">[[#second-3|>]]</div>         
 +
    </li>
 +
    <li class="second-3" class="slide">
 +
      Slide 2-3
 +
      <div class="prev">[[#second-2|<]]</div>
 +
      <div class="next">[[#second-4|>]]</div>        
 +
    </li>
 +
    <li class=second-4" class="slide">
 +
      Slide 2-4
 +
      <div class="prev">[[#second-3|<]]</div>
 +
      <div class="next">[[#second-5|>]]</div>         
 +
    </li>
 +
    <li class="second-5" class="slide">
 +
      Slide 2-5
 +
      <div class="prev">[[#second-4|<]]</div>
 +
      <div class="next">[[#second-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="Third-panel" class="third panel">
 +
Third panel info would go here, if I had any.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="third-1" class="slide">
 +
      Slide 3-1
 +
      <div class="prev">[[#third-5|<]]</div>
 +
      <div class="next">[[#third-2|>]]</div>
 +
    </li>
 +
    <li class="third-2" class="slide">
 +
      Slide 3-2
 +
      <div class="prev">[[#third-1|<]]</div>
 +
      <div class="next">[[#third-3|>]]</div>        
 +
    </li>
 +
    <li class="third-3" class="slide">
 +
      Slide 3-3
 +
      <div class="prev">[[#third-2|<]]</div>
 +
      <div class="next">[[#third-4|>]]</div>        
 +
    </li>
 +
    <li class=third-4" class="slide">
 +
      Slide 3-4
 +
      <div class="prev">[[#third-3|<]]</div>
 +
      <div class="next">[[#third-5|>]]</div>         
 +
    </li>
 +
    <li class="third-5" class="slide">
 +
      Slide 3-5
 +
      <div class="prev">[[#third-4|<]]</div>
 +
      <div class="next">[[#third-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="Fourth-panel" class="fourth panel">
 +
And then this would be the fourth panel's spot.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="fourth-1" class="slide">
 +
      Slide 4-1
 +
      <div class="prev">[[#fourth-5|<]]</div>
 +
      <div class="next">[[#fourth-2|>]]</div>
 +
    </li>
 +
    <li class="fourth-2" class="slide">
 +
      Slide 4-2
 +
      <div class="prev">[[#fourth-1|<]]</div>
 +
      <div class="next">[[#fourth-3|>]]</div>        
 +
    </li>
 +
    <li class="fourth-3" class="slide">
 +
      Slide 4-3
 +
      <div class="prev">[[#fourth-2|<]]</div>
 +
      <div class="next">[[#fourth-4|>]]</div>        
 +
    </li>
 +
    <li class=fourth-4" class="slide">
 +
      Slide 4-4
 +
      <div class="prev">[[#fourth-3|<]]</div>
 +
      <div class="next">[[#fourth-5|>]]</div>        
 +
    </li>
 +
    <li class="fourth-5" class="slide">
 +
      Slide 4-5
 +
      <div class="prev">[[#fourth-4|<]]</div>
 +
      <div class="next">[[#fourth-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="Fifth-panel" class="fifth panel">
 +
And then this would be the fifth panel's spot.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="fifth-1" class="slide">
 +
      Slide 5-1
 +
      <div class="prev">[[#fifth-5|<]]</div>
 +
      <div class="next">[[#fifth-2|>]]</div>
 +
    </li>
 +
    <li class="fifth-2" class="slide">
 +
      Slide 5-2
 +
      <div class="prev">[[#fifth-1|<]]</div>
 +
      <div class="next">[[#fifth-3|>]]</div>        
 +
    </li>
 +
    <li class="fifth-3" class="slide">
 +
      Slide 5-3
 +
      <div class="prev">[[#fifth-2|<]]</div>
 +
      <div class="next">[[#fifth-4|>]]</div>        
 +
    </li>
 +
    <li class=fifth-4" class="slide">
 +
      Slide 5-4
 +
      <div class="prev">[[#fifth-3|<]]</div>
 +
      <div class="next">[[#fifth-5|>]]</div>        
 +
    </li>
 +
    <li class="fifth-5" class="slide">
 +
      Slide 5-5
 +
      <div class="prev">[[#fifth-4|<]]</div>
 +
      <div class="next">[[#fifth-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="Sixth-panel" class="sixth panel">
 +
And then this would be the sixth panel's spot.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="sixth-1" class="slide">
 +
      Slide 6-1
 +
      <div class="prev">[[#sixth-5|<]]</div>
 +
      <div class="next">[[#sixth-2|>]]</div>
 +
    </li>
 +
    <li class="sixth-2" class="slide">
 +
      Slide 6-2
 +
      <div class="prev">[[#sixth-1|<]]</div>
 +
      <div class="next">[[#sixth-3|>]]</div>         
 +
    </li>
 +
    <li class="sixth-3" class="slide">
 +
      Slide 6-3
 +
      <div class="prev">[[#sixth-2|<]]</div>
 +
      <div class="next">[[#sixth-4|>]]</div>         
 +
    </li>
 +
    <li class=sixth-6" class="slide">
 +
      Slide 6-4
 +
      <div class="prev">[[#sixth-3|<]]</div>
 +
      <div class="next">[[#sixth-5|>]]</div>         
 +
    </li>
 +
    <li class="sixth-6" class="slide">
 +
      Slide 6-5
 +
      <div class="prev">[[#sixth-4|<]]</div>
 +
      <div class="next">[[#sixth-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
</div>

Latest revision as of 01:50, 24 April 2017

This is my main testing page.

This is some information in the first panel.

  • Slide 1-1
  • Slide 1-2
  • Slide 1-3
  • Slide 1-4 FelixGraffiti.jpg
  • Slide 1-5

Here's some info in the second panel.

  • Slide 2-1
  • Slide 2-2
  • Slide 2-3
  • Slide 2-4
  • Slide 2-5

Third panel info would go here, if I had any.

  • Slide 3-1
  • Slide 3-2
  • Slide 3-3
  • Slide 3-4
  • Slide 3-5

And then this would be the fourth panel's spot.

  • Slide 4-1
  • Slide 4-2
  • Slide 4-3
  • Slide 4-4
  • Slide 4-5

And then this would be the fifth panel's spot.

  • Slide 5-1
  • Slide 5-2
  • Slide 5-3
  • Slide 5-4
  • Slide 5-5

And then this would be the sixth panel's spot.

  • Slide 6-1
  • Slide 6-2
  • Slide 6-3
  • Slide 6-4
  • Slide 6-5
Retrieved from "https://cityofhopemush.net/index.php?title=User:Felix/Test&oldid=125936"