Difference between revisions of "Team:Peking/2333"
| Line 1: | Line 1: | ||
<html lang="en" class="no-js"> | <html lang="en" class="no-js"> | ||
| − | + | <head> | |
| − | + | <style> | |
| − | + | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | |
| − | + | /* Clear the default wiki settings */ | |
| − | + | #home_logo, #sideMenu { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | #sideMenu, #top_title, .patrollink { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | #content { | |
| − | + | width: 100%; | |
| − | + | padding: 0px; | |
| − | + | margin-top: 0px; | |
| − | + | margin-left: 0px; | |
| − | + | } | |
| − | + | body { | |
| − | + | font-family: 'Roboto Mono', monospace; | |
| − | + | color: #1b3050; | |
| − | + | background: #f9f0d0; | |
| − | + | -webkit-font-smoothing: antialiased; | |
| − | + | -moz-osx-font-smoothing: grayscale; | |
| − | + | !important; | |
| − | + | } | |
| − | + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { | |
| − | + | margin-bottom: 0px; | |
| − | + | } | |
| − | + | </style> | |
| − | + | <meta charset="UTF-8"/> | |
| − | + | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| − | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| − | + | <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"> | |
| + | <!--[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"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | <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> | ||
| − | + | <span class="codrops-header__pretitle">Peking iGEM 2017</span> | |
| − | + | </header> | |
| − | + | <section class="section section--intro"> | |
| + | To survive,<br> living systems receive information from outside environment <bt>and adjust their own internal workings | ||
| + | in response. | ||
| + | <br><strong>Let's have a look.</strong> | ||
| + | </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> | ||
| + | </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> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | </body> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</html> | </html> | ||
Revision as of 21:34, 1 November 2017
living systems receive information from outside environment
Let's have a look.
Ubax
Shamso
Maxamed
Hagos
Zahi
Magool
Xusni
Beca
Etefu
Meklit
Timiro
Mariame
Desta
Berta
Aman
Kafa
Totit
