-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (131 loc) · 6.12 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<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@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/images.css">
<link rel="stylesheet" href="css/query875.css">
<link rel="stylesheet" href="css/query1000.css">
<link rel="stylesheet" href="css/query1200.css">
<link rel="stylesheet" href="css/query1400.css">
<title>Frontend Mentor | Shortly URL shortening API Challenge</title>
</head>
<body>
<div class="container">
<header>
<nav class="top-nav">
<img class="logo" src="images/logo.svg" alt="Shortly logo">
<button class="nav-icon" id="hamburger"><img src="images/hamburger-menu-svgrepo-com.svg" alt="navigation drop down button" class="grey-filter"></button>
<div class="nav-items" id="nav">
<a href="#feat" class="nav-link nav-feat">features</a>
<a href="#res" class="nav-link nav-price">pricing</a>
<a href="#res" class="nav-link nav-res">resources</a>
<a href="#" class="nav-link login">login</a>
<button class="sign-up btn-green">sign up</button>
</div>
</nav>
<div class="hero-img"></div>
<h1 class="hero-title">More than just shorter links</h1>
<p class="hero-copy copy">Build your brand’s recognition and get detailed insights
on how your links are performing.</p>
<button class="hero-btn btn-green">get started</button>
</header>
<main class="main">
<form action="none" id="url-form" class="shortner">
<input class="url-input" id="input" type="text" placeholder="Shorten a link here..">
<p class="error-msg"></p>
<button class="btn-green url-btn">shorten it!</button>
</form>
<div class="shorts-container">
<button class="delete-btn btn-red" onclick="deleteShorts()">Delete All</button>
</div>
<section class="features" id="feat">
<div class="statistics">
<h2 class="stats-title">Advanced statistics</h2>
<p class="copy">
Track how your links are performing across the web with our
advanced statistics dashboard.
</p>
</div>
<div class="feature-container brand">
<div class="icon-container brand-icon"></div>
<h2 class="feature-title">Brand Recognition</h2>
<p class="copy">
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="feature-container records">
<div class="icon-container records-icon"></div>
<h2 class="feature-title">Detailed Records</h2>
<p class="copy">
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="feature-container customize">
<div class="icon-container customize-icon"></div>
<h2 class="feature-title">Fully Customizable</h2>
<p class="copy">
Improve brand awareness and content discoverability through customizable
links, supercharging audience engagement.
</p>
</div>
</section>
<section class="boost">
<div class="boost-container">
<h2 class="boost-title">Boost your links today</h2>
<button class="btn-green boost-btn">Get Started</button>
</div>
</section>
<footer>
<nav class="bottom-nav" id="res">
<div class="logo-container flex-col">
<img src="images/logo.svg" alt="Shortly logo" class="footer-logo">
</div>
<div class="feature-links flex-col">
<p class="footer-title features-title">Features</p>
<a href="#" class="f-link features-link-1">Link Shortening</a>
<a href="#" class="f-link features-link-2 link-padding">Brand Links</a>
<a href="#" class="f-link features-link-3">Analytics</a>
</div>
<div class="resources-links flex-col">
<p class="footer-title resources-title">Resources</p>
<a href="#" class="f-link resources-link-1">Blog</a>
<a href="#" class="f-link resources-link-2 link-padding">Developers</a>
<a href="#" class="f-link resources-link-3">Support</a>
</div>
<div class="company-links flex-col">
<p class="footer-title company-title">Company</p>
<a href="#" class="f-link company-link-1">About</a>
<a href="#" class="f-link company-link-2 link-padding">Our Team</a>
<a href="#" class="f-link company-link-3">Careers</a>
<a href="#" class="f-link company-link-4 link-padding">Contact</a>
</div>
<div class="social-media">
<a href="" class="s-link"><img src="images/icon-facebook.svg" alt="A link to facebook"></a>
<a href="" class="s-link"><img src="images/icon-twitter.svg" alt="A link to twitter"></a>
<a href="" class="s-link"><img src="images/icon-pinterest.svg" alt="A link to pintrest"></a>
<a href="" class="s-link"><img src="images/icon-instagram.svg" alt="A link to instagram"></a>
</div>
</nav>
</footer>
</main>
</div>
<template id="short-temp">
<div class="short-container">
<p class="og-url"></p>
<p class="short-url"></p>
<button class="copy-btn btn-green" onclick="copyUrl(this)">Copy</button>
</div>
</template>
<script src="js/index.js"></script>
</body>
</html>