|
|
(8 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 style="margin-top: -2px">
| |
− | <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">
| |
− | <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> |