-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
253 lines (248 loc) · 10.7 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
<!DOCTYPE html>
<html>
<head>
<title>WooTech</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="source/css/home.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Questrial|Tangerine" rel="stylesheet">
<script src="https://use.fontawesome.com/edced9f63c.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar-header">
<!-- <div class="container"> -->
<div class="navigation">
<ul class="navbar-menu-left">
<li class="navbar-item active">
<a href="#">Home</a>
</li>
<li class="navbar-item">
<a class="ihaveatip" href="https://sites.google.com/wootech.org/volunteer-2019/faq?authuser=0">FAQ</a>
</li>
<li class="navbar-item">
<a class="ihaveatip" href="#">Mentors<span class="tooltiptext">Coming soon</span></a>
</li>
</ul>
<ul class="navbar-menu-right">
<li class="navbar-item">
<a href="https://www.facebook.com/wootechnology/">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="navbar-item">
<a href="#">[email protected]</a>
</li>
</ul>
</div>
<div class="row text-center">
<img src="source/svg/WooTech-logo.svg" width="100" alt="WooTech">
<!-- <img src="https://i.imgur.com/kITRVjw.jpg" width="100" alt="WooTech"> -->
</div>
<div class="text-center">
<p>Women Wooing Technology</p>
</div>
<!-- </div> -->
</nav>
<!-- SECTION 1: IMAGE -->
<section class="row main">
<!-- <div class="container"> -->
<video src="static/homepage_edited.mp4" autoplay poster="static/wooTech-poster.png" width="100%" loop="true">
</video>
<h1>WELCOME TO WOO-TECH</h1>
<!-- </div> -->
</section>
<!-- SECTION 2: ABOUT -->
<section id="about" class="row parallax">
<div class="container">
<div class="transparent-background">
<header>
<h1>About</h1>
</header>
<p>WooTech, standing for "Women Wooing Technology" hopes to provide a mentorship platform to women in technology and guide them in their career. The mentorship platform is open to everyone including students, working professionals or just anyone curious about technology.
Woo-Tech aims to:</p>
<ul>
<li>Encourage and involve more women in technological fields</li>
<li>Help students build careers by matching them with mentors in the professional fields</li>
<li>Help professions/non-students seeking to move into technical career by matching them with students</li>
</ul>
</div>
</div>
</section>
<!-- SECTION 3: MENTORSHIP PROGRAM INFORMATION -->
<section id="program-information" class="row">
<div class="container">
<!-- Mentorship program heading -->
<header>
<h1>Mentorship Program</h1>
</header>
<!-- Types of mentorships -->
<div class="row fixed">
<div class="col-md-4 col-sm-12">
<div class="fixed-box">
<!-- Heading -->
<header>
<h3>GENERAL MENTORSHIP</h3>
</header>
<!-- Description -->
<p>Depending on the availability of mentors and interest of mentees in field, we also do peer-to-peer and professional-to-professional mentor-mentee matches in line with a standard mentorship program.</p>
<!-- Image -->
<figure>
<img src="static/general_mentorship.jpg"
srcset="static/general_mentorship-small_mobile.jpg 320w,
static/general_mentorship-medium_mobile.jpg 375w,
static/general_mentorship-large_mobile.jpg 425w,
static/general_mentorship-tablets.jpg 768w,
static/general_mentorship-laptop.jpg 800w,
static/general_mentorship-laptop.jpg 1600w"
sizes="100vw"
alt="General Mentorship Image" width="100%">
</figure>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="fixed-box">
<!-- Heading -->
<header>
<h3>STUDENT MENTEES TO PROFESSIONAL MENTORS</h3>
</header>
<!-- Description -->
<p>Experience and exposure to the technical industry is very different from what happens in a university. Through the student-senior mentorship we aim to connect freshmen/junior level students with seniors or working professionals to help them clarify their perspective. Seniors - Don’t you ever wish there were things you knew, or things you could have done better if you were to go back in time?</p>
<!-- Image -->
<figure>
<img src="static/profession_to_student.jpg"
srcset="static/general_mentorship-small_mobile.jpg 320w,
static/profession_to_student-medium_mobile.jpg 375w,
static/profession_to_student-large_mobile.jpg 425w,
static/profession_to_student-tablets.jpg 768w,
static/profession_to_student-laptop.jpg 800w,
static/profession_to_student-laptop.jpg 1600w"
sizes="100vw"
alt="Student Mentorship Image" width="100%">
</figure>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="fixed-box">
<!-- Heading -->
<header>
<h3>PROFESSIONAL MENTEES TO STUDENT MENTORS</h3>
</header>
<!-- Description -->
<p>There are many professionals who have no background in coding but would like to get started. However, it is not as easy for them as it is for students! They don’t know what online courses are good, what are bad? What are the current trends? But CS students have access and knowledge about many of these resources and more. Through this unique reverse mentorship we aim to provide professionals a fresh view of the industry</p>
<!-- Image -->
<figure>
<img src="static/student_to_professional.jpg"
srcset="static/student_to_professional-small_mobile.jpg 320w,
static/student_to_professional-medium_mobile.jpg 375w,
static/student_to_professional-large_mobile.jpg 425w,
static/student_to_professional-tablets.jpg 768w,
static/student_to_professional-laptop.jpg 800w,
static/student_to_professional-laptop.jpg 1600w"
sizes="100vw"
alt="Professinal Mentorship Image" width="100%">
</figure>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 4: GETTING INVOLVED INFORMATION -->
<section id="getting-involved" class="row">
<div class="container">
<!-- Heading -->
<header class="row">
<h1>Get involved as a mentor, mentee or both</h1>
</header>
<div class="row center-block">
<!-- Sign up as a mentee -->
<div class="col-md-4 col-sm-12 info-box" >
<div class="row">
<figure>
<img src="static/working_poster-large_laptop.jpg"
srcset="static/working_poster-large_laptop.jpg 320w,
static/working_poster-large_laptop.jpg 375w,
static/working_poster-large_laptop.jpg 425w,
static/working_poster-large_laptop.jpg 768w,
static/working_poster-large_laptop.jpg 800w,
static/working_poster-large_laptop.jpg 1600w"
alt="Mentee helped" sizes="100vw" width="100%">
</figure>
</div>
<div class="row">
<h4>AS A MENTEE</h4>
<p> Get involved as a mentee</p>
<p>
<form method="get" action="https://sites.google.com/wootech.org/volunteer-2019/home?authuser=1">
<button type="submit">Sign up as a mentee</button>
</form>
<form method="get" action="https://sites.google.com/wootech.org/volunteer-2019/home?authuser=1">
<button type="submit">Both!</button>
</form>
</p>
</div>
</div>
<!-- Sign up as a mentor -->
<div class="col-md-4 col-sm-12 info-box" >
<div class="row">
<h4>AS A MENTOR</h4>
<p> Get involved as a mentor</p>
<p>
<form method="get" action="https://forms.gle/UPaecffLTKnaSKdw8">
<button type="submit">Sign up as a mentor</button>
</form>
<form method="get" action="https://forms.gle/UPaecffLTKnaSKdw8">
<button type="submit">Both!</button>
</form>
</p>
</div>
<div class="row">
<figure>
<img src="static/working_poster-large_laptop.jpg"
srcset="static/working_poster-large_laptop.jpg 320w,
static/working_poster-large_laptop.jpg 375w,
static/working_poster-large_laptop.jpg 425w,
static/working_poster-large_laptop.jpg 768w,
static/working_poster-large_laptop.jpg 800w,
static/working_poster-large_laptop.jpg 1600w"
alt="Mentor helping" sizes="100vw" width="100%">
</figure>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 5: SOCIAL LINKS -->
<section id="social-links" class="row">
<div class="row">
<p>[email protected]<br/>
Singapore</p>
</div>
<div class="row">
<!-- Group of Elements -->
<p class="links">
<a href="https://www.facebook.com/wootechnology/" >
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="https://www.twitter.com/WooTechology">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="https://www.medium.com/@wootech7">
<i class="fa fa-medium" aria-hidden="true"></i>
</a>
<a href="https://join.slack.com/t/wootech/signup">
<i class="fa fa-slack" aria-hidden="true"></i>
</a>
</p>
</div>
</section>
<footer class="row">
<p class="uppercase" style="text-align:center">© 2017 by WOO-TECH</p>
<p style="font:0.2em;padding:0;"> All images have been obtained under the creative commons license from WOCinTech Chat <a href="https://www.flickr.com/photos/wocintechchat/22359007740">Flicker</a></p>
</footer>
</body>
</html>