martynawck commited on
Commit
9e6204c
·
1 Parent(s): b49937e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +313 -18
index.html CHANGED
@@ -1,19 +1,314 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
  </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <header class="header">
2
+ <div class="header-content responsive-wrapper">
3
+ <div class="header-logo">
4
+ <a href="#">
5
+ <div>
6
+ <img src="https://assets.codepen.io/285131/untitled-ui-icon.svg" />
7
+ </div>
8
+ <img src="https://assets.codepen.io/285131/untitled-ui.svg" />
9
+ </a>
 
 
 
 
 
 
 
10
  </div>
11
+ <div class="header-navigation">
12
+ <nav class="header-navigation-links">
13
+ <a href="#"> Home </a>
14
+ <a href="#"> Dashboard </a>
15
+ <a href="#"> Projects </a>
16
+ <a href="#"> Tasks </a>
17
+ <a href="#"> Reporting </a>
18
+ <a href="#"> Users </a>
19
+ </nav>
20
+ <div class="header-navigation-actions">
21
+ <a href="#" class="button">
22
+ <i class="ph-lightning-bold"></i>
23
+ <span>Upgrade now</span>
24
+ </a>
25
+ <a href="#" class="icon-button">
26
+ <i class="ph-gear-bold"></i>
27
+ </a>
28
+ <a href="#" class="icon-button">
29
+ <i class="ph-bell-bold"></i>
30
+ </a>
31
+ <a href="#" class="avatar">
32
+ <img src="https://uifaces.co/our-content/donated/gPZwCbdS.jpg" alt="" />
33
+ </a>
34
+ </div>
35
+ </div>
36
+ <a href="#" class="button">
37
+ <i class="ph-list-bold"></i>
38
+ <span>Menu</span>
39
+ </a>
40
+ </div>
41
+ </header>
42
+ <main class="main">
43
+ <div class="responsive-wrapper">
44
+ <div class="main-header">
45
+ <h1>Settings</h1>
46
+ <div class="search">
47
+ <input type="text" placeholder="Search" />
48
+ <button type="submit">
49
+ <i class="ph-magnifying-glass-bold"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+ <div class="horizontal-tabs">
54
+ <a href="#">My details</a>
55
+ <a href="#">Profile</a>
56
+ <a href="#">Password</a>
57
+ <a href="#">Team</a>
58
+ <a href="#">Plan</a>
59
+ <a href="#">Billing</a>
60
+ <a href="#">Email</a>
61
+ <a href="#">Notifications</a>
62
+ <a href="#" class="active">Integrations</a>
63
+ <a href="#">API</a>
64
+ </div>
65
+ <div class="content-header">
66
+ <div class="content-header-intro">
67
+ <h2>Intergrations and connected apps</h2>
68
+ <p>Supercharge your workflow and connect the tool you use every day.</p>
69
+ </div>
70
+ <div class="content-header-actions">
71
+ <a href="#" class="button">
72
+ <i class="ph-faders-bold"></i>
73
+ <span>Filters</span>
74
+ </a>
75
+ <a href="#" class="button">
76
+ <i class="ph-plus-bold"></i>
77
+ <span>Request integration</span>
78
+ </a>
79
+ </div>
80
+ </div>
81
+ <div class="content">
82
+ <div class="content-panel">
83
+ <div class="vertical-tabs">
84
+ <a href="#" class="active">View all</a>
85
+ <a href="#">Developer tools</a>
86
+ <a href="#">Communication</a>
87
+ <a href="#">Productivity</a>
88
+ <a href="#">Browser tools</a>
89
+ <a href="#">Marketplace</a>
90
+ </div>
91
+ </div>
92
+ <div class="content-main">
93
+ <div class="card-grid">
94
+ <article class="card">
95
+ <div class="card-header">
96
+ <div>
97
+ <span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
98
+ <h3>Zeplin</h3>
99
+ </div>
100
+ <label class="toggle">
101
+ <input type="checkbox" checked>
102
+ <span></span>
103
+ </label>
104
+ </div>
105
+ <div class="card-body">
106
+ <p>Collaboration between designers and developers.</p>
107
+ </div>
108
+ <div class="card-footer">
109
+ <a href="#">View integration</a>
110
+ </div>
111
+ </article>
112
+ <article class="card">
113
+ <div class="card-header">
114
+ <div>
115
+ <span><img src="https://assets.codepen.io/285131/github.svg" /></span>
116
+ <h3>GitHub</h3>
117
+ </div>
118
+ <label class="toggle">
119
+ <input type="checkbox" checked>
120
+ <span></span>
121
+ </label>
122
+ </div>
123
+ <div class="card-body">
124
+ <p>Link pull requests and automate workflows.</p>
125
+ </div>
126
+ <div class="card-footer">
127
+ <a href="#">View integration</a>
128
+ </div>
129
+ </article>
130
+ <article class="card">
131
+ <div class="card-header">
132
+ <div>
133
+ <span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
134
+ <h3>Figma</h3>
135
+ </div>
136
+ <label class="toggle">
137
+ <input type="checkbox" checked>
138
+ <span></span>
139
+ </label>
140
+ </div>
141
+ <div class="card-body">
142
+ <p>Embed file previews in projects.</p>
143
+ </div>
144
+ <div class="card-footer">
145
+ <a href="#">View integration</a>
146
+ </div>
147
+ </article>
148
+ <article class="card">
149
+ <div class="card-header">
150
+ <div>
151
+ <span><img src="https://assets.codepen.io/285131/zapier.svg" /></span>
152
+ <h3>Zapier</h3>
153
+ </div>
154
+ <label class="toggle">
155
+ <input type="checkbox">
156
+ <span></span>
157
+ </label>
158
+ </div>
159
+ <div class="card-body">
160
+ <p>Build custom automations and integrations with apps.</p>
161
+ </div>
162
+ <div class="card-footer">
163
+ <a href="#">View integration</a>
164
+ </div>
165
+ </article>
166
+ <article class="card">
167
+ <div class="card-header">
168
+ <div>
169
+ <span><img src="https://assets.codepen.io/285131/notion.svg" /></span>
170
+ <h3>Notion</h3>
171
+ </div>
172
+ <label class="toggle">
173
+ <input type="checkbox" checked>
174
+ <span></span>
175
+ </label>
176
+ </div>
177
+ <div class="card-body">
178
+ <p>Embed notion pages and notes in projects.</p>
179
+ </div>
180
+ <div class="card-footer">
181
+ <a href="#">View integration</a>
182
+ </div>
183
+ </article>
184
+ <article class="card">
185
+ <div class="card-header">
186
+ <div>
187
+ <span><img src="https://assets.codepen.io/285131/slack.svg" /></span>
188
+ <h3>Slack</h3>
189
+ </div>
190
+ <label class="toggle">
191
+ <input type="checkbox" checked>
192
+ <span></span>
193
+ </label>
194
+ </div>
195
+ <div class="card-body">
196
+ <p>Send notifications to channels and create projects.</p>
197
+ </div>
198
+ <div class="card-footer">
199
+ <a href="#">View integration</a>
200
+ </div>
201
+ </article>
202
+ <article class="card">
203
+ <div class="card-header">
204
+ <div>
205
+ <span><img src="https://assets.codepen.io/285131/zendesk.svg" /></span>
206
+ <h3>Zendesk</h3>
207
+ </div>
208
+ <label class="toggle">
209
+ <input type="checkbox" checked>
210
+ <span></span>
211
+ </label>
212
+ </div>
213
+ <div class="card-body">
214
+ <p>Link and automate Zendesk tickets.</p>
215
+ </div>
216
+ <div class="card-footer">
217
+ <a href="#">View integration</a>
218
+ </div>
219
+ </article>
220
+ <article class="card">
221
+ <div class="card-header">
222
+ <div>
223
+ <span><img src="https://assets.codepen.io/285131/jira.svg" /></span>
224
+ <h3>Atlassian JIRA</h3>
225
+ </div>
226
+ <label class="toggle">
227
+ <input type="checkbox">
228
+ <span></span>
229
+ </label>
230
+ </div>
231
+ <div class="card-body">
232
+ <p>Plan, track, and release great software.</p>
233
+ </div>
234
+ <div class="card-footer">
235
+ <a href="#">View integration</a>
236
+ </div>
237
+ </article>
238
+ <article class="card">
239
+ <div class="card-header">
240
+ <div>
241
+ <span><img src="https://assets.codepen.io/285131/dropbox.svg" /></span>
242
+ <h3>Dropbox</h3>
243
+ </div>
244
+ <label class="toggle">
245
+ <input type="checkbox" checked>
246
+ <span></span>
247
+ </label>
248
+ </div>
249
+ <div class="card-body">
250
+ <p>Everything you need for work, all in one place.</p>
251
+ </div>
252
+ <div class="card-footer">
253
+ <a href="#">View integration</a>
254
+ </div>
255
+ </article>
256
+ <article class="card">
257
+ <div class="card-header">
258
+ <div>
259
+ <span><img src="https://assets.codepen.io/285131/google-chrome.svg" /></span>
260
+ <h3>Google Chrome</h3>
261
+ </div>
262
+ <label class="toggle">
263
+ <input type="checkbox" checked>
264
+ <span></span>
265
+ </label>
266
+ </div>
267
+ <div class="card-body">
268
+ <p>Link your Google account to share bookmarks across your entire team.</p>
269
+ </div>
270
+ <div class="card-footer">
271
+ <a href="#">View integration</a>
272
+ </div>
273
+ </article>
274
+ <article class="card">
275
+ <div class="card-header">
276
+ <div>
277
+ <span><img src="https://assets.codepen.io/285131/discord.svg" /></span>
278
+ <h3>Discord</h3>
279
+ </div>
280
+ <label class="toggle">
281
+ <input type="checkbox" checked>
282
+ <span></span>
283
+ </label>
284
+ </div>
285
+ <div class="card-body">
286
+ <p>Keep in touch with your customers without leaving the app.</p>
287
+ </div>
288
+ <div class="card-footer">
289
+ <a href="#">View integration</a>
290
+ </div>
291
+ </article>
292
+ <article class="card">
293
+ <div class="card-header">
294
+ <div>
295
+ <span><img src="https://assets.codepen.io/285131/google-drive.svg" /></span>
296
+ <h3>Google Drive</h3>
297
+ </div>
298
+ <label class="toggle">
299
+ <input type="checkbox">
300
+ <span></span>
301
+ </label>
302
+ </div>
303
+ <div class="card-body">
304
+ <p>Link your Google account to share files across your entire team.</p>
305
+ </div>
306
+ <div class="card-footer">
307
+ <a href="#">View integration</a>
308
+ </div>
309
+ </article>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </main>