-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
242 lines (229 loc) · 8.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<!-- Bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<!-- Style css -->
<link rel="stylesheet" href="./css/styles.css" />
<title>Shortly URL</title>
</head>
<body>
<header class="container py-4">
<nav class="navbar navbar-expand-lg text-center">
<div class="container-fluid">
<a class="navbar-brand me-lg-5 my-md-0 my-3" href="#"
><img src="./images/logo.svg" alt="logo"
/></a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#features"
>Features</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item resources">
<a class="nav-link" href="#resources">Resources</a>
</li>
</ul>
<div class="d-block text-center">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Login</a>
</li>
<li class="nav-item mx-auto">
<a class="sign-up-button nav-link" type="submit">Sign Up</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<main>
<section
id="home"
class="container-fluid row justify-content-center align-items-center flex-nowrap m-0"
>
<div class="col-12 col-lg-5 col-xl-5 col-xll-4">
<h1>More than just shorter links</h1>
<p>
Build your brand’s recognition and get detailed insights on how your
links are performing.
</p>
<button class="get-started-button">Get Started</button>
</div>
<div class="col-12 col-lg-5 col-xl-5">
<img
src="./images/illustration-working.svg"
alt="illustration-working"
id="illustration"
/>
</div>
</section>
<section
class="container shorten mt-3 mb-4 p-lg-5 rounded-5 mx-auto row justify-content-center align-content-center flex-nowrap"
>
<div class="col-lg-9 col-12">
<input
type="text"
class="w-100"
aria-label="Text input with dropdown button"
placeholder="Shorten a link here..."
id="linkInput"
/>
<p class="msg fs-6 ps-3 pt-1 text-danger" id="errorMsg"><em></em></p>
</div>
<button class="shorten-btn col-lg-3 col-12">Shorten It!</button>
</section>
<section class="container-fluid features pb-5" id="features">
<div class="container-fluid advanced text-center my-5">
<h2>Advanced Statistics</h2>
<p>
Track how your links are performing across the web with our advanced
statistics dashboard.
</p>
</div>
<div
class="container card-container row justify-content-center align-content-center mx-auto gap-4 flex-nowrap"
>
<div class="card1 cards col-lg-4">
<div class="icon-container">
<img
src="./images/icon-brand-recognition.svg"
alt="recognition"
class="icons"
/>
</div>
<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>
<div class="card2 cards col-lg-4">
<div class="icon-container">
<img
src="./images/icon-detailed-records.svg"
alt="detailed"
class="icons"
/>
</div>
<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>
<div class="card3 cards col-lg-4">
<div class="icon-container">
<img
src="./images/icon-fully-customizable.svg"
alt="icon-fully-customizable"
class="icons"
/>
</div>
<h2>Fully Customizable</h2>
<p>
Improve brand awareness and content discoverability through
customizable links, supercharging audience engagement.
</p>
</div>
<div class="line"></div>
</div>
</section>
<section class="container-fluid boost text-center p-5" id="pricing">
<h2 class="text-white p-2">Boost your links today</h2>
<div>
<button class="get-started-button">Get Started</button>
</div>
</section>
</main>
<footer
class="container-fluid row flex-nowrap justify-content-evenly align-items-center align-items-lg-start m-0 p-5"
id="resources"
>
<div class="first col-lg-2 col-6 d-flex justify-content-center g-0">
<img src="./images/logo.svg" alt="logo" id="logoFooter" />
</div>
<div
class="second col-lg-6 col-6 d-flex justify-content-center gap-2 g-0"
>
<ul class="second1">
<li class="second-header">Features</li>
<li>Link Shortening</li>
<li>Branded Links</li>
<li>Analytics</li>
</ul>
<ul class="second2">
<li class="second-header">Resources</li>
<li>Blog</li>
<li>Developers</li>
<li>Support</li>
</ul>
<ul class="second3">
<li class="second-header">Company</li>
<li>About</li>
<li>Our Team</li>
<li>Careers Contact</li>
</ul>
</div>
<div class="third col-lg-2 col-8 d-flex justify-content-center gap-3">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-pinterest" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</footer>
<div class="attribution text-center">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded with ❤️ by
<a href="https://github.com/aLpSabre" target="_blank">aLpSabre</a>.
</div>
<!-- Scripts -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"
></script>
<script src="https://use.fontawesome.com/878fc17799.js"></script>
<script src="./src/app.js"></script>
</body>
</html>