-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
315 lines (290 loc) · 30 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blocks. Smart contracts, smarter.</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- SEO -->
<meta name="title" content="Blocks.">
<meta name="description" content="An online visual smart contract builder for the Internet Computer.">
<meta name="keywords" content="no-code,low-code,motoko,dfinity,dapp,ethereum,solidity,ide">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta property="og:title" content="Blocks.">
<meta property="og:description" content="An online visual smart contract builder for the Internet Computer.">
<meta property="og:image" content="https://blocks-editor.github.io/resources/img/social_preview.png">
<meta property="og:url" content="https://blocks-editor.github.io">
<meta property="twitter:site" content="@BlocksEditor">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Blocks.">
<meta property="twitter:description" content="An online visual smart contract builder for the Internet Computer.">
<meta property="twitter:image" content="https://blocks-editor.github.io/resources/img/social_preview.png">
<meta property="twitter:image:alt" content="Blocks logo and description">
<!-- Bootstrap CSS only -->
<link href="styles/main.css" rel="stylesheet" />
<!-- ScrollMagic -->
<script src="//unpkg.com/gsap@3.8.0/dist/gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<!-- My ScrollMagic controller/scenes -->
<script src="js/scroll.js"></script>
<!-- Animate css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5WC5TZSE0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Z5WC5TZSE0');
</script>
</head>
<body>
<div id="full-head" class="mostscreen no-animate d-flex flex-lg-row flex-column-reverse justify-content-center align-items-center p-5">
<div class="logo_container px-auto no-animate d-flex flex-row justify-content-center justify-content-lg-start">
<img id="logo_head" class="animate__animated animate__fadeIn animate__delay-2s" src="resources/img/Logo_Gradient_Fallback.png" alt="Blocks Wordmark"/>
</div>
<div id="cta" class="p-3 mx-auto m-lg-0 d-flex flex-column justify-content-center align-items-start">
<div class="archia text-muted lead animate__animated animate__fadeIn delay-2pt5s" style="font-weight: 100;">
An open-source smart contract builder for the Internet Computer.
</div>
<div class="d-flex flex-row align-items-center justify-content-start mt-3 animate__animated animate__fadeIn animate__delay-4s">
<a href="https://blocks-editor.github.io/blocks" class="btn btn-lg btn-gradient">Try online</a>
</div>
<!-- <div class="d-flex flex-row align-items-center justify-content-start mt-3 animate__animated animate__fadeIn animate__delay-3s">-->
<!-- <a href="https://github.com/Blocks-Editor/blocks" class="btn btn-lg btn-gradient">GitHub</a>-->
<!-- </div>-->
</div>
<object id="block_mockup" class="p-3 pt-5 p-lg-5 mt-5 mt-lg-3 m-3 flex-lg-grow-1" type="image/svg+xml" data="resources/img/BlocksMockup_animated.svg"></object>
<object id="arrow" class="animate__animated animate__fadeIn animate__delay-5s" type="image/svg+xml" data="resources/img/arrow_animated.svg" height="160px"></object>
</div>
<div id="slide-1" class="no-animate dark mostscreen gradient-top-border p-3 p-lg-5 d-flex flex-column align-items-start justify-content-start">
<!-- Start arrow SVG -- this must be inline to be triggered by ScrollMagic -->
<svg id="slide-1-xxxx" class="top-decor my-3" viewBox="0 0 1495 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1.5;">
<g id="Xs-and--s" serif:id="Xs and +s" transform="matrix(0.91732,0,0,0.537977,0,0)">
<path width="1629.61" height="228.871" style="fill:none;" d="M0 0 L1629.61 0 L1629.61 228.871 L0 228.871 Z" class="feBVKoDh_0"></path>
<g transform="matrix(0.77084,0,0,1.31438,-136.978,-79.1819)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:20.62px;" class="feBVKoDh_1"></path>
<g transform="matrix(6.12323e-17,-1,1,6.12323e-17,114.317,410.313)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:20.62px;" class="feBVKoDh_2"></path>
</g>
</g>
<g transform="matrix(0.77084,0,0,1.31438,74.0978,-79.1819)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:20.62px;" class="feBVKoDh_3"></path>
<g transform="matrix(6.12323e-17,-1,1,6.12323e-17,114.317,410.313)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:20.62px;" class="feBVKoDh_4"></path>
</g>
</g>
<g transform="matrix(0.77084,0,0,1.31438,285.174,-79.1819)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:20.62px;" class="feBVKoDh_5"></path>
<g transform="matrix(6.12323e-17,-1,1,6.12323e-17,114.317,410.313)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:20.62px;" class="feBVKoDh_6"></path>
</g>
</g>
<g transform="matrix(0.77084,0,0,1.31438,496.25,-79.1819)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:20.62px;" class="feBVKoDh_7"></path>
<g transform="matrix(6.12323e-17,-1,1,6.12323e-17,114.317,410.313)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:20.62px;" class="feBVKoDh_8"></path>
</g>
</g>
<g transform="matrix(0.77084,1.31438,-0.77084,1.31438,821.409,-423.964)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:14.58px;" class="feBVKoDh_9"></path>
<g transform="matrix(6.12323e-17,-1,1,6.12323e-17,114.317,410.313)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:14.58px;" class="feBVKoDh_10"></path>
</g>
</g>
<g transform="matrix(0.77084,1.31438,-0.77084,1.31438,1039.1,-423.964)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:14.58px;" class="feBVKoDh_11"></path>
<g transform="matrix(6.12323e-17,-1,1,6.12323e-17,114.317,410.313)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:14.58px;" class="feBVKoDh_12"></path>
</g>
</g>
<g transform="matrix(0.77084,1.31438,-0.77084,1.31438,1256.8,-423.964)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:14.58px;" class="feBVKoDh_13"></path>
<g transform="matrix(6.12323e-17,-1,1,6.12323e-17,114.317,410.313)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:14.58px;" class="feBVKoDh_14"></path>
</g>
</g>
<g transform="matrix(0.77084,1.31438,-0.77084,1.31438,1474.5,-423.964)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:14.58px;" class="feBVKoDh_15"></path>
<g transform="matrix(6.12323e-17,-1,1,6.12323e-17,114.317,410.313)">
<path d="M189.374,147.998L335.256,147.998" style="fill:none;stroke:rgb(217,217,217);stroke-width:14.58px;" class="feBVKoDh_16"></path>
</g>
</g>
</g>
<style data-made-with="vivus-instant">.feBVKoDh_0{stroke-dasharray:3717 3719;stroke-dashoffset:3718;}.start .feBVKoDh_0{animation:feBVKoDh_draw 500ms ease-out 0ms forwards;}.feBVKoDh_1{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_1{animation:feBVKoDh_draw 500ms ease-out 93ms forwards;}.feBVKoDh_2{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_2{animation:feBVKoDh_draw 500ms ease-out 187ms forwards;}.feBVKoDh_3{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_3{animation:feBVKoDh_draw 500ms ease-out 281ms forwards;}.feBVKoDh_4{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_4{animation:feBVKoDh_draw 500ms ease-out 375ms forwards;}.feBVKoDh_5{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_5{animation:feBVKoDh_draw 500ms ease-out 468ms forwards;}.feBVKoDh_6{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_6{animation:feBVKoDh_draw 500ms ease-out 562ms forwards;}.feBVKoDh_7{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_7{animation:feBVKoDh_draw 500ms ease-out 656ms forwards;}.feBVKoDh_8{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_8{animation:feBVKoDh_draw 500ms ease-out 750ms forwards;}.feBVKoDh_9{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_9{animation:feBVKoDh_draw 500ms ease-out 843ms forwards;}.feBVKoDh_10{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_10{animation:feBVKoDh_draw 500ms ease-out 937ms forwards;}.feBVKoDh_11{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_11{animation:feBVKoDh_draw 500ms ease-out 1031ms forwards;}.feBVKoDh_12{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_12{animation:feBVKoDh_draw 500ms ease-out 1125ms forwards;}.feBVKoDh_13{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_13{animation:feBVKoDh_draw 500ms ease-out 1218ms forwards;}.feBVKoDh_14{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_14{animation:feBVKoDh_draw 500ms ease-out 1312ms forwards;}.feBVKoDh_15{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_15{animation:feBVKoDh_draw 500ms ease-out 1406ms forwards;}.feBVKoDh_16{stroke-dasharray:146 148;stroke-dashoffset:147;}.start .feBVKoDh_16{animation:feBVKoDh_draw 500ms ease-out 1500ms forwards;}@keyframes feBVKoDh_draw{100%{stroke-dashoffset:0;}}@keyframes feBVKoDh_fade{0%{stroke-opacity:1;}93.54838709677419%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style>
</svg>
<!-- End SVG -->
<h2 class="display-4 silka font-weight-light mt-3">Great for <span class="gradient-text d-inline-block">beginners and experts.</span></h2>
<div class="d-flex flex-column-reverse flex-lg-row">
<p class="mt-4 px-5">
Featuring a simple drag-and-drop editor for creating decentralized applications (dapps) on the Internet Computer, the Blocks Editor makes it easy to learn how to write smart contracts.
Experts will recognize the node editor from tools like Blender and Unreal Engine.
</p>
<img src="resources/img/Mockup_macbook.png" id="macbook-mockup" class="mt-5 mx-auto" />
</div>
</div>
<div id="slide-2" class="no-animate mostscreen p-3 p-lg-5 d-flex flex-column align-items-start justify-content-start">
<!-- Start slash SVG -- must be inline for ScrollMagic -->
<svg id="slide-2-slashes" class="top-decor my-3" viewBox="0 0 1495 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1.5;">
<g id="Xs-and--s" serif:id="Xs and +s" transform="matrix(0.91732,0,0,0.537977,0,0)">
<g transform="matrix(1.09013,0,0,1.85882,0,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_0"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,91.8663,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_1"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,183.733,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_2"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,275.599,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_3"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,367.465,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_4"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,459.331,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_5"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,551.198,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_6"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,643.064,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_7"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,734.93,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_8"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,826.797,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_9"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,918.663,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_10"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,1010.53,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_11"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,1102.4,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_12"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,1194.26,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_13"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,1286.13,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_14"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,1377.99,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_15"></path>
</g>
<g transform="matrix(1.09013,0,0,1.85882,1469.86,0)">
<path d="M0,124L66.723,0" style="fill:none;stroke:black;stroke-width:4px;" class="GBIGWael_16"></path>
</g>
</g>
<style data-made-with="vivus-instant">.GBIGWael_0{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_0{animation:GBIGWael_draw 800ms ease-in-out 0ms forwards;}.GBIGWael_1{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_1{animation:GBIGWael_draw 800ms ease-in-out 25ms forwards;}.GBIGWael_2{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_2{animation:GBIGWael_draw 800ms ease-in-out 50ms forwards;}.GBIGWael_3{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_3{animation:GBIGWael_draw 800ms ease-in-out 75ms forwards;}.GBIGWael_4{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_4{animation:GBIGWael_draw 800ms ease-in-out 100ms forwards;}.GBIGWael_5{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_5{animation:GBIGWael_draw 800ms ease-in-out 125ms forwards;}.GBIGWael_6{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_6{animation:GBIGWael_draw 800ms ease-in-out 150ms forwards;}.GBIGWael_7{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_7{animation:GBIGWael_draw 800ms ease-in-out 175ms forwards;}.GBIGWael_8{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_8{animation:GBIGWael_draw 800ms ease-in-out 200ms forwards;}.GBIGWael_9{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_9{animation:GBIGWael_draw 800ms ease-in-out 225ms forwards;}.GBIGWael_10{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_10{animation:GBIGWael_draw 800ms ease-in-out 250ms forwards;}.GBIGWael_11{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_11{animation:GBIGWael_draw 800ms ease-in-out 275ms forwards;}.GBIGWael_12{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_12{animation:GBIGWael_draw 800ms ease-in-out 300ms forwards;}.GBIGWael_13{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_13{animation:GBIGWael_draw 800ms ease-in-out 325ms forwards;}.GBIGWael_14{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_14{animation:GBIGWael_draw 800ms ease-in-out 350ms forwards;}.GBIGWael_15{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_15{animation:GBIGWael_draw 800ms ease-in-out 375ms forwards;}.GBIGWael_16{stroke-dasharray:141 143;stroke-dashoffset:142;}.start .GBIGWael_16{animation:GBIGWael_draw 800ms ease-in-out 400ms forwards;}@keyframes GBIGWael_draw{100%{stroke-dashoffset:0;}}@keyframes GBIGWael_fade{0%{stroke-opacity:1;}92.5925925925926%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style>
</svg>
<!-- End SVG -->
<h2 class="display-4 silka font-weight-light mt-3">Get up to speed <span class="gradient-text d-inline-block">quickly.</span></h2>
<div class="w-100 grid-columns py-3">
<div id="card-1" class="card-ish d-flex flex-column align-items-center justify-content-start s2-tile p-4">
<div class="w-100 text-center display-1 silka font-weight-light gradient-text no-select">1</div>
<!-- <object id="circle_1" type="image/svg+xml" class="pb-4 circle-num" data="resources/img/circle_1_animated.svg"></object>-->
<h4 class="display-6 silka font-weight-light no-select">Learn.</h4>
<div class="pt-2"> Take 5 minutes and walk through our short tutorial that shows you the basics of Blocks and Motoko, the language of the Internet Computer.</div>
</div>
<div id="card-2" class="card-ish d-flex flex-column align-items-center justify-content-start s2-tile p-4">
<div class="w-100 text-center display-1 silka font-weight-light gradient-text no-select">2</div>
<!-- <object id="circle_2" type="image/svg+xml" class="pb-4 circle-num" data="resources/img/circle_2_animated.svg"></object>-->
<h4 class="display-6 silka font-weight-light no-select">Build.</h4>
<div class="pt-2"> Create your smart contract using our one-of-a-kind toolkit. While you're at it, customize the editor to fit your workflow by changing themes or using Learning Mode to view detailed tooltips.</div>
</div>
<div id="card-3" class="card-ish d-flex flex-column align-items-center justify-content-start s2-tile p-4">
<div class="w-100 text-center display-1 silka font-weight-light gradient-text no-select">3</div>
<!-- <object id="circle_3" type="image/svg+xml" class="pb-4 circle-num" data="resources/img/circle_3_animated.svg"></object>-->
<h4 class="display-6 silka font-weight-light no-select">Deploy.</h4>
<div class="pt-2">Take a look at the code you've created! Copy your code or send it directly to Motoko Playground. Explore the Motoko documentation to learn more about how your code works.</div>
</div>
</div>
</div>
<div id="slide-3" class="no-animate dark gradient-top-border mostscreen p-3 p-lg-5 d-flex flex-column align-items-start justify-content-start">
<!-- Start circle SVG -- yeah yeah yeah you get it, I can't wait to switch to Gatsby for this -->
<svg id="slide-3-circles" class="top-decor my-3" viewBox="0 0 1495 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1.5;">
<g id="Xs-and--s" serif:id="Xs and +s" transform="matrix(0.91732,0,0,0.537977,0,0)">
<g transform="matrix(0.957369,0,0,1.63244,16.7613,14.0355)">
<path style="fill:none;stroke:rgb(236,236,236);stroke-width:9.68px;" d="M0,62A62,62 0,1,1 124,62A62,62 0,1,1 0,62" class="BmKogaAy_0"></path>
</g>
<g transform="matrix(0.957369,0,0,1.63244,174.734,14.0355)">
<path style="fill:none;stroke:rgb(236,236,236);stroke-width:9.68px;" d="M0,62A62,62 0,1,1 124,62A62,62 0,1,1 0,62" class="BmKogaAy_1"></path>
</g>
<g transform="matrix(0.957369,0,0,1.63244,332.707,14.0355)">
<path style="fill:none;stroke:rgb(236,236,236);stroke-width:9.68px;" d="M0,62A62,62 0,1,1 124,62A62,62 0,1,1 0,62" class="BmKogaAy_2"></path>
</g>
<g transform="matrix(0.957369,0,0,1.63244,490.68,14.0355)">
<path style="fill:none;stroke:rgb(236,236,236);stroke-width:9.68px;" d="M0,62A62,62 0,1,1 124,62A62,62 0,1,1 0,62" class="BmKogaAy_3"></path>
</g>
<g transform="matrix(0.957369,0,0,1.63244,648.653,14.0355)">
<path style="fill:none;stroke:rgb(236,236,236);stroke-width:9.68px;" d="M0,62A62,62 0,1,1 124,62A62,62 0,1,1 0,62" class="BmKogaAy_4"></path>
</g>
<g transform="matrix(0.957369,0,0,1.63244,806.625,14.0355)">
<path style="fill:none;stroke:rgb(236,236,236);stroke-width:9.68px;" d="M0,62A62,62 0,1,1 124,62A62,62 0,1,1 0,62" class="BmKogaAy_5"></path>
</g>
<g transform="matrix(0.957369,0,0,1.63244,964.598,14.0355)">
<path style="fill:none;stroke:rgb(236,236,236);stroke-width:9.68px;" d="M0,62A62,62 0,1,1 124,62A62,62 0,1,1 0,62" class="BmKogaAy_6"></path>
</g>
<g transform="matrix(0.957369,0,0,1.63244,1122.57,14.0355)">
<path style="fill:none;stroke:rgb(236,236,236);stroke-width:9.68px;" d="M0,62A62,62 0,1,1 124,62A62,62 0,1,1 0,62" class="BmKogaAy_7"></path>
</g>
</g>
<style data-made-with="vivus-instant">.BmKogaAy_0{stroke-dasharray:390 392;stroke-dashoffset:391;}.start .BmKogaAy_0{animation:BmKogaAy_draw 800ms ease-in-out 0ms forwards;}.BmKogaAy_1{stroke-dasharray:390 392;stroke-dashoffset:391;}.start .BmKogaAy_1{animation:BmKogaAy_draw 800ms ease-in-out 57ms forwards;}.BmKogaAy_2{stroke-dasharray:390 392;stroke-dashoffset:391;}.start .BmKogaAy_2{animation:BmKogaAy_draw 800ms ease-in-out 114ms forwards;}.BmKogaAy_3{stroke-dasharray:390 392;stroke-dashoffset:391;}.start .BmKogaAy_3{animation:BmKogaAy_draw 800ms ease-in-out 171ms forwards;}.BmKogaAy_4{stroke-dasharray:390 392;stroke-dashoffset:391;}.start .BmKogaAy_4{animation:BmKogaAy_draw 800ms ease-in-out 228ms forwards;}.BmKogaAy_5{stroke-dasharray:390 392;stroke-dashoffset:391;}.start .BmKogaAy_5{animation:BmKogaAy_draw 800ms ease-in-out 285ms forwards;}.BmKogaAy_6{stroke-dasharray:390 392;stroke-dashoffset:391;}.start .BmKogaAy_6{animation:BmKogaAy_draw 800ms ease-in-out 342ms forwards;}.BmKogaAy_7{stroke-dasharray:390 392;stroke-dashoffset:391;}.start .BmKogaAy_7{animation:BmKogaAy_draw 800ms ease-in-out 400ms forwards;}@keyframes BmKogaAy_draw{100%{stroke-dashoffset:0;}}@keyframes BmKogaAy_fade{0%{stroke-opacity:1;}92.5925925925926%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style>
</svg>
<!-- End SVG -->
<h2 class="display-4 silka font-weight-light mt-3">All this power... <span class="gradient-text d-inline-block">Right from your browser.</span></h2>
<div class="h-100 w-100 px-md-5 d-flex flex-column align-items-center justify-content-center">
<iframe id="inline-editor" class="mt-3 w-100" src="https://blocks-editor.github.io/blocks?familiarity=none" title="In-page Blocks Editor"></iframe>
<a class="btn btn-lg btn-outline-primary mt-4" href="https://blocks-editor.github.io/blocks">GO TO THE FULL EDITOR</a>
</div>
</div>
<div id="slide-4" class="no-animate dark p-3 p-lg-5 d-flex flex-column align-items-start justify-content-start">
<h2 class="display-6 silka font-weight-light mt-3 w-100 text-center mb-4">Join the community!</h2>
<div class="w-100 px-md-5 my-3 d-flex flex-row align-items-center justify-content-around">
<a href="https://github.com/Blocks-Editor/blocks" target="_blank" class="d-flex flex-column align-items-center justify-content-center text-decoration-none text-light clickable p-3">
<object class="social-icon" type="image/svg+xml" data="resources/icons/github.svg"></object>
<small>GitHub</small>
</a>
<a href="https://twitter.com/BlocksEditor" target="_blank" class="d-flex flex-column align-items-center justify-content-center text-decoration-none text-light clickable p-3">
<object class="social-icon" type="image/svg+xml" data="resources/icons/twitter.svg"></object>
<small>Twitter</small>
</a>
<a href="https://discord.gg/jDDWtKwWQf" target="_blank" class="d-flex flex-column align-items-center justify-content-center text-decoration-none text-light clickable p-3">
<object class="social-icon" type="image/svg+xml" data="resources/icons/discord.svg"></object>
<small>Discord</small>
</a>
<a href="https://blocks-editor.medium.com/" target="_blank" class="d-flex flex-column align-items-center justify-content-center text-decoration-none text-light clickable p-3">
<object class="social-icon" type="image/svg+xml" data="resources/icons/medium.svg"></object>
<small>Medium</small>
</a>
</div>
</div>
<div id="footer" class="py-5 px-4 d-flex flex-column align-items-center justify-content-center gradient-top-border">
<a href="https://blocks-editor.github.io/blocks">
<object id="footer-blocks-icon" class="mb-4" data="resources/img/blocks_icon_gray.svg"></object>
</a>
<div class="pb-4 text-muted text-center">
Created by <a href="https://ryanvandersmith.com" target="_blank" class="gradient-text">Ryan Vandersmith</a> and <a href="https://natestgeorge.com" target="_blank" class="gradient-text">Nate St. George</a>
</div>
<div class="pb-4 text-muted text-center">
Embed our editor into your own project with <a class="gradient-text" target="_blank" href="https://www.npmjs.com/package/react-blocks-editor">react-blocks-editor</a>. <br />
Blocks is entirely <a class="gradient-text" target="_blank" href="https://github.com/Blocks-Editor/blocks">open source.</a>
</div>
<div class="d-flex flex-row align-items-center justify-content-center">
<span class="text-muted px-4">Supported by </span>
<a href="https://dfinity.org" target="_blank"><img id="dfinity-logo" src="resources/img/dfinity-logo.png" /></a>
</div>
</div>
</body>
</html>