/
blocks-starter.html
165 lines (146 loc) · 8.66 KB
/
blocks-starter.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
<!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 page template</title>
<meta name="apple-mobile-web-app-title" content="Starter">
<meta name="description" content="Standard layout components for designing and building web pages.">
<meta name="author" content="Blocks Edit">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon" href="appicon.png">
<!-- Open Graph -->
<meta property="og:site_name" content="Starter">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:title" content="Starter page template">
<meta property="og:description" content="Standard layout components for designing and building web pages.">
<meta property="og:image" content="">
</head>
<body>
<!-- Header -->
<header class="container row">
<div class="col-3">
<a href="#"><img src="https://fpoimg.com/400x160?text=Logo&bg_color=60bcde&text_color=ffffff" width="200" height="80" class="logo fill block-edit" data-block="logo" alt="400x160 - Logo"></a>
</div>
<div class="col-4 vertical-align">
<p class="block-edit block-remove" data-block="tagline">Tagline description</p>
</div>
<nav class="col-5 vertical-align">
<ul>
<li class="block-edit" data-block="nav-item"><a href="#">Nav item</a></li>
</ul>
</nav>
</header>
<!-- Content -->
<main class="container">
<p class="block-edit">Text copy goes here. Text may also include a <a href="#">link</a>.</p>
<!-- Fluid image -->
<div class="block-component" data-group="content-image" data-title="Fluid image">
<img src="https://fpoimg.com/1920x800?text=Content%20Image&bg_color=60bcde&text_color=ffffff" width="960" height="400" class="fill block-edit" data-block="content-image-image" alt="1920x800 - Content Image">
</div>
<!-- Titles -->
<div class="block-component" data-group="content-h1" data-title="Heading 1">
<h1 class="block-edit" data-block="h1">H1 headline</h1>
</div>
<div class="block-component" data-group="content-h2" data-title="Heading 2">
<h2 class="block-edit" data-block="h2">H2 headline</h2>
</div>
<div class="block-component" data-group="content-h3" data-title="Heading 3">
<h3 class="block-edit" data-block="h3">H3 headline</h3>
</div>
<!-- Text -->
<div class="block-component" data-group="content-text" data-title="Text">
<p class="block-edit" data-block="text">More text copy goes here. It could be as long as you need it to be as there is plenty of room to let it flow!</p>
</div>
<!-- List items -->
<div class="block-component" data-group="content-list" data-title="List items">
<ul>
<li class="block-edit" data-block="list-item">List item</li>
</ul>
</div>
<!-- Button -->
<div class="block-component" data-group="content-button" data-title="Button">
<a href="#" class="btn block-edit" data-block="button">Call to Action</a>
</div>
<!-- Two-column section with left image -->
<section class="row block-section" data-group="two-column" data-title="Two-column with image"">
<div class="col-6">
<img src="https://fpoimg.com/960x400?text=Content%20Image&bg_color=60bcde&text_color=ffffff" width="480" height="200" class="fill block-edit" data-block="two-column-image" alt="960x400 - Content Image">
</div>
<div class="col-6">
<p class="block-edit" data-block="two-column-text">Text next to an image, in a two-colum section, split 50/50.</p>
</div>
</section>
<!-- Two-column section with right image -->
<section class="row block-section" data-group="two-column">
<div class="col-6">
<p class="block-edit" data-block="two-column-text">Text next to an image, in a two-colum section, split 50/50.</p>
</div>
<div class="col-6">
<img src="https://fpoimg.com/960x400?text=Content%20Image&bg_color=60bcde&text_color=ffffff" width="480" height="200" class="fill block-edit" data-block="two-column-image" alt="960x400 - Content Image">
</div>
</section>
<!-- Two-column section with images -->
<section class="row block-section" data-group="two-column-stacked" data-title="Two-column">
<div class="col-6">
<img src="https://fpoimg.com/960x400?text=Content%20Image&bg_color=60bcde&text_color=ffffff" width="480" height="200" class="fill block-edit" data-block="two-column-stacked-image-1" alt="960x400 - Content Image">
<p class="block-edit" data-block="two-column-stacked-text-1">Text under an image, part of a two-column section, split 50/50.</p>
</div>
<div class="col-6">
<img src="https://fpoimg.com/960x400?text=Content%20Image&bg_color=60bcde&text_color=ffffff" width="480" height="200" class="fill block-edit" data-block="two-column-stacked-image-2" alt="960x400 - Content Image">
<p class="block-edit" data-block="two-column-stacked-text-2">Text under an image, part of a two-column section, split 50/50.</p>
</div>
</section>
<!-- Three-column section with images -->
<section class="row block-section" data-group="three-column" data-title="Three-column">
<div class="col-4">
<img src="https://fpoimg.com/640x300?text=Content%20Image&bg_color=60bcde&text_color=ffffff" width="320" height="150" class="fill block-edit" data-block="three-column-image-1" alt="640x300 - Content Image">
<p class="block-edit" data-block="three-column-text-1">Text under an image, part of a three-column section, split into thirds.</p>
</div>
<div class="col-4">
<img src="https://fpoimg.com/640x300?text=Content%20Image&bg_color=60bcde&text_color=ffffff" width="320" height="150" class="fill block-edit" data-block="three-column-image-2" alt="640x300 - Content Image">
<p class="block-edit" data-block="three-column-text-2">Text under an image, part of a three-column section, split into thirds.</p>
</div>
<div class="col-4">
<img src="https://fpoimg.com/640x300?text=Content%20Image&bg_color=60bcde&text_color=ffffff" width="320" height="150" class="fill block-edit" data-block="three-column-image-1" alt="640x300 - Content Image">
<p class="block-edit" data-block="three-column-text-3">Text under an image, part of a three-column section, split into thirds.</p>
</div>
</section>
<!-- Four-column icons section -->
<section class="row icons block-section" data-group="four-column" data-title="Four-column icons">
<div class="col-3">
<img src="https://fpoimg.com/240x240?text=Icon&bg_color=60bcde&text_color=ffffff" width="120" height="120" class="block-edit" data-block="four-column-image-1" alt="240x240 - Icon">
<p class="block-edit" data-block="four-column-text-1">Text with icons</p>
</div>
<div class="col-3">
<img src="https://fpoimg.com/240x240?text=Icon&bg_color=60bcde&text_color=ffffff" width="120" height="120" class="block-edit" data-block="four-column-image-2" alt="240x240 - Icon">
<p class="block-edit" data-block="four-column-text-2">Text with icons</p>
</div>
<div class="col-3">
<img src="https://fpoimg.com/240x240?text=Icon&bg_color=60bcde&text_color=ffffff" width="120" height="120" class="block-edit" data-block="four-column-image-3" alt="240x240 - Icon">
<p class="block-edit" data-block="four-column-text-3">Text with icons</p>
</div>
<div class="col-3">
<img src="https://fpoimg.com/240x240?text=Icon&bg_color=60bcde&text_color=ffffff" width="120" height="120" class="block-edit" data-block="four-column-image-4" alt="240x240 - Icon">
<p class="block-edit" data-block="four-column-text-4">Text with icons</p>
</div>
</section>
<!-- Listings section -->
<section class="row block-section" data-group="listing" data-title="Listings">
<div class="col-4">
<img src="https://fpoimg.com/640x300?text=Content%20Image&bg_color=60bcde&text_color=ffffff" width="320" height="150" class="fill block-edit" data-block="listing-image" alt="640x300 - Content Image">
</div>
<div class="col-8">
<p class="block-edit" data-block="listing-text">Text in a listing section, with an image a third of its width on the left.</p>
</div>
</section>
</main>
<!-- Footer -->
<footer class="container">
<p class="block-edit"><a href="#">Nav item</a></p>
</footer>
</body>
</html>