View source for Team:CSMU NCHU Taiwan/test ver90

{{:Team:CSMU_NCHU_Taiwan/Templates/Header}}
<html lang="en">
  <head>
  <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
  </head>

<style type="text/css">

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu' !important; }

.bg-container {
  overflow: hidden;
  position: relative;
background-color: #F6F4E2;
  max-height: 200vh; }
  .bg-container img {
    width: 100%;
   }

.my-main-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 50px 7%;
  min-height: 200vh;
  overflow: hidden; }

.main-content {
  background-color: white;
  width: 80%;
  margin-left: 10%;
  padding: 50px;
  min-height: 180vh;
  z-index: 10; }

.text-area {
  margin-bottom: 80px; }
  .text-area h1 {
    font-size: 48px;
    font-weight: 700;
    font-family: 'Arizonia' !important;
    text-align: center; }
  .text-area p {
    font-size: 22px;
    font-weight: 500; }

.pdfbtn {
  width: 100%;
  margin: 20px 0 10px 0;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #556b7e;
  color: white;
  display: block;
  position: relative; }
  .pdfbtn i {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%); }

.pdf-container {
  width: 100%;
  text-align: center;
  height: 90vh;
  display: none; }

.ul-container {
  width: 100%;
  text-align: center;
  height: auto;
  display: none; }

.ul-container ul {
  text-align: left;
  padding: 20px 50px;
  margin-top: -20px;
  margin-left: 0;

  border: #556b7e solid 2px;
  font-size: 22px; }
  .ul-container ul li {
    list-style: none;
    margin-top: 15px;
    padding-left: 40px;
    background-size: 1em;
    background-image: url(https://static.igem.org/mediawiki/2017/e/ea/T--CSMU_NCHU_Taiwan--circle.png);
    background-repeat: no-repeat;
    background-position: left 5px;
  }
/*    .ul-container ul li:before {
      content: '';
      display: inline-block;
      height: 1em;
      width: 2em;
      background-size: 1em;
      background-image: url(https://static.igem.org/mediawiki/2017/e/ea/T--CSMU_NCHU_Taiwan--circle.png);
      background-repeat: no-repeat; }*/
    .ul-container ul li a {
      text-decoration: none;
      color: #000; }
      .ul-container ul li a:visited, .ul-container ul li a:hover, .ul-container ul li a:focus {
        color: #000;
        text-decoration: none; }
    .ul-container ul li span {
      background-color: #fadd3a;
      padding: 1px 10px;
      border-radius: 5px;
      margin-left: 15px;
      cursor: pointer; 
      }
    .ul-container ul li i {
      padding-left: 10px; }
#HQ_page .text-area p {
  font-size: 22px;
  font-family: 'Ubuntu';
  font-weight: 500; }
.top {
  position: fixed;
  right: 50px;
  bottom: 50px;
  height: 50px;
  width: 50px;
  cursor: pointer; }
  .top img {
    width: 100%; }
 
.right{
  font-size:16px;
  left:70%;
}
</style>

<body>
    <div class="bg-container">
      <img src="https://static.igem.org/mediawiki/2017/9/9b/T--CSMU_NCHU_Taiwan--medal_bg.png">
      <div class="my-main-container">
        <div class="main-content">
          <div class="text-area">
            <h1>Medal Criteria</h1>
            <p>This year iGEM CSMU_NCHU debuts the iGEM competition, completing all the requirements of the iGEM medal criteria, as listed below.</p>

          </div>
          <div class="pdf-area">
            <span class="pdfbtn" id="medal-btn-1">Bronze<i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <div class="ul-container" id="medal-1">
              <ul>
                <li>Registered for iGEM, planned to attend the Giant Jamboree</li>
                <li>Documented our project</li>
                <li>Attributed our work correctly>
<a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/Attributions" target="_blank"><img src="https://static.igem.org/mediawiki/2017/6/66/T--CSMU_NCHU_Taiwan--see_more.png" alt=""style="cursor: pointer ;width:120px"></a>
                </li>
                <li>Created and documented Parts page on the Registry</li>
                <li>Submitted DNA samples to the Registry
		<a href="http://parts.igem.org/cgi/dna_transfer/one_batch.cgi?batch_id=4500" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
		</li>
                <li>Completed safety forms about our lab, about our project and our final safety form</li>
                <li>Completed the judging form	
			<a href="https://igem.org/2017_Judging_Form?id=2382" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
		</li>
                <li>Complete interlab study
                  <a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/InterLab" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
                </li>
              </ul>
            </div>
            <span class="pdfbtn" id="medal-btn-2">Silver<i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <div class="ul-container" id="medal-2">
              <ul>
                <li>Submitted validated parts
                  <a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/Parts" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
                </li>
                <li>Collaboration with other iGEM teams
                  <a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/Collaborations" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
                </li>
                <li>Successfully partcipated in Human Practices
		<a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/HP/Silver" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
		</li> <!-- see more -->
              </ul>
            </div>
            <span class="pdfbtn" id="medal-btn-3">Gold<i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <div class="ul-container" id="medal-3">
              <ul>
                <li>Integrated Human Practices
                  <a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/HP/Gold_Integrated" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
                </li>
                <li>Improve previous part or project：
		We improved a T7 promtore with RBS by adding a sequence in it. 
		<a href="http://parts.igem.org/Part:BBa_K2382003" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
		We also modified the widely used RFP by removing the barcode after its sequence, and did codon optimization for E.coli as a better part for fusion protein.
		<a href="http://parts.igem.org/Part:BBa_K2382013" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
		</li>
                <li>Model our project：We did protein structure simulation and molecular docking to assist our fusion protein design. And moleded its expression quantity with time.
		<a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/Model" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
		</li> <!-- see more -->
                <li>Demonstrate: We successfully engineered a fusion protein Thioredoxin-MSMEG5998 that worked better than MSMEG_5998 alone, and proved its degrading ability in room & body temperature.
		<a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/Demonstrate" target="_blank">
                    <span>See more<i class="fa fa-caret-right" aria-hidden="true"></i></span>
                  </a>
		</li>
              </ul>
            </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">
    $('#medal-btn-1').on('click', function(){
      $('#medal-1').slideToggle("slow");
      $('.bg-container').css('max-height','500vh')
      $('.main-content').css('min-height','200vh')
    });
    $('#medal-btn-2').on('click', function(){
      $('#medal-2').slideToggle("slow");
      $('.bg-container').css('max-height','500vh')
      $('.main-content').css('min-height','200vh')
    });
    $('#medal-btn-3').on('click', function(){
      $('#medal-3').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>