-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
212 lines (199 loc) · 14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="assets/favicon/favicon.ico">
<link rel="apple-touch-icon" href="assets/favicon/favicon-touch-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/favicon/favicon-touch-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/favicon/favicon-touch-114.png">
<link rel="stylesheet" href="theme.css">
<title>OptionFactory</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/kute.min.js"></script>
</head>
<body>
<div class="head-spacer"></div>
<div class="navbar">
<img src="assets/logo/logo-with-name.svg" alt="OptionFactory logo">
<a href="">Home</a>
<a href="">About</a>
<a href="">Strength</a>
<a href="">Services</a>
<a href="">Curses</a>
<a href="">Labs</a>
<a href="">Join Us</a>
<a href="">Contacts</a>
</div>
<div class="landing">
<div class="heading">
<h1>Software development<br>the way it was always meant to be</h1>
<h2>Your ambitions grown on dialogue and trust</h2>
</div>
<img src="assets/imgs/Saly-13.png" alt="man using laptop">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="about">
<img src="assets/imgs/divider-about.svg" alt="wave divider" class="divider divider-about">
<div class="content">
<img src="assets/imgs/Saly-10.png" alt="developer developing">
<div class="text-container">
<h2>Passion, with experience</h2>
<h3>Enthusiastic about amazing you</h3>
<p>We are a passionate team of experienced, dedicated professionals striving to bring you quality and
value.</p>
<p>Our purpose is to amaze you with well-crafted, useful software that makes an impact on your
organization. We believe learning and experimenting are fundamental tools to wade through
uncertainty and complexity inherent in tomorrow's problems.</p>
</div>
</div>
</div>
<div class="development">
<img src="assets/imgs/divider-dev.svg" alt="wave divider" class="divider divider-dev">
<div class="content">
<div class="text-container">
<h2>Lean on us</h2>
<h3>Think big, act small, fail fast, learn rapidly</h3>
<p>You can depend on OptionFactory for your software development needs. We understand that software is
not the end goal, but a mean to reach your business case: by keeping it at the forefront of our
efforts, you always get high effectiveness.</p>
<p>Embrace the tenets of Lean Software Development to ensure delivery of a continuous stream of value,
starting from the first moments of any project. Measure and check the results of our teamwork on
your customer base to eliminate wasteful efforts and reach your objectives as fast as possible.</p>
</div>
<div class="illustration">
<div class="moving-layer">
<svg width="336" height="350" viewBox="0 0 336 350" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="blob1" d="M280.585 17.4759C314.761 40.9332 334.983 91.9181 335.893 143.76C336.702 195.709 318.098 248.407 283.922 288.574C249.645 328.741 199.899 356.375 158.039 347.914C116.179 339.452 82.4076 294.894 52.5798 254.727C22.7521 214.56 -3.13238 178.785 0.406512 146.652C3.9454 114.519 36.8065 86.1341 66.6343 62.6768C96.4621 39.3266 123.256 20.9034 160.668 9.65677C198.18 -1.58989 246.309 -5.87433 280.585 17.4759Z" fill="#709B8A"/>
<path id="blob2" style="visibility: hidden;" d="M247.72 52.5403C273.301 74.6052 294.332 106.739 294.636 139.193C295.04 171.541 274.717 204.424 249.136 244.591C223.554 284.757 192.513 332.207 155.102 339.063C117.691 345.918 73.91 311.963 54.9011 271.797C35.9933 231.63 41.8577 185.251 43.5766 140.479C45.1944 95.8132 42.6666 52.9688 61.5744 30.7968C80.5833 8.62476 121.028 7.33944 156.417 12.695C191.806 18.1577 222.139 30.3683 247.72 52.5403Z" fill="#709B8A"/>
</svg>
<script>
const tween = KUTE.fromTo(
'#blob1',
{ path: '#blob1' },
{ path: '#blob2' },
{ repeat: 999, duration: 4000, yoyo: true }
)
tween.start();
</script>
</div>
<img src="assets/imgs/Saly-12.png" alt="developer developing">
</div>
</div>
</div>
<div class="curses">
<img src="assets/imgs/divider-curses.svg" alt="wave divider" class="divider divider-curses">
<div class="content">
<div class="logos">
<img src="assets/curses/cyberark.png" alt="cyberark logo">
<img src="assets/curses/kubernetes.png" alt="kubernetes logo">
<img src="assets/curses/mongo.png" alt="mongo logo">
<img src="assets/curses/php.png" alt="php logo">
<img src="assets/curses/mssql.png" alt="mssql logo">
<img src="assets/curses/node.png" alt="node logo">
</div>
<div class="text-container">
<h2>Curses</h2>
<h3>The customer is always right</h3>
<p>We accommodate customer's willing. There's always multiple ways to archive the wanted result but sometime there's the 'need' for a specific tech stack.</p>
<p>Here's some solutions we master, even against our willing.</p>
</div>
</div>
</div>
<div class="team">
<img src="assets/imgs/divider-team.svg" alt="wave divider" class="divider divider-team">
<div class="content">
<div class="spacer"></div>
<div class="members">
<h2>Our Team</h2>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Lorem.svg" alt="Lorem" class="avatar">
<p class="name">Lorem</p>
<p class="bio"><b><!--</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab nesciunt, accusamus esse veritatis commodi debitis illum dolorem, qui ex tempora nobis nulla sed maiores quisquam eligendi, beatae rerum at laborum. <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Enim.svg" alt="Enim" class="avatar">
<p class="name">Enim</p>
<p class="bio"><b><!--</b> Est voluptatibus libero blanditiis quod quasi cum laborum iure. Facere accusantium fugit est minus? Modi, iusto dolores quod officia autem dolore quis debitis ad nemo maiores corrupti recusandae pariatur nostrum. <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Iste.svg" alt="Iste" class="avatar">
<p class="name">Iste</p>
<p class="bio"><b><!--</b> Est quibusdam doloremque accusamus soluta culpa vitae velit. Veritatis incidunt consequuntur optio, voluptatum distinctio quam ad blanditiis nobis fugit explicabo dolorem animi tempore voluptas neque ipsum qui earum vero amet. <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Incidunt.svg" alt="Incidunt" class="avatar">
<p class="name">Incidunt</p>
<p class="bio"><b><!--</b> Accusantium blanditiis repellat necessitatibus aspernatur hic odit suscipit unde, voluptas, aliquid error non nemo sunt. A exercitationem iure dolores possimus in nihil natus neque, non tenetur quae, quaerat, itaque saepe? <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Iusto.svg" alt="Iusto" class="avatar">
<p class="name">Iusto</p>
<p class="bio"><b><!--</b> Labore adipisci tempora maiores. Modi dicta doloribus soluta necessitatibus sunt, ipsum recusandae quasi fuga optio cumque iste fugit officia ex, dignissimos quaerat? Labore fugiat velit, provident deserunt pariatur mollitia molestias! <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Doloremque.svg" alt="Doloremque" class="avatar">
<p class="name">Doloremque</p>
<p class="bio"><b><!--</b> Nisi excepturi delectus libero dignissimos natus. Placeat voluptate, a atque dolor eos laborum ad pariatur eum laboriosam architecto temporibus iure, alias necessitatibus earum, distinctio quo molestiae nam perferendis vitae magnam! <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Nemo.svg" alt="Nemo" class="avatar">
<p class="name">Nemo</p>
<p class="bio"><b><!--</b> Odit, recusandae tenetur et eum sint numquam laboriosam animi eius sed est nihil blanditiis cum, soluta vel, reprehenderit illo eaque aliquid laudantium? Hic perferendis excepturi laboriosam dolores eum possimus eligendi! <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Sequi.svg" alt="Sequi" class="avatar">
<p class="name">Sequi</p>
<p class="bio"><b><!--</b> Distinctio consequuntur deleniti itaque, tempora amet eum exercitationem? Voluptatibus maxime facilis nam ea blanditiis atque error iste, beatae nostrum cumque vel, possimus adipisci quaerat aliquam! Pariatur nemo explicabo qui sit? <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Ab.svg" alt="Ab" class="avatar">
<p class="name">Ab</p>
<p class="bio"><b><!--</b> Est vero asperiores non ullam nulla facere optio quam perferendis laborum illum? Nam tempora ipsa minima voluptatum architecto minus, eum ullam at ea commodi ab qui incidunt praesentium voluptates perspiciatis. <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Deleniti.svg" alt="Deleniti" class="avatar">
<p class="name">Deleniti</p>
<p class="bio"><b><!--</b> Voluptas, assumenda illum sapiente dolorum pariatur, voluptates adipisci corrupti quisquam quo beatae dolores architecto aperiam labore odit iste fugit! Reiciendis molestiae aliquam animi eius beatae error totam, a reprehenderit? Assumenda! <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Exercitationem.svg" alt="Exercitationem" class="avatar">
<p class="name">Exercitationem</p>
<p class="bio"><b><!--</b> Impedit cum eaque itaque soluta dicta minus assumenda, deleniti fuga ex veritatis quisquam quis in nemo, illo, quasi est consequuntur sapiente sed. Ipsa aliquam nihil ratione saepe voluptas velit error? <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Magnam.svg" alt="Magnam" class="avatar">
<p class="name">Magnam</p>
<p class="bio"><b><!--</b> Sapiente asperiores perferendis suscipit, repellendus eum deserunt, quidem blanditiis similique ad fuga corrupti pariatur odio quas quibusdam amet eos corporis molestias voluptatem alias? Aliquam sequi ducimus, officiis quis non excepturi? <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Dolorum.svg" alt="Dolorum" class="avatar">
<p class="name">Dolorum</p>
<p class="bio"><b><!--</b> Laudantium mollitia libero impedit nobis, voluptatibus error aliquid minus commodi officia nemo. Recusandae nemo reiciendis debitis dolorem tenetur quod! Aliquam aperiam sed optio inventore ex necessitatibus porro eius provident repellendus. <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Ipsa.svg" alt="Ipsa" class="avatar">
<p class="name">Ipsa</p>
<p class="bio"><b><!--</b> Blanditiis, corporis itaque! Id ipsum natus quasi! Aliquid praesentium culpa nihil, facere totam iusto provident? Adipisci, ad facilis molestias a culpa amet, praesentium vel necessitatibus hic debitis et aut quos? <b>--></b> </p>
</div>
<div class="member">
<img src="https://avatars.dicebear.com/api/big-smile/Totam.svg" alt="Totam" class="avatar">
<p class="name">Totam</p>
<p class="bio"><b><!--</b> Impedit repudiandae, voluptas fugit ab maxime optio omnis autem voluptates dolorum, tempore perspiciatis mollitia itaque, voluptate doloribus iure alias voluptatibus consequatur temporibus veritatis sit molestiae accusamus. Fuga, iusto itaque. Molestias. <b>--></b> </p>
</div>
</div>
</div>
</div>
</body>
</html>