Difference between revisions of "Team:Mingdao/HP/Silver"

Line 4,395: Line 4,395:
  
 
<!-- Header -->
 
<!-- Header -->
 +
<!-- Navbar -->
 +
<div class="w3-top" style="z-index: 4">
 +
  <div class="w3-bar w3-black w3-card-2 w3-left-align w3-large">
 +
    <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
 +
    <a href="https://2017.igem.org/Team:Mingdao" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
 +
    <a href="https://2017.igem.org/Team:Mingdao/Attributions" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-blue w3-hover-white" style="text-decoration: none; color: white">Attributions</a>
 +
    <a href="https://2017.igem.org/Team:Mingdao/Demonstrate" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white">Project</a>
 +
    <a href="https://2017.igem.org/Team:Mingdao/HP/Silver" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white">Human-Practice</a>
 +
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white">Notebook</a>
 +
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white;">Brainstorm</a>
 +
  </div>
  
<!-- Navbar -->
+
</div>
<div class="w3-top" style="z-index: 4">
+
  <div class="w3-bar w3-black w3-card-2 w3-left-align w3-large">
+
    <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
+
    <a href="https://2017.igem.org/Team:Mingdao" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
+
    <a href="https://2017.igem.org/Team:Mingdao/Attributions" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-blue w3-hover-white">Attributions</a>
+
    <a href="https://2017.igem.org/Team:Mingdao/Demonstrate" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Project</a>
+
    <a href="https://2017.igem.org/Team:Mingdao/HP/Silver" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Human-Practice</a>
+
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Notebook</a>
+
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Brainstorm</a>
+
  </div>
+
  
  <!-- Navbar on small screens -->
 
  <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
 
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>
 
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
 
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
 
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>
 
  </div>
 
</div>
 
  
  
 +
<!-- Sidebar/menu -->
 +
<nav class="w3-sidebar w3-collapse w3-animate-left" style="z-index:3;width:180px; background-color: #F8F9FA" id="mySidebar"><br>
  
<!-- Sidebar/menu -->
+
    <div class="w3-container">
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:180px;" id="mySidebar"><br>
+
        <h5>Dashboard</h5>
 +
    </div>
  
  <div class="w3-container">
+
<div class="w3-bar-block">
    <h5>Dashboard</h5>
+
        <form action="https://2017.igem.org/Team:Mingdao/Collaborations" style="margin: 10px 15px -10px 0;">
  </div>
+
            <button type="submit" class="btn btn-primary btn-block text-white" style="text-align: left; padding-left:1rem;font-size: 1.2rem;"> <i class="fa fa-bullseye fa-fw"></i>  Collaborate</button>
  <div class="w3-bar-block">
+
        </form>
 +
        <form action="https://2017.igem.org/Team:Mingdao/HP/Silver" style="margin: 0 15px -10px 0;">
 +
            <button type="submit" class="btn btn-primary btn-block text-white" style="text-align: left; padding-left:1rem;font-size: 1.2rem"> <i class="fa fa-bullseye fa-fw"></i> Silver</button>
 +
        </form>
 +
        <form action="https://2017.igem.org/Team:Mingdao/HP/Gold_Integrated" style="margin: 0 15px -20px 0;">
 +
            <button type="submit" class="btn btn-primary btn-block text-white" style="text-align: left; padding-left:1rem;font-size: 1.2rem"> <i class="fa fa-bullseye fa-fw"></i> Gold</button>
 +
        </form>
 +
        <hr>
 +
    </div>
  
    <form action="https://2017.igem.org/Team:Mingdao/Collaborations" style="margin: 10px 15px -10px 0;">
+
  <div class="w3-bar-block">
        <button type="button" class="btn btn-primary btn-block text-white" style="display: block;margin: auto; position: relative;">Collaborate</button>
+
    <a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</a>
   </form>
+
  </div>
    <form action="https://2017.igem.org/Team:Mingdao/HP/Silver" style="margin: 0 15px -10px 0;">
+
    <nav class="navbar navbar-light bg-light">
        <button type="button" class="btn btn-primary btn-block text-white" style="display: block;margin: auto; position: relative;">Silver</button>
+
      <a class="navbar-brand btn" href="#intro-md" style="text-decoration: none;">Intro</a>
   </form>
+
      <a class="navbar-brand btn" href="#research-md" style="text-decoration: none">Research</a>
    <form action="https://2017.igem.org/Team:Mingdao/HP/Gold_Integrated" style="margin: 0 15px -20px 0;">
+
      <a class="navbar-brand btn" href="#design-md" style="text-decoration: none">Design</a>
        <button type="button" class="btn btn-primary btn-block text-white" style="display: block;margin: auto; position: relative;">Gold</button>
+
      <a class="navbar-brand btn" href="#demonstrate-md" style="text-decoration: none">Demonstrate</a>
   </form>
+
      <a class="navbar-brand btn" href="#demonstrate-md" style="text-decoration: none; font-size:1rem"><i class="fa fa-flask" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp; Transporter</a>
    <hr>
+
    <a class="navbar-brand btn" href="#suicide-md" style="text-decoration: none; font-size:1rem"><i class="fa fa-flask" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp; Suicide</a>
  </div>
+
  <a class="navbar-brand btn" href="#probiotic-md" style="text-decoration: none; font-size:1rem"><i class="fa fa-flask" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp; Probiotic</a>
  <div class="w3-bar-block">
+
 
    <a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</a>
+
  <a class="navbar-brand btn" href="#prototype-md" style="text-decoration: none">Prototype</a>
    <a href="#expert" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fa fa-users fa-fw"></i>  Expert<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Outreach</a>
+
    </nav>
    <a href="#two" class="w3-bar-item w3-button w3-padding"><i class="fa fa-eye fa-fw"></i>  Enterprise<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Consultation</a>
+
</nav>
    <a href="#three" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i>  Promotion</a>
+
    <a href="#four" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bullseye fa-fw"></i>  Seminar</a>
+
    <a href="#four" class="w3-bar-item w3-button w3-padding"><i class="fa fa-camera-retro fa-fw"></i>  Experiment<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tutorial</a>
+
    <a href="#four" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bell fa-fw"></i>  Meetups</a>
+
    <a href="#four" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bank fa-fw"></i>  Survey</a>
+
    <a href="#four" class="w3-bar-item w3-button w3-padding"><i class="fa fa-camera-retro fa-fw"></i>  Public<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Debate</a>
+
    <a href="#four" class="w3-bar-item w3-button w3-padding"><i class="fa fa-camera-retro fa-fw"></i>  Public<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Debate</a>
+
    <a href="#four" class="w3-bar-item w3-button w3-padding"><i class="fa fa-cog fa-fw"></i>  Settings</a><br><br>
+
  </div>
+
</nav>
+
 
<!-- Overlay effect when opening sidebar on small screens -->
 
<!-- Overlay effect when opening sidebar on small screens -->
 
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
 
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
Line 4,815: Line 4,809:
 
</div>
 
</div>
 
<!-- END of card section -->
 
<!-- END of card section -->
                <!-- START of Bootstrap -->
 
                <nav class="navbar navbar-light bg-light">
 
                  <form class="form-inline">
 
                      <button type="button" class="btn btn-outline-primary" >Collaborate</button>
 
                      <button class="btn btn-outline-secondary" type="button">Something</button>
 
                  </form>
 
                </nav>
 
  
 
</section>
 
</section>
  
 +
<!--pre footre-->
 +
<div class="w3-container w3-black w3-padding-16">
 +
    <div class="w3-row">
 +
      <div class="w3-container w3-quarter">
 +
        <h3 class="w3-bottombar w3-border-blue w3-wide">Project</h3>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">Research</h4>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">Design</h4>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">Modeling</h4>
 +
      </div>
 +
      <div class="w3-container w3-quarter">
 +
        <h3 class="w3-bottombar w3-border-white">Human Practice</h3>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">Collaboration</h4>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">Enterprise...</h4>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">Experts...</h4>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">More</h4>
 +
      </div>
 +
      <div class="w3-container w3-quarter">
 +
        <h3 class="w3-bottombar w3-border-blue w3-wide">Something</h3>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">Users</h4>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">Active</h4>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">Geo</h4>
 +
        <h4 style="letter-spacing: 0.1rem; color: white;">Interests</h4>
 +
      </div>
  
<!--pre footre-->
+
      <div class="w3-container w3-quarter">
<div class="w3-container w3-black w3-padding-16">
+
        <h3 class="w3-bottombar w3-border-white w3-wide">Brainstorm</h3>
    <div class="w3-row">
+
        <h4 style="letter-spacing: 0.1rem; color: white;">Debate</h4>
      <div class="w3-container w3-quarter">
+
        <h4 style="letter-spacing: 0.1rem; color: white;">About us</h4>
        <h3 class="w3-bottombar w3-border-blue w3-wide">Project</h3>
+
      </div>
        <p class=" w3-wide">Research</p>
+
    </div>
        <p class=" w3-wide">Design</p>
+
<hr>
        <p class=" w3-wide">Modeling</p>
+
  </div>
      </div>
+
  <!-- pre-footre END -->
      <div class="w3-container w3-quarter">
+
<!-- Footer -->
        <h3 class="w3-bottombar w3-border-white">Human Practice</h3>
+
<footer id="footer">
        <p class=" w3-wide">Collaboration</p>
+
<div class="container">
        <p class=" w3-wide">Enterprise...</p>
+
<ul class="icons">
        <p class=" w3-wide">Experts...</p>
+
<li><a href="https://www.facebook.com/mingdaoigem/" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
        <p class=" w3-wide">More</p>
+
<li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
      </div>
+
</ul>
      <div class="w3-container w3-quarter">
+
</div>
        <h3 class="w3-bottombar w3-border-blue w3-wide">Something</h3>
+
<div class="copyright">
        <p class=" w3-wide">Users</p>
+
&copy; iGEM Mingdao 2017. Design: Kevin Li.  All rights reserved.
        <p class=" w3-wide">Active</p>
+
</div>
        <p class=" w3-wide">Geo</p>
+
</footer>
        <p class=" w3-wide">Interests</p>
+
<!-- Footer end -->
      </div>
+
 
+
      <div class="w3-container w3-quarter">
+
        <h3 class="w3-bottombar w3-border-white w3-wide">Brainstorm</h3>
+
        <p class=" w3-wide">Debate</p>
+
        <p class=" w3-wide">About us</p>
+
      </div>
+
    </div>
+
<hr>
+
  </div>
+
<!-- Footer -->
+
<footer id="footer">
+
<div class="container">
+
<ul class="icons">
+
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
+
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
+
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
+
<li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
+
</ul>
+
</div>
+
<div class="copyright">
+
&copy; Untitled. All rights reserved.
+
</div>
+
</footer>
+
  
 
</div>
 
</div>

Revision as of 06:47, 18 October 2017

iGEM Human Practice

Expert Consultation

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.

Generic Topic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Banner 2

Seminar

Trade

Blablabla

Blablabla

Blablabla

×

Header

Pic. Description     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Topic of Something

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pic. Description     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Topic of Something

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pic. Description     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Topic of Something

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Banner 2

Seminar

Trade

Blablabla

Blablabla

Blablabla

×

Header

Pic. Description     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Topic of Something

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pic. Description     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Topic of Something

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pic. Description     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Topic of Something

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Monterosso

Customer 3

Trade

Blablabla

Blablabla

Blablabla

Expert Consultation

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.

To achieve our goal, we consult experts in different areas of study

Expert Consultation

Company 2

The w3-third class uses one third (33.33%) of the screen widow.

On small screens (max 600 pixels) it automatically resizes to full screen width.


Company One

The w3-third class uses one third (33.33%) of the screen widow.

On small screens (max 600 pixels) it automatically resizes to full screen width.

Not limited to laboratory, we make business approach

Education

Expert Consultation

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.

Achieve 1

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

Next

Achieve 2

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

Next

Achieve 3

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

Next

Project

Research

Design

Modeling

Human Practice

Collaboration

Enterprise...

Experts...

More

Something

Users

Active

Geo

Interests

Brainstorm

Debate

About us