-
Notifications
You must be signed in to change notification settings - Fork 0
/
catalogue.html
220 lines (209 loc) · 11.7 KB
/
catalogue.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="public/app.css">
<script src="app.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!--Sidebar-->
<div class="col-md-2">
<section>
<p>
Search:
<input>
</p>
<p>
Sort by:
<select>
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</p>
</section>
<section>
<p>Shopping Cart</p>
<ul>
<li>Phone 1</li>
<li>Phone 2</li>
<li>Phone 3</li>
</ul>
</section>
</div>
<!--Main content-->
<div class="col-md-10">
<ul class="phones">
<li class="thumbnail">
<a href="#!/phones/motorola-xoom-with-wi-fi" class="thumb">
<img alt="Motorola XOOM™ with Wi-Fi" src="public/img/phones/motorola-xoom-with-wi-fi.0.jpg">
</a>
<div class="phones__btn-buy-wrapper">
<a class="btn btn-success">
Add
</a>
</div>
<a href="#!/phones/motorola-xoom-with-wi-fi">Motorola XOOM™ with Wi-Fi</a>
<p>The Next, Next Generation
Experience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android
3.0 (Honeycomb).</p>
</li>
<li class="thumbnail">
<a href="#!/phones/motorola-xoom" class="thumb">
<img alt="MOTOROLA XOOM™" src="public/img/phones/motorola-xoom.0.jpg">
</a>
<a href="#!/phones/motorola-xoom">MOTOROLA XOOM™</a>
<p>The Next, Next Generation
Experience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0
(Honeycomb).</p>
</li>
<li class="thumbnail">
<a href="#!/phones/motorola-atrix-4g" class="thumb">
<img alt="MOTOROLA ATRIX™ 4G" src="public/img/phones/motorola-atrix-4g.0.jpg">
</a>
<a href="#!/phones/motorola-atrix-4g">MOTOROLA ATRIX™ 4G</a>
<p>MOTOROLA ATRIX 4G the world's most powerful smartphone.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/dell-streak-7" class="thumb">
<img alt="Dell Streak 7" src="public/img/phones/dell-streak-7.0.jpg">
</a>
<a href="#!/phones/dell-streak-7">Dell Streak 7</a>
<p>Introducing Dell™ Streak 7. Share photos, videos and movies together. It’s small enough to carry
around, big enough to gather around.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/samsung-gem" class="thumb">
<img alt="Samsung Gem™" src="public/img/phones/samsung-gem.0.jpg">
</a>
<a href="#!/phones/samsung-gem">Samsung Gem™</a>
<p>The Samsung Gem™ brings you everything that you would expect and more from a touch display smart
phone – more apps, more features and a more affordable price.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/dell-venue" class="thumb">
<img alt="Dell Venue" src="public/img/phones/dell-venue.0.jpg">
</a>
<a href="#!/phones/dell-venue">Dell Venue</a>
<p>The Dell Venue; Your Personal Express Lane to Everything</p>
</li>
<li class="thumbnail">
<a href="#!/phones/nexus-s" class="thumb">
<img alt="Nexus S" src="public/img/phones/nexus-s.0.jpg">
</a>
<a href="#!/phones/nexus-s">Nexus S</a>
<p>Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run
Gingerbread (Android 2.3), the fastest version of Android yet.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/lg-axis" class="thumb">
<img alt="LG Axis" src="public/img/phones/lg-axis.0.jpg">
</a>
<a href="#!/phones/lg-axis">LG Axis</a>
<p>Android Powered, Google Maps Navigation, 5 Customizable Home Screens</p>
</li>
<li class="thumbnail">
<a href="#!/phones/samsung-galaxy-tab" class="thumb">
<img alt="Samsung Galaxy Tab™" src="public/img/phones/samsung-galaxy-tab.0.jpg">
</a>
<a href="#!/phones/samsung-galaxy-tab">Samsung Galaxy Tab™</a>
<p>Feel Free to Tab™. The Samsung Galaxy Tab™ brings you an ultra-mobile entertainment experience
through its 7” display, high-power processor and Adobe® Flash® Player compatibility.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/samsung-showcase-a-galaxy-s-phone" class="thumb">
<img alt="Samsung Showcase™ a Galaxy S™ phone"
src="public/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg">
</a>
<a href="#!/phones/samsung-showcase-a-galaxy-s-phone">Samsung Showcase™ a Galaxy S™ phone</a>
<p>The Samsung Showcase™ delivers a cinema quality experience like you’ve never seen before. Its
innovative 4” touch display technology provides rich picture brilliance, even outdoors</p>
</li>
<li class="thumbnail">
<a href="#!/phones/droid-2-global-by-motorola" class="thumb">
<img alt="DROID™ 2 Global by Motorola" src="public/img/phones/droid-2-global-by-motorola.0.jpg">
</a>
<a href="#!/phones/droid-2-global-by-motorola">DROID™ 2 Global by Motorola</a>
<p>The first smartphone with a 1.2 GHz processor and global capabilities.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/droid-pro-by-motorola" class="thumb">
<img alt="DROID™ Pro by Motorola" src="public/img/phones/droid-pro-by-motorola.0.jpg">
</a>
<a href="#!/phones/droid-pro-by-motorola">DROID™ Pro by Motorola</a>
<p>The next generation of DOES.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/motorola-bravo-with-motoblur" class="thumb">
<img alt="MOTOROLA BRAVO™ with MOTOBLUR™" src="public/img/phones/motorola-bravo-with-motoblur.0.jpg">
</a>
<a href="#!/phones/motorola-bravo-with-motoblur">MOTOROLA BRAVO™ with MOTOBLUR™</a>
<p>An experience to cheer about.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/motorola-defy-with-motoblur" class="thumb">
<img alt="Motorola DEFY™ with MOTOBLUR™" src="public/img/phones/motorola-defy-with-motoblur.0.jpg">
</a>
<a href="#!/phones/motorola-defy-with-motoblur">Motorola DEFY™ with MOTOBLUR™</a>
<p>Are you ready for everything life throws your way?</p>
</li>
<li class="thumbnail">
<a href="#!/phones/t-mobile-mytouch-4g" class="thumb">
<img alt="T-Mobile myTouch 4G" src="public/img/phones/t-mobile-mytouch-4g.0.jpg">
</a>
<a href="#!/phones/t-mobile-mytouch-4g">T-Mobile myTouch 4G</a>
<p>The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so
that you can video chat from practically anywhere, with or without Wi-Fi.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/samsung-mesmerize-a-galaxy-s-phone" class="thumb">
<img alt="Samsung Mesmerize™ a Galaxy S™ phone"
src="public/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg">
</a>
<a href="#!/phones/samsung-mesmerize-a-galaxy-s-phone">Samsung Mesmerize™ a Galaxy S™ phone</a>
<p>The Samsung Mesmerize™ delivers a cinema quality experience like you’ve never seen before. Its
innovative 4” touch display technology provides rich picture brilliance,even outdoors</p>
</li>
<li class="thumbnail">
<a href="#!/phones/sanyo-zio" class="thumb">
<img alt="SANYO ZIO" src="public/img/phones/sanyo-zio.0.jpg">
</a>
<a href="#!/phones/sanyo-zio">SANYO ZIO</a>
<p>The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling,
strong performance and unprecedented value.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/samsung-transform" class="thumb">
<img alt="Samsung Transform™" src="public/img/phones/samsung-transform.0.jpg">
</a>
<a href="#!/phones/samsung-transform">Samsung Transform™</a>
<p>The Samsung Transform™ brings you a fun way to customize your Android powered touch screen phone
to just the way you like it through your favorite themed “Sprint ID Service Pack”.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/t-mobile-g2" class="thumb">
<img alt="T-Mobile G2" src="public/img/phones/t-mobile-g2.0.jpg">
</a>
<a href="#!/phones/t-mobile-g2">T-Mobile G2</a>
<p>The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new
network. Get the information you need, faster than you ever thought possible.</p>
</li>
<li class="thumbnail">
<a href="#!/phones/motorola-charm-with-motoblur" class="thumb">
<img alt="Motorola CHARM™ with MOTOBLUR™" src="public/img/phones/motorola-charm-with-motoblur.0.jpg">
</a>
<a href="#!/phones/motorola-charm-with-motoblur">Motorola CHARM™ with MOTOBLUR™</a>
<p>Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service.</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>