precisioncoding.github.io/marquee.html at gh-pages · PrecisionCoding/precisioncoding.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
    <section role="marquee" class="clearfix">
      <header role="columnheader" class="clearfix">
        <h2>Highlights</h2>
        <aside>
          <menu>
            <ol class="unbulleted">
              <li><a href="#"><i class="fa fa-circle-o"></i></a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i></a></li>
              <li><a href="#"><i class="fa fa-circle"></i></a></li>
              <li><a href="#"><i class="fa fa-circle-o"></i></a></li>
            </ol>
          </menu>
        </aside>
      </header>
      <div role="slider">
        <div>
          <figure class="angular-tabbed">
            <!-- 1174/450 - 960/368 - 748/284 - 548/208 - 460/175  300/114 -->
            <img src="http://lorempixel.com/1174/450/abstract" alt="" />
            <figcaption class="tabbed">
            <aside class="angled">
              <h3>Image Headline</h3>
              <p>Image Caption</p>
            </aside>
            </figcaption>
          </figure>
          <figure class="angular-tabbed">
            <!-- 1174/450 - 960/368 - 748/284 - 548/208 - 460/175  300/114 -->
            <img src="http://lorempixel.com/1174/450/abstract" alt="" />
            <figcaption class="tabbed">
            <aside class="angled">
              <h3>Image Headline</h3>
              <p>Image Caption</p>
            </aside>
            </figcaption>
          </figure>
          <figure class="angular-tabbed">
            <!-- 1174/450 - 960/368 - 748/284 - 548/208 - 460/175  300/114 -->
            <img src="http://lorempixel.com/1174/450/abstract" alt="" />
            <figcaption class="tabbed">
            <aside class="angled">
              <h3>Image Headline</h3>
              <p>Image Caption</p>
            </aside>
            </figcaption>
          </figure>
          <figure class="angular-tabbed">
            <!-- 1174/450 - 960/368 - 748/284 - 548/208 - 460/175  300/114 -->
            <img src="http://lorempixel.com/1174/450/abstract" alt="" />
            <figcaption class="tabbed">
            <aside class="angled">
              <h3>Image Headline</h3>
              <p>Image Caption</p>
            </aside>
            </figcaption>
          </figure>
        </div>
        <a href="#left" id="left" class="slider-nav">&lsaquo;</a> <a href="#right" id="right" class="slider-nav">&rsaquo;</a>
      </div>
    </section>