Difference between revisions of "Team:UCSC/new-testing"

(Replaced content with "{{:Team:UCSC/Reset-Styles}} {{:Team:UCSC/new-testing.css}} <html> <div class="timeline-container" id="timeline-1"> <div class="timeline-header"> <h2...")
Line 1: Line 1:
 
{{:Team:UCSC/Reset-Styles}}
 
{{:Team:UCSC/Reset-Styles}}
 
{{:Team:UCSC/new-testing.css}}
 
{{:Team:UCSC/new-testing.css}}
−
<html lang="en">
+
<html>
  
−
<head>
+
  <div class="timeline-container" id="timeline-1">
−
  <meta charset="UTF-8">
+
      <div class="timeline-header">
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
          <h2 class="timeline-header-title"> TIMELINE DESIGN </h2>
−
  <script>document.getElementsByTagName("html")[0].className += " js";</script>
+
          <h3 class="timeline-header-subtitle"> NEW AND CREATIVE </h3>
−
</head>
+
        </div>
 +
  </div>
 +
     
  
−
<section class="cd-h-timeline js-cd-h-timeline margin-bottom-md">
 
−
    <!--p class="text-center margin-top-md margin-bottom-xl">👈 <a class="text--inherit" href="https://codyhouse.co/gem/horizontal-timeline/">Article &amp; Download</a></p-->
 
  
−
    <div class="cd-h-timeline__container container">
 
−
      <div class="cd-h-timeline__dates">
 
−
        <div class="cd-h-timeline__line">
 
−
          <ol>
 
−
            <li><a href="#0" data-date="16/01/2014" class="cd-h-timeline__date cd-h-timeline__date--selected">Bioethics</a></li>
 
−
            <li><a href="#0" data-date="28/02/2014" class="cd-h-timeline__date">B2DK</a></li>
 
−
            <li><a href="#0" data-date="20/04/2014" class="cd-h-timeline__date">Schools</a></li>
 
−
            <li><a href="#0" data-date="20/05/2014" class="cd-h-timeline__date">Rotary</a></li>
 
−
            <li><a href="#0" data-date="09/07/2014" class="cd-h-timeline__date">County Fair</a></li>
 
−
            <li><a href="#0" data-date="30/08/2014" class="cd-h-timeline__date">Tech Meetup</a></li>
 
−
            <li><a href="#0" data-date="15/09/2014" class="cd-h-timeline__date">CornUCopia</a></li>
 
−
            <!--li><a href="#0" data-date="01/11/2014" class="cd-h-timeline__date">CornUCopia</a></li-->
 
−
            <!--li><a href="#0" data-date="10/12/2014" class="cd-h-timeline__date">10 Dec</a></li>
 
−
            <li><a href="#0" data-date="19/01/2015" class="cd-h-timeline__date">29 Jan</a></li>
 
−
            <li><a href="#0" data-date="03/03/2015" class="cd-h-timeline__date">3 Mar</a></li-->
 
−
          </ol>
 
−
 
−
          <span class="cd-h-timeline__filling-line" aria-hidden="true"></span>
 
−
        </div> <!-- .cd-h-timeline__line -->
 
−
      </div> <!-- .cd-h-timeline__dates -->
 
−
 
−
      <ul>
 
−
        <li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--prev cd-h-timeline__navigation--inactive">Prev</a></li>
 
−
        <li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--next">Next</a></li>
 
−
      </ul>
 
−
    </div> <!-- .cd-h-timeline__container -->
 
−
 
−
    <div class="cd-h-timeline__events">
 
−
      <ol>
 
−
        <li class="cd-h-timeline__event cd-h-timeline__event--selected text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Horizontal Timeline</h2>
 
−
            <em class="cd-h-timeline__event-date">January 16th, 2014</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
 
−
        <li class="cd-h-timeline__event text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
−
            <em class="cd-h-timeline__event-date">February 28th, 2014</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
 
−
        <li class="cd-h-timeline__event text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
−
            <em class="cd-h-timeline__event-date">March 20th, 2014</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
 
−
        <li class="cd-h-timeline__event text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
−
            <em class="cd-h-timeline__event-date">May 20th, 2014</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
 
−
        <li class="cd-h-timeline__event text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
−
            <em class="cd-h-timeline__event-date">July 9th, 2014</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
 
−
        <li class="cd-h-timeline__event text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
−
            <em class="cd-h-timeline__event-date">August 30th, 2014</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
 
−
        <li class="cd-h-timeline__event text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
−
            <em class="cd-h-timeline__event-date">September 15th, 2014</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
 
−
        <li class="cd-h-timeline__event text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
−
            <em class="cd-h-timeline__event-date">November 1st, 2014</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
 
−
        <li class="cd-h-timeline__event text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
−
            <em class="cd-h-timeline__event-date">December 10th, 2014</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
 
−
        <li class="cd-h-timeline__event text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
−
            <em class="cd-h-timeline__event-date">January 29th, 2015</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
 
−
        <li class="cd-h-timeline__event text-component">
 
−
          <div class="cd-h-timeline__event-content container">
 
−
            <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
−
            <em class="cd-h-timeline__event-date">March 3rd, 2015</em>
 
−
            <p class="cd-h-timeline__event-description color-contrast-medium">
 
−
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
−
            </p>
 
−
          </div>
 
−
        </li>
 
−
      </ol>
 
−
    </div> <!-- .cd-h-timeline__events -->
 
−
  </section>
 
−
 
−
  <!--script src="assets/js/util.js"></script>
 
−
  <script src="assets/js/swipe-content.js"></script>
 
−
  <script src="assets/js/main.js"></script-->
 
  
  
 
</html>
 
</html>

Revision as of 04:46, 14 October 2019

TIMELINE DESIGN

NEW AND CREATIVE