-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (159 loc) · 9.97 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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Old School Motorcycle | BSA Bantam D1</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=Alexandria:wght@400;600&family=Leckerli+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<!--<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "/node_modules/three/build/three.module.js",
"GLTFLoader" : "/node_modules/three/examples/jsm/loaders/GLTFLoader.js",
"orbitControls": "/node_modules/three/examples/jsm/controls/OrbitControls.js",
"dat.gui" : "/node_modules/dat.gui/build/dat.gui.module.js"
}
}
-->
</script>
<script src="app.js" type="module" defer></script>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" id="motorcycle-icon">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M38.5 35.5C36.0147 35.5 34 33.4853 34 31C34 28.5147 36.0147 26.5 38.5 26.5C40.9853 26.5 43 28.5147 43 31C43 33.4853 40.9853 35.5 38.5 35.5ZM38.5 38.5C34.3579 38.5 31 35.1421 31 31C31 26.8579 34.3579 23.5 38.5 23.5C42.6421 23.5 46 26.8579 46 31C46 35.1421 42.6421 38.5 38.5 38.5Z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M29.4104 8.5862C29.2481 8.2292 28.8922 8 28.5 8H23.25C22.6977 8 22.25 8.44772 22.25 9C22.25 9.55228 22.6977 10 23.25 10H27.8561L37.5896 31.4138C37.8182 31.9166 38.411 32.1389 38.9138 31.9104C39.4166 31.6818 39.6389 31.089 39.4104 30.5862L29.4104 8.5862Z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.5 35.5C7.01472 35.5 5 33.4853 5 31C5 28.5147 7.01472 26.5 9.5 26.5C11.9853 26.5 14 28.5147 14 31C14 33.4853 11.9853 35.5 9.5 35.5ZM9.5 38.5C5.35786 38.5 2 35.1421 2 31C2 26.8579 5.35786 23.5 9.5 23.5C13.6421 23.5 17 26.8579 17 31C17 35.1421 13.6421 38.5 9.5 38.5Z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M33.6441 20.7351C33.2217 20.3794 32.5908 20.4334 32.2351 20.8559L24.5348 30H9.5C8.94772 30 8.5 30.4477 8.5 31C8.5 31.5523 8.94772 32 9.5 32H25C25.295 32 25.5749 31.8698 25.7649 31.6442L33.7649 22.1442C34.1207 21.7217 34.0666 21.0909 33.6441 20.7351Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.7567 30.669L19.2567 25.669L20.7433 24.3311L25.2433 29.3311L23.7567 30/>
<path
d=" M27.7764 15.5526C27.607 15.2138 27.2608 14.9998 26.882 14.9998H25.754C22.2362 14.9998 18.6312 16.2978 17.6032 19.662C17.5519 19.83 17.6775 19.9998 17.8532
19.9998H28.382C29.1254 19.9998 29.6088 19.2175 29.2764 18.5526L27.7764 15.5526Z" />
<path
d="M6 16.9998C6 16.4475 6.44772 15.9998 7 15.9998H11.5C11.8148 15.9998 12.1111 16.148 12.3 16.3998L13.8 18.3998C14.2944 19.0591 13.824 19.9998 13 19.9998H7C6.44772 19.9998 6 19.5521 6 18.9998V16.9998Z" />
<path
d="M35.3764 16.4408C35.1693 15.9231 35.4255 15.3362 35.9459 15.136L40.3561 13.4398C40.9469 13.2126 41.5974 13.5844 41.7015 14.2087L42.2729 17.637C42.3848 18.3086 41.8074 18.8933 41.1344 18.7897L36.5644 18.0866C36.2146 18.0328 35.9194 17.7982 35.7879 17.4697L35.3764 16.4408Z" />
<path
d="M26.5 23.4998C26.5 22.9475 26.0523 22.4998 25.5 22.4998H18.5C17.3954 22.4998 16.5 23.1452 16.5 24.2498C16.5 25.3544 17.3954 25.9998 18.5 25.9998H24.5C25.6046 25.9998 26.5 25.3544 26.5 24.2498V23.4998Z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M41.2083 14.2912C41.1563 13.979 40.831 13.7931 40.5356 13.9067L36.1254 15.603C35.8652 15.703 35.7371 15.9965 35.8406 16.2553L36.2522 17.2842C36.3179 17.4485 36.4655 17.5658 36.6404 17.5927L41.2104 18.2958C41.5469 18.3476 41.8356 18.0553 41.7797 17.7194L41.2083 14.2912ZM40.1766 12.9734C41.0627 12.6326 42.0386 13.1903 42.1947 14.1268L42.7661 17.555C42.934 18.5625 42.0678 19.4395 41.0584 19.2842L36.4883 18.5811C35.9637 18.5004 35.5208 18.1485 35.3237 17.6556L34.9121 16.6267C34.6016 15.8503 34.9859 14.9698 35.7664 14.6696L40.1766 12.9734ZM17.125 19.5162C18.2532 15.8242 22.1707 14.5001 25.754 14.5001H26.882C27.4501 14.5001 27.9695 14.8211 28.2236 15.3293L29.7236 18.3293C30.2223 19.3266 29.497 20.5001 28.382 20.5001H17.8532C17.3415 20.5001 16.9755 20.0055 17.125 19.5162ZM18.1859 19.5001H28.382C28.7537 19.5001 28.9954 19.1089 28.8292 18.7765L27.3292 15.7765C27.2445 15.6071 27.0714 15.5001 26.882 15.5001H25.754C22.4209 15.5001 19.2368 16.6856 18.1859 19.5001ZM5.5 17.0001C5.5 16.1717 6.17157 15.5001 7 15.5001H11.5C11.9721 15.5001 12.4167 15.7224 12.7 16.1001L14.2 18.1001C14.9416 19.089 14.2361 20.5001 13 20.5001H7C6.17157 20.5001 5.5 19.8285 5.5 19.0001V17.0001ZM7 16.5001C6.72386 16.5001 6.5 16.724 6.5 17.0001V19.0001C6.5 19.2762 6.72386 19.5001 7 19.5001H13C13.412 19.5001 13.6472 19.0297 13.4 18.7001L11.9 16.7001C11.8056 16.5742 11.6574 16.5001 11.5 16.5001H7ZM16.7671 22.5756C17.235 22.1885 17.8545 22.0001 18.5 22.0001H25.5C26.3284 22.0001 27 22.6717 27 23.5001V24.2501C27 24.9504 26.7104 25.5295 26.2329 25.9246C25.765 26.3117 25.1455 26.5001 24.5 26.5001H18.5C17.8545 26.5001 17.235 26.3117 16.7671 25.9246C16.2896 25.5295 16 24.9504 16 24.2501C16 23.5498 16.2896 22.9707 16.7671 22.5756ZM17.4045 23.3461C17.1582 23.5499 17 23.8458 17 24.2501C17 24.6544 17.1582 24.9503 17.4045 25.1541C17.6604 25.3658 18.0409 25.5001 18.5 25.5001H24.5C24.9591 25.5001 25.3396 25.3658 25.5955 25.1541C25.8418 24.9503 26 24.6544 26 24.2501V23.5001C26 23.224 25.7761 23.0001 25.5 23.0001H18.5C18.0409 23.0001 17.6604 23.1344 17.4045 23.3461Z" />
</svg>
Old School Bikes
</div>
<nav class="main-nav">
<menu>
<li><a href="#">Home</a></li>
<li><a href="#" class="active">Vehicles</a></li>
<li><a href="#">Who are we?</a></li>
<li><a href="#">Contact Us</a></li>
</menu>
</nav>
<div class="purchase">
<menu>
<li class="icon" id="cart-btn"><a href="#"><i class="fa-solid fa-cart-shopping"></i></a></li>
<li class="icon"><a href="#"><i class="fa-solid fa-user"></i></a></li>
</menu>
</div>
<div class="mobile-nav">
<input type="checkbox" id="mobile-menu">
<label for="mobile-menu"><span></span><span></span><span></span></label>
<menu class="mobile-nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#" class="active">Vehicles</a></li>
<li><a href="#">Who are we?</a></li>
<li><a href="#">Contact Us</a></li>
</menu>
</div>
</div>
</header>
<div class="container">
<div class="breadcrumb">
<p><a href="">Home</a> > <a href="">Vehicles</a> > <span class="active-link"><a href="">BSA Bantam D1</a></span></p>
</div>
<main>
<h1>BSA Bantam D1</h1>
<div class="product_images">
<img src="./resources/imgs/1951-bsa-bantam-d1-rigid-125cc-in-trials-trim-v5c-amp-taxed-3.jpg" alt="black bsa bantam d1 motorcycle" class="main-img">
<aside class="thumbnails"><img src="./resources/imgs/1951-bsa-bantam-d1-rigid-125cc-in-trials-trim-v5c-amp-taxed-3.jpg" alt="black bsa bantam d1 motorcycle"
class="thumbnail active"><img src="./resources/imgs/BSA-Bantam-D1-1949-800x615.jpg" alt="red bsa bantam d1 motorcycle" class="thumbnail"></aside>
</div>
<div class="product_info_container">
<div class="product_description">
<p>The Bantam was the best selling small motorcycle of the 1950s. The two-stroke engine and gearbox unit was based on designs from German manufacturer DKW.</p>
<p>From the 1920s
the Post Office favoured small BSA motorcycles for use by telegram delivery boys. This practice continued in the 1950s and 60s with many thousands of Bantams being
ordered. The Bantam was also used in trials events and tuned versions were popular in club road racing. Bantam production ended in 1971.</p>
</div>
<div class="product_buy">
<div class="product_color-picker">
<p>Pick your color:</p>
<div class="color green"></div>
<div class="color black"></div>
<!-- <div class="color red"></div> -->
</div>
<div class="product_buy-infos">
<p class="product_price">£ 1599.00</p>
<button type="submit" id="add-btn">add to cart</button>
</div>
</div>
</div>
<div class="product_tech">
<table>
<tr>
<td>Year:</td>
<td>1949</td>
</tr>
<tr>
<td>Country:</td>
<td>Great Britain</td>
</tr>
<tr>
<td>Capacity:</td>
<td>123cc</td>
</tr>
<tr>
<td>Cylinders:</td>
<td>1</td>
</tr>
<tr>
<td>Output:</td>
<td>4bhp at 5,000rpm</td>
</tr>
<tr>
<td>Performance:</td>
<td>560mph</td>
</tr>
<tr>
<td>Manufacturer:</td>
<td>BSA Cycles Ltd</td>
</tr>
</table>
</div>
</main>
</div>
<footer>
<div class="container">
<menu class="footer-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Who we are</a></li>
<li><a href="#">Contact Us</a></li>
</menu>
</div>
</footer>
</body>
</html>