-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (176 loc) · 33.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="favicons/favicon/favicon-16x16.png"
/>
<title>Shortly</title>
<link rel="stylesheet" href="./styles/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap"
rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
</head>
<body>
<div class="page">
<header class="header">
<a href="#" class="header__title-link">
<div class="header__title-link__words header__title-link__word-1">
<span>S</span>
<span>H</span>
<span>O</span>
<span>R</span>
<span>T</span>
<span>L</span>
<span>Y</span>
</div></a>
<div class="header__links">
<a href="#" class="header__links__link">Features</a>
<a href="#" class="header__links__link">Pricing</a>
<a href="#" class="header__links__link">Resources</a>
</div>
<div class="burger-menu">
<a href="" class="burger-menu_button"><span class="burger-menu_lines"></span></a>
<nav class="burger-menu_nav">
<a href="#" class="header__links__link">Features</a>
<a href="#" class="header__links__link">Pricing</a>
<a href="#" class="header__links__link">Resources</a>
<a href="#" class="header__links__link">Login</a>
<a href="#" class="header__links__link header__user-links__link btn">Sign Up</a>
</nav>
<div class="burger-menu_overlay"></div>
</div>
<div class="header__links header__user-links">
<a href="#" class="header__links__link header__user-links__link btn">Login</a>
<a href="#" class="header__links__link header__user-links__link btn">Sign Up</a>
</div>
</header>
<div class="main">
<div class="main__info">
<h1 class="main__info__title">More than just shorter links</h1>
<p class="main__info__secondary">
Build your brand’s recognition and get detailed insights on how your
links are performing.
</p>
</div>
<div class="main__img">
<svg class="main__img__img" xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="a" x1="0%" x2="100%" y1="50%" y2="50%"><stop offset="0%" stop-color="#183866"/><stop offset="100%" stop-color="#1A7FC1"/></linearGradient><linearGradient id="b" x1="-.13%" x2="100%" y1="50.057%" y2="50.057%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="176.072%" x2="310.393%" y1="-566.037%" y2="-534.629%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="58.928%" x2="52.269%" y1="-257.998%" y2="-277.344%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="e" x1="156.099%" x2="8.109%" y1="-63.273%" y2="-76.114%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="f" x1="2361.044%" x2="2162.651%" y1="-16584.906%" y2="-16647.547%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="g" x1="241.391%" x2="133.142%" y1="-426.052%" y2="-412.195%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="h" x1="106.85%" x2="-35.821%" y1="22.502%" y2="19.27%"><stop offset="0%"/><stop offset="100%" stop-opacity="0"/></linearGradient><linearGradient id="i" x1="14.169%" x2="114.168%" y1="-41.335%" y2="-41.335%"><stop offset="0%" stop-color="#183866"/><stop offset="100%" stop-color="#1A7FC1"/></linearGradient><linearGradient id="j" x1="40.386%" x2="71.43%" y1="39.515%" y2="67.977%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="k" x1="-12.531%" x2="93.689%" y1="44.923%" y2="53.42%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="l" x1="53.702%" x2="43.721%" y1="42.271%" y2="80.595%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="m" x1="190.926%" x2="102.154%" y1="-333.246%" y2="-335.028%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="n" x1="168.578%" x2="111.53%" y1="-126.252%" y2="-126.942%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="o" x1="56.989%" x2="28.128%" y1="43.618%" y2="69.958%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="p" x1="58.095%" x2="57.212%" y1="-1473.571%" y2="-1370.204%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient><linearGradient id="q" x1="-.04%" x2="99.996%" y1="49.993%" y2="49.993%"><stop offset="0%" stop-color="#ECC4D7"/><stop offset="42%" stop-color="#EFD4D1"/><stop offset="100%" stop-color="#F2EAC9"/></linearGradient><linearGradient id="r" x1="99.032%" x2="199.03%" y1="-163.287%" y2="-163.287%"><stop offset="0%" stop-color="#ECC4D7"/><stop offset="42%" stop-color="#EFD4D1"/><stop offset="100%" stop-color="#F2EAC9"/></linearGradient><linearGradient id="s" x1="124.306%" x2="224.306%" y1="-84.564%" y2="-84.564%"><stop offset="0%" stop-color="#ECC4D7"/><stop offset="42%" stop-color="#EFD4D1"/><stop offset="100%" stop-color="#F2EAC9"/></linearGradient><linearGradient id="t" x1="128.89%" x2="24.06%" y1="100.36%" y2="153.095%"><stop offset="0%" stop-color="#362958" stop-opacity=".501"/><stop offset="100%" stop-color="#34313D" stop-opacity="0"/></linearGradient><linearGradient id="u" x1="3990.942%" x2="3874.36%" y1="-34225.187%" y2="-34268.317%"><stop offset="0%"/><stop offset="99%" stop-opacity="0"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><path fill="#EFF1F7" d="M583.08 92.214c-20.973-22.385-37.208-49.107-62.275-67.375-39.374-28.754-96.041-31.558-142.08-13.494-46.04 18.063-81.905 54.474-105.544 95.703-12.435 21.692-22.202 45.354-40.423 63.08-15.403 14.976-35.648 24.531-54.843 34.938-30.948 16.733-60.752 36.952-80.78 64.695-20.026 27.743-28.98 64.18-16.178 95.446 8.633 21.097 26.022 37.883 43.836 53.081 20.964 17.869 43.496 34.601 69.5 45.248 32.555 13.246 68.694 16.094 104.134 17.442 62.828 2.38 125.757.601 188.319-5.323 51.23-4.844 104.011-13.113 146.874-39.88 60.043-37.484 91-106.163 97.97-173.51 2.836-26.936 2.118-54.928-8.964-79.92-26.504-59.78-98.017-45.798-139.547-90.131z"/><path fill="#3F3D56" d="M178.317 202.334s-16.6-2.947-21.25 8.669c-4.65 11.616 0 51.733 0 51.733L219 307l-40.683-104.666z"/><path fill="#2BD0D0" d="M256.202 379.727l-24.555 7.008c-3.568 1.01-7.31-.952-8.372-4.386-1.047-3.438.987-7.046 4.55-8.069l24.522-7.014c3.565-1.01 7.307.947 8.372 4.379 1.058 3.433-.96 7.045-4.517 8.082z"/><circle cx="255" cy="395" r="11" fill="#25233A"/><circle cx="253.5" cy="397.5" r="5.5" fill="#3F3D56"/><circle cx="210" cy="384" r="11" fill="#25233A"/><path fill="url(#a)" d="M214 384.5a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z"/><circle cx="207" cy="399" r="11" fill="#25233A"/><path fill="#3F3D56" d="M216 399.5a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z"/><path fill="#2BD0D0" d="M257.085 390.874l-50.787-10.046c-3.574-.717-5.884-4.13-5.168-7.636.732-3.5 4.21-5.764 7.785-5.066l50.787 10.027c3.574.717 5.884 4.13 5.168 7.637-.723 3.507-4.204 5.781-7.785 5.084z"/><path fill="#2BD0D0" d="M226 310h14v59c0 3.866-3.133 7-6.997 7a6.999 6.999 0 01-6.996-7v-59H226z"/><path fill="#2BD0D0" d="M231.187 386.708l-24.537 7.025c-3.568 1.014-7.314-.949-8.375-4.388-1.047-3.44.987-7.05 4.548-8.074l24.537-7.005c3.564-1.01 7.304.948 8.368 4.381 1.039 3.435-.99 7.034-4.541 8.06z"/><path fill="url(#b)" d="M236 386.26l-3.125.551a12.89 12.89 0 01-2.875.172l1.305-.228a10.302 10.302 0 002.507-.755l2.188.26z"/><path fill="url(#c)" d="M261 372.738a6.914 6.914 0 01-1.46 4.262L239 372.65a7.113 7.113 0 001.098-2.462l12.654-3.923a6.201 6.201 0 014.913.579c1.5.867 2.609 2.324 3.083 4.048.164.6.249 1.222.252 1.846z"/><path fill="url(#d)" d="M225.22 371.103a5.776 5.776 0 01-.22-1.58V311h5.943v63.07c-.059.31-.04.627.057.93a9.278 9.278 0 00-2.845-.511c-.69-.04-1.385-.04-2.076 0l.425-.1c.262-.04-.94-2.091-1.283-3.286z" opacity=".31"/><path fill="url(#e)" d="M262.289 389.8c-.97.523-2.061.797-3.17.796a7.063 7.063 0 01-1.33-.13l-22.407-4.406-1.867-.363a6.54 6.54 0 01-2.133 1.055l-1.11.317-23.025 6.666c-3.514 1.007-7.202-.943-8.247-4.362 1.997 1.805 5.029 1.973 7.223.401 2.811-1.896 14.002-4.743 20.341-6.257 2.996-.698 5.288-3.05 5.848-6 .016-.173.042-.346.08-.517 1.056 1.113 2.997 2.362 6.505 3.423 8.64 2.589 22.667 4.304 22.667 4.304s2.532 2.42.625 5.073z" opacity=".31"/><path fill="url(#f)" d="M264 388a7.624 7.624 0 01-2 2 119.75 119.75 0 002-2z"/><path fill="url(#g)" d="M226.3 370.559a6.82 6.82 0 001.7 3.13c-.21.039-.425.092-.641.151L206.088 380c-3.271-.813-5.426-3.865-5.044-7.146.381-3.28 3.181-5.781 6.556-5.854a7.14 7.14 0 011.35.132l17.35 3.427z"/><path fill="#503164" d="M259 89.407s-.276-20.805-17.075-19.01c-16.8 1.793-15.511-5.095-22.687-4.339-7.175.757-15.51 7.786-13.117 16.468 2.395 8.682-6.332 10.623-12.064 17.21-5.733 6.587 1.349 11.976 11.006 18.416 9.657 6.44-.6 4.773 5.125 14.955 5.726 10.181 25.107-2.825 25.107-2.825L259 89.407z"/><path fill="#2BD0D0" d="M122.664 434.601l11.73.399v-93.745s.59-24.241 23.452-26.673c22.861-2.431 230.196-32.466 230.196-32.466s8.218-.87 12.951 14.901c4.733 15.771 9.34 77.787 9.34 77.787l63.64 8.577s1.68-109.55-21.302-115.595c-22.981-6.045-323.522 24.76-323.522 24.76s-22.29 116.352-6.485 142.055z"/><path fill="url(#h)" d="M122.664 434.601l11.73.399v-93.745s.59-24.241 23.452-26.673c22.861-2.431 230.196-32.466 230.196-32.466s8.218-.87 12.951 14.901c4.733 15.771 9.34 77.787 9.34 77.787l63.64 8.577s1.68-109.55-21.302-115.595c-22.981-6.045-323.522 24.76-323.522 24.76s-22.29 116.352-6.485 142.055z" opacity=".197"/><path fill="#2BD0D0" d="M62 303.784s5.744-31.756 46.144-40.079l285.183-32.643s27.996-1.16 40.804 6.587c12.808 7.746 31.088 14.168 38.583 49.223 7.495 35.056 9.286 94.942 9.286 94.942l-7.09 1.1s-10.348-108.44-21.312-115.306c-10.963-6.865-307.402 35.255-307.402 35.255s-20.561 4.088-22.352 34.532c-1.79 30.443 0 96.605 0 96.605L62 409.057V303.784z"/><path fill="url(#i)" d="M355.425 243.844c-14.762-1.9-29.644-3.276-44.519-2.72-11.18.433-22.286 1.966-33.372 3.493l-97.775 13.503c-1.66.23-3.55.603-4.38 2.044-1.592 2.752 2.15 5.464 5.182 6.512 32.51 11.256 67.243 22.656 100.708 14.63 15.3-3.669 29.511-11.288 45.03-13.935 15.518-2.647 31.448-.21 46.933-2.706 14.557-2.345 28.417-9.009 43.172-9.074 4.525 0 9.183.577 13.475-.839 4.293-1.415 8.088-5.739 6.9-10.05-13.853-.478-29.404-3.007-42.992-.262-13.449 2.712-24.894-.596-38.362-.596z" opacity=".19"/><path fill="#2BD0D0" d="M267 259.38l.57 2.114s16.881 10.173 16.775 10.501c-.106.328 70.024-16.24 70.024-16.24L356 251l-89 8.38z"/><path fill="url(#j)" d="M267 259.38l.57 2.114s16.881 10.173 16.775 10.501c-.106.328 70.024-16.24 70.024-16.24L356 251l-89 8.38z"/><path fill="#2BD0D0" d="M268 259.364L330.107 246 356 251.054 285.442 268z"/><path fill="url(#k)" d="M268 259.364L330.107 246 356 251.054 285.442 268z"/><path fill="#2BD0D0" d="M247.832 270.484l14.457.512s3.672.228 4.62-2.717c.95-2.945-5.89-9.16-6.622-9.277-.733-.118-19.76 5.22-17.017 10.556l4.562.926z"/><path fill="url(#l)" d="M247.832 270.484l14.457.512s3.672.228 4.62-2.717c.95-2.945-5.89-9.16-6.622-9.277-.733-.118-19.76 5.22-17.017 10.556l4.562.926z"/><path fill="#2BD0D0" d="M79 416.056l-7.058 21.677c-20.473 7.351-37.88 0-37.88 0L29 415s25.535 8.56 50 1.056z"/><path fill="url(#m)" d="M79 416.056l-7.058 21.677c-20.473 7.351-37.88 0-37.88 0L29 415s25.535 8.56 50 1.056z"/><path fill="#2BD0D0" d="M87 396l-2.284 16.943-5.786 3.008c-24.648 7.42-50.415-1.038-50.415-1.038l-4.443-3.283L22 396h65z"/><path fill="url(#n)" d="M87 396l-2.284 16.943-5.786 3.008c-24.648 7.42-50.415-1.038-50.415-1.038l-4.443-3.283L22 396h65z"/><ellipse cx="54.5" cy="395" fill="#2BD0D0" rx="32.5" ry="6"/><ellipse cx="54.5" cy="395" fill="url(#o)" rx="32.5" ry="6"/><path fill="#2BD0D0" d="M39.641 265.03c-3.182-1.515-6.603-2.658-9.356-4.87-5.547-4.5-6.953-12.248-8.69-19.198-1.736-6.951-5.097-14.593-11.944-16.587-2.562-.737-5.567-.445-7.515 1.39-2.053 1.933-2.47 5.11-1.908 7.914.561 2.804 1.928 5.316 2.985 7.974a36.878 36.878 0 012.172 19.477c-.865 5.389-2.932 10.851-1.605 16.134 2.252 8.964 13.47 14.22 13.78 23.457.212 6.233-4.885 12.001-3.73 18.135.852 4.538 5.005 8.08 5.23 12.692.25 5.23-4.662 9.655-4.424 14.885.237 5.23 5.427 8.725 8.815 12.839a21.453 21.453 0 014.827 12.193c.178 2.791-.179 5.682.726 8.327.66 1.933 1.98 3.575 3.004 5.316 1.13 1.88 1.981 3.914 3.341 5.655a13.696 13.696 0 0014.725 4.651c1.05-6.95.132-14.04.423-21.065.574-13.609 5.691-27.324 2.416-40.535-1.201-4.844-3.512-9.443-3.922-14.413-.363-4.44.812-8.838 1.631-13.217 1.69-9.044 1.664-18.394.97-27.538-.547-7.256-5.618-10.599-11.95-13.616z"/><path fill="#2BD0D0" d="M59.752 300.767c-.053 6.062 1.33 12.33-.612 18.085-1.47 4.362-4.702 7.934-6.371 12.223-3.85 9.899 1.33 21 .273 31.57-.44 4.354-1.936 8.537-2.88 12.813a51.236 51.236 0 00-.851 16.485 4.17 4.17 0 003.325 4.342A51.942 51.942 0 0062.711 399a26.638 26.638 0 013.445-18.59c5.274-8.63 15.522-14.446 17.43-24.359 1.29-6.712-1.715-13.524-1.502-20.355a21.886 21.886 0 014.482-12.548c2.48-3.227 5.839-5.723 8.147-9.07 5.546-8.066 3.817-18.848 2.168-28.494-1.65-9.647-2.607-20.748 3.91-28.057 2.062-2.31 4.748-4.044 6.617-6.513 4.163-5.504 3.112-13.983-1.73-18.902-4.84-4.92-12.635-6.28-19.218-4.116a13.86 13.86 0 00-7.01 4.76c-3.325 4.714-1.995 11.154-.585 16.757 1.23 4.867 2.221 10.483.539 15.39-1.257 3.651-4.443 5.63-7.15 8.172a38.903 38.903 0 00-12.502 27.692z"/><path fill="#30C59B" d="M53.062 354.522c-.938 6.593-2.292 13.239-2.57 19.851v.665a1.757 1.757 0 01-.111.479 51.684 51.684 0 00-.866 16.501c.036.893.261 1.768.66 2.566-.032.279-.072.551-.111.83a13.702 13.702 0 01-14.73-4.652c-1.32-1.741-2.213-3.775-3.342-5.655-1.057-1.748-2.345-3.39-3.005-5.317-.905-2.659-.549-5.536-.727-8.327a21.453 21.453 0 00-4.828-12.196c-3.389-4.087-8.587-7.516-8.818-12.833-.231-5.317 4.676-9.656 4.425-14.887-.224-4.612-4.379-8.154-5.23-12.693-1.157-6.135 3.962-11.903 3.731-18.137-.31-9.238-11.532-14.495-13.785-23.46-1.32-5.284.74-10.747 1.605-16.136a36.876 36.876 0 00-2.146-19.46c-1.057-2.658-2.424-5.163-2.986-7.975-.561-2.81-.145-5.981 1.909-7.922 1.982-1.834 4.954-2.126 7.517-1.389 6.856 1.994 10.204 9.664 11.948 16.615 1.744 6.952 3.144 14.694 8.692 19.2 2.742 2.227 6.176 3.356 9.36 4.872 6.34 3.017 11.413 6.36 11.955 13.55.66 9.145.72 18.496-.97 27.541-.82 4.38-1.982 8.78-1.632 13.219.35 4.44 2.272 8.64 3.527 12.946.139.485.277.977.396 1.469 1.665 6.839 1.13 13.757.132 20.735z"/><path fill="url(#p)" d="M49.718 394a7.789 7.789 0 01-.502-2.488c-.43-5.36-.216-10.78.637-16.047.023-.155.052-.31.08-.465-.171 6.346.374 12.744-.215 19z"/><path fill="#30C59B" d="M107.393 251.014c-1.871 2.47-4.562 4.202-6.627 6.513-6.527 7.303-5.568 18.41-3.916 28.057 1.651 9.646 3.383 20.428-2.172 28.495-2.31 3.32-5.674 5.842-8.159 9.069a21.865 21.865 0 00-4.49 12.548c-.212 6.831 2.798 13.643 1.506 20.355-1.911 9.913-12.175 15.742-17.457 24.36A26.644 26.644 0 0062.654 399a51.824 51.824 0 01-10.064-2.715 5.425 5.425 0 01-2.344-1.415 2.503 2.503 0 01-.247-.345 6.232 6.232 0 01-.699-2.55c-.599-5.506-.3-11.073.886-16.484.033-.16.073-.319.113-.478.946-4.11 2.345-8.14 2.771-12.336a39.84 39.84 0 00-.16-8.166c1.006-6.971 1.545-13.882-.153-20.668-.12-.49-.26-.982-.4-1.467.127-.425.273-.85.44-1.268 1.672-4.289 4.909-7.86 6.38-12.223 1.939-5.756.56-12.023.613-18.085.087-10.47 4.823-20.58 12.429-27.725 2.71-2.542 5.901-4.52 7.16-8.172 1.685-4.907.666-10.523-.54-15.39-1.418-5.603-2.764-12.043.587-16.757 1.665-2.337 4.29-3.857 7.02-4.76 6.567-2.165 14.407-.804 19.249 4.116 4.842 4.92 5.868 13.43 1.698 18.902z"/><path fill="#2BD0D0" d="M225.573 146.146s-27.817 4.3-40.684 34.977c-12.867 30.677-6.176 68.683-5.951 72.027.225 3.344 39.428 17.85 50.635 17.85 11.208 0 13.542-11.229 13.542-11.229l-19.803-8.433 60.17-6.949h10.804l-5.951 10.032s11.743 1.23 19.592 1.511c7.848.281 13.178-15.24 14.057-22.959.88-7.717-34.667-75.458-39.977-79.47-5.31-4.013-19.717-13.817-56.434-7.357z"/><path fill="url(#q)" d="M258.392 88.776s5.032 2.83 4.58 11.985c-.453 9.155-3.29 22.932-6.153 26.5-2.864 3.57-12.88 4.968-12.88 4.968s5.464 12.977 9.53 16.326c4.066 3.349-4.086 15.687-12.015 11.639-7.928-4.049-17.12-14.216-17.12-14.216s6.612-12.245 4.376-18.69c-2.235-6.445-10.772-29.064-4.376-35.242 6.396-6.18 20.186-15.035 34.058-3.27z"/><path fill="#FFF" opacity=".25" d="M214.334 190L210 244.055 223.238 251 234 249.122l-13.428-16.504zM284 187s17.909 42.077 9.97 57l-6.116-1.16L284 187z"/><path fill="url(#r)" d="M235.522 258.045s-6.766 5.775-3.746 10.267c3.02 4.491 6.625 4.363 9.631 2.355 3.006-2.009 8.911-6.776 15.946-4.588 7.035 2.188 8.744 3.58 8.744 3.58s3.705-2.316 2.744-4.639c-.962-2.323-8.32-9.85-10.452-10.825-2.132-.975-10.983 2.021-10.983 2.021s-6.503-1.758-11.884 1.83z"/><path fill="url(#s)" d="M295.191 245.598s-6.385.759-7.998 4.957c-1.613 4.198-2.193 4.71-2.193 4.71s3.606.69 5.106-1.264 3.059-1.133 3.059-1.133l-.447 2.507s9.798 1.477 14.224-.11c4.425-1.589 6.325-3.453 6.325-3.453l1.733-4.24s-4.18-3.03-7.332-3.5c-3.152-.47-12.477 1.526-12.477 1.526z"/><path fill="#25233A" d="M328.893 290s21.934 16.687 19.984 39.259c-1.949 22.572-4.813 56.087-4.813 56.087s-8.846 3.722-14.707 0c-5.862-3.722-9.411-54.65-12.315-59.513-2.904-4.864-20.375-26.79-39.042-28.679L328.893 290z"/><path fill="#3F3D56" d="M219 306.058s10.444 9.895 29.062 13.002c18.619 3.107 27.297 5.7 32.987 21.605 5.69 15.905 11.148 50.137 12.935 53.963 1.786 3.826 9.382 1.874 9.382 1.874s4.296-4.895 4.296-32.114c0-37.946 2.655-45.724-6.913-55.256-9.568-9.533-18.272-12.132-18.272-12.132L219 306.058z"/><path fill="#25233A" d="M294 396l1.82 14.197h3.408s21.948 1.187 22.636.675c.688-.513-1.057-11.243-9.372-10.94-8.316.304-8.861-2.023-8.861-2.023L294 396zm37-9.844L334.518 400l38.437-5.212s1.353-9.093-10.823-8.191c-3.214.234-5.608 2.465-9.471 2.485-3.863.02-7.563-1.543-9.511-4.082L331 386.156z"/><path fill="#2BD0D0" d="M461.804 212.337l-142.243 7.654c-3.44.181-6.376-2.47-6.561-5.926V112.473c.003-4.101 3.267-7.448 7.348-7.535l141.661-2.937a6.835 6.835 0 014.886 1.917 6.898 6.898 0 012.105 4.827v95.971c-.005 4.056-3.164 7.402-7.196 7.621z"/><path fill="#2BD0D0" d="M469.804 212.337l-142.25 7.655c-3.44.177-6.372-2.478-6.554-5.934V112.473c-.004-4.102 3.26-7.452 7.342-7.535l141.68-2.937c3.777-.07 6.898 2.943 6.978 6.738v95.977c-.005 4.057-3.164 7.403-7.196 7.621z"/><path fill="url(#t)" d="M469.804 212.337l-142.25 7.655c-3.44.177-6.372-2.478-6.554-5.934V112.473c-.004-4.102 3.26-7.452 7.342-7.535l141.68-2.937c3.777-.07 6.898 2.943 6.978 6.738v95.977c-.005 4.057-3.164 7.403-7.196 7.621z"/><path fill="#3A3054" d="M427.773 251.138L391.478 255s-11.053-2.23-10.455-3.862c.599-1.633 12.156-3.205 12.156-3.205v-65.804c-.1-.146-1.621-2.084-5.789-3.319-.807-.239-1.628-.43-2.459-.57a7.252 7.252 0 01-2.06-.624c-2.479-1.28.26-3.51 4.107-3.61a9.625 9.625 0 011.802.106h27.913s10.568 2.973 11.08 17.811c.511 14.839 0 59.215 0 59.215z"/><path fill="#51466B" d="M398 251.277L391.322 255s-10.888-2.23-10.299-3.863c.59-1.632 11.995-3.205 11.995-3.205v-65.809c-.138-.152-1.807-1.898-5.703-3.318a28.64 28.64 0 00-4.452-1.195c-2.442-1.28.255-3.51 4.046-3.61 3.228.445 9.585 4.028 9.998 6.073.412 2.044 1.093 71.204 1.093 71.204z"/><path fill="url(#u)" d="M263 389c-.881 1.001-1.29 1.37-.77.547.27-.159.527-.342.77-.547z"/></g></svg>
</div>
</div>
<div class="shortener">
<img src="images/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background.jpg" alt=""
width="1428" height="250" class="shortener__img">
<form class="shortener__form">
<input type="text" placeholder="Shorten a link here..."class="shortener__form__inputer" id="form-input">
<input type="button" value="Shorten it!"class="shortener__form__button btn" id="form-button">
<p id = "alert-text"class="shortener__form__text">Invalid URL</p>
</div>
</form>
<div class="shortened-links">
<div id="shortened-links1" class="shortened-links__section">
<div id="shortened-link1" class="shortened-links__link"></div>
<span id="tickimg1" class = "shortened-links__tick">✓</span>
<svg class="shortened-links__button" onclick="copy('shortened-link1', tickimg1)" id="copyimg1"height = "30px" aria-hidden="true" focusable="false" data-prefix="far" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path></svg>
</div>
<div id="shortened-links2" class="shortened-links__section">
<div id="shortened-link2" class="shortened-links__link"></div>
<span id="tickimg2" class = "shortened-links__tick">✓</span>
<svg class="shortened-links__button" onclick="copy('shortened-link2', tickimg2)" id="copyimg2" height = "30px" aria-hidden="true" focusable="false" data-prefix="far" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path></svg>
</div>
<div id="shortened-links3" class="shortened-links__section">
<div id="shortened-link3" class="shortened-links__link"></div>
<span id="tickimg3" class = "shortened-links__tick">✓</span>
<svg class="shortened-links__button" onclick="copy('shortened-link3', tickimg3)" id="copyimg3" height = "30px" aria-hidden="true" focusable="false" data-prefix="far" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path></svg>
</div>
</div>
<div class="info">
<span class = "info__title">
<h1 class = "info__title__main">Advanced Statistics</h1>
<p>Track how your links are performing
across the web<br/> with our advanced statistics dashboard.</p>
</span>
</div>
<div class="cards">
<div class="cards__card1 cards__card">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path fill="#2BD0D0" d="M36.406 11.719c.648 0 1.172.524 1.172 1.172v24.765h1.25a1.172 1.172 0 110 2.344H1.172a1.172 1.172 0 110-2.344h1.25V24.61c0-.647.524-1.172 1.172-1.172H8.28c.648 0 1.172.525 1.172 1.172v13.047h2.344v-8.36c0-.646.524-1.171 1.172-1.171h4.687c.648 0 1.172.525 1.172 1.172v8.36h2.344V19.921c0-.647.524-1.172 1.172-1.172h4.687c.648 0 1.172.525 1.172 1.172v17.734h2.344V12.891c0-.648.524-1.172 1.172-1.172zm-1.172 2.344h-2.343v23.593h2.343V14.063zm-9.375 7.03h-2.343v16.563h2.343V21.094zm-9.375 9.376h-2.343v7.187h2.343V30.47zM7.11 25.78H4.766v11.875h2.343V25.781zM34.062 0a3.52 3.52 0 013.516 3.516 3.52 3.52 0 01-3.516 3.515c-.72 0-1.389-.217-1.947-.59l-4.073 3.055a3.52 3.52 0 01-3.355 4.567 3.496 3.496 0 01-1.514-.344l-4.689 4.688c.22.459.344.973.344 1.515a3.52 3.52 0 01-3.515 3.515 3.52 3.52 0 01-3.488-3.949l-3.45-1.724a3.503 3.503 0 01-2.438.986 3.52 3.52 0 01-3.515-3.516 3.52 3.52 0 013.515-3.515 3.52 3.52 0 013.488 3.949l3.45 1.725a3.503 3.503 0 013.952-.643l4.689-4.688a3.496 3.496 0 01-.344-1.515 3.52 3.52 0 013.515-3.516c.72 0 1.39.218 1.948.59l4.073-3.054A3.52 3.52 0 0134.063 0zm-18.75 18.75c-.646 0-1.171.526-1.171 1.172 0 .646.525 1.172 1.171 1.172.647 0 1.172-.526 1.172-1.172 0-.646-.525-1.172-1.172-1.172zm-9.374-4.688c-.647 0-1.172.526-1.172 1.172 0 .646.525 1.172 1.171 1.172.647 0 1.172-.526 1.172-1.172 0-.646-.525-1.171-1.171-1.171zm18.75-4.687c-.647 0-1.172.526-1.172 1.172 0 .646.525 1.172 1.172 1.172.646 0 1.171-.526 1.171-1.172 0-.646-.525-1.172-1.172-1.172zm9.375-7.031c-.647 0-1.172.526-1.172 1.172 0 .646.525 1.171 1.172 1.171.646 0 1.171-.525 1.171-1.171s-.525-1.172-1.172-1.172z"/></svg>
<h2>Brand Recognition</h2>
<p>Boost your brand recognition with each click. Generic links don’t mean a
thing. Branded links help instil confidence in your content.</p>
</div>
<hr class="cards__line1 cards__line" />
<div class="cards__card2 cards__card">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path fill="#2BD0D0" d="M19.968 0c11.01 0 19.969 8.958 19.969 19.968s-8.958 19.969-19.969 19.969C8.958 39.937 0 30.979 0 19.968 0 8.958 8.958 0 19.968 0zm7.805 35.579c-4.863-2.402-10.746-2.402-15.609 0a17.339 17.339 0 007.804 1.862 17.34 17.34 0 007.805-1.862zm-6.556-33.02V6.24H18.72V2.56a17.362 17.362 0 00-9.492 3.656l2.798 2.797-1.765 1.765L7.373 7.89a17.41 17.41 0 00-4.678 9.582h4.793v2.497H2.496c0 5.805 2.857 10.943 7.227 14.122 6.217-3.714 14.274-3.714 20.49 0 4.37-3.179 7.228-8.317 7.228-14.123h-4.992v-2.496h4.793a17.41 17.41 0 00-4.678-9.582l-2.888 2.888-1.765-1.765 2.798-2.797a17.362 17.362 0 00-9.492-3.657zm-2.437 8.292c.332-1.034 2.045-1.034 2.377 0 .635 1.978 3.804 11.955 3.804 14.11a4.997 4.997 0 01-4.993 4.992 4.997 4.997 0 01-4.992-4.992c0-2.155 3.17-12.132 3.804-14.11zm1.188 4.567c-1.233 4.047-2.496 8.522-2.496 9.543a2.5 2.5 0 002.496 2.496 2.5 2.5 0 002.497-2.496c0-1.02-1.263-5.496-2.497-9.543z"/></svg>
<h2>Detailed Records</h2>
<p>Gain insights into who is clicking your links. Knowing when and
where people engage with your content helps inform better decisions.</p>
</div>
<hr class="cards__line2 cards__line" />
<div class="cards__card3 cards__card">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#2BD0D0" d="M46.608 6.02a.975.975 0 00-.927-.047l-7.624 3.591a8.283 8.283 0 00-4.728 6.837l-.196 2.436-3.95 6.561v-2.801c0-.01-.006-.017-.006-.027a.974.974 0 00-.046-.284l-1.838-5.514 3.753-7.504a.984.984 0 00-.099-1.03l-5.9-7.867a1.019 1.019 0 00-1.573 0L17.573 8.24a.984.984 0 00-.093 1.03l3.753 7.503-1.838 5.514a.974.974 0 00-.047.284v3.951l-6.127-9.299c-.007-.01-.02-.017-.026-.026a.995.995 0 00-.211-.215c-.02-.013-.036-.03-.056-.042-.02-.013-.022-.02-.035-.027l-3.605-2.085-1.497-2.271L5.628 9.27a.983.983 0 00-1.147-.386L.654 10.227a.983.983 0 00-.491 1.468l2.705 4.107 1.492 2.27.492 4.137a.36.36 0 00.01.04c.004.02.009.041.015.061a.973.973 0 00.116.295c.007.01.007.023.014.033.007.01 14.624 22.165 14.695 22.225A4.87 4.87 0 0024.255 48c.4 0 .8-.05 1.19-.145a4.886 4.886 0 003.028-2.235l13.08-21.698 2.065-1.307a8.343 8.343 0 002.66-2.721 8.259 8.259 0 001.18-4.651l-.383-8.42a.984.984 0 00-.467-.803zm-7.122 17.524l-1.522 2.527-5.054-3.048 1.524-2.527 5.052 3.048zM21.315 38.446V23.58h5.9v5.08l-5.9 9.786zm1.693-20.766h2.515l1.31 3.933h-5.136l1.31-3.933zm1.257-6.885a.983.983 0 110-1.966.983.983 0 010 1.966zm0-8.194l4.75 6.331-3.39 6.78h-.377v-3.13a2.95 2.95 0 10-1.966 0v3.13h-.376l-3.39-6.78 4.75-6.331zM10.53 17.818l-.29.19-3.621 2.387-.333-2.787a.982.982 0 00-.156-.424l-1.081-1.642L6.69 14.46l1.081 1.642a.988.988 0 00.329.31l2.429 1.406zm-6.122-6.826l1.2 1.822-1.642 1.082-1.475-2.232 1.917-.672zm5.249 9.755l2.458-1.624 7.233 10.972v10.726L7.193 22.371l2.464-1.624zm17.135 23.851a2.95 2.95 0 11-5.052-3.048l7.425-12.315h.017v-.027l2.712-4.499 2.527 1.526 2.53 1.52-10.16 16.843zm17.807-25.724a6.353 6.353 0 01-2.028 2.073l-1.747 1.107-2.852-1.717-2.852-1.717.162-2.065a6.318 6.318 0 013.604-5.213L45.18 8.38l.125 2.74a.973.973 0 00-.295.014l-2.382.59a5.986 5.986 0 00-4.425 4.524.983.983 0 001.919.43 4.032 4.032 0 012.977-3.043l2.297-.57.103 2.262a6.304 6.304 0 01-.9 3.548z"/></svg>
<h2>Fully Customizable</h2>
<p>Improve brand awareness and content discoverability through
customizable links, supercharging audience engagement.</p>
</div>
</div>
<div class="boost-section">
<img src="images/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background.jpg" alt="" width="1428" height="250" class="boost-section__img" >
<h1 class="boost-section__title">Boost your links today!</h1>
<a href="#" class="boost-section__button btn">Get Started</a>
</div>
</div>
<footer class="footer">
<h1 ><a href="#" class="footer__title">Shortly</a></h1>
<div class="footer__list-1 footer__list">
<h2 class="footer__list__title">Features</h2>
<ul>
<li><a href="#" class="footer__list__item">Link Shortening</a></li>
<li><a href="#" class="footer__list__item">Branded Links</a></li>
<li><a href="#" class="footer__list__item">Analytics</a></li>
</ul>
</div>
<div class="footer__list-2 footer__list">
<h2 class="footer__list__title">Resources</h2>
<ul>
<li><a href="#" class="footer__list__item">Blog</a></li>
<li><a href="#" class="footer__list__item">Developers</a></li>
<li><a href="#" class="footer__list__item">Support</a></li>
</ul>
</div>
<div class="footer__list-3 footer__list">
<h2 class="footer__list__title">Company</h2>
<ul>
<li><a href="#" class="footer__list__item">About</a></li>
<li><a href="#" class="footer__list__item">Our Team</a></li>
<li><a href="#" class="footer__list__item">Contact</a></li>
</ul>
</div>
<div class="img">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="footer__img"><path fill="#FFF" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg></a>
<a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="footer__img"><path fill="#FFF" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="footer__img"><path fill="#FFF" d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"/></svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" class="footer__img"><path fill="#FFF" d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z"/></svg></a>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>