-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
637 lines (637 loc) · 34.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
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
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Aria</title>
<link rel="stylesheet" href="./dist/main.css">
<script src="https://kit.fontawesome.com/9dc7bd82a5.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="presentation">
<nav class="nav">
<img class="nav__logo"
src="./assets/logo.svg" alt="Aria">
<div class="nav__menu-icon nav__menu-icon--active">
<svg id="i-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"
width="28" height="32" fill="none" stroke="currentcolor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5">
<path d="M4 8 L28 8 M4 16 L28 16 M4 24 L28 24" />
</svg>
</div>
<div class="nav__menu-icon">
<svg id="i-close"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"
width="18" height="32" fill="none" stroke="currentcolor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
<path d="M2 30 L30 2 M30 30 L2 2" />
</svg>
</div>
<div class="menu">
<a class="menu__item text text--smaller text--uppercase text--bolder text--white text--on-hover-green" href="#presentation">Home</a>
<a class="menu__item text text--smaller text--uppercase text--bolder text--white text--on-hover-green" href="#intro">Intro</a>
<a class="menu__item text text--smaller text--uppercase text--bolder text--white text--on-hover-green" href="#services">Services</a>
<a class="menu__item text text--smaller text--uppercase text--bolder text--white text--on-hover-green" href="#call-me">Call me</a>
<a class="menu__item text text--smaller text--uppercase text--bolder text--white text--on-hover-green" href="#about">About ▾</a>
<a class="menu__item text text--smaller text--uppercase text--bolder text--white text--on-hover-green" href="#contact">Contact</a>
</div>
<div class="social social--smaller social--on-hover-hexagon-white">
<div class="hexagon hexagon--smaller">
<i class="fab fa-facebook-f hexagon__icon hexagon__icon--smaller"></i>
</div>
<div class="hexagon hexagon--smaller">
<i class="fab fa-twitter hexagon__icon hexagon__icon--smaller"></i>
</div>
</div>
</nav>
<div class="presentation__content">
<h1>BUSINESS <span class="js-animated-text">SOLUTIONS</span>
</h1>
<p class="text text--small">Aria is a top consultancy company
specializing in business growth
using online marketing and
conversion optimization tactics
</p>
<button data-navigate-to="#intro" class="button button--on-hover-background-none-yes text text--white text--smaller text--uppercase text--bolder">Discover</button>
</div>
<img class="background"
srcset="./assets/header-background_580w.jpg 580w,
./assets/header-background_755w.jpg 755w,
./assets/header-background_980w.jpg 980w,
./assets/header-background_1200w.jpg 1200w"
src="./assets/header-background.jpg"
alt="beautiful lake picture">
</section>
<section id="intro" class="section">
<div class="intro__content">
<div class='text-container'>
<div class="text-header">
<h4 class="text-header__title">INTRO</h4>
<h2 class="text-header__message">We Offer Some Of The Best Business Growth Services In Town</h2>
</div>
<div class="text-container">
<p class="text text--small text--distance-medium">Launching a new company or developing the market position
of an existing one can be quite an overwhelming processs
at times.
</p>
<p class="text--distance-medium"><q class="text text--small text--italic">
Our mission here at Aira is to get you through those tough moments relying on
our team's expertise in starting and growing companies.</q></p>
<h4 class="text text--small text--dark-gray">Louise Donovan - CEO</h4>
</div>
</div>
<div class="image-container image-container--border-small">
<img class="image-container__image image-container__image--zoom-yes" src="./assets/intro-woman.jpg" alt="Woman">
</div>
</div>
<ul class="intro__steps">
<li>
<div class="hexagon hexagon--big">
<i class="fas fa-binoculars hexagon__icon hexagon__icon--big"></i>
</div>
<h3 class="text text--dark-gray text--medium text--distance-smaller">Environment Analysis</h3>
<p class="text text--small">The starting point of any success story is
knowing your current position
in the business environment</p>
</li>
<li>
<div class="hexagon hexagon--big">
<i class="fas fa-list-alt hexagon__icon hexagon__icon--big"></i>
</div>
<h3 class="text text--dark-gray text--medium text--distance-smaller">Development Planning</h3>
<p class="text text--small">After completing the environmental analysis
the next stage is to design and plan
your development strategy</p>
</li>
<li>
<div class="hexagon hexagon--big">
<i class="fas fa-chart-pie hexagon__icon hexagon__icon--big"></i>
</div>
<h3 class="text text--dark-gray text--medium text--distance-smaller">Execution & Evaluation</h3>
<p class="text text--small">In this phase you will focus on
executing the actions plan and evaluating
the results after each marketing campaign</p>
</li>
</ul>
</section>
<section id="services" class="section section--background-color-light-white">
<div class="text-header text-header--align-center">
<h4 class="text-header__title">SERVICES</h4>
<h2 class="text-header__message">Choose The Service Package That Suits Your Needs</h2>
</div>
<ul class="card-container">
<li class="card">
<div class="image-container">
<img class="image-container__image" src="./assets/services-1.jpg" alt="A cup of coffe">
</div>
<div class="card__title">
<h3 class="text text--bolder text--dark-gray">Off The Ground Off The Ground</h3>
</div>
</h3>
<div class="card__body">
<div class="card__description">
<p class="text">Perfect for fresh ideas or young startups,
this package will help get the business off the ground</p>
<ul class="ul ul--decorated-with-squares">
<li class="ul__li">Environment and competition</li>
<li class="ul__li">Designing the marketing plan</li>
</ul>
</div>
<div class="card__footer">
<h4 class="text text--bolder text--dark-gray">Starting at <span class="text--green">$199</span></h4>
<button class="button button--on-hover-background-white-yes text text--white text--smaller text--uppercase text--bolder">DETAILS</button>
</div>
</div>
</li>
<li class="card">
<div class="image-container">
<img class="image-container__image" src="./assets/services-2.jpg" alt="A book">
</div>
<div class="card__title">
<h3 class="text text--bolder text--dark-gray">Accelerated Growth</h3>
</div>
<div class="card__body">
<div class="card__description">
<p class="text">Use this service pack to give your company the necessary
impulse to become an industry leader</p>
<ul class="ul ul--decorated-with-squares">
<li class="ul__li">Business strategy planning</li>
<li class="ul__li">Taking the planned actions</li>
</ul>
</div>
<div class="card__footer">
<h4 class="text text--bolder text--dark-gray">Starting at <span class="text--green">$199</span></h4>
<button class="button button--on-hover-background-white-yes text text--white text--smaller text--uppercase text--bolder">DETAILS</button>
</div>
</div>
</li>
<li class="card">
<div class="image-container">
<img class="image-container__image" src="./assets/services-3.jpg" alt="Man feet on river's bank">
</div>
<div class="card__title">
<h3 class="text text--bolder text--dark-gray">Market Domination</h3>
</div>
<div class="card__body">
<div class="card__description">
<p class="text">You already are a reference point in your industry
now you need to learn about acquisitions</p>
<ul class="ul ul--decorated-with-squares">
<li class="ul__li">Maintaining the leader status</li>
<li class="ul__li">Acquisitions the right way</li>
</ul>
</div>
<div class="card__footer">
<h4 class="text text--bolder text--dark-gray">Starting at <span class="text--green">$299</span></h4>
<button class="button button--on-hover-background-white-yes text text--white text--smaller text--uppercase text--bolder">DETAILS</button>
</div>
</div>
</li>
</ul>
</section>
<section id="details">
<ul class="ul">
<li class="ul__li">
<div class="image-container">
<img class="image-container__image image-container__image--height-auto" src="./assets/details-1-background.jpg" alt="Green trees and water">
</div>
</li>
<li class="ul__li ul__li--width-large">
<div class="text-header">
<h2 class="text-header__message">Accelerate Business Growth To Improve Revenue Numbers</h2>
</div>
<ol class="ol">
<li class="ol__li">
<h3 class="ol__count-item ol__count-item--border-circular ol__count-item--on-hover-green text text--bolder text--dark-gray text--medium text--on-hover-green">How Can Aria Help Your Business</h3>
<p class="text text--small">At Aria solutions, we’ve taken the consultancy concept one step further
by offering a full service management organization with expertise.
</p>
</li>
<li class="ol__li">
<h3 class="ol__count-item ol__count-item--border-circular ol__count-item--on-hover-green text text--bolder text--dark-gray text--medium text--on-hover-green">Great Strategic Business Planning</h3>
<p class="text text--small">Aria partners with businesses to business growth and development ideas
including environment analysis, plan execution and evaluation.
</p>
</li>
<li class="ol__li">
<h3 class="ol__count-item ol__count-item--border-circular ol__count-item--on-hover-green text text--bolder text--dark-gray text--medium text--on-hover-green">Online Marketing Campaigns</h3>
<p class="text text--small">An awesome online marketing plan won't save your bad product
but paired with a good product, the sky is the limit for what can be achieved.
</p>
</li>
</ol>
</li>
<li class="ul__li ul__li--width-large">
<div class="tab-container">
<ul class="tab-container__nav">
<li class="tab-container__nav-item tab-container__nav-item--selected">
<h3 class="tab-container__nav-item-1"><i class="tab-container__nav-item-1 fas fa-th"></i>Business</h3>
</li>
<li class="tab-container__nav-item">
<h3 class="tab-container__nav-item-2"><i class="tab-container__nav-item-2 fas fa-th"></i>Expertise</h3>
</li>
<li class="tab-container__nav-item">
<h3 class="tab-container__nav-item-3"><i class="tab-container__nav-item-3 fas fa-th"></i>Quality</h3>
</li>
</ul>
<div class="tab-container__tab-body tab-container__tab-body--selected">
<h3 class="text text--bolder text--dark-gray text--medium text--distance-smaller">Business Services For Companies</h3>
<p class="text text--small text--distance-small">Aria provides the most innovative and customized business services in the industry.
Our <a class="text--green" href="#">Services</a> section shows how flexible we are for all types of budgets.
</p>
<ul class="ul">
<li class="ul__li ul__li--color-dark-gray ul__li--horizontal-bar text--smaller text--bolder">Business Development 100%</li>
<li class="ul__li ul__li--color-dark-gray ul__li--horizontal-bar ul__li--horizontal-bar-width-76 text--smaller text--bolder">Opportunity Spotting 76%</li>
<li class="ul__li ul__li--color-dark-gray ul__li--horizontal-bar ul__li--horizontal-bar-width-90 text--smaller text--bolder">Online Marketing 90%</li>
</ul>
</div>
<div class="tab-container__tab-body">
<ol class="ol">
<li class="ol__li"><p class="text text--small ol__count-item ol__count-item--text-big ol__count-item--align-counter-on-top ol__count-item--text-green"><span class="text--bolder text--dark-gray">High quality</span> is on top of our list when it comes to the way we deliver the services</p></li>
<li class="ol__li"><p class="text text--small ol__count-item ol__count-item--text-big ol__count-item--align-counter-on-top ol__count-item--text-green"><span class="text--bolder text--dark-gray">Maximum impact</span> is what we look for in our actions</p></li>
<li class="ol__li"><p class="text text--small ol__count-item ol__count-item--text-big ol__count-item--align-counter-on-top ol__count-item--text-green"><span class="text--bolder text--dark-gray">Quality standards</span> are important but meant to be exceeded</p></li>
<li class="ol__li"><p class="text text--small ol__count-item ol__count-item--text-big ol__count-item--align-counter-on-top ol__count-item--text-green"><span class="text--bolder text--dark-gray">We're always looking</span> for industry leaders to help them win their market position</p></li>
<li class="ol__li"><p class="text text--small ol__count-item ol__count-item--text-big ol__count-item--align-counter-on-top ol__count-item--text-green"><span class="text--bolder text--dark-gray">Evaluation</span> is a key aspect of this business and important</p></li>
<li class="ol__li"><p class="text text--small ol__count-item ol__count-item--text-big ol__count-item--align-counter-on-top ol__count-item--text-green"><span class="text--bolder text--dark-gray">Ethic</span> procedures ar alwasy at the base of everything we do</p></li>
</ol>
</div>
<div class="tab-container__tab-body">
<p class="text text--small text--distance-small"><span class="text--bolder text--dark-gray">We strive to achieve</span> 100% customer satisfaction for both types of customers:
hiring companies and job seekers. Types of customers: <a class="text--green" href="#">with huge potential</a>
</p>
<p class="text text--small text--distance-small"><span class="text--bolder text--dark-gray">Our goal is to help</span> your company achieve its full potential
and establish long term stability for the <a class="text--green" href="#">stakeholders</a>
</p>
<ul class="ul ul--decorated-with-squares">
<li class="ul__li text--small">It's easy to get a quotation, just call our office anytime</li>
<li class="ul__li text--small">We'll get back to you with an initial estimate soon</li>
<li class="ul__li text--small">Get ready to see results even after only 30 days</li>
<li class="ul__li text--small">Ask for a quote and start improving your business</li>
<li class="ul__li text--small">Just fill out the form and we'll call you right away</li>
</ul>
</div>
</div>
</li>
<li class="ul__li">
<div class="image-container">
<img class="image-container__image" src="./assets/details-2-background.jpg" alt="Green trees">
</div>
</li>
</ul>
</section>
<section id="testimonials" class="section section--background-color-light-white">
<div class="text-header text-header--align-center text-header--width-560-responsive">
<h2 class="text-header__message text--distance-smaller">Read Our Customer Testimonials</h2>
<p class="text text--small text--weight-normal text--distance-bigger">Our clients are our partners and we can not imagine a better future
for our company without helping them reach their objectives
</p>
</div>
<div class="carousel-wrap">
<button class="carousel__arrow carousel__arrow--prev slick-prev" type="button"></button>
<ul class="carousel">
<li class="carousel__item">
<img class="image--circle" src="./assets/testimonial-1.jpg" alt="Jude Thorn - Founder">
<p class="text text--small text--italic text--distance-smaller" >
The guys from Aria helped with getting my business
off the ground and turning into a profitable company.
</p>
<h3 class="text text--small text--bolder text--dark-gray">Jude Thorn - Founder</h3>
</li>
<li class="carousel__item">
<img class="image--circle" src="./assets/testimonial-2.jpg" alt="Marsha Singer - Marketer">
<p class="text text--small text--italic text--distance-smaller" >
I purchased the Growth Accelerator service pack a few years ago
and I renewed the contract each year.
</p>
<h3 class="text text--small text--bolder text--dark-gray">Marsha Singer - Marketer</h3>
</li>
<li class="carousel__item">
<img class="image--circle" src="./assets/testimonial-3.jpg" alt="Roy Smith - Developer">
<p class="text text--small text--italic text--distance-smaller" >
Aria's CEO personally attends client meetings
and gives his feedback on business growth strategies.
</p>
<h3 class="text text--small text--bolder text--dark-gray">Roy Smith - Developer</h3>
</li>
<li class="carousel__item">
<img class="image--circle" src="./assets/testimonial-4.jpg" alt="Ronald Spice - Owner">
<p class="text text--small text--italic text--distance-smaller" >
At the beginning I thought the prices are a little high for what
they offer but they over deliver each and every time.
</p>
<h3 class="text text--small text--bolder text--dark-gray">Ronald Spice - Owner</h3>
</li>
<li class="carousel__item">
<img class="image--circle" src="./assets/testimonial-5.jpg" alt="Lindsay Rune - Manager">
<p class="text text--small text--italic text--distance-smaller" >
I recommend Aria to every business owner or growth leader that
wants to take his company to the next level.
</p>
<h3 class="text text--small text--bolder text--dark-gray">Lindsay Rune - Manager</h3>
</li>
<li class="carousel__item">
<img class="image--circle" src="./assets/testimonial-6.jpg" alt="Ann Black - Consultant">
<p class="text text--small text--italic text--distance-smaller" >
My goals for using Aria's services seemed high when
I first set them but they've met them with no problems.
</p>
<h3 class="text text--small text--bolder text--dark-gray">Ann Black - Consultant</h3>
</li>
</ul>
<button class="carousel__arrow slick-next" type="button"></button>
</div>
</section>
<section id="call-me" class="section section--background-color-blue">
<div class="section-container">
<div>
<div class="text-header">
<h4 class="text-header__title">CALL ME</h4>
<h2 class="text-header__message text-header__message--color-white">Have Us Contact You By Filling And Submitting The Form</h2>
</div>
<p class="text text--white text--small text--distance-small">
You are just a few steps away from a personalized offer.
Just fill in the form and send it to us and we'll get right back
with a call to help you decide what service package works.
</p>
<ul class="ul ul--decorated-with-squares text--small">
<li class="ul__li ul__li--color-white">It's very easy just fill in the form so we can call</li>
<li class="ul__li ul__li--color-white">During the call we'll require some info about the company</li>
<li class="ul__li ul__li--color-white">Don't hesitate to email us for any questions or inquiries</li>
</ul>
</div>
<form class="form" id="form_1">
<div class="form-item">
<input required type="text" id="name_1" placeholder=" "
class="form-item__inner--toggle-message">
<label class="form-item__placeholder" for="name_1">Name</label>
<p class="form-item__message text text--white text--smaller">Please fill out this field.</p>
</div>
<div class="form-item">
<input required type="tel" placeholder=" " id="phone_1"
class="form-item__inner--toggle-message" pattern="[0-9]{11}">
<label class="form-item__placeholder" for="phone_1">Phone</label>
<p class="form-item__message text text--white text--smaller">Please fill out this field.</p>
</div>
<div class="form-item">
<input required type="email" placeholder=" " id="email_1"
class="form-item__inner--toggle-message" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
<label class="form-item__placeholder" for="email_1">Email</label>
<p class="form-item__message text text--white text--smaller">Please fill out this field.</p>
</div>
<div class="form-item">
<select required class="form-item__inner--toggle-message">
<option disabled selected>Interested in...</option>
<option >Off The Ground</option>
<option >Accelerated Growth</option>
<option >Market Domination</option>
</select>
<p class="form-item__message text text--white text--smaller">Please select an item in the list.</p>
</div>
<div class="form-item">
<input required type="checkbox" id="checkbox_1">
<label class="text text--smaller text--white" for="checkbox_1">
I agree with Aria's stated <a class="text--white" href="#">Privacy Policy</a> and <a class="text--white" href="#">Terms & Conditions</a>
</label>
</div>
<button class="button button--width-full button--on-hover-background-none-yes text text--white text--smaller text--uppercase text--bolder" type="submit">
CALL ME
</button>
<div class="form__submit-message" data-message-of="form_1">
<p class="text text--white text--medium">Request Submitted!</p>
</div>
</form>
</div>
</section>
<section id="team" class="section section--background-color-light-white">
<div class="text-header text-header--align-center text-header--width-586-responsive">
<h2 class="text-header__message text--distance-smaller">Our Team Of Consultants</h2>
<p class="text text--small text--weight-normal text--distance-bigger">
We're only as strong and as knowledgeable as our team.
So here are the men and women which help customers meet goals and grow companies
</p>
</div>
<ul class="flex">
<li class="flex__item">
<div class="image-container">
<img class="image-container__image image-container__image--zoom-yes" src="./assets/team-1.png" alt="John Whitelong">
</div>
<div>
<p class="text text--small">John Whitelong</p>
<h5 class="text text--dark-gray text--bolder text--distance-small">General Manager</h5>
<div class="social social--show social--smaller social--on-hover-hexagon-white">
<div class="hexagon hexagon--smaller">
<i class="fab fa-facebook-f hexagon__icon hexagon__icon--white hexagon__icon--smaller"></i>
</div>
<div class="hexagon hexagon--smaller">
<i class="fab fa-twitter hexagon__icon hexagon__icon--white hexagon__icon--smaller"></i>
</div>
</div>
</div>
</li>
<li class="flex__item">
<div class="image-container">
<img class="image-container__image image-container__image--zoom-yes"
src="./assets/team-2.png" alt="Veronique Smith">
</div>
<div>
<p class="text text--small">Veronique Smith</p>
<h5 class="text text--dark-gray text--bolder text--distance-small">Business Developer</h5>
<div class="social social--show social--smaller social--on-hover-hexagon-white">
<div class="hexagon hexagon--smaller">
<i class="fab fa-facebook-f hexagon__icon hexagon__icon--white hexagon__icon--smaller"></i>
</div>
<div class="hexagon hexagon--smaller">
<i class="fab fa-twitter hexagon__icon hexagon__icon--white hexagon__icon--smaller"></i>
</div>
</div>
</div>
</li>
<li class="flex__item">
<div class="image-container">
<img class="image-container__image image-container__image--zoom-yes"
src="./assets/team-3.png" alt="Chris Zimerman">
</div>
<div>
<p class="text text--small">Chris Zimerman</p>
<h5 class="text text--dark-gray text--bolder text--distance-small">Online Marketer</h5>
<div class="social social--show social--smaller social--on-hover-hexagon-white">
<div class="hexagon hexagon--smaller">
<i class="fab fa-facebook-f hexagon__icon hexagon__icon--white hexagon__icon--smaller"></i>
</div>
<div class="hexagon hexagon--smaller">
<i class="fab fa-twitter hexagon__icon hexagon__icon--white hexagon__icon--smaller"></i>
</div>
</div>
</div>
</li>
<li class="flex__item">
<div class="image-container">
<img class="image-container__image image-container__image--zoom-yes"
src="./assets/team-4.png" alt="Mary Villalonga">
</div>
<div>
<p class="text text--small">Mary Villalonga</p>
<h5 class="text text--dark-gray text--bolder text--distance-small">Community Manager</h5>
<div class="social social--show social--smaller social--on-hover-hexagon-white">
<div class="hexagon hexagon--smaller">
<i class="fab fa-facebook-f hexagon__icon hexagon__icon--white hexagon__icon--smaller"></i>
</div>
<div class="hexagon hexagon--smaller">
<i class="fab fa-twitter hexagon__icon hexagon__icon--white hexagon__icon--smaller"></i>
</div>
</div>
</div>
</li>
</ul>
</section>
<section id="about" class="section">
<div class="section-container">
<div class="image-container image-container--border-small">
<img class="image-container__image" src="./assets/about.jpg" alt="">
</div>
<div>
<div class="text-header">
<h4 class="text-header__title">ABOUT</h4>
<h2 class="text-header__message">
We're Passionate About Delivering Growth Services
</h2>
</div>
<p class="text text--small text--distance-small">
Our goal is to provide the right business growth services at the appropriate time
so companies can benefit from the created momentum and thrive for a long period of time
</p>
<ul class="ul ul--decorated-with-squares">
<li class="ul__li text text--small">Everything we recommend has direct positive impact</li>
<li class="ul__li text text--small">You will become an important partner of our company</li>
</ul>
</div>
</div>
</section>
<section id="contact" class="section section--background-color-light-white">
<div class="section-container">
<div>
<div class="text-header">
<h4 class="text-header__title">CONTACT</h4>
<h2 class="text-header__message">Get In Touch Using The Form</h2>
</div>
<p class="text text--small text--distance-small">You can stop by our office for a cup of coffee and just use the contact
form below for any questions and inquiries</p>
<ul class="ul ul--distance-medium">
<li class="ul__li ul__li--margin-smaller">
<p class="text text--small">
<i class="fas fa-map-marker-alt fa--color-light-green"></i>
22nd Innovative Street, San Francisco, CA 94043, US
</p>
</li>
<ul class="ul">
<li class="ul__li ul__li--inline-block ul__li--margin-smaller">
<i class="fas fa-phone fa-xs fa--color-light-green"></i>
<a class="text text--underline text--small" href="tel:8172022126">+81 720 22 126</a>
</li>
<li class="ul__li ul__li--inline-block ul__li--margin-smaller">
<i class="fas fa-phone fa-xs fa--color-light-green"></i>
<a class="text text--underline text--small" href="tel:8172022128">+81 720 22 128</a>
</li>
<li class="ul__li ul__li--inline-block ul__li--margin-smaller">
<i class="fas fa-envelope fa-xs fa--color-light-green"></i>
<a class="text text--underline text--small" href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</ul>
<h3 class="text--dark-gray text--distance-medium">Follow Aria On Social Media</h3>
<div class="social social--show social--medium social--on-hover-hexagon-white">
<div class="hexagon hexagon--medium">
<i class="fab fa-facebook-f hexagon__icon hexagon__icon--white"></i>
</div>
<div class="hexagon hexagon--medium">
<i class="fab fa-twitter hexagon__icon hexagon__icon--white"></i>
</div>
<div class="hexagon hexagon--medium">
<i class="fab fa-pinterest hexagon__icon hexagon__icon--white"></i>
</div>
<div class="hexagon hexagon--medium">
<i class="fab fa-instagram hexagon__icon hexagon__icon--white"></i>
</div>
<div class="hexagon hexagon--medium">
<i class="fab fa-linkedin-in hexagon__icon hexagon__icon--white"></i>
</div>
<div class="hexagon hexagon--medium">
<i class="fab fa-behance hexagon__icon hexagon__icon--white"></i>
</div>
</div>
</div>
<form class="form" id="form_2">
<div class="form-item form-item--theme-light">
<input required type="text" id="name_2" placeholder=" "
class="form-item__inner--toggle-message">
<label class="form-item__placeholder" for="name_2">Name</label>
<p class="form-item__message text text--white text--smaller">Please fill out this field.</p>
</div>
<div class="form-item form-item--theme-light">
<input required type="email" placeholder=" " id="email_2"
class="form-item__inner--toggle-message" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
<label class="form-item__placeholder" for="email_2">Email</label>
<p class="form-item__message text text--white text--smaller">Please enter an email address.</p>
</div>
<div class="form-item form-item--theme-light">
<textarea required id="textarea_2" class="form-item__inner--toggle-message" placeholder=" " rows="4"></textarea>
<label class="form-item__placeholder form-item__placeholder--align-top" for="textarea_2">Your message</label>
</div>
<div class="form-item">
<input required type="checkbox" id="checkbox_2">
<label class="text text--smaller" for="checkbox_2">
I agree with Aria's stated <a class="text text--underline" href="#">Privacy Policy</a> and <a class="text text--underline" href="#">Terms & Conditions</a>
</label>
</div>
<button class="button button--width-full button--on-hover-background-none-yes text text--white text--smaller text--uppercase text--bolder" type="submit">
SUBMIT MESSAGE
</button>
<div class="form__submit-message" data-message-of="form_2">
<p class="text text--dark-gray text--medium">Message Submitted!</p>
</div>
</form>
</div>
</section>
<footer class="section section--background-color-dark-blue">
<ul class="ul">
<li class="ul__li ul__li--distance-medium">
<h3 class="text text--bolder text--white text--medium text--distance-smaller">Few Words About Aria</h3>
<p class="text text--small text--white">
We're passionate about delivering the best business growth services
for companies just starting out as startups or industry players
that have established their market position a long tima ago.
</p>
</li>
<li class="ul__li ul__li--distance-medium">
<h3 class="text text--bolder text--white text--medium">Links</h3>
<ul>
<li><a class="text text--small text--white text--underline" href="#">startupguide.com</a></li>
<li><a class="text text--small text--white text--underline" href="#">Terms & Conditions</a></li>
<li><a class="text text--small text--white text--underline" href="#">Privacy Policy</a></li>
</ul>
</li>
<li class="ul__li ul__li--distance-medium">
<h3 class="text text--bolder text--white text--medium">Tools</h3>
<ul>
<li><a class="text text--small text--white text--underline" href="#">businessgrowth.com</a></li>
<li><a class="text text--small text--white text--underline" href="#">influencers.com</a></li>
<li><a class="text text--small text--white text--underline" href="#">optimizer.net</a></li>
</ul>
</li>
<li class="ul__li ul__li--distance-medium">
<h3 class="text text--bolder text--white text--medium">Partners</h3>
<ul>
<li><a class="text text--small text--white text--underline" href="#">unicorns.com</a></li>
<li><a class="text text--small text--white text--underline" href="#">staffmanager.com</a></li>
<li><a class="text text--small text--white text--underline" href="#">association.gov</a></li>
</ul>
</li>
</ul>
<div class="authorship">
<p class="text text--small">By <a class="text text--underline" href="https://github.com/estevaog3">Estevão Costa</a> - 2020</p>
</div>
</footer>
<script type="text/javascript" src="./dist/main.js"></script>
</body>
</html>