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

Line 4,460: Line 4,460:
 
<div class="grid-style">
 
<div class="grid-style">
  
−
<div class="w3-half w3-centered">
+
−
<div class="box">
+
−
<div class="image fit">
+
−
<img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" />
+
−
</div>
+
−
<div class="content">
+
−
<header class="align-center">
+
−
<p class="w3-center">maecenas sapien feugiat ex purus</p>
+
−
<h2>Lorem ipsum dolor</h2>
+
−
</header>
+
−
<p class="w3-center"> Cras aliquet urna ut sapien tincidunt, quis malesuada elit facilisis. Vestibulum sit amet tortor velit. Nam elementum nibh a libero pharetra elementum. Maecenas feugiat ex purus, quis volutpat lacus placerat malesuada.</p>
+
−
<footer class="align-center">
+
−
<a href="#" class="button alt">Learn More</a>
+
−
</footer>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="w3-half w3-centered">
+
−
<div class="box">
+
−
<div class="image fit">
+
−
<img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" />
+
−
</div>
+
−
<div class="content">
+
−
<header class="align-center">
+
−
<p class="w3-center">mattis elementum sapien pretium tellus</p>
+
−
<h2>Vestibulum sit amet</h2>
+
−
</header>
+
−
<p class="w3-center"> Cras aliquet urna ut sapien tincidunt, quis malesuada elit facilisis. Vestibulum sit amet tortor velit. Nam elementum nibh a libero pharetra elementum. Maecenas feugiat ex purus, quis volutpat lacus placerat malesuada.</p>
+
−
<footer class="align-center">
+
−
<a href="#" class="button alt">Learn More</a>
+
−
</footer>
+
−
</div>
+
−
</div>
+
−
</div>
+
  
 
</div>
 
</div>
Line 4,513: Line 4,479:
 
<section id="three" class="wrapper style2">
 
<section id="three" class="wrapper style2">
 
<div class="inner">
 
<div class="inner">
−
<header class="align-center">
+
<!--Column one-->
−
<p class="special w3-center">Not limited to laboratory, we make business approach</p>
+
  <div class=>
−
<h2>Enterprise Outreach</h2>
+
  <div class="w3-row" style="width: 80%; margin-left:30px; padding:30px">
−
</header>
+
  <div class="w3-third w3-container" style="border-right: 10px solid #383838">
−
<div class="gallery">
+
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" width=100% height=auto style="max-height: 400px; border-radius: 20px">
−
<div>
+
  </div>
−
<div class="image fit">
+
  <div class="w3-twothird w3-container" style="padding-left: 40px">
−
<a href="#"><img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" /></a>
+
  <h3>Company 2</h3> 
−
</div>
+
<p>The w3-third class uses one third (33.33%) of the screen widow.</p>
−
</div>
+
<p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p>
−
<div>
+
  </div>
−
<div class="image fit">
+
</div>
−
<a href="#"><img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" /></a>
+
<br>
−
</div>
+
<!--Column two-->
−
</div>
+
<div class="w3-row" style="width: 80%; margin-left:50px">
−
<div>
+
  <div class="w3-twothird w3-container" style="padding-left: 40px">
−
<div class="image fit">
+
  <h3>Company One</h3>
−
<a href="#"><img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" /></a>
+
<p>The w3-third class uses one third (33.33%) of the screen widow.</p>
−
</div>
+
<p>On small screens (max 600 pixels) it automatically resizes to full screen width.</p>
−
</div>
+
  </div>
−
<div>
+
  <div class="w3-third w3-container" style="border-left: 10px solid #5CBAB3">
−
<div class="image fit">
+
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" width=100% height=auto style="max-height: 400px; border-radius: 20px">
−
<a href="#"><img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" /></a>
+
  </div>
−
</div>
+
−
</div>
+
 
</div>
 
</div>
 +
 
 +
  </div>
 
</div>
 
</div>
 
</section>
 
</section>
Line 4,545: Line 4,511:
 
<div class="bgimg-3 w3-display-container w3-opacity-min">
 
<div class="bgimg-3 w3-display-container w3-opacity-min">
 
  <div class="w3-display-middle">
 
  <div class="w3-display-middle">
−
     <span class="w3-xxlarge w3-text-white w3-wide">INTRODUCTION</span>
+
     <div class="inner">
 +
    <header class="align-center">
 +
<p class="special w3-center" style="color: white">Not limited to laboratory, we make business approach</p>
 +
<h2 style="color: white">Education</h>
 +
</header>
 +
    </div>
 
   </div>
 
   </div>
 
</div>
 
</div>
Line 4,557: Line 4,528:
 
<p>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.</p>
 
<p>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.</p>
 
</div>
 
</div>
−
<div class="gallery">
+
<div class="w3-row-padding">
 +
 
 +
<div class="w3-third">
 +
<div class="w3-card white">
 +
  <div class="w3-container w3-indigo">
 +
<h3 style="color: white">Achieve 1</h3>
 +
  </div>
 +
  <div class="w3-container">
 +
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" width=100% height="auto" style="max-height: 300px; box-shadow: 7px 6px 34px 4px rgba(0,0,0,0.47);">
 +
  </div>
 +
  <ul class="w3-ul w3-border-top">
 +
<li>
 +
  <h3>Frozen</h3>
 +
  <p>The response to the animations was ridiculous</p>
 +
</li>
 +
<li>
 +
  <h3>The Fault in Our Stars</h3>
 +
  <p>Touching, gripping and genuinely well made</p>
 +
</li>
 +
  </ul>
 +
  <div class="w3-container w3-indigo w3-large"><span class="w3-right">Next</span></div>
 +
</div>
 +
</div>
 +
 
 +
<div class="w3-third">
 +
<div class="w3-card white">
 +
  <div class="w3-container w3-indigo">
 +
<h3 style="color: white">Achieve 2</h3>
 +
  </div>
 +
  <div class="w3-container">
 +
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" width=100% height="auto" style="max-height: 300px; box-shadow: 7px 6px 34px 4px rgba(0,0,0,0.47);">
 +
  </div>
 +
  <ul class="w3-ul w3-border-top">
 +
<li>
 +
  <h3>Frozen</h3>
 +
  <p>The response to the animations was ridiculous</p>
 +
</li>
 +
<li>
 +
  <h3>The Fault in Our Stars</h3>
 +
  <p>Touching, gripping and genuinely well made</p>
 +
</li>
 +
  </ul>
 +
  <div class="w3-container w3-indigo w3-large"><span class="w3-right">Next</span></div>
 +
</div>
 +
</div>
 +
 +
<div class="w3-third">
 +
<div class="w3-card">
 +
  <div class="w3-container w3-theme" style="background: #6a8fc8;">
 +
<h3 style="color: white">Achieve 3</h3>
 +
  </div>
 +
  <div class="w3-container">
 +
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" width=100% height="auto" style="max-height: 300px; box-shadow: 7px 6px 34px 4px rgba(0,0,0,0.47);">
 +
  </div>
 +
  <ul class="w3-ul w3-border-top">
 +
<li>
 +
  <h3>Frozen</h3>
 +
  <p>The response to the animations was ridiculous</p>
 +
</li>
 +
<li>
 +
  <h3>The Fault in Our Stars</h3>
 +
  <p>Touching, gripping and genuinely well made</p>
 +
</li>
 +
  </ul>
 +
  <div class="w3-container w3-theme w3-large" style="background: #6a8fc8;"><span class="w3-right" style="color: white">Next</span></div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="gallery">
 
<div>
 
<div>
 
<div class="image fit">
 
<div class="image fit">
Line 4,569: Line 4,608:
 
</div>
 
</div>
 
</div>
 
</div>
 +
<style>
 +
  @keyframes slidy {
 +
0% { left: 0%; }
 +
 +
20% { left: 0%; }
 +
25% { left: -100%; }
 +
 +
45% { left: -100%; }
 +
50% { left: -200%; }
 +
 +
70% { left: -200%; }
 +
75% { left: -300%; }
 +
 +
95% { left: -300%; }
 +
100% { left: -400%; }
 +
}
 +
 +
div#slider { overflow: hidden; }
 +
div#slider figure img { width: 20%; float: left; }
 +
div#slider figure {
 +
  position: relative;
 +
  width: 500%;
 +
  margin: 0;
 +
  left: 0;
 +
  text-align: left;
 +
  font-size: 0;
 +
  animation: 30s slidy infinite;
 +
}
 +
 +
 +
</style>
 +
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
 +
<div id="slider" width="50%">
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" alt>
 +
<img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" alt>
 +
<img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" alt>
 +
<img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" alt>
 +
</figure>
 +
</div>
 
</section>
 
</section>
 +
 +
 
<!--pre footre-->
 
<!--pre footre-->
 
  <div class="w3-container w3-black w3-padding-16">
 
  <div class="w3-container w3-black w3-padding-16">

Revision as of 06:06, 27 September 2017

iGEM Human Practice

Home Attributions Project Human-Practice Notebook Brainstorm
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