https://opensolutions.design/folding-crate

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <title>FoldingCrate - OpenSolutions</title>
5    <meta property="og:title" content="FoldingCrate - OpenSolutions" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <meta charset="utf-8" />
8    <meta property="twitter:card" content="summary_large_image" />
9
10    <style data-tag="reset-style-sheet">
11      html {  line-height: 1.15;}body {  margin: 0;}* {  box-sizing: border-box;  border-width: 0;  border-style: solid;  -webkit-font-smoothing: antialiased;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption {  margin: 0;  padding: 0;}button {  background-color: transparent;}button,input,optgroup,select,textarea {  font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;}button,select {  text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] {  -webkit-appearance: button;  color: inherit;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}details {  display: block;  margin: 0;  padding: 0;}summary::-webkit-details-marker {  display: none;}[data-thq="accordion"] [data-thq="accordion-content"] {  max-height: 0;  overflow: hidden;  transition: max-height 0.3s ease-in-out;  padding: 0;}[data-thq="accordion"] details[data-thq="accordion-trigger"][open] + [data-thq="accordion-content"] {  max-height: 1000vh;}details[data-thq="accordion-trigger"][open] summary [data-thq="accordion-icon"] {  transform: rotate(180deg);}html { scroll-behavior: smooth  }
12    </style>
13    <style data-tag="default-style-sheet">
14      html {
15        font-family: Inter;
16        font-size: 16px;
17      }
18
19      body {
20        font-weight: 400;
21        font-style:normal;
22        text-decoration: none;
23        text-transform: none;
24        letter-spacing: normal;
25        line-height: 1.15;
26        color: var(--dl-color-gray-black);
27        background: var(--dl-color-gray-white);
28
29        fill: var(--dl-color-gray-black);
30      }
31    </style>
32    <link
33      rel="stylesheet"
34      href="https://unpkg.com/[email protected]/animate.css"
35    />
36    <link
37      rel="shortcut icon"
38      href="public/e6f56d_a2b47380e8504300bfb2844e4a8a5159~mv2.gif"
39      type="icon/png"
40      sizes="32x32"
41    />
42    <link
43      rel="stylesheet"
44      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&amp;display=swap"
45      data-tag="font"
46    />
47    <link
48      rel="stylesheet"
49      href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&amp;display=swap"
50      data-tag="font"
51    />
52    <link
53      rel="stylesheet"
54      href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
55      data-tag="font"
56    />
57    <link
58      rel="stylesheet"
59      href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
60      data-tag="font"
61    />
62    <link
63      rel="stylesheet"
64      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&amp;display=swap"
65      data-tag="font"
66    />
67    <link
68      rel="stylesheet"
69      href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
70      data-tag="font"
71    />
72    <link
73      rel="stylesheet"
74      href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&amp;display=swap"
75      data-tag="font"
76    />
77    <link
78      rel="stylesheet"
79      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
80      data-tag="font"
81    />
82    <link
83      rel="stylesheet"
84      href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
85      data-tag="font"
86    />
87    <link
88      rel="stylesheet"
89      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
90      data-tag="font"
91    />
92    <link
93      rel="stylesheet"
94      href="https://unpkg.com/@teleporthq/teleport-custom-scripts/dist/style.css"
95    />
96  </head>
97  <body>
98    <link rel="stylesheet" href="./style.css" />
99    <div>
100      <link href="./folding-crate.css" rel="stylesheet" />
101
102      <div class="folding-crate-container1">
103        <header data-role="Header" class="folding-crate-header">
104          <a href="index.html" class="folding-crate-navlink">⌂</a>

105          <span class="folding-crate-text1">Folding Crate</span>
106        </header>
107        <div class="folding-crate-container2">
108          <div class="folding-crate-images">
109            <img
110              alt="image"
111              src="https://opensolutions.design/Media/CoinCrate(1).png"
112              class="folding-crate-image1"
113            />
114            <img
115              alt="image"
116              src="https://opensolutions.design/Media/Crate(3)Thumbnail.png"
117              loading="eager"
118              class="folding-crate-image2"
119            />
120          </div>
121          <div class="folding-crate-container3">
122            <a
123              href="https://www.thingiverse.com/thing:6717586"
124              target="_blank"
125              rel="noreferrer noopener"
126              class="folding-crate-link button"
127            >
128              <span class="folding-crate-text2">Download&nbsp;⇗</span>
129            </a>
130            <span class="folding-crate-text3">
131              <span>
132                Prints flat, fold up and secure with press fit or m.2 version.
133                Working .f3d model available
134              </span>
135              <br />
136            </span>
137          </div>
138        </div>
139      </div>
140    </div>
141    

141<script>
142          document.addEventListener("DOMContentLoaded", function() {
143          var audio = new Audio("Media/Audio/click1.mp3");
144
145          function ResetSound(){
146              audio.pause();
147              audio.load();
148          }
149
150          function PlaySound(event){
151            event.preventDefault();
152
153              ResetSound();
154              audio.play();
155                console.log("poopie");
156              var targetHref = event.currentTarget.getAttribute('href');
157
158            setTimeout(function() {
159              window.location.href = targetHref;
160            }, 500);
161            //change this number depending on how long you want it to wait before going to the new page
162          }
163
164          var buttons = document.querySelectorAll('.button');
165          buttons.forEach(function(button){
166            button.addEventListener("click", PlaySound);
167          })
168      })
169    </script>

169
170  </body>
171</html>