-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
97 lines (97 loc) · 4.21 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
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tachy.pots</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
</head>
<body class="avenir dark-blue bg-washed-green">
<main class="mw8 center">
<header class="cf ph3">
<h1 class="fl mb0"><a href="" class="link dark-blue">t<span class="dib-l dib-m dn">achy</span>.pots</a></h1>
<nav class="fr mt4">
<a href="" class="link dark-blue">about</a>
<a href="" class="link dark-blue ml3">cart <span class="f6 ml1">☖</span></a>
</nav>
</header>
<section class="ph3 pv5-ns pv3">
<h2 class="fw3 f-subheadline-l f1 lh-title">Tiny plants in tiny pots.</h2>
</section>
<section class="cf ph2 ph0-l">
<article class="w-50 mb4 ph3-l ph2 fl">
<div class="aspect-ratio aspect-ratio--6x4 dim">
<a class="db aspect-ratio--object cover" href="" style="background:url(img/pots-1.jpeg) no-repeat center center"></a>
</div>
<h3 class="mb1 f3-ns f5">
<a class="link dark-blue" href="">Agavoides</a>
</h3>
<p class="mt0 f6 green">$15</p>
</article>
<article class="w-50 mb4 ph3-l ph2 fl">
<div class="aspect-ratio aspect-ratio--6x4 dim">
<a class="db aspect-ratio--object cover" href="" style="background:url(img/pots-2.jpeg) no-repeat center center"></a>
</div>
<h3 class="mb1 f3-ns f5">
<a class="link dark-blue" href="">Haworthia</a>
</h3>
<p class="mt0 f6 green">$20</p>
</article>
<article class="w-50 mb4 ph3-l ph2 fl">
<div class="aspect-ratio aspect-ratio--6x4 dim">
<a class="db aspect-ratio--object cover" href="" style="background:url(img/pots-3.jpeg) no-repeat center center"></a>
</div>
<h3 class="mb1 f3-ns f5">
<a class="link dark-blue" href="">Green Prince</a>
</h3>
<p class="mt0 f6 green">$20</p>
</article>
<article class="w-50 mb4 ph3-l ph2 fl">
<div class="aspect-ratio aspect-ratio--6x4 dim">
<a class="db aspect-ratio--object cover" href="" style="background:url(img/pots-4.jpeg) no-repeat center center"></a>
</div>
<h3 class="mb1 f3-ns f5">
<a class="link dark-blue" href="">Grus</a>
</h3>
<p class="mt0 f6 green">$15</p>
</article>
<article class="w-50 mb4 ph3-l ph2 fl">
<div class="aspect-ratio aspect-ratio--6x4 dim">
<a class="db aspect-ratio--object cover" href="" style="background:url(img/pots-5.jpeg) no-repeat center center"></a>
</div>
<h3 class="mb1 f3-ns f5">
<a class="link dark-blue" href="">Derenbergii Blue</a>
</h3>
<p class="mt0 f6 green">$25</p>
</article>
<article class="w-50 mb4 ph3-l ph2 fl">
<div class="aspect-ratio aspect-ratio--6x4 dim">
<a class="db aspect-ratio--object cover" href="" style="background:url(img/pots-6.jpeg) no-repeat center center"></a>
</div>
<h3 class="mb1 f3-ns f5">
<a class="link dark-blue" href="">Black Prince</a>
</h3>
<p class="mt0 f6 green">$25</p>
</article>
</section>
<footer class="pv5-l ph2 ph0-l cf">
<div class="mh3 pt5-l pt4 bt b--light-green"></div>
<div class="w-50-ns w-100 mb4 ph3-l ph2 fl">
<h1 class="mt0"><a href="" class="link dark-blue">t<span class="dib-l dib-m dn">achy</span>.pots</a></a></h1>
</div>
<div class="w-25-ns w-50 mb4 ph3-l ph2 fl lh-copy">
<span class="db mt2 mb3 green">say hi</span>
<a href="" class="db mb1 fw7 link dark-blue">facebook</a>
<a href="" class="db mb1 fw7 link dark-blue">instagram</a>
<a href="" class="db mb1 fw7 link dark-blue">twitter</a>
</div>
<div class="w-25 mb4 ph3-l ph2 fl lh-copy">
<span class="db mt2 mb3 green">come by</span>
<a href="" class="db mb1 fw7 link dark-blue">6000 King Street</a>
<a href="" class="db mb1 fw7 link dark-blue">Toronto</a>
<a href="" class="db mb1 fw7 link dark-blue">M3K 6N1</a>
</div>
</footer>
</main>
</body>
</html>