-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
423 lines (420 loc) · 20.6 KB
/
index.html
File metadata and controls
423 lines (420 loc) · 20.6 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./css/main.css">
<title>Ultimate Services</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<main>
<header>
<div class="nav-wrapper">
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand non" href="#">Ultimate Services</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="#">Blog</a>
<a class="nav-item nav-link" href="#">Contact</a>
<button class="btn cta-button my-auto rounded-pill">Get a Quote</button>
</div>
</div>
</div>
</nav>
</div>
<div class="container d-flex justify-content-center hero-section">
<div class="row">
<div class="col-xs-12 col-lg-5 d-flex flex-column justify-content-center">
<h1>Ultimate <span id="typewriter">Services</span></h1>
<p class="lead">We provide everything your team needs to discover insights and make solid business decisions</p>
<div>
<button class="btn btn-lg btn-primary rounded-pill">Get a Quote</button>
</div>
</div>
<div class="col-lg-1"></div>
<div class="col-xs-12 col-lg-6 d-flex flex-column justify-content-center">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="Customer relationship management software" src="./img/product1.png">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Marketing analytics software" src="./img/product2.png">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Advanced Analytics Software" src="./img/product3.png">
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<section id="testimonials">
<div class="container py-5">
<div class="row d-flex justify-content-center">
<div class="col-xs-12 col-lg-8 text-center">
<h6 class="text-uppercase">Businesses Recommend Ultimate Services</h6>
</div>
</div>
<div class="row d-flex justify-content-around">
<div class="col-6 col-sm-3 col-lg-2 d-flex flex-column justify-content-center">
<img style="width: 100%;" alt="The Slack logo" src="img/slack.png">
</div>
<div class="col-6 col-sm-3 col-lg-2 d-flex flex-column justify-content-center">
<img style="width: 100%;" alt="The Shopify logo" src="img/shopify.png">
</div>
<div class="col-6 col-sm-3 col-lg-2 d-flex flex-column justify-content-center">
<img style="width: 100%;" alt="The Hashicorp logo" src="img/hashicorp.png">
</div>
<div class="col-6 col-sm-3 col-lg-2 d-flex flex-column justify-content-center">
<img style="width: 100%;" alt="The Amazon logo" src="img/amazon.png">
</div>
</div>
<div class="row d-flex justify-content-center pt-2">
<div class="col-xs-12 col-lg-8 text-center">
<a href="#" class="text-decoration-none">View customer stories <i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
</section>
<section id="services">
<div class="container py-5">
<div class="row d-flex justify-content-center pb-4">
<div class="col-xs-12 col-sm-6 col-lg-6 text-center">
<h2>Services for All Your Needs</h2>
<p>We provide a wide variety of services to help your business get an edge over the competition</p>
</div>
</div>
<div class="row service-row">
<div class="col-xs-12 col-sm-6 col-lg-4 text-center">
<div class="svg-container mx-auto">
<img alt="An arrow pointing upwards as sales grow" src="img/graph.svg">
</div>
<h4>Market Research</h4>
<p>Our solution allows you to get straight to the specific data that you need.
Access individual sections, charts, and graphs from our comprehensive
collection of thousands of market research reports.</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 text-center">
<div class="svg-container mx-auto">
<img alt="A brain surrounded by a dashed circle hovering over a couple of hands" src="img/brain_hands.svg">
</div>
<h4>Business Strategy</h4>
<p>Our strategic analysis takes your business to the next level. We'll increase your
conversion rates, optimize your advertisements, and engage with your users in
a way previously unattainable by your company.</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 text-center">
<div class="svg-container mx-auto">
<img alt="A piece of paper with a pie chart on it partially masked by a bar graph" src="img/analytics.svg">
</div>
<h4>Audience Analytics</h4>
<p>Gain valuable insights from your whole audience regardless of the platform. See overall content trends,
audience demand data, and get product performance even before launch.
</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 text-center">
<div class="svg-container mx-auto">
<img alt="A cloud with a ruler, a pencil, a paintbrush, and a pen sticking out of it" src="img/art_toolkit.svg">
</div>
<h4>Logo Branding</h4>
<p>Our design team creates unique logos that separates you from everyone else. Build your brand and
to effectively and efficiently reach your audience, communicate your message, and drive traffic
to awesome new products.</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 text-center">
<div class="svg-container mx-auto">
<img alt="A computer with HTML code on the screen" src="img/development.svg">
</div>
<h4>Development</h4>
<p>Our development team creates awesome new websites that communicate your product to the masses.
Get a website that is search engine optimized, works on multiple platforms, and has cool design
that will significantly increase your sales.
</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 text-center">
<div class="svg-container mx-auto">
<img alt="A phone with Facebook on it surrounded by the logos of Instagram and Twitter" src="img/social-media.svg">
</div>
<h4>Online Marketing</h4>
<p>Our company offers a wide variety of marketing strategies such as content marketing,
social media marketing, email marketing and advertising. We'll grow your online presence
and establish you as a market authority.
</p>
</div>
</div>
</div>
</section>
<section id="numbers" class="text-white py-4">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-xs-12 col-lg-11">
<div class="row">
<div class="col-xs-12 col-sm-3 text-center">
<h2>5,000+</h2>
<p>Happy Clients</p>
</div>
<div class="col-xs-12 col-sm-3 text-center">
<h2>200+</h2>
<p>Running Projects</p>
</div>
<div class="col-xs-12 col-sm-3 text-center">
<h2>500</h2>
<p>Employees</p>
</div>
<div class="col-xs-12 col-sm-3 text-center">
<h2>1</h2>
<p>Company</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="pricing">
<div class="container">
<div class="row d-flex justify-content-center pb-5">
<div class="col-xs-12 col-lg-8 text-center">
<h2>Our Pricing Plans</h2>
<p>Our packages fulfill your needs</p>
</div>
</div>
<div class="row plans">
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="heading">Basic</h4>
<span class="money">$100</span>
<p class="text-muted">Base Package</p>
<button class="btn btn-lg btn-secondary rounded-pill mb-3">Get Started</button>
<p class="font-weight-boldish">Professional and Affordable</p>
<p>Basic SEO</p>
<p>Local maps and reviews optimization</p>
<p>Facebook Advertising</p>
<p>Monthly content advertising</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="heading">Startup</h4>
<span class="money">$200</span>
<p class="text-muted">Previous Features Included</p>
<button class="btn btn-lg btn-outline-secondary rounded-pill mb-3">Get Started</button>
<p class="font-weight-boldish">Off the Ground</p>
<p>Advanced SEO</p>
<p>Google Ad Campaign Management</p>
<p>Twitter Advertising</p>
<p>Live Analytics</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="heading">Corporate</h4>
<span class="money">$400</span>
<p class="text-muted">Previous Features Included</p>
<button class="btn btn-lg btn-outline-secondary rounded-pill mb-3">Get Started</button>
<p class="font-weight-boldish">Going Public</p>
<p>National SEO</p>
<p>Extended Content Coverage</p>
<p>Instagram Advertising</p>
<p>Quarterly Analytics Report Card</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<h4 class="heading">Enterprise</h4>
<span class="money">$600</span>
<p class="text-muted">Previous Features Included</p>
<button class="btn btn-lg btn-outline-secondary rounded-pill mb-3">Get Started</button>
<p class="font-weight-boldish">Taking Over the World</p>
<p>International SEO</p>
<p>Advanced Business Intelligence</p>
<p>Advanced Social Media</p>
<p>Advanced Content Marketing</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="quote">
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-6 reasons py-5">
<h2 class="pb-4">Reasons for Choosing Us</h2>
<p>At Ultimate Services, it's all about the customer. Producing quality
services is what we're about. You depend on data that is accurate. Your reputation depends on it.
We do what is right and we give clients unmatched value and confidence in our analytical expertise,
quality, service and integrity.
</p>
<ul>
<li>Quality that You Can Trust</li>
<li>Focused on YOUR Needs</li>
<li>Competitive Pricing</li>
</ul>
</div>
<div class="col-xs-12 col-lg-6 py-5 quote">
<h2 class="pb-4">Get a Free Quote</h2>
<form>
<div class="form-row py-1">
<div class="col-xs-12 col-sm-6">
<input type="text" name="name" class="form-control" id="meme" placeholder="Full Name" required>
</div>
<div class="col-xs-12 col-sm-6">
<input type="email" name="email" class="form-control" id="soda" placeholder="Email" required>
</div>
</div>
<div class="form-row py-1">
<div class="col-xs-12 col-sm-6">
<input type="tel" name="phone" class="form-control" id="yeah" placeholder="Phone Number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
</div>
<div class="col-xs-12 col-sm-6">
<input type="url" name="website" class="form-control" id="boi" placeholder="Website" required>
</div>
</div>
<div class="form-row">
<div class="col-12">
<textarea name="textarea" id="" cols="30" rows="10" class="form-control" placeholder="Message"></textarea>
</div>
</div>
<button class="btn btn-lg btn-secondary rounded-pill sub-button" type="submit">Get a Quote</button>
</form>
</div>
</div>
</div>
</section>
<section id="blog">
<div class="container py-5">
<div class="row d-flex justify-content-center">
<div class="col-xs-12 col-lg-8 text-center">
<h2 class="pb-5">Our Blog</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-4">
<div class="card">
<a href="#">
<img class="card-img-top cover" alt="A couple of people drawing business imagery on a poster board" src="./img/business.jpeg">
</a>
<div class="card-body">
<p class="card-text blog-text pt-3"><a href="#">August 12, 2019</a> <a href="#">John Doe</a> <a href="#"><i class="fas fa-comment-alt"></i> 3</a></p>
<h5 class="card-title"><a href="#">How Small Businesses Can Use Social Media to Boost Their Sales</a></h5>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-4">
<div class="card">
<a href="#">
<img class="card-img-top cover" alt="A phone and a pencil laying on top of a notebook" src="./img/work.jpeg">
</a>
<div class="card-body">
<p class="card-text blog-text pt-3"><a href="#">August 12, 2019</a> <a href="#">John Doe</a> <a href="#"><i class="fas fa-comment-alt"></i> 3</a></p>
<h5 class="card-title"><a href="#">Why AI is the Future of Data Analytics</a></h5>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-4">
<div class="card">
<a href="#">
<img class="card-img-top cover" alt="A person filling in a sign up form on a website" src="./img/laptop.jpeg">
</a>
<div class="card-body">
<p class="card-text blog-text pt-3"><a href="#">August 12, 2019</a> <a href="#">John Doe</a> <a href="#"><i class="fas fa-comment-alt"></i> 3</a></p>
<h5 class="card-title"><a href="#">5 Reasons to Stop Using PHP 5 in 2019</a></h5>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="py-5">
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-3">
<h5>Ultimate Services</h5>
<p>We provide everything your team needs to discover insights and make solid business decisions.
Contact us and get a free quote.
</p>
<ul class="social-bar">
<li><a href="#" class="twitter mr-2"></a></li>
<li><a href="#" class="facebook mr-2"></a></li>
<li><a href="#" class="instagram"></a></li>
</ul>
</div>
<div class="col-xs-12 col-lg-6">
<div class="row">
<div class="col-xs-12 col-lg-4">
<h5>Quick Links</h5>
<ul class="links">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-xs-12 col-lg-8 newsletter">
<h5>Subscribe to Our Newsletter</h5>
<form>
<div class="form-group d-flex">
<span><input class="form-control form" type="email" placeholder="Enter email address" required></span>
<button class="btn btn-primary button" type="submit">Subscribe</button>
</div>
</form>
<p>Sign up for cool stuff like deals, discounts, and exclusive
insights to take your business to the next level.
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-3 contact">
<h5>Contact Info</h5>
<div class="row">
<div class="col-1 col-lg-2"><i class="fas fa-map-marker-alt"></i></div>
<div class="col-10">1600 Amphitheatre Parkway, Mountain View, California 94043</div>
</div>
<div class="row">
<div class="col-1 col-lg-2"><i class="fas fa-phone"></i></div>
<div class="col-10"><a href="tel:+12345678910">+1 234 567 8910</a></div>
</div>
<div class="row">
<div class="col-1 col-lg-2"><i class="fas fa-envelope"></i></div>
<div class="col-10"><a href="mailto:info@domain.com" target="_top">info@ultimateservices.com</a></div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center pt-5">
<div class="col-12 text-center">
© 2019 Ultimate Services. All rights reserved.
</div>
</div>
</div>
</footer>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Index -->
<script src="./js/index.js" type="text/javascript"></script>
</body>
</html>