-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblocks-starter.html
More file actions
431 lines (395 loc) · 29.6 KB
/
Copy pathblocks-starter.html
File metadata and controls
431 lines (395 loc) · 29.6 KB
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
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>Starter website components</title>
<meta name="apple-mobile-web-app-title" content="Page components">
<meta property="og:site_name" content="Blocks Edit">
<meta property="og:type" content="website">
<meta name="description" content="Standard layout components for designing and building web pages.">
<meta name="author" content="Blocks Edit">
<link rel="canonical" href="https://blocksedit.com/starter-page-components/">
<link rel="apple-touch-icon" href="appicon.png">
<link rel="icon" href="favicon.ico">
<meta property="og:image" content="">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="main">
<a href="#"><img src="logo.png" width="75" height="35" class="logo" alt=""></a>
<nav class="primary">
<ul>
<li class="block-region block-remove" data-group="mainnav-1"><a href="#" class="block-edit" data-block="mainnav-item-1">About</a></li>
<li class="block-region block-repeat" data-group="mainnav-2">
<a href="#" class="block-edit" data-block="mainnav-item-2">Features</a>
<ul>
<li class="block-region block-remove" data-group="subnav-1"><a href="#" class="block-edit" data-block="subnav-item-1">Tools</a></li>
<li class="block-region block-remove" data-group="subnav-2"><a href="#" class="block-edit" data-block="subnav-item-2">Mobile</a></li>
<li class="block-region block-repeat" data-group="subnav-3"><a href="#" class="block-edit" data-block="subnav-item-3">Devices</a></li>
</ul>
</li>
<li class="block-region block-repeat" data-group="mainnav-5"><a href="#" class="block-edit" data-block="mainnav-item-3">Pricing</a></li>
</ul>
<svg width="18" height="18" class="menu">
<g>
<path transform="matrix(1,0,0,1,-666.138,-100)" d="M681.092,105.694C681.308,105.694 681.495,105.614 681.654,105.456C681.812,105.297 681.892,105.11 681.892,104.894C681.892,104.67 681.812,104.481 681.654,104.326C681.495,104.171 681.308,104.094 681.092,104.094L669.237,104.094C669.014,104.094 668.825,104.171 668.67,104.326C668.515,104.481 668.438,104.67 668.438,104.894C668.438,105.11 668.515,105.297 668.67,105.456C668.825,105.614 669.014,105.694 669.237,105.694L681.092,105.694ZM681.092,109.694C681.308,109.694 681.495,109.614 681.654,109.456C681.812,109.297 681.892,109.11 681.892,108.894C681.892,108.67 681.812,108.481 681.654,108.326C681.495,108.171 681.308,108.094 681.092,108.094L669.237,108.094C669.014,108.094 668.825,108.171 668.67,108.326C668.515,108.481 668.438,108.67 668.438,108.894C668.438,109.11 668.515,109.297 668.67,109.456C668.825,109.614 669.014,109.694 669.237,109.694L681.092,109.694ZM681.092,113.694C681.308,113.694 681.495,113.614 681.654,113.456C681.812,113.297 681.892,113.11 681.892,112.894C681.892,112.67 681.812,112.481 681.654,112.326C681.495,112.171 681.308,112.094 681.092,112.094L669.237,112.094C669.014,112.094 668.825,112.171 668.67,112.326C668.515,112.481 668.438,112.67 668.438,112.894C668.438,113.11 668.515,113.297 668.67,113.456C668.825,113.614 669.014,113.694 669.237,113.694L681.092,113.694Z"></path>
</g>
</svg>
<svg width="18" height="18" class="close">
<g id="be-symbol-delete">
<path transform="matrix(1,0,0,1,-470,-50)" d="M485.112,66C485.228,66 485.342,65.979 485.453,65.937C485.564,65.894 485.662,65.831 485.746,65.746C485.831,65.662 485.894,65.564 485.937,65.453C485.979,65.342 486,65.228 486,65.112C486,64.996 485.979,64.885 485.937,64.779C485.894,64.673 485.831,64.578 485.746,64.494L480.245,59.008L485.746,53.506C485.831,53.422 485.894,53.327 485.937,53.221C485.979,53.115 486,53.004 486,52.888C486,52.772 485.979,52.658 485.937,52.547C485.894,52.436 485.831,52.338 485.746,52.254C485.662,52.18 485.564,52.119 485.453,52.071C485.342,52.024 485.228,52 485.112,52C484.996,52 484.885,52.024 484.779,52.071C484.673,52.119 484.578,52.18 484.494,52.254L479.008,57.755L473.506,52.254C473.422,52.18 473.327,52.119 473.221,52.071C473.115,52.024 473.004,52 472.888,52C472.772,52 472.658,52.024 472.547,52.071C472.436,52.119 472.344,52.18 472.27,52.254C472.185,52.338 472.119,52.436 472.071,52.547C472.024,52.658 472,52.772 472,52.888C472,53.004 472.024,53.115 472.071,53.221C472.119,53.327 472.185,53.422 472.27,53.506L477.755,59.008L472.27,64.494C472.185,64.578 472.119,64.673 472.071,64.779C472.024,64.885 472,64.996 472,65.112C472,65.228 472.024,65.342 472.071,65.453C472.119,65.564 472.185,65.662 472.27,65.746C472.344,65.831 472.436,65.894 472.547,65.937C472.658,65.979 472.772,66 472.888,66C473.004,66 473.115,65.979 473.221,65.937C473.327,65.894 473.422,65.831 473.506,65.746L479.008,60.245L484.494,65.746C484.578,65.831 484.673,65.894 484.779,65.937C484.885,65.979 484.996,66 485.112,66Z"></path>
</g>
</svg>
</nav>
</div>
<nav class="cta right-align secondary">
<ul>
<li><a href="#" class="block-edit" data-block="mainnav-cta-1">Sign In</a></li>
<li><a href="#" class="btn block-edit" data-block="mainnav-cta-2">Sign Up</a></li>
</ul>
</nav>
</header>
<!-- Content -->
<main class="container">
<!-- Content elements -->
<h1 class="block-component block-edit" data-group="content-h1" data-block="content-h1-text" data-title="Content H1">A better way to run your business</h1>
<h2 class="block-component block-edit" data-group="content-h2" data-block="content-h2-text" data-title="Content H2">Tool available</h2>
<h3 class="block-component block-edit" data-group="content-h3" data-block="content-h3-text" data-title="Content H3">Help docs</h3>
<p class="block-component block-edit" data-group="content-description" data-block="content-description-text" data-title="Content paragraph">Running your business can get complicated but it doesn't have to! It requires focusing on basic principles and the core of what makes you and your product or service unique. We'll help you with that focus.</p>
<img src="photo-new-2000.jpg" srcset="photo-new-1200.jpg 1200w, photo-new-2000.jpg 2000w, photo-new-2400.jpg 2400w" width="100%" class="border fill block-component block-edit" data-group="content-image" data-block="content-image-image" data-title="Content image" alt="">
<a href="#" class="btn block-component block-edit" data-group="content-cta" data-block="content-cta-text" data-title="Main button">Get started</a>
<a href="#" class="btn btn-alt block-component block-edit" data-group="content-cta-alt" data-block="content-cta-alt-text" data-title="Alt button">More info</a>
<!-- Feature content - single-column -->
<section class="row block-section" data-group="feature-single" data-title="Single-column feature content">
<div class="col-12">
<img src="photo-new-2000.jpg" srcset="photo-new-1200.jpg 1200w, photo-new-2000.jpg 2000w, photo-new-2400.jpg 2400w" width="100%" class="border fill block-edit block-remove" data-block="feature-single-image" alt="">
<h1 class="block-edit block-remove" data-block="feature-single-title">A better way to run your business</h1>
<p class="block-edit block-remove" data-block="feature-single-description">Running your business can get complicated but it doesn't have to! It requires focusing on basic principles and the core of what makes you and your product or service unique. We'll help you with that focus.</p>
<a href="#" class="btn block-edit block-remove" data-block="feature-single-cta">Get started</a>
</div>
</section>
<!-- Feature content - two-column -->
<section class="row mobile-top block-section" data-group="feature-two" data-title="Two-column feature content">
<div class="col-6" style="align-content: center;">
<h1 class="block-edit" data-block="feature-two-title">A better way to run your business</h1>
<p class="block-edit" data-block="feature-two-description">Running your business can get complicated but it doesn't have to! It requires focusing on basic principles and the core of what makes you and your product or service unique. We'll help you with that focus.</p>
<a href="#" class="btn block-edit" data-block="feature-two-cta">Get started</a>
</div>
<div class="col-6" style="align-content: center;">
<img src="photo-new-tall.jpg" width="100%" class="border fill block-edit" data-block="feature-two-image" alt="">
</div>
</section>
<section class="row mobile-top block-section" data-group="feature-two" data-title="Two-column feature content">
<div class="col-6" style="align-content: center;">
<img src="photo-new-tall.jpg" width="100%" class="border fill block-edit" data-block="feature-two-image" alt="">
</div>
<div class="col-6" style="align-content: center;">
<h1 class="block-edit" data-block="feature-two-title">A better way to run your business</h1>
<p class="block-edit" data-block="feature-two-description">Running your business can get complicated but it doesn't have to! It requires focusing on basic principles and the core of what makes you and your product or service unique. We'll help you with that focus.</p>
<a href="#" class="btn block-edit" data-block="feature-two-cta">Get started</a>
</div>
</section>
<!-- Feature content - three-column -->
<section class="row block-section" data-group="feature-three" data-title="Three-column feature content">
<div class="col-4">
<img src="product-app.jpg" width="100%" class="border fill block-edit" data-block="feature-three-image-1" alt="">
<h2 class="block-edit" data-block="feature-three-title-1">Tool available</h2>
<p class="block-edit" data-block="feature-three-description-1">We've added this feature based on user feedback and research. We also eat our own dog food and have used it with our internal team the last few months as we've fine tuned it!</p>
<a href="#" class="btn btn-alt block-edit" data-block="feature-three-cta-1">More info</a>
</div>
<div class="col-4">
<img src="product-watch-app.jpg" width="100%" class="border fill block-edit" data-block="feature-three-image-2" alt="">
<h2 class="block-edit" data-block="feature-three-title-2">Across devices</h2>
<p class="block-edit" data-block="feature-three-description-2">Either on your desktop, mobile phone, watch, car infotainment system, portable kitchen display, home TV, or fridge monitor, integrated and ready to work for you.</p>
<a href="#" class="btn btn-alt block-edit" data-block="feature-three-cta-2">More info</a>
</div>
<div class="col-4">
<img src="product-tablet-app.jpg" width="100%" class="border fill block-edit" data-block="feature-three-image-3" alt="">
<h2 class="block-edit" data-block="feature-three-title-3">Customize it</h2>
<p class="block-edit" data-block="feature-three-description-3">Our modular system allows for fully customizable options that work around your business needs, your individual preferences, as well as your team's culture and their own habits.</p>
<a href="#" class="btn btn-alt block-edit" data-block="feature-three-cta-3">More info</a>
</div>
</section>
<!-- Feature content - features grid -->
<section class="row block-section" data-group="feature-grid" data-title="Features grid feature content">
<div class="col-12" style="text-align: center;">
<h1 class="block-edit block-remove" data-block="feature-grid-title">A better way to run your business</h1>
<p class="block-edit block-remove" data-block="feature-grid-description">Running your business can get complicated but it doesn't have to! It requires focusing on basic principles and the core of what makes you and your product or service unique. We'll help you with that focus.</p>
</div>
<div class="col-4 box box-small">
<h3 class="block-edit" data-block="feature-grid-title-1">Help docs</h3>
<p class="block-edit" data-block="feature-grid-description-1">Start here to get an overview of the options you have on your dashboard and learn how everything works.</p>
</div>
<div class="col-4 box box-small">
<h3 class="block-edit" data-block="feature-grid-title-2">Tutorial videos</h3>
<p class="block-edit" data-block="feature-grid-description-2">Learn to effectively use all the tools available to you and watch presentations from other users.</p>
</div>
<div class="col-4 box box-small">
<h3 class="block-edit" data-block="feature-grid-title-3">Community forums</h3>
<p class="block-edit" data-block="feature-grid-description-3">Connect with other users, learn and share, and have questions answered by our support team.</p>
</div>
<div class="col-4 box box-small">
<h3 class="block-edit" data-block="feature-grid-title-4">Help docs</h3>
<p class="block-edit" data-block="feature-grid-description-4">Start here to get an overview of the options you have on your dashboard and learn how everything works.</p>
</div>
<div class="col-4 box box-small">
<h3 class="block-edit" data-block="feature-grid-title-5">Tutorial videos</h3>
<p class="block-edit" data-block="feature-grid-description-5">Learn to effectively use all the tools available to you and watch presentations from other users.</p>
</div>
<div class="col-4 box box-small">
<h3 class="block-edit" data-block="feature-grid-title-6">Community forums</h3>
<p class="block-edit" data-block="feature-grid-description-6">Connect with other users, learn and share, and have questions answered by our support team.</p>
</div>
</section>
<!-- Feature content - CTA -->
<section class="block-section box box-large" data-group="feature-cta" data-title="CTA feature content" style="text-align: center;">
<h1 class="block-edit" data-block="feature-cta-title">Give us a try</h1>
<p class="block-edit" data-block="feature-cta-description">With your account is a 30-day trial to use all the features that our tool set has to offer. Enough time to start seeing the effort you put in for your business starting to pay off!</p>
<a href="#" class="btn block-edit" data-block="feature-cta-cta">Get started</a>
</section>
<!-- Feature content - testimonial -->
<section class="block-section" data-group="feature-testimonial" data-title="Testimonial feature content">
<blockquote>
<img src="profile-3.jpg" width="100" alt="" class="avatar">
<p class="block-edit" data-block="feature-testimonial-quote">Running your business can get complicated but it doesn't have to! It requires focusing on basic principles and the core of what makes you and your product or service unique. We'll help you with that focus.</p>
<cite class="block-edit" data-block="feature-testimonial-author">Mariah Perica, CEO, Our Organization</cite>
</blockquote>
</section>
<!-- Article listing -->
<section class="block-section" data-group="article-listing" data-title="Article listing">
<div class="row block-region block-repeat" data-group="article-listing-item">
<div class="col-4" style="align-content: center;">
<img src="product-tablet-app.jpg" width="100%" class="border fill block-edit" data-block="article-listing-image" alt="">
</div>
<div class="col-8" style="align-content: center;">
<h2 class="block-edit" data-block="article-listing-title">Website navigation essentials</h2>
<p class="de-emphasize"><span class="block-edit" data-block="article-listing-date">8/13/2025</span> in <span class="block-edit" data-block="article-listing-category">Tools</span></p>
<p class="block-edit" data-block="article-listing-description">Navigation on a website can take many shapes and forms. These are some standard navigation practices and when to use them to provide the best experience for visitors.</p>
<p class="author de-emphasize">
<img src="profile-5.jpg" width="50" class="avatar block-edit" data-block="article-listing-avatar" alt="">
By <span class="block-edit" data-block="article-listing-author">Jane Wagner</span><br>
<span class="block-edit" data-block="article-listing-role">VP Marketing</span>
</p>
</div>
</div>
</section>
<!-- Product listing grid -->
<section class="row block-section" data-group="product-listing" data-title="Product listing grid">
<div class="col-4 block-region block-remove" data-group="product-listing-item-1">
<img src="product-glasses.jpg" width="100%" class="border fill block-edit" data-block="product-listing-image-1" alt="">
<div class="row">
<div class="col-6">
<h3 class="block-edit" data-block="product-listing-title-1">Sunglasses</h3>
</div>
<div class="col-6 block-edit" data-block="product-listing-price-1" style="text-align: right;">$30</div>
</div>
</div>
<div class="col-4 block-region block-remove" data-group="product-listing-item-2">
<img src="product-banana.jpg" width="100%" class="border fill block-edit" data-block="product-listing-image-2" alt="">
<div class="row">
<div class="col-6">
<h3 class="block-edit" data-block="product-listing-title-2">Banana</h3>
</div>
<div class="col-6 block-edit" data-block="product-listing-price-2" style="text-align: right;">$2</div>
</div>
</div>
<div class="col-4 block-region block-repeat" data-group="product-listing-item">
<img src="product-plant.jpg" width="100%" class="border fill block-edit" data-block="product-listing-image-3" alt="">
<div class="row">
<div class="col-6">
<h3 class="block-edit" data-block="product-listing-title-3">Plant</h3>
</div>
<div class="col-6 block-edit" data-block="product-listing-price-3" style="text-align: right;">$15</div>
</div>
</div>
</section>
<!-- Event listing -->
<section class="block-section" data-group="event-listing" data-title="Event listing">
<div class="row box box-small block-region block-repeat" data-group="event-listing-item" style="margin-bottom: 20px; row-gap: 0;">
<div class="col-2">
<div class="calendar">
<div class="month block-edit" data-block="event-listing-month">October</div>
<div class="day block-edit" data-block="event-listing-day">13</div>
</div>
</div>
<div class="col-7">
<h3 class="block-edit" data-block="event-listing-title">Productivity software and apps</h3>
<p class="block-edit" data-block="event-listing-description">Friday 10am-6pm</p>
</div>
<div class="col-3">
<a href="#" class="btn block-edit" data-block="event-listing-cta">Register</a>
</div>
</div>
</section>
<!-- People listing grid -->
<section class="row block-section" data-group="people-listing" data-title="People listing grid">
<div class="col-3 block-region block-remove" data-group="people-listing-item-1" style="text-align: center;">
<img src="profile-3.jpg" width="150" class="avatar block-edit" data-block="people-listing-avatar-1" alt="">
<h4 class="block-edit" data-block="people-listing-name-1">Mariah Perica</h4>
<span class="block-edit" data-block="people-listing-role-1">CEO</span>
</div>
<div class="col-3 block-region block-remove" data-group="people-listing-item-2" style="text-align: center;">
<img src="profile-2.jpg" width="150" class="avatar block-edit" data-block="people-listing-avatar-2" alt="">
<h4 class="block-edit" data-block="people-listing-name-2">Derick Watts</h4>
<span class="block-edit" data-block="people-listing-role-2">VP Engineering</span>
</div>
<div class="col-3 block-region block-remove" data-group="people-listing-item-3" style="text-align: center;">
<img src="profile-1.jpg" width="150" class="avatar block-edit" data-block="people-listing-avatar-3" alt="">
<h4 class="block-edit" data-block="people-listing-name-3">James Thompson</h4>
<span class="block-edit" data-block="people-listing-role-3">VP Operations</span>
</div>
<div class="col-3 block-region block-repeat" data-group="people-listing-item" style="text-align: center;">
<img src="profile-5.jpg" width="150" class="avatar block-edit" data-block="people-listing-avatar-4" alt="">
<h4 class="block-edit" data-block="people-listing-name-4">Jane Wagner</h4>
<span class="block-edit" data-block="people-listing-role-4">VP Marketing</span>
</div>
</section>
<!-- Article -->
<article class="block-section box box-large" data-group="article" data-title="Article">
<h1 class="block-edit block-remove" data-block="article-h1">Website navigation essentials</h1>
<p class="intro block-edit block-remove" data-block="article-intro">Standard navigation practices for websites and when to use them.</p>
<figure class="block-component" data-group="image-caption-full" data-title="Full image with caption">
<img src="photo-new-2000.jpg" srcset="photo-new-1200.jpg 1200w, photo-new-2000.jpg 2000w, photo-new-2400.jpg 2400w" width="100%" class="border fill block-edit" data-block="image-caption-full-image" alt="">
<figcaption><p class="block-edit" data-block="image-caption-full-caption">Navigation in the real world.</p></figcaption>
</figure>
<figure class="block-component" data-group="image-caption" data-title="Image with caption">
<img src="photo-new-tall.jpg" class="border block-edit" data-block="image-caption-image" alt="">
<figcaption><p class="block-edit" data-block="image-caption-caption">Navigation in the real world.</p></figcaption>
</figure>
<div class="row block-component" data-group="image-caption-grid" data-title="Image with caption grid">
<figure class="col-6">
<img src="product-app.jpg" width="100%" class="border fill block-edit" data-block="image-caption-grid-image-1" alt="">
<figcaption><p class="block-edit" data-block="image-caption-grid-caption-1">On mobile phones.</p></figcaption>
</figure>
<figure class="col-6 block-region block-repeat">
<img src="product-watch-app.jpg" width="100%" class="border fill block-edit" data-block="image-caption-grid-image-2" alt="">
<figcaption><p class="block-edit" data-block="image-caption-grid-caption-2">On a smartwatch.</p></figcaption>
</figure>
</div>
<blockquote class="pullquote block-component" data-group="pull-quote" data-title="Pull quote">
<p class="block-edit" data-block="pull-quote-text">Your information architecture will help determine the best way to organize content based on what visitors are looking for.</p>
</blockquote>
<h2 class="block-edit block-remove" data-block="article-h2">Information architecture</h2>
<p class="block-edit" data-block="article-text">Navigation on a website can take many shapes and forms. Your site’s information architecture will help you determine the best way to organize content based on what your visitors are looking for. And being aware of the different kinds of menus that are available to you can help with deciding on the best experience for them.</p>
<ul class="block-component" data-group="bullet-list" data-title="Bullet list">
<li class="block-edit" data-block="bullet-list-item-1"><strong>Header</strong> - the most common place for your site’s primary navigation</li>
<li class="block-region block-edit block-remove" data-block="bullet-list-item-2"><strong>Sidebar</strong> - works best when the list of submenu items gets long</li>
<li class="block-region block-edit block-repeat" data-block="bullet-list-item-3"><strong>Footer</strong> - similar to the header, with different ways to setup navigation items</li>
</ul>
<div class="row callout block-component" data-group="callout" data-title="Callout" style="row-gap: 0;">
<div class="col-3" style="text-align: center;">
<img src="icon-docs.png" width="120" class="block-edit" data-block="callout-image" alt="">
</div>
<div class="col-9">
<h3 class="block-edit block-remove" data-block="callout-title">Help docs</h3>
<p class="block-edit" data-block="callout-description">Start here to get an overview of the options you have on your dashboard and learn how everything works.</p>
</div>
</div>
<div class="row block-component" data-group="callout-grid" data-title="Callout grid" style="row-gap: 0;">
<div class="col-6 callout">
<img src="icon-tutorials.png" height="120" class="block-edit" data-block="callout-grid-image-1" alt="">
<h3 class="block-edit block-remove" data-block="callout-grid-title-1">Tutorial videos</h3>
<p class="block-edit" data-block="callout-grid-description-1">Learn to effectively use all the tools available to you and watch presentations from other users.</p>
</div>
<div class="col-6 callout">
<img src="icon-forums.png" height="120" class="block-edit" data-block="callout-grid-image-2" alt="">
<h3 class="block-edit block-remove" data-block="callout-grid-title-2">Community forums</h3>
<p class="block-edit" data-block="callout-grid-description-2">Connect with other users, learn and share, and have questions answered by our support team.</p>
</div>
</div>
</article>
<!-- Form -->
<section class="box box-full block-section" data-group="form" data-title="Form container">
<form action="" method="">
<p class="block-edit" data-block="form-intro">Use the form below to contact us.</p>
<div class="row block-region" data-group="form-fields"></div>
<div class="col-12 row block-component" data-group="two-column-text-field-component" data-title="Two-column text fields">
<div class="col-6">
<label for="text-input" class="block-edit" data-block="text-field-label">First name</label>
<input type="text" name="" id="text-input" class="block-edit" data-block="text-field">
</div>
<div class="col-6">
<label for="text-input-2" class="block-edit" data-block="text-field-label-2">Last name</label>
<input type="text" name="" id="text-input-2" class="block-edit" data-block="text-field-2">
</div>
</div>
<div class="col-12 block-component" data-group="text-field-component" data-title="Single text field">
<label for="text-input-3" class="block-edit" data-block="text-field-label">Organization</label>
<input type="text" name="" id="text-input-3" class="block-edit" data-block="text-field-3">
</div>
<div class="col-12 block-component" data-group="email-field-component" data-title="Email field">
<label for="email-input" class="block-edit" data-block="text-field-label">Email address</label>
<input type="email" name="" id="email-input" class="block-edit" data-block="email-field" required>
</div>
<div class="col-12 block-component" data-group="tel-field-component" data-title="Phone number field">
<label for="tel-input" class="block-edit" data-block="text-field-label">Phone number</label>
<input type="tel" name="" id="tel-input" class="block-edit" data-block="tel-field">
</div>
<div class="col-12 block-component" data-group="select-field-component" data-title="Select field">
<label for="select" class="block-edit" data-block="select-field-label">Subject</label>
<select id="select" class="block-edit" data-block="select-field" required>
<option value="">Choose one</option>
<option value="">Issue</option>
<option value="">Request</option>
</select>
</div>
<div class="col-12 block-component" data-group="text-area-component" data-title="Text area field">
<label for="textarea" class="block-edit" data-block="text-area-field-label">Questions/comments</label>
<textarea rows="5" id="textarea" name="" class="block-edit" data-block="text-area-field"></textarea>
</div>
<div class="col-12 block-component" data-group="radio-field-component" data-title="Radio buttons">
<fieldset>
<legend class="block-edit">Receive notifications?</legend>
<ul style="margin-left: 0; list-style: none;">
<li class="block-region block-repeat" data-group="radio-buttons"><input type="radio" name="radio" id="radio" name="" value="Radio" class="block-edit" data-block="radio-field" required> <label for="radio" class="block-edit" data-block="radio-field-label">All notifications</label></li>
</ul>
</fieldset>
</div>
<div class="col-12 block-component" data-group="checkbox-field-component" data-title="Checkboxes">
<fieldset>
<legend class="block-edit">Emails to receive:</legend>
<ul style="margin-left: 0; list-style: none;">
<li class="block-region block-repeat" data-group="checkboxes"><input type="checkbox" name="checkbox" value="Comments" id="checkbox" class="block-edit" data-block="checkbox-field" required> <label for="checkbox" class="block-edit" data-block="checkbox-field-label">Account info and changes</label></li>
</ul>
</fieldset>
</div>
<input type="submit" value="Submit" class="btn block-edit" data-block="submit-button">
</form>
</section>
</main>
<!-- Footer -->
<footer class="container">
<nav class="row">
<div class="col-4">
<h3 class="block-edit" data-block="footernav-group-1">Product</h3>
<ul>
<li class="block-region block-remove" data-group="footernav-1"><a href="#" class="block-edit" data-block="footernav-item-1">Features</a></li>
<li class="block-region block-remove" data-group="footernav-2"><a href="#" class="block-edit" data-block="footernav-item-2">Demo</a></li>
<li class="block-region block-repeat" data-group="footernav-3"><a href="#" class="block-edit" data-block="footernav-item-3">Updates</a></li>
</ul>
</div>
<div class="col-4">
<h3 class="block-edit" data-block="footernav-group-2">Support</h3>
<ul>
<li class="block-region block-remove" data-group="footernav-4"><a href="#" class="block-edit" data-block="footernav-item-4">Documentation</a></li>
<li class="block-region block-remove" data-group="footernav-5"><a href="#" class="block-edit" data-block="footernav-item-5">Help</a></li>
<li class="block-region block-repeat" data-group="footernav-6"><a href="#" class="block-edit" data-block="footernav-item-6">Contact</a></li>
</ul>
</div>
<div class="col-4">
<h3 class="block-edit" data-block="footernav-group-3">Company</h3>
<ul>
<li class="block-region block-remove" data-group="footernav-7"><a href="#" class="block-edit" data-block="footernav-item-7">About</a></li>
<li class="block-region block-remove" data-group="footernav-8"><a href="#" class="block-edit" data-block="footernav-item-8">Blog</a></li>
<li class="block-region block-repeat" data-group="footernav-9"><a href="#" class="block-edit" data-block="footernav-item-9">Legal</a></li>
</ul>
</div>
</nav>
</footer>
<script src="functions.js"></script>
</body>
</html>