-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (167 loc) · 6.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Animesh kumbhakar" />
<meta name="description" content="This is a simple URL Shortner Website" />
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png" />
<link rel="stylesheet" href="style.css" />
<title>Shortify | URL shortner</title>
</head>
<body>
<!-- header section start -->
<header id="header" class="section">
<div class="container">
<div class="navbar_container flex items-center justify-between gap-2">
<div class="navbar_logo flex items-center justify-center">
<img src="./assets/logo.svg" alt="logo" />
</div>
<div class="navbar_left flex items-center justify-between flex-1">
<div class="navbar_left_items">
<ul class="flex items-center">
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Resources</a></li>
</ul>
</div>
<div class="navbar_right flex items-center">
<ul class="flex items-center">
<li><a href="#">Login</a></li>
<li><a href="#" class="btn-primary ml-2"> Sign Up </a></li>
</ul>
</div>
</div>
<div class="navbar_menu flex items-center justify-center">
<ion-icon class="menu" size="large" name="menu-outline"></ion-icon>
</div>
</div>
</div>
</header>
<!-- hero section start-->
<section id="hero" class="section">
<div class="container">
<div class="hero_section flex items-center justify-between">
<div class="hero_section_left">
<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 type="button" class="btn-primary">Get Started</button>
</div>
<img src="./assets/illustration-working.svg" alt="hero_image" />
</div>
</div>
</section>
<!-- search section start -->
<!---other section-->
<section id="other" class="section">
<div class="container">
<div class="searchbar flex items-center justify-between gap-2">
<div class="input_box flex-1">
<input type="text" placeholder="Shorten a link here..." title="Enter A Valid Url" />
<p><i>Enter A valid Url</i></p>
</div>
<button class="btn-primary btn-rounded" type="button">
Shorten It!
</button>
</div>
<div class="url_links">
</div>
</div>
<section id="advanced_section">
<div class="container">
<div class="advanced">
<h1>Advanced Statistics</h1>
<p>
Track how your links are performing across the web with Our
advanced statistics dashboard.
</p>
</div>
<div class="cards flex gap-2 items-center">
<div class="card_line"></div>
<div class="card">
<div class="icon flex items-center justify-center">
<img src="/assets/icon-brand-recognition.svg" alt="brand recognition image" />
</div>
<h1>Brand Recognition</h1>
<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="card cardTwo">
<div class="icon flex items-center justify-center">
<img src="/assets/icon-detailed-records.svg" alt="detailed Records image" />
</div>
<h1>Detailed Records</h1>
<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="card cardThree">
<div class="icon flex items-center justify-center">
<img src="/assets/icon-fully-customizable.svg" alt="fully customizable image" />
</div>
<h1>Fully Customizable</h1>
<p>
Improve brand awareness and content discoverability through
customizable links, supercharging audience engagement.
</p>
</div>
</div>
</div>
</section>
</section>
<!-- boost section -->
<section id="boost" class="section">
<div class="container">
<h1>Boost your links today</h1>
<button class="btn-primary" type="button">Get Started</button>
</div>
</section>
<!-- footer section -->
<footer id="footer" class="section">
<div class="container">
<div class="footer_container flex gap-2 justify-between">
<div class="footer_logo">
<img src="./assets/logo.svg" alt="logo" />
</div>
<div class="footer_right flex justify-between">
<ul>
<li><a class="footer_header" href="#">Features</a></li>
<li><a href="#">Link Shortening</a></li>
<li><a href="#">Branded Links</a></li>
<li><a href="#">Analytics</a></li>
</ul>
<ul>
<li><a class="footer_header" href="#">Resources</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Developers</a></li>
<li><a href="#">Support</a></li>
</ul>
<ul>
<li><a class="footer_header" href="#">Company</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="footer_icons flex">
<a href="#" rel="noopener" title="share-link"><ion-icon class="facebook_logo logo" name="logo-facebook"></ion-icon></a>
<a href="#" rel="noopener" title="share-link"><ion-icon class="twitter_logo logo" name="logo-twitter"></ion-icon></a>
<a href="#" rel="noopener" title="share-link"><ion-icon class="pinterest_logo logo" name="logo-pinterest"></ion-icon></a>
<a href="#" rel="noopener" title="share-link"><ion-icon class="instagram_logo logo" name="logo-instagram"></ion-icon></a>
</div>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="script.js"></script>
</body>
</html>