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

Line 18: Line 18:
 
-->
 
-->
  
−
<html>
+
<html lang="en">
 
   <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 65: Line 66:
  
 
     </script>
 
     </script>
−
    </head>
+
  </head>
−
     <div class="main view">
+
  <body>
 +
     <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  
−
       <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__header-row">
−
        <div class="android-header mdl-layout__header mdl-layout__header--waterfall">
+
          <span class="android-title mdl-layout-title">
−
          <div class="mdl-layout__header-row">
+
            <div class="logo-font">TongJi iGEM</div>
−
            <span class="android-title mdl-layout-title">
+
            <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
−
              <div class="logo-font">TongJi iGEM</div>
+
          </span>
−
              <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
+
          <!-- Add spacer, to align navigation to the right in desktop -->
−
            </span>
+
          <div class="android-header-spacer mdl-layout-spacer"></div>
−
            <!-- Add spacer, to align navigation to the right in desktop -->
+
          <!-- <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">
−
            <div class="android-header-spacer mdl-layout-spacer"></div>
+
            <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
−
            <!-- <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">
+
              <i class="material-icons">search</i>
−
              <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
+
            </label>
−
                <i class="material-icons">search</i>
+
            <div class="mdl-textfield__expandable-holder">
−
              </label>
+
              <input class="mdl-textfield__input" type="text" id="search-field">
−
              <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>
−
             <span class="android-mobile-title mdl-layout-title">
+
          </div> -->
−
              <div class="logo-font">TongJi iGEM</div>
+
          <!-- Navigation -->
−
              <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
+
          <div class="android-navigation-container">
−
            </span>
+
             <nav class="android-navigation mdl-navigation">
−
            <!-- <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_index.html">Home</a>
−
              <i class="material-icons">more_vert</i>
+
              <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>
 +
          <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>
−
            <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button">
+
          </a>
−
               <li disabled class="mdl-menu__item">Design</li>
+
        </div>
−
               <li disabled class="mdl-menu__item">Experiments</li>
+
        <div class="android-screen-section mdl-typography--text-center">
−
               <li disabled class="mdl-menu__item">Notebook</li>
+
          <a name="screens"></a>
−
               <li disabled class="mdl-menu__item">Parts</li>
+
          <div class="mdl-typography--display-1-color-contrast">This website should work on any device!</div>
−
             </ul> -->
+
          <div class="android-screens">
 +
            <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="android-drawer mdl-layout__drawer">
+
            <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
−
          <!-- <span class="mdl-layout-title" style="color:#ffffff; background: #EFEFEF;">
+
              <div class="mdl-card__media">
−
            <img class="android-logo-image" style="height: 96px; left: 50px;" src="2017tongji_images/2017tongji_logo1.png">
+
                <img src="2017tongji_images/more-from-4.png">
−
          </span> -->
+
              </div>
−
          <nav class="mdl-navigation">
+
              <div class="mdl-card__title">
−
            <a class="mdl-navigation__link" href="2017tongji_page_index.html">Home</a>
+
                <h4 class="mdl-card__title-text">Some kind of page 2</h4>
−
            <a class="mdl-navigation__link" href="2017tongji_page_description.html">Project</a>
+
              </div>
−
            <a class="mdl-navigation__link" href="2017tongji_page_team.html">Team</a>
+
              <div class="mdl-card__supporting-text">
−
            <a class="mdl-navigation__link" href="2017tongji_page_results.html">Results</a>
+
                <span class="mdl-typography--font-light mdl-typography--subhead">Description of the page 2</span>
−
            <!-- <a class="mdl-navigation__link" href="">Auto</a>
+
              </div>
−
            <a class="mdl-navigation__link" href="">One</a>
+
              <div class="mdl-card__actions">
−
            <a class="mdl-navigation__link" href="">Play</a> -->
+
                <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
−
            <div class="android-drawer-separator"></div>
+
                  Call to action 2
−
             <span class="mdl-navigation__link" href="">Methods</span>
+
                  <i class="material-icons">chevron_right</i>
−
            <a class="mdl-navigation__link" href="2017tongji_page_notebook.html">Notebook</a>
+
                </a>
−
            <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>
+
            </div>
−
            <!-- <a class="mdl-navigation__link" href="">Unavailable info</a> -->
+
 
−
            <a class="mdl-navigation__link" href="2017tongji_page_model.html">Model</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_demonstrate.html">Demonstrate</a>
+
              <div class="mdl-card__media">
−
            <a class="mdl-navigation__link" href="2017tongji_page_improve.html">Improve</a>
+
                <img src="2017tongji_images/more-from-2.png">
−
            <div class="android-drawer-separator"></div>
+
              </div>
−
             <span class="mdl-navigation__link" href="">Resources</span>
+
              <div class="mdl-card__title">
−
            <a class="mdl-navigation__link" href="2017tongji_page_parts.html">Parts</a>
+
                <h4 class="mdl-card__title-text">Some kind of page 3</h4>
−
            <a class="mdl-navigation__link" href="2017tongji_page_human_practices.html">Human Practices</a>
+
              </div>
−
            <a class="mdl-navigation__link" href="2017tongji_page_safety.html">Safety</a>
+
              <div class="mdl-card__supporting-text">
−
            <a class="mdl-navigation__link" href="2017tongji_page_interlab.html">InterLab</a>
+
                <span class="mdl-typography--font-light mdl-typography--subhead">Description of the page 3</span>
−
            <a class="mdl-navigation__link" href="2017tongji_page_collaborations.html">Collaborations</a>
+
              </div>
−
            <div class="android-drawer-separator"></div>
+
              <div class="mdl-card__actions">
−
            <a class="mdl-navigation__link" href="2017tongji_page_attributions.html">Attributions</a>
+
                <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
−
           </nav>
+
                  Call to action 3
 +
                  <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>
  
−
  <!-- Concat with content -->
+
        <footer class="android-footer mdl-mega-footer">
 +
          <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
TongJi iGEM
2017 Tongji iGEM Team
welcome to our wiki, here you'll find all the info you need on our project
This website should work on any device!
Home
Project
Outreach
Safety
More...
Our team worked on

pictures that are alive, litteraly.

See how we did it chevron_right

We would like to thanks those who helped us

Like our fantastic advisors, some other people and maybe even a couple of companies!
Find out about our team and our friends

Here are the most important links

Some kind of page 1

Description of the page 1
Call to action 1 chevron_right

Some kind of page 2

Description of the page 2
Call to action 2 chevron_right

Some kind of page 3

Description of the page 3
Call to action 3 chevron_right

Some kind of page 4

Description of the page 4
Call to action 3 chevron_right