Line 4: | Line 4: | ||
<html> | <html> | ||
− | <style> | + | <style> |
− | @import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600'); | + | @import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600'); |
− | a { | + | a { |
− | text-decoration: none; | + | text-decoration: none; |
− | color: inherit; | + | color: inherit; |
− | } | + | } |
− | div .protocols { | + | div .protocols { |
− | width: 100%; | + | width: 100%; |
− | min-width: 300px; | + | min-width: 300px; |
− | max-width: 800px; | + | max-width: 800px; |
− | margin: 1.5em auto; | + | margin: 1.5em auto; |
− | color: #333; | + | color: #333; |
− | box-sizing: border-box; | + | box-sizing: border-box; |
− | } | + | } |
− | ul { | + | ul { |
− | list-style: none; | + | list-style: none; |
− | padding: 0; | + | padding: 0; |
− | } | + | } |
− | ul .inner { | + | ul .inner { |
− | padding-left: 50px; | + | padding-left: 50px; |
− | padding-top: 10px; | + | padding-top: 10px; |
− | overflow: hidden; | + | overflow: hidden; |
− | display: none; | + | display: none; |
− | } | + | } |
− | ul li { | + | ul li { |
− | margin: .5em 0; | + | margin: .5em 0; |
− | font-weight: 300; | + | font-weight: 300; |
− | } | + | } |
− | ul li a.toggle { | + | ul li a.toggle { |
− | display: block; | + | display: block; |
− | background: rgba(0, 166, 214, 1); | + | background: rgba(0, 166, 214, 1); |
− | color: #fefefe; | + | color: #fefefe; |
− | padding: .75em; | + | padding: .75em; |
− | padding-left: 50px; | + | padding-left: 50px; |
− | border-radius: 0.5em; | + | border-radius: 0.5em; |
− | transition: background .3s ease; | + | transition: background .3s ease; |
− | text-decoration: none; | + | text-decoration: none; |
− | } | + | } |
− | ul li a.toggle:hover { | + | ul li a.toggle:hover { |
− | background: rgba(0, 166, 214, 0.65); | + | background: rgba(0, 166, 214, 0.65); |
− | } | + | } |
− | </style> | + | </style> |
− | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> |
− | <body> | + | <body> |
− | + | <br> | |
<div class="Banner container-fluid text-center mb-0 align-items-center "> | <div class="Banner container-fluid text-center mb-0 align-items-center "> | ||
Line 73: | Line 73: | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | <div class= "protocol centerjustify"> | |
− | |||
− | <h2>Orthogonal replication</h2> | + | <h2>Orthogonal replication</h2> |
− | <ul> | + | <h3>Basic Parts<h3> |
− | <li> | + | <ul> |
− | <a class="toggle" href="javascript:void(0);" ><b>Promoters</b></a> | + | <li> |
− | <div class="inner"> | + | <a class="toggle" href="javascript:void(0);" ><b>Promoters</b></a> |
− | <p> | + | <div class="inner"> |
+ | <p> | ||
− | </p> | + | </p> |
− | </div> | + | </div> |
− | </li> | + | </li> |
− | <li> | + | <li> |
− | <a class="toggle" href="javascript:void(0);" ><b>Ribosome Binding Site</b></a> | + | <a class="toggle" href="javascript:void(0);" ><b>Ribosome Binding Site</b></a> |
− | <div class="inner"> | + | <div class="inner"> |
− | <p> | + | <p> |
− | </p> | + | </p> |
− | </div> | + | </div> |
− | </li> | + | </li> |
− | <li> | + | <li> |
− | <a class="toggle" href="javascript:void(0);" ><b>Coding Sequence</b></a> | + | <a class="toggle" href="javascript:void(0);" ><b>Coding Sequence</b></a> |
− | <div class="inner"> | + | <div class="inner"> |
− | <p> | + | <p> |
− | </p> | + | </p> |
− | </div> | + | </div> |
− | </li> | + | </li> |
+ | <li> | ||
+ | <a class="toggle" href="javascript:void(0);" ><b>Terminator</b></a> | ||
+ | <div class="inner"> | ||
+ | <p> | ||
− | < | + | </p> |
− | + | </div> | |
− | + | </li> | |
− | + | </ul> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | <h2>Controllable expression</h2> |
− | </div> | + | <h3>Basic Parts<h3> |
− | < | + | <ul> |
+ | <li> | ||
+ | <a class="toggle" href="javascript:void(0);" ><b>Promoters</b></a> | ||
+ | <div class="inner"> | ||
+ | <p> | ||
− | < | + | </p> |
− | + | </div> | |
− | + | </li> | |
− | < | + | |
− | < | + | <li> |
− | </div> | + | <a class="toggle" href="javascript:void(0);" ><b>Ribosome Binding Site</b></a> |
− | < | + | <div class="inner"> |
+ | <p> | ||
− | < | + | </p> |
− | + | </div> | |
− | + | </li> | |
− | < | + | |
− | < | + | <li> |
− | </div> | + | <a class="toggle" href="javascript:void(0);" ><b>Coding Sequence</b></a> |
− | < | + | <div class="inner"> |
+ | <p> | ||
− | <li> | + | </p> |
− | <a class="toggle" href="javascript:void(0);" ><b> | + | </div> |
− | <div class="inner"> | + | </li> |
+ | <li> | ||
+ | <a class="toggle" href="javascript:void(0);" ><b>Terminator</b></a> | ||
+ | <div class="inner"> | ||
+ | <p> | ||
− | </div> | + | </p> |
− | </li> | + | </div> |
− | </ul> | + | </li> |
+ | </ul> | ||
+ | <h3>Composite parts<h3> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | < | + | <script> $('.toggle').click(function(e) { |
− | + | e.preventDefault(); | |
− | + | ||
− | + | var $this = $(this); | |
− | + | ||
− | + | ||
− | + | ||
− | + | if ($this.next().hasClass('show')) { | |
− | + | $this.next().removeClass('show'); | |
− | </ | + | $this.next().slideUp(350); |
+ | } else { | ||
+ | $this.parent().parent().find('li .inner').removeClass('show'); | ||
+ | $this.parent().parent().find('li .inner').slideUp(350); | ||
+ | $this.next().toggleClass('show'); | ||
+ | $this.next().slideToggle(350); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
− | + | </div> | |
− | + | </body> | |
− | + | ||
− | < | + | |
− | </ | + | </html> |
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | + | {{:Team:TUDelft/Footer}} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | {{:Team:TUDelft/Footer}} | + |
Revision as of 08:05, 9 September 2019
![Protocol Experiments](https://static.igem.org/mediawiki/2019/0/03/T--TUDelft--Modeling_logo.png)
Orthogonal replication
Basic Parts
Controllable expression
Basic Parts
Composite parts
Controllable expression
Basic Parts
Composite parts
Composite parts