-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.pug
310 lines (310 loc) · 38.6 KB
/
index.pug
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
html(lang="en")
head
title Visit www.pixelrocket.store to learn how to become a frontend web developer
meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap")
link(rel="stylesheet" href="css/bootstrap/bootstrap.min.css")
link(rel="icon" type="image/png" sizes="32x32" href="favicon.png")
body
div(class="")
div
section(class="pb-20 bg-secondary-dark overflow-hidden")
nav(class="navbar pt-10 navbar-dark navbar-expand-lg")
div(class="container position-relative")
a(class="navbar-brand h4 mb-0 text-decoration-none" href="#")
img(src="images/logo.svg" alt="" style="height: 30px;" width="auto")
div(class="d-lg-none")
button(class="btn p-0 btn-sm navbar-burger")
svg(width="39" height="13" viewbox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg")
rect(width="39" height="2" rx="1" transform="matrix(-1 0 0 1 39 0)" fill="#C4C4C4")
rect(width="20" height="2" rx="1" transform="matrix(-1 0 0 1 20 11)" fill="#C4C4C4")
div(class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle")
ul(class="navbar-nav mx-auto")
li(class="nav-item position-relative")
a(class="nav-link" href="about.html") About
div(class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;")
li(class="nav-item position-relative")
a(class="nav-link" href="pricing.html") Pricing
div(class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;")
li(class="nav-item position-relative")
a(class="nav-link" href="blog.html") Blog
div(class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;")
li(class="nav-item")
a(class="nav-link" href="contact.html") Contact
div(class="d-none d-lg-block")
a(class="btn btn-outline-light" href="register.html") Sign Up
div(class="container position-relative")
div(class="row align-items-center mb-24 mb-lg-8")
div(class="col-12 col-lg-6 pt-24 py-xl-32 mb-24 mb-xl-0")
span(class="h6 text-primary") Teams Together
h1(class="mw-md mw-xl-lg h2 text-white mt-14 mb-12") Bring your team together. Right here.
p(class="text-secondary-light mb-24") The quick brown fox jumps over the lazy dog.
a(class="btn btn-primary" href="#") Learn how
div(class="col-12 col-lg-6 position-relative")
img(class="img-fluid" src="segment-assets/images/men-circle-apps-stars.png" alt="" style="object-fit: contain;")
div(class="row justify-content-center align-items-center")
div(class="col-6 col-md-4 col-lg-2 mb-6 mb-lg-0")
img(class="d-block mx-auto img-fluid" src="segment-assets/logos/dropbox-gray.svg" alt="")
div(class="col-6 col-md-4 col-lg-2 mb-6 mb-lg-0")
img(class="d-block mx-auto img-fluid" src="segment-assets/logos/stripe-gray.svg" alt="")
div(class="col-6 col-md-4 col-lg-2 mb-6 mb-lg-0")
img(class="d-block mx-auto img-fluid" src="segment-assets/logos/slack-gray.svg" alt="")
div(class="col-6 col-md-4 col-lg-2 mb-6 mb-md-0")
img(class="d-block mx-auto img-fluid" src="segment-assets/logos/stripe-gray.svg" alt="")
div(class="col-6 col-md-4 col-lg-2 mb-6 mb-lg-0")
img(class="d-block mx-auto img-fluid" src="segment-assets/logos/dropbox-gray.svg" alt="")
div(class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-sm" style="z-index: 9999;")
div(class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-secondary-dark" style="opacity: 75%;")
nav(class="position-relative h-100 w-100 d-flex flex-column py-8 px-8 bg-white overflow-auto")
div(class="d-flex align-items-center mb-32")
a(class="me-auto h4 mb-0 text-decoration-none" href="#")
img(src="images/logo-dark.svg" alt="" style="height: 28px;" width="auto")
button(class="navbar-close btn-close" type="button" aria-label="Close")
div
ul(class="nav flex-column")
li(class="nav-item")
a(class="nav-link text-dark py-5 ps-8" href="about.html") About
li(class="nav-item")
a(class="nav-link text-dark py-5 ps-8" href="pricing.html") Pricing
li(class="nav-item")
a(class="nav-link text-dark py-5 ps-8" href="blog.html") Blog
li(class="nav-item")
a(class="nav-link text-dark py-5 ps-8" href="contact.html") Contact
div(class="mt-auto")
div(class="py-6")
a(class="w-100 mb-2 btn btn-outline-light text-dark" href="login.html") Sign In
a(class="w-100 btn btn-primary" href="register.html") Sign Up
p(class="mb-4 small text-center text-muted")
span © 2022. All rights reserved.
section(class="py-24 pt-md-40 pb-md-40 pb-xl-64")
div(class="container")
div(class="mw-xl mx-auto text-center mb-32")
span(class="h6 text-primary") How it works
h2(class="h3 mt-6 mb-12") Build and launch without problems
p(class="text-secondary mb-0") The brown fox jumps over the lazy dog.
div(class="row align-items-center")
div(class="col-12 col-lg-6 col-xl-7 mb-40 mb-lg-0 position-relative")
div(class="position-relative mw-md mx-auto" style="z-index: 1;")
img(class="img-fluid w-100 h-100" src="https://images.pexels.com/photos/7148031/pexels-photo-7148031.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="")
div(class="position-absolute bottom-0 start-0 w-100 d-flex justify-content-center")
a(class="text-decoration-none d-flex w-100 pt-10 pb-14 pe-6 mx-12 align-items-center border-top border-white" href="#")
div(class="d-flex ps-2 pt-2 justify-content-center align-items-center bg-white" style="width: 80px; height: 80px; border-radius: 10px;")
svg(width="38" height="38" viewbox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg")
path(d="M0.791667 6.33333C0.354667 6.33333 0 5.97867 0 5.54167V3.95833C0 1.7765 1.7765 0 3.95833 0H5.54167C5.97867 0 6.33333 0.354667 6.33333 0.791667C6.33333 1.22867 5.97867 1.58333 5.54167 1.58333H3.95833C2.64892 1.58333 1.58333 2.64892 1.58333 3.95833V5.54167C1.58333 5.97867 1.22867 6.33333 0.791667 6.33333Z" fill="#1F40FF")
path(d="M30.8747 6.33333C30.4377 6.33333 30.083 5.97867 30.083 5.54167V3.95833C30.083 2.64892 29.0174 1.58333 27.708 1.58333H26.1247C25.6877 1.58333 25.333 1.22867 25.333 0.791667C25.333 0.354667 25.6877 0 26.1247 0H27.708C29.8898 0 31.6664 1.7765 31.6664 3.95833V5.54167C31.6664 5.97867 31.3117 6.33333 30.8747 6.33333Z" fill="#1F40FF")
path(d="M19.7914 1.58333H11.8747C11.4377 1.58333 11.083 1.22867 11.083 0.791667C11.083 0.354667 11.4377 0 11.8747 0H19.7914C20.2284 0 20.583 0.354667 20.583 0.791667C20.583 1.22867 20.2284 1.58333 19.7914 1.58333Z" fill="#1F40FF")
path(d="M16.6247 31.6667H11.8747C11.4377 31.6667 11.083 31.312 11.083 30.875C11.083 30.438 11.4377 30.0834 11.8747 30.0834H16.6247C17.0617 30.0834 17.4163 30.438 17.4163 30.875C17.4163 31.312 17.0617 31.6667 16.6247 31.6667Z" fill="#1F40FF")
path(d="M5.54167 31.6667H3.95833C1.7765 31.6667 0 29.8902 0 27.7084V26.125C0 25.688 0.354667 25.3334 0.791667 25.3334C1.22867 25.3334 1.58333 25.688 1.58333 26.125V27.7084C1.58333 29.0178 2.64892 30.0834 3.95833 30.0834H5.54167C5.97867 30.0834 6.33333 30.438 6.33333 30.875C6.33333 31.312 5.97867 31.6667 5.54167 31.6667Z" fill="#1F40FF")
path(d="M0.791667 20.5833C0.354667 20.5833 0 20.2286 0 19.7916V11.8749C0 11.4379 0.354667 11.0833 0.791667 11.0833C1.22867 11.0833 1.58333 11.4379 1.58333 11.8749V19.7916C1.58333 20.2286 1.22867 20.5833 0.791667 20.5833Z" fill="#1F40FF")
path(d="M30.8747 17.4166C30.4377 17.4166 30.083 17.0619 30.083 16.6249V11.8749C30.083 11.4379 30.4377 11.0833 30.8747 11.0833C31.3117 11.0833 31.6663 11.4379 31.6663 11.8749V16.6249C31.6663 17.0619 31.3117 17.4166 30.8747 17.4166Z" fill="#1F40FF")
path(d="M22.0118 38C21.4418 38 20.9795 37.5377 20.9795 36.9677V15.2823C20.9795 14.7123 21.4418 14.25 22.0118 14.25C22.2873 14.25 22.547 14.3577 22.7417 14.5524L37.6773 29.488C37.8721 29.6812 37.9829 29.9472 37.9829 30.2211C37.9829 30.7911 37.5206 31.2534 36.9506 31.2534H28.9563L22.7544 37.6849C22.5533 37.8908 22.2921 38 22.0118 38ZM22.5628 16.6123V35.6044L28.0507 29.9139C28.1995 29.7587 28.4053 29.6717 28.6207 29.6717H35.6206L22.5628 16.6123ZM36.5658 30.6153H36.5817H36.5658Z" fill="#1F40FF")
div(class="ms-12")
span(class="h6 text-primary") Zospace
h4(class="text-white mt-1 mb-0") How it works
img(class="position-absolute bottom-0 start-0 mb-n32 mb-sm-n52 ms-xl-20 w-100" src="segment-assets/images/blue-eclipse.png" alt="")
div(class="col-12 col-lg-6 col-xl-5 position-relative")
div(class="mw-xs mw-md-md mx-auto")
ul(class="list-unstyled mb-10")
li(class="d-sm-flex pb-12 mb-8 border-bottom border-primary-light")
span(class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;") 1
div(class="mt-8 mb-sm-0 ms-sm-8")
h3(class="h6 mb-6") Register account
p(class="text-secondary mb-0") It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.
li(class="d-sm-flex pb-12 mb-8 border-bottom border-primary-light")
span(class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;") 2
div(class="mt-8 mb-sm-0 ms-sm-8")
h3(class="h6 mb-6") Customize tools
p(class="text-secondary mb-0") The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.
li(class="d-sm-flex pb-12 border-bottom border-primary-light")
span(class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;") 3
div(class="mt-8 mb-sm-0 ms-sm-8")
h3(class="h6 mb-6") Work with your team
p(class="text-secondary mb-0") The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.
div(class="text-end")
a(class="btn p-0 btn-link fw-bold text-decoration-none" href="#")
span(class="me-5") Learn more
|
span(class="d-inline-block")
svg(width="19" height="20" viewbox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg")
path(d="M18.7383 1.47342L18.7383 10.9304L17.5562 10.9304L17.5562 2.89788L0.834948 19.625L0.00154682 18.7916L16.7228 2.06448L9.28125 2.06448L9.28125 0.882355L18.1472 0.882355C18.4737 0.882355 18.7383 1.14697 18.7383 1.47342Z" fill="currentColor")
section(class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden")
img(class="position-absolute top-0 start-0 col-12 col-md-6 col-xxl-auto translate-middle-x img-fluid" src="segment-assets/lines/circle.svg" alt="")
img(class="position-absolute bottom-0 end-0 mb-n12 col-12 col-md-6 col-xxl-auto img-fluid" src="segment-assets/lines/circle.svg" alt="")
div(class="container position-relative")
div(class="row mw-5xl mx-auto")
div(class="col-12 col-lg-6 mb-20 px-lg-10")
div(class="pt-16 px-8 px-sm-16 pb-20 position-relative bg-secondary rounded")
img(class="d-lg-none position-absolute top-0 end-0 mt-n12 me-n2 img-fluid" src="segment-assets/images/stars.svg" alt="")
span(class="d-flex justify-content-center align-items-center mb-14 bg-primary rounded" style="width: 80px; height: 80px;")
svg(width="35" height="35" viewbox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg")
g(clip-path="url(#clip0)")
path(d="M22.6042 34.9999H2.1875C0.981458 34.9999 0 34.0185 0 32.8124V12.3958C0 11.1897 0.981458 10.2083 2.1875 10.2083H22.6042C23.8102 10.2083 24.7917 11.1897 24.7917 12.3958V32.8124C24.7917 34.0185 23.8102 34.9999 22.6042 34.9999ZM2.1875 11.6666C1.78646 11.6666 1.45833 11.9933 1.45833 12.3958V32.8124C1.45833 33.2149 1.78646 33.5416 2.1875 33.5416H22.6042C23.0052 33.5416 23.3333 33.2149 23.3333 32.8124V12.3958C23.3333 11.9933 23.0052 11.6666 22.6042 11.6666H2.1875Z" fill="white")
path(d="M34.2702 5.83333C33.8677 5.83333 33.541 5.50667 33.541 5.10417V3.64583C33.541 2.43979 32.5596 1.45833 31.3535 1.45833H29.8952C29.4927 1.45833 29.166 1.13167 29.166 0.729167C29.166 0.326667 29.4927 0 29.8952 0H31.3535C33.3646 0 34.9993 1.63625 34.9993 3.64583V5.10417C34.9993 5.50667 34.6727 5.83333 34.2702 5.83333Z" fill="white")
path(d="M6.56217 5.83333C6.15967 5.83333 5.83301 5.50667 5.83301 5.10417V3.64583C5.83301 1.63625 7.4678 0 9.47884 0H10.9372C11.3397 0 11.6663 0.326667 11.6663 0.729167C11.6663 1.13167 11.3397 1.45833 10.9372 1.45833H9.47884C8.2728 1.45833 7.29134 2.43979 7.29134 3.64583V5.10417C7.29134 5.50667 6.96467 5.83333 6.56217 5.83333Z" fill="white")
path(d="M24.0618 1.45833H16.7702C16.3677 1.45833 16.041 1.13167 16.041 0.729167C16.041 0.326667 16.3677 0 16.7702 0H24.0618C24.4643 0 24.791 0.326667 24.791 0.729167C24.791 1.13167 24.4643 1.45833 24.0618 1.45833Z" fill="white")
path(d="M31.3535 29.1666H29.8952C29.4927 29.1666 29.166 28.8399 29.166 28.4374C29.166 28.0349 29.4927 27.7083 29.8952 27.7083H31.3535C32.5596 27.7083 33.541 26.7268 33.541 25.5208V24.0624C33.541 23.6599 33.8677 23.3333 34.2702 23.3333C34.6727 23.3333 34.9993 23.6599 34.9993 24.0624V25.5208C34.9993 27.5303 33.3646 29.1666 31.3535 29.1666Z" fill="white")
path(d="M34.2702 18.9583C33.8677 18.9583 33.541 18.6316 33.541 18.2291V10.9374C33.541 10.5349 33.8677 10.2083 34.2702 10.2083C34.6727 10.2083 34.9994 10.5349 34.9994 10.9374V18.2291C34.9994 18.6316 34.6727 18.9583 34.2702 18.9583Z" fill="white")
h4(class="text-white mb-6") Backups
p(class="mw-xs text-secondary-light") The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.
div(class="col-12 col-lg-6 mb-20 px-lg-10")
img(class="d-none d-lg-block position-absolute top-0 end-0 mt-n12 me-n6 img-fluid" src="segment-assets/images/stars.svg" alt="")
div(class="pt-16 px-8 px-sm-16 pb-20 rounded bg-secondary")
span(class="d-flex justify-content-center align-items-center mb-14 bg-info rounded" style="width: 80px; height: 80px;")
svg(width="36" height="35" viewbox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg")
g(clip-path="url(#clip0)")
path(d="M32.25 35H5.25C3.183 35 1.5 33.3638 1.5 31.3542V3.64588C1.5 3.24338 1.836 2.91672 2.25 2.91672C2.664 2.91672 3 3.24338 3 3.64588V31.3542C3 32.5603 4.0095 33.5417 5.25 33.5417H31.5V6.56255C31.5 6.16005 31.836 5.83338 32.25 5.83338C32.664 5.83338 33 6.16005 33 6.56255V34.2709C33 34.6734 32.664 35 32.25 35Z" fill="white")
path(d="M32.25 7.29167H5.25C3.183 7.29167 1.5 5.65542 1.5 3.64583C1.5 1.63625 3.183 0 5.25 0H29.25C29.664 0 30 0.326667 30 0.729167V5.83333H32.25C32.664 5.83333 33 6.16 33 6.5625C33 6.965 32.664 7.29167 32.25 7.29167ZM5.25 1.45833C4.0095 1.45833 3 2.43979 3 3.64583C3 4.85187 4.0095 5.83333 5.25 5.83333H28.5V1.45833H5.25Z" fill="white")
path(d="M12.9868 27.7055C12.2338 27.7055 11.6158 27.4897 11.1718 27.0566C10.2898 26.1991 10.2808 24.6838 11.1478 22.7866C11.9158 21.1051 13.3018 19.2443 15.0478 17.5482C16.7938 15.8507 18.7063 14.5047 20.4358 13.7565C22.3858 12.9122 23.9443 12.9209 24.8278 13.7799C25.7098 14.6374 25.7188 16.154 24.8518 18.0499C24.0838 19.7313 22.6978 21.5922 20.9518 23.2882C19.2058 24.9857 17.2933 26.3318 15.5638 27.0799C14.5963 27.4955 13.7263 27.7055 12.9868 27.7055ZM23.0143 14.582C22.5043 14.582 21.8188 14.754 21.0448 15.088C19.4803 15.7647 17.7268 17.0043 16.1068 18.5778C14.4868 20.1513 13.2148 21.8561 12.5188 23.3772C11.9488 24.627 11.8378 25.6405 12.2323 26.024C12.6268 26.4076 13.6693 26.2997 14.9548 25.7455C16.5193 25.0688 18.2728 23.8293 19.8928 22.2557C21.5128 20.6822 22.7863 18.9774 23.4823 17.4549C24.0523 16.2051 24.1633 15.1916 23.7688 14.808C23.6113 14.6563 23.3503 14.582 23.0143 14.582Z" fill="white")
path(d="M23.0128 27.7054C22.2733 27.7054 21.4033 27.4969 20.4358 27.0784C18.7063 26.3317 16.7923 24.9842 15.0478 23.2867C13.3018 21.5892 11.9173 19.7298 11.1478 18.0484C10.2808 16.1525 10.2898 14.6359 11.1718 13.7784C12.0523 12.9209 13.6138 12.9121 15.5638 13.755C17.2933 14.5017 19.2073 15.8492 20.9518 17.5467C22.6978 19.2442 24.0823 21.1036 24.8518 22.785C25.7188 24.6823 25.7098 26.1975 24.8278 27.055C24.3838 27.4882 23.7658 27.7054 23.0128 27.7054ZM12.9853 14.5819C12.6478 14.5819 12.3898 14.6563 12.2323 14.8094C11.8378 15.1929 11.9488 16.2065 12.5188 17.4563C13.2148 18.9773 14.4898 20.6821 16.1083 22.2571C17.7268 23.8321 19.4803 25.0702 21.0463 25.7469C22.3318 26.3025 23.3743 26.4075 23.7688 26.0254C24.1633 25.6419 24.0523 24.6284 23.4823 23.3786C22.7863 21.8575 21.5113 20.1527 19.8928 18.5777C18.2743 17.0027 16.5208 15.7646 14.9548 15.0879C14.1808 14.754 13.4953 14.5819 12.9853 14.5819ZM11.7013 14.2932H11.7163H11.7013Z" fill="white")
h4(class="text-white mb-6") Navigation
p(class="mw-xs text-secondary-light") It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.
div(class="col-12 col-lg-6 px-lg-10 mb-20 mb-lg-0")
div(class="pt-16 px-8 px-sm-16 pb-20 rounded bg-secondary")
span(class="d-flex justify-content-center align-items-center mb-14 bg-success rounded" style="width: 80px; height: 80px;")
svg(width="35" height="35" viewbox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg")
g(clip-path="url(#clip0)")
path(d="M24.0625 18.9583C23.7402 18.9583 23.431 18.8927 23.1467 18.7615L17.5 16.1175L11.8592 18.7585C11.569 18.8927 11.2598 18.9583 10.9375 18.9583C9.73146 18.9583 8.75 17.9769 8.75 16.7708C8.75 16.4529 8.81417 16.1583 8.94833 15.8681L15.5079 1.28917C15.8419 0.510417 16.6265 0 17.5 0C18.3735 0 19.1581 0.510417 19.4965 1.30083L26.0546 15.874C26.1858 16.1583 26.25 16.4529 26.25 16.7708C26.25 17.9769 25.2685 18.9583 24.0625 18.9583ZM17.5 14.5833C17.605 14.5833 17.7115 14.6067 17.8092 14.6519L23.7592 17.4373C24.166 17.6225 24.7917 17.2856 24.7917 16.7708C24.7917 16.6629 24.7712 16.5754 24.7275 16.4763L18.1621 1.88854C17.9346 1.35771 17.061 1.36792 16.8423 1.87833L10.2754 16.4719C10.2287 16.5754 10.2083 16.6629 10.2083 16.7708C10.2083 17.2856 10.8092 17.6327 11.2467 17.4358L17.1908 14.6533C17.2885 14.6067 17.395 14.5833 17.5 14.5833Z" fill="white")
path(d="M17.4997 35C8.65488 35 1.45801 27.8031 1.45801 18.9583C1.45801 12.9194 4.7903 7.46227 10.154 4.71769C10.507 4.53685 10.9518 4.6754 11.1355 5.0356C11.3193 5.3929 11.1763 5.83331 10.8176 6.0156C5.94384 8.50936 2.91634 13.4691 2.91634 18.9583C2.91634 26.9996 9.45842 33.5417 17.4997 33.5417C25.5409 33.5417 32.083 26.9996 32.083 18.9583C32.083 13.4794 29.0613 8.51956 24.1963 6.0156C23.8376 5.83185 23.6961 5.39144 23.8813 5.03414C24.0665 4.67539 24.507 4.53539 24.8628 4.7206C30.2163 7.47394 33.5413 12.931 33.5413 18.9583C33.5413 27.8031 26.3445 35 17.4997 35Z" fill="white")
h4(class="text-white mb-6") Documents
p(class="mw-xs text-secondary-light") The time, this accumsan augue, posuere posuere elit lorem.
div(class="col-12 col-lg-6 px-lg-10")
div(class="pt-16 px-8 px-sm-16 pb-20 rounded bg-secondary")
span(class="d-flex justify-content-center align-items-center mb-14 bg-warning rounded" style="width: 80px; height: 80px;")
svg(width="35" height="35" viewbox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg")
path(fill-rule="evenodd" clip-rule="evenodd" d="M24.0618 13.1249C24.0618 12.8935 23.952 12.6758 23.766 12.5384C23.5797 12.4009 23.3394 12.3599 23.1183 12.428L14.3682 15.1203C14.0623 15.2144 13.8535 15.4972 13.8535 15.8173V21.536C13.4245 21.2878 12.9264 21.1457 12.3952 21.1457C10.7844 21.1457 9.47852 22.4515 9.47852 24.0624C9.47852 25.6733 10.7844 26.9791 12.3952 26.9791C14.0044 26.9791 15.3092 25.6758 15.3118 24.0671V24.0624V16.3557L22.6035 14.1122V20.0777C22.1745 19.8294 21.6765 19.6874 21.1452 19.6874C19.5343 19.6874 18.2285 20.9932 18.2285 22.6041C18.2285 24.2149 19.5343 25.5207 21.1452 25.5207C22.7545 25.5207 24.0592 24.2174 24.0618 22.6087V22.6041V13.1249ZM22.6035 22.6041C22.6035 21.7986 21.9506 21.1457 21.1452 21.1457C20.3397 21.1457 19.6868 21.7986 19.6868 22.6041C19.6868 23.4095 20.3397 24.0624 21.1452 24.0624C21.9506 24.0624 22.6035 23.4095 22.6035 22.6041ZM12.3952 22.6041C11.5898 22.6041 10.9368 23.257 10.9368 24.0624C10.9368 24.8678 11.5898 25.5207 12.3952 25.5207C13.2006 25.5207 13.8535 24.8678 13.8535 24.0624C13.8535 23.257 13.2006 22.6041 12.3952 22.6041Z" fill="white")
path(fill-rule="evenodd" clip-rule="evenodd" d="M10.208 3.64577C8.19447 3.64577 6.56217 5.27807 6.56217 7.2916V8.0937C4.89804 8.43149 3.64551 9.90278 3.64551 11.6666V27.7083C3.64551 29.7218 5.27781 31.3541 7.29134 31.3541H27.708C29.7215 31.3541 31.3538 29.7218 31.3538 27.7083V11.6666C31.3538 9.90278 30.1013 8.43149 28.4372 8.0937V7.2916C28.4372 5.27807 26.8049 3.64577 24.7913 3.64577H10.208ZM26.9788 8.02077V7.2916C26.9788 6.08347 25.9994 5.1041 24.7913 5.1041H10.208C8.99988 5.1041 8.02051 6.08347 8.02051 7.2916V8.02077H26.9788ZM7.29134 9.4791C6.08321 9.4791 5.10384 10.4585 5.10384 11.6666V27.7083C5.10384 28.9163 6.08321 29.8958 7.29134 29.8958H27.708C28.9161 29.8958 29.8955 28.9163 29.8955 27.7083V11.6666C29.8955 10.4585 28.9161 9.4791 27.708 9.4791H7.29134Z" fill="white")
h4(class="text-white mb-6") Weekly updates
p(class="mw-xs text-secondary-light") Again and again vehicula libero at nibh volutpat lacinia non sed you see.
section(class="py-24 pt-md-40 pb-md-40 pb-xl-64")
div(class="container")
div(class="row align-items-center")
div(class="col-12 col-lg-6 mb-24 mb-lg-0")
div(class="mw-md mx-auto")
span(class="h6 text-primary") How it works
h2(class="h3 mt-12 mb-12") Build and launch without problems
p(class="text-secondary mb-14") The brown fox jumps over the lazy dog.
a(class="btn btn-primary" href="#") How it works?
div(class="col-12 col-lg-6")
div(class="mw-xs mw-md-md mx-auto")
ul(class="list-unstyled")
li(class="d-sm-flex pb-12 mb-8 border-bottom border-primary-light")
span(class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;") 1
div(class="mt-8 mb-sm-0 ms-sm-8")
h3(class="h5 mb-6") Register account
p(class="mw-xs text-secondary") It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.
li(class="d-sm-flex pb-12 mb-8 border-bottom border-primary-light")
span(class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;") 2
div(class="mt-8 mb-sm-0 ms-sm-8")
h3(class="h5 mb-6") Customize tools
p(class="mw-xs text-secondary") The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.
li(class="d-sm-flex")
span(class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;") 3
div(class="mt-8 mb-sm-0 ms-sm-8")
h3(class="h5 mb-6") Work with your team
p(class="mw-xs text-secondary") The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.
section(class="position-relative bg-white py-24 py-md-40 overflow-hidden")
div(class="container position-relative")
div(class="position-absolute bottom-0 start-0 mb-8 mb-lg-20 col-6 ms-n52 bg-secondary-light" style="height: 1px;")
div(class="position-absolute bottom-0 end-0 mb-8 mb-lg-20 col-6 me-n52 bg-secondary-light" style="height: 1px;")
div(class="row align-items-center justify-content-between justify-content-xl-center")
div(class="d-none d-lg-block col-12 col-lg-auto px-10")
a(class="d-inline-flex justify-content-center align-items-center rounded-circle bg-primary" href="#" style="width: 62px; height: 62px;")
svg(width="7" height="14" viewbox="0 0 7 14" fill="none" xmlns="http://www.w3.org/2000/svg")
path(d="M6.84708 12.115C7.05097 12.3207 7.05097 12.6512 6.84708 12.8554C6.64319 13.0596 6.31377 13.0603 6.10987 12.8554L0.152917 6.87493C-0.0509739 6.67074 -0.0509738 6.34026 0.152917 6.13456L6.10988 0.154119C6.31377 -0.0500693 6.64319 -0.0500693 6.84708 0.154119C7.05097 0.359063 7.05097 0.690301 6.84708 0.894489L1.4143 6.50512L6.84708 12.115Z" fill="white")
div(class="col-12 col-lg-7 col-xl-8")
div(class="mw-4xl mx-auto position-relative text-center mb-28")
img(class="position-absolute top-0 end-0 me-n4 mt-28 img-fluid" src="segment-assets/images/quote-gray-light.svg" alt="")
div(class="position-relative")
span(class="h6 text-primary") Testimonials
h2(class="h3 text-dark mt-20 mb-16") Segment has helped us work
div(class="mw-sm mw-lg-md mx-auto")
p(class="text-secondary mb-8") The point of using Lorem Ipsum is that it has a more-or-less normal. Vestibulum lectus ex, molestie id erat at, consectetur.
p(class="text-secondary") Etiam finibus nibh enim, et tempus sem imperdiet eget. Ut blandit, nulla quis tincidunt dignissim, ipsum diam efficitur est, et iaculis dui ante eu enim.
div(class="d-flex justify-content-center align-items-center")
div(class="me-8 me-md-16")
img(class="d-block mx-auto img-fluid rounded-pill" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" style="height: 170px;")
div(class="position-relative")
div(class="d-flex mb-4")
img(class="img-fluid" src="segment-assets/images/star-yellow.svg" alt="")
img(class="img-fluid" src="segment-assets/images/star-yellow.svg" alt="")
img(class="img-fluid" src="segment-assets/images/star-yellow.svg" alt="")
img(class="img-fluid" src="segment-assets/images/star-yellow.svg" alt="")
img(src="segment-assets/images/star-light-gray.svg" alt="")
div
h3(class="h4 text-dark mb-1") Léa Herrera
span(class="text-dark") Google
div(class="d-none d-lg-block col-12 col-lg-auto px-10")
a(class="d-inline-flex justify-content-center align-items-center rounded-circle bg-primary" href="#" style="width: 62px; height: 62px;")
svg(width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg")
path(d="M0.15292 0.901511C-0.0509709 0.696057 -0.0509709 0.365972 0.15292 0.16203C0.356811 -0.0419136 0.686232 -0.0426689 0.890123 0.16203L6.84708 6.13528C7.05097 6.33923 7.05097 6.66931 6.84708 6.87476L0.890121 12.848C0.686231 13.052 0.35681 13.052 0.152919 12.848C-0.050972 12.6433 -0.0509719 12.3125 0.152919 12.1085L5.5857 6.50465L0.15292 0.901511Z" fill="white")
div(class="d-lg-none mt-24")
div(class="text-center")
a(class="d-inline-flex me-4 justify-content-center align-items-center rounded-circle bg-primary" href="#" style="width: 62px; height: 62px;")
svg(width="7" height="14" viewbox="0 0 7 14" fill="none" xmlns="http://www.w3.org/2000/svg")
path(d="M6.84708 12.115C7.05097 12.3207 7.05097 12.6512 6.84708 12.8554C6.64319 13.0596 6.31377 13.0603 6.10987 12.8554L0.152917 6.87493C-0.0509739 6.67074 -0.0509738 6.34026 0.152917 6.13456L6.10988 0.154119C6.31377 -0.0500693 6.64319 -0.0500693 6.84708 0.154119C7.05097 0.359063 7.05097 0.690301 6.84708 0.894489L1.4143 6.50512L6.84708 12.115Z" fill="white")
|
a(class="d-inline-flex justify-content-center align-items-center rounded-circle bg-primary" href="#" style="width: 62px; height: 62px;")
svg(width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg")
path(d="M0.15292 0.901511C-0.0509709 0.696057 -0.0509709 0.365972 0.15292 0.16203C0.356811 -0.0419136 0.686232 -0.0426689 0.890123 0.16203L6.84708 6.13528C7.05097 6.33923 7.05097 6.66931 6.84708 6.87476L0.890121 12.848C0.686231 13.052 0.35681 13.052 0.152919 12.848C-0.050972 12.6433 -0.0509719 12.3125 0.152919 12.1085L5.5857 6.50465L0.15292 0.901511Z" fill="white")
section(class="position-relative bg-secondary-dark pt-40 overflow-hidden")
div(class="container mb-24")
div(class="text-center")
a(class="d-inline-block mb-8" href="#")
|
h2(class="text-white mb-8") Collaborate everywhere.
p(class="text-white mb-16") Get our free mobile application.
a(class="btn btn-primary" href="#") Downolad
div(class="position-relative")
div(class="position-absolute top-0 end-0 mt-40 col-6 bg-secondary" style="height: 1px;")
div(class="position-absolute top-50 start-0 col-6 bg-secondary" style="height: 1px;")
img(class="position-relative d-block mw-md mw-md-xl mw-xl-3xl mx-auto img-fluid" src="segment-assets/images/smartphone-dark.png" alt="")
section(class="py-40")
div(class="container")
div(class="mw-2xl mx-auto text-center")
a(class="d-inline-block mx-auto mb-8" href="#")
h2(class="mb-8") Learn Bootstrap
p(class="text-secondary mb-16") Visit www.pixelrocket.store and enrol in my Bootstrap Masterclass
a(class="btn btn-primary" href="https://www.pixelrocket.store") Visit Pixel Rocket
div
section(class="bg-secondary-dark py-24 py-md-40")
div(class="container")
div(class="text-center pb-20 mb-12 border-bottom border-secondary")
a(class="d-inline-block mb-20" href="#")
img(class="img-fluid" src="images/logo.svg" alt="" width="auto")
div(class="row justify-content-center align-items-center mb-n6")
div(class="col-6 col-md-3 col-xl-auto me-xl-16 mb-6")
a(class="d-inline-block fw-bold text-white text-decoration-none" href="#") Home
div(class="col-6 col-md-3 col-xl-auto me-xl-16 mb-6")
a(class="d-inline-block fw-bold text-white text-decoration-none" href="#") Product
div(class="col-6 col-md-3 col-xl-auto me-xl-16 mb-6")
a(class="d-inline-block fw-bold text-white text-decoration-none" href="#") Pricing
div(class="col-6 col-md-3 col-xl-auto me-xl-16 mb-6")
a(class="d-inline-block fw-bold text-white text-decoration-none" href="#") Story
div(class="col-6 col-md-3 col-xl-auto me-xl-16 mb-6")
a(class="d-inline-block fw-bold text-white text-decoration-none" href="#") Features
div(class="col-6 col-md-3 col-xl-auto me-xl-16 mb-6")
a(class="d-inline-block fw-bold text-white text-decoration-none" href="#") Contact
div(class="d-flex mt-20 justify-content-center")
a(class="d-flex me-4 justify-content-center align-items-center bg-secondary rounded-circle" href="#" style="width: 48px; height: 48px")
svg(width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 16px;height: 16px")
g(clip-path="url(#clip0)")
path(d="M17.0064 3.181e-08H0.992752C0.444397 0.00027469 -0.000137297 0.445084 3.181e-08 0.993576V17.0072C0.00027469 17.5556 0.445084 18.0001 0.993576 18H17.0064C17.5551 18.0001 17.9999 17.5555 18 17.0068C18 17.0067 18 17.0066 18 17.0064V0.992752C17.9997 0.444397 17.5549 -0.000137297 17.0064 3.181e-08Z" fill="white")
path(d="M12.4277 18.0001V11.0391H14.7744L15.126 8.31453H12.4277V6.57924C12.4277 5.79221 12.6462 5.25594 13.7748 5.25594H15.2051V2.82562C14.9562 2.79253 14.1025 2.71851 13.109 2.71851C11.0348 2.71851 9.61523 3.98413 9.61523 6.30939V8.31453H7.27734V11.0391H9.61523V18.0001H12.4277Z" fill="#2D2D33")
|
a(class="d-flex me-4 justify-content-center align-items-center bg-secondary rounded-circle" href="#" style="width: 48px; height: 48px")
svg(width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 16px;height: 16px")
g(clip-path="url(#clip0)")
path(d="M17.982 5.29205C17.9398 4.33564 17.7852 3.67812 17.5636 3.10836C17.3351 2.50359 16.9834 1.96213 16.5227 1.51201C16.0726 1.05489 15.5276 0.699691 14.9298 0.474702C14.3568 0.253147 13.7027 0.0984842 12.7463 0.0563159C11.7827 0.0105764 11.4768 0 9.03301 0C6.58917 0 6.28328 0.0105764 5.3233 0.0527447C4.36689 0.0949129 3.70937 0.249713 3.13975 0.471131C2.53484 0.699691 1.99338 1.05132 1.54326 1.51201C1.08614 1.96213 0.731078 2.50716 0.505952 3.10493C0.284397 3.67812 0.129734 4.33207 0.0875659 5.28848C0.0418264 6.25203 0.03125 6.55792 0.03125 9.00176C0.03125 11.4456 0.0418264 11.7515 0.0839947 12.7115C0.126163 13.6679 0.280963 14.3254 0.502518 14.8952C0.731078 15.4999 1.08614 16.0414 1.54326 16.4915C1.99338 16.9486 2.53841 17.3038 3.13618 17.5288C3.70937 17.7504 4.36332 17.905 5.31986 17.9472C6.27971 17.9895 6.58574 17.9999 9.02957 17.9999C11.4734 17.9999 11.7793 17.9895 12.7393 17.9472C13.6957 17.905 14.3532 17.7504 14.9228 17.5288C16.1325 17.0611 17.0889 16.1047 17.5566 14.8952C17.778 14.322 17.9328 13.6679 17.975 12.7115C18.0172 11.7515 18.0278 11.4456 18.0278 9.00176C18.0278 6.55792 18.0242 6.25203 17.982 5.29205ZM16.3611 12.6411C16.3223 13.5202 16.1747 13.9949 16.0516 14.3114C15.7492 15.0956 15.1268 15.7179 14.3426 16.0204C14.0262 16.1434 13.548 16.2911 12.6724 16.3297C11.723 16.372 11.4382 16.3824 9.03658 16.3824C6.63491 16.3824 6.3466 16.372 5.40063 16.3297C4.52155 16.2911 4.04685 16.1434 3.73038 16.0204C3.34015 15.8761 2.98495 15.6476 2.69664 15.3487C2.39775 15.0568 2.16919 14.7052 2.02497 14.315C1.9019 13.9985 1.75424 13.5202 1.71565 12.6447C1.67334 11.6953 1.6629 11.4104 1.6629 9.00876C1.6629 6.60709 1.67334 6.31878 1.71565 5.37295C1.75424 4.49387 1.9019 4.01917 2.02497 3.7027C2.16919 3.31234 2.39775 2.95727 2.70021 2.66883C2.99196 2.36994 3.34359 2.14138 3.73395 1.99729C4.05042 1.87422 4.52869 1.72656 5.4042 1.68783C6.3536 1.64566 6.63848 1.63508 9.04001 1.63508C11.4453 1.63508 11.73 1.64566 12.676 1.68783C13.555 1.72656 14.0297 1.87422 14.3462 1.99729C14.7364 2.14138 15.0916 2.36994 15.3799 2.66883C15.6788 2.96071 15.9074 3.31234 16.0516 3.7027C16.1747 4.01917 16.3223 4.49731 16.3611 5.37295C16.4032 6.32236 16.4138 6.60709 16.4138 9.00876C16.4138 11.4104 16.4032 11.6917 16.3611 12.6411Z" fill="white")
path(d="M9.03411 4.37793C6.48135 4.37793 4.41016 6.44898 4.41016 9.00188C4.41016 11.5548 6.48135 13.6258 9.03411 13.6258C11.587 13.6258 13.6581 11.5548 13.6581 9.00188C13.6581 6.44898 11.587 4.37793 9.03411 4.37793ZM9.03411 12.0013C7.37801 12.0013 6.03467 10.6581 6.03467 9.00188C6.03467 7.34564 7.37801 6.00244 9.03411 6.00244C10.6903 6.00244 12.0335 7.34564 12.0335 9.00188C12.0335 10.6581 10.6903 12.0013 9.03411 12.0013Z" fill="white")
path(d="M14.9208 4.1952C14.9208 4.79133 14.4375 5.27468 13.8412 5.27468C13.2451 5.27468 12.7617 4.79133 12.7617 4.1952C12.7617 3.59894 13.2451 3.11572 13.8412 3.11572C14.4375 3.11572 14.9208 3.59894 14.9208 4.1952Z" fill="white")
|
a(class="d-flex justify-content-center align-items-center bg-secondary rounded-circle" href="#" style="width: 48px; height: 48px")
svg(width="18" height="16" viewbox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 16px;height: 16px")
path(d="M18 2.41887C17.3306 2.7125 16.6174 2.90712 15.8737 3.00162C16.6388 2.54487 17.2226 1.82712 17.4971 0.962C16.7839 1.38725 15.9964 1.68763 15.1571 1.85525C14.4799 1.13413 13.5146 0.6875 12.4616 0.6875C10.4186 0.6875 8.77387 2.34575 8.77387 4.37863C8.77387 4.67113 8.79862 4.95237 8.85938 5.22012C5.7915 5.0705 3.07687 3.60013 1.25325 1.36025C0.934875 1.91263 0.748125 2.54488 0.748125 3.2255C0.748125 4.5035 1.40625 5.63637 2.38725 6.29225C1.79437 6.281 1.21275 6.10888 0.72 5.83775C0.72 5.849 0.72 5.86363 0.72 5.87825C0.72 7.6715 1.99912 9.161 3.6765 9.50412C3.37612 9.58625 3.04875 9.62562 2.709 9.62562C2.47275 9.62562 2.23425 9.61213 2.01038 9.56262C2.4885 11.024 3.84525 12.0984 5.4585 12.1332C4.203 13.1154 2.60888 13.7071 0.883125 13.7071C0.5805 13.7071 0.29025 13.6936 0 13.6565C1.63462 14.7106 3.57188 15.3125 5.661 15.3125C12.4515 15.3125 16.164 9.6875 16.164 4.81175C16.164 4.64862 16.1584 4.49113 16.1505 4.33475C16.8829 3.815 17.4982 3.16587 18 2.41887Z" fill="white")
p(class="text-center text-white mb-0")
span(class="text-secondary-light")
| Bootstrap Template created by
a(href="https://www.pixelrocket.store") Pixel Rocket
script(src="js/bootstrap/bootstrap.bundle.min.js")
script(src="js/main.js")