-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
202 lines (174 loc) · 11.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fixed Bikes shop - landing page">
<meta name="keywords" content="shop fixed singlespeed bike bicycle geared fixie landing">
<meta name="author" content="Alina Kalinovskaya">
<title>CENTROS - Fixed Bikes</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="57x57" href="./favicon-pack/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./favicon-pack/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./favicon-pack/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./favicon-pack/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./favicon-pack/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./favicon-pack/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./favicon-pack/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./favicon-pack/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./favicon-pack/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./favicon-pack/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-pack/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./favicon-pack/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-pack/favicon-16x16.png">
<link rel="manifest" href="./favicon-pack/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./favicon-pack/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="wrapper">
<header class="header flex flex-mobile">
<div class="socials flex">
<div class="social-icon fb"><a class="social-icon__link" href="#"></a></div>
<div class="social-icon twitter"><a class="social-icon__link" href="#"></a></div>
<div class="social-icon instagram"><a class="social-icon__link" href="#"></a></div>
</div>
<div class="logo">
<a class="logo-link" href="#">
<img class="logo-link__image" src="./images/logo.svg" alt="Logo - CENTROS">
</a>
<a class="logo-animate-link" href="#">
<img class="logo-animate-link__image" src="./images/wheel.svg" alt="Logo-animation - CENTROS">
</a>
</div>
<div class="button target-link">
<a class="button-link" href="#">
<span class="button-link__text">Find a Store</span>
</a>
</div>
</header>
<main>
<section class="w-screen first-screen flex flex-mobile">
<div class="w-screen-content">
<h2 class="w-screen-heading"><span class="heading_colored">Power</span> And Style Unite.</h2>
</div>
<div class="w-screen-image first-screen-image"></div>
</section>
<section class="w-screen second-screen flex flex-mobile">
<div class="w-screen-image second-screen-image mobile-hidden"></div>
<div class="w-screen-content">
<h2 class="w-screen-heading mobile-hidden">Power And Style <span class="heading_colored">Unite.</span></h2>
<h4>YOUR CITY CYCLING ONLINE SHOP.</h4>
<h4>BICYCLES, COMPONENTS, ACCESSORIES AND EQUIPMENT</h4>
<div class="buttons flex flex-mobile">
<div class="button button_grey">
<a class="button-link button-link_grey" href="#">
<span class="button-link__text">Buy Online</span>
</a>
</div>
<div class="button">
<a class="button-link" href="#">
<span class="button-link__text">Find a Store</span>
</a>
</div>
</div>
</div>
</section>
<div class="lines_animated" id="linesBlock_animated">
<div class="line lineOne"></div>
<div class="line lineTwo"></div>
</div>
<section class="intro">
<h2 class="intro-heading">Designed with <span class="heading_colored">you</span> in Mind.</h2>
<p class="intro-text">We've taken years of experience designing fixed bikes combining with insightful feedback from our customers to create Centros. The Centros focuses on what you've told us is important to you.</p>
<p class="intro-text">Our mission is to get more people on bikes and we take great pride in our customers. We are convinced that the using a bicycle is key to solving many of the mobility problems that our cities have, that it improves our health and that we contribute to better air quality and a better quality of life.</p>
</section>
<section class="content" id="content">
<h2 class="hidden">Main content</h2>
<article class="fact fact1">
<h3 class="fact__heading fact1__heading"><span>Designed in Britain,</span> <span>Made in Europe</span></h3>
<p class="fact__text fact1__text">Quality you can trust from a brand you can trust. As the UK's best known bike brand Centros has over 55 years of experience designing Britain's bikes.</p>
<div class="img-container fact1-img-container rellax">
<img class="fact__image fact1__image" src="./images/fact1.jpg" alt="promo-picture: city riding">
</div>
<div class="design-line design-line1 mobile-hidden rellax" data-rellax-speed="7"></div>
</article>
<article class="fact fact2">
<h3 class="fact__heading fact2__heading">A choice of design and functionality</h3>
<p class="fact__text fact2__text">We have over 130 different bicycles so you can choose the one that best suits your style and budget. At Centros you can buy a fixed gear or single speed bike for going around town and also track bikes if you train with a fixed gear bicycle. But we also have city bikes with gears, vintage style and classic bicycles, folding bikes, hybrid bikes and some models of gravel bikes.
</p>
<div class="img-container fact2-img-container mobile-hidden rellax" data-rellax-speed="1">
<img class="fact__image fact2__image" src="./images/fact2-1.jpg" alt="promo-picture: singlespeed anymodel">
</div>
<div class="img-container fact2-img-container rellax" data-rellax-speed="-2">
<img class="fact__image fact2__image" src="./images/fact2-2.jpg" alt="promo-picture: fixed gear anymodel">
</div>
</article>
<article class="fact fact3">
<h3 class="fact__heading fact3__heading"><span>100 day returns</span></h3>
<p class="fact__text fact3__text">Not the right fit? No problem.We want you to love your bike. You can return your bike within 100 days.</p>
<div class="img-container fact3-img-container">
<img class="fact__image fact3__image" src="./images/fact3.jpg" alt="promo-picture: highway riding, yellow bike">
</div>
<div class="design-line design-line2 rellax" data-rellax-speed="-2"></div>
</article>
<article class="fact fact4">
<h3 class="fact__heading fact4__heading">The world's most comfortable saddle</h3>
<p class="fact__text fact4__text">Developed following extensive scientific research the ultimate comfort riding experience is unlocked with the Scientia saddle from Salle Royal</p>
<div class="img-container fact4-img-container rellax" data-rellax-speed="3">
<img class="fact__image fact4__image" src="./images/fact4.jpg" alt="promo-picture: bike saddle">
</div>
</article>
<article class="fact fact5">
<h3 class="fact__heading fact5__heading"><span>Branded accessories </span><span>and equipment</span></h3>
<p class="fact__text fact5__text">As we know that most of you repair old bikes and remodel them to give them a second life, we offer you front, rear and carbon wheels. Dozens of spare parts for handlebar tapes, seatposts, stems, saddles, bottom brackets, tires, chains, sprockets, brakes and straps. And also a special section of sprays to paint bicycles so you can add some colour as a final touch.
</p>
<div class="img-container fact5-img-container mobile-hidden">
<img class="fact__image fact5__image" src="./images/fact5-1.jpg" alt="promo-picture: bike accessoires">
</div>
<div class="img-container fact5-img-container">
<img class="fact__image fact5__image" src="./images/fact5-2.jpg" alt="promo-picture: bike accessoires">
</div>
<div class="design-line mobile-hidden design-line3 rellax"></div>
<div class="design-line mobile-hidden design-line4 rellax" data-rellax-speed="4"></div>
</article>
<article class="fact fact6">
<h3 class="fact__heading fact6__heading">World class warranty</h3>
<p class="fact__text fact6__text">If things aren’t perfect, we’re making it right. Lifetime warranty on frame and fork and <span class="heading_colored">1 year </span>on all components. Simple as that.</p>
</article>
</section>
<section class="video">
<h2 class="hidden">Video</h2>
<video src="./images/fixedGearPromo.mp4" controls loop poster="./images/video-poster.png"></video>
</section>
<section class="links">
<h2 class="links-heading">Your bike. Your <span class="heading_colored">choice</span>.</h2>
<p class="links-text">Find the best deals on fixie or singlespeed bikes, city bikes and folding bikes. And if you already have a bicycle, discover the best components, accessories and necessary equipement. </p>
<div class="links-block">
<a href="#">Fixed Gear</a> /
<a href="#">Single Speed</a> /
<a href="#">Track Bike</a>
</div>
<div class="links-block">
<a href="#">Vintage Collection</a> /
<a href="#">Geared Bike</a> /
<a href="#">Hybrid, Gravel</a>
</div>
<div class="links-block">
<a href="#">Accessories</a>
</div>
</section>
</main>
<footer>
<p>© Centros 2020. Fixed Gear Bicycles and Urban, Accessories - Online Shop</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/viewportChecker.js"></script>
<script src="./js/rellax.js"></script>
<script src="./js/script.js"></script>
</body>
</html>