-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
344 lines (318 loc) · 14.5 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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>iMedia-kpi by Felix Susanto</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#iMedia-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-bars"></i>
</button><!-- /.buttonToggle -->
<a data-scroll href="#" class="navbar-brand custom-brand">iMedia@wds</a>
</div><!-- /.navbar-header -->
<!-- wrapped content start here -->
<div class="collapse navbar-collapse" id="iMedia-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a data-scroll href="#team"><i class="fa fa-group fa-fw"></i> The Team</a></li>
<li><a data-scroll href="#role"><i class="fa fa-pencil fa-fw"></i> What We Do</a></li>
<li><a data-scroll href="#work"><i class="fa fa-desktop fa-fw"></i> Our Work</a></li>
<li><a data-scroll href="#contact"><i class="fa fa-comment fa-fw"></i> Contact Us</a></li>
</ul>
</div><!-- /.collapse section -->
</div><!-- /.container -->
</nav><!-- /.nav -->
<div class="container-fluid">
<div class="row pattern-turq">
<div class="img-main">
<div class="title">
<h2>a little something about</h2>
<h1>iMedia</h1>
</div>
</div><!-- /.span -->
</div><!-- /.row -->
</div><!-- /.container -->
<div class="container-fluid maxWidth">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron">
<h1>Behind the Scene</h1>
<p>We are a small team of designers based in Singapore. We creates graphic user interface and design solutions that have high visual impact and make WDS products deliver on their vision and deliver value to the end customer.</p>
<a data-scroll href="#contact" class="btn btn-primary"><i class="fa fa-comment"></i> Contact Us</a>
</div><!-- /.jumbotron -->
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row" id="team" name="team">
<div class="col-xs-12">
<h1 class="section-title"><i class="fa fa-group"></i> Meet the Team (aka Crew): A bunch of great people</h1>
<hr />
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row team">
<div class="col-xs-12">
<blockquote>
<p>"Teamwork is our strengths that make us achieving unexpected results"</p>
</blockquote>
</div><!-- /.span -->
<div class="team-bg hidden-xs"></div>
<div class="col-xs-12 col-sm-4">
<div class="team-bg-xs visible-xs"></div>
<div class="sprite team_mad center-block"></div>
<h2>Madeline Pranatio</h2>
<hr />
<h3>Team Lead</h3>
<p>With many years of design background, Madeline leads the iMedia team for all the projects from brainstorming to design execution. Not only foresee any issue or problems encountered upon received a project, she is able to identify her team member’s strengths or weakness and encourages them to explore and challenge beyond their limits.</p>
<div class="team-trivia visible-xs">
<h4>Dream Holiday Destination</h4>
<p>Europe</p>
<h4>Likes to eat</h4>
<p>Spicy food</p>
<h4>A word to describe me</h4>
<p>Gregarious</p>
</div>
</div><!-- /.span -->
<div class="col-xs-12 col-sm-4">
<div class="team-bg-xs visible-xs"></div>
<div class="sprite team_lix center-block"></div>
<h2>Felix Susanto</h2>
<hr />
<h3>Multimedia Designer</h3>
<p>Armed with years of experience in visual creation, Felix demonstrates his ability in multimedia design using a variety of tools. He often draws or creates illustrations during his free time. Felix has a passion in front-end development and meets his newfound love for Bootstrap. His interests motivate him from executing and building prototypes that benefits the project.</p>
<div class="team-trivia visible-xs">
<h4>If I have super power...</h4>
<p>Teleportation</p>
<h4>A word to describe me</h4>
<p> A-Super-Duper-Awesome-Guy</p>
<h4>Likes to do during weekends</h4>
<p>Plays guitar</p>
</div>
</div><!-- /.span -->
<div class="col-xs-12 col-sm-4">
<div class="team-bg-xs visible-xs"></div>
<div class="sprite team_ivy center-block"></div>
<h2>Ivy Gue</h2>
<hr />
<h3>Multimedia Designer</h3>
<p>Ivy was an IT diploma graduate, but pursued proper “design” education after realising her obsession with web designing. Her curiosity in learning new skills or technology drives her to be a multi-disciplinary designer in both print and web. Through the experience, she applies the same conceptual thinking to her work by exploring various ideas.</p>
<div class="team-trivia visible-xs">
<h4>Slogan for life</h4>
<p>Tough times don’t last but tough people do.</p>
<h4>Favourite Song</h4>
<p>Fly me to the moon</p>
<h4>A word to describe me</h4>
<p>Optimistic</p>
</div>
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row" id="trivia">
<hr>
</div><!-- /.row -->
<div class="row" id="role" name="role">
<div class="col-xs-12">
<h1 class="section-title"><i class="fa fa-pencil"></i> What We Do</h1>
<hr />
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row role">
<div class="col-xs-6 col-sm-3">
<img src="img/role_gd.png" alt="" class="img-responsive img-circle center-block"/>
<img src="img/gfx_exp.png" alt="" class="img-responsive center-block expertise"/>
<h3>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</h3>
<hr>
<h3>Graphic Design</h3>
<p>We create high-impact design solutions that answer client's needs. </p>
</div>
<div class="col-xs-6 col-sm-3">
<img src="img/role_ani.png" alt="" class="img-responsive img-circle center-block"/>
<img src="img/gfx_exp.png" alt="" class="img-responsive center-block expertise"/>
<h3>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</h3>
<hr>
<h3>Animation</h3>
<p>We combine design and technical knowledge to create information and communication technology (ICT) based products that entertain, educate or inform its users.</p>
</div><!-- /.span -->
<div class="col-xs-6 col-sm-3">
<img src="img/role_mock.png" alt="" class="img-responsive img-circle center-block"/>
<img src="img/gfx_exp.png" alt="" class="img-responsive center-block expertise"/>
<h3>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</h3>
<hr>
<h3>Web Design</h3>
<p>We design our websites to be responsive, delivering optimum performance and visuals for all devices.</p>
</div><!-- /.span -->
<div class="col-xs-6 col-sm-3">
<img src="img/role_pro.png" alt="" class="img-responsive img-circle center-block"/>
<img src="img/gfx_noob.png" alt="" class="img-responsive center-block expertise"/>
<h3>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</h3>
<hr>
<h3>Front End Development</h3>
<p>We create prototypes based on the Bootstrap framework. It is a good platform to see whether the design works well.</p>
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row row-section--work" id="work" name="work">
<div class="col-xs-12">
<h1 class="section-title"><i class="fa fa-desktop"></i> Our Work</h1>
<hr />
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row work">
<div class="col-xs-12">
<div class="work-banner">
<div class="title-showcase">
<h1>iMedia</h1>
<h2>- Featured Works -</h2>
</div><!-- /.title-showcase / container-center -->
</div><!-- /.work-banner -->
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row work-desc">
<div class="col-md-10 col-md-offset-1">
<p>We focus on using our expertise and industry knowledge to create design solutions. Here are some highlights of our works: </p>
</div><!-- /.span -->
</div><!-- /.row -->
<hr />
<div class="row portfolio">
<div class="col-md-10 col-md-offset-1" id="portfolio-detail">
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<ol class="carousel-indicators">
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
<li data-target="#portfolio-carousel" data-slide-to="3"></li>
<li data-target="#portfolio-carousel" data-slide-to="4"></li>
<li data-target="#portfolio-carousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/portfolio/portfolio-0.jpg" alt="" class="img-responsive center-block" />
<div class="carousel-caption">
<p>Retail Framework development works, we are working on responsive mockup design</p>
</div>
</div>
<div class="item">
<img src="img/portfolio/portfolio-1.jpg" alt="" class="img-responsive center-block" />
<div class="carousel-caption">
<p>Proof of concept on Responsive Online Care</p>
</div>
</div>
<div class="item">
<img src="img/portfolio/portfolio-2.jpg" alt="" class="img-responsive center-block"/>
<div class="carousel-caption">
<p>OnDevice App on Telkom Mobile - a leading network provider in South Africa</p>
</div>
</div>
<div class="item">
<img src="img/portfolio/portfolio-3.jpg" alt="" class="img-responsive center-block"/>
<div class="carousel-caption">
<p>Video Demo and Tutorial for Vodacom South Africa</p>
</div>
</div>
<div class="item">
<img src="img/portfolio/portfolio-4.jpg" alt="" class="img-responsive center-block"/>
<div class="carousel-caption">
<p>Mascot design for Developer@WDS</p>
</div>
</div>
<div class="item">
<img src="img/portfolio/proto.gif" alt="" class="img-responsive center-block"/>
<div class="carousel-caption">
<p>We can do mock up prototyping</p>
</div>
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
<!-- Controls -->
<a href="#portfolio-carousel" class="carousel-control left" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a href="#portfolio-carousel" class="carousel-control right" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /#portfolio-carousel -->
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row row-section--contact" id="contact" name="contact">
<div class="col-xs-12">
<h1 class="section-title"><i class="fa fa-comment"></i> Contact Us</h1>
<hr />
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row contact">
<div class="col-sm-5 col-sm-offset-1">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Title">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<textarea class="form-control" rows="8" placeholder="Your Messages Here..."></textarea>
</div>
<button type="submit" class="btn btn-primary pull-right">Submit</button>
</form><!-- /.form -->
</div><!-- /.span -->
<div class="col-sm-4 col-sm-offset-1">
<h3>What's next? Get in touch with us</h3>
<p>Let's get a conversation started or feel free to drop us a message.
We look forward to hearing from you.</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw fa-lg"></i> +65 1111 1111 | +65 2222 2222 (FAX)</li>
<li><i class="fa fa-map-marker fa-fw fa-lg"></i> 18 Lorem Ipsum Building, #17-00</li>
<li><i class="fa fa-envelope fa-fw fa-lg"></i> [email protected]</li>
</ul>
</div><!-- /.span -->
</div><!-- /.row -->
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div id="map-canvas"></div>
</div><!-- /.row -->
</div><!-- /.container -->
<div class="container-fluid max-width">
<div class="row footer">
<div class="col-xs-10 col-xs-offset-1">
<p>Designed by: ©2014 Felix Susanto</p>
<p>Powered by: Bootstrap - Copyright © 2011-2014 Twitter, Inc</p>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
<script src="js/smooth-scroll.js"></script>
<script src="js/min/index.min.js"></script>
</body>
</html>