-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
418 lines (418 loc) · 19.3 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
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>DesignWorks Architecture Agency</title>
<link rel="icon" href="images/favicon.png">
<script src="./js/jquery-2.1.4.js"></script>
<!-- Page Scroll Effects JS & CSS -->
<script src="./js/velocity/modernizr.js"></script>
<script src="./js/velocity/velocity.min.js"></script>
<script src="./js/velocity/velocity.ui.min.js"></script>
<script src="./js/velocity/main.js"></script>
<link rel="stylesheet" href="./js/velocity/velocity.css">
<!-- Smooth Scrolling -->
<script src="./js/jquery.scrollTo.min.js"></script>
<!-- Slick JS -->
<link rel="stylesheet" href="./js/slick/slick.css">
<link rel="stylesheet" href="./js/slick/slick-theme.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="./js/slick/slick.min.js"></script>
<!-- FeatherLight JS -->
<script src="./js/featherlight/featherlight.js"></script>
<link rel="stylesheet" href="./js/featherlight//featherlight.css">
<!-- Custom JS & CSS -->
<script src="custom.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<!-- data-animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="on" data-animation="catch">
<div class="container">
<section class="cd-section visible" id="home">
<div>
<div class="content">
<div class="home-inner">
<h3 class="welcome-text">You can do it<span>with Muscardinus <i class="fa fa-heart"></i></span></h3>
<div class="opacity-image"></div>
<div class="home-heading">
<span>Creative</span>
<span>Architecture</span>
<span>Specialists</span>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="about">
<div>
<div class="content">
<div class="about-inner">
<div class="about-items">
<div class="item">
<span>
<img src="./images/careers-main-01.png" alt="">
<h3>Together we can make an impact</h3>
<p>
Design Works the excitement of an entrepreneurial environment with the stability of an established practice. Principals and senior leadership work side-by-side with junior designers to create innovative, workable designs.
</p>
</span>
</div>
<div class="item">
<span>
<img src="./images/careers-main-02.png" alt="">
<h3>We’re always looking for talent</h3>
<p>
If you don’t see an open position that fits your talents, send us your resume. We’re always looking for smart, self-starters and will reach out to you if something becomes available.
</p>
</span>
</div>
<div class="item">
<span>
<img src="./images/careers-main-03.png" alt="">
<h3>Fellowship</h3>
<p>
Every summer we offer a Fellowship to a select group of students in architecture, planning and landscape architecture. Read about our 2019 Fellowship winners and learn more about what the Fellowship has to offer.
</p>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="project">
<div>
<div class="content">
<div class="project-inner">
<input type="radio" name="tabmenu" id="tab1" checked>
<input type="radio" name="tabmenu" id="tab2">
<input type="radio" name="tabmenu" id="tab3">
<div class="tabs">
<div class="tab">
<div class="project-info" data-text="01">
<h3>Project : Glass Wall Architecture</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat tenetur delectus soluta porro voluptatum repellendus nulla, nihil neque ullam saepe suscipit voluptatem laboriosam unde labore amet dolorum ipsam facilis nisi!
</p>
<ul>
<li><b>Area</b> : 1670 m2</li>
<li><b>Completed Date</b> : September 2018</li>
<li><b>Architect</b> : Andrew Yu</li>
</ul>
<div class="detail">
<div><span>225</span>WORKING DAY</div>
<div><span>320</span>MEMBERS</div>
<div><span>3M</span>BUDGET</div>
</div>
<a class="view-project" data-featherlight="iframe" href="./project-detail-01.html">view project<i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="project-photo">
<img src="./images/project-main-01-01.jpg" alt="">
<img src="./images/project-main-01-02.jpg" alt="">
<img src="./images/project-main-01-03.jpg" alt="">
<img src="./images/project-main-01-04.jpg" alt="">
</div>
</div>
<div class="tab">
<div class="project-info" data-text="02">
<h3>Hallway of Architecture</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore voluptas, tenetur odio expedita corrupti nam ex consequuntur officiis deserunt provident voluptatem maiores sed, nihil, ullam eos architecto eveniet corporis quam.
</p>
<ul>
<li><b>Area</b> : 2345 m2</li>
<li><b>Completed Date</b> : April 2019</li>
<li><b>Architect</b> : Robert Matteus</li>
</ul>
<div class="detail">
<div><span>321</span>WORKING DAY</div>
<div><span>420</span>MEMBERS</div>
<div><span>8M</span>BUDGET</div>
</div>
<a class="view-project" data-featherlight="iframe" href="./project-detail-02.html">view project<i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="project-photo">
<img src="./images/project-main-02-01.jpg" alt="">
<img src="./images/project-main-02-02.jpg" alt="">
<img src="./images/project-main-02-03.jpg" alt="">
<img src="./images/project-main-02-04.jpg" alt="">
</div>
</div>
<div class="tab">
<div class="project-info" data-text="03">
<h3>Project: Outside Stairs Architecture</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam nobis nesciunt libero quam modi fuga vitae voluptatibus magni deleniti perspiciatis inventore laboriosam quis reprehenderit est nisi, pariatur, voluptates recusandae. Neque.
</p>
<ul>
<li><b>Area</b> : 1200 m2</li>
<li><b>Completed Date</b> : May 2020</li>
<li><b>Architect</b> : Christine Jung</li>
</ul>
<div class="detail">
<div><span>132</span>WORKING DAY</div>
<div><span>202</span>MEMBERS</div>
<div><span>5M</span>BUDGET</div>
</div>
<a class="view-project" data-featherlight="iframe" href="./project-detail-03.html">view project<i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="project-photo">
<img src="./images/project-main-03-01.jpg" alt="">
<img src="./images/project-main-03-02.jpg" alt="">
<img src="./images/project-main-03-03.jpg" alt="">
<img src="./images/project-main-03-04.jpg" alt="">
</div>
</div>
</div>
<div class="btn">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="plan">
<div>
<div class="content">
<div class="plan-inner">
<div class="plan-feature">
<div class="plan-info">
<div class="plan-heading">
<h2>Planning <br>For the Next Project</h2>
<hr class="bar">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam quidem cum sunt et nobis veritatis libero modi quasi? Ea cumque perferendis a, eum aliquam cupiditate nobis eaque ipsam vero. Ipsam ad esse laboriosam corporis ullam animi mollitia commodi harum vero illo eaque incidunt, quia quam. Iste aliquid adipisci ipsam fugiat!
</p>
</div>
<div class="plan-photo">
<img src="./images/plan-main-01.jpg" alt="">
</div>
</div>
<div class="history-info">
<h2>History</h2>
<hr class="bar">
<div class="history-slider">
<div>
<h4>The Project <br>of Architect for the <span>2013</span></h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus alias cupiditate, incidunt quod dolor eaque vel. Ipsa nobis magnam suscipit.
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2014</span></h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus alias cupiditate, incidunt quod dolor eaque vel. Ipsa nobis magnam suscipit.
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2015</span></h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus alias cupiditate, incidunt quod dolor eaque vel. Ipsa nobis magnam suscipit.
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2016</span></h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus alias cupiditate, incidunt quod dolor eaque vel. Ipsa nobis magnam suscipit.
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2017</span></h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus alias cupiditate, incidunt quod dolor eaque vel. Ipsa nobis magnam suscipit.
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2018</span></h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus alias cupiditate, incidunt quod dolor eaque vel. Ipsa nobis magnam suscipit.
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2019</span></h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus alias cupiditate, incidunt quod dolor eaque vel. Ipsa nobis magnam suscipit.
</p>
</div>
<div>
<h4>The Project <br>of Architect for the <span>2020</span></h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus alias cupiditate, incidunt quod dolor eaque vel. Ipsa nobis magnam suscipit.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="awards">
<div>
<div class="content">
<div class="awards-inner">
<div class="about-awards">
<div class="about-heading">
<h2>2020 <br>Architecture Award <br>Winner</h2>
<hr class="bar">
<p>
The mission of the Architecture MasterPrize (AMP) is to advance the appreciation and exposure of quality architectural design worldwide. The AMP architecture award celebrates creativity and innovation in the fields of architectural design, landscape architecture, and interior design. Submissions from architects all around the world are welcome.
</p>
<a class="view-awards" href="https://www.internationalarchitectureawards.com/" target="_blank">view the awards</a>
</div>
</div>
<div class="victory-jump">
<img src="./images/victory-jump.png" alt="">
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="location">
<div>
<div class="content">
<div class="location-inner">
<div class="feature">
<div class="office">
<div class="headquarters">
<b>CREATIVE DESGIN GROUP</b>
<h2>Headquarters</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis, ab explicabo sit voluptate rem, veritatis laboriosam veniam mollitia qui dolor sapiente molestias porro quia iusto ullam! Consectetur rem necessitatibus debitis.
</p>
<span>
Address : Address: 309, New Cavendish St, EC1Y 3WK / Tel : 0800 214 5252
</span>
</div>
<div class="customer">
<b>THE PERFECT WAY</b>
<h2>Customer Service</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis, ab explicabo sit voluptate rem, veritatis laboriosam veniam mollitia qui dolor sapiente molestias porro quia iusto ullam! Consectetur rem necessitatibus debitis.
</p>
<span>
Address : 11 Fifth Ave - New York, US / Tel : 0800 809 3400
</span>
</div>
</div>
<div class="service">
<div class="service-item">
<i class="fa fa-leaf"></i>
<h3>Built and natural contexts</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere sint beatae explicabo inventore non nostrum.
</p>
</div>
<div class="service-item">
<i class="fa fa-leaf"></i>
<h3>Landscape design</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere sint beatae explicabo inventore non nostrum.
</p>
</div>
<div class="service-item">
<i class="fa fa-leaf"></i>
<h3>Every building site unique</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere sint beatae explicabo inventore non nostrum.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="contact">
<div>
<div class="content">
<div class="contact-inner">
<div class="contact-feature">
<div class="contact-form">
<h3><b>Contact</b> Us</h3>
<p>Feel free to ask for details, dont’save any questions.</p>
<form class="send-box">
<label>Email <span>*</span></label>
<input type="email" name="" id="" placeholder="[email protected]">
<label>Subject <span>*</span></label>
<input type="text" name="" id="" placeholder="subject">
<label>Message <span>*</span></label>
<textarea name="" id="" cols="30" rows="10" placeholder="messages...."></textarea>
<button>send message</button>
</form>
</div>
<div class="contact-info">
<h4>Our <b>Office</b></h4>
<ul>
<li>
Address : Address: 309, New Cavendish St, EC1Y 3WK
</li>
<li>
Phone : 0800 214 5252
</li>
<li>
Email : [email protected]
</li>
</ul>
<h4>Buisness <b>Hours</b></h4>
<ul>
<li><i class="fa fa-clock-o"></i>
Monday - Friday : 9am to 5pm
</li>
<li><i class="fa fa-clock-o"></i>
Saturday : 9am to 2pm
</li>
<li><i class="fa fa-clock-o"></i>
Sunday : Closed
</li>
</ul>
<h4>Get in <b>Touch</b></h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit quod adipisci voluptas alias velit consequuntur quo autem exercitationem culpa quibusdam? Quam sunt, saepe cupiditate dolore sit ipsa, maiores eaque pariatur ea, fuga excepturi cum ullam eum. Illo mollitia maiores sapiente dolorum, odio ipsum ratione obcaecati laborum alias vel quo facilis.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<header>
<div class="gnb-inner">
<div class="logo">
<a href="#none" class="main-gototop"><img src="images/logo.png"></a>
</div>
<div class="gnb">
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#project">Project</a>
<a href="#plan">Plan & History</a>
<a href="#awards">Awards</a>
<a href="#location">Location</a>
<a href="#contact">Contact</a>
</div>
<div class="slogan">We design places, not projects.</div>
</div>
<div class="trigger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
</div>
<a href="#" class="gototop"><img src="./images/gototop.png"></a>
<a href="./hiring.html" data-featherlight="iframe" class="btn-hiring"><i class="fa fa-commenting"></i>Hiring</a>
<nav>
<ul class="cd-vertical-nav">
<li><a href="#0" class="cd-prev inactive">Next</a></li>
<li><a href="#0" class="cd-next">Prev</a></li>
</ul>
</nav> <!-- .cd-vertical-nav -->
</body>
</html>