Difference between revisions of "User:Felix/Test"

From City of Hope MUSH
Jump to navigation Jump to search
imported>Felix
imported>Felix
 
(2 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
{{#css:
 
{{#css:
 
.slider {
 
.slider {
     height: 350px;
+
     height: 450px;
 
     margin: 2em auto;
 
     margin: 2em auto;
 
     position: relative;
 
     position: relative;
 
     text-indent: 0;
 
     text-indent: 0;
     width: 300px;
+
     width: 400px;
 
}
 
}
.slider ul {
+
.slider > ul {
 
     border: 2px solid black;
 
     border: 2px solid black;
 
     box-sizing: border-box;
 
     box-sizing: border-box;
     height: 300px;
+
     height: 400px;
 
     margin: 0;
 
     margin: 0;
     max-width: 300px;
+
     max-width: 400px;
 
     padding: 1em;
 
     padding: 1em;
 
     position: absolute;
 
     position: absolute;
     width: 300px;
+
     width: 400px;
 
}
 
}
 
.prev, .next {
 
.prev, .next {
Line 25: Line 25:
 
     padding: 10px;
 
     padding: 10px;
 
     position: absolute;
 
     position: absolute;
     top: 130px;
+
     top: 180px;
 
}
 
}
 
.next {
 
.next {
Line 48: Line 48:
 
     flex-flow: row wrap;
 
     flex-flow: row wrap;
 
     justify-content: center;
 
     justify-content: center;
 +
    width: 100%;
 
}
 
}
 
.tab {
 
.tab {
Line 70: Line 71:
 
.second.anchor:target ~ .second.tab a,  
 
.second.anchor:target ~ .second.tab a,  
 
.third.anchor:target ~ .third.tab a,  
 
.third.anchor:target ~ .third.tab a,  
.fourth.anchor:target ~ .fourth.tab a {
+
.fourth.anchor:target ~ .fourth.tab a,
 +
.fifth.anchor:target ~ .fifth.tab a,
 +
.sixth.anchor:target ~ .sixth.tab a {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
Line 92: Line 95:
 
.second:target ~ #Second-panel,  
 
.second:target ~ #Second-panel,  
 
.third:target ~ #Third-panel,  
 
.third:target ~ #Third-panel,  
.fourth:target ~ #Fourth-panel,
+
.fourth:target ~ #Fourth-panel,
 +
.fifth:target ~ #Fifth-panel,
 +
.sixth:target ~ #Sixth-panel,
 
.main:target ~ .panel .slider .slide:first-of-type,
 
.main:target ~ .panel .slider .slide:first-of-type,
 
div[id$="-1"]:target ~ .panel .slider .slide:first-of-type,
 
div[id$="-1"]:target ~ .panel .slider .slide:first-of-type,
Line 108: Line 113:
 
<div id="second-4" class="second anchor"></div>
 
<div id="second-4" class="second anchor"></div>
 
<div id="second-5" class="second anchor"></div>
 
<div id="second-5" class="second anchor"></div>
<div id="Second" class="main second anchor" tabindex="0"></div>
+
<div id="Puppet Maker" class="main second anchor" tabindex="0"></div>
<div id="Second-tab" class="second tab" tabindex="0">[[#Second|Second]]</div>
+
<div id="Second-tab" class="second tab" tabindex="0">[[#Puppet Maker|Puppet Maker]]</div>
 
<div id="third-1" class="third anchor"></div>
 
<div id="third-1" class="third anchor"></div>
 
<div id="third-2" class="third anchor"></div>
 
<div id="third-2" class="third anchor"></div>
Line 115: Line 120:
 
<div id="third-4" class="third anchor"></div>
 
<div id="third-4" class="third anchor"></div>
 
<div id="third-5" class="third anchor"></div>
 
<div id="third-5" class="third anchor"></div>
<div id="Third" class="main third anchor" tabindex="0"></div>
+
<div id="Sin Eater" class="main third anchor" tabindex="0"></div>
<div id="Third-tab" class="third tab" tabindex="0">[[#Third|Third]]</div>
+
<div id="Third-tab" class="third tab" tabindex="0">[[#Sin Eater|Sin Eater]]</div>
 
<div id="fourth-1" class="fourth anchor"></div>
 
<div id="fourth-1" class="fourth anchor"></div>
 
<div id="fourth-2" class="fourth anchor"></div>
 
<div id="fourth-2" class="fourth anchor"></div>
Line 122: Line 127:
 
<div id="fourth-4" class="fourth anchor"></div>
 
<div id="fourth-4" class="fourth anchor"></div>
 
<div id="fourth-5" class="fourth anchor"></div>
 
<div id="fourth-5" class="fourth anchor"></div>
<div id="Fourth" class="main fourth anchor" tabindex="0"></div>
+
<div id="Hell Dancer" class="main fourth anchor" tabindex="0"></div>
<div id="Fourth-tab" class="fourth tab" tabindex="0">[[#Fourth|Fourth]]</div>
+
<div id="Fourth-tab" class="fourth tab" tabindex="0">[[#Hell Dancer|Hell Dancer]]</div>
 +
<div id="fifth-1" class="fifth anchor"></div>
 +
<div id="fifth-2" class="fifth anchor"></div>
 +
<div id="fifth-3" class="fifth anchor"></div>
 +
<div id="fifth-4" class="fifth anchor"></div>
 +
<div id="fifth-5" class="fifth anchor"></div>
 +
<div id="Secret Master" class="main fifth anchor" tabindex="0"></div>
 +
<div id="Fifth-tab" class="fifth tab" tabindex="0">[[#Secret Master|Secret Master]]</div>
 +
<div id="sixth-1" class="sixth anchor"></div>
 +
<div id="sixth-2" class="sixth anchor"></div>
 +
<div id="sixth-3" class="sixth anchor"></div>
 +
<div id="sixth-4" class="sixth anchor"></div>
 +
<div id="sixth-5" class="sixth anchor"></div>
 +
<div id="Gate Keeper" class="main sixth anchor" tabindex="0"></div>
 +
<div id="Sixth-tab" class="sixth tab" tabindex="0">[[#Gate Keeper|Gate Keeper]]</div>
 
<div id="first-1" class="first anchor"></div>
 
<div id="first-1" class="first anchor"></div>
 
<div id="first-2" class="first anchor"></div>
 
<div id="first-2" class="first anchor"></div>
Line 129: Line 148:
 
<div id="first-4" class="first anchor"></div>
 
<div id="first-4" class="first anchor"></div>
 
<div id="first-5" class="first anchor"></div>
 
<div id="first-5" class="first anchor"></div>
<div id="First" class="main first anchor" tabindex="0"></div>
+
<div id="Ghost Walker" class="main first anchor" tabindex="0"></div>
<div id="First-tab" class="first tab" tabindex="0">[[#First|First]]</div>
+
<div id="First-tab" class="first tab" tabindex="0">[[#Ghost Walker|Ghost Walker]]</div>
 
<div id="First-panel" class="first panel">
 
<div id="First-panel" class="first panel">
 
This is some information in the first panel.
 
This is some information in the first panel.
Line 152: Line 171:
 
     <li class=first-4" class="slide">
 
     <li class=first-4" class="slide">
 
       Slide 1-4
 
       Slide 1-4
 +
[[File:FelixGraffiti.jpg]]
 
       <div class="prev">[[#first-3|<]]</div>
 
       <div class="prev">[[#first-3|<]]</div>
 
       <div class="next">[[#first-5|>]]</div>           
 
       <div class="next">[[#first-5|>]]</div>           
Line 255: Line 275:
 
       <div class="prev">[[#fourth-4|<]]</div>
 
       <div class="prev">[[#fourth-4|<]]</div>
 
       <div class="next">[[#fourth-1|>]]</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>
 
     </li>
 
   </ul>
 
   </ul>

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