├── LICENSE ├── README.md ├── attributions.txt ├── facebook_image.png ├── favicon.png ├── index.html ├── letter.svg ├── lib └── skeleton.css ├── quarter.svg ├── stickers ├── firefox.png ├── github.png └── twitter.png └── styles.css /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015-2021 Max Wofford & Zach Latta 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ponzies 2 | 3 | Ponzies was a startup sticker ponzi scheme. You could mail us a startup (or 4 | hackathon) sticker and we'd send two stickers in return (_*While supplies 5 | last_). 6 | 7 | This was a fun project [@maxwofford](https://github.com/maxwofford) and I 8 | made when Hack Club printed our first sticker back in 2015. In total, Ponzies 9 | made it to the front page of Hacker News and we received hundreds of 10 | envelopes in the mail from dozens of countries. 11 | 12 | ## License 13 | 14 | See [LICENSE](LICENSE). 15 | -------------------------------------------------------------------------------- /attributions.txt: -------------------------------------------------------------------------------- 1 | Icon usage: 2 | 3 | - coin by Christian Mohr from the Noun Project 4 | - Modified to say 25 cents 5 | - George Washington by Leonardo Schneider from the Noun Project 6 | - Modified to be put on Eric Benoit's envelope as a stamp 7 | - envelope by Eric Benoit from the Noun Project 8 | - Modified to be larger and have our info and George Washington on it 9 | -------------------------------------------------------------------------------- /facebook_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zachlatta/ponzies/00cb37d0c1fc2926ef143c1f9be1872a236cc52b/facebook_image.png -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zachlatta/ponzies/00cb37d0c1fc2926ef143c1f9be1872a236cc52b/favicon.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Ponzies 4 | 5 | 8 | 9 | 10 | 11 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |

Ponzies

24 |
25 |

26 | Mail us a startup (or hackathon) sticker and get two stickers in return. 27 |

28 |

* While supplies last

29 |
30 | 31 |
32 |

How It Works

33 |

34 | Mail us a letter with a sticker and 50 cents to the address on the 35 | envelope below. 36 |

37 | 38 |
39 | 40 |
41 |

42 |
43 | 44 |
45 |
46 | 47 | 48 |

(stamps for return postage cost 49¢)

49 |
50 |

51 |
52 |
53 | 54 |

55 | And we'll send you two stickers in return. Expect them within 10 days. 56 |

57 | 58 |
59 | 60 | 61 |
62 |

(stickers will vary)

63 | 64 |
65 | 66 |

67 | By @MaxWofford and @zachlatta. If we can't fulfill 69 | your sticker request, we'll either return your letter in the mail or 70 | send you some nifty Hack 72 | Club stickers. Attributions. 73 |

74 | 75 | 79 |
80 | 81 |
82 | 87 | 88 | 89 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /letter.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml -------------------------------------------------------------------------------- /lib/skeleton.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeleton V2.0.4 3 | * Copyright 2014, Dave Gamache 4 | * www.getskeleton.com 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 12/29/2014 8 | */ 9 | 10 | 11 | /* Table of contents 12 | –––––––––––––––––––––––––––––––––––––––––––––––––– 13 | - Grid 14 | - Base Styles 15 | - Typography 16 | - Links 17 | - Buttons 18 | - Forms 19 | - Lists 20 | - Code 21 | - Tables 22 | - Spacing 23 | - Utilities 24 | - Clearing 25 | - Media Queries 26 | */ 27 | 28 | 29 | /* Grid 30 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 31 | .container { 32 | position: relative; 33 | width: 100%; 34 | max-width: 960px; 35 | margin: 0 auto; 36 | padding: 0 20px; 37 | box-sizing: border-box; } 38 | .column, 39 | .columns { 40 | width: 100%; 41 | float: left; 42 | box-sizing: border-box; } 43 | 44 | .container { 45 | width: 85%; 46 | padding: 0; } 47 | 48 | .container { 49 | width: 80%; } 50 | .column, 51 | .columns { 52 | margin-left: 4%; } 53 | .column:first-child, 54 | .columns:first-child { 55 | margin-left: 0; } 56 | 57 | .one.column, 58 | .one.columns { width: 4.66666666667%; } 59 | .two.columns { width: 13.3333333333%; } 60 | .three.columns { width: 22%; } 61 | .four.columns { width: 30.6666666667%; } 62 | .five.columns { width: 39.3333333333%; } 63 | .six.columns { width: 48%; } 64 | .seven.columns { width: 56.6666666667%; } 65 | .eight.columns { width: 65.3333333333%; } 66 | .nine.columns { width: 74.0%; } 67 | .ten.columns { width: 82.6666666667%; } 68 | .eleven.columns { width: 91.3333333333%; } 69 | .twelve.columns { width: 100%; margin-left: 0; } 70 | 71 | .one-third.column { width: 30.6666666667%; } 72 | .two-thirds.column { width: 65.3333333333%; } 73 | 74 | .one-half.column { width: 48%; } 75 | 76 | /* Offsets */ 77 | .offset-by-one.column, 78 | .offset-by-one.columns { margin-left: 8.66666666667%; } 79 | .offset-by-two.column, 80 | .offset-by-two.columns { margin-left: 17.3333333333%; } 81 | .offset-by-three.column, 82 | .offset-by-three.columns { margin-left: 26%; } 83 | .offset-by-four.column, 84 | .offset-by-four.columns { margin-left: 34.6666666667%; } 85 | .offset-by-five.column, 86 | .offset-by-five.columns { margin-left: 43.3333333333%; } 87 | .offset-by-six.column, 88 | .offset-by-six.columns { margin-left: 52%; } 89 | .offset-by-seven.column, 90 | .offset-by-seven.columns { margin-left: 60.6666666667%; } 91 | .offset-by-eight.column, 92 | .offset-by-eight.columns { margin-left: 69.3333333333%; } 93 | .offset-by-nine.column, 94 | .offset-by-nine.columns { margin-left: 78.0%; } 95 | .offset-by-ten.column, 96 | .offset-by-ten.columns { margin-left: 86.6666666667%; } 97 | .offset-by-eleven.column, 98 | .offset-by-eleven.columns { margin-left: 95.3333333333%; } 99 | 100 | .offset-by-one-third.column, 101 | .offset-by-one-third.columns { margin-left: 34.6666666667%; } 102 | .offset-by-two-thirds.column, 103 | .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } 104 | 105 | .offset-by-one-half.column, 106 | .offset-by-one-half.columns { margin-left: 52%; } 107 | 108 | 109 | /* Base Styles 110 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 111 | /* NOTE 112 | html is set to 62.5% so that all the REM measurements throughout Skeleton 113 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 114 | html { 115 | font-size: 62.5%; } 116 | body { 117 | font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ 118 | line-height: 1.6; 119 | font-weight: 400; 120 | font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 121 | color: #222; } 122 | 123 | 124 | /* Typography 125 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 126 | h1, h2, h3, h4, h5, h6 { 127 | margin-top: 0; 128 | margin-bottom: 2rem; 129 | font-weight: 300; } 130 | h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} 131 | h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } 132 | h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } 133 | h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } 134 | h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } 135 | h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } 136 | 137 | h1 { font-size: 5.0rem; } 138 | h2 { font-size: 4.2rem; } 139 | h3 { font-size: 3.6rem; } 140 | h4 { font-size: 3.0rem; } 141 | h5 { font-size: 2.4rem; } 142 | h6 { font-size: 1.5rem; } 143 | 144 | p { 145 | margin-top: 0; } 146 | 147 | 148 | /* Links 149 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 150 | a { 151 | color: #1EAEDB; } 152 | a:hover { 153 | color: #0FA0CE; } 154 | 155 | 156 | /* Buttons 157 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 158 | .button, 159 | button, 160 | input[type="submit"], 161 | input[type="reset"], 162 | input[type="button"] { 163 | display: inline-block; 164 | height: 38px; 165 | padding: 0 30px; 166 | color: #555; 167 | text-align: center; 168 | font-size: 11px; 169 | font-weight: 600; 170 | line-height: 38px; 171 | letter-spacing: .1rem; 172 | text-transform: uppercase; 173 | text-decoration: none; 174 | white-space: nowrap; 175 | background-color: transparent; 176 | border-radius: 4px; 177 | border: 1px solid #bbb; 178 | cursor: pointer; 179 | box-sizing: border-box; } 180 | .button:hover, 181 | button:hover, 182 | input[type="submit"]:hover, 183 | input[type="reset"]:hover, 184 | input[type="button"]:hover, 185 | .button:focus, 186 | button:focus, 187 | input[type="submit"]:focus, 188 | input[type="reset"]:focus, 189 | input[type="button"]:focus { 190 | color: #333; 191 | border-color: #888; 192 | outline: 0; } 193 | .button.button-primary, 194 | button.button-primary, 195 | input[type="submit"].button-primary, 196 | input[type="reset"].button-primary, 197 | input[type="button"].button-primary { 198 | color: #FFF; 199 | background-color: #33C3F0; 200 | border-color: #33C3F0; } 201 | .button.button-primary:hover, 202 | button.button-primary:hover, 203 | input[type="submit"].button-primary:hover, 204 | input[type="reset"].button-primary:hover, 205 | input[type="button"].button-primary:hover, 206 | .button.button-primary:focus, 207 | button.button-primary:focus, 208 | input[type="submit"].button-primary:focus, 209 | input[type="reset"].button-primary:focus, 210 | input[type="button"].button-primary:focus { 211 | color: #FFF; 212 | background-color: #1EAEDB; 213 | border-color: #1EAEDB; } 214 | 215 | 216 | /* Forms 217 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 218 | input[type="email"], 219 | input[type="number"], 220 | input[type="search"], 221 | input[type="text"], 222 | input[type="tel"], 223 | input[type="url"], 224 | input[type="password"], 225 | textarea, 226 | select { 227 | height: 38px; 228 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 229 | background-color: #fff; 230 | border: 1px solid #D1D1D1; 231 | border-radius: 4px; 232 | box-shadow: none; 233 | box-sizing: border-box; } 234 | /* Removes awkward default styles on some inputs for iOS */ 235 | input[type="email"], 236 | input[type="number"], 237 | input[type="search"], 238 | input[type="text"], 239 | input[type="tel"], 240 | input[type="url"], 241 | input[type="password"], 242 | textarea { 243 | -webkit-appearance: none; 244 | -moz-appearance: none; 245 | appearance: none; } 246 | textarea { 247 | min-height: 65px; 248 | padding-top: 6px; 249 | padding-bottom: 6px; } 250 | input[type="email"]:focus, 251 | input[type="number"]:focus, 252 | input[type="search"]:focus, 253 | input[type="text"]:focus, 254 | input[type="tel"]:focus, 255 | input[type="url"]:focus, 256 | input[type="password"]:focus, 257 | textarea:focus, 258 | select:focus { 259 | border: 1px solid #33C3F0; 260 | outline: 0; } 261 | label, 262 | legend { 263 | display: block; 264 | margin-bottom: .5rem; 265 | font-weight: 600; } 266 | fieldset { 267 | padding: 0; 268 | border-width: 0; } 269 | input[type="checkbox"], 270 | input[type="radio"] { 271 | display: inline; } 272 | label > .label-body { 273 | display: inline-block; 274 | margin-left: .5rem; 275 | font-weight: normal; } 276 | 277 | 278 | /* Lists 279 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 280 | ul { 281 | list-style: circle inside; } 282 | ol { 283 | list-style: decimal inside; } 284 | ol, ul { 285 | padding-left: 0; 286 | margin-top: 0; } 287 | ul ul, 288 | ul ol, 289 | ol ol, 290 | ol ul { 291 | margin: 1.5rem 0 1.5rem 3rem; 292 | font-size: 90%; } 293 | li { 294 | margin-bottom: 1rem; } 295 | 296 | 297 | /* Code 298 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 299 | code { 300 | padding: .2rem .5rem; 301 | margin: 0 .2rem; 302 | font-size: 90%; 303 | white-space: nowrap; 304 | background: #F1F1F1; 305 | border: 1px solid #E1E1E1; 306 | border-radius: 4px; } 307 | pre > code { 308 | display: block; 309 | padding: 1rem 1.5rem; 310 | white-space: pre; } 311 | 312 | 313 | /* Tables 314 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 315 | th, 316 | td { 317 | padding: 12px 15px; 318 | text-align: left; 319 | border-bottom: 1px solid #E1E1E1; } 320 | th:first-child, 321 | td:first-child { 322 | padding-left: 0; } 323 | th:last-child, 324 | td:last-child { 325 | padding-right: 0; } 326 | 327 | 328 | /* Spacing 329 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 330 | button, 331 | .button { 332 | margin-bottom: 1rem; } 333 | input, 334 | textarea, 335 | select, 336 | fieldset { 337 | margin-bottom: 1.5rem; } 338 | pre, 339 | blockquote, 340 | dl, 341 | figure, 342 | table, 343 | p, 344 | ul, 345 | ol, 346 | form { 347 | margin-bottom: 2.5rem; } 348 | 349 | 350 | /* Utilities 351 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 352 | .u-full-width { 353 | width: 100%; 354 | box-sizing: border-box; } 355 | .u-max-full-width { 356 | max-width: 100%; 357 | box-sizing: border-box; } 358 | .u-pull-right { 359 | float: right; } 360 | .u-pull-left { 361 | float: left; } 362 | 363 | 364 | /* Misc 365 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 366 | hr { 367 | margin-top: 3rem; 368 | margin-bottom: 3.5rem; 369 | border-width: 0; 370 | border-top: 1px solid #E1E1E1; } 371 | 372 | 373 | /* Clearing 374 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 375 | 376 | /* Self Clearing Goodness */ 377 | .container:after, 378 | .row:after, 379 | .u-cf { 380 | content: ""; 381 | display: table; 382 | clear: both; } 383 | -------------------------------------------------------------------------------- /quarter.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml -------------------------------------------------------------------------------- /stickers/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zachlatta/ponzies/00cb37d0c1fc2926ef143c1f9be1872a236cc52b/stickers/firefox.png -------------------------------------------------------------------------------- /stickers/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zachlatta/ponzies/00cb37d0c1fc2926ef143c1f9be1872a236cc52b/stickers/github.png -------------------------------------------------------------------------------- /stickers/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zachlatta/ponzies/00cb37d0c1fc2926ef143c1f9be1872a236cc52b/stickers/twitter.png -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* Humanitarian warning: here be dragons */ 2 | 3 | body { 4 | font-family: 'Open Sans', sans-serif; 5 | color: #333; 6 | } 7 | 8 | p { 9 | font-size: 22px; 10 | } 11 | 12 | .container { 13 | margin: 0 auto; 14 | width: 720px; 15 | text-align: center; 16 | } 17 | 18 | .title { 19 | font-size: 84px; 20 | font-weight: bold; 21 | font-family: 'Kalam', cursive; 22 | margin-top: 75px; 23 | margin-bottom: 60px; 24 | } 25 | 26 | .description { 27 | margin-top: 0; 28 | margin-bottom: 50px; 29 | font-size: 36px; 30 | font-weight: 600; 31 | } 32 | 33 | .while-supplies-last { 34 | margin-bottom: 75px; 35 | } 36 | 37 | .while-supplies-last .description { 38 | margin-bottom: 10px; 39 | } 40 | 41 | .while-supplies-last .subtext { 42 | margin-top: 0; 43 | } 44 | 45 | .directions p { 46 | max-width: 400px; 47 | margin-left: auto; 48 | margin-right: auto; 49 | } 50 | 51 | .directions .description { 52 | margin-bottom: 15px; 53 | } 54 | 55 | .directions .subtext { 56 | font-size: 18px; 57 | bottom: 0px; 58 | } 59 | 60 | .directions .horizontal-steps .columns { 61 | position: relative; 62 | padding-top: 60px; 63 | top: 50%; 64 | transform: translateY(-50%); 65 | margin-bottom: -100px; 66 | } 67 | 68 | .subtext { 69 | font-size: 20px; 70 | font-style: italic; 71 | } 72 | 73 | .subtext.narrow { 74 | max-width: 200px; 75 | } 76 | 77 | .symbol { 78 | font-size: 38px; 79 | } 80 | 81 | .stickers img { 82 | height: 225px; 83 | } 84 | 85 | .icon { 86 | display: inline-block; 87 | text-indent: -9999px; 88 | } 89 | 90 | .quarter { 91 | background-image: url('quarter.svg'); 92 | width: 105px; 93 | height: 105px; 94 | background-size: 105px 105px; 95 | 96 | margin-left: 10px; 97 | margin-right: 10px; 98 | margin-bottom: 10px; 99 | } 100 | 101 | .letter { 102 | background-image: url('letter.svg'); 103 | width: 600px; 104 | height: 300px; 105 | background-size: 600px 300px; 106 | } 107 | 108 | .share-links { 109 | padding-bottom: 2em; 110 | } 111 | 112 | /* This is done to avoid !important */ 113 | 114 | .fb-share-button { 115 | vertical-align: text-bottom; 116 | } 117 | 118 | .twitter-share-button[style] { 119 | vertical-align: text-bottom; 120 | } 121 | --------------------------------------------------------------------------------