-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinformation-booklet.html
1350 lines (1209 loc) · 68.7 KB
/
information-booklet.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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Informations Book template - Doppio</title>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
:root {
--font-family: "Inter", sans-serif;
--font-xl: 14mm;
--font-lg: 5.75mm;
--font-md: 4.25mm;
--font-sm: 2.75mm;
--line-height: 1.5;
--almost-white: #f0eff6; /* Header & Footer Background */
--bluey-purple: #5c47c1; /* Title */
--shaded-white: #e5e5e5; /* Background */
--heather: #aaa0d4; /* Subtitle */
--purpley-gray: #8b879a; /* Text */
--purplish-gray: #6a6482; /* Emphasized Text */
--dark-shaded-white: #E2DEF2; /* Darker background */
}
body {
font-family: var(--font-family);
font-size: var(--font-md);
line-height: var(--line-height);
color: var(--purpley-gray);
background: var(--shaded-white);
}
/* COVER */
@page:first {
margin: 9mm 0 9mm 9mm;
}
@page:first {
@top-left {
content: none;
color: transparent;
background-color: transparent;
}
}
@page:first {
@top-left-corner {
content: '';
background-color: transparent;
}
}
@page:first {
@top-right-corner {
content: '';
background-color: transparent;
}
}
@page:first {
@bottom-right {
content: none;
color: transparent;
}
}
@page:first {
@bottom-left {
content: none;
}
}
@page:first {
@bottom-left-corner {
content: '';
background-color: transparent;
}
}
@page:first {
@bottom-right-corner {
content: '';
background-color: transparent;
}
}
.cover {
height: 100%;
background: url('./images/informations-book-cover.png');
background-repeat: no-repeat;
background-size: contain;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
font-size: var(--font-lg);
}
.logo {
display: flex;
padding-right: 35mm;
padding-top: 10mm;
}
.logo svg {
margin-left: auto;
}
.cover-content {
background: var(--almost-white);
width: 67%;
padding: 15mm 10mm 15mm 15mm;
margin-bottom: 10mm;
}
.cover-title {
color: var(--bluey-purple);
font-size: var(--font-xl);
font-weight: 700;
line-height: 1.2em;
}
.cover-informations {
margin: 10mm 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.cover-author strong {
color: var(--purplish-gray);
font-weight: 600;
}
.cover-author p {
color: var(--heather);
font-weight: 600;
}
.cover-informations-stroke {
height: 100px;
width: 0.5mm;
background: var(--heather);
}
/* PAGE TEMPLATE */
@page {
margin: 20mm 15mm 26mm 15mm;
}
@page {
@top-left {
content: string(title);
color: var(--bluey-purple);
font-size: var(--font-lg);
font-weight: 700;
background-color: var(--almost-white);
}
}
@page {
@top-left-corner {
content: '';
background-color: var(--almost-white);
}
}
@page {
@top-right-corner {
content: '';
background-color: var(--almost-white);
}
}
.title {
string-set: title content(text);
display: none;
}
@page {
@bottom-right {
content: counter(page);
color: var(--heather);
font-weight: 600;
background-color: var(--almost-white);
}
}
@page {
@bottom-left-corner {
content: '';
background-color: var(--almost-white);
}
}
@page {
@bottom-right-corner {
content: '';
background-color: var(--almost-white);
}
}
.footer {
position: running(titleRunning);
}
.footer-logo {
display: flex;
align-items: center;
}
@page {
@bottom-left {
content: element(titleRunning);
background-color: var(--almost-white);
}
}
.footer-grid {
display: flex;
flex-direction: row;
column-gap: 10mm;
font-size: var(--font-sm);
}
.footer-logo {
padding-inline: 4mm;
}
.footer-grid > div:not(:last-child) {
position: relative;
}
.footer-grid > div:not(:last-child)::after {
position: absolute;
content: "";
width: 1px;
background-color: var(--heather);
height: 100%;
right: -5mm;
top: 0;
}
.footer-client > div {
display: flex;
flex-direction: column;
row-gap: 1mm;
}
.footer-client strong {
font-weight: 600;
color: var(--purplish-gray);
}
.footer-client p {
color: var(--heater);
}
.page {
margin: 12mm 0;
height: 100%;
}
/* SUMMARY */
.summary h2 {
color: var(--heather);
font-size: var(--font-md);
border-top: solid 0.5mm var(--bluey-purple);
display: inline-block;
margin-bottom: 5mm;
text-transform: uppercase;
}
.summary-part {
font-size: var(--font-md);
margin-bottom: 14mm;
}
.summary-line {
display: flex;
justify-content: space-between;
border-top: solid 1px var(--heather);
padding: 2mm 0;
}
.summary-page-number {
font-weight: 600;
color: var(--heather);
}
/* NUMBER LIST */
.number-list-intro {
text-align: justify;
padding-bottom: 10mm;
border-bottom: 0.5mm solid var(--heather);
margin-bottom: 20mm;
}
.number-list-list {
padding: 0 7mm;
}
.number-list-item {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 4fr;
grid-column-gap: 2mm;
margin-bottom: 6mm;
}
.number-list-item-number {
font-size: var(--font-xl);
color: var(--heather);
font-weight: 600;
grid-area: 1 / 1 / 1 / 1;
}
.number-list-item-content {
grid-area: 1 / 2 / 1 / 2;
}
.number-list-item-title {
color: var(--bluey-purple);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 2mm;
}
/* BIG IMAGE */
.big-image-image {
width: 100%;
margin-bottom: 10mm;
}
.big-image-image img {
width: 100%;
}
.big-image-text h2 {
color: var(--bluey-purple);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 2mm;
}
/* ICONS LIST */
.icons-list-items {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-column-gap: 12mm;
grid-row-gap: 10mm;
}
.icons-list-item h2 {
color: var(--bluey-purple);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 2mm;
}
/* THUMBNAILS */
.thumbnails-items {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-column-gap: 10mm;
grid-row-gap: 12mm;
}
.thumbnail-image, .thumbnail-image
{
width: 100%;
}
.thumbnail-text {
margin-top: 4mm;
padding-top: 2mm;
border-top: 1px solid var(--heather);
}
.thumbnail-text h2 {
color: var(--bluey-purple);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 2mm;
}
/* IMAGES TEXT */
.images-text-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 8mm;
row-gap: 15mm;
break-after: page;
}
.images-text-img-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.images-text-img-container img {
object-fit: cover;
width: 100%;
height: 100%;
}
.images-text h2 {
text-transform: uppercase;
color: var(--bluey-purple);
font-weight: 600;
margin-bottom: 4mm;
}
.images-text p {
color: var(--purpley-gray);
line-height: 1.6em;
}
.images-text-content > div:nth-child(3) {
text-align: right;
}
/* IMAGES TEXT GRID */
.images-text-grid-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
break-after: page;
}
.images-text-grid-content-container {
max-width: 75mm;
margin-inline: auto;
}
.images-text-grid-content > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.images-text-grid-content > div:nth-child(2),
.images-text-grid-content > div:nth-child(6) {
background-color: var(--almost-white);
}
.images-text-grid-content > div:nth-child(3) {
background-color: var(--bluey-purple);
}
.images-text-grid-content h2 {
text-transform: uppercase;
font-weight: 600;
margin-bottom: 4mm;
color: var(--bluey-purple)
}
.images-text-grid-content > div:nth-child(3) h2 {
color: var(--almost-white);
}
.images-text-grid-content > div:nth-child(3) p {
color: var(--almost-white);
}
.images-text-grid-img-container img {
object-fit: cover;
width: 100%;
height: 70mm;
}
.images-text-grid-img-container {
width: 100%;
}
/* IMAGE TEXT COLUMNS */
.image-text-columns-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
break-after: page;
}
.image-text-columns-content h2 {
text-transform: uppercase;
color: var(--bluey-purple);
margin-bottom: 4mm;
font-weight: 600;
}
.image-text-columns-content > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--almost-white)
}
.image-text-columns-content > div:nth-child(3) {
background-color: var(--dark-shaded-white);
}
.image-text-columns-content-container {
max-width: 75mm;
margin-inline: auto;
}
.image-text-columns-img-container {
width: 100%;
height: 70mm;
}
.image-text-columns-img-container img {
object-fit: cover;
width: 100%;
height: 100%;
}
/* PERCENTAGES */
.percentages {
display: flex;
flex-direction: column;
break-after: page;
}
.percentages-intro {
padding-bottom: 6mm;
border-bottom: 0.5mm solid var(--heather);
margin-bottom: 6mm;
}
.percentages-content {
display: grid;
grid-template-columns: 1.5fr 0.5fr;
}
.percentages-img-background img {
object-fit: cover;
width: 100%;
}
.percentages-text-container {
position: relative;
}
.percentages-text-container > div {
position: absolute;
top: 0;
right: 0;
width: 110mm;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.percentages-text-container > div > div {
width: 100%;
padding: 6mm;
background-color: var(--almost-white);
}
.percentages h3 {
text-transform: uppercase;
color: var(--bluey-purple);
font-weight: 600;
margin-bottom: 3mm;
}
.percentages-flex-container {
display: flex;
flex-direction: column;
}
.percentages-flex-container > div {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 4mm;
}
.percentages-flex-container > div:not(:last-child) {
margin-bottom: 5mm;
}
.percent {
font-size: var(--font-xl);
font-weight: 600;
color: var(--heather);
}
.percentages-footer-text {
position: relative;
padding-top: 5mm;
margin-top: 5mm;
border-top: 0.5mm solid var(--heather);
}
/* TEXT COLUMNS */
.text-columns-intro {
padding-bottom: 6mm;
border-bottom: 0.25mm solid var(--heather);
}
.text-columns-text {
padding-top: 8mm;
columns: 2;
column-gap: 10mm;
}
.text-columns-text p {
margin-bottom: 6mm;
line-height: 1.6em;
}
.text-columns-highlights {
color: var(--bluey-purple);
font-weight: 600;
}
/* TEXT FRAMES */
.text-frame {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
grid-column-gap: 10mm;
padding: 10mm 8mm;
}
.text-frame:not(:last-child) {
margin-bottom: 10mm;
}
.frame-light {
background: var(--almost-white);
}
.frame-dark {
background: var(--dark-shaded-white);
}
.text-frame h2 {
color: var(--bluey-purple);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 4mm;
}
.text-frame p {
line-height: 1.6em;
}
.text-frame p:not(:last-child) {
margin-bottom: 6mm;
}
/* IMAGE LIST */
.images-list-intro {
font-weight: bold;
color: var(--heather);
margin-bottom: 6mm;
}
.images-list-item {
display: flex;
}
.images-list-item:not(:last-child) {
margin-bottom: 6mm;
}
.images-list-item img {
margin-right: 6mm;
}
.images-list-item-content {
border-top: 0.25mm solid var(--heather);
}
.images-list-item-content h2 {
color: var(--bluey-purple);
text-transform: uppercase;
font-weight: 600;
margin: 2mm 0;
}
/* VERTICAL FRAMES */
.vertical-frames-content {
display: flex;
height: 90%;
}
.vertical-frame {
width: 50%;
padding: 8mm 6mm;
}
.vertical-frame h2 {
color: var(--bluey-purple);
font-size: var(--font-lg);
font-weight: 700;
margin-bottom: 8mm;
}
.vertical-frame h3 {
color: var(--heather);
font-weight: 600;
margin-bottom: 2mm;
}
.vertical-frame p {
line-height: 1.6em;
}
.vertical-frame p:not(:last-child), .vertical-frame ul:not(:last-child) {
margin-bottom: 5mm;
}
.vertical-frame ul {
padding-left: 4mm;
line-height: 1.6em;
}
.vertical-frame ul li:not(:last-child) {
margin-bottom: 5mm;
}
/* BIG TEXT */
.big-text h2 {
color: var(--bluey-purple);
font-size: var(--font-lg);
font-weight: 700;
margin-bottom: 8mm;
}
.big-text-intro {
color: var(--purpley-gray);
font-weight: 600;
padding-bottom: 8mm;
border-bottom: 0.5mm solid var(--heather);
margin-bottom: 8mm;
}
.big-text-text p {
line-height: 1.6em;
}
.big-text-text p:not(:last-child) {
margin-bottom: 5mm;
}
.big-text-text strong {
font-weight: 600;
color: var(--heather);
}
</style>
</head>
<body>
<div class="cover">
<div class="logo">
<svg width="120" height="25" viewBox="0 0 120 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2341_6862)">
<path d="M16.0232 1.72317e-06V7.31293C15.4449 7.22817 14.8608 7.18599 14.276 7.18675H7.03966V17.6871C2.72485 17.0068 1.76469e-06 13.792 1.76469e-06 9.1343V8.74479C-0.000736859 7.5962 0.230399 6.45874 0.680192 5.39745C1.12999 4.33616 1.78961 3.37185 2.62135 2.55968C3.45309 1.74751 4.44063 1.1034 5.52749 0.66419C6.61435 0.224979 7.77922 -0.000719523 8.95548 1.72317e-06H16.0232Z" fill="#E345FF"/>
<path d="M16.0232 7.31293V17.8187H8.78692C8.20183 17.8205 7.61753 17.7764 7.03964 17.6871V7.18675H14.2759C14.8608 7.18599 15.4448 7.22817 16.0232 7.31293Z" fill="#310FAE"/>
<path d="M23.0629 15.8712C23.0629 21.0665 19.6919 25 14.1074 25H7.03964V17.6871C7.61753 17.7764 8.20183 17.8205 8.78692 17.8187H16.0232V7.31293C20.338 7.98771 23.0629 11.208 23.0629 15.8712Z" fill="#5935DD"/>
<path d="M36.5186 18.9653V0.861298H39.5636V18.9653H36.5186ZM38.6142 18.9653V16.2497H43.4796C44.6559 16.2781 45.819 16.0017 46.8505 15.4487C47.801 14.9248 48.5801 14.1487 49.0978 13.2104C49.6488 12.1979 49.9272 11.0652 49.9068 9.91879C49.9333 8.76969 49.6484 7.63415 49.0809 6.62715C48.5482 5.68867 47.7584 4.91361 46.7999 4.38884C45.7822 3.84217 44.6353 3.56598 43.4739 3.58787H38.6085V0.87227H43.5526C44.8314 0.859454 46.1005 1.09053 47.2887 1.55254C48.4076 1.99571 49.4282 2.64584 50.2945 3.46718C51.1481 4.28456 51.8261 5.25999 52.289 6.33639C52.7753 7.47044 53.02 8.68936 53.0081 9.91879C53.0173 11.1426 52.7726 12.3556 52.289 13.4847C51.8319 14.5647 51.1575 15.5441 50.3057 16.3649C49.4476 17.1883 48.432 17.8389 47.3168 18.2796C46.1382 18.7414 44.8787 18.9744 43.6088 18.9653H38.6142Z" fill="#0C091B"/>
<path d="M61.531 19.2012C60.3477 19.2157 59.1826 18.9161 58.16 18.3344C57.1676 17.7696 56.3427 16.9623 55.7667 15.9919C55.1694 14.9941 54.8625 13.8559 54.879 12.7002C54.8622 11.5567 55.1694 10.4308 55.7667 9.44701C56.3486 8.48816 57.1726 7.69106 58.16 7.13189C59.1826 6.55021 60.3477 6.25061 61.531 6.26509C62.7119 6.25207 63.8752 6.54552 64.9019 7.11543C65.8916 7.67162 66.7164 8.4694 67.2953 9.43055C67.8944 10.4276 68.2015 11.5663 68.183 12.7222C68.1995 13.8779 67.8926 15.016 67.2953 16.0138C66.7095 16.9959 65.8671 17.8084 64.8544 18.3684C63.8416 18.9284 62.6947 19.2158 61.531 19.2012ZM61.531 16.4582C62.202 16.4705 62.8639 16.3056 63.4468 15.9809C63.9996 15.6675 64.4497 15.207 64.7446 14.6533C65.0617 14.0534 65.2219 13.3862 65.2109 12.7112C65.2232 12.0435 65.0587 11.384 64.7334 10.7966C64.2259 9.97326 63.4087 9.37638 62.4566 9.13344C61.5044 8.89049 60.4927 9.02075 59.6376 9.49638C59.091 9.80517 58.6419 10.255 58.3398 10.7966C58.0207 11.3859 57.8603 12.0447 57.8735 12.7112C57.8625 13.3862 58.0227 14.0534 58.3398 14.6533C58.6348 15.207 59.0849 15.6675 59.6376 15.9809C60.2129 16.3043 60.8673 16.4693 61.531 16.4582Z" fill="#0C091B"/>
<path d="M70.61 24.1387V6.58328H73.5203V9.87492L73.0147 12.8977L73.5203 15.8986V24.1387H70.61ZM77.4081 19.2012C76.5058 19.2167 75.6143 19.0071 74.8181 18.5923C74.0804 18.2126 73.4627 17.6435 73.0315 16.9465C72.59 16.2201 72.3643 15.3881 72.3798 14.5436V10.9721C72.364 10.1286 72.5918 9.29774 73.0371 8.57472C73.4755 7.87947 74.0962 7.31125 74.835 6.9289C75.6239 6.51608 76.5076 6.30649 77.4025 6.31994C78.5041 6.30801 79.5855 6.60918 80.515 7.18674C81.4405 7.76408 82.1972 8.56541 82.7117 9.51284C83.2607 10.5261 83.5389 11.6583 83.5208 12.8045C83.5404 13.9508 83.2621 15.0833 82.7117 16.0961C82.1983 17.0399 81.441 17.8361 80.515 18.4057C79.5784 18.9552 78.5003 19.2313 77.4081 19.2012ZM76.9362 16.5131C77.5912 16.5256 78.2369 16.3604 78.8014 16.0358C79.3401 15.7115 79.7789 15.2508 80.0712 14.7027C80.3884 14.0951 80.5466 13.4204 80.5318 12.7386C80.5466 12.0569 80.3884 11.3821 80.0712 10.7746C79.7805 10.2254 79.3414 9.76432 78.8014 9.44152C78.2369 9.11693 77.5912 8.9517 76.9362 8.96423C76.2759 8.95179 75.6248 9.11691 75.0541 9.44152C74.5089 9.75811 74.0683 10.2208 73.7844 10.7746C73.4734 11.3839 73.3191 12.058 73.3349 12.7386C73.3191 13.4192 73.4734 14.0933 73.7844 14.7027C74.0708 15.2548 74.5109 15.7168 75.0541 16.0358C75.6225 16.368 76.2737 16.5408 76.9362 16.535V16.5131Z" fill="#0C091B"/>
<path d="M85.9591 24.1387V6.58327H88.8693V9.87491L88.3693 12.8977L88.8693 15.8986V24.1387H85.9591ZM92.7628 19.2012C91.8586 19.2174 90.9651 19.0078 90.1671 18.5923C89.4305 18.211 88.8132 17.6423 88.3805 16.9465C87.9434 16.2186 87.7199 15.3872 87.7344 14.5436V10.9721C87.7201 10.127 87.9477 9.29477 88.3918 8.56923C88.8338 7.87494 89.456 7.30714 90.1952 6.92341C90.9839 6.50991 91.8677 6.30028 92.7628 6.31446C93.8626 6.30264 94.9422 6.60384 95.8696 7.18125C96.7969 7.75825 97.5555 8.55955 98.072 9.50735C98.6165 10.522 98.8927 11.6535 98.8754 12.799C98.8941 13.9446 98.6179 15.0764 98.072 16.0906C97.5565 17.0348 96.7973 17.8309 95.8696 18.4003C94.9341 18.9525 93.8556 19.2306 92.7628 19.2012ZM92.2852 16.5131C92.9403 16.5262 93.5862 16.3609 94.1505 16.0358C94.6906 15.7132 95.1298 15.2521 95.4202 14.7026C95.7391 14.0956 95.8993 13.4208 95.8865 12.7386C95.8993 12.0564 95.7391 11.3817 95.4202 10.7746C95.1312 10.2242 94.6917 9.76277 94.1505 9.44151C93.5862 9.11638 92.9403 8.95112 92.2852 8.96423C91.6267 8.95167 90.9773 9.11683 90.4087 9.44151C89.8619 9.75778 89.4193 10.2204 89.1334 10.7746C88.8252 11.3849 88.6711 12.0583 88.6839 12.7386C88.6711 13.419 88.8252 14.0924 89.1334 14.7026C89.4214 15.2555 89.8635 15.7176 90.4087 16.0358C90.975 16.3681 91.6245 16.5409 92.2852 16.535V16.5131Z" fill="#0C091B"/>
<path d="M102.814 4.28463C102.585 4.29079 102.357 4.25003 102.145 4.16499C101.933 4.07996 101.742 3.95251 101.583 3.79088C101.422 3.63034 101.296 3.43975 101.212 3.2305C101.128 3.02125 101.088 2.79763 101.095 2.57298C101.089 2.34928 101.13 2.12678 101.214 1.91857C101.298 1.71036 101.423 1.52064 101.583 1.36056C101.916 1.04777 102.36 0.873047 102.822 0.873047C103.284 0.873047 103.728 1.04777 104.061 1.36056C104.362 1.69403 104.519 2.12867 104.499 2.57298C104.511 3.02457 104.339 3.46235 104.022 3.79088C103.866 3.94976 103.678 4.0756 103.47 4.16054C103.263 4.24549 103.039 4.28773 102.814 4.28463ZM101.359 18.9653V6.58329H104.275V18.9653H101.359Z" fill="#0C091B"/>
<path d="M113.331 19.2012C112.148 19.2157 110.983 18.9161 109.96 18.3344C108.968 17.7696 108.143 16.9623 107.567 15.9919C106.97 14.994 106.663 13.8559 106.679 12.7002C106.662 11.5567 106.97 10.4308 107.567 9.44701C108.149 8.48816 108.973 7.69106 109.96 7.13189C110.983 6.55021 112.148 6.25061 113.331 6.26509C114.512 6.25286 115.675 6.54625 116.702 7.11543C117.7 7.67922 118.529 8.48885 119.107 9.46346C119.706 10.4605 120.013 11.5992 119.994 12.7551C120.011 13.9108 119.704 15.0489 119.107 16.0467C118.516 17.0243 117.67 17.8313 116.655 18.3854C115.64 18.9396 114.494 19.2211 113.331 19.2012ZM113.331 16.4582C114.002 16.4705 114.664 16.3056 115.247 15.9809C115.8 15.6675 116.25 15.207 116.545 14.6533C116.86 14.053 117.018 13.3858 117.005 12.7112C117.019 12.044 116.857 11.3845 116.534 10.7966C116.026 9.97326 115.209 9.37638 114.257 9.13343C113.305 8.89049 112.293 9.02075 111.438 9.49638C110.88 9.80793 110.422 10.266 110.118 10.8185C109.798 11.4078 109.638 12.0667 109.651 12.7332C109.64 13.4082 109.8 14.0753 110.118 14.6752C110.412 15.229 110.863 15.6894 111.415 16.0029C111.999 16.3225 112.662 16.48 113.331 16.4582Z" fill="#0C091B"/>
</g>
<defs>
<clipPath id="clip0_2341_6862">
<rect width="120" height="25" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="cover-content">
<p class="cover-title">Information booklet</p>
<div class="cover-informations">
<div class="cover-author">
<p><strong>Jane Doe</strong></p>
<p>File name</p>
</div>
<div class="cover-informations-stroke"></div>
<div class="cover-address">
<p>Doppio Company</p>
<p>15 Rue de la Liberté</p>
<p>44000 Nantes, France</p>
</div>
</div>
</div>
</div>
<div class="page summary">
<!-- HEADER START -->
<h1 class="title">Summary</h1>
<!-- HEADER END -->
<div class="summary-part">
<h2>I.Part 1</h2>
<div class="summary-line">
<p>lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="summary-page-number">3</p>
</div>
<div class="summary-line">
<p>lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="summary-page-number">4</p>
</div>
</div>
<div class="summary-part">
<h2>II.Part 2</h2>
<div class="summary-line">
<p>lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="summary-page-number">5</p>
</div>
<div class="summary-line">
<p>lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="summary-page-number">6</p>
</div>
<div class="summary-line">
<p>lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="summary-page-number">7</p>
</div>
</div>
<div class="summary-part">
<h2>III.Part 3</h2>
<div class="summary-line">
<p>lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="summary-page-number">8</p>
</div>
<div class="summary-line">
<p>lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="summary-page-number">9</p>
</div>
<div class="summary-line">
<p>lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="summary-page-number">10</p>
</div>
</div>
<!-- FOOTER START -->
<div class="footer">
<div class="footer-grid">
<div class="footer-logo">
<svg width="86" height="17" viewBox="0 0 86 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.485 1.17175e-06V4.97279C11.0705 4.91516 10.6519 4.88647 10.2328 4.88699H5.0468V12.0272C1.95452 11.5646 0.00171025 9.37854 0.00171025 6.21132V5.94646C0.0011809 5.16542 0.166828 4.39194 0.48918 3.67027C0.811532 2.94859 1.28427 2.29286 1.88035 1.74058C2.47643 1.18831 3.18416 0.750313 3.96308 0.451649C4.742 0.152986 5.57682 -0.000489276 6.4198 1.17175e-06H11.485Z" fill="#E345FF"/>
<path d="M11.4851 4.97277V12.1167H6.29909C5.87977 12.1179 5.46103 12.088 5.04688 12.0272V4.88697H10.2329C10.652 4.88646 11.0706 4.91514 11.4851 4.97277Z" fill="#310FAE"/>
<path d="M16.5302 10.7923C16.5302 14.3251 14.1143 16.9999 10.1121 16.9999H5.04688V12.0271C5.46103 12.0878 5.87977 12.1178 6.29909 12.1166H11.4851V4.97266C14.5774 5.43151 16.5302 7.62133 16.5302 10.7923Z" fill="#5935DD"/>
<path d="M26.1733 12.8964V0.585693H28.3557V12.8964H26.1733ZM27.6752 12.8964V11.0498H31.1621C32.0051 11.0691 32.8387 10.8812 33.5779 10.5052C34.2591 10.1488 34.8174 9.62115 35.1885 8.9831C35.5834 8.29459 35.7829 7.52436 35.7683 6.74479C35.7873 5.9634 35.5831 5.19123 35.1764 4.50647C34.7946 3.86831 34.2286 3.34126 33.5417 2.98442C32.8123 2.61269 31.9903 2.42488 31.158 2.43976H27.6712V0.593154H31.2144C32.1309 0.58444 33.0404 0.741573 33.892 1.05574C34.6938 1.3571 35.4253 1.79919 36.0461 2.35769C36.6578 2.91351 37.1438 3.57681 37.4755 4.30876C37.824 5.07991 37.9994 5.90878 37.9908 6.74479C37.9974 7.57701 37.8221 8.40185 37.4755 9.16963C37.1479 9.90399 36.6646 10.57 36.0541 11.1282C35.4392 11.6881 34.7113 12.1304 33.9121 12.4301C33.0674 12.7442 32.1648 12.9026 31.2547 12.8964H27.6752Z" fill="#322D48"/>
<path d="M44.099 13.0569C43.251 13.0668 42.416 12.863 41.6832 12.4675C40.9719 12.0834 40.3808 11.5345 39.9679 10.8746C39.5399 10.196 39.3199 9.42211 39.3318 8.63625C39.3197 7.85862 39.5399 7.09304 39.9679 6.42405C40.385 5.77204 40.9756 5.23001 41.6832 4.84977C42.416 4.45423 43.251 4.25051 44.099 4.26035C44.9454 4.2515 45.7791 4.45104 46.5149 4.83858C47.2242 5.21679 47.8152 5.75928 48.2301 6.41286C48.6595 7.09087 48.8796 7.86516 48.8663 8.65118C48.8781 9.43703 48.6582 10.211 48.2301 10.8895C47.8103 11.5573 47.2066 12.1098 46.4808 12.4906C45.755 12.8714 44.9331 13.0668 44.099 13.0569ZM44.099 11.1917C44.5799 11.2 45.0543 11.0879 45.472 10.8671C45.8682 10.654 46.1908 10.3409 46.4021 9.96432C46.6294 9.55639 46.7442 9.10272 46.7363 8.64372C46.7451 8.18967 46.6272 7.74121 46.3941 7.34176C46.0304 6.78191 45.4448 6.37603 44.7624 6.21083C44.08 6.04562 43.355 6.1342 42.7421 6.45763C42.3503 6.6676 42.0285 6.9735 41.812 7.34176C41.5834 7.7425 41.4684 8.19051 41.4778 8.64372C41.47 9.10272 41.5848 9.55639 41.812 9.96432C42.0234 10.3409 42.346 10.654 42.7421 10.8671C43.1544 11.087 43.6234 11.1992 44.099 11.1917Z" fill="#322D48"/>
<path d="M50.6055 16.4143V4.4766H52.6911V6.71491L52.3288 8.77043L52.6911 10.811V16.4143H50.6055ZM55.4774 13.0568C54.8307 13.0673 54.1919 12.9248 53.6212 12.6427C53.0925 12.3845 52.6498 11.9976 52.3409 11.5236C52.0244 11.0297 51.8627 10.4639 51.8738 9.88959V7.46102C51.8625 6.8874 52.0258 6.32243 52.3449 5.83078C52.659 5.35801 53.1039 4.97162 53.6333 4.71162C54.1987 4.4309 54.832 4.28839 55.4734 4.29753C56.2629 4.28942 57.0379 4.49421 57.704 4.88696C58.3673 5.27955 58.9096 5.82445 59.2783 6.4687C59.6718 7.15774 59.8712 7.9276 59.8581 8.70701C59.8722 9.48654 59.6727 10.2566 59.2783 10.9453C58.9104 11.5871 58.3676 12.1285 57.704 12.5159C57.0328 12.8895 56.2601 13.0773 55.4774 13.0568ZM55.1392 11.2288C55.6086 11.2374 56.0714 11.125 56.476 10.9043C56.862 10.6838 57.1765 10.3705 57.3859 9.99778C57.6133 9.58467 57.7267 9.12585 57.7161 8.66225C57.7267 8.19865 57.6133 7.73982 57.3859 7.32672C57.1777 6.95322 56.8629 6.63971 56.476 6.4202C56.0714 6.19948 55.6086 6.08713 55.1392 6.09565C54.666 6.08719 54.1993 6.19947 53.7904 6.4202C53.3997 6.63549 53.0839 6.95011 52.8804 7.32672C52.6575 7.74105 52.547 8.19944 52.5583 8.66225C52.547 9.12505 52.6575 9.58344 52.8804 9.99778C53.0857 10.3732 53.4011 10.6874 53.7904 10.9043C54.1977 11.1302 54.6644 11.2477 55.1392 11.2438V11.2288Z" fill="#322D48"/>
<path d="M61.6057 16.4144V4.47671H63.6914V6.71503L63.333 8.77054L63.6914 10.8111V16.4144H61.6057ZM66.4817 13.0569C65.8337 13.0679 65.1934 12.9254 64.6215 12.6428C64.0936 12.3835 63.6512 11.9969 63.3411 11.5237C63.0278 11.0287 62.8676 10.4634 62.8781 9.8897V7.46113C62.8677 6.88645 63.0309 6.32053 63.3491 5.82716C63.6659 5.35504 64.1118 4.96894 64.6416 4.708C65.2068 4.42682 65.8403 4.28427 66.4817 4.29392C67.2699 4.28588 68.0436 4.49069 68.7083 4.88334C69.3728 5.2757 69.9165 5.82058 70.2866 6.46508C70.6769 7.15508 70.8748 7.92449 70.8624 8.70339C70.8758 9.4824 70.6778 10.252 70.2866 10.9417C69.9172 11.5837 69.3731 12.1251 68.7083 12.5123C68.0378 12.8878 67.2649 13.0769 66.4817 13.0569ZM66.1394 11.229C66.6089 11.2379 67.0718 11.1255 67.4762 10.9044C67.8633 10.685 68.1781 10.3715 68.3862 9.99789C68.6148 9.58506 68.7296 9.12626 68.7204 8.66236C68.7296 8.19846 68.6148 7.73966 68.3862 7.32683C68.1791 6.95255 67.8641 6.63877 67.4762 6.42031C67.0718 6.19923 66.6089 6.08684 66.1394 6.09576C65.6675 6.08722 65.2021 6.19953 64.7946 6.42031C64.4027 6.63537 64.0856 6.94996 63.8806 7.32683C63.6598 7.74181 63.5493 8.19974 63.5585 8.66236C63.5493 9.12497 63.6598 9.58291 63.8806 9.99789C64.087 10.3738 64.4039 10.6881 64.7946 10.9044C65.2005 11.1304 65.6659 11.2479 66.1394 11.2439V11.229Z" fill="#322D48"/>
<path d="M73.685 2.91363C73.5208 2.91781 73.3576 2.8901 73.2057 2.83227C73.0538 2.77445 72.9167 2.68779 72.8032 2.57788C72.6877 2.46871 72.5972 2.33911 72.5371 2.19682C72.4769 2.05453 72.4482 1.90247 72.4529 1.7497C72.449 1.59759 72.478 1.44629 72.5382 1.30471C72.5983 1.16312 72.6884 1.03411 72.8032 0.925256C73.0417 0.712563 73.3599 0.59375 73.691 0.59375C74.0221 0.59375 74.3403 0.712563 74.5788 0.925256C74.7948 1.15202 74.9074 1.44757 74.8929 1.7497C74.9012 2.05679 74.7782 2.35448 74.5506 2.57788C74.439 2.68592 74.3045 2.77148 74.1555 2.82925C74.0066 2.88701 73.8464 2.91573 73.685 2.91363ZM72.6421 12.8965V4.47672H74.7318V12.8965H72.6421Z" fill="#322D48"/>
<path d="M81.2223 13.0569C80.3743 13.0668 79.5393 12.863 78.8065 12.4675C78.0952 12.0834 77.5041 11.5345 77.0912 10.8746C76.6632 10.196 76.4432 9.42211 76.4551 8.63625C76.443 7.85862 76.6632 7.09304 77.0912 6.42405C77.5083 5.77204 78.0988 5.23001 78.8065 4.84977C79.5393 4.45423 80.3743 4.25051 81.2223 4.26035C82.0686 4.25203 82.9021 4.45154 83.6382 4.83858C84.3535 5.22196 84.9477 5.77251 85.3615 6.43525C85.7909 7.11326 86.0109 7.88754 85.9976 8.67356C86.0095 9.45941 85.7895 10.2333 85.3615 10.9119C84.9379 11.5766 84.3316 12.1254 83.6045 12.5022C82.8773 12.879 82.0554 13.0704 81.2223 13.0569ZM81.2223 11.1917C81.7032 11.2 82.1776 11.0879 82.5953 10.8671C82.9915 10.654 83.314 10.3409 83.5254 9.96432C83.7514 9.55612 83.8649 9.10242 83.8556 8.64372C83.8656 8.19 83.7491 7.74156 83.5174 7.34176C83.1536 6.78191 82.568 6.37603 81.8857 6.21083C81.2033 6.04562 80.4783 6.1342 79.8654 6.45763C79.4655 6.66948 79.1377 6.98095 78.9192 7.35668C78.6905 7.75742 78.5756 8.20543 78.585 8.65864C78.5772 9.11764 78.692 9.57132 78.9192 9.97924C79.1306 10.3558 79.4532 10.6689 79.8493 10.882C80.2679 11.0994 80.7427 11.2065 81.2223 11.1917Z" fill="#322D48"/>
</svg>
</div>
<div class="footer-client">
<div>
<p><strong>Jane Doe</strong></p>
<p>File name</p>
</div>
</div>
<div class="footer-address">
<div>
<p>Doppio</p>
<p>15 rue de la Liberté,</p>
<p>44000 Nantes, France</p>
</div>
</div>
</div>
</div>
<!-- FOOTER END -->
</div>
<div class="page number-list">
<!-- HEADER START -->
<h1 class="title">Lorem ipsum dolor</h1>
<!-- HEADER END -->
<p class="number-list-intro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc, consectetur morbi blandit sed elementum lacinia. Non proin amet a egestas sed nibh. Nibh sit senectus urna mauris sagittis adipiscing. Semper quisque in eget dui eget. Nibh sit senectus urna mauris sagittis adipiscing. Semper quisque in eget dui eget. Nibh sit senectus urna mauris sagittis adipiscing.
</p>
<div class="number-list-list">
<div class="number-list-item">
<p class="number-list-item-number">01.</p>
<div class="number-list-item-content">
<h2 class="number-list-item-title">Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc, consectetur.</p>
</div>
</div>
<div class="number-list-item">
<p class="number-list-item-number">02.</p>
<div class="number-list-item-content">
<h2 class="number-list-item-title">Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc, consectetur.</p>
</div>
</div>
<div class="number-list-item">
<p class="number-list-item-number">03.</p>
<div class="number-list-item-content">
<h2 class="number-list-item-title">Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc, consectetur.</p>
</div>
</div>
<div class="number-list-item">
<p class="number-list-item-number">04.</p>
<div class="number-list-item-content">
<h2 class="number-list-item-title">Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc, consectetur.</p>
</div>
</div>
</div>
</div>
<div class="page big-image">
<!-- HEADER START -->
<h1 class="title">Lorem ipsum dolor</h1>
<!-- HEADER END -->
<div class="big-image-image">
<img src="./images/image-example-1.png"/>
</div>
<div class="big-image-text">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc, consectetur morbi blandit sed elementum lacinia. Non proin amet a egestas sed nibh. Nibh sit senectus urna mauris sagittis adipiscing. Semper quisque in eget dui eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc, consectetur morbi blandit sed elementum lacinia. Non proin amet a egestas sed nibh. Nibh sit senectus urna mauris sagittis adipiscing. Semper quisque in eget dui eget.</p>
</div>
</div>
<div class="page icons-list">
<!-- HEADER START -->
<h1 class="title">Lorem ipsum dolor</h1>
<!-- HEADER END -->
<div class="icons-list-items">
<div class="icons-list-item">
<div class="icons-list-item-icon">
<svg width="39" height="40" viewBox="0 0 39 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 36.6667C17.5794 36.6667 15.6776 36.2787 13.9032 35.5249C12.1289 34.771 10.5166 33.6662 9.15856 32.2733C7.8005 30.8804 6.72323 29.2268 5.98825 27.4069C5.25328 25.587 4.87499 23.6365 4.87499 21.6667C4.87499 19.6968 5.25328 17.7463 5.98825 15.9264C6.72323 14.1065 7.8005 12.4529 9.15856 11.0601C10.5166 9.66719 12.1289 8.5623 13.9032 7.80848C15.6776 7.05466 17.5794 6.66667 19.5 6.66667C23.3788 6.66667 27.0987 8.24702 29.8414 11.0601C32.5841 13.8731 34.125 17.6884 34.125 21.6667C34.125 25.6449 32.5841 29.4602 29.8414 32.2733C27.0987 35.0863 23.3788 36.6667 19.5 36.6667ZM19.5 33.3333C20.9938 33.3333 22.4729 33.0316 23.853 32.4453C25.2331 31.859 26.4871 30.9996 27.5433 29.9163C28.5996 28.8329 29.4375 27.5468 30.0091 26.1313C30.5808 24.7158 30.875 23.1988 30.875 21.6667C30.875 20.1346 30.5808 18.6175 30.0091 17.202C29.4375 15.7866 28.5996 14.5004 27.5433 13.4171C26.4871 12.3337 25.2331 11.4744 23.853 10.8881C22.4729 10.3018 20.9938 10 19.5 10C16.4832 10 13.5899 11.2292 11.4567 13.4171C9.32343 15.605 8.12499 18.5725 8.12499 21.6667C8.12499 24.7609 9.32343 27.7283 11.4567 29.9163C13.5899 32.1042 16.4832 33.3333 19.5 33.3333ZM21.125 21.6667H26V25H17.875V13.3333H21.125V21.6667ZM2.83887 10.47L8.58324 4.57834L10.8826 6.935L5.13499 12.8283L2.83887 10.47ZM30.4151 4.57834L36.1611 10.47L33.8634 12.8283L28.1174 6.935L30.4167 4.57834H30.4151Z" fill="#AAA0D4"/>
</svg>
</div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, morbi adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc. Sit consectetur facilisis id euismod.</p>
</div>
<div class="icons-list-item">
<div class="icons-list-item-icon">
<svg width="39" height="40" viewBox="0 0 39 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.875 16.6667H3.25V6.67167C3.25 5.74834 3.98938 5 4.862 5H34.138C34.3513 4.99954 34.5626 5.0426 34.7596 5.12668C34.9565 5.21075 35.1352 5.33416 35.2852 5.48972C35.4352 5.64529 35.5536 5.8299 35.6334 6.03281C35.7132 6.23573 35.7528 6.45289 35.75 6.67167V16.6667H34.125V33.335C34.1256 33.553 34.0844 33.769 34.0037 33.9706C33.9229 34.1723 33.8042 34.3557 33.6544 34.5103C33.5046 34.6649 33.3265 34.7877 33.1304 34.8717C32.9343 34.9558 32.7239 34.9993 32.5114 35H6.48863C6.27608 34.9993 6.06574 34.9558 5.86962 34.8717C5.6735 34.7877 5.49544 34.6649 5.3456 34.5103C5.19576 34.3557 5.07708 34.1723 4.99633 33.9706C4.91559 33.769 4.87436 33.553 4.875 33.335V16.6667ZM30.875 16.6667H8.125V31.6667H30.875V16.6667ZM6.5 8.33334V13.3333H32.5V8.33334H6.5ZM14.625 20H24.375V23.3333H14.625V20Z" fill="#AAA0D4"/>
</svg>
</div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, morbi adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc. Sit consectetur facilisis id euismod.</p>
</div>
<div class="icons-list-item">
<div class="icons-list-item-icon">
<svg width="39" height="40" viewBox="0 0 39 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.9075 5L36.3872 32.5C36.5298 32.7534 36.6049 33.0408 36.6049 33.3333C36.6049 33.6259 36.5298 33.9133 36.3872 34.1666C36.2446 34.42 36.0395 34.6304 35.7925 34.7767C35.5454 34.923 35.2652 35 34.98 35H4.02047C3.73522 35 3.45501 34.923 3.20798 34.7767C2.96096 34.6304 2.75582 34.42 2.61321 34.1666C2.47059 33.9133 2.39551 33.6259 2.39551 33.3333C2.39551 33.0408 2.47059 32.7534 2.61322 32.5L18.093 5C18.2356 4.74665 18.4407 4.53628 18.6878 4.39001C18.9348 4.24374 19.215 4.16674 19.5002 4.16674C19.7854 4.16674 20.0657 4.24374 20.3127 4.39001C20.5597 4.53628 20.7648 4.74665 20.9075 5ZM6.83497 31.6667H32.1655L19.5002 9.16667L6.83497 31.6667ZM17.8752 26.6667H21.1252V30H17.8752V26.6667ZM17.8752 15H21.1252V23.3333H17.8752V15Z" fill="#AAA0D4"/>
</svg>
</div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, morbi adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc. Sit consectetur facilisis id euismod.</p>
</div>
<div class="icons-list-item">
<div class="icons-list-item-icon">
<svg width="39" height="40" viewBox="0 0 39 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.375 8.33333V3.33333C11.375 2.8913 11.5462 2.46738 11.851 2.15482C12.1557 1.84226 12.569 1.66666 13 1.66666H26C26.431 1.66666 26.8443 1.84226 27.149 2.15482C27.4538 2.46738 27.625 2.8913 27.625 3.33333V8.33333H34.125C34.556 8.33333 34.9693 8.50893 35.274 8.82149C35.5788 9.13405 35.75 9.55797 35.75 10V33.3333C35.75 33.7754 35.5788 34.1993 35.274 34.5118C34.9693 34.8244 34.556 35 34.125 35H4.875C4.44402 35 4.0307 34.8244 3.72595 34.5118C3.4212 34.1993 3.25 33.7754 3.25 33.3333V10C3.25 9.55797 3.4212 9.13405 3.72595 8.82149C4.0307 8.50893 4.44402 8.33333 4.875 8.33333H11.375ZM32.5 21.6667H6.5V31.6667H32.5V21.6667ZM32.5 11.6667H6.5V18.3333H11.375V15H14.625V18.3333H24.375V15H27.625V18.3333H32.5V11.6667ZM14.625 5V8.33333H24.375V5H14.625Z" fill="#AAA0D4"/>
</svg>
</div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, morbi adipiscing elit. Sit consectetur facilisis id euismod. Phasellus semper nunc. Sit consectetur facilisis id euismod.</p>