-
Notifications
You must be signed in to change notification settings - Fork 0
/
domino.html
2840 lines (2487 loc) · 115 KB
/
domino.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
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
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Domino: A Case Study</title>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.7.0/css/tachyons.min.css"/>
<link rel="stylesheet" href="http://unpkg.com/tachyons-flexbox@2.1.0/css/tachyons-flexbox.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="…">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
@font-face {
font-family: 'Circular-Book';
src: url('/tf/lineto-circular-book.woff') format('woff'), /* Pretty Modern Browsers */
url('/tf/lineto-circular-book.woff2') format('woff2'), /* Pretty Modern Browsers */
url('/tf/lineto-circular-book.ttf') format('truetype'), /* Safari, Android, iOS */
url('/tf/lineto-circular-book.eot') format('truetype'), /* IE9 */
}
a {
color: inherit;
text-decoration: none;
}
html, body {
height: 100%;
width: 100%;
}
* {
font-family: 'Circular-Book', 'Helvetica Neue', sans-serif;
font-weight: 400;
}
.font-book {
font-family: 'Circular-Book', 'Helvetica Neue', sans-serif;
font-weight: 400;
}
.font-mono {
font-family: 'Space Mono', monospace;
font-weight: 400;
}
.f-statement {
font-size: 40rem;
}
@media screen and (max-width: 500px) {
.f-statement {
font-size: 28rem;
}
}
.domino-blue {
color: #2659ff;
}
.bg-lighter-red {
background-color: #ff9080;
}
.bg-domino-blue {
background-color: #2659ff;
}
.cs-green {
color: rgba(173, 247, 176, 1);
}
.bg-cs-green {
background-color: rgba(173, 247, 176, 1);
}
.cs-blue {
color: rgba(178, 232, 255, 1);
}
.bg-cs-blue {
background-color: hsla(198, 100%, 93%, 1);
}
.bg-cs-blue:hover {
background-color: hsla(198, 100%, 82%, 1);
}
.cs-red {
color: rgba(255, 178, 178, 1);
}
.bg-cs-red {
background-color: rgba(255, 178, 178, 1);
}
.cs-purple {
color: rgba(215, 178, 255, 1);
}
.bg-cs-purple {
background-color: hsla(268, 100%, 93%, 1);
}
.bg-cs-purple:hover {
background-color: hsla(268, 100%, 82%, 1);
}
.cs-orange {
color: rgba(255, 222, 178, 1);
}
.bg-cs-orange {
background-color: hsla(34, 100%, 93%, 1)
}
.bg-cs-orange:hover {
background-color: hsla(34, 110%, 82%, 1);
}
.bg-dots-red {
background: white;
background-image:
radial-gradient(#e7040f 10%, transparent 0),
radial-gradient(#ff725c 10%, transparent 0);
background-size: 20px 20px;
background-position: 0 0, 15px 15px;
}
.bg-dots-dominoblue {
background: white;
background-image:
radial-gradient(#2659ff 10%, transparent 0),
radial-gradient(#96ccff 10%, transparent 0);
background-size: 20px 20px;
background-position: 0 0, 15px 15px;
}
.bg-dots-header {
background: white;
background-image: radial-gradient(#2659ff 10%, transparent 0),
radial-gradient(hsla(25, 94%, 74%, 1) 10%, transparent 0);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
.bg-dots-header-inverse {
background: white;
background-image: radial-gradient(hsla(25, 100%, 60%, 1) 10%, transparent 0),
radial-gradient(hsla(226, 80%, 70%, 1) 10%, transparent 0);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
.headline-blue {
color: rgb(0, 14, 204);
}
.copy-blue {
color: rgb(31, 40, 173);
}
.copy-orange {
color: hsla(34, 100%, 55%, 1)
}
.copy-dark-pink {
color: hsl(288, 99%, 35%);
}
.copy-turquoise {
color: hsla(175, 80%, 35%, 1);
}
/* Custom Heights */
.min-vh-50 {
min-height: 50vh;
}
.mheight1 { max-height: 1rem; }
.mheight2 { max-height: 2rem; }
.mheight3 { max-height: 4rem; }
.mheight4 { max-height: 8rem; }
.mheight5 { max-height: 16rem; }
.mheight5p5 { max-height: 24rem; }
.mheight6 { max-height: 32rem; }
.mheight7 { max-height: 48rem; }
.mheight8 { max-height: 64rem; }
.mheight9 { max-height: 96rem; }
@media (--breakpoint-not-small) {
.mheight1-ns { max-height: 1rem; }
.mheight2-ns { max-height: 2rem; }
.mheight3-ns { max-height: 4rem; }
.mheight4-ns { max-height: 8rem; }
.mheight5-ns { max-height: 16rem; }
.mheight5p5-ns { max-height: 24rem; }
.mheight6-ns { max-height: 32rem; }
.mheight7-ns { max-height: 48rem; }
.mheight8-ns { max-height: 64rem; }
.mheight9-ns { max-height: 96rem; }
}
.lh-copy {
line-height: 180%;
}
.lh-list {
line-height: 220%;
}
.f10rem {
font-size: 10rem;
}
.arrow-down {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid #f00;
}
.arrow-up-toolstonetwork {
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 24px solid hsla(175, 80%, 35%, 1);
}
.w300px {
width: 300px;
}
.mw5p5 {
max-width: 24rem;
}
.z--9 {
z-index: -9;
}
.z-9 {
z-index: 9;
}
.z-99 {
z-index: 99;
}
.z-999 {
z-index: 999;
}
.line-through-red {
text-decoration: line-through;
text-decoration-color: rgb(255, 65, 54);
}
/* Negative Rotations */
.rotate--4 {
transform: rotate(-4deg);
}
.rotate--6 {
transform: rotate(-6deg);
}
.rotate--8 {
transform: rotate(-8deg);
}
.rotate--10 {
transform: rotate(-10deg);
}
.rotate--12 {
transform: rotate(-12deg);
}
.rotate--16 {
transform: rotate(-16deg);
}
.rotate--18 {
transform: rotate(-18deg);
}
.rotate--20 {
transform: rotate(-20deg);
}
.rotate--45 {
transform: rotate(-45deg);
}
.rotate--90 {
transform: rotate(-90deg);
}
.rotate--180 {
transform: rotate(-180deg);
}
.rotate--240 {
transform: rotate(-240deg);
}
/* Positive Rotations */
.rotate-4 {
transform: rotate(4deg);
}
.rotate-6 {
transform: rotate(6deg);
}
.rotate-8 {
transform: rotate(8deg);
}
.rotate-10 {
transform: rotate(10deg);
}
.rotate-20 {
transform: rotate(20deg);
}
.rotate-45 {
transform: rotate(45deg);
}
.rotate-50 {
transform: rotate(50deg);
}
.rotate-90 {
transform: rotate(90deg);
}
.rotate-180 {
transform: rotate(180deg);
}
.rotate-240 {
transform: rotate(240deg);
}
.hover-reveal {
transition: 0.25s linear;
}
.hover-reveal:hover {
z-index: 999999;
}
.action-close:hover .close-reveal {
display: inline-block !important;
z-index: 9999999;
}
.active {
display: inline-block;
opacity: 100;
}
.flowRight {
animation: flowRight 1s linear infinite;
}
.fadeIn {
animation: fadeInLeft 0.25s linear forwards;
}
.fadeInLeft {
animation: fadeInLeft 0.25s linear forwards;
}
.fadeInRight {
animation: fadeInRight 0.25s linear forwards;
}
.fadeOut {
animation: fadeOut 0.25s linear forwards;
}
@media screen and (min-width: 30em) {
.headline-ns {
left: 0%; top: 50%;
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
}
.headline {
left: 0%; top: -20%;
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
-webkit-transform: translateY(60%);
transform: translateY(-80%)
}
.scrolling-wrapper {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-ms-overflow-style: none; // IE 10+
overflow: -moz-scrollbars-none; // Firefox
-webkit-scrollbar: none;
}
.invisible-scrollbar::-webkit-scrollbar {
display: none;
}
.card {
display: inline-block;
}
.triangle-down-left {
width: 100%;
height: 0;
padding-bottom: 100vh;
overflow: hidden;
}
.triangle-down-left:after {
content: "";
display: block;
width: 0;
height: 0;
border-right: 800px solid transparent;
border-bottom: 100vh solid rgba(255, 178, 178, 1);
z-index: -99;
}
.triangle-3 {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid #f8f8f8;
}
@keyframes flowRight {
0% { transform: translate(0%, 0); }
50% { transform: translate(20%, 0); }
75% { transform: translate(15%, 0); }
100% { transform: translate(0%, 0); }
}
.marquee {
width: 100%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee h4 {
display: inline-block;
padding-left: 100%;
animation: marquee 60s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
@keyframes fadeInLeft {
0% { transform: translate(0, 0); opacity: 0; }
50% { transform: translate(1%, 0%); opacity: 0.5; }
100% { transform: translate(3%, 0%); opacity: 1; }
}
@keyframes fadeInRight {
0% { transform: translate(0, 0); opacity: 0; }
50% { transform: translate(-1%, 0%); opacity: 0.5; }
100% { transform: translate(-3%, 0%); opacity: 1; }
}
@keyframes fadeOut {
0% { transform: translate(3%, 0); opacity: 1; }
50% { transform: translate(1%, 0%); opacity: 0.5; }
100% { transform: translate(0%, 0%); opacity: 0; display: none; }
}
.rotate {
-webkit-animation: rotation 10s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
</style>
</head>
<body class="bg-white relative">
<main>
<nav>
<ul class="fixed dib w-100 font-book z-9999 pl0">
<li class="dib fr-ns fn f6 headline-blue br1 mh2-ns mh1 mv1 ba bw1 headline-blue bg-white">
<span class="dib fl br bw1 b--black bg-cs-orange pa3-ns ph1 pv3"></span>
<h4 class="dib mv0 pa2 ph3-ns ph2 bg-white">Strategies</h4>
</li>
<li class="dib relative fr-ns fn f6 bg-white headline-blue br1 mh2-ns mh1 mv1 ba bw1 headline-blue">
<span class="dib fl br bw1 b--black bg-cs-purple pa3-ns ph1 pv3"></span>
<h4 class="dib mv0 pa2 ph3-ns ph2 bg-white-ns">Concepts</h4>
</li>
<li class="dib relative fr-ns fn f6 bg-white headline-blue br1 mh2-ns mh1 mv1 ba bw1 headline-blue">
<span class="dib fl br bw1 b--black bg-cs-blue pa3-ns ph1 pv3"></span>
<h4 class="dib mv0 pa2 ph3-ns ph2 bg-white">Lessons</h4>
</li>
<li class="dib fr-ns fl f6 bg-white headline-blue br1 mh2 mv1 ba b--white headline-blue">
<h4 class="dib mv0 pa2 ph3-ns ph2">KEY</h4>
</li>
</ul>
</nav>
<div class="relative dib w-100 h-100">
<div class="dib relative items-center justify-center w-100 h-50 pt5 pa4 bg-dots-header">
<div class="dib w-100 relative tc">
<div class="dib relative w-100 tc mb3-ns">
<div class="dib tl">
<div class="dib fl">
<div class="dib fl pv2 ph3 relative bw2 z-9 mt2 mt0-ns">
<h3 class="dil f2-ns f3 font-book headline-blue mv0 tl ttu" style="text-shadow: 1px -1px 0px rgba(255, 183, 99, 1);">
Domino
</h3>
</div>
</div>
</div>
</div>
<div class="dib absolute w-100 z-99 mt4 mt0-ns" style="left: 0px;">
<h2 class="dib w-100 f1-ns f2 font-book lh-copy headline-blue mv0 rotate--10">
"Find work through your friends"
</h2>
</div>
<svg class="dib mw6-ns mw5 rotate mt3-ns mt5" viewBox="0 0 1280 1300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>img-jobshare-yinyang</title>
<g id="Canvas" transform="matrix(2 0 0 2 -7286 -8278)">
<g id="img-jobshare-yinyang">
<g id="Group">
<g id="Ellipse 2.2">
<use xlink:href="#path0_fill" transform="translate(3643 4139)" fill="#FAFAFA"/>
<mask id="mask0_outline_ins">
<use xlink:href="#path0_fill" fill="white" transform="translate(3643 4139)"/>
</mask>
<g mask="url(#mask0_outline_ins)">
<use xlink:href="#path1_stroke_2x" transform="translate(3643 4139)"/>
</g>
</g>
<g id="ellipsis">
<use xlink:href="#curve" transform="translate(3963 4139)"/>
</g>
<g id="Polygon">
<use xlink:href="#path4_fill" transform="matrix(0.968269 -0.249909 0.249909 0.968269 3698.34 4463.67)"/>
</g>
<g id="Polygon">
<use xlink:href="#path4_fill" transform="matrix(-0.984355 0.176195 -0.176195 -0.984355 4206.69 4458.61)" fill="#FAFAFA"/>
</g>
<g id="Ellipse">
<use xlink:href="#path5_fill" transform="translate(3810.74 4253)"/>
</g>
<g id="Ellipse">
<use xlink:href="#path6_fill" transform="translate(4038.73 4536.35)" fill="#FAFAFA"/>
</g>
<g id="Line">
<use xlink:href="#path7_stroke" transform="matrix(0.76919 0.63902 -0.63902 0.76919 3752.63 4496.64)"/>
</g>
<g id="Line">
<use xlink:href="#path7_stroke" transform="matrix(-0.707107 -0.707107 0.707107 -0.707107 4156.8 4421.16)" fill="#FAFAFA"/>
</g>
</g>
</g>
</g>
<defs>
<path id="path0_fill" d="M 640 324.885C 640 504.315 496.731 649.771 320 649.771C 143.269 649.771 0 504.315 0 324.885C 0 145.456 143.269 0 320 0C 496.731 0 640 145.456 640 324.885Z"/>
<path id="path1_stroke_2x" d="M 639 324.885C 639 503.777 496.165 648.771 320 648.771L 320 650.771C 497.298 650.771 641 504.853 641 324.885L 639 324.885ZM 320 648.771C 143.835 648.771 1 503.777 1 324.885L -1 324.885C -1 504.853 142.702 650.771 320 650.771L 320 648.771ZM 1 324.885C 1 145.994 143.835 1 320 1L 320 -1C 142.702 -1 -1 144.918 -1 324.885L 1 324.885ZM 320 1C 496.165 1 639 145.994 639 324.885L 641 324.885C 641 144.918 497.298 -1 320 -1L 320 1Z"/>
<path id="curve" d="M 0 649.771C 176.731 649.771 320 504.315 320 324.885C 320 145.456 176.731 0 0 0L 0 649.771Z"/>
<path id="path3_stroke_2x" d="M 0 649.771L -1 649.771L -1 650.771L 0 650.771L 0 649.771ZM 0 0L 0 -1L -1 -1L -1 0L 0 0ZM 319 324.885C 319 503.777 176.165 648.771 0 648.771L 0 650.771C 177.298 650.771 321 504.853 321 324.885L 319 324.885ZM 0 1C 176.165 1 319 145.994 319 324.885L 321 324.885C 321 144.918 177.298 -1 0 -1L 0 1ZM -1 0L -1 649.771L 1 649.771L 1 0L -1 0Z"/>
<path id="path4_fill" d="M 43.9695 0L 82.0481 47.6336L 5.89079 47.6336L 43.9695 0Z"/>
<path id="path5_fill" d="M 79.7964 64.3257C 79.7964 99.8518 61.9334 128.651 39.8982 128.651C 17.863 128.651 0 99.8518 0 64.3257C 0 28.7996 17.863 0 39.8982 0C 61.9334 0 79.7964 28.7996 79.7964 64.3257Z"/>
<path id="path6_fill" d="M 80 64.3257C 80 99.8518 62.0914 128.651 40 128.651C 17.9086 128.651 0 99.8518 0 64.3257C 0 28.7996 17.9086 0 40 0C 62.0914 0 80 28.7996 80 64.3257Z"/>
<path id="path7_stroke" d="M 0 0C -4.27039 4.2147 -4.26829 4.21683 -4.26601 4.21915C -4.26499 4.22017 -4.26251 4.22268 -4.26048 4.22473C -4.25769 4.22754 -4.25159 4.2337 -4.24601 4.23931C -4.23742 4.24795 -4.22064 4.26478 -4.20343 4.28197C -4.17418 4.31117 -4.12234 4.36266 -4.06377 4.4203C -3.9571 4.52521 -3.78051 4.6971 -3.56711 4.90083C -3.16185 5.28737 -2.51845 5.8881 -1.7097 6.61184C -0.137745 8.01711 2.29912 10.0964 5.41972 12.5095C 11.5597 17.25 20.9485 23.7143 33.0062 29.9976C 56.8713 42.3895 92.9405 54.7382 138.627 53.7281L 138.337 41.7316C 94.7796 42.8799 61.6075 31.3637 38.5426 19.3511C 27.1353 13.4321 18.637 7.55921 12.7559 3.01316C 9.86607 0.782915 7.75902 -1.01844 6.28967 -2.333C 5.57777 -2.96917 5.07618 -3.43816 4.71661 -3.78134C 4.5476 -3.94249 4.43681 -4.05047 4.35171 -4.13421C 4.3144 -4.17089 4.29425 -4.19092 4.27549 -4.20967C 4.26868 -4.21645 4.26746 -4.21769 4.26403 -4.22114C 4.2636 -4.22157 4.26477 -4.2204 4.26499 -4.22018C 4.26551 -4.21964 4.26687 -4.21827 4.26713 -4.21801C 4.26867 -4.21645 4.27039 -4.2147 0 0ZM 138.627 53.7281C 184.179 52.5538 219.641 40.2393 243.034 28.4084C 254.853 22.4125 263.999 16.3809 269.971 11.9858C 273.008 9.74786 275.374 7.82982 276.898 6.53697C 277.682 5.87049 278.307 5.31761 278.7 4.96274C 278.907 4.77533 279.079 4.61681 279.182 4.52043C 279.239 4.46727 279.29 4.41953 279.318 4.39262C 279.335 4.37669 279.352 4.36096 279.36 4.35295C 279.366 4.34771 279.372 4.34191 279.374 4.33929C 279.376 4.33736 279.379 4.33498 279.38 4.33401C 279.382 4.33181 279.384 4.32978 275.231 0C 271.077 -4.32978 271.079 -4.33146 271.08 -4.33297C 271.081 -4.33324 271.082 -4.33458 271.083 -4.33513C 271.083 -4.33527 271.084 -4.33663 271.084 -4.33635C 271.081 -4.33332 271.08 -4.33253 271.074 -4.32655C 271.056 -4.30963 271.037 -4.29197 271.001 -4.25884C 270.92 -4.18264 270.814 -4.085 270.651 -3.9381C 270.304 -3.62437 269.821 -3.19606 269.133 -2.61223C 267.71 -1.40447 265.668 0.254628 262.856 2.32278C 257.133 6.5397 248.825 12.0359 237.613 17.7027C 214.943 29.1972 182.031 40.7476 138.337 41.7316L 138.627 53.7281Z"/>
</defs>
</svg>
<div class="dib ba bw2 tc ph3 copy-blue br-pill ma3 ma0-ns bg-white">
<h4 class="dib f3 tl font-book lh-copy copy-blue mv0">
Draft
</h4>
</div>
</div>
</div>
<div class="dib w-100 h-50 bg-dots-header-inverse">
</div>
</div>
<div class="dib tc w-100 min-vh-50 bg-white tc pa4-ns pa2">
<div class="dib w-100">
<div class="dib w-100 mw6 tl mt2">
<h4 class="dib tl f4 font-book lh-copy copy-blue mv3">
<span class="dib f2 pl0 pa2 rotate--4">Domino</span> was an audacious attempt to improve how freelancers found great work, predicated on a totally new marketplace model:
</h4>
<h4 class="dib tl f4 font-book lh-copy copy-blue mv3">
<span class="bb bw2 pb1">Combine</span> <span class="bb bw2 pb1">a</span> <span class="bb bw2 pb1">marketplace</span> <span class="bb bw2 pb1">with</span> <span class="bb bw2 pb1">a</span> <span class="bb bw2 pb1">social</span> <span class="bb bw2 pb1">network</span>, and let jobs move through networks of trusted friends & colleagues.
</h4>
<h4 class="dib tl f4 font-book lh-copy copy-blue mv3">
The idea was simple. Finding it, then building it was anything but.
</h4>
<h4 class="dib tl f4 font-book lh-copy copy-blue mv3">
This led us on a wild 3 year journey, deep into the systemic problems of freelancing, online marketplace mechanics & sociology.
</h4>
</div>
</div>
<div class="dib w-100">
<div class="dib w-100 mw6 tl mt4">
<h4 class="dib tl f4 font-book lh-copy copy-blue mv0">
</h4>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex self-center relative tc items-center br1 justify-center w-100 min-vh-100 bg-domino-blue tc pa6 mt4">
<div class="flex relative mt3 z-9">
<h1 class="dib relative f1 font-book lh-copy near-white mv0 z-9 bb bw3 b--white">
Research
<h1 class="dib f-statement absolute font-book lh-copy headline-blue mv0 z--9"
style="
left: -5%; top: 50%;
-webkit-transform: translateX(-10%);
transform: translateX(-10%); -webkit-transform: translateY(-50%);
transform: translateY(-50%)">
1
</h1>
</h1>
</div>
</div>
</div>
<div class="dib relative tc w-100 min-vh-50 bg-white tc pa4-ns pa2 mt3">
<div class="dib relative w-100 mt3">
<h5 class="dib w-100 f5 headline-blue font-book mv3">1.0</h5>
<h2 class="dib f2 font-book lh-copy headline-blue mv0">
Starting with the problem
</h2>
</div>
<div class="dib relative w-100 mw6 tl">
<h4 class="dib tl f4 font-book lh-copy copy-blue">
As former freelancers, we had first-hand experience with the common problems that new freelancers face. The barriers to entry for freelancing are just too high. Most new freelancers, seeking economic agency, end up worse off than before.
</h4>
<h4 class="dib tl f4 font-book lh-copy copy-blue">
Wanting to move beyond our own personal anecdotes, we began towards the end of 2014 by <!--<a class="parent-co--pricefloor bg-cs-orange ph2 br1 pb1 pointer ">-->interviewing over 100 freelancers to learn their challenges & work habits.</h4>
</div>
<div class="relative scrolling-wrapper invisible-scrollbar flex w-auto mv4 copy-blue ">
<div class="flex justify-center items-center absolute tc ba bw2 ph3 pv3 bg-domino-blue copy-blue z-99">
<h4 class="dib f4 font-book near-white mv0">
Scroll
</h4>
<div class="flex triangle-3 ml3 flowRight">
</div>
</div>
<div class="card relative flex pa4 ph6 copy-blue bw2 br0 mh3 z-9 bg-dots-dominoblue ba bw2 copy-blue">
<div class="dib absolute bg-dots-red w-100 z--9 o-25" style="height: 64%; left: 0px; bottom: 0px;"></div>
<h1 class="dib f1 f10rem f1 w-100 tc font-mono lh-copy red mv0 z-999">64%</h1>
<h4 class="dib fl f3-ns f4 tc font-mono lh-copy copy-blue z-99 pa2 bg-white">Struggle to find work.</h4>
</div>
<div class="card relative flex pa4 copy-blue bw2 br0 mh3 z-9 bg-dots-dominoblue ba bw2 copy-blue">
<div class="dib absolute bg-dots-red w-100 z--9 o-25" style="height: 57%; left: 0px; bottom: 0px;"></div>
<h1 class="dib w-100 f-headline tc font-mono lh-copy red mv0 z-999" style="font-size: 10rem;">54%</h1>
<h4 class="dib w-100 fl f3-ns f4 tc font-mono lh-copy copy-blue z-99 pa2 bg-white">Don't know how to price their work</h4>
</div>
<div class="card tc relative flex pa4 copy-blue bw2 br0 mh3 z-9 bg-dots-dominoblue ba bw2 copy-blue">
<div class="dib absolute bg-dots-red w-100 z--9 o-25" style="height: 53%; left: 0px; bottom: 0px;"></div>
<h1 class="dib w-100 f-headline tc font-mono lh-copy red mv0 z-999" style="font-size: 10rem;">1 in 2</h1>
<h4 class="dib w-100 fl f3-ns f4 tc font-mono lh-copy copy-blue z-99 pa2 bg-white">Suffer from imposter syndrome.</h4>
</div>
<div class="card relative flex pa4 copy-blue bw2 br0 mh3 z-9 bg-dots-dominoblue ba bw2 copy-blue">
<div class="dib absolute bg-dots-red w-100 z--9 o-25" style="height: 45%; left: 0px; bottom: 0px;"></div>
<h1 class="dib w-100 f-headline tc font-mono lh-copy red mv0 z-999" style="font-size: 10rem;">43%</h1>
<h4 class="dib fl f3-ns f4 tc font-mono lh-copy copy-blue z-99 pa2 bg-white">Don't know basic accounting</h4>
</div>
<div class="card relative flex pa4 copy-blue bw2 br0 mh3 z-9 bg-dots-dominoblue ba bw2 copy-bluef">
<div class="dib absolute bg-dots-red w-100 z--9 o-25" style="height: 40%; left: 0px; bottom: 0px;"></div>
<h1 class="dib w-100 f-headline tc font-mono lh-copy red mv0 z-999" style="font-size: 10rem;">41%</h1>
<h4 class="dib fl f3-ns f4 tc font-mono lh-copy copy-blue z-99 pa2 bg-white">Struggle with self-promotion.</h4>
</div>
</div>
</div>
<div class="dib relative tc w-100 min-vh-100 bg-white tc pa4-ns pa2">
<div class="dib relative w-100 mt3 tc">
<h5 class="dib w-100 f5 headline-blue font-book mv3">1.1</h5>
<h2 class="dib w-100 f2 font-book lh-copy headline-blue mv0">
The Root Cause
</h2>
</div>
<div class="dib w-100 relative">
<div class="dib w-100 mw8 tc">
<h4 class="dib mw6 f4 tl font-book lh-copy copy-blue">
The responses were diverse, with freelancers citing <a class="parent-le--commonproblems no-underline bg-cs-blue ph2 br1 pb1 pointer">many <span class="pr1">different</span> <span class="pl1">problems</span></a>. After mapping them out we noticed that the majority are <a class="parent-co--secondorder no-underline bg-cs-purple ph2 br1 pb1 pointer ">second and third order effects</a> from a single source:
</h4>
</div>
<h4 class="dib f2 tc font-book lh-copy copy-blue mv3">
Never learning <span class="bb bw2">how</span> to freelance.
</h4>
</div>
<div class="dn absolute child-container child-le--commonproblems shadow-5 z-999" style="left: 24px; top: 48px;">
<div class="dib relative w300px bg-white ba bw2 b--dark-gray">
<div class="dn w-100 h-100 absolute pointer action-close bg-black">
<div class="flex w-100 h-100 align-center justify-center">
<h4 class="flex self-center f2 near-white rotate--45">
CLOSE
</h4>
</div>
</div>
<div class="dib w-100 pv4 ph3 bg-cs-blue bb bw2 b--dark-gray tc">
<a class="dib pointer">
<div class="absolute action-close bg-light-red h2 w2 ba bw2 b--dark-gray" style="top: -4px; left: -4px;"></div>
</a>
<h3 class="f2 near-black font-book headline-blue tl mv0">
Common Problems
</h3>
</div>
<div class="dib pa3">
<ul class=" fl f4 fw4 font-book dark-gray pa0 mt2 mb0 headline-blue">
<li class="mv2 tl"><span class="dark-gray">Finding work</a></li>
<li class="mv2 tl"><span class="dark-gray">Getting paid</a></li>
<li class="mv2 tl"><span class="dark-gray">Time Management</a></li>
<li class="mv2 tl"><span class="dark-gray">Socializing</a></li>
<li class="mv2 tl"><span class="dark-gray">Self-Promotion</a></li>
<li class="mv2 tl"><span class="dark-gray">Sales & Negotiation</a></li>
<li class="mv2 tl"><span class="dark-gray">Confidence</a></li>
<li class="mv2 tl"><span class="dark-gray">Cashflow Management</a></li>
<li class="mv2 tl"><span class="dark-gray">Communication Skills</a></li>
</ul>
</div>
</div>
</div>
<div class="flex justify-center w-100 h-100 mt5-l mt0">
<div class="dib fl justify-center align-top mw7 mheight7 h-100 w-100 bg-washed-red tl mt2 ba bw2 copy-blue">
<div class="dib relative fl justify-center self-center align-center mw6 mheight6 h-100 w-100 tl bg-lighter-red shadow-5 bw2 copy-blue">
<div class="dib relative fl justify-center self-center align-center mw5p5 mheight5p5 h-100 w-100 tl bg-light-red shadow-5 bw2 copy-blue">
<div class="dib fl w-100 h-100 mw5 mheight5 justify-center self-center align-center tl bg-red shadow-5 bw2 copy-blue">
<div class="flex justify-center items-center self-center align-center mw4 mheight4 h-100 w-100 tl bg-dark-red shadow-5 copy-blue">
<div class="flex pa3 tl self-center self-end b--washed-red">
<h4 class="dib font-book f4 washed-red mv0">
No Knowledge
</h4>
</div>
</div>
<div class="dib w5 tl">
<h4 class="dib font-book tr-ns f3 mv4 ml3 washed-red">
No Confidence
</h4>
</div>
</div>
<div class="dib w5 tl">
<h4 class="font-book f2 tl-ns tc ml3-ns ml0 mv4 mv3 washed-red">
No Promotion
</h4>
</div>
</div>
<div class="dib w5 tl ">
<h4 class="font-book f1 tl ml3 mv4 washed-red">
No Sales
</h4>
</div>
</div>
<div class="dib h-100 w-100 tl-ns tc ml3-ns ml0 mw6 mt5-ns mt0">
<h4 class="font-book f-subheadline mv3 dark-red">
No Work
</h4>
</div>
</div>
</div>
<div class="dib w-100 mw6 tc">
<h4 class="f4 tl font-book lh-copy copy-blue">
They never learnt to freelance? Sure. Most people conflate their principle skills (design, writing, etc.) with their skill at freelancing (i.e. running a small business). It's a costly and time consuming mistake.
</h4>
</div>
<div class="dn absolute child-container child-co--secondorder shadow-5 z-999" style="right: 24px; top: 0px;">
<div class="dib relative w300px bg-white ba bw2 b--dark-gray">
<div class="dn w-100 h-100 absolute pointer action-close testing bg-black">
<div class="flex w-100 h-100 align-center justify-center">
<h4 class="flex self-center f2 near-white rotate--45">
CLOSE
</h4>
</div>
</div>
<div class="dib w-100 pv4 ph3 bg-cs-purple bb bw2 b--dark-gray tc">
<a class="dib pointer">
<div class="absolute action-close bg-light-red h2 w2 ba bw2 b--dark-gray" style="top: -4px; left: -4px;"></div>
</a>
<h3 class="f2 near-black font-book headline-blue tl mv0">
Second & Third Order Effects
</h3>
</div>
<div class="dib pa3 pb5">
<h4 class="f4 mv0 font-book dark-gray lh-copy tl">The deeper, often unexpected effects that manifest in response to the original interaction.</h4>
</div>
<a class="db pointer " target="_blank" href="https://en.wikipedia.org/wiki/Second-order">
<div class="dib absolute ph3 pv2 bw2 b--near-black bg-cs-purple" style="bottom: -4px; right: -4px;">
<h4 class="f4 font-book near-black mv0 headline-blue">Learn More</h4>
</div>
</a>
</div>
</div>
</div>
<div class="dib relative tc w-100 min-vh-100 bg-white tc pa4-ns pa2 ">
<div class="dib w-100 mt3 tc">
<h5 class="dib w-100 f5 headline-blue font-book mv3">1.2</h5>
<h2 class="dib w-100 f2 font-book lh-copy headline-blue mv0">
Learning by Doing
</h2>
</div>
<div class="dn absolute child-container child-co--learnbydoing shadow-5 z-999" style="left: 0px; top: 0px;">
<div class="dib relative w300px bg-white ba bw2 b--dark-gray">
<div class="dn w-100 h-100 absolute pointer action-close bg-black">
<div class="flex w-100 h-100 align-center justify-center">
<h4 class="flex self-center f2 near-white rotate--45">
CLOSE
</h4>
</div>
</div>
<div class="dib w-100 ph4 pv4 bg-cs-purple bb bw2 b--dark-gray tc">
<a class="dib pointer">
<div class="absolute action-close bg-light-red h2 w2 ba bw2 b--dark-gray" style="top: -4px; left: -4px;"></div>
</a>
<h3 class="f2 near-black font-book headline-blue tl mv0">
Experiential Learning
</h3>
</div>
<div class="dib pa3 pb5">
<h4 class="f4 mv0 font-book dark-gray lh-copy tl">
You learnt best by doing. I can try to teach you how to eat an ice cream, but you're not really going to get it until you eat the damn thing yourself.
</h4>
</div>
<a class="db pointer" target="_blank" href="https://en.wikipedia.org/wiki/Experiential_learning">
<div class="dib absolute ph3 pv2 bw2 b--near-black bg-cs-purple" style="bottom: -4px; right: -4px;">
<h4 class="f4 font-book near-black mv0 headline-blue">Learn More</h4>
</div>
</a>
</a>
</div>
</div>
<div class="dib relative w-100 center">
<div class="dn absolute child-container child-co--incentives shadow-5 z-999" style="right: 0px; top: 0px;">
<div class="dib relative w300px bg-white ba bw2 b--dark-gray">
<div class="dn w-100 h-100 absolute pointer action-close bg-black">
<div class="flex w-100 h-100 align-center justify-center">
<h4 class="flex self-center f2 near-white rotate--45">
CLOSE
</h4>
</div>
</div>
<div class="dib w-100 ph4 pv4 bg-cs-purple bb bw2 b--dark-gray tc">
<a class="dib pointer">
<div class="absolute action-close bg-light-red h2 w2 ba bw2 b--dark-gray" style="top: -4px; left: -4px;"></div>
</a>
<h3 class="f2 near-black font-book headline-blue tl mv0">
Incentives
</h3>
</div>
<div class="dib pa3 pb5">
<h4 class="f4 mv0 font-book dark-gray lh-copy tl">
If you finish reading this case study I'll give you an ice cream. Any flavor!
</h4>
</div>
<a class="db pointer" target="_blank" href="https://en.wikipedia.org/wiki/Incentive">
<div class="dib absolute ph3 pv2 bw2 b--near-black bg-cs-purple" style="bottom: -4px; right: -4px;">
<h4 class="f4 font-book near-black mv0 headline-blue">Learn More</h4>
</div>
</a>
</a>
</div>
</div>
<div class="dn absolute child-container child-st--inversion shadow-5 z-999" style="left: 0px; top: 160px;">
<div class="dib relative w300px bg-white ba bw2 b--dark-gray">
<div class="dn w-100 h-100 absolute pointer action-close bg-black">
<div class="flex w-100 h-100 align-center justify-center">
<h4 class="flex self-center f2 near-white rotate--45">
CLOSE
</h4>
</div>
</div>
<div class="dib w-100 pv4 ph3 bg-cs-orange bb bw2 b--dark-gray tc">
<a class="dib pointer">
<div class="absolute action-close bg-light-red h2 w2 ba bw2 b--dark-gray" style="top: -4px; left: -4px;"></div>
</a>
<h3 class="f2 near-black font-book headline-blue tl mv0">
Inversion
</h3>
</div>
<div class="dib pa3 pb5">
<h4 class="f4 mv0 font-book dark-gray lh-copy tl">Seeking a new perspective by turning the problem inside out. </h4>
</div>
<a class="db pointer" target="_blank" href="https://www.allencheng.com/poor-charlies-almanack-charlie-munger-book-summary-pdf/#Invert_Always_Invert">
<div class="dib absolute ph3 pv2 bw2 b--near-black bg-cs-orange" style="bottom: -4px; right: -4px;">
<h4 class="f4 font-book near-black mv0 headline-blue">Learn More</h4>
</div>
</a>
</div>
</div>
<div class="dib w-100 mw6 tl">
<h4 class="f4 tl font-book lh-copy copy-blue">
While the root cause had been identified, the solution wasn’t to write a book. We <a class="parent-co--learnbydoing bg-cs-purple ph2 pb1 br1 pointer">learn most <span class="pr1">effectively</span><span class="pl1"> through</span> personal experiences</a>. In fact, 61% told us they learnt how to freelance through "trial and error".
</h4>
<h4 class=" f4 tl font-book lh-copy copy-blue">
Well designed systems can also leverage <a class="parent-co--incentives bg-cs-purple ph2 pb1 br1 pointer ">incentives</a> to protect us from our</span> own worst behaviors - an important consideration when freelancers have so little external accountability.
</h4>
<h4 class=" f4 tl font-book lh-copy copy-blue">
<a class="parent-st--inversion bg-cs-orange ph2 pb1 br1 pointer">Inverting</a> our perspective, we asked:
</h4>
</div>
<div class="dib w-100">
<div class="dib w-100 mw7 mv4">
<h3 class="f3 tc font-book lh-copy copy-orange">
"Rather than educating freelancer's to help improve their work prospects, why don't we design a system that improves their work prospects and educates them in the process?"
</h3>
</div>
</div>
<div class="dib w-100 mw6 tl">
<h4 class="f4 tl font-book lh-copy copy-blue">