-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
159 lines (148 loc) · 11.1 KB
/
index.html
File metadata and controls
159 lines (148 loc) · 11.1 KB
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
<!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>Document</title>
<link rel="stylesheet" href="styles/index.css">
</head>
<body>
<section class="frame1">
<div class="frame1__bird">
<svg width="205" height="191" viewBox="0 0 205 191" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="205" height="191" fill="#1E1E1E"/>
<g id="MacBook Pro 16" - 2">
<rect width="1728" height="1117" transform="translate(-452 -163)" fill="#B8DBFF"/>
<g id="text">
</g>
<g id="bird">
<path id="Ellipse 2" d="M185.786 70.5055C185.786 78.4343 177.624 81.6715 166.268 81.6715C137.906 85.8189 157.05 166.533 144.662 70.5055C144.662 62.5767 153.868 56.1492 165.224 56.1492C176.58 56.1492 185.786 62.5767 185.786 70.5055Z" fill="#2C3D94"/>
<ellipse id="Ellipse 3" cx="38.5776" cy="62.512" rx="38.5776" ry="62.512" transform="matrix(0.835482 0.549518 -0.630444 0.776235 114.272 43.3879)" fill="#2C3D94"/>
<rect id="blocker" width="229.187" height="37.4393" transform="matrix(0.680784 -0.732484 0.798976 0.601362 0 167.876)" fill="#B8DBFF"/>
<path id="Polygon 3" d="M32.4891 162.928C35.1379 155.757 42.3022 150.841 50.6835 150.442L71.9988 149.426C76.3737 149.217 78.2779 154.488 74.555 156.502L34.8099 177.993C31.4817 179.793 27.3789 176.761 28.6149 173.415L32.4891 162.928Z" fill="#2C3D94"/>
<g id="wing">
<ellipse id="Ellipse 1" cx="45.0923" cy="23.5679" rx="45.0923" ry="23.5679" transform="matrix(0.900033 -0.435823 0.513197 0.858271 40.9104 110.734)" fill="#2D72A4"/>
<path id="Polygon 1" d="M67.5645 138.992L13.1033 126.773L83.296 90.5067L67.5645 138.992Z" fill="#2D72A4"/>
</g>
<ellipse id="Ellipse 4" cx="172.649" cy="65.4009" rx="2.48161" ry="2.2332" fill="white"/>
<g id="stick">
<path id="Rectangle 12" d="M196.883 64.9471L197.383 64.9471L196.468 65.9276C192.462 70.2201 189.462 75.3508 187.685 80.9472V80.9472L186.621 80.9893V80.9893C188.778 75.4541 191.939 70.3646 195.944 65.9766L196.883 64.9471Z" fill="black"/>
<path id="Ellipse 8" d="M200.364 64.825C198.977 65.8181 198.341 65.608 196.592 65.4539V65.4539C196.968 62.9363 198.969 60.9516 201.514 60.8998C202.139 60.887 202.828 60.9271 203.595 61.0157C202.366 63.2493 201.751 63.8318 200.364 64.825Z" fill="black"/>
<path id="Ellipse 9" d="M193.801 62.7421C194.15 64.4121 193.737 64.902 192.967 66.4239V66.4239C190.912 65.0193 189.954 62.4516 190.825 60.1199C191.044 59.5334 191.336 58.9096 191.702 58.2315C193.176 60.2729 193.452 61.0721 193.801 62.7421Z" fill="black"/>
<path id="Rectangle 13" d="M192.383 64.9471H192.717V64.9471C193.154 66.2586 193.247 67.6601 192.989 69.0181L192.717 70.4471L192.383 70.9471L192.703 69.0266C192.931 67.6611 192.821 66.2605 192.383 64.9471V64.9471Z" fill="black"/>
</g>
<path id="Polygon 2" d="M191.359 77.3048L178.879 79.3108L183.488 68.3613L191.359 77.3048Z" fill="#2C3D94"/>
<rect id="eyelid" x="170" y="58" width="6" height="5" rx="2.5" fill="#2C3D94"/>
</g>
</g>
</svg>
</div>
<div class="frame1__text">
<h3>Pleas for</h3>
<h1>Global peace</h1>
<h2>Grow louder</h2>
<p>World is witnessing largest<br> number of violent confilcts</p>
<h3 class="frame1__text-highlight">Since 1946</h3>
<h3 class="frame1__text-and">and</h3>
<h2> a quarter of the<br>
global population
</h2>
<p>Lives in affected countries</p>
</div>
</section>
<section class="frame2">
<div class="frame2__text">
<div class="frame2__text-firstline">
<h1 class="stat2">1/3</h1>
<h3>of the</h3>
</div>
<h2>world population</h2>
<h3>fear walking in</h3>
<p>in their neighbourhoods <br>
at night</p>
</div>
<div class="frame2__lamp">
<svg width="735" height="614" viewBox="0 0 735 814" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="light">
<path id="light-beam" d="M266.5 44.5L306 35.5L734.5 814H293L266.5 44.5Z" fill="#556CE1"/>
<path id="Rectangle 3" d="M142.184 47H151.612L157 765H135L142.184 47Z" fill="#2C3D94"/>
<path id="Rectangle 4" d="M36 810C36 789.013 53.0132 772 74 772H212C232.987 772 250 789.013 250 810V810H36V810Z" fill="#2C3D94"/>
<rect id="Rectangle 5" x="262.911" y="7" width="15.3734" height="124" transform="rotate(70.5327 262.911 7)" fill="#2C3D94"/>
<rect id="Rectangle 6" x="240" y="9.75" width="56" height="25" rx="9" transform="rotate(-10.0267 240 9.75)" fill="#2C3D94"/>
<ellipse id="Ellipse 5" cx="276.1" cy="27.9461" rx="16.5" ry="4.62416" transform="rotate(-8.76946 276.1 27.9461)" fill="#FEFFD6"/>
<rect id="Rectangle 7" width="15.3016" height="119.284" transform="matrix(-0.320473 0.947258 0.938071 0.346443 35.9037 7)" fill="#2C3D94"/>
<rect id="Rectangle 8" width="53.6727" height="24.9682" rx="9" transform="matrix(-0.983362 -0.181656 -0.166852 0.985982 56.9457 9.75)" fill="#2C3D94"/>
<ellipse id="Ellipse 6" cx="15.8092" cy="4.61964" rx="15.8092" ry="4.61964" transform="matrix(-0.987259 -0.159121 -0.146063 0.989275 38.6761 25.8916)" fill="#FEFFD6"/>
<g id="guy">
<path id="Rectangle 14" d="M447.187 628.504C448.716 622.642 452.797 617.776 458.302 615.247V615.247C466.34 611.556 475.845 613.523 481.758 620.102L482.07 620.449C486.624 625.516 488.413 632.489 486.861 639.122L469.749 712.283L427.879 702.49L447.187 628.504Z" fill="#161F4D"/>
<rect id="Rectangle 15" x="471.531" y="635.54" width="16.11" height="49.1697" transform="rotate(-23.3907 471.531 635.54)" fill="#161F4D"/>
<path id="Rectangle 16" d="M494.879 666.144L524.803 677.234C528.473 678.594 530.346 682.672 528.985 686.342V686.342C527.649 689.948 523.682 691.83 520.044 690.585L491.014 680.644L494.879 666.144Z" fill="#161F4D"/>
<rect id="Rectangle 17" x="456.673" y="616.144" width="16.11" height="49.1697" transform="rotate(55.7322 456.673 616.144)" fill="#161F4D"/>
<path id="Rectangle 18" d="M431.024 644.847L425.78 676.326C425.137 680.187 421.485 682.796 417.624 682.152V682.152C413.831 681.521 411.234 677.979 411.771 674.172L416.055 643.788L431.024 644.847Z" fill="#161F4D"/>
<path id="Rectangle 19" d="M429.26 697.171L449.598 702.624C449.598 702.624 439.232 744.8 438.776 745.312C438.321 745.824 413.98 754.158 413.98 754.158L429.26 697.171Z" fill="#161F4D"/>
<path id="Rectangle 20" d="M420.353 738.801L427.379 740.145L438.879 745.144L417.539 777.99C414.253 783.048 407.393 784.309 402.524 780.749V780.749C397.822 777.313 396.811 770.71 400.268 766.024L420.353 738.801Z" fill="#161F4D"/>
<path id="Rectangle 21" d="M443.648 706.599L462.768 697.434C462.768 697.434 482.363 736.194 482.348 736.88C482.333 737.566 469.149 759.803 469.149 759.803L443.648 706.599Z" fill="#161F4D"/>
<path id="Rectangle 22" d="M463.793 746.914L469.319 718.887L482.34 736.884L488.433 778.063C489.237 783.495 485.49 788.551 480.059 789.363V789.363C474.607 790.179 469.53 786.406 468.738 780.951L463.793 746.914Z" fill="#161F4D"/>
<path id="Ellipse 10" d="M499.379 598C499.379 606.837 491.768 614 482.379 614C472.99 614 465.379 606.837 465.379 598C465.379 589.163 472.99 582 482.379 582C491.768 582 499.379 589.163 499.379 598Z" fill="#161F4D"/>
</g>
</g>
</svg>
<div class="observe"></div>
</div>
</section>
<section class="frame3">
<div class="frame3__text">
<h2>a record</h2>
<h1 class="stat3">100 million people</h1>
<h2>had been forcibly<br>displaced worldwide<br>(may 2022)</h2>
</div>
<div class="frame3__trip">
<svg width="939" height="589" viewBox="0 0 939 689" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="trip">
<g id="Line 1" filter="url(#filter0_d_124_29)">
<path d="M760.747 13.4579L826.742 111.924C859.084 160.179 863.361 221.981 837.974 274.23V274.23C805.22 341.641 730.789 378.108 657.448 362.678L575.793 345.5L478.106 324.948C407.929 310.184 334.785 321.046 271.928 355.568L49.4621 477.746" stroke="#2C3D94" stroke-width="9" stroke-dasharray="18 18"/>
</g>
<circle id="Ellipse 11" cx="52.1719" cy="362.5" r="34.5" fill="#2C3D94"/>
<path id="Polygon 4" d="M52.679 469.434L20.9846 377.164L83.4631 376.857L52.679 469.434Z" fill="#2C3D94"/>
<circle id="Ellipse 12" cx="52.6719" cy="363" r="20" fill="#B8DBFF"/>
</g>
<defs>
<filter id="filter0_d_124_29" x="43.2959" y="10.9526" width="819.601" height="478.738" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_124_29"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_124_29" result="shape"/>
</filter>
</defs>
</svg>
<div class="frame3__trip-blocker"></div>
<div class="frame3__trip-observe"></div>
</div>
</section>
<section class="frame4">
<div class="frame4__text">
<img src="images/family-with-balloons.svg" alt="" style="float: left; margin-right: 10px;">
<h2>
135 countries has adapted access to information laws, with at least 30 since 2015. This is a positive indication of the growing recognition of transparency and accountability in governance.
</h2>
</div>
<div class="frame4__window-blinds">
<div class="roof"></div>
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>