Difference between revisions of "Team:Peking/2333"

 
(3 intermediate revisions by the same user not shown)
Line 49: Line 49:
 
     <link href="https://2017.igem.org/Template:Peking/cod/normalize?action=raw&ctype=text/css" rel="stylesheet">
 
     <link href="https://2017.igem.org/Template:Peking/cod/normalize?action=raw&ctype=text/css" rel="stylesheet">
 
     <link href="https://2017.igem.org/Template:Peking/cod/demo?action=raw&ctype=text/css" rel="stylesheet">
 
     <link href="https://2017.igem.org/Template:Peking/cod/demo?action=raw&ctype=text/css" rel="stylesheet">
 +
 +
    <script type="text/javascript"
 +
            src="https://2017.igem.org/Template:Peking/cod/clipboardjs?action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript"
 +
            src="https://2017.igem.org/Template:Peking/cod/mainjs?action=raw&ctype=text/javascript"></script>
 +
  
  
Line 55: Line 61:
 
     <![endif]-->
 
     <![endif]-->
 
     <script>document.documentElement.className = 'js';</script>
 
     <script>document.documentElement.className = 'js';</script>
 +
 
</head>
 
</head>
 
<body>
 
<body>
Line 100: Line 107:
  
  
        <span class="codrops-header__pretitle">Peking iGEM 2017</span>
+
 
  
  
Line 107: 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.
+
         <link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Nunito:400,700" rel="stylesheet">
         <br><strong>Let's have a look.</strong>
+
 
    </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>
 
<script type="text/javascript"
 
        src="https://2017.igem.org/Template:Peking/cod/clipboardjs"></script>
 
<script type="text/javascript"
 
        src="https://2017.igem.org/Template:Peking/cod/mainjs"></script>
 
  
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 23:07, 1 November 2017

img13

Desta