-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
383 lines (370 loc) · 17.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta
name="description"
content="Website of Nocxa - a student-led software development agency."
/>
<meta
name="keywords"
content="webdesign, web development, UX, UI, apps, graphic design, software engineering"
/>
<meta property="og:image" content="" />
<meta name="author" content="Nocxa" />
<link href="./assets/nocxa.png" type="image/x-icon" rel="shortcut icon" />
<link rel="apple-touch-icon" href="./assets/nocxa.png">
<title>Nocxa</title>
<!-- CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
/>
<link rel="stylesheet" href="./css/main.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="preloader flex-c" id="preloader">
<svg
height="100%"
stroke-miterlimit="10"
style="
fill-rule: nonzero;
clip-rule: evenodd;
stroke-linecap: round;
stroke-linejoin: round;
"
version="1.1"
viewBox="0 0 1000 1000"
width="100%"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:vectornator="http://vectornator.io"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs />
<g id="Layer-1" vectornator:layerName="Layer 1">
<g opacity="1">
<path
d="M674.912 710.663C640.489 710.663 608.672 699.807 582.942 681.489L582.011 682.482L545.84 721.064C581.459 747.754 626.229 763.701 674.912 763.701C703.238 763.701 730.243 758.281 754.902 748.52L759.815 743.192C766.582 735.856 774.916 715.292 779.891 703.012L781.94 697.975C787.96 683.277 792.622 668.443 796.237 654.149C767.876 688.535 724.051 710.663 674.912 710.663"
fill="#ffffff"
fill-rule="evenodd"
opacity="1"
stroke="none"
/>
<path
d="M674.912 644.687C722.335 644.687 760.923 607.645 760.923 562.119C760.923 516.586 722.335 479.545 674.912 479.545C627.49 479.545 588.904 516.586 588.904 562.119C588.904 607.645 627.49 644.687 674.912 644.687"
fill="#ffffff"
fill-rule="evenodd"
opacity="1"
stroke="none"
/>
<path
d="M252.978 710.663C167.657 710.663 98.24 644.023 98.24 562.113C98.24 491.799 149.412 432.781 217.871 417.474C214.792 416.486 211.672 415.432 208.543 414.287C186.577 406.296 168.334 396.265 153.837 384.396C87.8688 418.388 43 485.216 43 562.113C43 673.446 137.005 763.701 252.978 763.701C300.892 763.701 345.032 748.263 380.373 722.327L343.2 682.685C317.786 700.265 286.631 710.663 252.978 710.663"
fill="#ffffff"
fill-rule="evenodd"
opacity="1"
stroke="none"
/>
<path
d="M166.967 562.116C166.967 607.642 205.554 644.685 252.978 644.685C300.407 644.685 338.992 607.642 338.992 562.116C338.992 516.583 300.407 479.547 252.978 479.547C205.554 479.547 166.967 516.583 166.967 562.116"
fill="#ffffff"
fill-rule="evenodd"
opacity="1"
stroke="none"
/>
<path
d="M296.064 331.725C251.677 323.744 161.455 294.206 145.536 235.848C145.536 235.848 124.397 298.653 160.225 346.066C167.614 355.853 177.508 363.857 188.176 370.364C219.629 389.551 257.821 395.679 258.57 395.703C345.371 398.787 414.751 467.309 414.751 551.39C414.751 591.177 399.183 627.453 373.619 654.992C371.464 657.307 369.26 659.592 366.964 661.781L367.285 662.123L404.387 701.707L461.215 762.315L461.215 418.249C452.456 400.932 417.928 353.631 296.064 331.725M820.966 353.795C817.453 315.15 806.174 273.116 779.491 235.852C763.572 294.209 673.35 323.741 628.963 331.722C500.003 354.911 468.836 406.544 462.509 420.974C462.166 420.181 461.726 419.256 461.215 418.246L461.215 762.316L462.509 763.704L522.026 700.217L558.055 661.787C528.544 633.57 510.273 594.534 510.273 551.393C510.273 502.951 533.312 459.675 569.432 431.097C598.181 407.483 635.493 393.188 676.294 393.188C767.154 393.188 840.81 463.901 840.81 551.125C841.811 694.756 784.934 764.152 784.934 764.152C884.708 741.841 959.036 655.934 959.036 553.36C959.036 463.572 902.083 386.565 820.966 353.795"
fill="#8c52ff"
fill-rule="evenodd"
opacity="1"
stroke="none"
/>
</g>
</g>
</svg>
</div>
<div id="website">
<!-- NAVIGATION -->
<header class="cd-header">
<div class="header-wrapper">
<div class="logo-wrap">
<img
class="header-logo"
src="./assets/nocxa_title.svg"
alt="logo"
/>
</div>
<div class="nav-but-wrap">
<div class="menu-icon hover-target">
<span class="menu-icon__line menu-icon__line-left"></span>
<span class="menu-icon__line"></span>
<span class="menu-icon__line menu-icon__line-right"></span>
</div>
</div>
</div>
</header>
<div class="nav">
<div class="nav__content">
<ul class="nav__list">
<li class="nav__list-item">
<a href="#home" class="hover-target active-nav-btn">home</a>
</li>
<li class="nav__list-item">
<a href="#about" class="hover-target">about</a>
</li>
<li class="nav__list-item">
<a href="#work" class="hover-target">work</a>
</li>
<li class="nav__list-item">
<a href="#team" class="hover-target">team</a>
</li>
<li class="nav__list-item">
<a href="#contact" class="hover-target">contact</a>
</li>
</ul>
</div>
</div>
<!-- CURSOR -->
<div class="cursor" id="cursor"></div>
<div class="cursor2" id="cursor2"></div>
<div class="cursor3" id="cursor3"></div>
<!-- HOME -->
<div class="section full-height over-hide" id="home">
<div class="switch-wrap flex-c-v">
<div class="home-title" data-aos="fade-down" data-aos-duration="2500">Nocxa</div>
<div class="home-sub-t" data-aos="fade-down" data-aos-duration="2500">
we design and build digital products bringing new ideas to life.
</div>
<div class="contact-page-btn hover-target">
<a href="#contact">Get in touch</a>
</div>
</div>
</div>
<!-- ABOUT -->
<div class="section over-hide about" id="about">
<div class="about-bg-text" id="about-bg-text">
WHAT CAN WE DO? WED DEVELOPMENT APP DESKTOP APPS ART AND LOGO WHAT CAN
WE DO? FLUTTER APP DEVELOPMENT WHAT CAN WE DO? IOS ANDRIOD WHAT CAN WE
DO?
</div>
<div class="max-width-container">
<div class="about-details flex-c-v">
<div class="about-details-t">WHAT CAN WE DO</div>
<div class="tabs-wrapper">
<ul class="tabs">
<li class="active hover-target" rel="tab1">Web Development</li>
<li class="hover-target" rel="tab2">App Development</li>
<li class="hover-target" rel="tab3">Desktop Apps</li>
<li class="hover-target" rel="tab5">Logo Design & Art</li>
</ul>
<div class="tab-container">
<!-- #tab1 -->
<div class="active-h tab_drawer_heading" rel="tab1">
Web Development
</div>
<div id="tab1" class="tab_content">
<!-- <div>________</div> -->
<img src="./assets/websitee.png" class="tab-img" />
<div class="tab_content_info">
With our talented team of UX/UI designers,
frontend-developers and backend-developers, we can create an
online presence for you which is as functional as it is
beautiful.
</div>
</div>
<!-- #tab2 -->
<div class="tab_drawer_heading" rel="tab2">App Development</div>
<div id="tab2" class="tab_content flex-c-v">
<!-- <div>________</div> -->
<img src="./assets/phonee.png" class="tab-img" />
<div class="tab_content_info">
iOS? Android? Progressive Web App? Not a problem. Our
talented team of mobile app designers and developers can
bring your app idea to life.
</div>
</div>
<!-- #tab3 -->
<div class="tab_drawer_heading" rel="tab3">Desktop Apps</div>
<div id="tab3" class="tab_content">
<!-- <div>________</div> -->
<img src="./assets/data.webp" class="tab-img" />
<div class="tab_content_info">
We can provide bespoke, close-to-the-metal programs, which
can bring your product or service into the digital world, or
empower your employees.
</div>
</div>
<!-- #tab4 -->
<div class="tab_drawer_heading" rel="tab5">
Logo Design & Art
</div>
<div id="tab5" class="tab_content">
<!-- <div>________</div> -->
<img src="./assets/art.jpeg" class="tab-img" />
<div class="tab_content_info">
Branding is the first point of contact. It sets customer
expectations. Our design team has decades of experience, and
are native to modern aesthetics.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section over-hide" id="technology">
<div class="max-width-container">
<div class="technology-inner">
<div class="technology-title" data-aos="fade-right" data-aos-duration="1500">Technologies for your solution</div>
<div class="technology-sub-title" data-aos="fade-left" data-aos-duration="2000">Our specialists use proven software development tools to ensure your product works as it <br> should and meets your users’ expectations.</div>
<div class="technology-showcase" data-aos="fade-right" data-aos-duration="2500">
<input class="state" type="radio" title="tab-one" name="tabs-state" id="tab-one" />
<input class="state" type="radio" title="tab-two" name="tabs-state" id="tab-two" checked/>
<input class="state" type="radio" title="tab-three" name="tabs-state" id="tab-three" />
<input class="state" type="radio" title="tab-four" name="tabs-state" id="tab-four" />
<div class="tabs flex-tabs">
<label for="tab-one" id="tab-one-label" class="tab hover-target">Frontend</label>
<label for="tab-two" id="tab-two-label" class="tab hover-target">Backend</label>
<label for="tab-three" id="tab-three-label" class="tab hover-target">Mobile</label>
<label for="tab-four" id="tab-four-label" class="tab hover-target">Third-party Integration</label>
<div id="tab-one-panel" class="panel">
<div class="tech-showcase-container">
<img class="tech-item-box" src="./assets/brand_icons/reactjs.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/angular.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/vuejs.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/selenium.svg" alt="" srcset="">
</div>
</div>
<div id="tab-two-panel" class="panel active">
<div class="tech-showcase-container">
<img class="tech-item-box" src="./assets/brand_icons/java.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/nodejs.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/postgresql.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/docker.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/django.svg" alt="" srcset="">
</div>
</div>
<div id="tab-three-panel" class="panel">
<div class="tech-showcase-container">
<img class="tech-item-box" src="./assets/brand_icons/flutter.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/swift.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/kotlin.svg" alt="" srcset="">
</div>
</div>
<div id="tab-four-panel" class="panel">
<div class="tech-showcase-container">
<img class="tech-item-box" src="./assets/brand_icons/figma.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/aws.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/awslambda.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/awscloudfront.svg" alt="" srcset="">
<img class="tech-item-box" src="./assets/brand_icons/kubernetes.svg" alt="" srcset="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CONTACT -->
<div class="section over-hide" id="contact">
<div class="max-width-container">
<div class="contact-inner">
<div class="contact-title" data-aos="fade-up" data-aos-duration="1400">Get in touch</div>
<form data-aos="fade-up"
data-aos-duration="1000"
class="contact-form flex-c-v"
action="https://formsubmit.co/913dcdc22053ca7abfe5f79b178b8ed6"
method="POST"
>
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea
type="text"
name="message"
placeholder="Message"
rows="6"
required
></textarea>
<button class="contact-submit-btn hover-target" type="submit">
Send
</button>
</form>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="section footer">
<div class="max-width-container">
<div class="footer-inner">
<div class="footer-list">
<a class="footer-list-item hover-target" href="#about">Services</a>
<a class="footer-list-item hover-target" href="#about">About Us</a>
<a class="footer-list-item hover-target">Our Work</a>
<a class="footer-list-item hover-target">The Team</a>
<a class="footer-list-item hover-target">Careers</a>
<a class="footer-list-item hover-target">Privacy Policy</a>
<a class="footer-list-item hover-target">Cookie Policy</a>
</div>
<div class="footer-socials flex-c">
<a href="https://github.com/nocxa" target="_blank"
><i class="fa-brands fa-2xl fa-github hover-target"></i
></a>
<a href="https://www.linkedin.com/company/nocxa" target="_blank"
><i class="fa-brands fa-2xl fa-linkedin hover-target"></i
></a>
<a href="https://twitter.com/nocxaofficial" target="_blank"
><i class="fa-brands fa-2xl fa-twitter hover-target"></i
></a>
<a
href="https://www.instagram.com/nocxa_official/"
target="_blank"
><i class="fa-brands fa-2xl fa-instagram hover-target"></i
></a>
</div>
<div class="footer-brand">
<div class="footer-brand-logo">
<img src="./assets/nocxa_title.svg" alt="logo" />
</div>
<div class="footer-brand-text">
2019 © Noxca All rights reserved
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var loader = document.getElementById("preloader");
var website = document.getElementById("website");
window.addEventListener("load", function () {
setTimeout(function () {
loader.style.height = "0";
website.style.visibility = "visible";
}, 1000);
});
</script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
<!-- JS -->
<script src="./js/main.js"></script>
</html>