Actions

Difference between revisions of "Test"

From ThornsWiki

 
(7 intermediate revisions by the same user not shown)
Line 91: Line 91:
 
| below      = Below test
 
| below      = Below test
 
}}
 
}}
 
<div class="timeline">
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
    </div>
 
    <div class="timeline-content">
 
      <p class="timeline-content-date">2008</h2>
 
      <p>The ZURB Style Guide is created to help us speed up our work. It’s a handy collection of HTML, CSS and Javascript that we use on every client project. The ideas of ZURB Style Guide evolve over the years and form the basis for a new framework, Foundation.</p>
 
    </div>
 
  </div>
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
      <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
    </div>
 
    <div class="timeline-content right">
 
      <p class="timeline-content-date">2010</h2>
 
      <p>ZURB style guide was solidified and named Foundation. It is being used internally on all client projects and ZURB sites and apps.</p>
 
    </div>
 
  </div>
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
      <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
    </div>
 
    <div class="timeline-content">
 
      <p class="timeline-content-date">2011</h2>
 
      <p>
 
        Foundation 2.0 is released to the public as an open source project! Foundation is the first responsive front-end framework and helps lead the charge for RWD across the web.
 
      </p>
 
    </div>
 
  </div>
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
 
    </div>
 
    <div class="timeline-content right">
 
      <p class="timeline-content-date">2012</h2>
 
      <p>
 
        Foundation 3.0 is released! This version comes with Sass and is the first framework to use mixins and Sass partials.
 
      </p>
 
    </div>
 
  </div>
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
 
    </div>
 
    <div class="timeline-content">
 
      <p class="timeline-content-date">2013 - <span class="timeline-content-month">february</span></p>
 
      <p>This year saw not one, but three releases to Foundation! Version 4 went mobile first, added many new components, and came with a visual update. Our responsive image plugin called Interchange was added to Foundation to make sites built with it load even faster.</p>
 
    </div>
 
  </div>
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
      <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
 
    </div>
 
    <div class="timeline-content right">
 
      <p class="timeline-content-date">2013 - <span class="timeline-content-month">november</span></p>
 
      <p>Foundation 5 is all about speed. It made learning, using and developing with the framework faster than ever! More new components like Equalizer, Off-canvas, and Icon-bar make a more complete package. Our responsive content plugin, Interchange can now swap in HTML content and images based on screen size.</p>
 
    </div>
 
  </div>
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
 
    </div>
 
    <div class="timeline-content">
 
      <p class="timeline-content-date">2013 - <span class="timeline-content-month">november</span></p>
 
      <p>Foundation for Emails (formerly Ink), our responsive email framework is launched at the end of the year and helps designers easily create beautiful, responsive emails.</p>
 
    </div>
 
  </div>
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
 
    </div>
 
    <div class="timeline-content right">
 
      <p class="timeline-content-date">2014 - <span class="timeline-content-month">november</span></p>
 
      <p>We launched Foundation for Apps, the first front-end framework created for developing fully responsive web apps.</p>
 
    </div>
 
  </div>
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
 
    </div>
 
    <div class="timeline-content">
 
      <p class="timeline-content-date">2015</h2>
 
      <p>Foundation for Sites 6 is released. Faster, lighter, more versatile, more flexible and more powerful than ever before to get your projects from Prototype to Production.</p>
 
    </div>
 
  </div>
 
 
  <div class="timeline-item">
 
    <div class="timeline-icon">
 
  <i class="fa fa-user-circle-o" aria-hidden="true"></i>
 
 
    </div>
 
    <div class="timeline-content right">
 
      <p class="timeline-content-date">2016</h2>
 
      <p>Foundation for Emails 2 is launched, revolutionizing email development through a workflow that uses the latest web technologies.</p>
 
    </div>
 
  </div>
 
 
</div>
 
 
<table role="table">
 
  <thead role="rowgroup">
 
    <tr role="row">
 
      <th role="columnheader">First Name</th>
 
      <th role="columnheader">Last Name</th>
 
      <th role="columnheader">Job Title</th>
 
      <th role="columnheader">Favorite Color</th>
 
      <th role="columnheader">Wars or Trek?</th>
 
      <th role="columnheader">Secret Alias</th>
 
      <th role="columnheader">Date of Birth</th>
 
      <th role="columnheader">Dream Vacation City</th>
 
      <th role="columnheader">GPA</th>
 
      <th role="columnheader">Arbitrary Data</th>
 
    </tr>
 
  </thead>
 
  <tbody role="rowgroup">
 
    <tr role="row">
 
      <td role="cell">James</td>
 
      <td role="cell">Matman</td>
 
      <td role="cell">Chief Sandwich Eater</td>
 
      <td role="cell">Lettuce Green</td>
 
      <td role="cell">Trek</td>
 
      <td role="cell">Digby Green</td>
 
      <td role="cell">January 13, 1979</td>
 
      <td role="cell">Gotham City</td>
 
      <td role="cell">3.1</td>
 
      <td role="cell">RBX-12</td>
 
    </tr>
 
    <tr role="row">
 
      <td role="cell">The</td>
 
      <td role="cell">Tick</td>
 
      <td role="cell">Crimefighter Sorta</td>
 
      <td role="cell">Blue</td>
 
      <td role="cell">Wars</td>
 
      <td role="cell">John Smith</td>
 
      <td role="cell">July 19, 1968</td>
 
      <td role="cell">Athens</td>
 
      <td role="cell">N/A</td>
 
      <td role="cell">Edlund, Ben (July 1996).</td>
 
    </tr>
 
    <tr role="row">
 
      <td role="cell">Jokey</td>
 
      <td role="cell">Smurf</td>
 
      <td role="cell">Giving Exploding Presents</td>
 
      <td role="cell">Smurflow</td>
 
      <td role="cell">Smurf</td>
 
      <td role="cell">Smurflane Smurfmutt</td>
 
      <td role="cell">Smurfuary Smurfteenth, 1945</td>
 
      <td role="cell">New Smurf City</td>
 
      <td role="cell">4.Smurf</td>
 
      <td role="cell">One</td>
 
    </tr>
 
    <tr role="row">
 
      <td role="cell">Cindy</td>
 
      <td role="cell">Beyler</td>
 
      <td role="cell">Sales Representative</td>
 
      <td role="cell">Red</td>
 
      <td role="cell">Wars</td>
 
      <td role="cell">Lori Quivey</td>
 
      <td role="cell">July 5, 1956</td>
 
      <td role="cell">Paris</td>
 
      <td role="cell">3.4</td>
 
      <td role="cell">3451</td>
 
    </tr>
 
    <tr role="row">
 
      <td role="cell">Captain</td>
 
      <td role="cell">Cool</td>
 
      <td role="cell">Tree Crusher</td>
 
      <td role="cell">Blue</td>
 
      <td role="cell">Wars</td>
 
      <td role="cell">Steve 42nd</td>
 
      <td role="cell">December 13, 1982</td>
 
      <td role="cell">Las Vegas</td>
 
      <td role="cell">1.9</td>
 
      <td role="cell">Under the couch</td>
 
    </tr>
 
  </tbody>
 
</table>
 
 
<ul class="accordion" data-accordion>
 
  <li class="accordion-navigation">
 
 
    <div id="panel1a" class="content active">
 
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
    </div>
 
  </li>
 
  <li class="accordion-navigation">
 
 
    <div id="panel2a" class="content">
 
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
    </div>
 
  </li>
 
  <li class="accordion-navigation">
 
 
    <div id="panel3a" class="content">
 
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
    </div>
 
  </li>
 
</ul>
 
 
  
 
__NOTOC__
 
__NOTOC__

Latest revision as of 12:14, 25 April 2019