Difference between revisions of "Team:CSMU NCHU Taiwan/Design"

(Prototype team page)
 
Line 1: Line 1:
−
{{CSMU_NCHU_Taiwan}}
+
{{:Team:CSMU_NCHU_Taiwan/Templates/Header}}
−
<html>
+
<html lang="en">
 +
  <head>
 +
    <meta charset="UTF-8">
 +
    <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 +
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 +
    <title>Safety</title>
 +
  </head>
 +
    <style type="text/css">
  
 +
* {
 +
  margin: 0;
 +
  padding: 0;
 +
  box-sizing: border-box; }
  
 +
body {
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
  font-family: 'Ubuntu' !important; }
  
  
−
<div class="column full_size">
+
.bg-container {
−
<h1>Design</h1>
+
  overflow: hidden;
−
<p>
+
  position: relative;
−
Design is the first step in the design-build-test cycle in engineering and synthetic biology. Use this page to describe the process that you used in the design of your parts. You should clearly explain the engineering principles used to design your project.
+
  max-height: 200vh; }
−
</p>
+
  .bg-container > img {
 +
    width: 100%;
 +
    margin-top: -45px; }
  
−
<p>
+
.my-main-container {
−
This page is different to the "Applied Design Award" page. Please see the <a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/Applied_Design">Applied Design</a> page for more information on how to compete for that award.
+
  position: absolute;
−
</p>
+
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 50px 7%;
 +
  min-height: 200vh;
 +
  overflow: hidden; }
  
−
</div>
+
.main-content {
 +
  background-color: white;
 +
  width: 80%;
 +
  margin-left: 10%;
 +
  padding: 50px;
 +
  min-height: 180vh;
 +
  z-index: 10; }
  
−
<div class="column half_size">
+
.text-area {
−
<h5>What should this page contain?</h5>
+
  margin-bottom: 80px; }
−
<ul>
+
  .text-area h1 {
−
<li>Explanation of the engineering principles your team used in your design</li>
+
    font-size: 60px;
−
<li>Discussion of the design iterations your team went through</li>
+
    font-weight: 700;
−
<li>Experimental plan to test your designs</li>
+
    font-family: 'Arizonia' !important;
−
</ul>
+
    text-align: center;
 +
    margin-bottom: 1rem; }
 +
  .text-area p {
 +
    font-size: 22px;
 +
    font-weight: 500; }
  
−
</div>
+
.text-area img {
 +
  width: 100%; }
  
−
<div class="column half_size">
+
.path-btns {
−
<h5>Inspiration</h5>
+
  position: fixed;
−
<ul>
+
  width: 250px;
−
<li><a href="https://2016.igem.org/Team:MIT/Experiments/Promoters">2016 MIT</a></li>
+
  top: 200px;
−
<li><a href="https://2016.igem.org/Team:BostonU/Proof">2016 BostonU</a></li>
+
  left: 225px; }
−
<li><a href="https://2016.igem.org/Team:NCTU_Formosa/Design">2016 NCTU Formosa</a></li>
+
  .path-btns .path-dot {
−
</ul>
+
    width: 25px;
−
</div>
+
    height: 25px;
 +
    border-radius: 50%;
 +
    position: absolute;
 +
    background-color: #fff;
 +
    top: 5px;
 +
    left: 27px;
 +
    border: 5px solid #385e66;
 +
    cursor: pointer; }
 +
    .path-btns .path-dot.active {
 +
      background-color: #385e66; }
 +
    .path-btns .path-dot:hover {
 +
      transition: all .3s;
 +
      transform: scale(1.2); }
  
  
 +
.path {
 +
  height: 65px;
 +
  display: flex; }
 +
  .path .pathSvg {
 +
    display: block; }
 +
  .path .pathWord {
 +
    padding-right: 10%; }
 +
  .path .path-btn {
 +
    cursor: pointer;
 +
    fill: #fff; }
 +
    .path .path-btn.path-active {
 +
      fill: #385e66; }
 +
  .path .path-word-sm {
 +
    font-size: 12px; }
 +
#HQ_page .path .pathWord p {
 +
      font-weight: 700;
 +
      text-align: left !important;
 +
      font-size: 16px;
 +
}
 +
#HQ_page .text-area p {
 +
  font-size: 22px;
 +
  font-family: 'Ubuntu';
 +
  font-weight: 500; }
 +
img.center {
 +
  display: block;
 +
  margin: 0 auto; }
  
 +
#HQ_page .text-area h2 {
 +
    text-align: center;
 +
    margin-bottom: 2rem !important;
 +
    margin-top: 2rem;
 +
    color: black !important; }
 +
</style>
 +
  <body>
 +
    <div class="bg-container">
 +
      <img src="https://static.igem.org/mediawiki/2017/a/af/T--CSMU_NCHU_Taiwan--design.png">
 +
      <div class="my-main-container">
 +
        <div class="main-content">
 +
          <div class="text-area">
 +
            <h1>Design</h1>
 +
            <img class = "center" src="https://static.igem.org/mediawiki/2017/1/16/T--CSMU_NCHU_Taiwan--design-antidote.png" alt="" style="width:30%;">
 +
            <h2>Thioredoxin ... </h2>
 +
            <p>In our project, ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.</p>
 +
            <img src="" alt="">
 +
            <img src="https://static.igem.org/mediawiki/2017/b/b9/T--CSMU_NCHU_Taiwan--design-line.png" alt="">
 +
            <h2>Aflatoxin ... </h2>
 +
            <p>In our project, ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.</p>
 +
            <img src="" alt="">
 +
            <img src="https://static.igem.org/mediawiki/2017/b/b9/T--CSMU_NCHU_Taiwan--design-line.png" alt="">
 +
            <h2>The activator ... </h2>
 +
            <p>In our project, ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.</p>
 +
            <img src="" alt="">
 +
            <img src="" alt="">
 +
            <img src="https://static.igem.org/mediawiki/2017/b/b9/T--CSMU_NCHU_Taiwan--design-line.png" alt="">
 +
 +
 +
          </div>
 +
          <div class="pdf-area">
 +
            <span class="pdfbtn" id="design-btn-1">Reference<i class="fa fa-caret-down" aria-hidden="true"></i></span>
 +
            <div class="pdf-container" id="design-1">
 +
              <object data="" type="application/pdf" width="100%" height="100%">
 +
                <p>Alternative text - include a link <a href="">to the PDF!</a></p>
 +
              </object>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="top">
 +
      <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
 +
    </div>
 +
  </body>
 +
  <script type="text/javascript">
 +
    $('#design-btn-1').on('click', function(){
 +
      $('#design-1').css('height','250vh')
 +
      $('#design-1').slideToggle("slow");
 +
      $('.bg-container').css('max-height','500vh')
 +
      $('.main-content').css('min-height','200vh')
 +
    });
 +
    $('.top').on('click', function(){
 +
      $('html, body').animate({scrollTop: '0px'}, 500);
 +
    });
 +
</script>
 
</html>
 
</html>

Revision as of 07:35, 30 October 2017

HOME
Safety

Design

Thioredoxin ...

In our project, ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.

Aflatoxin ...

In our project, ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.

The activator ...

In our project, ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.

Reference

Alternative text - include a link to the PDF!