-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
238 lines (224 loc) · 14.8 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
<html class="bg-black">
<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.Tools</title>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.6.1/css/tachyons.min.css"/>
<link rel="stylesheet" href="css/styles.css"/>
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-touch-icon.png?v=2">
<link rel="icon" type="image/png" href="favicons/favicon-32x32.png?v=2" sizes="32x32">
<link rel="icon" type="image/png" href="favicons/favicon-16x16.png?v=2" sizes="16x16">
<link rel="manifest" href="favicons/manifest.json">
<link rel="shortcut icon" href="favicons/favicon.ico?v=2">
<meta name="msapplication-config" content="favicons/browserconfig.xml">
<meta name="theme-color" content="#4522ff">
<meta name="description" content="A growing collection of tacky tools built using Tachyons and Unsplash." />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tachy.Tools">
<meta name="twitter:description" content="A growing collection of tacky tools built using Tachyons and Unsplash.">
<meta name="twitter:image" content="http://tachy.tools/img/tachy-tools-social.png?v=2">
<meta name="twitter:creator" content="@maximsiebert">
<meta property="og:title" content="Tachy.Tools" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://tachy.tools/" />
<meta property="og:image" content="http://tachy.tools/img/tachy-tools-social.png?v=2" />
<meta property="og:description" content="A growing collection of tacky tools built using Tachyons and Unsplash." />
<meta property="og:site_name" content="Tachy.Tools" />
</head>
<body class="courier bg-white">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-98148575-2', 'auto');
ga('send', 'pageview');
</script>
<!-- Marquee -->
<div class="marquee3k f1-l f4 fw9"
data-speed="200">
FREE FOR A LIMITED TIME 💥 <span class="border">DOWNLOAD TODAY</span> 💥
</div>
<!-- Close Button -->
<div class="close fixed mw4 tc pointer white">
<span class="f2 dib mb2">❌</span>
<span class="db f6 lh-title">No thanks, I don't like free things</span>
</div>
<!-- Star SVG Animation -->
<div class="star fixed left-0 top-0 bottom-0 right-0 overflow-hidden">
<svg class="absolute db" width="241" height="228" viewBox="0 0 241 228" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:figma="http://www.figma.com/figma/ns">
<title>star</title>
<desc>Created using Figma</desc>
<g figma:type="canvas">
<use xlink:href="#a" figma:type="star" />
</g>
<defs>
<path id="a" d="M125.848 0l28.255 86.96h91.435l-73.972 53.743 28.254 86.959-73.972-53.744-73.971 53.744 28.254-86.959L6.16 86.959h91.435L125.848 0z" />
</defs>
</svg>
</div>
<!-- About Overlay -->
<div class="star fixed z-4 overflow-scroll left-0 top-0 bottom-0 right-0 h-100">
<div class="white">
<div class="content mw8 center pv5 relative cf">
<div class="fr-l mt0-l mt6 ph3 w-40-l w-70-ns w-90 center lh-copy">
<h1 class="f2 mb0 sans-serif">Well... why not?</h1>
<h2 class="f4 mb0 mt3 db f-subheadling sans-serif">First, what is Tachyons?</h2>
<p><a class="link white b hover-bg-blue-new" href="http://tachyons.io/" target="_blank">Tachyons</a> is a css toolkit. It's mobile-first 📱, highly-readable 📖 and well documented 📘📙📕. It allows you to build pages and components with as little css as possible using classes.</p>
<h2 class="f4 mb0 mt3 db f-subheadling sans-serif">And Unsplash?</h2>
<p><a class="link white b hover-bg-blue-new" href="https://unsplash.com/" target="_blank">Unsplash</a> is a giant photography community 📷 filled with <em>free (do whatever you want)</em> high-resolution photos 🖼️. It is <em>amazing</em> 🙏.</p>
<h2 class="f4 mb0 mt4 db sans-serif">So why did we build Tachy.Tools?</h2>
<ol>
<li class="mb2">We 💓💓💓 Tachyons and want to tell <em>everyone</em> 🌎 about it.</li>
<li class="mb2">We want to show what's possible with it without using any custom css. <em>It's frickin impressive</em> 😮😅.</li>
<li class="mb2">A lot of designers and developers feel overwhelmed 😰 when they look into Tachyons. Tools like these can help them learn 🤓 and better understand how to get started.</li>
<li class="mb2">These tools can serve as starter templates for projects. Tachyons makes it really easy to re-use components ♻️ to extend 🚀 these templates into full sites or products.</li>
<li class="mb2">We enjoyed every second spent building these 😄.</li>
</ol>
<h2 class="f4 mb0 mt4 db sans-serif">What can I do with these?</h2>
<p>Absolutely anything you want! Dissect them with developer tools to learn Tachyons, extend them into full sites or turn them into something else!</p>
<h2 class="f4 mb0 mt4 db sans-serif">What else will you be releasing?</h2>
<p>We'll be releasing new things regularly ✨⌚. Templates and components like responsive menus, sign up forms, ui kits and many more! Send us an <a class="link white b hover-bg-blue-new" href="mailto:we.are@blunt.af">email ✉️</a> if you'd like to see something!</p>
<h2 class="f4 mb0 mt4 db sans-serif">Who built this?</h2>
<p>We are <a href="http://blunt.af" target="_blank" class="link white b hover-bg-blue-new">Blunt 😻🐻</a>. A small team that likes to create things that <em>help</em>, <em>challenge</em>, and <em>inspire</em>.</p>
</div>
</div>
</div>
</div>
<!-- Spinning Text Circle -->
<div class="container fixed z-5">
<svg id="Layer_1" class="circle-text spin f-subheadline fw9" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 659.54 659.54">
<title>circle-text</title>
<g>
<text class="cls-1" transform="rotate(-148.2 204.371 193.937)">1</text>
<text class="cls-1" transform="rotate(-128.13 222.053 163.282)">-</text>
<text class="cls-1" transform="matrix(-.26 -.97 .97 -.26 199.3 403.53)">8</text>
<text class="cls-1" transform="rotate(-77.9 297.266 55.847)">0</text>
<text class="cls-1" transform="rotate(-50.8 377.55 -71.093)">0</text>
<text class="cls-1" transform="matrix(.82 -.58 .58 .82 242.5 213.79)"></text>
<text class="cls-1" transform="rotate(-19.05 726.935 -672.804)">-</text>
<text class="cls-1" transform="translate(299.48 183.86)">T</text>
<text class="cls-1" transform="rotate(24.51 -240.381 906.518)">A</text>
<text class="cls-1" transform="rotate(52.1 -4.038 534.186)">C</text>
<text class="cls-1" transform="rotate(80.45 74.44 410.408)">K</text>
<text class="cls-1" transform="rotate(108 116.79 343.657)">Y</text>
<text class="cls-1" transform="rotate(129.36 133.44 309.74)">-</text>
<text class="cls-1" transform="rotate(152.38 162.146 273.113)">A</text>
<text class="cls-1" transform="rotate(-178.85 181.076 235.992)">F</text>
</g>
</svg>
<div class="phone flip f-subheadline-l f1">📞</div>
</div>
<!-- Free things -->
<div class="fixed free-tag z-5-l z-4">
<svg id="Layer_1" class="b" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310.93 278.96">
<defs>
<style>
.cls-1 {
opacity: .9
}
.cls-2 {
fill: #fff;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 5px
}
</style>
</defs>
<title>free</title>
<g id="Canvas" class="cls-1">
<g id="Star_2" data-name="Star 2">
<path id="path0_fill" data-name="path0 fill" d="M167.44 50.69l13.92 44 69.14-67.75-21.27 95.5h73.11l-46.92 53L310.69 193l-81.47 19.22 32.88 49.09L191 240l-19 40.8-28.16-40.8-71.06 44.51L96 200.61l-47.43-5.3 42.52-28-66.9-31.44 93.08-1.87L96 38.54l47.84 56.16z" transform="translate(.24 -5.56)" />
</g>
</g>
<g id="Canvas-2" data-name="Canvas">
<g id="Star_2-2" data-name="Star 2">
<path id="path0_fill-2" data-name="path0 fill" class="cls-2" d="M153.75 37l13.92 44 69.13-67.75-21.27 95.5h73.11l-46.92 53L297 179.3l-81.47 19.22 32.88 49.09-71.06-21.35-19 40.8-28.24-40.8-71.02 44.56 23.21-83.9-47.43-5.3 42.52-28-66.89-31.45 93.07-1.82-21.27-95.5L130.15 81z" transform="translate(.24 -5.56)" />
</g>
</g>
<text class="cls-3" transform="translate(123.97 143.7)">FREE
<tspan x="-34.62" y="26.4">THINGS!!</tspan>
</text>
</svg>
</div>
<main class="mw8 center pv5 cf relative">
<!-- Intro -->
<div class="intro fixed-l mw6 center pv6-l pv5 ph3-ns ph4 fl-l w-third-l w-100 tc relative">
<img src="img/Tt.svg" class="dib logo">
<h1 class="f1-l f2 mb0 b sans-serif">Tachy.Tools</h1>
<p class="lh-copy f4 mt3 mb4">A growing collection of tacky tools built using <a class="b link black hover-bg-blue-new hover-white" href="http://tachyons.io/" target="_blank">Tachyons</a> & <a class="b link black hover-bg-blue-new hover-white" href="https://unsplash.com/" target="_blank">Unsplash</a>.</p>
<span class="about dib b ttu pointer ph4 pv3 bg-near-white br2 black hover-bg-blue-new hover-white">
but like, why?
</span>
</div>
<!-- Templates -->
<div class="fr-l ph3 w-40-l w-60-ns w-90 center">
<div class="window mb5-l mb3 overflow-hidden black bg-white ba bw1 b--black relative z-2">
<div class="bar relative cf move lh-copy bb bw1 b--black">
<div class="dib tab pa3 b">tachy.app</div>
<a href="http://blunt.af/tachy.app/" class="link fr bg-animate hover-bg-blue-new lh-copy bl bw1 b--black" target="_blank"><span class="b black hover-white link db pa3 fw9">👁️</span></a>
</div>
<div class="aspect-ratio aspect-ratio--5x7">
<iframe id="tab-1" class="aspect-ratio--object tab-content current" src="" frameborder="0"></iframe>
<div class="aspect-ratio--object placeholder sans-serif" style="background: url(img/tachy-app.jpg) no-repeat top center; background-size: cover;" data-src="http://blunt.af/tachy.app/">
<span class="click-wrap">
<span class="click">click me 💪🏋️</span>
</span>
</div>
</div>
<div class="tc bg-blue-new bt bw1 b--black"><a class="link white ttu pa3 db b tracked" href="https://github.com/blunt/tachy.app" target="_blank">download template</a></div>
</div>
<div class="window mb5-l mb3 overflow-hidden black bg-white ba bw1 b--black relative z-2">
<div class="bar relative cf move lh-copy bb bw1 b--black">
<div class="dib tab pa3 b">tachy.designs</div>
<a href="http://blunt.af/tachy.designs/" class="link fr bg-animate hover-bg-blue-new lh-copy bl bw1 b--black" target="_blank"><span class="b black hover-white link db pa3 fw9">👁️</span></a>
</div>
<div class="aspect-ratio aspect-ratio--5x7">
<iframe id="tab-1" class="aspect-ratio--object tab-content current" src="" frameborder="0"></iframe>
<div class="aspect-ratio--object placeholder sans-serif" style="background: url(img/tachy-designs.jpg) no-repeat top center; background-size: cover;" data-src="http://blunt.af/tachy.designs/">
<span class="click-wrap">
<span class="click">click me 💪🏋️</span>
</span>
</div>
</div>
<div class="tc bg-blue-new bt bw1 b--black"><a class="link white ttu pa3 db b tracked" href="https://github.com/blunt/tachy.designs" target="_blank">download template</a></div>
</div>
<div class="window mb5-l mb3 overflow-hidden black bg-white ba bw1 b--black relative z-2">
<div class="bar relative cf move lh-copy bb bw1 b--black">
<div class="dib tab pa3 b">tachy.pots</div>
<a href="http://blunt.af/tachy.pots" class="link fr bg-animate hover-bg-blue-new lh-copy bl bw1 b--black" target="_blank"><span class="b black hover-white link db pa3 fw9">👁️</span></a>
</div>
<div class="aspect-ratio aspect-ratio--5x7">
<iframe id="tab-1" class="aspect-ratio--object tab-content current" src="" frameborder="0"></iframe>
<div class="aspect-ratio--object placeholder sans-serif" style="background: url(img/tachy-pots.jpg) no-repeat top center; background-size: cover;" data-src="http://blunt.af/tachy.pots">
<span class="click-wrap">
<span class="click">click me 💪🏋️</span>
</span>
</div>
</div>
<div class="tc bg-blue-new bt bw1 b--black"><a class="link white ttu pa3 db b tracked" href="https://github.com/blunt/tachy.pots" target="_blank">download template</a></div>
</div>
<div class="window mb5-l mb3 overflow-hidden black bg-white ba bw1 b--black relative z-2">
<div class="bar relative cf move lh-copy bb bw1 b--black">
<div class="dib tab pa3 b">tachy.apparel</div>
<a href="http://blunt.af/tachy.apparel" class="link fr bg-animate hover-bg-blue-new lh-copy bl bw1 b--black" target="_blank"><span class="b black hover-white link db pa3 fw9">👁️</span></a>
</div>
<div class="aspect-ratio aspect-ratio--5x7">
<iframe id="tab-1" class="aspect-ratio--object tab-content current" src="" frameborder="0"></iframe>
<div class="aspect-ratio--object placeholder sans-serif" style="background: url(img/tachy-apparel.jpg) no-repeat top center; background-size: cover;" data-src="http://blunt.af/tachy.apparel">
<span class="click-wrap">
<span class="click">click me 💪🏋️</span>
</span>
</div>
</div>
<div class="tc bg-blue-new bt bw1 b--black"><a class="link white ttu pa3 db b tracked" href="https://github.com/blunt/tachy.apparel" target="_blank">download template</a></div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/marquee3k.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>