-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
212 lines (204 loc) · 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/e8c52db737.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./assets/css/style.css">
<title>Bikelife</title>
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="navbar-logo">
<svg class="icon-logo" viewBox="-0.5 0 65 64" xmlns="http://www.w3.org/2000/svg">
<g id="icon-bike">
<path id="bike"
d="M14 53C21.382 53 27.433 47.253 27.949 40H32C32.309 40 32.6 39.857 32.789 39.614L36.746 34.526C36.27 35.933 36 37.434 36 39C36 46.72 42.28 53 50 53C57.72 53 64 46.72 64 39C64 31.28 57.72 25 50 25C49.263 25 48.545 25.074 47.838 25.185L45.257 14H54C55.103 14 56 14.897 56 16C56 17.103 55.103 18 54 18H52V20H54C56.206 20 58 18.206 58 16C58 13.794 56.206 12 54 12H44C43.695 12 43.407 12.139 43.218 12.377C43.028 12.615 42.957 12.927 43.026 13.225L44.589 20H26.155L25.428 18H30C31.654 18 33 16.654 33 15C33 13.346 31.654 12 30 12H20C17.794 12 16 13.794 16 16C16 18.206 17.794 20 20 20C20.266 20 20.52 19.895 20.707 19.707L22.414 18H23.3L24.217 20.521L24.147 20.478L20.422 26.573C18.496 25.574 16.315 25 14 25C6.28 25 0 31.28 0 39C0 46.72 6.28 53 14 53ZM22 16C21.734 16 21.48 16.105 21.293 16.293L19.622 17.964C18.699 17.787 18 16.974 18 16C18 14.897 18.897 14 20 14H30C30.552 14 31 14.449 31 15C31 15.551 30.552 16 30 16H22ZM50 27C56.617 27 62 32.383 62 39C62 45.617 56.617 51 50 51C43.383 51 38 45.617 38 39C38 33.661 41.507 29.129 46.337 27.576L49.025 39.225L50.974 38.775L48.288 27.137C48.849 27.056 49.417 27 50 27ZM42.397 27.261L45.38 23.426L45.886 25.619C44.638 26.003 43.469 26.564 42.397 27.261ZM43.956 22L32.321 36.958L26.882 22H43.956ZM25.055 22.828L30.573 38H27.95C27.646 33.725 25.42 29.98 22.126 27.621L25.055 22.828ZM25.949 38H15.783L21.08 29.333C23.803 31.333 25.654 34.445 25.949 38ZM14 27C15.934 27 17.756 27.471 19.375 28.286L13.146 38.478C12.958 38.787 12.951 39.173 13.127 39.489C13.303 39.805 13.639 40 14 40H25.949C25.438 46.149 20.28 51 14 51C7.383 51 2 45.617 2 39C2 32.383 7.383 27 14 27Z"
fill="#D9D9D9" />
<g id="bg-circle">
<path id="Vector"
d="M12.453 13.374L11.006 11.994C10.524 12.5 10.053 13.031 9.609 13.571L11.152 14.842C11.566 14.339 12.004 13.845 12.453 13.374Z" />
<path id="Vector_2"
d="M15.357 10.737L14.123 9.164C13.57 9.598 13.028 10.055 12.514 10.522L13.858 12.003C14.338 11.568 14.843 11.142 15.357 10.737Z" />
<path id="Vector_3"
d="M18.608 8.549L17.614 6.814C17.008 7.162 16.406 7.536 15.826 7.926L16.943 9.585C17.483 9.221 18.044 8.873 18.608 8.549Z" />
<path id="Vector_4"
d="M22.142 6.857L21.413 4.995C20.765 5.248 20.114 5.531 19.48 5.835L20.343 7.639C20.935 7.356 21.539 7.093 22.142 6.857Z" />
<path id="Vector_5"
d="M9.96 16.401L8.329 15.243C7.926 15.811 7.536 16.404 7.173 17.006L8.884 18.041C9.223 17.481 9.585 16.93 9.96 16.401Z" />
<path id="Vector_6"
d="M6.408 23.369L4.514 22.73C4.29 23.393 4.088 24.073 3.913 24.751L5.851 25.25C6.013 24.618 6.2 23.985 6.408 23.369Z" />
<path id="Vector_7"
d="M7.93 19.755L6.149 18.847C5.83 19.473 5.531 20.117 5.26 20.759L7.104 21.534C7.354 20.936 7.633 20.337 7.93 19.755Z" />
<path id="Vector_8"
d="M49.403 8.8C48.841 8.379 48.259 7.974 47.674 7.597L46.592 9.279C47.137 9.63 47.679 10.008 48.202 10.4L49.403 8.8Z" />
<path id="Vector_9"
d="M45.861 6.521C45.243 6.185 44.608 5.869 43.976 5.581L43.148 7.402C43.738 7.67 44.329 7.964 44.906 8.277L45.861 6.521Z" />
<path id="Vector_10"
d="M25.885 5.695L25.434 3.747C24.748 3.906 24.064 4.091 23.399 4.297L23.993 6.207C24.61 6.015 25.247 5.843 25.885 5.695Z" />
<path id="Vector_11"
d="M42.025 4.781C41.367 4.538 40.692 4.318 40.022 4.125L39.47 6.047C40.094 6.226 40.721 6.432 41.334 6.658L42.025 4.781Z" />
<path id="Vector_12"
d="M29.756 5.092L29.592 3.099C28.892 3.157 28.189 3.24 27.501 3.347L27.808 5.324C28.449 5.224 29.104 5.146 29.756 5.092Z" />
<path id="Vector_13"
d="M37.977 3.617C37.291 3.473 36.593 3.353 35.9 3.26L35.634 5.242C36.279 5.328 36.929 5.44 37.567 5.574L37.977 3.617Z" />
<path id="Vector_14"
d="M32 5C32.564 5 33.124 5.018 33.68 5.051L33.801 3.055C33.206 3.019 32.605 3 32 3L31.695 3.001L31.715 5.001L32 5Z" />
<path id="Vector_15"
d="M17.143 54.547L16.041 56.216C16.629 56.604 17.234 56.973 17.84 57.313L18.819 55.569C18.254 55.252 17.69 54.909 17.143 54.547Z" />
<path id="Vector_16"
d="M22.367 57.231C21.756 56.998 21.148 56.74 20.562 56.465L19.712 58.276C20.343 58.572 20.996 58.849 21.653 59.1L22.367 57.231Z" />
<path id="Vector_17"
d="M49.607 55.044L48.392 53.455C47.877 53.849 47.339 54.231 46.79 54.591L47.89 56.262C48.478 55.876 49.056 55.466 49.607 55.044Z" />
<path id="Vector_18"
d="M38.231 60.329L37.803 58.375C37.167 58.514 36.518 58.632 35.873 58.725L36.158 60.704C36.852 60.604 37.549 60.479 38.231 60.329Z" />
<path id="Vector_19"
d="M46.088 57.354L45.115 55.607C44.546 55.924 43.958 56.224 43.368 56.498L44.212 58.311C44.846 58.017 45.477 57.695 46.088 57.354Z" />
<path id="Vector_20"
d="M42.269 59.129L41.56 57.259C40.949 57.49 40.324 57.701 39.703 57.886L40.271 59.803C40.938 59.605 41.61 59.378 42.269 59.129Z" />
<path id="Vector_21"
d="M30.002 58.927C29.351 58.88 28.694 58.808 28.052 58.714L27.761 60.693C28.452 60.795 29.157 60.872 29.856 60.923L30.002 58.927Z" />
<path id="Vector_22"
d="M33.925 58.933C33.29 58.978 32.643 59 31.962 59L32 61C32.688 61 33.384 60.976 34.065 60.928L33.925 58.933Z" />
<path id="Vector_23"
d="M26.121 58.359C25.485 58.217 24.847 58.051 24.223 57.863L23.649 59.779C24.318 59.98 25.004 60.159 25.688 60.311L26.121 58.359Z" />
</g>
</g>
</svg>
<h3>Bike<span>life</span></h3>
</div>
<input type="checkbox" id="expand-toggle">
<label for="expand-toggle" class="menu-icon">
<i class="fas fa-bars"></i>
</label>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bicicletas">Bicicletas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#outlet">Outlet</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contacto">Contacto</a>
</li>
</ul>
</nav>
<main class="main">
<div class="cards">
<a href="#">
<div class="card">
<img src="./assets/imgs/bicicleta-1.png" alt="Foto Bicicleta" class="card-img">
<div class="card-divider"></div>
<div class="card-body">
<h3>$200.000</h3>
<p>Bicicleta de montaña aro 27,5 / 21 velocidades</p>
</div>
</div>
</a>
<a href="#">
<div class="card">
<img src="./assets/imgs/bicicleta-2.png" alt="Foto Bicicleta" class="card-img">
<div class="card-divider"></div>
<div class="card-body">
<h3>$700.000</h3>
<p>Bicicleta de ruta aro 700 / 9 velocidades</p>
</div>
</div>
</a>
<a href="#">
<div class="card">
<img src="./assets/imgs/bicicleta-3.png" alt="Foto Bicicleta" class="card-img">
<div class="card-divider"></div>
<div class="card-body">
<h3>$400.000</h3>
<p>Bicicleta de montaña aro 27,5 / 18 velocidades</p>
</div>
</div>
</a>
<a href="#">
<div class="card">
<img src="./assets/imgs/bicicleta-4.png" alt="Foto Bicicleta" class="card-img">
<div class="card-divider"></div>
<div class="card-body">
<h3>$240.000</h3>
<p>Bicicleta urbana aro 26 / sin cambios</p>
</div>
</div>
</a>
<a href="#">
<div class="card">
<img src="./assets/imgs/bicicleta-5.png" alt="Foto Bicicleta" class="card-img">
<div class="card-divider"></div>
<div class="card-body">
<h3>$260.000</h3>
<p>Bicicleta riverside 500 9-12</p>
</div>
</div>
</a>
<a href="#">
<div class="card">
<img src="./assets/imgs/bicicleta-6.png" alt="Foto Bicicleta" class="card-img">
<div class="card-divider"></div>
<div class="card-body">
<h3>$390.000</h3>
<p>Bicicleta ciudad elops520</p>
</div>
</div>
</a>
<a href="#">
<div class="card">
<img src="./assets/imgs/bicicleta-7.png" alt="Foto Bicicleta" class="card-img">
<div class="card-divider"></div>
<div class="card-body">
<h3>$190.000</h3>
<p>Bicicleta plegable aro 20</p>
</div>
</div>
</a>
<a href="#">
<div class="card">
<img src="./assets/imgs/bicicleta-8.png" alt="Foto Bicicleta" class="card-img">
<div class="card-divider"></div>
<div class="card-body">
<h3>$150.000</h3>
<p>Bicicleta de montaña aro 24 / 6 velocidades</p>
</div>
</div>
</a>
<a href="#">
<div class="card">
<img src="./assets/imgs/bicicleta-9.png" alt="Foto Bicicleta" class="card-img">
<div class="card-divider"></div>
<div class="card-body">
<h3>$2.020.000</h3>
<p>Bicicleta mtb race740 nx/gx eagle</p>
</div>
</div>
</a>
</div>
<div class="pagination">
<a class="page-link" href="#"><span>«</span></a>
<a class="page-link" href="#">1</a>
<a class="page-link" href="#">2</a>
<a class="page-link" href="#">3</a>
<a class="page-link" href="#"><span>»</span></a>
</div>
</main>
<footer>
<p class="footer-icon">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-whatsapp"></i></a>
</p>
<h4>Bike<span>life</span></h4>
<p>Av. Los Pedaleros #1234. Santiago - Chile</p>
<p>Todos los derechos reservados</p>
</footer>
</div>
</body>
</html>