Difference between revisions of "Team:TUDelft/Parts"

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>
+
        <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">
+
        <div class= "protocol centerjustify">
  
−
</p>
 
  
−
<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>  
  
−
<li>
+
                            </p>
−
<a class="toggle" href="javascript:void(0);" ><b>Terminators?</b></a>
+
                        </div>
−
<div class="inner">
+
                    </li>
−
  <h2>Orthogonal Transcription</h2>
+
                </ul>
−
<ul>
+
−
<li>
+
−
<a class="toggle" href="javascript:void(0);" ><b>Promoters</b></a>
+
−
<div class="inner">
+
−
<p>  
+
  
−
</p>
+
                <h2>Controllable expression</h2>
−
</div>
+
                <h3>Basic Parts<h3>
−
</li>
+
                    <ul>
 +
                        <li>
 +
                            <a class="toggle" href="javascript:void(0);" ><b>Promoters</b></a>
 +
                            <div class="inner">
 +
                                <p>  
  
−
<li>
+
                                </p>
−
<a class="toggle" href="javascript:void(0);" ><b>Ribosome Binding Site</b></a>
+
                            </div>
−
<div class="inner">
+
                        </li>
−
<p>  
+
  
−
</p>
+
                        <li>
−
</div>
+
                            <a class="toggle" href="javascript:void(0);" ><b>Ribosome Binding Site</b></a>
−
</li>
+
                            <div class="inner">
 +
                                <p>  
  
−
<li>
+
                                </p>
−
<a class="toggle" href="javascript:void(0);" ><b>Coding Sequence</b></a>
+
                            </div>
−
<div class="inner">
+
                        </li>
−
<p>  
+
  
−
</p>
+
                        <li>
−
</div>
+
                            <a class="toggle" href="javascript:void(0);" ><b>Coding Sequence</b></a>
−
</li>
+
                            <div class="inner">
 +
                                <p>  
  
−
<li>
+
                                </p>
−
<a class="toggle" href="javascript:void(0);" ><b>Terminators?</b></a>
+
                            </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>
  
−
 
−
    <h2>Controlable expression</h2>
 
−
<ul>
 
−
<li>
 
−
<a class="toggle" href="javascript:void(0);" ><b>Promoters</b></a>
 
−
<div class="inner">
 
−
<p>
 
  
−
</p>
 
−
</div>
 
−
</li>
 
  
−
<li>
 
−
<a class="toggle" href="javascript:void(0);" ><b>Ribosome Binding Site</b></a>
 
−
<div class="inner">
 
−
<p>
 
  
−
</p>
 
−
</div>
 
−
</li>
 
  
−
<li>
 
−
<a class="toggle" href="javascript:void(0);" ><b>Coding Sequence</b></a>
 
−
<div class="inner">
 
−
<p>
 
  
−
</p>
 
−
</div>
 
−
</li>
 
  
−
<li>
 
−
<a class="toggle" href="javascript:void(0);" ><b>Terminators?</b></a>
 
−
<div class="inner">
 
−
  <h2>Orthogonal Transcription</h2>
 
−
<ul>
 
−
<li>
 
−
<a class="toggle" href="javascript:void(0);" ><b>Promoters</b></a>
 
−
<div class="inner">
 
−
<p>
 
  
−
</p>
+
                        <script> $('.toggle').click(function(e) {
−
</div>
+
                                e.preventDefault();
−
</li>
+
  
−
<li>
+
                                var $this = $(this);
−
<a class="toggle" href="javascript:void(0);" ><b>Ribosome Binding Site</b></a>
+
−
<div class="inner">
+
−
<p>
+
  
−
</p>
+
                                if ($this.next().hasClass('show')) {
−
</div>
+
                                    $this.next().removeClass('show');
−
</li>
+
                                    $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>
  
−
<li>
+
                        </div>
−
<a class="toggle" href="javascript:void(0);" ><b>Coding Sequence</b></a>
+
                        </body>
−
<div class="inner">
+
−
<p>  
+
  
−
</p>
+
                    </html>
−
</div>
+
−
</li>
+
  
−
<li>
 
−
<a class="toggle" href="javascript:void(0);" ><b>Terminators?</b></a>
 
−
<div class="inner">
 
  
−
</div>
+
                    {{:Team:TUDelft/Footer}}
−
</li>
+
−
</ul>
+
−
 
+
−
 
+
−
 
+
−
<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}}
+

Revision as of 08:05, 9 September 2019

Sci-Phi 29


Orthogonal replication

Basic Parts

Controllable expression

Basic Parts

Composite parts