Difference between revisions of "Template:Tongji China/Header"

Line 18: Line 18:
 
-->
 
-->
  
−
<html lang="en">
+
<html>
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
Line 24: Line 24:
 
     <meta name="description" content="2017 Tongji iGEM team wiki">
 
     <meta name="description" content="2017 Tongji iGEM team wiki">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
−
    <title>Tongji iGEM</title>
 
  
 
     <script src="https://2017.igem.org/Template:Tongji_China/Javascript?action=raw&ctype=text/javascript"></script>
 
     <script src="https://2017.igem.org/Template:Tongji_China/Javascript?action=raw&ctype=text/javascript"></script>
Line 66: Line 65:
  
 
     </script>
 
     </script>
−
  </head>
+
    </head>
−
  <body>
+
     <div class="main view">
−
     <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
  
−
       <div class="android-header mdl-layout__header mdl-layout__header--waterfall">
+
       <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
−
        <div class="mdl-layout__header-row">
+
 
−
          <span class="android-title mdl-layout-title">
+
        <div class="android-header mdl-layout__header mdl-layout__header--waterfall">
−
            <div class="logo-font">TongJi iGEM</div>
+
          <div class="mdl-layout__header-row">
−
            <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
+
            <span class="android-title mdl-layout-title">
−
          </span>
+
              <div class="logo-font">TongJi iGEM</div>
−
          <!-- Add spacer, to align navigation to the right in desktop -->
+
              <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
−
          <div class="android-header-spacer mdl-layout-spacer"></div>
+
            </span>
−
          <!-- <div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
+
            <!-- Add spacer, to align navigation to the right in desktop -->
−
            <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
+
            <div class="android-header-spacer mdl-layout-spacer"></div>
−
              <i class="material-icons">search</i>
+
            <!-- <div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
−
            </label>
+
              <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
−
            <div class="mdl-textfield__expandable-holder">
+
                <i class="material-icons">search</i>
−
              <input class="mdl-textfield__input" type="text" id="search-field">
+
              </label>
 +
              <div class="mdl-textfield__expandable-holder">
 +
                <input class="mdl-textfield__input" type="text" id="search-field">
 +
              </div>
 +
            </div> -->
 +
            <!-- Navigation -->
 +
            <div class="android-navigation-container">
 +
              <nav class="android-navigation mdl-navigation">
 +
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_index.html">Home</a>
 +
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_description.html">Project</a>
 +
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_team.html">Team</a>
 +
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_results.html">Results</a>
 +
                <!-- <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Auto</a>
 +
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">One</a>
 +
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Play</a> -->
 +
              </nav>
 
             </div>
 
             </div>
−
          </div> -->
+
             <span class="android-mobile-title mdl-layout-title">
−
          <!-- Navigation -->
+
              <div class="logo-font">TongJi iGEM</div>
−
          <div class="android-navigation-container">
+
              <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
−
             <nav class="android-navigation mdl-navigation">
+
            </span>
−
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_index.html">Home</a>
+
            <!-- <button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">
−
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_description.html">Project</a>
+
              <i class="material-icons">more_vert</i>
−
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_team.html">Team</a>
+
−
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_results.html">Results</a>
+
−
              <!-- <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Auto</a>
+
−
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">One</a>
+
−
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Play</a> -->
+
−
            </nav>
+
−
          </div>
+
−
          <span class="android-mobile-title mdl-layout-title">
+
−
            <div class="logo-font">TongJi iGEM</div>
+
−
            <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
+
−
          </span>
+
−
          <!-- <button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">
+
−
            <i class="material-icons">more_vert</i>
+
−
          </button>
+
−
          <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button">
+
−
            <li disabled class="mdl-menu__item">Design</li>
+
−
            <li disabled class="mdl-menu__item">Experiments</li>
+
−
            <li disabled class="mdl-menu__item">Notebook</li>
+
−
            <li disabled class="mdl-menu__item">Parts</li>
+
−
          </ul> -->
+
−
        </div>
+
−
      </div>
+
−
 
+
−
      <div class="android-drawer mdl-layout__drawer">
+
−
        <!-- <span class="mdl-layout-title" style="color:#ffffff; background: #EFEFEF;">
+
−
          <img class="android-logo-image" style="height: 96px; left: 50px;" src="2017tongji_images/2017tongji_logo1.png">
+
−
        </span> -->
+
−
        <nav class="mdl-navigation">
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_index.html">Home</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_description.html">Project</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_team.html">Team</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_results.html">Results</a>
+
−
          <!-- <a class="mdl-navigation__link" href="">Auto</a>
+
−
          <a class="mdl-navigation__link" href="">One</a>
+
−
          <a class="mdl-navigation__link" href="">Play</a> -->
+
−
          <div class="android-drawer-separator"></div>
+
−
          <span class="mdl-navigation__link" href="">Methods</span>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_notebook.html">Notebook</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_design.html">Design</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_experiments.html">Experiments</a>
+
−
          <!-- <a class="mdl-navigation__link" href="">Unavailable info</a> -->
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_model.html">Model</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_demonstrate.html">Demonstrate</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_improve.html">Improve</a>
+
−
          <div class="android-drawer-separator"></div>
+
−
          <span class="mdl-navigation__link" href="">Resources</span>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_parts.html">Parts</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_human_practices.html">Human Practices</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_safety.html">Safety</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_interlab.html">InterLab</a>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_collaborations.html">Collaborations</a>
+
−
          <div class="android-drawer-separator"></div>
+
−
          <a class="mdl-navigation__link" href="2017tongji_page_attributions.html">Attributions</a>
+
−
        </nav>
+
−
      </div>
+
−
 
+
−
      <div class="android-content mdl-layout__content">
+
−
        <a name="top"></a>
+
−
        <div class="android-be-together-section mdl-typography--text-center">
+
−
          <div class="logo-font android-slogan" style="color:#ffffff;">2017 Tongji iGEM Team</div>
+
−
          <div class="logo-font android-sub-slogan" style="color:#ffffff;">welcome to our wiki, here you'll find all the info you need on our project</div>
+
−
          <!-- <div class="logo-font android-create-character">
+
−
            <a href=""><img src="2017tongji_images/andy.png"> discover more</a>
+
−
          </div> -->
+
−
 
+
−
          <a href="#screens">
+
−
            <button class="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
+
−
              <i class="material-icons">expand_more</i>
+
 
             </button>
 
             </button>
−
          </a>
+
            <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button">
−
        </div>
+
               <li disabled class="mdl-menu__item">Design</li>
−
        <div class="android-screen-section mdl-typography--text-center">
+
               <li disabled class="mdl-menu__item">Experiments</li>
−
          <a name="screens"></a>
+
               <li disabled class="mdl-menu__item">Notebook</li>
−
          <div class="mdl-typography--display-1-color-contrast">This website should work on any device!</div>
+
               <li disabled class="mdl-menu__item">Parts</li>
−
          <div class="android-screens">
+
             </ul> -->
−
            <div class="android-wear android-screen">
+
−
              <a class="android-image-link" href="">
+
−
                <img class="android-screen-image" src="2017tongji_images/wear-silver-on.png">
+
−
                <img class="android-screen-image" src="2017tongji_images/wear-black-on.png">
+
−
              </a>
+
−
              <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="">Home</a>
+
−
            </div>
+
−
            <div class="android-phone android-screen">
+
−
               <a class="android-image-link" href="">
+
−
                <img class="android-screen-image" src="2017tongji_images/nexus6-on.jpg">
+
−
              </a>
+
−
               <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="">Project</a>
+
−
            </div>
+
−
            <div class="android-tablet android-screen">
+
−
               <a class="android-image-link" href="">
+
−
                <img class="android-screen-image" src="2017tongji_images/nexus9-on.jpg">
+
−
              </a>
+
−
              <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="">Outreach</a>
+
−
            </div>
+
−
            <div class="android-tv android-screen">
+
−
               <a class="android-image-link" href="">
+
−
                <img class="android-screen-image" src="2017tongji_images/tv-on.jpg">
+
−
              </a>
+
−
              <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="">Safety</a>
+
−
             </div>
+
−
            <div class="android-auto android-screen">
+
−
              <a class="android-image-link" href="">
+
−
                <img class="android-screen-image" src="2017tongji_images/auto-on.jpg">
+
−
              </a>
+
−
              <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase mdl-typography--text-left" href="">More...</a>
+
−
            </div>
+
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
        <div class="android-wear-section">
 
−
          <div class="android-wear-band">
 
−
            <div class="android-wear-band-text">
 
−
              <div class="mdl-typography--display-2 mdl-typography--font-thin">Our team worked on </div>
 
−
              <p class="mdl-typography--headline mdl-typography--font-thin">
 
−
                pictures that are alive, litteraly.
 
−
              </p>
 
−
              <p>
 
−
                <a class="mdl-typography--font-regular mdl-typography--text-uppercase android-alt-link" href="">
 
−
                  See how we did it&nbsp;<i class="material-icons">chevron_right</i>
 
−
                </a>
 
−
              </p>
 
−
            </div>
 
−
          </div>
 
−
        </div>
 
−
        <div class="android-customized-section">
 
−
          <div class="android-customized-section-text">
 
−
            <div class="mdl-typography--font-light mdl-typography--display-1-color-contrast">We would like to thanks those who helped us</div>
 
−
            <p class="mdl-typography--font-light">
 
−
              Like our fantastic advisors, some other people and maybe even a couple of companies!
 
−
              <br>
 
−
              <a href="" class="android-link mdl-typography--font-light">Find out about our team and our friends</a>
 
−
            </p>
 
−
          </div>
 
−
          <div class="android-customized-section-image"></div>
 
−
        </div>
 
−
        <div class="android-more-section">
 
−
          <div class="android-section-title mdl-typography--display-1-color-contrast">Here are the most important links</div>
 
−
          <div class="android-card-container mdl-grid">
 
−
            <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
 
−
              <div class="mdl-card__media">
 
−
                <img src="2017tongji_images/more-from-1.png">
 
−
              </div>
 
−
              <div class="mdl-card__title">
 
−
                <h4 class="mdl-card__title-text">Some kind of page 1</h4>
 
−
              </div>
 
−
              <div class="mdl-card__supporting-text">
 
−
                <span class="mdl-typography--font-light mdl-typography--subhead">Description of the page 1</span>
 
−
              </div>
 
−
              <div class="mdl-card__actions">
 
−
                <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
 
−
                  Call to action 1
 
−
                  <i class="material-icons">chevron_right</i>
 
−
                </a>
 
−
              </div>
 
−
            </div>
 
  
−
            <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
+
        <div class="android-drawer mdl-layout__drawer">
−
              <div class="mdl-card__media">
+
          <!-- <span class="mdl-layout-title" style="color:#ffffff; background: #EFEFEF;">
−
                <img src="2017tongji_images/more-from-4.png">
+
            <img class="android-logo-image" style="height: 96px; left: 50px;" src="2017tongji_images/2017tongji_logo1.png">
−
              </div>
+
          </span> -->
−
              <div class="mdl-card__title">
+
          <nav class="mdl-navigation">
−
                <h4 class="mdl-card__title-text">Some kind of page 2</h4>
+
            <a class="mdl-navigation__link" href="2017tongji_page_index.html">Home</a>
−
              </div>
+
            <a class="mdl-navigation__link" href="2017tongji_page_description.html">Project</a>
−
              <div class="mdl-card__supporting-text">
+
            <a class="mdl-navigation__link" href="2017tongji_page_team.html">Team</a>
−
                <span class="mdl-typography--font-light mdl-typography--subhead">Description of the page 2</span>
+
            <a class="mdl-navigation__link" href="2017tongji_page_results.html">Results</a>
−
              </div>
+
            <!-- <a class="mdl-navigation__link" href="">Auto</a>
−
              <div class="mdl-card__actions">
+
            <a class="mdl-navigation__link" href="">One</a>
−
                <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
+
            <a class="mdl-navigation__link" href="">Play</a> -->
−
                  Call to action 2
+
            <div class="android-drawer-separator"></div>
−
                  <i class="material-icons">chevron_right</i>
+
             <span class="mdl-navigation__link" href="">Methods</span>
−
                </a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_notebook.html">Notebook</a>
−
              </div>
+
            <a class="mdl-navigation__link" href="2017tongji_page_design.html">Design</a>
−
            </div>
+
            <a class="mdl-navigation__link" href="2017tongji_page_experiments.html">Experiments</a>
−
 
+
            <!-- <a class="mdl-navigation__link" href="">Unavailable info</a> -->
−
             <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
+
            <a class="mdl-navigation__link" href="2017tongji_page_model.html">Model</a>
−
              <div class="mdl-card__media">
+
            <a class="mdl-navigation__link" href="2017tongji_page_demonstrate.html">Demonstrate</a>
−
                <img src="2017tongji_images/more-from-2.png">
+
            <a class="mdl-navigation__link" href="2017tongji_page_improve.html">Improve</a>
−
              </div>
+
            <div class="android-drawer-separator"></div>
−
              <div class="mdl-card__title">
+
             <span class="mdl-navigation__link" href="">Resources</span>
−
                <h4 class="mdl-card__title-text">Some kind of page 3</h4>
+
            <a class="mdl-navigation__link" href="2017tongji_page_parts.html">Parts</a>
−
              </div>
+
            <a class="mdl-navigation__link" href="2017tongji_page_human_practices.html">Human Practices</a>
−
              <div class="mdl-card__supporting-text">
+
            <a class="mdl-navigation__link" href="2017tongji_page_safety.html">Safety</a>
−
                <span class="mdl-typography--font-light mdl-typography--subhead">Description of the page 3</span>
+
            <a class="mdl-navigation__link" href="2017tongji_page_interlab.html">InterLab</a>
−
              </div>
+
            <a class="mdl-navigation__link" href="2017tongji_page_collaborations.html">Collaborations</a>
−
              <div class="mdl-card__actions">
+
            <div class="android-drawer-separator"></div>
−
                <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
+
            <a class="mdl-navigation__link" href="2017tongji_page_attributions.html">Attributions</a>
−
                  Call to action 3
+
           </nav>
−
                  <i class="material-icons">chevron_right</i>
+
−
                </a>
+
−
              </div>
+
−
            </div>
+
−
 
+
−
             <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
+
−
              <div class="mdl-card__media">
+
−
                <img src="2017tongji_images/more-from-3.png">
+
−
              </div>
+
−
              <div class="mdl-card__title">
+
−
                <h4 class="mdl-card__title-text">Some kind of page 4</h4>
+
−
              </div>
+
−
              <div class="mdl-card__supporting-text">
+
−
                <span class="mdl-typography--font-light mdl-typography--subhead">Description of the page 4</span>
+
−
              </div>
+
−
              <div class="mdl-card__actions">
+
−
                <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
+
−
                  Call to action 3
+
−
                  <i class="material-icons">chevron_right</i>
+
−
                </a>
+
−
              </div>
+
−
            </div>
+
−
           </div>
+
 
         </div>
 
         </div>
  
−
        <footer class="android-footer mdl-mega-footer">
+
  <!-- Concat with content -->
−
          <div class="mdl-mega-footer--top-section">
+
−
            <div class="mdl-mega-footer--left-section">
+
−
              <button class="mdl-mega-footer--social-btn"></button>
+
−
              &nbsp;
+
−
              <button class="mdl-mega-footer--social-btn"></button>
+
−
              &nbsp;
+
−
              <button class="mdl-mega-footer--social-btn"></button>
+
−
            </div>
+
−
            <div class="mdl-mega-footer--right-section">
+
−
              <a class="mdl-typography--font-light" href="#top">
+
−
                Back to Top
+
−
                <i class="material-icons">expand_less</i>
+
−
              </a>
+
−
            </div>
+
−
          </div>
+
  
−
          <div class="mdl-mega-footer--middle-section">
 
−
            <p class="mdl-typography--font-light">The empty squares above are for social media links</p>
 
−
            <p class="mdl-typography--font-light">Some kind of footer message</p>
 
−
          </div>
 
−
 
−
          <div class="mdl-mega-footer--bottom-section">
 
−
            <a class="android-link android-link-menu mdl-typography--font-light" id="version-dropdown">
 
−
              Look! It expands!
 
−
              <i class="material-icons">arrow_drop_up</i>
 
−
            </a>
 
−
            <ul class="mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect" for="version-dropdown">
 
−
              <li class="mdl-menu__item">First expanded option</li>
 
−
              <li class="mdl-menu__item">more</li>
 
−
              <li class="mdl-menu__item">even more</li>
 
−
              <li class="mdl-menu__item">even even more</li>
 
−
            </ul>
 
−
            <a class="android-link android-link-menu mdl-typography--font-light" id="developers-dropdown">
 
−
              Another expandable
 
−
              <i class="material-icons">arrow_drop_up</i>
 
−
            </a>
 
−
            <ul class="mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect" for="developers-dropdown">
 
−
              <li class="mdl-menu__item">Info</li>
 
−
              <li class="mdl-menu__item">Info 2</li>
 
−
              <li class="mdl-menu__item">More</li>
 
−
              <li class="mdl-menu__item">More2</li>
 
−
            </ul>
 
−
            <a class="android-link mdl-typography--font-light" href="">Blog</a>
 
−
            <a class="android-link mdl-typography--font-light" href="">Privacy Policy</a>
 
−
          </div>
 
−
 
−
        </footer>
 
−
      </div>
 
−
    </div>
 
−
    <!-- <a href="http://LINK_TO_PROJECT" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">Project</a> -->
 
−
    <script src="https://2017.igem.org/Template:Tongji_China/Javascript?action=raw&ctype=text/javascript"></script>
 
−
  </body>
 
 
</html>
 
</html>

Revision as of 19:11, 17 October 2017


TongJi iGEM
TongJi iGEM