This repository has been archived by the owner on Dec 1, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (121 loc) · 3.9 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
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
<style>
body {
padding: 20px;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
background: #272E36;
text-align: center;
color: #CFD6E4;
}
h2 {
color: #5183C3;
margin-top: 4em;
}
a {
margin: 10px;
position: relative;
text-decoration: none;
color: #87BF80;
}
a:hover {
color: #87BF80;
}
a:hover img {
opacity: 0.5;
}
a span {
opacity: 0;
position: absolute;
width: 100%;
left: 0;
bottom: 90px;
text-align: center;
transition: opacity 0.1s ease-in-out, bottom 0.1s ease-in-out;
}
a:hover span {
opacity: 1;
bottom: 80px;
}
a img {
width: 200px;
height: 200px;
}
p {
margin: 1em auto;
max-width: 640px;
}
p > a {
text-decoration: underline;
color: #969CAC;
margin: 0;
}
p > a:hover {
color: #969CAC;
opacity: 0.84;
}
.footer {
max-width: 100%;
margin: 6em auto;
font-size: 12px;
}
</style>
<h1>
<img src="images/logo.svg" alt="Biotes" />
</h1>
<p>Biotes is an abbreviation of Biology and <a href="https://en.wikipedia.org/wiki/Patterns_in_nature#Tessellations">Tessellations</a>. It is a very small library to help get started with DIY bio hardware projects. You can compare it to LEGO, but for lasercutting. It was created out of the frustration that bio hardware often looks like a collection of boring boxes.</p>
<p>The idea is that you download individual parts and customise them. Because the base dimensions stay fixed, multiple hardware projects will fit together nicely and will form a coherent bond like a honeycomb structure. Besides that, parts can easily be reused for a new project.</p>
<p>The fixed dimensions will sometimes force you to think about building things in a new way, which can lead to interesting solutions. This project isn’t complete and it’s definitely the perfect solution. But I hope it will inspire some for their next hardware project. Below are some parts if you want to try it out.</p>
<h2>Top</h2>
<a href="parts/top/base.svg" download>
<img src="parts/top/base.svg" />
<span><i class="ion-arrow-down-a"></i> download .svg</span>
</a>
<a href="parts/top/circle.svg" download>
<img src="parts/top/circle.svg" />
<span><i class="ion-arrow-down-a"></i> download .svg</span>
</a>
<a href="parts/top/tubes.svg" download>
<img src="parts/top/tubes.svg" />
<span><i class="ion-arrow-down-a"></i> download .svg</span>
</a>
<h2>Bottom</h2>
<a href="parts/bottom/base.svg" download>
<img src="parts/bottom/base.svg" />
<span><i class="ion-arrow-down-a"></i> download .svg</span>
</a>
<a href="parts/bottom/flat.svg" download>
<img src="parts/bottom/flat.svg" />
<span><i class="ion-arrow-down-a"></i> download .svg</span>
</a>
<a href="parts/bottom/grid.svg" download>
<img src="parts/bottom/grid.svg" />
<span><i class="ion-arrow-down-a"></i> download .svg</span>
</a>
<a href="parts/bottom/base-half.svg" download>
<img src="parts/bottom/base-half.svg" />
<span><i class="ion-arrow-down-a"></i> download .svg</span>
</a>
<h2>Side</h2>
<a href="parts/bottom/base-18.svg" download>
<img src="parts/side/base-18.svg" />
<span><i class="ion-arrow-down-a"></i> download .svg</span>
</a>
<a href="parts/bottom/flat-18.svg" download>
<img src="parts/side/flat-18.svg" />
<span><i class="ion-arrow-down-a"></i> download .svg</span>
</a>
<a href="parts/bottom/base-40.svg" download>
<img src="parts/side/base-40.svg" />
<span><i class="ion-arrow-down-a"></i> download .svg</span>
</a>
<p class="footer">
Created as part of the <a href="biohackacademy.github.io/bha2/">Bio Hack Academy</a> by <a href="http://timbormans.com/">Tim Bormans</a> under a <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons BY licence</a>.
</p>
</body>
</html>