|
|
(2 intermediate revisions by the same user not shown) |
Line 51: |
Line 51: |
| | | |
| <script type="text/javascript" | | <script type="text/javascript" |
− | src="https://2017.igem.org/Template:Peking/cod/clipboardjs"></script> | + | src="https://2017.igem.org/Template:Peking/cod/clipboardjs?action=raw&ctype=text/javascript"></script> |
| <script type="text/javascript" | | <script type="text/javascript" |
− | src="https://2017.igem.org/Template:Peking/cod/mainjs"></script> | + | src="https://2017.igem.org/Template:Peking/cod/mainjs?action=raw&ctype=text/javascript"></script> |
| | | |
| | | |
Line 61: |
Line 61: |
| <![endif]--> | | <![endif]--> |
| <script>document.documentElement.className = 'js';</script> | | <script>document.documentElement.className = 'js';</script> |
| + | |
| </head> | | </head> |
| <body> | | <body> |
Line 106: |
Line 107: |
| | | |
| | | |
− | <span class="codrops-header__pretitle">Peking iGEM 2017</span>
| + | |
| | | |
| | | |
Line 113: |
Line 114: |
| | | |
| <section class="section section--intro"> | | <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><br>This adjustment depends not only on processing a combination of environmental signal inputs, but on determining the system’s current state. | + | <link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Nunito:400,700" rel="stylesheet"> |
− | <br>
| + | |
− | </section>
| + | <link rel="stylesheet" type="text/css" |
− | <section class="section section--nav" id="Ubax">
| + | href="https://2017.igem.org/Template:Peking/hov/demo?action=raw&ctype=text/css"/> |
− | <span class="link-copy"></span>
| + | |
− | <nav class="nav nav--ubax">
| + | <link rel="stylesheet" type="text/css" |
− | <button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Chapter 1</span></button>
| + | href="https://2017.igem.org/Template:Peking/hov/adsila?action=raw&ctype=text/css"/> |
− | <button class="nav__item nav__item--current" aria-label="Item 2"><span
| + | <link rel="stylesheet" type="text/css" |
− | class="nav__item-title">Chapter 2</span></button>
| + | href="https://2017.igem.org/Template:Peking/hov/pater?action=raw&ctype=text/css"/> |
− | <button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Chapter 3</span></button>
| + | <script type="text/javascript" |
− | <button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Chapter 4</span></button>
| + | src="https://2017.igem.org/Template:Peking/hov/demojs?action=raw&ctype=text/javascript"></script> |
− | <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>
| + | <script>document.documentElement.className = "js"; |
− | <button class="nav__item" aria-label="Item 8"><span class="nav__item-title">Chapter 8</span></button>
| + | var supportsCssVars = function () { |
− | </nav>
| + | var e, t = document.createElement("style"); |
− | <!-- Mockup slider for decorative purpose only -->
| + | 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 |
− | <div class="mockup-slider">
| + | }; |
− | <img src="img/3.jpg" alt="img03"/>
| + | supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script> |
− | <h3 class="mockup-slider__title">Ubax</h3>
| + | |
− | </div> | + | <section class="content"> |
− | </section>
| + | <nav class="menu menu--adsila"> |
− | <section class="section section--nav" id="Shamso">
| + | <a class="menu__item" href="https://2017.igem.org/Team:Peking/Project#Introduction"> |
− | <span class="link-copy"></span>
| + | <span class="menu__item-name">Project</span> |
− | <nav class="nav nav--shamso">
| + | <span class="menu__item-label">Theoretical Framework & Experiment</span> |
− | <button class="nav__item" aria-label="Item 1"><span class="nav__item-title">#vanlife</span></button>
| + | </a> |
− | <button class="nav__item nav__item--current" aria-label="Item 2"><span
| + | <a class="menu__item" href="https://2017.igem.org/Team:Peking/Model#Overview"> |
− | class="nav__item-title">#bohostyle</span></button>
| + | <span class="menu__item-name">Modelling</span> |
− | <button class="nav__item" aria-label="Item 3"><span class="nav__item-title">#diy</span></button>
| + | <span class="menu__item-label">Proof & Prediction</span> |
− | <button class="nav__item" aria-label="Item 4"><span class="nav__item-title">#wine</span></button>
| + | </a> |
− | <button class="nav__item" aria-label="Item 5"><span class="nav__item-title">#cabin</span></button>
| + | <a class="menu__item" href="https://2017.igem.org/Team:Peking/Software"> |
− | <button class="nav__item" aria-label="Item 6"><span class="nav__item-title">#cozy</span></button>
| + | <span class="menu__item-name">Software</span> |
− | <button class="nav__item" aria-label="Item 7"><span class="nav__item-title">#creek</span></button>
| + | <span class="menu__item-label">Carpoid: Our CAD System</span> |
− | <button class="nav__item" aria-label="Item 8"><span class="nav__item-title">#sunshine</span></button>
| + | </a> |
− | </nav> | + | <a class="menu__item" href="https://2017.igem.org/Team:Peking/Hardware"> |
− | <!-- Mockup slider for decorative purpose only -->
| + | <span class="menu__item-name">Hardware</span> |
− | <div class="mockup-slider">
| + | <span class="menu__item-label">Track & Record Changes</span> |
− | <img src="img/7.jpg" alt="img07"/>
| + | </a> |
− | <h3 class="mockup-slider__title">Shamso</h3>
| + | <a class="menu__item" href="https://2017.igem.org/Team:Peking/Lab"> |
− | </div>
| + | <span class="menu__item-name">Lab</span> |
− | </section>
| + | <span class="menu__item-label">How We Spent the Summer</span> |
− | <section class="section section--nav" id="Maxamed">
| + | </a> |
− | <span class="link-copy"></span>
| + | <a class="menu__item" href="https://2017.igem.org/Team:Peking/HP"> |
− | <nav class="nav nav--maxamed">
| + | <span class="menu__item-name">Practices</span> |
− | <button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Nature</span></button>
| + | <span class="menu__item-label">Influence the World</span> |
− | <button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Funny</span>
| + | </a> |
− | </button>
| + | <a class="menu__item" href="https://2017.igem.org/Team:Peking/Parts#Overview"> |
− | <button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Woods</span></button>
| + | <span class="menu__item-name">Parts</span> |
− | <button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Cabin</span></button>
| + | <span class="menu__item-label">Contribute Biobricks</span> |
− | <button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Rooms</span></button>
| + | </a> |
− | <button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Trees</span></button>
| + | |
− | </nav>
| + | <a class="menu__item" href="https://2017.igem.org/Team:Peking/Team"> |
− | <!-- Mockup slider for decorative purpose only -->
| + | <span class="menu__item-name">Team</span> |
− | <div class="mockup-slider">
| + | <span class="menu__item-label">Interesting People</span> |
− | <img src="img/8.jpg" alt="img08"/>
| + | </a> |
− | <h3 class="mockup-slider__title">Maxamed</h3>
| + | |
− | </div> | + | </nav> |
− | </section>
| + | </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> |
| + | |
| <section class="section section--nav" id="Desta"> | | <section class="section section--nav" id="Desta"> |
| <span class="link-copy"></span> | | <span class="link-copy"></span> |
| <nav class="nav nav--desta"> | | <nav class="nav nav--desta"> |
− | <button class="nav__item" aria-label="Item 1"> | + | <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> |
− | <svg class="nav__icon">
| + | <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> |
− | <use xlink:href="#icon-triangle"></use>
| + | <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> |
− | </svg>
| + | <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> |
− | <span class="nav__item-title">Chapter 1</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> |
− | <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> | | </nav> |
| <!-- Mockup slider for decorative purpose only --> | | <!-- Mockup slider for decorative purpose only --> |
| <div class="mockup-slider"> | | <div class="mockup-slider"> |
− | <img src="img/13.jpg" alt="img13"/> | + | <img src="img/13.jpg" alt="img13" /> |
| <h3 class="mockup-slider__title">Desta</h3> | | <h3 class="mockup-slider__title">Desta</h3> |
| </div> | | </div> |
| </section> | | </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> | | </main> |
| | | |