-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
226 lines (222 loc) · 10.8 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
<!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">
<title>Bookmark landing page</title>
<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=Rubik:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header class="hero">
<nav class="nav container">
<figure class="nav__figure">
<img src="./images/logo-bookmark.svg" alt="Logo Bookmark" class="nav__logo">
</figure>
<div class="nav__hamburguer">
<img src="./images/icon-hamburger.svg" alt="Hamburguer icon" class="nav__button">
</div>
<div class="nav__container">
<ul class="nav__list container">
<li class="nav__element"><a href="#" class="nav__link">Features</a></li>
<li class="nav__element"><a href="#" class="nav__link">Pricing</a></li>
<li class="nav__element"><a href="#" class="nav__link">Contact</a></li>
<li class="nav__element"><a href="#" class="nav__link nav__link--last">Login</a></li>
</ul>
<div class="nav__social">
<a href="#" class="nav__media">
<img src="./images/icon-facebook.svg" alt="Facebook Icon">
</a>
<a href="#" class="nav__media">
<img src="./images/icon-twitter.svg" alt="Twitter Icon">
</a>
</div>
</div>
</nav>
<section class="hero__main container">
<figure class="hero__figure">
<img src="./images/illustration-hero.svg" alt="Ilustración Hero" class="hero__img">
</figure>
<article class="hero__texts">
<h1 class="hero__title">A Simple Bookmark Manager</h1>
<p class="hero__paragraph">A clean and simple interface to organize your favourite websites. Open a new browser tab and see your sites load instantly. Try it for free.</p>
<div class="hero__buttons">
<a href="#" class="hero__button">Get it on Chrome</a>
<a href="#" class="hero__button hero__button--white">Get it on Firefox</a>
</div>
</article>
</section>
</header>
<main class="main">
<!--------------------- FEATURES --------------------->
<section class="features container">
<div class="features__content">
<h2 class="features__title">Features</h2>
<p class="features__paragraph">Our aim is to make it quick and easy for you to access your favourite websites. Your bookmarks sync between your devices so you can access them on the go.</p>
<ul class="features__list">
<li class="features__element">
<a href="#" class="features__tab features__tab--active" data-article="1">Simple Bookmarking</a>
</li>
<li class="features__element">
<a href="#" class="features__tab" data-article="2">Speedy Searching</a>
</li>
<li class="features__element">
<a href="#" class="features__tab" data-article="3">Easy Sharing</a>
</li>
</ul>
</div>
<div class="features__container">
<article class="features__article features__article--active">
<figure class="features__figure">
<img src="./images/illustration-features-tab-1.svg" alt="Ilustració features 1" class="features__img">
</figure>
<div class="features__texts">
<h3 class="features__subtitle">Bookmark in one click</h3>
<p class="features__copy">Organize your bookmarks however you like. Our simple drag-and-drop interface gives you complete control over how you manage your favourite sites.</p>
<a href="#" class="features__cta">More Info</a>
</div>
</article>
<article class="features__article">
<figure class="features__figure">
<img src="./images/illustration-features-tab-2.svg" alt="Ilustració features 2" class="features__img">
</figure>
<div class="features__texts">
<h3 class="features__subtitle">Intelligent search</h3>
<p class="features__copy">Our powerful search feature will help you find saved sites in no time at all. No need to trawl through all of your bookmarks.</p>
<a href="#" class="features__cta">More Info</a>
</div>
</article>
<article class="features__article">
<figure class="features__figure">
<img src="./images/illustration-features-tab-3.svg" alt="Ilustració features 1" class="features__img">
</figure>
<div class="features__texts">
<h3 class="features__subtitle">Share your bookmarks</h3>
<p class="features__copy">Easily share your bookmarks and collections with others. Create a shareable link that you can send at the click of a button.</p>
<a href="#" class="features__cta">More Info</a>
</div>
</article>
</div>
</section>
<!--------------------- DOWNLOAD --------------------->
<section class="download container">
<h2 class="download__title">Download the extension</h2>
<p class="download__paragraph">We’ve got more browsers in the pipeline. Please do let us know if you’ve got a favourite you’d like us to prioritize.</p>
<div class="download__container">
<article class="download__item">
<figure class="download__figure">
<img src="./images/logo-chrome.svg" alt="Logo Chrome" class="download__img">
</figure>
<h3 class="download__browser">Add to Chrome</h3>
<p class="download__version">Minimum version 62</p>
<a href="#" class="download__extension">Add & Install Extension</a>
</article>
<article class="download__item">
<figure class="download__figure">
<img src="./images/logo-firefox.svg" alt="Logo Firefox" class="download__img">
</figure>
<h3 class="download__browser">Add to Firefox</h3>
<p class="download__version">Minimum version 55</p>
<a href="#" class="download__extension">Add & Install Extension</a>
</article>
<article class="download__item">
<figure class="download__figure">
<img src="./images/logo-opera.svg" alt="Logo Opera" class="download__img">
</figure>
<h3 class="download__browser">Add to Opera</h3>
<p class="download__version">Minimum version 46</p>
<a href="#" class="download__extension">Add & Install Extension</a>
</article>
</div>
</section>
<!--------------------- QUESTION --------------------->
<section class="article container">
<h2 class="article__title">Frequently Asked Questions</h2>
<p class="article__paragraph">Here are some of our FAQs. If you have any other questions you’d like answered please feel free to email us.</p>
<div class="article__container">
<!-- QUESTION-1 -->
<h3 class="article__question">What is Bookmark?
<img src="./images/icon-arrow.svg" alt="Arrow" class="article__arrow">
</h3>
<article class="article__content">
<div class="article__show">
<p class="article__answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt justo eget ultricies fringilla. Phasellus blandit ipsum quis quam ornare mattis.</p>
</div>
</article>
<!-- QUESTION-2 -->
<h3 class="article__question">How can I request a new browser?
<img src="./images/icon-arrow.svg" alt="Arrow" class="article__arrow">
</h3>
<article class="article__content">
<div class="article__show">
<p class="article__answer">Vivamus luctus eros aliquet convallis ultricies.
Mauris augue massa, ultricies non ligula.
Suspendisse imperdiet. Vivamus luctus eros aliquet convallis ultricies. Mauris augue massa, ultricies non ligula. Suspendisse imperdie tVivamus luctus eros aliquet convallis ultricies.
Mauris augue massa, ultricies non ligula. Suspendisse imperdiet</p>
</div>
</article>
<!-- QUESTION-3 -->
<h3 class="article__question">Is there a mobile app?
<img src="./images/icon-arrow.svg" alt="Arrow" class="article__arrow">
</h3>
<article class="article__content">
<div class="article__show">
<p class="article__answer">Sed consectetur quam id neque fermentum accumsan. Praesent luctus vestibulum dolor,ut condimentum urna vulputate eget. Cras in ligula quis est pharetra mattis sit ametpharetra purus. Sed sollicitudin ex et ultricies bibendum.</p>
</div>
</article>
<!-- QUESTION-4 -->
<h3 class="article__question">What about other Chromium browsers?
<img src="./images/icon-arrow.svg" alt="Arrow" class="article__arrow">
</h3>
<article class="article__content">
<div class="article__show">
<p class="article__answer">Integer condimentum ipsum id imperdiet finibus. Vivamus in placerat mi, at euismoddui. Aliquam vitae neque eget nisl gravida pellentesque non ut velit.</p>
</div>
</article>
<a href="#" class="article__cta">More Info</a>
</div>
</section>
<!--------------------- JOINED --------------------->
<section class="joined">
<div class="joined__container container">
<p class="joined__paragraph">35,000+ already joined</p>
<h2 class="joined__title">Stay up-to-date with what we’re doing</h2>
<form class="joined__form">
<input type="email" placeholder="Enter your email address" class="joined__input">
<input type="submit" value="Contact Us" class="joined__submit">
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__container container">
<figure class="footer__figure">
<img src="./images/logo-bookmark-footer.svg" alt="Logo Bookmark Footer" class="footer__logo">
</figure>
<ul class="footer__list">
<li class="footer__item">
<a href="#" class="footer__link">Features</a>
</li>
<li class="footer__item">
<a href="#" class="footer__link">Pricing</a>
</li>
<li class="footer__item">
<a href="#" class="footer__link">Contact</a>
</li>
</ul>
<div class="footer__media">
<a href="" class="footer__social">
<img src="./images/icon-facebook.svg" alt="Icon Facebook" class="footer__icon">
</a>
<a href="" class="footer__social">
<img src="./images/icon-twitter.svg" alt="Icon Twitter" class="footer__icon">
</a>
</div>
</div>
</footer>
<script src="./js/main.js"></script>
</body>
</html>