Difference between revisions of "Team:Mingdao/HP/Gold Integrated"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
<title>iG aEM Human Practice</title>
+
<title>iGEM Human Practice</title>
 
<meta charset="utf-8" />
 
<meta charset="utf-8" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
Line 4,458: Line 4,458:
 
</div>
 
</div>
 
</section>
 
</section>
−
<!--Try something new-->
+
 +
<!-- Card section start -->
 
<section>
 
<section>
−
<!-- Work Row -->
 
 
<div class="w3-row-padding w3-padding-64" id="work" style="background: #333333">
 
<div class="w3-row-padding w3-padding-64" id="work" style="background: #333333">
−
 
+
<!-- Quarter 1 -->
 
<div class="w3-quarter" style="color: white">
 
<div class="w3-quarter" style="color: white">
 
<h2 style="color: white">Generic Topic</h2>
 
<h2 style="color: white">Generic Topic</h2>
 
<p>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.</p>
 
<p>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.</p>
 
</div>
 
</div>
−
 
+
<!-- Quarter 2 / [Card] first one-->
 
<div class="w3-quarter">
 
<div class="w3-quarter">
−
<div class="w3-card-2 w3-white">
+
<div class="w3-card-2 w3-white">
−
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" alt="Vernazza" style="width:100%">
+
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" alt="Banner 2" style="width:100%">
−
  <div class="w3-container">
+
  <div class="w3-container">
−
  <h3>Seminar</h3>
+
  <h3>Seminar</h3>
−
  <h4>Trade</h4>
+
  <h4>Trade</h4>
−
  <p>Blablabla</p>
+
  <p>Blablabla</p>
−
  <p>Blablabla</p>
+
  <p>Blablabla</p>
−
  <p>Blablabla</p>
+
  <p>Blablabla</p>
−
<div class="w3-container">
+
  <div class="w3-container">
−
+
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black" style="width: 100%">Learn More</button>
−
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black" style="width: 100%">Learn More</button>
+
<div id="id01" class="w3-modal">
  
−
<div id="id01" class="w3-modal">
+
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
−
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
+
  <header class="w3-container w3-blue">  
−
  <header class="w3-container w3-blue">  
+
  <span onclick="document.getElementById('id01').style.display='none'"  
−
  <span onclick="document.getElementById('id01').style.display='none'"  
+
  class="w3-button w3-blue w3-xlarge w3-display-topright">&times;</span>
−
  class="w3-button w3-blue w3-xlarge w3-display-topright">&times;</span>
+
  <h2>Header</h2>
−
  <h2>Header</h2>
+
  </header>
−
  </header>
+
  
−
  <div class="w3-bar w3-border-bottom">
+
  <div class="w3-bar w3-border-bottom">
−
  <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
+
  <button class="tablink2 w3-bar-item w3-button" onclick="openCity(event, 'London1')">London</button>
−
  <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
+
  <button class="tablink2 w3-bar-item w3-button" onclick="openCity(event, 'Paris1')">Paris</button>
−
  <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
+
  <button class="tablink2 w3-bar-item w3-button" onclick="openCity(event, 'Tokyo1')">Tokyo</button>
−
  </div>
+
  </div>
  
−
  <div id="London" class="w3-container city">
+
  <div id="London1" class="w3-container city2">
−
  <img src="https://static.igem.org/mediawiki/2017/8/89/Md-brainstorm-test.jpeg" width="100%">
+
  <img src="https://static.igem.org/mediawiki/2017/8/89/Md-brainstorm-test.jpeg" width="100%">
−
  <p><i>Pic. Description</i>&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
+
  <p><i>Pic. Description</i>&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
−
  <div class="w3-panel w3-leftbar w3-light-grey">
+
  <div class="w3-panel w3-leftbar w3-light-grey">
−
<p class="w3-xlarge w3-serif"><i>Topic of Something</i></p>
+
<p class="w3-xlarge w3-serif"><i>Topic of Something</i></p>
−
<p>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.</p>
+
<p>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.</p>
−
  </div>
+
  </div>
−
  </div>
+
  </div>
  
−
  <div id="Paris" class="w3-container city">
+
  <div id="Paris1" class="w3-container city2">
−
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" width="100%">
+
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" width="100%">
−
  <p><i>Pic. Description</i>&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
+
  <p><i>Pic. Description</i>&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
−
  <div class="w3-panel w3-leftbar w3-light-grey">
+
  <div class="w3-panel w3-leftbar w3-light-grey">
−
<p class="w3-xlarge w3-serif"><i>Topic of Something</i></p>
+
<p class="w3-xlarge w3-serif"><i>Topic of Something</i></p>
−
<p>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.</p>
+
<p>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.</p>
−
  </div>
+
  </div>
−
  </div>
+
  </div>
  
−
  <div id="Tokyo" class="w3-container city">
+
  <div id="Tokyo1" class="w3-container city2">
−
  <img src="https://static.igem.org/mediawiki/2017/8/89/Md-brainstorm-test.jpeg" width="100%">
+
  <img src="https://static.igem.org/mediawiki/2017/8/89/Md-brainstorm-test.jpeg" width="100%">
−
  <p><i>Pic. Description</i>&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
+
  <p><i>Pic. Description</i>&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
−
  <div class="w3-panel w3-leftbar w3-light-grey">
+
  <div class="w3-panel w3-leftbar w3-light-grey">
−
<p class="w3-xlarge w3-serif"><i>Topic of Something</i></p>
+
<p class="w3-xlarge w3-serif"><i>Topic of Something</i></p>
−
<p>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.</p>
+
<p>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.</p>
−
  </div>
+
  </div>
−
  </div>
+
  </div>
  
−
  <div class="w3-container w3-light-grey w3-padding">
+
<div class="w3-container w3-light-grey w3-padding">
−
  <button class="w3-button w3-right w3-white w3-border"  
+
<button class="w3-button w3-right w3-white w3-border"   onclick="document.getElementById('id01').style.display='none'">Close</button>
−
  onclick="document.getElementById('id01').style.display='none'">Close</button>
+
  </div>
−
  </div>
+
</div>
−
</div>
+
</div>
−
</div>
+
<!-- Script of tabbed modal -->
 +
<script>
 +
document.getElementsByClassName("tablink2")[0].click();
  
−
</div>
+
function openCity(evt, cityName) {
−
 
+
  var i, x, tablinks;
−
<script>
+
  x = document.getElementsByClassName("city2");
−
document.getElementsByClassName("tablink")[0].click();
+
  for (i = 0; i < x.length; i++) {
−
 
+
x[i].style.display = "none";
−
function openCity(evt, cityName) {
+
  }
−
  var i, x, tablinks;
+
  tablinks = document.getElementsByClassName("tablink2");
−
  x = document.getElementsByClassName("city");
+
  for (i = 0; i < x.length; i++) {
−
  for (i = 0; i < x.length; i++) {
+
tablinks[i].classList.remove("w3-light-grey");
−
x[i].style.display = "none";
+
  }
−
  }
+
  document.getElementById(cityName).style.display = "block";
−
  tablinks = document.getElementsByClassName("tablink");
+
  evt.currentTarget.classList.add("w3-light-grey");
−
  for (i = 0; i < x.length; i++) {
+
}
−
tablinks[i].classList.remove("w3-light-grey");
+
</script>
−
  }
+
  </div>
−
  document.getElementById(cityName).style.display = "block";
+
  </div>
−
  evt.currentTarget.classList.add("w3-light-grey");
+
−
}
+
−
</script>
+
−
 
+
−
  </div>
+
 
  </div>
 
  </div>
 
</div>
 
</div>
−
 
+
−
<div class="w3-quarter">
+
<!--Second card section start-->
−
<div class="w3-card-2 w3-white">
+
<div class="w3-quarter">
−
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" alt="Cinque Terre" style="width:100%">
+
<div class="w3-card-2 w3-white">
−
  <div class="w3-container">
+
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" alt="Banner 2" style="width:100%">
−
  <h3>Customer 2</h3>
+
  <div class="w3-container">
−
  <h4>Trade</h4>
+
  <h3>Seminar</h3>
−
  <p>Blablabla</p>
+
  <h4>Trade</h4>
−
  <p>Blablabla</p>
+
  <p>Blablabla</p>
−
  <p>Blablabla</p>
+
  <p>Blablabla</p>
−
<div class="w3-container">
+
  <p>Blablabla</p>
 +
  <div class="w3-container">
 
 
−
<button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black" style="width: 100%">Learn More</button>
+
<button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black" style="width: 100%">Learn More</button>
 +
<div id="id02" class="w3-modal">
  
−
<div id="id02" class="w3-modal">
+
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
−
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
+
  <header class="w3-container w3-blue">  
−
  <header class="w3-container w3-blue">  
+
  <span onclick="document.getElementById('id02').style.display='none'"  
−
  <span onclick="document.getElementById('id02').style.display='none'"  
+
  class="w3-button w3-blue w3-xlarge w3-display-topright">&times;</span>
−
  class="w3-button w3-blue w3-xlarge w3-display-topright">&times;</span>
+
  <h2>Header</h2>
−
  <h2>Header</h2>
+
  </header>
−
  </header>
+
  
−
  <div class="w3-bar w3-border-bottom">
+
  <div class="w3-bar w3-border-bottom">
−
  <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'London02')">London</button>
+
  <button class="tablink2 w3-bar-item w3-button" onclick="openCity(event, 'London2')">London</button>
−
  <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Paris02')">Paris</button>
+
  <button class="tablink2 w3-bar-item w3-button" onclick="openCity(event, 'Paris2')">Paris</button>
−
  <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Tokyo02')">Tokyo</button>
+
  <button class="tablink2 w3-bar-item w3-button" onclick="openCity(event, 'Tokyo2')">Tokyo</button>
−
  </div>
+
  </div>
  
−
  <div id="London02" class="w3-container city">
+
  <div id="London2" class="w3-container city2">
−
  <h1>London</h1>
+
  <img src="https://static.igem.org/mediawiki/2017/8/89/Md-brainstorm-test.jpeg" width="100%">
−
  </div>
+
  <p><i>Pic. Description</i>&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
 +
  <div class="w3-panel w3-leftbar w3-light-grey">
 +
<p class="w3-xlarge w3-serif"><i>Topic of Something</i></p>
 +
<p>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.</p>
 +
  </div>
 +
  </div>
  
−
  <div id="Paris02" class="w3-container city">
+
  <div id="Paris2" class="w3-container city2">
−
  <h1>Paris</h1>
+
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" width="100%">
−
  </div>
+
  <p><i>Pic. Description</i>&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
 +
  <div class="w3-panel w3-leftbar w3-light-grey">
 +
<p class="w3-xlarge w3-serif"><i>Topic of Something</i></p>
 +
<p>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.</p>
 +
  </div>
 +
  </div>
  
−
  <div id="Tokyo02" class="w3-container city">
+
  <div id="Tokyo2" class="w3-container city2">
−
  <h1>Tokyo</h1>
+
  <img src="https://static.igem.org/mediawiki/2017/8/89/Md-brainstorm-test.jpeg" width="100%">
−
  </div>
+
  <p><i>Pic. Description</i>&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
 +
  <div class="w3-panel w3-leftbar w3-light-grey">
 +
<p class="w3-xlarge w3-serif"><i>Topic of Something</i></p>
 +
<p>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.</p>
 +
  </div>
 +
  </div>
  
−
  <div class="w3-container w3-light-grey w3-padding">
+
<div class="w3-container w3-light-grey w3-padding">
−
  <button class="w3-button w3-right w3-white w3-border"  
+
<button class="w3-button w3-right w3-white w3-border"   onclick="document.getElementById('id02').style.display='none'">Close</button>
−
  onclick="document.getElementById('id02').style.display='none'">Close</button>
+
  </div>
−
  </div>
+
</div>
−
</div>
+
</div>
−
</div>
+
<!-- Script of tabbed modal -->
−
 
+
<script>
−
</div>
+
document.getElementsByClassName("tablink2")[0].click();
  
−
  </div>
+
function openCity(evt, cityName) {
 +
  var i, x, tablinks;
 +
  x = document.getElementsByClassName("city2");
 +
  for (i = 0; i < x.length; i++) {
 +
x[i].style.display = "none";
 +
  }
 +
  tablinks = document.getElementsByClassName("tablink2");
 +
  for (i = 0; i < x.length; i++) {
 +
tablinks[i].classList.remove("w3-light-grey");
 +
  }
 +
  document.getElementById(cityName).style.display = "block";
 +
  evt.currentTarget.classList.add("w3-light-grey");
 +
}
 +
</script>
 +
  </div>
 +
  </div>
 
  </div>
 
  </div>
 
</div>
 
</div>
−
 
+
−
<div class="w3-quarter">
+
<!--Third card section-->
−
<div class="w3-card-2 w3-white">
+
<div class="w3-quarter">
−
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" alt="Monterosso" style="width:100%">
+
<div class="w3-card-2 w3-white">
−
  <div class="w3-container">
+
  <img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" alt="Monterosso" style="width:100%">
−
  <h3>Customer 3</h3>
+
  <div class="w3-container">
−
  <h4>Trade</h4>
+
<h3>Customer 3</h3>
−
  <p>Blablabla</p>
+
<h4>Trade</h4>
−
  <p>Blablabla</p>
+
<p>Blablabla</p>
−
  <p>Blablabla</p>
+
<p>Blablabla</p>
−
<div class="w3-container">
+
<p>Blablabla</p>
−
+
<div class="w3-container">
−
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black" style="width: 100%">Learn More</button>
+
<button onclick="document.getElementById('id03').style.display='block'" class="w3-button w3-black" style="width: 100%">Learn More</button>
−
 
+
</div>
−
<div id="id01" class="w3-modal">
+
  </div>
−
<div class="w3-modal-content w3-card-4 w3-animate-opacity">
+
</div>
−
  <header class="w3-container w3-blue">
+
−
  <span onclick="document.getElementById('id01').style.display='none'"
+
−
  class="w3-button w3-blue w3-xlarge w3-display-topright">&times;</span>
+
−
  <h2>Header</h2>
+
−
  </header>
+
−
 
+
−
  <div class="w3-bar w3-border-bottom">
+
−
  <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
+
−
  <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
+
−
  <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
+
−
  </div>
+
−
 
+
−
  <div id="London" class="w3-container city">
+
−
  <h1>London</h1>
+
−
  <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
+
−
  <p>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.</p>
+
−
  </div>
+
−
 
+
−
  <div id="Paris" class="w3-container city">
+
−
  <h1>Paris</h1>
+
−
  <p>Paris is the capital of France.</p>
+
−
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
−
  </div>
+
−
 
+
−
  <div id="Tokyo" class="w3-container city">
+
−
  <h1>Tokyo</h1>
+
−
  <p>Tokyo is the capital of Japan.</p><br>
+
−
  </div>
+
−
 
+
−
  <div class="w3-container w3-light-grey w3-padding">
+
−
  <button class="w3-button w3-right w3-white w3-border"
+
−
  onclick="document.getElementById('id01').style.display='none'">Close</button>
+
−
  </div>
+
−
</div>
+
 
</div>
 
</div>
−
 
−
</div>
 
−
  </div>
 
−
  </div>
 
−
</div>
 
  
 
</div>
 
</div>
 
</section>
 
</section>
 +
 +
 +
 +
 
<!--Copy of section 1-->
 
<!--Copy of section 1-->
 
<section id="expert" class="wrapper style2">
 
<section id="expert" class="wrapper style2">
Line 4,741: Line 4,733:
  
 
<div class="w3-third">
 
<div class="w3-third">
−
<div class="w3-card white">
+
<div class="w3-card ">
−
  <div class="w3-container w3-indigo">
+
  <div class="w3-container w3-theme" style="background-color: #6A8FC8">
 
<h3 style="color: white">Achieve 1</h3>
 
<h3 style="color: white">Achieve 1</h3>
 
  </div>
 
  </div>
 
  <div class="w3-container">
 
  <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);">
+
<!-- Lightbox code -->
 +
  <div id="mdlightbox">
 +
  <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); "onclick="document.getElementById('isModalPic1').style.display='block'" class="w3-hover-opacity">
 +
  <div id="isModalPic1" class="w3-modal">
 +
<div class="w3-modal-content w3-animate-top w3-card-4">
 +
  <header class="w3-container w3-teal">
 +
<span onclick="document.getElementById('isModalPic1').style.display='none'"
 +
class="w3-button w3-display-topright">&times;</span>
 +
<h2>Modal Header</h2>
 +
  </header>
 +
  <div class="w3-container">
 +
<div class="w3-col">&nbsp;</div>
 +
<div class>
 +
<img src="https://static.igem.org/mediawiki/2017/4/41/Mingdaojay0930-3.jpeg" style="width:100%;cursor:pointer;" onclick="onClick(this)">
 +
  </div>
 +
<div class="w3-col">&nbsp;</div>
 +
  </div>
 +
  <footer class="w3-container w3-teal">
 +
<p>Modal Footer</p>
 +
  </footer>
 +
</div>
 +
  </div>
 +
  </div>
 +
<!-- Lightbox code end -->
 
  </div>
 
  </div>
 +
 
 
  <ul class="w3-ul w3-border-top">
 
  <ul class="w3-ul w3-border-top">
 
<li>
 
<li>
Line 4,758: Line 4,774:
 
</li>
 
</li>
 
  </ul>
 
  </ul>
−
  <div class="w3-container w3-indigo w3-large"><span class="w3-right">Next</span></div>
+
  <div class="w3-container w3-theme w3-large" style="background: #6a8fc8;">&nbsp;</div>
 
</div>
 
</div>
 
</div>
 
</div>
Line 4,768: Line 4,784:
 
  </div>
 
  </div>
 
  <div class="w3-container">
 
  <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);">
+
  <!-- Lightbox code -->
 +
  <div id="mdlightbox">
 +
  <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); "onclick="document.getElementById('isModalPic2').style.display='block'" class="w3-hover-opacity">
 +
  <div id="isModalPic2" class="w3-modal">
 +
<div class="w3-modal-content w3-animate-top w3-card-4">
 +
  <header class="w3-container w3-teal">
 +
<span onclick="document.getElementById('isModalPic2').style.display='none'"
 +
class="w3-button w3-display-topright">&times;</span>
 +
<h2>Modal Header</h2>
 +
  </header>
 +
  <div class="w3-container">
 +
<div class="w3-col">&nbsp;</div>
 +
<div class>
 +
<img src="https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg" style="width:100%;cursor:pointer;" onclick="onClick(this)">
 +
  </div>
 +
<div class="w3-col">&nbsp;</div>
 +
  </div>
 +
  <footer class="w3-container w3-teal">
 +
<p>Modal Footer</p>
 +
  </footer>
 +
</div>
 +
  </div>
 +
  </div>
 +
<!-- Lightbox code end -->
 
  </div>
 
  </div>
 
  <ul class="w3-ul w3-border-top">
 
  <ul class="w3-ul w3-border-top">
Line 4,780: Line 4,819:
 
</li>
 
</li>
 
  </ul>
 
  </ul>
−
  <div class="w3-container w3-indigo w3-large"><span class="w3-right">Next</span></div>
+
  <div class="w3-container w3-indigo w3-large">&nbsp;</div>
 
</div>
 
</div>
 
</div>
 
</div>
Line 4,790: Line 4,829:
 
  </div>
 
  </div>
 
  <div class="w3-container">
 
  <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);">
+
<!-- Lightbox code -->
 +
  <div id="mdlightbox">
 +
  <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); "onclick="document.getElementById('isModalPic3').style.display='block'" class="w3-hover-opacity">
 +
  <div id="isModalPic3" class="w3-modal">
 +
<div class="w3-modal-content w3-animate-top w3-card-4">
 +
  <header class="w3-container w3-teal">
 +
<span onclick="document.getElementById('isModalPic3').style.display='none'"
 +
class="w3-button w3-display-topright">&times;</span>
 +
<h2>Modal Header</h2>
 +
  </header>
 +
  <div class="w3-container">
 +
<div class="w3-col">&nbsp;</div>
 +
<div class>
 +
<img src="https://static.igem.org/mediawiki/2017/8/89/Md-brainstorm-test.jpeg" style="width:100%;cursor:pointer;" onclick="onClick(this)">
 +
  </div>
 +
<div class="w3-col">&nbsp;</div>
 +
  </div>
 +
  <footer class="w3-container w3-teal">
 +
<p>Modal Footer</p>
 +
  </footer>
 +
</div>
 +
  </div>
 +
  </div>
 +
<!-- Lightbox code end -->
 
  </div>
 
  </div>
 +
 
 
  <ul class="w3-ul w3-border-top">
 
  <ul class="w3-ul w3-border-top">
 
<li>
 
<li>
Line 4,802: Line 4,865:
 
</li>
 
</li>
 
  </ul>
 
  </ul>
−
  <div class="w3-container w3-theme w3-large" style="background: #6a8fc8;"><span class="w3-right" style="color: white">Next</span></div>
+
  <div class="w3-container w3-theme w3-large" style="background: #6a8fc8;">&nbsp;</div>
 
</div>
 
</div>
 
</div>
 
</div>
Line 4,809: Line 4,872:
 
<div>
 
<div>
 
<div class="image fit">
 
<div class="image fit">
−
<a href="#"><img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" /></a>
+
<img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" />
 
</div>
 
</div>
 
</div>
 
</div>
 
<div>
 
<div>
−
<div class="image fit">
+
<div id="image fit">
−
<a href="#"><img src="https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png" alt="" /></a>
+
<img src="#"  onclick="document.getElementById('isModalPic').style.display='block'">
 +
  <div id="isModalPic" class="w3-modal">
 +
<div class="w3-modal-content w3-animate-top w3-card-4">
 +
  <header class="w3-container w3-teal">
 +
<span onclick="document.getElementById('isModalPic').style.display='none'"
 +
class="w3-button w3-display-topright">&times;</span>
 +
<h2>Modal Header</h2>
 +
  </header>
 +
  <div class="w3-container">
 +
<div class="w3-col">&nbsp;</div>
 +
<div class>
 +
<img src="https://static.igem.org/mediawiki/2017/4/41/Mingdaojay0930-3.jpeg" style="width:100%;cursor:pointer;" onclick="onClick(this)">
 +
  </div>
 +
<div class="w3-col">&nbsp;</div>
 +
  </div>
 +
  <footer class="w3-container w3-teal">
 +
<p>Modal Footer</p>
 +
  </footer>
 +
</div>
 +
  </div>
 
</div>
 
</div>
 
</div>
 
</div>
Line 4,820: Line 4,902:
 
 
 
</section>
 
</section>
−
+
 
 
 
<!--pre footre-->
 
<!--pre footre-->

Revision as of 14:00, 3 October 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.

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

×

Modal Header

 
 

Modal Footer

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

 

Achieve 2

×

Modal Header

 
 

Modal Footer

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

 

Achieve 3

×

Modal Header

 
 

Modal Footer

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

 
×

Modal Header

 
 

Modal Footer

Project

Research

Design

Modeling

Human Practice

Collaboration

Enterprise...

Experts...

More

Something

Users

Active

Geo

Interests

Brainstorm

Debate

About us