-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
269 lines (252 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
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home - Donut</title>
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon.png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<div class="wrapper">
<!-- Header -->
<header class="top-header">
<div class="flex-row">
<nav class="top-nav">
<a class="logo-link" href="#">
<svg class="donutlogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180.01 55">
<title>Asset 1</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path class="letter" d="M87.66,42.37H82.81a.87.87,0,0,1-.87-.87V39.87h-.08c-.58,1-2.25,3.25-6.93,3.25-7,0-11.6-5.42-11.6-12.39,0-7.84,5.59-12.31,11.47-12.31a8.88,8.88,0,0,1,6.8,2.75V12.37a.87.87,0,0,1,.87-.87h5.19a.87.87,0,0,1,.87.87V41.5A.87.87,0,0,1,87.66,42.37Zm-11.6-5.72a5.77,5.77,0,0,0,5.92-6,5.86,5.86,0,0,0-11.72,0A5.68,5.68,0,0,0,76.06,36.66Z" style="fill:#fff"></path>
<path class="letter" d="M103.29,18.47a12.09,12.09,0,0,1,12.47,12.31,12.48,12.48,0,0,1-24.95,0A12.09,12.09,0,0,1,103.29,18.47Zm0,18.15a5.64,5.64,0,0,0,5.55-5.84,5.56,5.56,0,1,0-11.1,0A5.64,5.64,0,0,0,103.29,36.62Z" style="fill:#fff"></path>
<path class="letter" d="M118.92,19.22h4.73a.87.87,0,0,1,.87.87v1.59h.08c.71-1.13,2.17-3.25,6.3-3.25a10,10,0,0,1,5.92,2c1.25,1.08,2.67,2.92,2.67,7.47V41.5a.87.87,0,0,1-.87.87h-5.19a.87.87,0,0,1-.87-.87V29.73c0-1.63,0-4.8-3.63-4.8-4,0-4,3.42-4,4.84V41.5a.87.87,0,0,1-.87.87h-5.19a.87.87,0,0,1-.87-.87V20.09A.87.87,0,0,1,118.92,19.22Z" style="fill:#fff"></path>
<path class="letter" d="M162.82,42.37H158a.87.87,0,0,1-.87-.87V39.91h-.08c-1.42,3-4.26,3.21-6,3.21-1.42,0-4.76-.33-6.8-2.92-1.84-2.29-2.09-4-2.09-7.13v-13a.87.87,0,0,1,.87-.87h5.19a.87.87,0,0,1,.87.87V32c0,1.59,0,4.63,3.71,4.63,2,0,4-1,4-4.71V20.09a.87.87,0,0,1,.87-.87h5.19a.87.87,0,0,1,.87.87V41.5A.87.87,0,0,1,162.82,42.37Z" style="fill:#fff"></path>
<path class="letter" d="M177.27,36.66c-3.69,0-3.71-3-3.71-4.61V26.51h5.58a.87.87,0,0,0,.87-.87V20.09a.87.87,0,0,0-.87-.87h-5.58V12.37a.87.87,0,0,0-.87-.87h-5.19a.87.87,0,0,0-.87.87v6.85h0V33.07c0,3.17.25,4.84,2.09,7.13,2,2.59,5.38,2.92,6.8,2.92a8.46,8.46,0,0,0,3.21-.53.86.86,0,0,0,.52-.8V37.42a.87.87,0,0,0-1-.85A4.92,4.92,0,0,1,177.27,36.66Z" style="fill:#fff"></path>
<circle cx="27.5" cy="27.5" r="27.5" style="fill:#380089"></circle>
<circle cx="27.5" cy="27.68" r="22.01" style="fill:#ff90ff"></circle>
<path d="M41.68,30.24a2.78,2.78,0,0,1-2.78-2.78V19.59a2.78,2.78,0,1,1,5.57,0v7.87A2.78,2.78,0,0,1,41.68,30.24Z" style="fill:#380089"></path>
<path d="M13.32,30.24a2.78,2.78,0,0,1-2.78-2.78V19.59a2.78,2.78,0,1,1,5.57,0v7.87A2.78,2.78,0,0,1,13.32,30.24Z" style="fill:#380089"></path>
<path d="M36.88,27.35a9.38,9.38,0,0,1-18.76,0V24.07H36.88Z" style="fill:#380089"></path>
<path d="M33.28,27.55a5.78,5.78,0,0,1-11.55,0C21.81,27.53,33.32,27.53,33.28,27.55Z" style="fill:#fff"></path>
</g>
</g>
</svg>
</a>
<a class="mobile-sign-in" href="#">Sign In</a>
<input type="checkbox" id="menu-btn">
<label for="menu-btn">
<span class="mobile-menu-toggle">=</span>
</label>
<div class="nav-menu">
<ul class="centralize">
<li>
<a href="#">Pairing</a>
</li>
<li>
<a href="#">Onboarding</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a class="sign-in" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- Main content -->
<main>
<!-- Description -->
<section class="description-section">
<div class="description-part1">
<div class="description-section-leftside">
<h2 class="howbig">Build amazing company culture with Donut.</h2>
<a href="#">
<img class="slack-button" src="img/add_to_slack.png" alt="Add to Slack">
</a>
</div>
</div>
<img class="blond-girl" src="img/banner-home-1.svg" alt="Blond girl">
</section>
<!-- Logo -->
<section class="logo">
<div class="logo-container">
<div class="logo-list">
<div class="logo-item">
<img class="logo-image" src="img/[email protected]" alt="Invision Logo">
</div>
<div class="logo-item">
<img class="logo-image" src="img/[email protected]" alt="IBM Logo">
</div>
<div class="logo-item">
<img class="logo-image" src="img/[email protected]" alt="BlueApron Logo">
</div>
<div class="logo-item">
<img class="logo-image" src="img/[email protected]" alt="CultureAmp Logo">
</div>
<div class="logo-item">
<img class="logo-image" src="img/[email protected]" alt="Q Logo">
</div>
<div class="logo-item">
<img class="logo-image" src="img/[email protected]" alt="Meetup Logo">
</div>
<div class="logo-item">
<img class="logo-image" src="img/[email protected]" alt="A Thinking Ape Logo">
</div>
<div class="logo-item">
<img class="logo-image" src="img/[email protected]" alt="Nulogy Logo">
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="features">
<div class="feature-descriptions">
<div class="pairing-block">
<img class="pairing-image" src="img/block-pairing-1.svg" alt="Pairing">
<div class="pairing-text">
<h3>Pairing</h3>
<p class="feature-paragraph">Spread trust and collaboration across your organization by pairing up team members who don't know each other well.</p>
<a class="pairing-link" href="#">Learn more</a>
</div>
</div>
<div class="onboarding-block">
<img class="onboarding-image" src="img/block-onboarding.svg" alt="Onboarding">
<div class="onboarding-text">
<h3>Onboarding</h3>
<p class="feature-paragraph">Connect new hires with the right people and information from day one with people-first new-hire onboarding.</p>
<a class="pairing-link" href="#">Learn more</a>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials">
<div class="description-part1">
<div class="testimonials-quote">
<div class="quote-image_part">
<div class="quote-image">
<img class="clark-img" src="img/clark-valberg.png" alt="Clark Valberg">
<img class="testimonials-logo" src="img/logo-invision.png" alt="Invision">
</div>
</div>
<div class="quote">
<blockquote>
“Donut helps us strengthen personal connections and InVision’s company culture.”
</blockquote>
<cite>
Clark Valberg
<br>
<strong>InVision</strong>
, CEO & Founder
</cite>
<br>
<a class="quote-link" href="#" target="_blank">
Read how InVision powers culture and communication</a>
</div>
</div>
</div>
</section>
</main>
<!-- Pre-footer -->
<div class="pre-footer"></div>
<!-- Footer -->
<footer>
<div class="footer-container">
<div class="footer-left">
<h5>Sign up for our newsletter</h5>
<div>
<form action="#">
<div>
<input type="email" name="email" required="required" id="newsletter" placeholder="Email address">
</div>
<div class="">
<input type="submit" value="Submit" name="subscribe" id="subscribe" class="button btn-link-theme">
</div>
</form>
</div>
</div>
<div class="footer-middle">
<div>
<ul>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Support</a>
</li>
<li>
<a href="#">Jobs (Join Us!)</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
<div class="footer-right">
<div class="social-media">
<ul>
<li>
<a href="#" class="icon_facebook" target="_blank">
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z" fill="#fff"></path>
</svg>
</a>
</li>
<li>
<a href="#" class="icon_twitter" target="_blank">
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z" fill="#fff"></path>
</svg>
</a>
</li>
<li>
<a href="#" class="icon_instagram" target="_blank">
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm138 0q0 164-115 279t-279 115-279-115-115-279 115-279 279-115 279 115 115 279zm108-410q0 38-27 65t-65 27-65-27-27-65 27-65 65-27 65 27 27 65zm-502-220q-7 0-76.5-.5t-105.5 0-96.5 3-103 10-71.5 18.5q-50 20-88 58t-58 88q-11 29-18.5 71.5t-10 103-3 96.5 0 105.5.5 76.5-.5 76.5 0 105.5 3 96.5 10 103 18.5 71.5q20 50 58 88t88 58q29 11 71.5 18.5t103 10 96.5 3 105.5 0 76.5-.5 76.5.5 105.5 0 96.5-3 103-10 71.5-18.5q50-20 88-58t58-88q11-29 18.5-71.5t10-103 3-96.5 0-105.5-.5-76.5.5-76.5 0-105.5-3-96.5-10-103-18.5-71.5q-20-50-58-88t-88-58q-29-11-71.5-18.5t-103-10-96.5-3-105.5 0-76.5.5zm768 630q0 229-5 317-10 208-124 322t-322 124q-88 5-317 5t-317-5q-208-10-322-124t-124-322q-5-88-5-317t5-317q10-208 124-322t322-124q88-5 317-5t317 5q208 10 322 124t124 322q5 88 5 317z" fill="#fff"></path>
</svg>
</a>
</li>
<li>
<a href="#" class="icon_linkedin" target="_blank">
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z" fill="#fff"></path>
</svg>
</a>
</li>
<li>
<a href="#" class="icon_angellist" target="_blank">
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1209 378l-114 328 117 21q165-451 165-518 0-56-38-56-57 0-130 225zm-299 687l33 88q37-42 71-67l-33-5.5-38.5-7-32.5-8.5zm-292-896q0 98 159 521 17-10 49-10 15 0 75 5l-121-351q-75-220-123-220-19 0-29 17.5t-10 37.5zm-79 759q0 36 51.5 119t117.5 153 100 70q14 0 25.5-13t11.5-27q0-24-32-102-13-32-32-72t-47.5-89-61.5-81-62-32q-20 0-45.5 27t-25.5 47zm-158 335q0 41 25 104 59 145 183.5 227t281.5 82q227 0 382-170 152-169 152-427 0-43-1-67t-11.5-62-30.5-56q-56-49-211.5-75.5t-270.5-26.5q-37 0-49 11-12 5-12 35 0 34 21.5 60t55.5 40 77.5 23.5 87.5 11.5 85 4 70 0h23q24 0 40 19 15 19 19 55-28 28-96 54-61 22-93 46-64 46-108.5 114t-44.5 137q0 31 18.5 88.5t18.5 87.5l-3 12q-4 12-4 14-137-10-146-216-8 2-41 2 2 7 2 21 0 53-40.5 89.5t-94.5 36.5q-82 0-166.5-78t-84.5-159q0-34 33-67 52 64 60 76 77 104 133 104 12 0 26.5-8.5t14.5-20.5q0-34-87.5-145t-116.5-111q-43 0-70 44.5t-27 90.5zm-114 9q0-101 42.5-163t136.5-88q-28-74-28-104 0-62 61-123t122-61q29 0 70 15-163-462-163-567 0-80 41-130.5t119-50.5q131 0 325 581 6 17 8 23 6-16 29-79.5t43.5-118.5 54-127.5 64.5-123 70.5-86.5 76.5-36q71 0 112 49t41 122q0 108-159 550 61 15 100.5 46t58.5 78 26 93.5 7 110.5q0 150-47 280t-132 225-211 150-278 55q-111 0-223-42-149-57-258-191.5t-109-286.5z" fill="#fff"></path>
</svg>
</a>
</li>
<li>
<a href="#" class="icon_slack" target="_blank">
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1583 776q62 0 103.5 40.5t41.5 101.5q0 97-93 130l-172 59 56 167q7 21 7 47 0 59-42 102t-101 43q-47 0-85.5-27t-53.5-72l-55-165-310 106 55 164q8 24 8 47 0 59-42 102t-102 43q-47 0-85-27t-53-72l-55-163-153 53q-29 9-50 9-61 0-101.5-40t-40.5-101q0-47 27.5-85t71.5-53l156-53-105-313-156 54q-26 8-48 8-60 0-101-40.5t-41-100.5q0-47 27.5-85t71.5-53l157-53-53-159q-8-24-8-47 0-60 42-102.5t102-42.5q47 0 85 27t53 72l54 160 310-105-54-160q-8-24-8-47 0-59 42.5-102t101.5-43q47 0 85.5 27.5t53.5 71.5l53 161 162-55q21-6 43-6 60 0 102.5 39.5t42.5 98.5q0 45-30 81.5t-74 51.5l-157 54 105 316 164-56q24-8 46-8zm-794 262l310-105-105-315-310 107z" fill="#fff"></path>
</svg>
</a>
</li>
</ul>
</div>
<div class="copyright">
© 2017 Donut Technologies Inc.
<br> All rights reserved.
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/scripts.js"></script>
</html>