-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
323 lines (323 loc) · 15.2 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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!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>Document</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header>
<section class="header-menu">
<h1>THE DESIGN SHOP</h1>
<nav>
<ul>
<li><a href="#">Weekly Recommendations</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">TDB</a></li>
</ul>
</nav>
</section>
</header>
<!-- First Section Main -->
<main>
<figure class="hero-box">
<a href="https://amzn.to/32MmHgL"><img src="./assets/img/1.png" alt="Backpack"></a>
<div class="caption-container">
<p class="caption-left">Kanken ART Laptop 15" Special Edition Backpack</p>
<p class="caption-right">$119.00</p>
</div>
<figcaption class="caption-bottom">Fjallraven</figcaption>
</figure>
<section class="row-articles">
<figure>
<a href="https://amzn.to/2WX7vtD"><img src="./assets/img/d2.png" alt="Lampe"></a>
<div class="caption-container">
<p class="caption-left">Swing Arm Wood Desk Lamp</p>
<p class="caption-right">$119.00</p>
</div>
<figcaption class="caption-bottom">Tomons</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2I3WvXM"><img src="./assets/img/u6.png" alt="Backpack"></a>
<div class="caption-container">
<p class="caption-left">Shajo Backpack</p>
<p class="caption-right">$89.00</p>
</div>
<figcaption class="caption-bottom">Ucon Acrobatics</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2YX3043"><img src="./assets/img/u10.png" alt="Longboard"></a>
<div class="caption-container">
<p class="caption-left">Zed Bamboo Longboard</p>
<p class="caption-right">$60.00</p>
</div>
<figcaption class="caption-bottom">Retrospec</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2KfP3ee"><img src="./assets/img/u9.png" alt="Kettle"></a>
<div class="caption-container">
<p class="caption-left">Electric Pour-Over Kettle</p>
<p class="caption-right">$149.00</p>
</div>
<figcaption class="caption-bottom">Fellow</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2FYB3zT"><img src="./assets/img/h17.png" alt="Vintage Car"></a>
<div class="caption-container">
<p class="caption-left">Woodie Vintage Cap <p class="caption-right">$35.00</p>
</div>
<figcaption class="caption-bottom">Candylab Toys</figcaption>
</figure>
<figure>
<a href="https://www.bookdepository.com/Logo-Modernism-Jens-Muller-R-Roger-Remington/9783836545303/?a_aid=1991"><img src="./assets/img/c3.png" alt="Logo"></a>
<div class="caption-container">
<p class="caption-left">Logo Modernism</p>
<p class="caption-right">$60.00</p>
</div>
<figcaption class="caption-bottom">Taschen</figcaption>
</figure>
</section>
<!-- Second Section Main -->
<figure class="hero-box">
<a href="https://amzn.to/2YQLnCV"><img src="./assets/img/d7.png" alt="Book"></a>
<div class="caption-container">
<p class="caption-left">Dieter Rams: As Little Design as Possible</p>
<p class="caption-right">$150.00</p>
</div>
<figcaption class="caption-bottom">Sophie Lovell</figcaption>
</figure>
<section class="row-articles">
<figure>
<a href="https://amzn.to/2I3lbQ7"><img src="./assets/img/c6.png" alt="Book"></a>
<div class="caption-container">
<p class="caption-left">The Eye</p>
<p class="caption-right">$28.00</p>
</div>
<figcaption class="caption-bottom">Nathan Williams</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2IifSvA"><img src="./assets/img/h13.png" alt="Desk Organizer"></a>
<div class="caption-container">
<p class="caption-left">Gather Desk Organizer</p>
<p class="caption-right">$149.00</p>
</div>
<figcaption class="caption-bottom">Ugmonk</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2G84CiT"><img src="./assets/img/h8.png" alt="Canteen"></a>
<div class="caption-container">
<p class="caption-left">Dippes Canteen</p>
<p class="caption-right">$28.00</p>
</div>
<figcaption class="caption-bottom">Corkcicle</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2YWPz3N"><img src="./assets/img/h2.png" alt="Office Chair"></a>
<div class="caption-container">
<p class="caption-left">Sayl Office Chair White</p>
<p class="caption-right">$149.00</p>
</div>
<figcaption class="caption-bottom">Herman Miller</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2KhwTsz"><img src="./assets/img/d5.png" alt="Notebook"></a>
<div class="caption-container">
<p class="caption-left">Three Cherry Wood Notebook</p>
<p class="caption-right">$13.00</p>
</div>
<figcaption class="caption-bottom">Field Notes</figcaption>
</figure>
<figure>
<a href="https://www.bookdepository.com/From-Japan/9780957081659?a_aid=1991"><img src="./assets/img/c5.png" alt="Book"></a>
<div class="caption-container">
<p class="caption-left">From Japan</p>
<p class="caption-right">$16.00</p>
</div>
<figcaption class="caption-bottom">Counter Print</figcaption>
</figure>
</section>
<!-- Third Section Main -->
<figure class="hero-box">
<a href="http://www.grupaproducts.com/arigato/"><img src="./assets/img/h6.png" alt="Backpack"></a>
<div class="caption-container">
<p class="caption-left">Arigato Desk Lamp</p>
<p class="caption-right">$380.00</p>
</div>
<figcaption class="caption-bottom">Grupa</figcaption>
</figure>
<section class="row-articles">
<figure>
<a href="https://amzn.to/2CZiPxO"><img src="./assets/img/u7.png" alt="Watch"></a>
<div class="caption-container">
<p class="caption-left">Winston Regal Watch</p>
<p class="caption-right">$58.00</p>
</div>
<figcaption class="caption-bottom">Kamano</figcaption>
</figure>
<figure>
<a href="https://heyshop.es/collections/home/products/h-hey"><img src="./assets/img/d4.png" alt="Poster"></a>
<div class="caption-container">
<p class="caption-left">Letter H Poster</p>
<p class="caption-right">$45.00</p>
</div>
<figcaption class="caption-bottom">Hey Studio</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2UGLHEQ"><img src="./assets/img/u11.png" alt="Coffee Can"></a>
<div class="caption-container">
<p class="caption-left">Coffee Can</p>
<p class="caption-right">$11.00</p>
</div>
<figcaption class="caption-bottom">Blue Bottle Company</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2UFjEWp"><img src="./assets/img/h9.png" alt="Headphones"></a>
<div class="caption-container">
<p class="caption-left">Beoplay H4</p>
<p class="caption-right">$160.00</p>
</div>
<figcaption class="caption-bottom">Bang & Olufson</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2OTHEQg"><img src="./assets/img/p2.png" alt="Book"></a>
<div class="caption-container">
<p class="caption-left">Make It Now</p>
<p class="caption-right">$22.00</p>
</div>
<figcaption class="caption-bottom">Anthony Burrill</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2UFHfGt"><img src="./assets/img/h4.png" alt="Chair Black"></a>
<div class="caption-container">
<p class="caption-left">Black Side Chair</p>
<p class="caption-right">$54.00</p>
</div>
<figcaption class="caption-bottom">Eames Style</figcaption>
</figure>
</section>
<!-- Fourth Section Main -->
<figure class="hero-box">
<a href="https://amzn.to/2Ij1IKA"><img src="./assets/img/c22.png" alt="Book"></a>
<div class="caption-container">
<p class="caption-left">Min: The New Simplicity in Graphic Design</p>
<p class="caption-right">$28.00</p>
</div>
<figcaption class="caption-bottom">Thames & Hudson</figcaption>
</figure>
<section class="row-articles">
<figure>
<a href="https://amzn.to/2UxtLww"><img src="./assets/img/c1.png" alt="Book"></a>
<div class="caption-container">
<p class="caption-left">Grid systems in graphic design</p>
<p class="caption-right">$42.00</p>
</div>
<figcaption class="caption-bottom">Josef Müller-Brockmann</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2I5vxiq"><img src="./assets/img/u12.png" alt="Card wallet"></a>
<div class="caption-container">
<p class="caption-left">Card Wallet</p>
<p class="caption-right">$15.00</p>
</div>
<figcaption class="caption-bottom">Herschel</figcaption>
</figure>
<figure>
<a href="https://goodfuckingdesignadvice.com/products/classic-advice-print"><img src="./assets/img/p3.png" alt="Classic Advice Book"></a>
<div class="caption-container">
<p class="caption-left">Classic Advice Print Black</p>
<p class="caption-right">$30.00</p>
</div>
<figcaption class="caption-bottom">Good Fucking Design Advice</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2D3yZWX"><img src="./assets/img/life-15.png" alt="Magic Mouse"></a>
<div class="caption-container">
<p class="caption-left">Magic Mouse 2</p>
<p class="caption-right">$92.00</p>
</div>
<figcaption class="caption-bottom">Apple</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2WTbsPL"><img src="./assets/img/life-17.png" alt="Travel Tumbler"></a>
<div class="caption-container">
<p class="caption-left">Travel Tumbler</p>
<p class="caption-right">$34.00</p>
</div>
<figcaption class="caption-bottom">Kinto</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2GbCf4A"><img src="./assets/img/life-16.png" alt="Magic Keyboard"></a>
<div class="caption-container">
<p class="caption-left">Magic Keyboard </p>
<p class="caption-right">$139.00</p>
</div>
<figcaption class="caption-bottom">Apple</figcaption>
</figure>
</section>
<!-- Fifth Section Main -->
<figure class="hero-box">
<a href="https://amzn.to/2WMJbdy"><img src="./assets/img/u8.png" alt="Bottle Grinder"></a>
<div class="caption-container">
<p class="caption-left">Bottle Grinder</p>
<p class="caption-right">$75.00</p>
</div>
<figcaption class="caption-bottom">Menu</figcaption>
</figure>
<section class="row-articles">
<figure>
<a href="https://amzn.to/2JLtxvk"><img src="./assets/img/home-8.png" alt="Geo Thermos"></a>
<div class="caption-container">
<p class="caption-left">Geo Thermos</p>
<p class="caption-right">$62.00</p>
</div>
<figcaption class="caption-bottom">Normann Copenhagen</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2YdSBPy"><img src="./assets/img/home-10.png" alt="Womb Chair"></a>
<div class="caption-container">
<p class="caption-left">Womb Chair & Ottoman</p>
<p class="caption-right">$799.00</p>
</div>
<figcaption class="caption-bottom">Kardiel</figcaption>
</figure>
<figure>
<a href="https://amzn.to/2LCEfGP"><img src="./assets/img/home-9.png" alt="Water Filter"></a>
<div class="caption-container">
<p class="caption-left">Water Filter Glass Carafe</p>
<p class="caption-right">$30.00</p>
</div>
<figcaption class="caption-bottom">Soma</figcaption>
</figure>
</section>
</main>
<footer>
<section>
<article>
<h2>The Design Shop</h2>
<p>Carefully curated online designt store, <br>
founded and designed by Ruby Bacanovic </p>
</article>
<article>
<h2>Contact</h2>
<a href="#">Email us <br> Work with us</a>
</article>
<article>
<h2>Newsletter</h2>
<a href="#">Click here to <span>subscribe.</span> </a>
<p>Don't worry. We hate spam too.</p>
</article>
<article class="social-box">
<h2>Find Us Here</h2>
<a href="#">Facebook</a>
<a href="#">Instagram</a>
<a href="#">Twitter</a>
</article>
</section>
<div>
<p>© 2019 The Design Shop • The Design Blog </p>
</div>
</footer>
</body>
</html>