|
|
Line 107: |
Line 107: |
| | | |
| | | |
− | <span class="codrops-header__pretitle">Peking iGEM 2017</span>
| + | |
| | | |
| | | |
Line 119: |
Line 119: |
| <link rel="stylesheet" type="text/css" | | <link rel="stylesheet" type="text/css" |
| href="https://2017.igem.org/Template:Peking/hov/demo?action=raw&ctype=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/normalize?action=raw&ctype=text/css"/>
| + | |
| <link rel="stylesheet" type="text/css" | | <link rel="stylesheet" type="text/css" |
| href="https://2017.igem.org/Template:Peking/hov/adsila?action=raw&ctype=text/css"/> | | href="https://2017.igem.org/Template:Peking/hov/adsila?action=raw&ctype=text/css"/> |
Line 138: |
Line 137: |
| <section class="content"> | | <section class="content"> |
| <nav class="menu menu--adsila"> | | <nav class="menu menu--adsila"> |
− | <a class="menu__item" href="#"> | + | <a class="menu__item" href="https://2017.igem.org/Team:Peking/Project#Introduction"> |
− | <span class="menu__item-name">Artists</span> | + | <span class="menu__item-name">Project</span> |
− | <span class="menu__item-label">Explore all artists' portfolios</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> |
| <a class="menu__item" href="#"> | | <a class="menu__item" href="#"> |
− | <span class="menu__item-name">Exhibitions</span> | + | <span class="menu__item-name">Software</span> |
− | <span class="menu__item-label">Discover their stories</span> | + | <span class="menu__item-label">Carpoid: Our CAD System</span> |
| </a> | | </a> |
| <a class="menu__item" href="#"> | | <a class="menu__item" href="#"> |
− | <span class="menu__item-name">Schedule</span> | + | <span class="menu__item-name">Hardware</span> |
− | <span class="menu__item-label">View our event calendar</span> | + | <span class="menu__item-label">Track & Record Changes</span> |
| </a> | | </a> |
| <a class="menu__item" href="#"> | | <a class="menu__item" href="#"> |
− | <span class="menu__item-name">Mission</span> | + | <span class="menu__item-name">Lab</span> |
− | <span class="menu__item-label">Read our mission statement</span> | + | <span class="menu__item-label">How We Spent the Summer</span> |
| </a> | | </a> |
| <a class="menu__item" href="#"> | | <a class="menu__item" href="#"> |
− | <span class="menu__item-name">The Gardens</span> | + | <span class="menu__item-name">Practices</span> |
− | <span class="menu__item-label">Get to know our eco village</span> | + | <span class="menu__item-label">Influence the World</span> |
| </a> | | </a> |
| <a class="menu__item" href="#"> | | <a class="menu__item" href="#"> |
− | <span class="menu__item-name">Buy Tickets</span> | + | <span class="menu__item-name">Parts</span> |
− | <span class="menu__item-label">Purchase event tickets online</span> | + | <span class="menu__item-label">Contribute Biobricks</span> |
| </a> | | </a> |
| + | |
| <a class="menu__item" href="#"> | | <a class="menu__item" href="#"> |
− | <span class="menu__item-name">Contact</span> | + | <span class="menu__item-name">Team</span> |
− | <span class="menu__item-label">Get in touch and find us</span> | + | <span class="menu__item-label">Interesting People</span> |
| </a> | | </a> |
| + | |
| </nav> | | </nav> |
| </section> | | </section> |
| | | |
| </section> | | </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> | | </main> |
| | | |