-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
383 lines (358 loc) · 16.3 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.0, maximum-scale=5.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Coaching">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<title>Sama</title>
</head>
<body>
<!--HEADER-->
<header class="section-outer section-header">
<div class="section-inner section-inner--wide">
<div class="main-navigation">
<div class="logo">
<a href="#"><img src="img/logo.svg" alt=""></a>
<button class="btn-burger">
<span class="btn-burger__line"></span>
<span class="btn-burger__line"></span>
<span class="btn-burger__line"></span>
</button>
</div>
<div class="main-navigation__inner-wrap">
<nav class="nav">
<ul class="nav-wrapper">
<li class="nav-wrapper__item">
<a href="#" class="nav-wrapper__item-link">Home</a>
</li>
<li class="nav-wrapper__item">
<a href="#" class="nav-wrapper__item-link">How it Works</a>
</li>
<li class="nav-wrapper__item">
<a href="#" class="nav-wrapper__item-link">
Why Sama?
<div class="arrow-down"></div>
</a>
<ul class="dropdown">
<li class="dropdown__item">
<a href="#">Our solution</a>
</li>
<li class="dropdown__item">
<a href="#">Platform</a>
</li>
<li class="dropdown__item">
<a href="#">Coaching</a>
</li>
</ul>
</li>
<li class="nav-wrapper__item">
<a href="#" class="nav-wrapper__item-link">About Us</a>
</li>
<li class="nav-wrapper__item">
<a href="#" class="nav-wrapper__item-link">Coach</a>
</li>
</ul>
</nav>
<div class="btn-wrapper">
<button class="btn">Book a Demo</button>
</div>
</div>
</div>
</div>
</header>
<!--/HEADER-->
<main>
<!--HERO IMAGE-->
<div class="section-outer section-hero-image">
<div class="section-inner">
<div class="section-hero-image__content">
<h1 class="section-hero-image__title">
Supercharge your team's development
</h1>
<div class="section-hero-image__subtitle" >
We’re elevating engagement to make the world a better place by bringing the power of executive coaching to everyone.
</div>
<form class="form">
<input class="input input-more" placeholder="Your work email"/>
<button class="btn btn_rounded" >Learn more</button>
</form>
<ul class="section-hero-image__list">
<li class="section-hero-image__list-link">1:1 coaching</li>
<li class="section-hero-image__list-link">Empowering</li>
<li class="section-hero-image__list-link">Inclusive</li>
</ul>
</div>
</div>
<div class="img-right">
<img src="img/list-bg-slice.png" alt="">
</div>
</div>
<!-- /HERO IMAGE-->
<!--GET-STARTED-->
<div class="section-outer section-get-started">
<div class="section-inner">
<div class="elements">
<div class="elements__item">
<h3 class="elements__item-title">2<span>x</span></h3>
</div>
<div class="elements__item">
<h3 class="elements__item-title"><span>+ </span>65<span> %</span></h3>
<div class="elements__item-subtitle">Engagement</div>
</div>
<div class="elements__item">
<h3 class="elements__item-title"><span>+ </span>53<span> %</span></h3>
<div class="elements__item-subtitle">Productivity</div>
</div>
<div class="elements__item">
<h3 class="elements__item-title"><span>+ </span>80<span> %</span></h3>
<div class="elements__item-subtitle">Resilience</div>
</div>
</div>
<div class="promo">
<h2 class="promo__title ta-c">Getting started is as easy as 1, 2, 3...</h2>
<ul class="promo__list">
<li class="promo__list-link">
<div class="num"><span>1</span></div>
<div class="text">Your company signs up to Sama.</div>
</li>
<li class="promo__list-link">
<div class="num"><span>2</span></div>
<div class="text">Employees match with their professional coach.</div>
</li>
<li class="promo__list-link">
<div class="num"><span>3</span></div>
<div class="text">Employees begin working with their coach via chat, voice or video call.</div>
</li>
</ul>
</div>
</div>
</div>
<!--GET-STARTED-->
<!-- CHAMPION -->
<div class="section-outer section-champion">
<div class="section-inner">
<div class="container__left">
<img src="img/champion-bg.png" class="image" alt="">
</div>
<div class="container__right">
<h3 class="title">Champion their career</h3>
<div class="subtitle">Sama connects your employees to the best professional coach for them. Built to seamlessly fit into your organisation, and powered by sophisticated technology and our team of highly experienced coaches.</div>
<a class="btn btn-no-bg">Book a demo</a>
</div>
</div>
</div>
<!-- /CHAMPION -->
<!--ARTICLES-->
<div class="section-outer section-articles">
<div class="section-inner">
<h2 class="ta-c">Featured insights</h2>
<div class="card-wrapper">
<div class="card-wrapper--item">
<div class="card-item--image">
<a href=""><img src="img/article-image-1.png" alt=""></a>
</div>
<div class="card-item--content">
<div class="card-item--content-topic">Coaching</div>
<div class="card-item--content-title">How coaching helps your team be engaged during the Covid era</div>
<div class="card-item--content-date">Published on January 27th, 2021</div>
</div>
</div>
<div class="card-wrapper--item">
<div class="card-item--image">
<a href=""><img src="img/article-image-2.png" alt=""></a>
</div>
<div class="card-item--content">
<div class="card-item--content-topic">Productivity</div>
<div class="card-item--content-title">Why coaching should be available to every employee</div>
<div class="card-item--content-date">Published on January 12th, 2021</div>
</div>
</div>
<div class="card-wrapper--item">
<div class="card-item--image">
<a href=""><img src="img/article-image-3.png" alt=""></a>
</div>
<div class="card-item--content">
<div class="card-item--content-topic">Coaching</div>
<div class="card-item--content-title">How coaching promotes inclusive teams</div>
<div class="card-item--content-date">Published on November 19th, 2020</div>
</div>
</div>
</div>
<div class="ta-c">
<a class="btn">Read all articles</a>
</div>
</div>
</div>
<!-- /ARTICLES-->
<!-- ELEVATE-ENGAGEMENT-->
<div class="section-outer section-champion section-engagement">
<div class="section-inner">
<div class="container__right">
<h3 class="title">Elevate engagement</h3>
<div class="subtitle">
Our powerful digital platform and proprietary algorithm matches people to the right coach - based on their professional development needs and personal profile.
</div>
<a class="btn btn-no-bg">Elevate engagement</a>
</div>
<div class="container__left">
<img src="img/engagement-photo.png" class="image" alt="">
</div>
</div>
</div>
<!--/ELEVATE-ENGAGEMENT-->
<!--REVIEWS-->
<div class="section-outer section-reviews">
<div class="section-inner">
<h2 class="ta-c reviews-heading">Don't just take our word for it</h2>
<ul class="reviews">
<li class="reviews__content reviews__content--big">
<div class="reviews__content-stars">
<img src="/img/stars.png" alt="">
</div>
<div class="reviews__content-text">
Each of our team member is getting precious help in their professional development and can build a program that suit their needs and ambitions.
</div>
<div class="reviews__content-author">
<div class="avatar">
<img src="/img/avatar-1.png" alt="">
</div>
<div class="reviews__content-author__info">
<div class="name">Nicolas</div>
<div class="about">COO at CFTE</div>
</div>
</div>
</li>
<li class="reviews__content reviews__content--medium">
<div class="reviews__content-stars">
<img src="/img/stars-inclined.png" alt="">
</div>
<div class="reviews__content-text">The design of the Sama app allowed for the digital session to take place seamlessly!</div>
<div class="reviews__content-author">
<div class="reviews__content-author__info">
<div class="name">Vera</div>
<div class="about">Partnership Associate at CFTE</div>
</div>
</div>
</li>
<li class="reviews__content reviews__content--last">
<div class="reviews__content-stars">
<img src="/img/stars.png" alt="">
</div>
<div class="reviews__content-text">Sama matched me with a Coach who helped me see that I have exactly what I need to succeed in business (and life)!</div>
<div class="reviews__content-author">
<div class="avatar">
<img src="/img/avatar-2.png" alt="">
</div>
<div class="reviews__content-author__info">
<div class="name">Elise Kayfetz</div>
<div class="about">Toronto, Canada</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--/REVIEWS-->
<!--NEWSLETTER-->
<div class="section-outer section-newsletter">
<div class="section-inner">
<div class="section-newsletter__plane section-newsletter__plane-left"></div>
<div class="section-newsletter__plane section-newsletter__plane-right"></div>
<div class="section-newsletter__subtitle">Stay in touch</div>
<h2 class="section-newsletter__title">Sign up to our newsletter</h2>
<form action="#" class="form section-newsletter__form">
<input class="input input-more" placeholder="Your email"/>
<button class="btn btn_rounded" >Subscribe</button>
</form>
</div>
</div>
<!--/NEWSLETTER-->
</main>
<!--FOOTER-->
<footer class="section-outer section-footer">
<div class="section-inner">
<div class="footer">
<div class="footer__logo">
<a href="#"><img src="img/logo.svg" alt=""></a>
</div>
<nav class="footer__nav">
<ul class="footer__nav-sitemap">
<p class="category">SITEMAP</p>
<li class="link"><a href="">Home</a></li>
<li class="link"><a href="">Our answer</a></li>
<li class="link"><a href="">Coaching</a></li>
<li class="link"><a href="">Platform</a></li>
<li class="link"><a href="">About Sama</a></li>
<li class="link"><a href="">Coach</a></li>
<li class="link"><a href="">Contact us</a></li>
<li class="link">
<a href="">
Book a demo
<img src="img/icon-link.svg" class="link__img" alt="">
</a>
</li>
</ul>
<ul class="footer__nav-social">
<p class="category">SOCIAL</p>
<li class="link">
<a href="#">
LinkedIn
<img src="img/icon-link.svg" class="link__img" alt="">
</a>
</li>
<li class="link">
<a href="#">
Instagram
<img src="img/icon-link.svg" class="link__img" alt="">
</a>
</li>
<li class="link">
<a href="#">
Facebook
<img src="img/icon-link.svg" class="link__img" alt="">
</a>
</li>
<li class="link">
<a href="#">
Twitter
<img src="img/icon-link.svg" class="link__img" alt="" />
</a>
</li>
</ul>
<ul class="footer__nav-get-app">
<p class="category">GET THE APP</p>
<li class="link">
<a href="#">
AppStore
<img src="img/icon-link.svg" class="link__img" alt="">
</a>
</li>
<li class="link">
<a href="#">
Google Play
<img src="img/icon-link.svg" class="link__img" alt="">
</a>
</li>
</ul>
</nav>
</div>
<div class="additional">
<div class="copyright">
Copyright © 2021 Sama Europe Ltd. GDPR compliant. <br>
71-75 Shelton St, Covent Garden, London WC2H 9JQ.
</div>
<div class="terms">
<a href="#" class="terms__link">Terms and Conditions</a>
<a href="#" class="terms__link">Privacy Policy</a>
</div>
</div>
</div>
</footer>
<!--/FOOTER-->
<script src="js/script.js"></script>
</body>
</html>