Difference between revisions of "Team:Peking/2333"

 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html lang="en" class="no-js">
 
<html lang="en" class="no-js">
−
<head>
+
<head>
−
<style>
+
    <style>
  
  
−
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
+
        /***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
  
−
/* Clear the default wiki settings */
+
        /* Clear the default wiki settings */
  
−
#home_logo, #sideMenu {
+
        #home_logo, #sideMenu {
−
display: none;
+
            display: none;
−
}
+
        }
  
−
#sideMenu, #top_title, .patrollink {
+
        #sideMenu, #top_title, .patrollink {
−
display: none;
+
            display: none;
−
}
+
        }
  
−
#content {
+
        #content {
−
width: 100%;
+
            width: 100%;
−
padding: 0px;
+
            padding: 0px;
−
margin-top: 0px;
+
            margin-top: 0px;
−
margin-left: 0px;
+
            margin-left: 0px;
−
}
+
        }
  
−
body {
+
        body {
−
font-family: 'Roboto Mono', monospace;
+
            font-family: 'Roboto Mono', monospace;
−
color: #1b3050;
+
            color: #1b3050;
−
background: #f9f0d0;
+
            background: #f9f0d0;
−
-webkit-font-smoothing: antialiased;
+
            -webkit-font-smoothing: antialiased;
−
-moz-osx-font-smoothing: grayscale;
+
            -moz-osx-font-smoothing: grayscale;
−
!important;
+
        !important;
−
}
+
        }
  
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
+
        #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
−
margin-bottom: 0px;
+
            margin-bottom: 0px;
−
}
+
        }
  
  
−
</style>
+
    </style>
−
<meta charset="UTF-8" />
+
    <meta charset="UTF-8"/>
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
−
<title>Navigation Indicators | Codrops</title>
+
  
−
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto+Condensed" rel="stylesheet">
 
  
 +
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto+Condensed" rel="stylesheet">
  
−
<link href="https://2017.igem.org/Template:Peking/cod/component?action=raw&ctype=text/css" rel="stylesheet">
 
−
<link href="https://2017.igem.org/Template:Peking/cod/normalize?action=raw&ctype=text/css" rel="stylesheet">
 
−
<link href="https://2017.igem.org/Template:Peking/cod/demo?action=raw&ctype=text/css" rel="stylesheet">
 
  
 +
    <link href="https://2017.igem.org/Template:Peking/cod/component?action=raw&ctype=text/css" rel="stylesheet">
 +
    <link href="https://2017.igem.org/Template:Peking/cod/normalize?action=raw&ctype=text/css" rel="stylesheet">
 +
    <link href="https://2017.igem.org/Template:Peking/cod/demo?action=raw&ctype=text/css" rel="stylesheet">
  
 +
    <script type="text/javascript"
 +
            src="https://2017.igem.org/Template:Peking/cod/clipboardjs?action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript"
 +
            src="https://2017.igem.org/Template:Peking/cod/mainjs?action=raw&ctype=text/javascript"></script>
  
−
<!--[if IE]>
 
−
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
−
<![endif]--><script>document.documentElement.className = 'js';</script>
 
−
</head>
 
−
<body>
 
−
<svg class="hidden">
 
−
<defs>
 
−
<symbol id="icon-arrow" viewBox="0 0 24 24">
 
−
<title>arrow</title>
 
−
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
 
−
</symbol>
 
−
<symbol id="icon-drop" viewBox="0 0 24 24">
 
−
<title>drop</title>
 
−
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
 
−
</symbol>
 
−
<symbol id="icon-triangle" viewBox="0 0 24 24">
 
−
<title>triangle</title>
 
−
<path d="M4.5,19.8C4.5,19.8,4.5,19.8,4.5,19.8V4.2c0-0.3,0.2-0.5,0.4-0.7c0.2-0.1,0.5-0.1,0.8,0l13.5,7.8c0.2,0.1,0.4,0.4,0.4,0.7c0,0.3-0.2,0.5-0.4,0.7L5.7,20.4c-0.1,0.1-0.3,0.1-0.5,0.1C4.8,20.6,4.5,20.2,4.5,19.8z M6,5.6v12.8L17.2,12L6,5.6z"/>
 
−
</symbol>
 
−
<symbol id="icon-bubble" viewBox="0 0 48 24">
 
−
<title>bubble</title>
 
−
<path d="M0.9,23c-0.2,0.2,0,0.8,0.2,0.9C1.2,24,1.3,24,1.4,24c0.2,0,0.3-0.1,0.5-0.1l10.7-4.1h30.7c2.2,0,3.9-1.8,3.9-3.9V3.9c0-2.2-1.8-3.9-3.9-3.9H5.9C3.7,0,2,1.8,2,3.9v11.8c0,2.2,1,3.5,3.2,3.5C5.1,19.2,2.2,21.5,0.9,23zM45.7,15.8c0,1.3-1.1,2.4-2.4,2.4h-31c-0.2,0-0.3,0.1-0.5,0.1l-9.4,4.3c0,0,4.1-2.9,4.7-3.7c0.1-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.3-0.2-0.5-0.2H5.9c-1.3,0-2.4-1.1-2.4-2.4V3.9c0-1.3,1.1-2.4,2.4-2.4h37.4c1.3,0,2.4,1.1,2.4,2.4V15.8L45.7,15.8z"/>
 
−
</symbol>
 
−
<!-- Icon by Gregor Cresnar: http://www.flaticon.com/free-icon/magnifying-glass_126474#term=magnifier&page=1&position=1 -->
 
−
<symbol id="icon-magnifier" viewBox="0 0 24 24">
 
−
<title>magnifier</title>
 
−
<path d="M22.6,20l-4.8-4.8c0,0-0.1,0-0.1-0.1c1-1.4,1.5-3.2,1.5-5c0-5.1-4.1-9.2-9.2-9.2S0.9,5,0.9,10c0,5.1,4.1,9.2,9.2,9.2c1.9,0,3.6-0.6,5-1.5c0,0,0,0.1,0.1,0.1l4.8,4.8c0.7,0.7,1.9,0.7,2.6,0C23.3,21.9,23.3,20.7,22.6,20z M10,16c-3.3,0-6-2.7-6-6c0-3.3,2.7-6,6-6c3.3,0,6,2.7,6,6S13.3,16,10,16z" />
 
−
</symbol>
 
−
<!-- Icon by Madebyoliver: http://www.flaticon.com/free-icon/placeholder_149060#term=location&page=1&position=1 -->
 
−
<symbol id="icon-pin" viewBox="0 0 24 24">
 
−
<title>pin</title>
 
−
<path d="M17.6,2.9L17.6,2.9c-3.1-3.1-8.2-3.1-11.3,0l0,0C3.6,5.7,3.2,11,5.6,14.2l6.4,9.2l6.4-9.2C20.8,11,20.4,5.7,17.6,2.9z M12.1,11.1c-1.5,0-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6S13.5,11.1,12.1,11.1z" />
 
−
</symbol>
 
−
<symbol id="icon-circle" viewBox="0 0 16 16">
 
−
<circle cx="8" cy="8" r="6.215"></circle>
 
−
</symbol>
 
−
</defs>
 
−
</svg>
 
−
<main>
 
−
<header class="section codrops-header"  style="margin-top: -2px">
 
−
<div class="codrops-links">
 
−
<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Development/MultiLayoutSlideshow/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
 
−
<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=27887" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
 
−
</div>
 
−
<span class="codrops-header__pretitle">Inspiration for</span>
 
−
<h1 class="codrops-header__title">Navigation Indicators</h1>
 
−
<!-- GitHub corner by Tim Holman -->
 
−
<a href="https://github.com/codrops/NavigationIndicators/" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" class="github-icon"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
 
−
</header>
 
−
<section class="section section--intro">
 
−
<p>Many UI components require some kind of navigation or pagination. Today we want to explore some different styles on the example of a vertical slideshow.
 
−
                <br>
 
−
                <br><strong>Let's have a look.</strong></p>
 
−
</section>
 
−
<section class="section section--nav" id="Ubax">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--ubax">
 
−
<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Chapter 1</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Chapter 2</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Chapter 3</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Chapter 4</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Chapter 5</span></button>
 
−
<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Chapter 6</span></button>
 
−
<button class="nav__item" aria-label="Item 7"><span class="nav__item-title">Chapter 7</span></button>
 
−
<button class="nav__item" aria-label="Item 8"><span class="nav__item-title">Chapter 8</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/3.jpg" alt="img03" />
 
−
<h3 class="mockup-slider__title">Ubax</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Shamso">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--shamso">
 
−
<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">#vanlife</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">#bohostyle</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">#diy</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">#wine</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">#cabin</span></button>
 
−
<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">#cozy</span></button>
 
−
<button class="nav__item" aria-label="Item 7"><span class="nav__item-title">#creek</span></button>
 
−
<button class="nav__item" aria-label="Item 8"><span class="nav__item-title">#sunshine</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/7.jpg" alt="img07" />
 
−
<h3 class="mockup-slider__title">Shamso</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Maxamed">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--maxamed">
 
−
<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Nature</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Funny</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Woods</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Cabin</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Rooms</span></button>
 
−
<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Trees</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/8.jpg" alt="img08" />
 
−
<h3 class="mockup-slider__title">Maxamed</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Hagos">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--hagos">
 
−
<button class="nav__item" aria-label="Item 1"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Oops!</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Nah!</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Hi :P</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Cute!</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Yes!</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/14.jpg" alt="img14" />
 
−
<h3 class="mockup-slider__title">Hagos</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Zahi">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--zahi">
 
−
<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">1952</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">1953</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">1954</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">1955</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">1956</span></button>
 
−
<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">1957</span></button>
 
−
<button class="nav__item" aria-label="Item 7"><span class="nav__item-title">1958</span></button>
 
−
<button class="nav__item" aria-label="Item 8"><span class="nav__item-title">1959</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/4.jpg" alt="img04" />
 
−
<h3 class="mockup-slider__title">Zahi</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Magool">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--magool">
 
−
<button class="nav__item" aria-label="Item 1"></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"></button>
 
−
<button class="nav__item" aria-label="Item 3"></button>
 
−
<button class="nav__item" aria-label="Item 4"></button>
 
−
<button class="nav__item" aria-label="Item 5"></button>
 
−
<button class="nav__item" aria-label="Item 6"></button>
 
−
<button class="nav__item" aria-label="Item 7"></button>
 
−
<button class="nav__item" aria-label="Item 8"></button>
 
−
<button class="nav__item" aria-label="Item 9"></button>
 
−
<button class="nav__item" aria-label="Item 10"></button>
 
−
<button class="nav__item" aria-label="Item 11"></button>
 
−
<button class="nav__item" aria-label="Item 12"></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/5.jpg" alt="img05" />
 
−
<h3 class="mockup-slider__title">Magool</h3>
 
−
<p class="mockup-slider__subtitle">Inspired by <a href="https://dribbble.com/shots/2886526-Brewskies-v2">Brewskies v2</a> by <a href="https://dribbble.com/eatsleepvector">Kevin Yang</a></p>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Xusni">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--xusni">
 
−
<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Incipient</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Halcyon</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Surreptitious</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Evanescent</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Vestigial</span></button>
 
−
<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Scintilla</span></button>
 
−
<button class="nav__item" aria-label="Item 7"><span class="nav__item-title">Nemesis</span></button>
 
−
<button class="nav__item" aria-label="Item 8"><span class="nav__item-title">Mondegreen</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/1.jpg" alt="img01" />
 
−
<h3 class="mockup-slider__title">Xusni</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Beca">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--beca">
 
−
<button class="nav__item" aria-label="Item 0"><span class="nav__item-title"><span>2000</span></span></button>
 
−
<button class="nav__item" aria-label="Item 1"></span><span class="nav__item-title"><span>2001</span></span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title"><span>2002</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-title"><span>2003</span></span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-title"><span>2004</span></span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-title"><span>2005</span></span></button>
 
−
<button class="nav__item" aria-label="Item 6"><span class="nav__item-title"><span>2006</span></span></button>
 
−
<button class="nav__item" aria-label="Item 7"><span class="nav__item-title"><span>2007</span></span></button>
 
−
<button class="nav__item" aria-label="Item 8"><span class="nav__item-title"><span>2008</span></span></button>
 
−
<button class="nav__item" aria-label="Item 9"><span class="nav__item-title"><span>2009</span></span></button>
 
−
<button class="nav__item" aria-label="Item 10"><span class="nav__item-title"><span>2010</span></span></button>
 
−
<button class="nav__item" aria-label="Item 11"><span class="nav__item-title"><span>2011</span></span></button>
 
−
<button class="nav__item" aria-label="Item 12"><span class="nav__item-title"><span>2012</span></span></button>
 
−
<button class="nav__item" aria-label="Item 13"><span class="nav__item-title"><span>2013</span></span></button>
 
−
<button class="nav__item" aria-label="Item 14"><span class="nav__item-title"><span>2014</span></span></button>
 
−
<button class="nav__item" aria-label="Item 15"><span class="nav__item-title"><span>2015</span></span></button>
 
−
<button class="nav__item" aria-label="Item 16"><span class="nav__item-title"><span>2016</span></span></button>
 
−
<button class="nav__item" aria-label="Item 17"><span class="nav__item-title"><span>2017</span></span></button>
 
−
<button class="nav__item" aria-label="Item 18"><span class="nav__item-title"><span>2018</span></button>
 
−
<button class="nav__item" aria-label="Item 19"><span class="nav__item-title"><span>2019</span></button>
 
−
<button class="nav__item" aria-label="Item 20"><span class="nav__item-title"><span>2020</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/9.jpg" alt="img09" />
 
−
<h3 class="mockup-slider__title">Beca</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Etefu">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--etefu">
 
−
<button class="nav__item" aria-label="Item 1"><span class="nav__item-inner"></span><span class="nav__item-title">01</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-inner"></span><span class="nav__item-title">02</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-inner"></span><span class="nav__item-title">03</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-inner"></span><span class="nav__item-title">04</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-inner"></span><span class="nav__item-title">05</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/10.jpg" alt="img10" />
 
−
<h3 class="mockup-slider__title">Etefu</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Meklit">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--meklit">
 
−
<button class="nav__item" aria-label="Item 0"><span class="nav__item-title"><span>1876</span></span></button>
 
−
<button class="nav__item" aria-label="Item 1"></span><span class="nav__item-title"><span>1890</span></span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title"><span>1921</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-title"><span>1923</span></span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-title"><span>1936</span></span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-title"><span>1937</span></span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/11.jpg" alt="img11" />
 
−
<h3 class="mockup-slider__title">Meklit</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Timiro">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--timiro">
 
−
<button class="nav__item" aria-label="Item 1"></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"></button>
 
−
<button class="nav__item" aria-label="Item 3"></button>
 
−
<button class="nav__item" aria-label="Item 4"></button>
 
−
<button class="nav__item" aria-label="Item 5"></button>
 
−
<button class="nav__item" aria-label="Item 6"></button>
 
−
<button class="nav__item" aria-label="Item 7"></button>
 
−
<button class="nav__item" aria-label="Item 8"></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/6.jpg" alt="img06" />
 
−
<h3 class="mockup-slider__title">Timiro</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Mariame">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--mariame">
 
−
<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Chapter 1</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Chapter 2</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Chapter 3</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Chapter 4</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Chapter 5</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/12.jpg" alt="img12" />
 
−
<h3 class="mockup-slider__title">Mariame</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Desta">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--desta">
 
−
<button class="nav__item" aria-label="Item 1"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 1</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 2</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 3</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 4</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 5</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/13.jpg" alt="img13" />
 
−
<h3 class="mockup-slider__title">Desta</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Berta">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--berta">
 
−
<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Captive #3065</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-inner"></span><span class="nav__item-title">Captive #3066</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Captive #3067</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Captive #3068</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Captive #3069</span></button>
 
−
<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Captive #3070</span></button>
 
−
<button class="nav__item" aria-label="Item 7"><span class="nav__item-title">Captive #3071</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/15.jpg" alt="img15" />
 
−
<h3 class="mockup-slider__title">Berta</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Aman">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--aman">
 
−
<button class="nav__item" aria-label="Item 1"></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"></button>
 
−
<button class="nav__item" aria-label="Item 3"></button>
 
−
<button class="nav__item" aria-label="Item 4"></button>
 
−
<button class="nav__item" aria-label="Item 5"></button>
 
−
<div class="nav__pointer"><svg class="nav__icon nav__icon--magnifier"><use xlink:href="#icon-magnifier"></use></svg></div>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/16.jpg" alt="img16" />
 
−
<h3 class="mockup-slider__title">Aman</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Kafa">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--kafa">
 
−
<button class="nav__item" aria-label="Item 1"><span class="nav__item-inner"><img class="nav__item-img" src="img/avatar-1.svg" alt="Avatar 1" /></span><span class="nav__item-title">John Doe</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-inner"><img class="nav__item-img" src="img/avatar-2.svg" alt="Avatar 2" /></span><span class="nav__item-title">Henry Green</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><span class="nav__item-inner"><img class="nav__item-img" src="img/avatar-3.svg" alt="Avatar 3" /></span><span class="nav__item-title">Terry House</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><span class="nav__item-inner"><img class="nav__item-img" src="img/avatar-4.svg" alt="Avatar 4" /></span><span class="nav__item-title">Walter Freeman</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><span class="nav__item-inner"><img class="nav__item-img" src="img/avatar-5.svg" alt="Avatar 5" /></span><span class="nav__item-title">Andy Knight</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/2.jpg" alt="img02" />
 
−
<h3 class="mockup-slider__title">Kafa</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Totit">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--totit">
 
−
<button class="nav__item" aria-label="Item 1"><svg class="nav__icon"><use xlink:href="#icon-pin"></use></svg><span class="nav__item-title">Skagway</span></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><svg class="nav__icon"><use xlink:href="#icon-pin"></use></svg><span class="nav__item-title">Kenai</span></button>
 
−
<button class="nav__item" aria-label="Item 3"><svg class="nav__icon"><use xlink:href="#icon-pin"></use></svg><span class="nav__item-title">Fairbanks</span></button>
 
−
<button class="nav__item" aria-label="Item 4"><svg class="nav__icon"><use xlink:href="#icon-pin"></use></svg><span class="nav__item-title">Ketchikan</span></button>
 
−
<button class="nav__item" aria-label="Item 5"><svg class="nav__icon"><use xlink:href="#icon-pin"></use></svg><span class="nav__item-title">Juneau</span></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/8.jpg" alt="img8" />
 
−
<h3 class="mockup-slider__title">Totit</h3>
 
−
</div>
 
−
</section>
 
−
<section class="section section--nav" id="Ayana">
 
−
<span class="link-copy"></span>
 
−
<nav class="nav nav--ayana">
 
−
<button class="nav__item" aria-label="Item 1"><svg class="nav__icon"><use xlink:href="#icon-circle"></use></svg></button>
 
−
<button class="nav__item nav__item--current" aria-label="Item 2"><svg class="nav__icon"><use xlink:href="#icon-circle"></use></svg></button>
 
−
<button class="nav__item" aria-label="Item 3"><svg class="nav__icon"><use xlink:href="#icon-circle"></use></svg></button>
 
−
<button class="nav__item" aria-label="Item 4"><svg class="nav__icon"><use xlink:href="#icon-circle"></use></svg></button>
 
−
<button class="nav__item" aria-label="Item 5"><svg class="nav__icon"><use xlink:href="#icon-circle"></use></svg></button>
 
−
</nav>
 
−
<!-- Mockup slider for decorative purpose only -->
 
−
<div class="mockup-slider">
 
−
<img src="img/17.jpg" alt="img17" />
 
−
<h3 class="mockup-slider__title">Ayana</h3>
 
−
</div>
 
−
</section>
 
−
<!-- Related demos -->
 
−
<section class="content content--related">
 
−
<p><strong>Images from <a href="http://unsplash.com">Unsplash.com</a></strong></p>
 
−
<p>If you enjoyed this demo you might also like:</p>
 
−
<div class="content__wrap content__wrap--related">
 
−
<a class="media-item" href="http://tympanus.net/Development/TooltipStylesInspiration/">
 
−
<img class="media-item__img" src="img/related/TooltipStylesInspiration.png">
 
−
<h3 class="media-item__title">Tooltip Styles Inspiration</h3>
 
−
</a>
 
−
<a class="media-item" href="http://tympanus.net/Development/NotificationStyles/">
 
−
<img class="media-item__img" src="img/related/NotificationStyles.png">
 
−
<h3 class="media-item__title">Notification Styles Inspiration</h3>
 
−
</a>
 
−
<a class="media-item" href="http://tympanus.net/Development/ArrowNavigationStyles/">
 
−
<img class="media-item__img" src="img/related/ArrowNavigationEffects.png">
 
−
<h3 class="media-item__title">Arrow Navigation Styles</h3>
 
−
</a>
 
−
<a class="media-item" href="http://tympanus.net/Development/DotNavigationStyles/">
 
−
<img class="media-item__img" src="img/related/DotNavigationStyles.png">
 
−
<h3 class="media-item__title">Dot Navigation Styles</h3>
 
−
</a>
 
−
</div>
 
−
</section>
 
−
</main>
 
  
−
<script type="text/javascript"
 
−
src="https://2017.igem.org/Template:Peking/cod/clipboardjs"></script>
 
−
<script type="text/javascript"
 
−
src="https://2017.igem.org/Template:Peking/cod/mainjs"></script>
 
  
 +
    <!--[if IE]>
 +
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 +
    <![endif]-->
 +
    <script>document.documentElement.className = 'js';</script>
  
−
</body>
+
</head>
 +
<body>
 +
<svg class="hidden">
 +
    <defs>
 +
        <symbol id="icon-arrow" viewBox="0 0 24 24">
 +
            <title>arrow</title>
 +
            <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
 +
        </symbol>
 +
        <symbol id="icon-drop" viewBox="0 0 24 24">
 +
            <title>drop</title>
 +
            <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/>
 +
            <path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
 +
        </symbol>
 +
        <symbol id="icon-triangle" viewBox="0 0 24 24">
 +
            <title>triangle</title>
 +
            <path d="M4.5,19.8C4.5,19.8,4.5,19.8,4.5,19.8V4.2c0-0.3,0.2-0.5,0.4-0.7c0.2-0.1,0.5-0.1,0.8,0l13.5,7.8c0.2,0.1,0.4,0.4,0.4,0.7c0,0.3-0.2,0.5-0.4,0.7L5.7,20.4c-0.1,0.1-0.3,0.1-0.5,0.1C4.8,20.6,4.5,20.2,4.5,19.8z M6,5.6v12.8L17.2,12L6,5.6z"/>
 +
        </symbol>
 +
        <symbol id="icon-bubble" viewBox="0 0 48 24">
 +
            <title>bubble</title>
 +
            <path d="M0.9,23c-0.2,0.2,0,0.8,0.2,0.9C1.2,24,1.3,24,1.4,24c0.2,0,0.3-0.1,0.5-0.1l10.7-4.1h30.7c2.2,0,3.9-1.8,3.9-3.9V3.9c0-2.2-1.8-3.9-3.9-3.9H5.9C3.7,0,2,1.8,2,3.9v11.8c0,2.2,1,3.5,3.2,3.5C5.1,19.2,2.2,21.5,0.9,23zM45.7,15.8c0,1.3-1.1,2.4-2.4,2.4h-31c-0.2,0-0.3,0.1-0.5,0.1l-9.4,4.3c0,0,4.1-2.9,4.7-3.7c0.1-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.3-0.2-0.5-0.2H5.9c-1.3,0-2.4-1.1-2.4-2.4V3.9c0-1.3,1.1-2.4,2.4-2.4h37.4c1.3,0,2.4,1.1,2.4,2.4V15.8L45.7,15.8z"/>
 +
        </symbol>
 +
        <!-- Icon by Gregor Cresnar: http://www.flaticon.com/free-icon/magnifying-glass_126474#term=magnifier&page=1&position=1 -->
 +
        <symbol id="icon-magnifier" viewBox="0 0 24 24">
 +
            <title>magnifier</title>
 +
            <path d="M22.6,20l-4.8-4.8c0,0-0.1,0-0.1-0.1c1-1.4,1.5-3.2,1.5-5c0-5.1-4.1-9.2-9.2-9.2S0.9,5,0.9,10c0,5.1,4.1,9.2,9.2,9.2c1.9,0,3.6-0.6,5-1.5c0,0,0,0.1,0.1,0.1l4.8,4.8c0.7,0.7,1.9,0.7,2.6,0C23.3,21.9,23.3,20.7,22.6,20z M10,16c-3.3,0-6-2.7-6-6c0-3.3,2.7-6,6-6c3.3,0,6,2.7,6,6S13.3,16,10,16z"/>
 +
        </symbol>
 +
        <!-- Icon by Madebyoliver: http://www.flaticon.com/free-icon/placeholder_149060#term=location&page=1&position=1 -->
 +
        <symbol id="icon-pin" viewBox="0 0 24 24">
 +
            <title>pin</title>
 +
            <path d="M17.6,2.9L17.6,2.9c-3.1-3.1-8.2-3.1-11.3,0l0,0C3.6,5.7,3.2,11,5.6,14.2l6.4,9.2l6.4-9.2C20.8,11,20.4,5.7,17.6,2.9z M12.1,11.1c-1.5,0-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6S13.5,11.1,12.1,11.1z"/>
 +
        </symbol>
 +
        <symbol id="icon-circle" viewBox="0 0 16 16">
 +
            <circle cx="8" cy="8" r="6.215"></circle>
 +
        </symbol>
 +
    </defs>
 +
</svg>
 +
<main>
 +
    <header class="section codrops-header" style="margin-top: -2px">
 +
 
 +
 
 +
        <h1 class="codrops-header__title" style="text-align: justify"><img
 +
                src="https://static.igem.org/mediawiki/2017/0/09/Peking_banner.png" height="400px" style="margin-top: 100px"/>
 +
        </h1>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
    </header>
 +
 
 +
 
 +
    <section class="section section--intro">
 +
 
 +
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Nunito:400,700" rel="stylesheet">
 +
 
 +
        <link rel="stylesheet" type="text/css"
 +
              href="https://2017.igem.org/Template:Peking/hov/demo?action=raw&ctype=text/css"/>
 +
 
 +
        <link rel="stylesheet" type="text/css"
 +
              href="https://2017.igem.org/Template:Peking/hov/adsila?action=raw&ctype=text/css"/>
 +
        <link rel="stylesheet" type="text/css"
 +
              href="https://2017.igem.org/Template:Peking/hov/pater?action=raw&ctype=text/css"/>
 +
        <script type="text/javascript"
 +
                src="https://2017.igem.org/Template:Peking/hov/demojs?action=raw&ctype=text/javascript"></script>
 +
 
 +
 
 +
        <script>document.documentElement.className = "js";
 +
        var supportsCssVars = function () {
 +
            var e, t = document.createElement("style");
 +
            return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e
 +
        };
 +
        supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
 +
 
 +
        <section class="content">
 +
            <nav class="menu menu--adsila">
 +
                <a class="menu__item" href="https://2017.igem.org/Team:Peking/Project#Introduction">
 +
                    <span class="menu__item-name">Project</span>
 +
                    <span class="menu__item-label">Theoretical Framework & Experiment</span>
 +
                </a>
 +
                <a class="menu__item" href="https://2017.igem.org/Team:Peking/Model#Overview">
 +
                    <span class="menu__item-name">Modelling</span>
 +
                    <span class="menu__item-label">Proof & Prediction</span>
 +
                </a>
 +
                <a class="menu__item" href="https://2017.igem.org/Team:Peking/Software">
 +
                    <span class="menu__item-name">Software</span>
 +
                    <span class="menu__item-label">Carpoid: Our CAD System</span>
 +
                </a>
 +
                <a class="menu__item" href="https://2017.igem.org/Team:Peking/Hardware">
 +
                    <span class="menu__item-name">Hardware</span>
 +
                    <span class="menu__item-label">Track & Record Changes</span>
 +
                </a>
 +
                <a class="menu__item" href="https://2017.igem.org/Team:Peking/Lab">
 +
                    <span class="menu__item-name">Lab</span>
 +
                    <span class="menu__item-label">How We Spent the Summer</span>
 +
                </a>
 +
                <a class="menu__item" href="https://2017.igem.org/Team:Peking/HP">
 +
                    <span class="menu__item-name">Practices</span>
 +
                    <span class="menu__item-label">Influence the World</span>
 +
                </a>
 +
                <a class="menu__item" href="https://2017.igem.org/Team:Peking/Parts#Overview">
 +
                    <span class="menu__item-name">Parts</span>
 +
                    <span class="menu__item-label">Contribute Biobricks</span>
 +
                </a>
 +
 
 +
                <a class="menu__item" href="https://2017.igem.org/Team:Peking/Team">
 +
                    <span class="menu__item-name">Team</span>
 +
                    <span class="menu__item-label">Interesting People</span>
 +
                </a>
 +
 
 +
            </nav>
 +
        </section>
 +
 
 +
    </section>
 +
 
 +
    <section class="section section--nav" id="Desta">
 +
        <span class="link-copy"></span>
 +
        <nav class="nav nav--desta">
 +
            <button class="nav__item" aria-label="Item 1"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 1</span></button>
 +
            <button class="nav__item nav__item--current" aria-label="Item 2"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 2</span></button>
 +
            <button class="nav__item" aria-label="Item 3"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 3</span></button>
 +
            <button class="nav__item" aria-label="Item 4"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 4</span></button>
 +
            <button class="nav__item" aria-label="Item 5"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 5</span></button>
 +
        </nav>
 +
        <!-- Mockup slider for decorative purpose only -->
 +
        <div class="mockup-slider">
 +
            <img src="img/13.jpg" alt="img13" />
 +
            <h3 class="mockup-slider__title">Desta</h3>
 +
        </div>
 +
    </section>
 +
 
 +
</main>
 +
 
 +
 
 +
</body>
 
</html>
 
</html>

Latest revision as of 23:07, 1 November 2017

img13

Desta