-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (255 loc) · 16.2 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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html>
<head>
<title>Team:Cornell - 2018.igem.org</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/grids.css">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body class="home-page-wrapper">
<!------------------------ NAV BAR START ------------------------>
<nav>
<div class="nav-bar-wrapper">
<div>
<div class="nav-bar-logo">
<a href="home"><img src="images/new_oscillate_logo.png" alt="Oscillate"></a>
</div>
<div class="nav-bar-main-menu">
<div class="dropdown">
<button class="dropbtn">TEAM</button>
<div class="dropdown-content team-dropdown-content">
<a href="http://2018.igem.org/Team:Cornell/Team">BIOS</a>
<a href="http://2018.igem.org/Team:Cornell/Sponsors">SPONSORS</a>
<a href="http://2018.igem.org/Team:Cornell/Attributions">ATTRIBUTIONS</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">OUTREACH</button>
<div class="dropdown-content outreach-dropdown-content">
<a href="#">COLLABORATIONS</a>
<a href="#">PUBLIC ENGAGEMENT</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">HUMAN-CENTERED DESIGN</button>
<div class="dropdown-content human-dropdown-content">
<a href="#">PRACTICES</a>
<a href="#">POLICIES</a>
<a href="http://2018.igem.org/Team:Cornell/Entrepreneurship">ENTREPRENEURSHIP</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">MODELING</button>
<div class="dropdown-content modeling-dropdown-content">
<a href="http://2018.igem.org/Team:Cornell/Model">MODEL</a>
<a href="http://2018.igem.org/Team:Cornell/Software">SOFTWARE</a>
<a href="http://2018.igem.org/Team:Cornell/Design">DESIGN</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">TOOLKIT</button>
<div class="dropdown-content toolkit-dropdown-content">
<ul>
<div class="nav-first-col">
<li class = "wet-lab-list-title"><b>WET LAB</b></li>
<li><a href="http://2018.igem.org/Team:Cornell/Foundations">FOUNDATIONS</a></li>
<li><a href="http://2018.igem.org/Team:Cornell/Demonstrate">DEMONSTRATE</a></li>
<li><a href="http://2018.igem.org/Team:Cornell/InterLab">INTERLAB</a></li>
<li><a href="hhttp://2018.igem.org/Team:Cornell/Parts">PARTS</a></li>
</li>
</div>
<div class="nav-second-col">
<li class = "doc-list-title"><b>DOCUMENTATION</b></li>
<li><a href="http://2018.igem.org/Team:Cornell/Notebook">NOTEBOOK</a></li>
<li><a href="http://2018.igem.org/Team:Cornell/Safety">SAFETY</a></li>
</li>
</div>
</ul>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="location.href='http://2018.igem.org/Team:Cornell/Description '">ABOUT</button>
</div>
<div class="dropdown">
<button class="dropbtn active-page" onclick="location.href='http://2018.igem.org/Team:Cornell'">HOME</button>
</div>
</div>
</div>
</div>
</nav>
<!------------------------ NAV BAR END ------------------------>
<!------------------------ HOME BANNER START ------------------------>
<header class="home-banner">
<svg class="red-wave-animation" viewbox="0 0 1100 1100" width="110%">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#c93843">
<animate id="anim1" attributeName="stop-color" values="#c93843;#0d1c38;#c93843" begin="0; anim2.end" fill="freeze" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#000000">
<animate id="anim2" attributeName="stop-color" values="#0d1c38;#c93843;#0d1c38" begin="anim1.end; 0" fill="freeze" dur="5s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<path d="M 0 50
Q 50 0, 125 35, 200 70, 275 35, 350 0, 425 35,
500 70, 575 35, 650 0, 725 35, 800 70, 875 35,
950 0, 1025 35, 1100 70, 1175 35, 1250 0, 1325 35,
1400 70, 1475 35, 1550 0, 1625 35, 1700 70"
stroke-width="1" stroke="url(#gradient)" fill="none" transform="translate(-40,0)" />
<path d="M 0 50
Q 50 0, 125 40, 200 80, 275 40, 350 0, 425 40,
500 80, 575 40, 650 0, 725 40, 800 80, 875 40,
950 0, 1025 40, 1100 80, 1175 40, 1250 0, 1325 40,
1400 80, 1475 40, 1550 0, 1625 40, 1700 80"
stroke-width="1" stroke="url(#gradient)" fill="none" transform="translate(-35,0)" />
<path d="M 0 50
Q 50 0, 125 45, 200 90, 275 45 350 0, 425 45
500 90, 575 45, 650 0, 725 45, 800 90, 875 45,
950 0, 1025 45, 1100 90, 1175 45, 1250 0, 1325 45,
1400 90, 1475 45, 1550 0, 1625 45, 1700 90"
stroke-width="1" stroke="url(#gradient)" fill="none" transform="translate(-30,0)" />
<path d="M 0 50
Q 50 0, 125 50, 200 100, 275 50 350 0, 425 50
500 100, 575 50, 650 0, 725 50, 800 100, 875 50,
950 0, 1025 50, 1100 100, 1175 50, 1250 0, 1325 50,
1400 100, 1475 50, 1550 0, 1625 50, 1700 100"
stroke-width="1" stroke="url(#gradient)" fill="none" transform="translate(-25,0)" />
<path d="M 0 50
Q 50 0, 125 55, 200 110, 275 55 350 0, 425 55
500 110, 575 55, 650 0, 725 55, 800 110, 875 55,
950 0, 1025 55, 1100 110, 1175 55, 1250 0, 1325 55,
1400 110, 1475 55, 1550 0, 1625 55, 1700 110"
stroke-width="1" stroke="url(#gradient)"
fill="none" transform="translate(-20,0)" />
<path d="M 0 50
Q 50 0, 125 60, 200 120, 275 60 350 0, 425 60
500 120, 575 60, 650 0, 725 60, 800 120, 875 60,
950 0, 1025 60, 1100 120, 1175 60, 1250 0, 1325 60,
1400 120, 1475 60, 1550 0, 1625 60, 1700 120"
stroke-width="1" stroke="url(#gradient)"
transform="translate(-15, 0)" fill="none" />
<path d="M 0 50
Q 50 0, 125 65, 200 130, 275 65 350 0, 425 65
500 130, 575 65, 650 0, 725 65, 800 130, 875 65,
950 0, 1025 65, 1100 130, 1175 65, 1250 0, 1325 65,
1400 130, 1475 65, 1550 0, 1625 65, 1700 130"
stroke-width="1" stroke="url(#gradient)"
transform="translate(-10, 0)" fill="none" />
<path d="M 0 55
Q 55 0, 130 70, 205 140, 280 70 355 0, 430 70
505 140, 580 70, 655 0, 730 70, 805 140, 880 70,
955 0, 1030 70, 1105 140, 1180 70, 1255 0, 1330 70,
1405 140, 1480 70, 1555 0, 1630 70, 1705 140"
stroke-width="1" stroke="url(#gradient)" fill="none"
transform="translate(-5,0)" />
<path d="M 0 55
Q 55 0, 130 75, 205 150, 280 75 355 0, 430 75
505 150, 580 75, 655 0, 730 75, 805 150, 880 75,
955 0, 1030 75, 1105 150, 1180 75, 1255 0, 1330 75,
1405 150, 1480 75, 1555 0, 1630 75, 1705 150"
stroke-width="1" stroke="url(#gradient)" fill="none" />
</svg>
<div class="home-banner-wrapper">
<div class="home-banner-content-wrapper">
<img class="home-banner-logo" src="images/new_oscillate_logo.png">
<p class="home-banner-caption">Introducing novelty through a frequency-based biological band-pass filter.</p>
<div class="home-banner-chevron-wrapper">
<a id="chevron-button" href="#home-description"><img class="home-banner-chevron" src="images/red-chevron.png"></a>
</div>
</div>
</div>
</header>
<!------------------------ HOME BANNER END ------------------------>
<!------------------------ DESCRIPTION START ------------------------>
<div class="home-description-wrapper">
<div class="home-description-logo-wrapper">
<a id="home-description"><img class="home-description-logo" src="images/cornell-igem-logo-white.png"></a>
</div>
<hr class="yellow-accent-line-center">
<div class="home-description">
We are building a <span id="home-description-emphasis-words">biological band-pass filter</span>. While biological band pass filters have been developed before, none respond to frequency-based inputs but instead respond to amplitude based inputs.
By controlling the rates of degradation of the components of our system, we are putting together a <span id="home-description-emphasis-words">frequency-response</span> low-pass and high-pass filter to create a <span id="home-description-emphasis-words">novel</span> band-pass filter.
<br><br> Our filter would allow bacteria to respond only to certain frequency-based inputs, and give it even more <span id="home-description-emphasis-words">digital logic-like</span> character, long a goal of synthetic biology. Moving forward,
our project could be an important tool for scientists as synthetic biology branches into increasingly diverse fields.
</div>
<div class="home-red-frequency-wrapper">
<img class="home-red-frequency" src="images/red-frequency-with-lines.png">
</div>
</div>
<!------------------------ DESCRIPTION END ------------------------>
<!------------------------ SUB-DESCRIPTIONS START ------------------------>
<div class="home-sub-descriptions-wrapper">
<div class="home-sub-description-left">
<div class="home-sub-description-left-content">
<div class="sub-description-sub-heading-left">
Ideation.
</div>
<hr class="yellow-accent-line-left-sub">
<div>We are building a <span id="home-description-emphasis-words">biological band-pass filter</span>. While biological band pass filters have been developed before, none respond to frequency-based inputs but instead respond to amplitude based inputs. By controlling the rates of degradation of the components of our system, we are putting together a <span id="home-description-emphasis-words">frequency-response</span> low-pass and high-pass filter to create a <span id="home-description-emphasis-words">novel</span> band-pass filter.</div>
</div>
<div class="home-sub-description-right-image">
<img src="http://2018.igem.org/wiki/images/d/d2/T--Cornell--AmyFB.jpg">
</div>
</div>
<div class="home-sub-description-right">
<div class="home-sub-description-right-content">
<div class="sub-description-sub-heading-right">
Ideation.
</div>
<hr class="yellow-accent-line-right-sub">
<div>We are building a <span id="home-description-emphasis-words">biological band-pass filter</span>. While biological band pass filters have been developed before, none respond to frequency-based inputs but instead respond to amplitude based inputs. By controlling the rates of degradation of the components of our system, we are putting together a <span id="home-description-emphasis-words">frequency-response</span> low-pass and high-pass filter to create a <span id="home-description-emphasis-words">novel</span> band-pass filter.</div>
</div>
<div class="home-sub-description-left-image">
<img src="http://2018.igem.org/wiki/images/d/d2/T--Cornell--AmyFB.jpg">
</div>
</div>
<div class="home-sub-description-left2">
<div class="home-sub-description-left-content">
<div class="sub-description-sub-heading-left">
Ideation.
</div>
<hr class="yellow-accent-line-left-sub">
<div>We are building a <span id="home-description-emphasis-words">biological band-pass filter</span>. While biological band pass filters have been developed before, none respond to frequency-based inputs but instead respond to amplitude based inputs. By controlling the rates of degradation of the components of our system, we are putting together a <span id="home-description-emphasis-words">frequency-response</span> low-pass and high-pass filter to create a <span id="home-description-emphasis-words">novel</span> band-pass filter.</div>
</div>
<div class="home-sub-description-right-image">
<img src="http://2018.igem.org/wiki/images/d/d2/T--Cornell--AmyFB.jpg">
</div>
</div>
<div class="home-sub-description-right2">
<div class="home-sub-description-right-content">
<div class="sub-description-sub-heading-right">
Ideation.
</div>
<hr class="yellow-accent-line-right-sub">
<div>We are building a <span id="home-description-emphasis-words">biological band-pass filter</span>. While biological band pass filters have been developed before, none respond to frequency-based inputs but instead respond to amplitude based inputs. By controlling the rates of degradation of the components of our system, we are putting together a <span id="home-description-emphasis-words">frequency-response</span> low-pass and high-pass filter to create a <span id="home-description-emphasis-words">novel</span> band-pass filter.</div>
</div>
<div class="home-sub-description-left-image">
<img src="http://2018.igem.org/wiki/images/d/d2/T--Cornell--AmyFB.jpg">
</div>
</div>
</div>
<!------------------------ SUB-DESCRIPTIONS END ------------------------>
<!------------------------ FOOTER START ------------------------>
<footer>
<div class="footer-wrapper">
<div class="icon-wrapper">
<a class="icon" href=""><img src="images/facebook-32.png"></a>
</div>
<div class="icon-wrapper">
<a class="icon" href=""><img src="images/twitter-32.png"></a>
</div>
<div class="icon-wrapper">
<a class="icon" href=""><img src="images/instagram-32.png"></a>
</div>
<div class="icon-wrapper icon-wrapper-last">
<a class="icon" href=""><img src="images/youtube-32.png"></a>
</div>
</div>
</footer>
<!------------------------ FOOTER END ------------------------>
</body>
</html>