-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
388 lines (368 loc) · 14.1 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
<!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" />
<title>UserCentral - a Solutions Startup</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script>
function sendEmail() {
Email.send({
Host: "smtp.elasticemail.com",
Username: "usercentralglobal@gmail.com",
Password: "282B6D930989BEE74F36A5B2B7E3C6596E47",
To: "usercentralglobal@gmail.com",
From: "maarifsmart@gmail.com",
Subject: document.getElementById("name").value,
Body: document.getElementById("message").value,
}).then(function (message) {
alert("Request Successfully Sent!");
});
}
</script>
<link
href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Righteous&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header>
<div class="logo">
<img src="./IBS - GenZ (TAG).png" alt="" />
</div>
<nav>
<ul>
<li class="nav-link"><a href="#services">Services</a></li>
<li class="nav-link"><a href="#work">Work</a></li>
<li class="nav-link"><a href="#about">About</a></li>
<li class="nav-link"><a href="#learn">Learn</a></li>
</ul>
</nav>
<a href="#contact"><button>Meet with a Design</button></a>
</header>
<section id="hero">
<div class="grid-1-2">
<h1>
Get solutions that make you <span class="txt-high">Thrilled.</span>
</h1>
<p>
Experience our real-time processes and get professional services
delivered in as fast as 48hrs.
</p>
<button class="bigBtn">Meet with a Designer</button>
</div>
<img src="./fone.png" alt="" />
</section>
<section id="services">
<div>
<div class="service-header">
<p class="header_subtitle">Reliable, transparent & efficient</p>
<h1 class="header_title">We Sky-Rocket Your Brand</h1>
<p class="header_description">
Committed to delivering exceptional website solutions that not only
meet but exceed your expectations
</p>
</div>
<main class="card_grid">
<section class="card cyan">
<h2 class="card_title">Website Design and Development</h2>
<p class="card_content">
Monitors activity to identify project roadblocks
</p>
<img
class="card_img"
src="https://raw.githubusercontent.com/davidsonaguiar/frontendmentor/main/Four%20card%20feature%20section/images/icon-supervisor.svg"
alt="Supervisor"
/>
</section>
<section class="card red">
<h2 class="card_title">Digital Marketing</h2>
<p class="card_content">
Scans our talent network to create the optimal team for your
project
</p>
<img
class="card_img"
src="https://raw.githubusercontent.com/davidsonaguiar/frontendmentor/main/Four%20card%20feature%20section/images/icon-team-builder.svg"
alt="page-home"
/>
</section>
<section class="card blue">
<h2 class="card_title">Content Creation</h2>
<p class="card-content">
Regularly evaluates our talent to ensure quality
</p>
<img
class="card_img"
src="https://raw.githubusercontent.com/davidsonaguiar/frontendmentor/main/Four%20card%20feature%20section/images/icon-karma.svg"
alt="Karma"
/>
</section>
<section class="card orange">
<h2 class="card_title">Website Maintenance and Support</h2>
<p class="card_content">
Uses data from past projects to provide better delivery estimates
</p>
<img
class="card_img"
src="https://raw.githubusercontent.com/davidsonaguiar/frontendmentor/main/Four%20card%20feature%20section/images/icon-calculator.svg"
alt="Calculator"
/>
</section>
</main>
</div>
</section>
<section id="testimonials">
<section id="testim" class="testim">
<!-- <div class="testim-cover"> -->
<div class="wrap">
<span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
<span id="left-arrow" class="arrow left fa fa-chevron-left"></span>
<ul id="testim-dots" class="dots">
<li class="dot active"></li>
<!--
-->
<li class="dot"></li>
<!--
-->
<li class="dot"></li>
<!--
-->
<li class="dot"></li>
<!--
-->
<li class="dot"></li>
</ul>
<div id="testim-content" class="cont">
<div class="active">
<div class="test-img">
<img
src="https://sinsi.princeton.edu/sites/g/files/toruqf2066/files/styles/3x4_750w_1000h/public/people/chen_emily_edit.jpg?itok=iWd2_Wx3"
alt="Emily Chen's Avatar"
/>
</div>
<h2>Emily Chen, Marketing Director at Bright Ideas Inc</h2>
<p>
UserCentral helped us revamp our website and improve our online
presence. Their team was professional, responsive, and easy to
work with. The new website has received great feedback from our
customers, and we've seen an increase in traffic and engagement.
I highly recommend UserCentral for any web design project.
</p>
</div>
<div>
<div class="test-img">
<img
src="https://media.licdn.com/dms/image/C4D03AQGiRxzwwz7leg/profile-displayphoto-shrink_800_800/0/1590725673147?e=2147483647&v=beta&t=HlrOBseG2sf0ZiaQHRn_TpJlAX1e_6ORlXEa2y7wucY"
alt=""
/>
</div>
<h2>Michael Patel, Founder of Tech Solutions LLC:</h2>
<p>
Working with UserCentral was a fantastic experience. They took
the time to understand our brand and goals, and delivered a
website that exceeded our expectations. Their attention to
detail and commitment to customer satisfaction are commendable.
I look forward to working with UserCentral on future projects.
</p>
</div>
<div>
<div class="test-img">
<img
src="https://static.standard.co.uk/s3fs-public/thumbnails/image/2020/07/01/08/anna-davis.jpg?crop=1:1,smart&width=280&auto=webp&quality=75"
alt=""
/>
</div>
<h2>Anna Davis, E-commerce Manager at Global Trends Co:</h2>
<p>
UserCentral helped us launch our e-commerce website, and we
couldn't be happier with the results. Their team guided us
through the process, providing valuable insights and expertise.
The new website has significantly improved our online sales and
customer engagement. I would highly recommend UserCentral for
any e-commerce project
</p>
</div>
<div>
<div class="test-img">
<img
src="https://s3.amazonaws.com/media.mixrank.com/profilepic/376cffb134f14a2c16b09944efdc4c58"
alt=""
/>
</div>
<h2>James Nguyen, Small Business Owner:</h2>
<p>
UserCentral redesigned our website and helped us establish a
strong online presence. Their team was professional, creative,
and easy to work with. The new website has generated positive
feedback from our customers and has helped us attract new
business. I would definitely recommend UserCentral to anyone
looking for web design services.
</p>
</div>
<div>
<div class="test-img">
<img
src="https://media.licdn.com/dms/image/C5603AQG2aRLaewM6wQ/profile-displayphoto-shrink_800_800/0/1587557564598?e=2147483647&v=beta&t=_HxZ1y3DUjO4kv5A_anKoUNDSlY4f-mwxe3LNBxRgTQ"
alt=""
/>
</div>
<h2>Samantha Wilson, Marketing Manager at Fresh Start Foods:</h2>
<p>
UserCentral's digital marketing services have been instrumental
in helping us reach our target audience and increase brand
awareness. Their team is knowledgeable, proactive, and dedicated
to delivering results. We've seen a significant improvement in
our online visibility and engagement since working with
UserCentral. I highly recommend their services.
</p>
</div>
</div>
</div>
<!-- </div> -->
</section>
<script src="https://use.fontawesome.com/1744f3f671.js"></script>
</section>
<section id="projects">
<h2>Our Clients are <span class="txt-high">Thrilled</span> with our Instant design processes </h2>
<!-- Company information -->
<div class="portfolio-container">
<article class="prop-card">
<figure><img src="./web1.png" alt=""></figure>
<h2 class="prop-card-title">E-Commerce Platform - Global Trends Co.</h2>
<p>Course • Mindful Mike</p>
</article>
<article class="prop-card">
<figure><img src="./web1.png" alt=""></figure>
<h2 class="prop-card-title">Website & Branding - Tech Solutions LLC</h2>
<p>Course • Mindful Mike</p>
</article>
<article class="prop-card row-2">
<figure><img src="https://assets.codepen.io/605876/person.png" alt=""></figure>
<h2 class="prop-card-title">Mike's mindful morning</h2>
<p>Course • Mindful Mike</p>
</article>
</div>
</section>
<section id="contact">
<section class="get-in-touch">
<h1 class="title">Get in touch</h1>
<form class="contact-form row">
<div class="form-field col x-50">
<input id="name" class="input-text js-input" type="text" required />
<label class="label" for="name">Name</label>
</div>
<div class="form-field col x-50">
<input
id="email"
class="input-text js-input"
type="email"
required
/>
<label class="label" for="email">E-mail</label>
</div>
<div class="form-field col x-100">
<input
id="message"
class="input-text js-input"
type="text"
required
/>
<label class="label" for="message">Message</label>
</div>
<div class="form-field col x-100 align-center">
<button>
<input
class="submit-btn"
type="submit"
value="Submit"
onclick="sendEmail()"
/>
</button>
</div>
</form>
</section>
</section>
<footer>
<!-- FOOTER -->
<section id="footer">
<div class="contain">
<a href="#hero"
><img src="./IBS - GenZ (TAG)" alt="UserCentral Logo"
/></a>
<div class="col fst">
<ul>
<h4>Team</h4>
<a href="/src/About-UserCentral">
<li>About Us</li>
</a>
<a href="">
<li>Testimonials ↗</li>
</a>
<a href="/src/">
<li>Contact</li>
</a>
<a href="/src/GetQuote">
<li>Reach Private</li>
</a>
</ul>
</div>
<div class="col">
<ul>
<h4>Services</h4>
<a href="/src/Services/">
<li>Web Development</li>
</a>
<a href="/src/Services/">
<li>Digital Marketing</li>
</a>
<a href="/src/Services/">
<li>Graphic Designing</li>
</a>
<a href="/src/Services/">
<li>SEOptimization</li>
</a>
</ul>
</div>
<div class="col">
<ul>
<h4>Resources</h4>
<a href="/src/Portfolio">
<li>Portfolio</li>
</a>
<a href="/src/GetQuote">
<li>Legal Advisories</li>
</a>
<a href="/assets/UserCentral-UserCentralGlobal T&C - Signed.pdf">
<li>User Agreement</li>
</a>
<a href="mailto:hello@usercentralglobal.com">
<li>Address on-demand</li>
</a>
</ul>
</div>
</div>
<div class="line"></div>
<div class="credit">
<i class="RIGHTS"
>©2022/23 <span><a href="#hero">UserCentral</a></span
>. All Rights Reserved - Developed & Powered by thy;</i
>
<p>With ❤ by Maarif Al-Kadhim</p>
</div>
</section>
</footer>
<script src="script.js"></script>
</body>
</html>