Hugging Face's logo

Spaces:
ipipan
/
nlprepl
Running

App Files Community
martynawck commited on
Commit
fcdec08
•
1 Parent(s): 6aaaa21

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +125 -314
index.html CHANGED
@@ -1,314 +1,125 @@
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>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Bootstrap Example</title>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
8
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
9
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
10
+ <style>
11
+ /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
12
+ .row.content {height: 1500px}
13
+
14
+ /* Set gray background color and 100% height */
15
+ .sidenav {
16
+ background-color: #f1f1f1;
17
+ height: 100%;
18
+ }
19
+
20
+ /* Set black background color, white text and some padding */
21
+ footer {
22
+ background-color: #555;
23
+ color: white;
24
+ padding: 15px;
25
+ }
26
+
27
+ /* On small screens, set height to 'auto' for sidenav and grid */
28
+ @media screen and (max-width: 767px) {
29
+ .sidenav {
30
+ height: auto;
31
+ padding: 15px;
32
+ }
33
+ .row.content {height: auto;}
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+
39
+ <div class="container-fluid">
40
+ <div class="row content">
41
+ <div class="col-sm-3 sidenav">
42
+ <h4>John's Blog</h4>
43
+ <ul class="nav nav-pills nav-stacked">
44
+ <li class="active"><a href="#section1">Home</a></li>
45
+ <li><a href="#section2">Friends</a></li>
46
+ <li><a href="#section3">Family</a></li>
47
+ <li><a href="#section3">Photos</a></li>
48
+ </ul><br>
49
+ <div class="input-group">
50
+ <input type="text" class="form-control" placeholder="Search Blog..">
51
+ <span class="input-group-btn">
52
+ <button class="btn btn-default" type="button">
53
+ <span class="glyphicon glyphicon-search"></span>
54
+ </button>
55
+ </span>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="col-sm-9">
60
+ <h4><small>RECENT POSTS</small></h4>
61
+ <hr>
62
+ <h2>I Love Food</h2>
63
+ <h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27, 2015.</h5>
64
+ <h5><span class="label label-danger">Food</span> <span class="label label-primary">Ipsum</span></h5><br>
65
+ <p>Food is my passion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
66
+ <br><br>
67
+
68
+ <h4><small>RECENT POSTS</small></h4>
69
+ <hr>
70
+ <h2>Officially Blogging</h2>
71
+ <h5><span class="glyphicon glyphicon-time"></span> Post by John Doe, Sep 24, 2015.</h5>
72
+ <h5><span class="label label-success">Lorem</span></h5><br>
73
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
74
+ <hr>
75
+
76
+ <h4>Leave a Comment:</h4>
77
+ <form role="form">
78
+ <div class="form-group">
79
+ <textarea class="form-control" rows="3" required></textarea>
80
+ </div>
81
+ <button type="submit" class="btn btn-success">Submit</button>
82
+ </form>
83
+ <br><br>
84
+
85
+ <p><span class="badge">2</span> Comments:</p><br>
86
+
87
+ <div class="row">
88
+ <div class="col-sm-2 text-center">
89
+ <img src="bandmember.jpg" class="img-circle" height="65" width="65" alt="Avatar">
90
+ </div>
91
+ <div class="col-sm-10">
92
+ <h4>Anja <small>Sep 29, 2015, 9:12 PM</small></h4>
93
+ <p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
94
+ <br>
95
+ </div>
96
+ <div class="col-sm-2 text-center">
97
+ <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
98
+ </div>
99
+ <div class="col-sm-10">
100
+ <h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4>
101
+ <p>I am so happy for you man! Finally. I am looking forward to read about your trendy life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
102
+ <br>
103
+ <p><span class="badge">1</span> Comment:</p><br>
104
+ <div class="row">
105
+ <div class="col-sm-2 text-center">
106
+ <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
107
+ </div>
108
+ <div class="col-xs-10">
109
+ <h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4>
110
+ <p>Me too! WOW!</p>
111
+ <br>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <footer class="container-fluid">
121
+ <p>Footer Text</p>
122
+ </footer>
123
+
124
+ </body>
125
+ </html>