/
science.html
244 lines (243 loc) · 13.3 KB
/
science.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BioAmp Diagnostics</title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,300|Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!--header-->
<header id="header" style="background-image: url(img/the-roaming-platypus-310824-unsplash.jpg) !important;
background-repeat: no-repeat;
background-position: center;
width: auto;
background-size: cover;">
<div class="bg-color" style="height: 40em;">
<!--nav-->
<nav class="nav navbar-default navbar-fixed-top">
<div class="container">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar" aria-expanded="false" aria-controls="navbar">
<span class="fa fa-bars"></span>
</button>
<div id="header" class="pull-left">
<a href="/C:/Users/mjferrari/Desktop/Bioampx/index.html" style="color:white">
<img src="img/BioAmp-Logo.png" alt="" title="" style="
width: 17em;">
</a
<!-- Uncomment below if you prefer to use a text image -->
<!--<h1><a href="#hero">Header 1</a></h1>-->
</div>
</div>
<div class="collapse navbar-collapse navbar-right" id="mynavbar">
<ul class="nav navbar-nav">
<li><a href="/C:/Users/mjferrari/Desktop/Bioampx/index.html">UNMET NEED</a></li>
<li><a href="/C:/Users/mjferrari/Desktop/Bioampx/science.html">OUR SOLUTION</a></li>
<li><a href="/C:/Users/mjferrari/Desktop/Bioampx/about.html">ABOUT US</a></li>
<!--<li><a href="#science">Science & Technology</a></li>
<li><a href="#clients">Partners</a></li>-->
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--/ nav-->
<div class="container text-center">
<div class="wrapper wow fadeInUp delay-05s">
<h2 class="top-title" style="font-size:2em"><u>BioAmp Diagnostics</u></h2>
<h4 class="title">
Actionable results before antibiotic prescribing</p>
<h4 class="sub-title" style="
width: 78em;
padding-left: 5em;
letter-spacing: 0px;
font-size: 1em;
">BioAmp Diagnostics is committed to preventing the misuse and overuse of antibiotics in healthcare through the development of innovative diagnostic tools,
that will give medical providers the information they need to correctly treat an infection.
</h4>
<button type="submit" class="btn btn-submit"><a href="about.html">ABOUT US</a></button>
<button type="submit" class="btn btn-submit"><a href="science.html">OUR SOLUTION</a></button>
</div>
</div>
</div>
</header>
<!--/ header-->
<!---->
<section id="features" style="padding-top: 3em;">
<div class="container wow fadeInUp">
<div class="row">
<div class="col-md-12" style="
font-size: 1.2em;">
<h3 class="section-title">Our Innovative Approach</h3>
<div class="section-title-divider"></div>
<p class="section-description">Our diagnostic technology has revolutionized biochemical testing approaches, enabling detection of antibiotic-resistant bacteria in patient samples before antibiotics are prescribed.</p>
<p class="section-description"><b>First target biomarker:</b> ESBLs (extended-spectrum-𝛃-lactamases). If a patient is suffering from an infection caused by bacteria that produce ESBLs, they are at a higher risk of treatment failure and disease progression.</p>
</div>
</div>
</div>
<hr>
<div class="container about-container wow fadeInUp">
<div class="row">
<div class="col-md-12" style="
font-size: 1.2em;">
<h3 class="section-title">How it works:</h3>
<div class="section-title-divider"></div>
<p class="section-description">BioAmp implements a novel biochemical approach (color-changing technology) to identify ESBLs directly in patient samples, where a simple color change indicates the presence of an ESBL.</p>
<p class="section-description">Sample collected → transferred into sample tube → <30 min → color changes or not</p>
<p class="section-description">Our technology utilizes an patented, instrument-free, enzyme-on-enzyme amplification approach to overcome the sensitivity limitations of classical biochemical tests, which has impeded the translation of biochemical tests into diagnostic tools that provide actionable results in real-time.
</p>
</div>
</div>
</div>
<hr>
<div class="container wow fadeInUp">
<div class="row">
<div class="col-md-12">
<h3 class="section-title">Features</h3>
<div class="section-title-divider"></div>
<p class="section-description">Empowering medical providers with the information they need to treat patients with
the right antibiotic at the right time
</p>
</div>
</div>
</div>
<div class="container">
<div class="row" style="text-align: center;">
<div class="col-md-4 service-item">
<h4 class="service-title" style="font-size: 2em;text-align: cemter;">Simple technological approach</h4>
</div>
<div class="col-md-4 service-item">
<h4 class="service-title" style="font-size: 2em;text-align: cemter;">Time to results < 30 min</h4>
</div>
<div class="col-md-4 service-item">
<h4 class="service-title" style="font-size: 2em;text-align: cemter;">Simple readout</h4>
</div>
</div>
<div class="row" style="text-align: center;padding-top: 1em;">
<div class="col-md-4 service-item">
<h4 class="service-title" style="font-size: 2em;text-align: cemter;">Adaptable to multiple test formats</h4>
</div>
<div class="col-md-4 service-item">
<h4 class="service-title" style="font-size: 2em;text-align: cemter;">Amenable to high sample numbers</h4>
</div>
<div class="col-md-4 service-item">
<h4 class="service-title" style="font-size: 2em;text-align: cemter;">Enables real-time prescribing recommendations</h4>
</div>
<div class="col-md-12 service-item">
<h4 class="service-title" style="font-size: 2em; padding-top: 1em;text-align: center;
padding-bottom: 3em;">Platform technology (adjustable biomarker targeting)</h4>
</div>
</div>
</div>
</div>
</section>
<!---->
<!---->
<section class="section-padding parallax bg-image-2 section wow fadeIn delay-08s" id="cta-2">
<div class="container">
<div class="row">
</div>
</div>
</section>
<!---->
<!---->
<section class="section-padding wow fadeInUp delay-05s" id="contact">
<div class="container">
<div class="row white">
<div class="col-md-8 col-sm-12">
<div class="section-title">
<h2 style="font-size: 1em;
color: #111;
text-transform: uppercase;
text-align: center;
font-weight: 700;" class="head-title black">Contact Us</h2>
<div class="section-title-divider"></div>
<p class="sec-para black" style="
font-size: 0.5em;
">Ready to chat? Fill out the form below to start the conversation.</p>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="col-md-4 col-sm-6" style="padding-left:0px;">
<h3 class="cont-title">Email Us</h3>
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<div class="contact-info">
<form action="" method="post" role="form" class="contactForm">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<button type="submit" class="btn btn-send">Send</button>
</form>
</div>
</div>
<div class="col-md-4 col-sm-6">
<h3 class="cont-title">Visit Us</h3>
<div class="location-info">
<p class="white"><b>BioAmp Diagnostics</b></p>
<p class="white"><span aria-hidden="true" class="fa fa-map-marker"></span>450 Sutardja Dai Hall</p>
<p class="white" style="padding-left: 2.2em;">University of California, Berkeley</p>
<p class="white" style="padding-left: 2.2em;">Berkeley, CA 94720</p>
</div>
</div>
<div class="col-md-4">
<div class="contact-icon-container hidden-md hidden-sm hidden-xs">
<span aria-hidden="true" class="fa fa-envelope-o"></span>
</div>
</div>
</div>
</div>
</div>
</section>
<!---->
<footer class="" id="footer">
<div class="container">
<div class="row">
<div class="col-sm-7 footer-copyright">
<div class="credits">
Designed by <a href="https://ferraridesign.github.io/">Mike Ferrari</a>
</div>
</div>
<div class="col-sm-5 footer-social">
<div class="pull-right hidden-xs hidden-sm">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!---->
<a href="#" class="back-to-top" style="display: inline;"><i class="fa fa-chevron-up"></i></a>
<!--contact ends-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/custom.js"></script>
<script src="contactform/contactform.js"></script>
</body>
</html>