Difference between revisions of "Team:Peking/2333"

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>
  

Revision as of 22:54, 1 November 2017