/
index.html
175 lines (153 loc) · 6.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<html>
<head>
<!-- Put fonts and css links here -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Imperial Team Wiki 2021</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link rel="icon" type="image/png" href="content/induceR-favicon-w.png">
<!-- (Google) Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<!-- Main CSS-->
<link href="styles/index.css" rel="stylesheet">
<script src='script/index.js' type="module"></script>
</head>
<body>
<!-- Navigation menu -->
<div class="navbar">
<img id="nav-logo" src="content\induceR-favicon-w.png" alt="induceR">
<div class="dropdown">
<button class="dropbtn">Documentation
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="pages/documentation/protocols.html">Protocols</a>
<a href="pages/documentation/labnotebook.html">Lab Notebook</a>
<a href="pages/documentation/biosafety.html">Biosafety and Ethics</a>
<a href="pages/documentation/resources.html">Resources</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Project
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="pages/project/background.html">Background</a>
<a href="pages/project/design.html">Brainstorming</a>
<a href="pages/project/drylabs.html">Dry Labs</a>
<a href="pages/project/wetlabs.html">Wet Labs</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="pages/about/team.html">Our Team</a>
<a href="pages/about/collab.html">Advisors</a>
<a href="pages/about/sponsors.html">Sponsors</a>
</div>
</div>
<a href="#home">Home</a>
</div>
<div class="banner">
<img id="banner-logo" src="content\induceR-logo-white.png" alt="induceR">
<h1 class="banner-title">DEVELOPING A DUAL FUNCTION QUORUM SENSING TRANSCRIPTOR REGULATOR</h1>
<div id="ellipse"></div>
<img id="home-qs" src="content\home_qs.svg" alt="home-qs">
</div>
<img id="el-membrane" src="content\el_membrane.svg" alt="membrane">
<a href="#main">
<img id="arrow-down" src="content\arrow_down.svg" alt="arrow-down">
</a>
<div class="main" id="main">
<div class="section1">
<div class="main-container">
<div id="ellipse3"></div>
<img id="fig1" src="content/index/fig1.svg">
<h3 id="descript1" class="description">Cells communicate via quorum sensing - release of molecules that can then be picked up by other cells to change an entire community’s behaviour.</h3>
<h3 id="descript2" class="description">Introducing modified quorum sensing systems into an individual cell takes up a lot of that cell’s resources and makes it ‘tired’. This is cell burden. To help that cell distribute this burden, the circuit can be split across the cells.</h3>
<img id="fig2" src="content/index/fig2.svg">
<img id="fig3" src="content/index/fig3.svg">
<h3 id="descript3" class="description">induceR develops a new quorum sensing protein that associates with a non-native molecule. Cells will then have both, a natural and a non-natural quorum sensing systems. It helps to reduce the cell burden.</h3>
</div>
</div>
<img id="el-membrane" src="content\el_membrane.svg" alt="membrane">
<div class="section2">
<h2>WORKFLOW</h2>
<h3>Our general workflow was divided into 2 branches: Dry and Wet lab.<br> In Dry lab, we did bioinformatics analysis to understand the properties of the wild-type protein EsaR, and to simulate its functions before and after mutagenesis.
<br>
In Wet lab, we mutated quorum sensing transcription factors using directed evolution methods.<br>
Directed Evolution applies evolution in the lab to achieve desired properties of organisms more quickly than in nature.
</h3>
<h2>DRY LAB</h2>
<div class="lab-container">
<div id="fig-bg-1-w">
<h3>STAGE 1</h3>
<h3>STRUCTURE PREDICTION</h3>
<a href="pages/project/drylabs.html#stage-title1" id="mol-selection">
<img class="figs" src="content/index/f1.svg">
</a>
</div>
<div id="fig-bg-2-w">
<h3>STAGE 2</h3>
<h3>LIGAND DOCKING & BINDING ANALYSIS</h3>
<a href="pages/project/drylabs.html#stage-title2" id="mol-selection">
<img class="figs" src="content/index/f2.svg">
</a>
</div>
<div id="fig-bg-3-w">
<h3>STAGE 3</h3>
<h3>IN-SILICO MUTAGENESIS</h3>
<a href="pages/project/drylabs.html#stage-title3" id="mol-selection">
<img class="figs" src="content/index/f3.svg">
</a>
</div>
</div>
<h2>WET LAB</h2>
<div class="lab-container">
<div id="fig-bg-1">
<h3 class="white">STAGE 1</h3>
<h3 class="white">BEST MOLECULE SELECTION</h3>
<a href="pages/project/wetlabs.html#stage-title2" id="mol-selection">
<img class="figs" src="content/index/choose-molecule.svg">
</a>
</div>
<div id="fig-bg-2">
<h3 class="white">STAGE 2</h3>
<h3 class="white">MUTATED GENE ASSEMBLY</h3>
<a href="pages/project/wetlabs.html#stage-title1" id="mol-selection">
<img class="figs" src="content/index/mutant-assem.svg">
</a>
</div>
<div id="fig-bg-3">
<h3 class="white">STAGE 3</h3>
<h3 class="white">SCREENING MUTANTS</h3>
<a href="pages/project/wetlabs.html#stage-title2" id="mol-selection">
<img class="figs" src="content/index/screening.svg">
</a>
</div>
</div>
</div>
<img id="el-membrane" src="content\el_membrane.svg" alt="membrane">
<div class="section1">
<h2>Explore our progress here!</h2>
<div class="iwannacenter">
<a class="twitter-timeline" href="https://twitter.com/imperialiDEC" data-width=100% data-height=100%>Tweets by
@imperialiDEC</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
<a class = "back-to-top" href="#">
<img id="back-to-top" src="content/back-to-top.svg">
</a>
<footer>Imperial College London iDEC 2021 Team ©</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
</html>