forked from codyhouse/product-builder
-
Notifications
You must be signed in to change notification settings - Fork 0
/
product-01.html
101 lines (79 loc) · 2.97 KB
/
product-01.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
<li data-selection="colors" class="builder-step first-load">
<section class="cd-step-content">
<header>
<h1>Select Color</h1>
<span class="steps-indicator">Step <b>2</b> of 4</span>
</header>
<ul class="cd-product-previews">
<li class="selected"><img src="img/product01_col01.jpg" alt="Product Preview" class="product-preview"></li>
<li><img src="img/product01_col02.jpg" alt="Product Preview" class="product-preview"></li>
<li><img src="img/product01_col03.jpg" alt="Product Preview" class="product-preview"></li>
</ul>
<ul class="cd-product-customizer">
<li data-content="White - $0" data-price="0" class="selected"><a data-color="white" href="#0">White - $0</a></li>
<li data-content="Mineral Grey - $550" data-price="550"><a data-color="grey" href="#0">Mineral Grey - $550</a></li>
<li data-content="Orange Metallic - $550" data-price="550"><a data-color="orange" href="#0">Orange Metallic - $550</a></li>
</ul>
</section>
</li>
<li data-selection="accessories" class="builder-step first-load">
<section class="cd-step-content">
<header>
<h1>Accessories</h1>
<span class="steps-indicator">Step <b>3</b> of 4</span>
</header>
<ul class="accessories-list options-list">
<li class="js-option" data-price="1080">
<p>BMW Charging Station</p>
<span class="price">$1.080</span>
<div class="check"></div>
</li>
<li class="js-option" data-price="1895">
<p>BMW Maintenance Program Upgrade</p>
<span class="price">$1.895</span>
<div class="check"></div>
</li>
<li class="js-option" data-price="975">
<p>1 Year BMW Maintenance Program Upgrade</p>
<span class="price">$975</span>
<div class="check"></div>
</li>
</ul>
</section>
</li>
<li data-selection="summary" class="builder-step first-load">
<section class="cd-step-content">
<header>
<h1>Summary</h1>
<span class="steps-indicator">Step <b>4</b> of 4</span>
</header>
<ul class="summary-list">
<li>
<h2>Model</h2>
<img src="img/product01_col01.jpg" alt="Alfa Romeo Giulietta" class="product-preview">
<h3>BMW i3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit saepe facilis hic, unde, numquam vel. Blanditiis sed laboriosam ratione nulla atque molestias at explicabo aperiam reprehenderit culpa nihil, quis totam cupiditate dolores in quisquam magnam inventore nobis, rem adipisci eveniet illum.
</p>
</li>
<li data-summary="colors">
<h2>Color</h2>
<span class="summary-color">
<em class="color-swatch" data-color="red"></em>
<em class="color-label">Red Passion</em>
</span>
</li>
<li data-summary="accessories">
<h2>Accessories</h2>
<ul class="summary-accessories">
<li>
<p>Uconnect 6.5" colour touchscreen radio navigation sytem with Bluetooth & DAB ($1050)</p>
</li>
<li>
<p>Audio & telephone controls on steering wheels ($750)</p>
</li>
</ul>
</li>
</ul>
</section>
</li>