-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1059 lines (1055 loc) · 45.2 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- font awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous"
/>
<!-- Icons from Materialize -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!--Import Google Icon Font-->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- Compiled and minified CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"
/>
<!-- My CSS style-->
<link rel="stylesheet" href="style.css" />
<title>Patreon</title>
</head>
<body id="home" class="scrollspy">
<header>
<div class="navbar-fixed">
<nav class="white">
<div>
<div class="nav-wrapper">
<a class="brand-logo" href="#home">
<span>
<!--SVG from patreon (logo)-->
<svg class="first-svg" height="22px" viewBox="0 0 569 546">
<title>Patreon logo</title>
<g>
<circle
fill="#F96854"
cx="362.589996"
cy="204.589996"
data-fill="1"
r="204.589996"
></circle>
<rect
fill="#141518"
data-fill="2"
height="545.799988"
width="100"
x="0"
y="0"
></rect>
</g>
</svg>
</span>
</a>
<a
href="#"
data-target="mobile-nav"
class="sidenav-trigger right"
>
<i class="material-icons black-text">menu</i>
<ul class="left hide-on-med-and-down">
<li class="product-top">
<a href="#home">Product</a>
</li>
<li>
<a href="#">For creators</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Resources</a>
</li>
<li>
<a href="#">Starter kits</a>
</li>
</ul>
<ul class="right hide-on-med-and-down">
<li>
<form action="/search" method="GET" role="search">
<input
aria-label="Search"
autocomplete="off"
name="q"
placeholder="Find a creator"
type="search"
/>
</form>
</li>
<li>
<a href="#">Log in</a>
</li>
<li>
<a href="#" class="btn my-button button-first">
<div>Create on Patreon</div>
</a>
</li>
</ul>
</a>
</div>
</div>
</nav>
</div>
<div>
<ul class="sidenav" id="mobile-nav">
<li>
<a href="#home">Product</a>
</li>
<li>
<a href="#">For creators</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Resources</a>
</li>
<li>
<a href="#">Starter kits</a>
</li>
<li>
<a href="#">Create on Patreon</a>
</li>
<li>
<a href="#">Log in</a>
</li>
<li>
<a href="#">Sign up</a>
</li>
</ul>
</div>
</header>
<!-- Start of actual content -->
<!-- Overriding padding top from framework to match original website-->
<section class="section container-whole">
<section class="row white-text dark-class">
<section class="">
<!-- extra padding to div on the left -->
<div class="col s12 m6 l6 header-left-div">
<h1 class="header-h1">The system for creative people is broken</h1>
<p>
It puts algorithms over ideas. Quantity over quality. What’s easy
to sell over what’s good. Money, brands, and just about everything
else over the people who actually create.
</p>
<span>
People say that’s just the way it is. We say, fuck that. Let’s put
<span> creativity over everything. </span>
</span>
<div class="header-btn">
<a href="#" class="btn my-button">
<div>Create on Patreon</div>
</a>
</div>
</div>
<div class="col s12 m6 l6">
<img
class="hide-on-med-and-down responsive-img header-img"
src="./photos/patreon-header.png"
alt="B&W collage of multiple creators patreon"
/>
</div>
</section>
</section>
<section class="container-test">
<section class="row container">
<section>
<div class="testimonial-change">
<div class="col s12 m4 l4 center">
<div class="mia-img">
<img
src="./photos/testimonial-mia.png"
alt="Testimonial picture of a creator from Patreon"
/>
</div>
<div class="m-i-a">M.I.A</div>
<div class="mia-musician">Musician and artist</div>
</div>
<div class="col s12 m8 l8">
<h4>
<strong class="mia-quote">
“I like the idea of Patreon because it's really simple and
it's about bringing things back to artists making art.”
</strong>
</h4>
</div>
</div>
</section>
</section>
</section>
<section class="white-text dark-class patreon-concept">
<section class="row container halfway">
<div class="col s12 m12 l12 center what-is-concept">
<h1>What is Patreon?</h1>
<p>
Patreon helps you build direct relationships with your most
engaged fans. You offer them benefits like exclusive content,
community, or insight into your creative process in exchange for a
monthly subscription.
</p>
</div>
<div class="col s12 m4 l4">
<!--Some more svg code from Patreon-->
<div>
<span class="what-is-icon">
<svg
fill="none"
height="100%"
viewBox="0 0 70 70"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<g
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3.5"
>
<g data-stroke="1">
<path
d="m23.9325 52.4447-8.773 6.5798v-13.1595h-8.773c-2.4226 0-4.3865-1.9639-4.3865-4.3865v-35.092c0-2.4226 1.9639-4.3865 4.3865-4.3865h48.2515c2.4226 0 4.3865 1.9639 4.3865 4.3865v13.1595"
></path>
<path d="m15.1595 15.1593h30.7055"></path>
<path d="m15.1595 28.319h8.773"></path>
</g>
<path
clip-rule="evenodd"
d="m67.7974 54.638h-8.7729v13.1595l-13.1595-13.1595h-13.1595v-26.319h35.0919z"
fill-rule="evenodd"
data-stroke="2"
></path>
<path d="m59.0244 37.0919h-17.5459" data-stroke="2"></path>
<path d="m59.0244 45.8652h-17.5459" data-stroke="2"></path>
</g>
</svg>
</span>
</div>
<div class="concepts">
<h5>Meaningful connections</h5>
<p>
Connect with your audience directly in an ad-free and troll-free
environment. Enjoy healthier, kinder, more meaningful
interactions.
</p>
</div>
</div>
<div class="col s12 m4 l4">
<div>
<span class="what-is-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 65 65"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M30.4687 49.8333C30.1549 57.3802 23.798 63.2527 16.25 62.9687C8.70196 63.2527 2.34511 57.3802 2.03125 49.8333V23.5381C2.15447 20.5179 4.69819 18.1668 7.71875 18.2812H24.7812C27.8018 18.1668 30.3455 20.5179 30.4687 23.5381V49.8333Z "
data-stroke="1"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M2.03125 32.5H30.4687"
data-stroke="1"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M56.875 2.03125L50.7812 12.1875V41.3021C50.9788 44.4754 53.8254 46.6758 57 46.5C60.1746 46.6758 62.7712 44.4754 62.9688 41.3021V12.1875L56.875 2.03125Z"
data-stroke="2"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M16.25 32.5V14.2188C16.25 7.48778 21.7065 2.03125 28.4375 2.03125C31.6698 2.03125 34.7698 3.31529 37.0554 5.60089C39.341 7.88649 40.625 10.9864 40.625 14.2188V52.8125C40.625 57.2998 44.2627 60.9375 48.75 60.9375C53.2373 60.9375 56.875 57.2998 56.875 52.8125V48.5"
data-stroke="1"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M50.7812 38.5938H62.9688"
data-stroke="2"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M50.7812 16.25H62.9688"
data-stroke="2"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</div>
<div class="concepts">
<h5>Creative control</h5>
<p>
Create what you want and what your audience loves. You don’t
have to conform to popular taste or the constraints of ad-based
monetization models.
</p>
</div>
</div>
<div class="col s12 m4 l4">
<div>
<span class="what-is-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 70 73"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.25 12.2726C0.25 10.4777 1.70508 9.02258 3.5 9.02258H66.2975C68.0924 9.02258 69.5475 10.4777 69.5475 12.2726V66.2971C69.5475 68.092 68.0924 69.5471 66.2975 69.5471H3.5C1.70508 69.5471 0.25 68.092 0.25 66.2971V12.2726ZM3.75 12.5226V66.0471H66.0475V12.5226H3.75Z"
data-fill="1"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M67.7975 30.0686H2V26.5686H67.7975V30.0686Z"
data-fill="1"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.5459 0.249878C20.5124 0.249878 21.2959 1.03338 21.2959 1.99988V17.3526C21.2959 18.3191 20.5124 19.1026 19.5459 19.1026C18.5794 19.1026 17.7959 18.3191 17.7959 17.3526V1.99988C17.7959 1.03338 18.5794 0.249878 19.5459 0.249878Z"
data-fill="2"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M50.2515 0.249878C51.218 0.249878 52.0015 1.03338 52.0015 1.99988V17.3526C52.0015 18.3191 51.218 19.1026 50.2515 19.1026C49.285 19.1026 48.5015 18.3191 48.5015 17.3526V1.99988C48.5015 1.03338 49.285 0.249878 50.2515 0.249878Z"
data-fill="2"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.0859 42.4956C10.5142 40.4646 12.4555 38.998 14.713 39C14.7133 39 14.7136 39 14.7139 39L14.7122 40.3303L14.713 39H19.6449C20.4467 39 21.0968 39.5957 21.0968 40.3304C21.0968 41.0652 20.4467 41.6608 19.6449 41.6608L14.7106 41.6608C13.8453 41.6599 13.1012 42.222 12.9371 43.0004C12.773 43.7786 13.2349 44.5541 14.038 44.8487L19.0489 46.6839C21.1404 47.455 22.3418 49.4765 21.914 51.5047C21.4862 53.5329 19.5493 54.9986 17.2948 55H12.366C11.5641 55 10.9141 54.4044 10.9141 53.6696C10.9141 52.9348 11.5641 52.3392 12.366 52.3392H17.2928L17.2938 53.6696V52.3392H17.2928C18.1567 52.3386 18.8989 51.777 19.0629 50.9998C19.2267 50.2229 18.7669 49.4487 17.9662 49.1529L17.968 49.1536L18.5069 47.9182L17.965 49.1524L12.9602 47.3194C10.8638 46.551 9.65763 44.5269 10.0859 42.4956Z"
data-fill="2"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16 37C16.5523 37 17 37.5505 17 38.2295V39.7705C17 40.4495 16.5523 41 16 41C15.4477 41 15 40.4495 15 39.7705V38.2295C15 37.5505 15.4477 37 16 37Z"
data-fill="2"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16 53C16.5523 53 17 53.5505 17 54.2295V55.7705C17 56.4495 16.5523 57 16 57C15.4477 57 15 56.4495 15 55.7705V54.2295C15 53.5505 15.4477 53 16 53Z"
data-fill="2"
></path>
<path
d="M28.9473 48.0137C28.9473 47.8819 28.9385 47.7418 28.921 47.5934C28.921 47.4451 28.921 47.2967 28.921 47.1484C28.921 46.967 28.921 46.794 28.921 46.6291C28.9385 46.4478 28.9473 46.2747 28.9473 46.1099H28.3588C27.7588 46.1099 27.3045 45.5678 27.4094 44.977V44.977C27.4912 44.5167 27.8913 44.1813 28.3588 44.1813H29.1845C29.3426 43.3242 29.5885 42.5247 29.9223 41.783C30.2736 41.0247 30.7216 40.3654 31.2661 39.8049C31.8283 39.2445 32.4871 38.8077 33.2424 38.4945C34.0154 38.1648 34.9025 38 35.9038 38C37.7659 38 39.1449 38.4038 40.0408 39.2115C40.67 39.7679 41.145 40.5119 41.4659 41.4436C41.7207 42.1838 41.1759 42.92 40.4025 43.041V43.041C39.6772 43.1544 39.0181 42.6752 38.6964 42.0153C38.5035 41.6196 38.2753 41.3114 38.0118 41.0907C37.5375 40.6621 36.7997 40.4478 35.7984 40.4478C35.2714 40.4478 34.8059 40.5467 34.4018 40.7445C34.0154 40.9258 33.6728 41.1896 33.3742 41.5357C33.0755 41.8654 32.8296 42.261 32.6364 42.7225C32.4431 43.1676 32.2938 43.6538 32.1884 44.1813H36.2132C36.8184 44.1813 37.274 44.7323 37.1603 45.3268V45.3268C37.0734 45.7812 36.6759 46.1099 36.2132 46.1099H31.9512C31.9337 46.2747 31.9249 46.4396 31.9249 46.6044C31.9249 46.7527 31.9249 46.9176 31.9249 47.0989C31.9249 47.2637 31.9249 47.4203 31.9249 47.5687C31.9249 47.717 31.9337 47.8654 31.9512 48.0137H35.5808C36.186 48.0137 36.6416 48.5648 36.5279 49.1592V49.1592C36.441 49.6137 36.0435 49.9423 35.5808 49.9423H32.1884C32.3816 51.0302 32.7681 51.9121 33.3478 52.5879C33.9275 53.2473 34.7356 53.5769 35.7721 53.5769C36.9315 53.5769 37.7571 53.3297 38.249 52.8352C38.5371 52.5462 38.7662 52.1728 38.9363 51.7152C39.1839 51.0492 39.754 50.511 40.4645 50.511V50.511C41.308 50.511 41.9827 51.2498 41.7497 52.0605C41.4437 53.1252 40.9444 53.9768 40.2516 54.6154C39.2503 55.5385 37.7396 56 35.7194 56C33.8046 56 32.3026 55.4808 31.2134 54.4423C30.1419 53.3874 29.448 51.8874 29.1318 49.9423H28.3588C27.7588 49.9423 27.3045 49.4002 27.4094 48.8094V48.8094C27.4912 48.3491 27.8913 48.0137 28.3588 48.0137H28.9473Z"
data-fill="2"
></path>
<path
d="M47.5798 53.4533C48.1419 52.8434 48.5372 52.217 48.7655 51.5742C48.9939 50.9313 49.1081 50.2143 49.1081 49.4231C49.1081 49.2088 49.0905 49.0027 49.0554 48.8049C49.0378 48.6071 49.0115 48.3681 48.9763 48.0879H48.1127C47.4982 48.0879 47.0001 47.5898 47.0001 46.9753V46.9753C47.0001 46.3608 47.4982 45.8626 48.1127 45.8626H48.6865C48.6162 45.5 48.5547 45.1291 48.502 44.75C48.4493 44.3709 48.423 43.9423 48.423 43.4643C48.423 42.5412 48.5723 41.7418 48.8709 41.0659C49.1696 40.3736 49.5736 39.8049 50.0831 39.3599C50.6101 38.8984 51.2161 38.5604 51.9012 38.3462C52.5864 38.1154 53.3241 38 54.1147 38C55.1511 38 56.0031 38.1236 56.6707 38.3709C57.3558 38.6016 57.9003 38.9148 58.3044 39.3104C58.726 39.706 59.0334 40.1511 59.2266 40.6456C59.2487 40.6974 59.2702 40.7493 59.2912 40.8014C59.5794 41.5173 59.0659 42.2572 58.3042 42.3812L58.139 42.4081C57.5565 42.5029 57.0143 42.1375 56.7497 41.6099V41.6099C56.6092 41.3132 56.4247 41.0742 56.1963 40.8929C55.9855 40.7115 55.722 40.5714 55.4058 40.4725C55.0896 40.3736 54.7031 40.3242 54.2464 40.3242C53.1924 40.3242 52.4282 40.6044 51.9539 41.1648C51.4796 41.7253 51.2425 42.4588 51.2425 43.3654C51.2425 43.6786 51.2513 43.967 51.2688 44.2308C51.2864 44.478 51.3127 44.6923 51.3479 44.8736L51.506 45.8626H56.1377C56.7522 45.8626 57.2504 46.3608 57.2504 46.9753V46.9753C57.2504 47.5898 56.7522 48.0879 56.1377 48.0879H51.8222C51.8397 48.2363 51.8573 48.3764 51.8749 48.5082C51.8925 48.6401 51.9012 48.7637 51.9012 48.8791C51.9012 49.6209 51.8222 50.3626 51.6641 51.1044C51.5235 51.8297 51.1986 52.4973 50.6891 53.1071H58.7004C59.449 53.1071 60.0222 53.7732 59.9106 54.5134V54.5134C59.8204 55.1122 59.3059 55.5549 58.7004 55.5549H47.5534C47.5534 55.2088 47.5534 54.8626 47.5534 54.5165C47.571 54.1538 47.5798 53.7995 47.5798 53.4533Z"
data-fill="2"
></path>
</svg>
</span>
</div>
<div class="concepts">
<h5>Reliable income</h5>
<p>
Generate predictable income from your work through members who
pay you a monthly subscription.
</p>
</div>
</div>
</section>
</section>
<section>
<section class="my-sec-profiles center">
<div class="center">
<h2>Who uses Patreon?</h2>
</div>
<div class="blog-pic-container">
<div class="blog-container-row">
<div class="flexblog">
<div class="ein">
<img
class="blog"
src="./photos/ein-blog.jpg"
alt="Einstürzende Neubauten's profile picture"
/>
<h6 class="center blog-h6">Einstürzende Neubauten</h6>
</div>
</div>
<div class="flexblog">
<div class="mia">
<img
class="blog"
src="./photos/mia-blog.png"
alt="M.I.A's profile picture"
/>
<h6 class="center blog-h6">M.I.A</h6>
</div>
</div>
<div class="flexblog">
<div class="berlin">
<img
class="blog"
src="./photos/berlin-blog.png"
alt="Berlin's food stories' profile picture"
/>
<h6 class="center blog-h6">Berlin Food Stories</h6>
</div>
</div>
<div class="flexblog">
<div class="loish">
<img
src="./photos/loish-blog.png"
alt="Loish's profile picture"
/>
<h6 class="center blog-h6">Loish</h6>
</div>
</div>
<div class="flexblog">
<div class="lioba">
<img
class="blog"
src="./photos/li-blog.jpg"
alt="Lioba Brueckner's profile picture"
/>
<h6 class="center blog-h6">Lioba Brueckner</h6>
</div>
</div>
<div class="flexblog">
<div class="beardy">
<img
class="blog"
src="./photos/beardy-blog.png"
alt="Beardyman's profile picture"
/>
<h6 class="center blog-h6">Beardyman</h6>
</div>
</div>
<div class="flexblog">
<div class="redhanded">
<img
class="blog"
src="./photos/red-blog.png"
alt="RedHanded's profile picture"
/>
<h6 class="center blog-h6">RedHanded</h6>
</div>
</div>
<div class="flexblog">
<div class="jimmy">
<img
class="blog"
src="./photos/jim-blog.png"
alt="Jim's profile picture"
/>
<h6 class="center blog-h6">Jim'll Paint It</h6>
</div>
</div>
</div>
</div>
</section>
</section>
<section class="my-sec-contact white-text dark-class">
<section class="row container">
<div class="col s12 m12 l12 center">
<h2>Talk to us</h2>
</div>
<div class="col s12 m12 l12 center">
<div class="talk-to-us">
If you’re an artist curious about Patreon, you can talk to our
team in Berlin. We’re happy to answer any questions or help you
set up your page. Email us and a real person will respond!
</div>
</div>
<div class="col s12 m12 l12 center">
<a class="btn my-button">
<div>Contact us</div>
</a>
</div>
</section>
</section>
<section class="my-sec-perks">
<section class="row container">
<div class="col s12 m12 l12 center">
<h2>What can I offer my community on Patreon?</h2>
</div>
<div class="col s12 m12 l12 center">
<p class="perks-p">
There are many ways to delight your fans and every creator does
this in their own way. Choose a few of the ideas below, or invent
your own.
</p>
</div>
<div class="column-offer">
<div class="col s12 m4 l4">
<!--And more svg code from Patreon-->
<div>
<div class="svg-float">
<span class="patreon-icons patreon-icon-code">
<span class="patreon-icons icon-span">
<svg
width="100%"
height="100%"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="39" cy="39" r="39" data-fill="1"></circle>
<path
d="M23.996 40.214l.751-1.971-1.754-4.603a1.558 1.558 0 01.604-1.857l4.123-2.692 1.286-4.754a1.557 1.557 0 011.58-1.147l4.919.25 3.834-3.095c.57-.46 1.384-.46 1.954 0l3.835 3.095 4.918-.245a1.557 1.557 0 011.58 1.147l1.287 4.754 4.123 2.692c.613.4.864 1.173.604 1.857l-1.753 4.603 1.753 4.601c.26.685.009 1.458-.604 1.859l-4.123 2.684-1.293 4.755a1.555 1.555 0 01-1.58 1.15l-4.919-.246-3.834 3.088M20 51.904l2.778 4.376M35.362 32.41l10.557 16.633"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
clip-rule="evenodd"
d="M45.364 48.167l-23.141 7.24-1.668-2.627 15.362-19.495 9.447 14.882v0z"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M27.223 53.841l1.47 2.258a3.423 3.423 0 004.874 1.03 3.784 3.784 0 00.985-5.1l-.274-.395"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</span>
<div class="offers">
<h5>Recognition</h5>
<ul>
<li>
<span class="grey-text">Public shoutout</span>
</li>
<li>
<span class="grey-text">Name in credits</span>
</li>
<li>
<span class="grey-text">Social media follow</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col s12 m4 l4">
<div class="svg-float">
<span class="patreon-icons icon-span">
<svg
width="100%"
height="100%"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="39" cy="39" r="39" data-fill="1"></circle>
<path
d="M21 21v36.803h36.803"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
clip-rule="evenodd"
d="M41.855 30.814H21v-4.907h20.855a1.253 1.253 0 011.255 1.255v2.398a1.255 1.255 0 01-1.255 1.254v0zM41.855 40.628H21v-4.907h20.855a1.253 1.253 0 011.255 1.255v2.398a1.255 1.255 0 01-1.255 1.254v0zM51.641 50.442h-30.64v-4.907h30.64a1.253 1.253 0 011.255 1.255v2.398c0 .692-.562 1.254-1.255 1.254z"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</div>
<div class="offers">
<h5>Participation</h5>
<ul>
<li>
<span class="grey-text">Polls</span>
</li>
<li>
<span class="grey-text"> Collaborations</span>
</li>
<li>
<span class="grey-text">Audience feedback</span>
</li>
</ul>
</div>
</div>
<div class="col s12 m4 l4">
<div class="svg-float">
<span class="patreon-icons icon-span">
<svg
width="100%"
height="100%"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="39" cy="39" r="39" data-fill="1"></circle>
<path
d="M20.629 26a.63.63 0 110 1.258.63.63 0 010-1.258M34.048 44.87V32.29M39.08 32.29v4.271c0 2.958.876 5.849 2.517 8.31a14.982 14.982 0 002.516-8.31v-4.27M23.984 32.29v10.065A2.516 2.516 0 0026.5 44.87h2.516M54.177 44.87h-2.516a2.516 2.516 0 01-2.516-2.515v-7.549a2.516 2.516 0 012.516-2.516h2.516M49.145 39.839h5.032M26.5 27.258h31.242M57.742 49.903H20"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</div>
<div class="offers">
<h5>Creator Access</h5>
<ul>
<li><span class="grey-text">Livestreams</span></li>
<li><span class="grey-text">Group chats</span></li>
<li><span class="grey-text">member-only shows</span></li>
</ul>
</div>
</div>
<div class="col s12 m4 l4">
<div class="svg-float">
<span class="patreon-icons icon-span">
<svg
width="100%"
height="100%"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="39" cy="39" r="39" data-fill="1"></circle>
<path
d="M26.29 32.58a3.774 3.774 0 100-7.548 3.774 3.774 0 000 7.549z"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M26.29 35.097a6.29 6.29 0 00-6.29 6.29v3.774h2.516l1.258 10.065h5.032"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
clip-rule="evenodd"
d="M51.452 32.58a3.774 3.774 0 100-7.548 3.774 3.774 0 000 7.549z"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M51.452 35.097a6.29 6.29 0 016.29 6.29v3.774h-2.516l-1.258 10.065h-5.033"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M38.871 30.064a5.032 5.032 0 100-10.064 5.032 5.032 0 000 10.064zM47.677 41.387a8.806 8.806 0 10-17.613 0v3.774h3.775l1.258 12.58h7.548l1.258-12.58h3.774v-3.774z"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</div>
<div class="offers">
<h5>Community</h5>
<ul>
<li>
<span class="grey-text">Tribe name</span>
</li>
<li>
<span class="grey-text">Fan-fan connection</span>
</li>
<li>
<span class="grey-text">Events</span>
</li>
</ul>
</div>
</div>
<div class="col s12 m4 l4">
<div class="svg-float">
<span class="patreon-icons icon-span">
<svg
width="100%"
height="100%"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="39" cy="39" r="39" data-fill="1"></circle>
<path
d="M28.548 32.58v23.904c0 .695.564 1.258 1.259 1.258h17.612c.695 0 1.258-.563 1.258-1.258V32.58"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
clip-rule="evenodd"
d="M48.677 40.129h6.29c.696 0 1.259-.563 1.259-1.258v-8.807C56.226 24.506 51.72 20 46.16 20h-2.516a5.032 5.032 0 01-10.064 0h-2.517C25.506 20 21 24.506 21 30.064v8.807c0 .695.563 1.258 1.258 1.258h6.29"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</div>
<div>
<h5>Goods</h5>
<ul>
<li>
<span class="grey-text">Merch</span>
</li>
<li>
<span class="grey-text">Discounts</span>
</li>
<li>
<span class="grey-text">Loyalty gifts</span>
</li>
</ul>
</div>
</div>
<div class="col s12 m4 l4">
<div class="svg-float">
<span class="patreon-icons icon-span">
<svg
width="100%"
height="100%"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="39" cy="39" r="39" data-fill="1"></circle>
<path
d="M57.55 57.742l.168-1.882a5.032 5.032 0 00-3.92-5.368l-6.124-1.362V39.5a3.145 3.145 0 10-6.29 0v15.432l-2.478-1.858a2.572 2.572 0 00-3.6 3.6l.796 1.06"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
clip-rule="evenodd"
d="M55.226 45.161V22.516A2.516 2.516 0 0052.71 20H22.516A2.516 2.516 0 0020 22.516v27.678a2.516 2.516 0 002.516 2.516h7.549M20 27.548h35.226"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
clip-rule="evenodd"
d="M25.032 33.33a.75.75 0 01.75-.75h8.565a.75.75 0 01.75.75v8.565a.75.75 0 01-.75.75h-8.565a.75.75 0 01-.75-.75v-8.564z"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M25.032 47.678h10.066M40.129 32.58h10.066"
data-stroke="1"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</div>
<div>
<h5>Content</h5>
<ul>
<li>
<span class="grey-text">Posts & updates</span>
</li>
<li>
<span class="grey-text"> Early access</span>
</li>
<li>
<span class="grey-text">Extra episodes</span>
</li>
</ul>
</div>
</div>
</div>
</section>
</section>
<section class="my-sec-member white-text dark-class">
<section class="row container">
<div class="col s12 m12 l12 center">
<h2>
Patreon provides a home for your creative membership business
</h2>
</div>
<div class="col s12 m12 l12 center">
<p>
Build a thriving membership business that provides meaningful
income for you and a rewarding experience for your patrons. With
the Patreon Pro plan you have access to all the tools to master
your memberships.
</p>
</div>
<div class="col s12 m12 l12 center">
<a href="#" class="btn my-button">
<div>What's included</div>
</a>
</div>
</section>
</section>
<section class="my-sec-resources">
<section class="row container">
<div class="col s12 m12 l12 center">
<h2>Resources to get started</h2>
</div>
<div class="col s12 m4 l4">
<img
class="actress"
src="./photos/blog_post_1.jpg"
alt="blog post of actress"
/>
<div class="link-elements">
<h5>Is Patreon right for you and your creative business?</h5>
</div>
<div class="link-elements">
<span>
Learn about how other creators have used Patreon’s membership
platform to transform their creative careers.
</span>
</div>
<div class="link-elements">
<a
class="readmore"
href="https://blog.patreon.com/creator-launch-guide"
target="_blank"
>Read more</a
>
</div>
</div>
<div class="col s12 m4 l4">
<img
src="./photos/membershipbased.jpg"
alt="blog picture of woman with a painting"
/>
<div class="link-elements">
<h5>
6 Membership Based Business Models You Can Use On Patreon Today
</h5>
</div>
<div class="link-elements">
<span>
If you’ve looked at what other creators are doing on Patreon, it
can be daunting to see how many different ways they leverage...
</span>
</div>
<div class="link-elements">
<a
class="readmore"
href="https://blog.patreon.com/creator-launch-guide"
target="_blank"
>Read more</a
>
</div>
</div>
<div class="col s12 m4 l4">
<img
src="./photos/20mostuseful.jpg"
alt="Graphics of patreon with other platforms"
/>
<div class="link-elements">
<h5>The 20 Most Useful Patreon Features & Integrations</h5>
</div>
<div class="link-elements">
<span>
Get an overview of our most powerful features & integrations and
see how you can use them to run your business.
</span>
</div>
<div class="link-elements">
<a
class="readmore"
href="https://blog.patreon.com/creator-launch-guide"
target="_blank"
>Read more</a
>
</div>
</div>
<div class="col s12 m12 l12 center">
<a href="#" class="btn my-button">
<div>Create on patreon</div>
</a>
</div>
</section>
</section>
<section class="my-sec-support white-text dark-class">
<section class="row container curious-div">
<div class="col s12 m12 l12 center">
<h2>Curious about supporting artists on Patreon?</h2>
</div>
<div class="col s12 m12 l12 center">
<a href="#" class="btn my-button">
<div>Learn more</div>
</a>
</div>
</section>
<section class="row white-text dark-class">
<div class="footer-columns">
<div class="col s6 m4 l4 footer-svg">
<span>
<svg
height="30px"
version="1.1"
viewBox="0 0 569 546"
width="69px"
xmlns="http://www.w3.org/2000/svg"
>
<title>Patreon logo</title>
<g>
<circle
fill="white"
cx="362.589996"
cy="204.589996"
data-fill="1"
r="204.589996"
></circle>
<rect
fill="white"
data-fill="2"
height="545.799988"
width="100"
x="0"
y="0"
></rect>
</g>
</svg>
</span>
<div class="row">
<div class="col s6 m4 l4">
<button>Language: English</button>
<button>
<div class="flag"></div>
<span>Netherlands</span>
</button>
</div>
</div>
<div class="col s6 m4 l4 social-media">
<div><i class="fab fa-twitter"></i></div>
<div><i class="fab fa-facebook-f"></i></div>
<div><i class="fab fa-instagram"></i></div>
</div>
</div>
<div class="footer">
<div class="col s6 m2 l2">
<ul>
<li>
<span>PRODUCT</span>
</li>
<li><a href="#">Light</a></li>
<li><a href="#">Pro</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div>
<div class="col s6 m2 l2">
<ul>
<li>
<span>FOR CREATORS</span>
</li>
<li><a href="#">Podcasters</a></li>
<li><a href="#">Video Creators</a></li>
<li><a href="#">Musicians</a></li>
<li><a href="#">Visual Artists</a></li>
<li><a href="#">Writers & Journalists</a></li>