BioHack2018/index.html at master · ucrbiohack/BioHack2018 · GitHub

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
<!doctype html>
<html lang="en">

<head>
  <title>BioHack 2018 | UC Riverside</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300, 400, 700" rel="stylesheet">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/owl.carousel.min.css">

  <link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">

  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <header role="banner">
    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
      <div class="container">
        <a class="navbar-brand" href="index.html">Bio<span>Hack</span>  </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" data-target="#navbarToggle" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

        <div class="collapse navbar-collapse" id="navbarToggle">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#sponsors">Sponsors</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <div id="home" class="homepage-hero-module">
    <div class="hero-text hero">
      <div class="row">
        <div class="col-md-12">
          <h1>BioHack</h1>
          <p class="date">May 19th, 2018</p>
          <p>University of California, Riverside</p>
          <p><em>Merging man with machine</em></p>
          <a href="https://bio12.typeform.com/to/y8tLCs" class="btn btn-primary btn-lg">Apply</a>
        </div>
      </div>
    </div>
    <div class="video-container">
      <div class="filter"></div>
      <video autoplay loop class="fillWidth">
          <source src="video/hero.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
          <source src="video/hero.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
      </video>
      <!-- <div class="poster hidden">
        <img src="video/hero.jpg" alt="">
      </div> -->
    </div>
  </div>

  <section class="container home-feature mb-5">
    <div class="row">
      <div class="col-md-4 p-0 one-col element-animate">
        <div class="col-inner p-xl-5 p-lg-5 p-md-4 p-sm-4 p-4">
          <span class="icon flaticon-hospital-bed"></span>
          <h2>Innovators</h2>
          <p>
            We are inviting over 150 innovators of all skill levels to come make the next technological advancement in the biomedical field.
          </p>
        </div>
      </div>
      <div class="col-md-4 p-0 two-col element-animate">
        <div class="col-inner p-xl-5 p-lg-5 p-md-4 p-sm-4 p-4">
          <span class="icon flaticon-first-aid-kit"></span>
          <h2>A Weekend</h2>
          <p>
            Innovators will be supported for 12 hours in their suit of their projects
          </p>
        </div>
      </div>
      <div class="col-md-4 p-0 three-col element-animate">
        <div class="col-inner p-xl-5 p-lg-5 p-md-4 p-sm-4 p-4">
          <span class="icon flaticon-hospital"></span>
          <h2>Challenges</h2>
          <p>
            Working with industry partners, we will provide our innovators with real world challenges that the solutions will have an immediate impact.
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="section stretch-section">
    <div class="container">
      <div class="row justify-content-center mb-5 element-animate">
        <div class="col-md-8 text-center mb-5">
          <h2 class="text-uppercase heading border-bottom mb-4">
            What is BioHack?
          </h2>
          <p class="mb-5 lead">
            A hackathon is an multi-day event where students practice and develop their computer programming skills to create ideas and projects. This year, a collaboration with the Society of Women Engineers and Biomedical Engineering Society introduces BioHack,
            the very first student-run 12 hour bioengineering-themed hackathon at the University of California, Riverside. Throughout this 12-hour hackathon, students will form teams to work on projects, attend technical workshops, speak to mentors, learn
            about new technologies, and network with industries.
          </p>
          <p class="mb-0 lead">
            Our mission is to foster connections among students and sponsors throughout computer science and bioengineering. We encourage non-computer science or engineering students, especially females* and minorities, to develop valuable technical and teamwork
            skills in a safe and encouraging environment. Also, hosting BioHack in the Inland Empire will spawn connections with engineers throughout the bioengineering community across California. UCR students who are curious are welcome to join; no
            experience necessary!
          </p>
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-md-12">
          <p class="lead">
            BioHack focuses on an event where students can create medically innovative projects and technologies with the freedom of their creativity. Unlike other hackathons, we promote bioengineering related projects as the central aspect of the event.
          </p>
        </div>
        <div class="col-md-6 stretch-left-1 element-animate" data-animate-effect="fadeInLeft">
          <span class="video"><img src="img/img_1.jpg" alt="" class="img-fluid"></span>
        </div>
        <div class="col-md-6 stretch-left-1-offset pl-md-5 pl-0 element-animate" data-animate-effect="eInLeft">
          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
              <div class="media d-block media-feature text-center">
                <span class="icon flaticon-hospital"></span>
                <div class="media-body">
                  <h3 class="mt-0 text-black">Bioinformatics</h3>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
              <div class="media d-block media-feature text-center">
                <span class="icon flaticon-first-aid-kit"></span>
                <div class="media-body">
                  <h3 class="mt-0 text-black">Genetics</h3>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
              <div class="media d-block media-feature text-center">
                <span class="icon flaticon-hospital-bed"></span>
                <div class="media-body">
                  <h3 class="mt-0 text-black">Neuroscience</h3>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
              <div class="media d-block media-feature text-center">
                <span class="icon flaticon-doctor"></span>
                <div class="media-body">
                  <h3 class="mt-0 text-black">Pharmaceuticals</h3>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
              <div class="media d-block media-feature text-center">
                <span class="icon flaticon-doctor"></span>
                <div class="media-body">
                  <h3 class="mt-0 text-black">Medical Devices</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="sponsors" class="section bg-light">
    <div class="container">
      <div class="row justify-content-center mb-5 element-animate">
        <div class="col-md-12 text-center mb-5">
          <h2 class="text-uppercase heading border-bottom mb-4">Sponsors</h2>
          <p class="mb-5 lead">
            <a href="docs/biohack_sponsorship_packet_2018_final.pdf">Sponsorship Package</a>
          </p>
          <div class="row d-flex justify-content-around">
            <img class="sponsor half" src="img/swe.png" alt="SWE">
            <img class="sponsor half mb-5" src="img/bmes.jpg" alt="BMES">
            <img class="sponsor full" src="img/bcoe.png" alt="BCOE">
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="contact" class="cover_1" style="background-image: url(img/bg_1.jpg);">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-md-10">
          <h2 class="heading element-animate">Join the BioHack Committee Meetings!</h2>
          <p class="sub-heading element-animate mb-5">
            You can help organize the first BioHack! Stop by our weekly meetings on Thursdays from 5PM - 6PM in Chung 203.
          </p>
          <p class="element-animate"><a href="mailto:biohack.ucr@gmail.com" class="btn btn-primary btn-lg">Email Us</a></p>
        </div>
      </div>
    </div>
  </section>

  <footer class="site-footer" role="contentinfo">
    <div class="container">
      <div class="row pt-md-3 element-animate">
        <div class="col-md-12 col-sm-12 copyright text-center">
          <p>Made with ❤ in Riverside</p>
        </div>
      </div>
    </div>
  </footer>

  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>