index.html (11.0 KB)
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <title>Hunter's Club-Mate Fan Club</title> 6 <link rel="icon" type="image/x-icon" href="https://hunterirving.github.io/web_workshop/pages/club-mate/images/gaucho.svg"> 7 <meta name="description" content="Cheers! And welcome to my online shrine to the celebrated German energy drink, Club-Mate."> 8 <meta property="og:title" content="Hunter's Club-Mate Fan Club"> 9 <meta property="og:description" content="Cheers! And welcome to my online shrine to the celebrated German energy drink, Club-Mate."> 10 <meta property="og:image" content="https://hunterirving.github.io/web_workshop/pages/club-mate/resources/social-preview.png"> 11 <meta property="og:url" content="https://hunterirving.github.io/web_workshop/pages/club-mate/"> 12 <meta property="og:type" content="website"> 13 <style> 14 @font-face { 15 font-family: 'tribeca'; 16 src: url('https://hunterirving.github.io/web_workshop/pages/club-mate/resources/tribeca.woff2'); 17 } 18 html { 19 scrollbar-color: #c68e17 #f7c200; 20 } 21 body { 22 background-color: #f7c200; 23 font-size: 28px; 24 font-family: serif; 25 margin: 0; 26 padding: 0; 27 display: flex; 28 justify-content: center; 29 align-items: flex-start; 30 min-height: 100vh; 31 } 32 .inner-div { 33 max-width: 1000px; 34 padding-left:15px; 35 padding-right:15px; 36 width: 100%; 37 } 38 h1 { 39 font-weight: normal; 40 font-size:50px; 41 font-family: tribeca; 42 color: #133583; 43 margin-bottom:-12px; 44 margin-top:50px; 45 clear: both; 46 } 47 h2 { 48 font-weight: normal; 49 font-size:37px; 50 font-family: tribeca; 51 color: #133583; 52 margin-top:50px; 53 clear: both; 54 } 55 a { 56 color: #133583; 57 } 58 hr { 59 color: #c68e17; 60 margin-bottom: 30px; 61 margin-top: 30px; 62 } 63 p { 64 font-family: serif; 65 align: left; 66 } 67 .header-container { 68 max-width: 100%; 69 width: 100%; 70 box-sizing: border-box; 71 padding-bottom:10px; 72 padding-top:15px; 73 overflow: hidden; 74 } 75 76 .header-logo { 77 max-width: 400px; 78 width: 60%; 79 padding-left: 15px; 80 padding-right: 15px; 81 box-sizing: border-box; 82 flex-shrink: 1; 83 } 84 85 .header-bottle { 86 max-width: 60px; 87 width: 20%; 88 min-width: 30px; 89 filter: drop-shadow(3px 3px 4px black); 90 flex-shrink: 0; 91 } 92 .inline-bottle { 93 float: right; 94 margin-left: 15px; 95 margin-bottom: 10px; 96 filter: drop-shadow(3px 3px 4px black); 97 } 98 .centered { 99 display: flex; 100 justify-content: center; 101 align-items: center; 102 } 103 img { 104 max-width: 100%; 105 } 106 blockquote { 107 margin-top: 60px; 108 margin-bottom: 60px; 109 } 110 .subchunk { 111 clear: both; 112 margin-top: 80px; 113 margin-bottom: 100px; 114 } 115 .image-caption { 116 margin-top: 15px; 117 font-size: 22px; 118 margin-bottom: 50px; 119 } 120 @media (max-width: 600px) { 121 .header-container { 122 padding: 0 10px; 123 } 124 125 .header-bottle { 126 max-width: 45px; 127 width: 18%; 128 min-width: 25px; 129 } 130 131 .header-logo { 132 padding-left: 5px; 133 padding-right: 5px; 134 max-width: 250px; 135 width: 64%; 136 } 137 138 .gaucho-section { 139 flex-direction: column; 140 } 141 blockquote { 142 margin-top:30px; 143 margin-bottom:30px; 144 font-size:20px; 145 } 146 body { 147 font-size: 20px; 148 } 149 .image-caption { 150 font-size: 18px; 151 } 152 h1 { 153 font-size:42px; 154 } 155 subchunk { 156 margin-top:5px; 157 margin-bottom: 20px; 158 } 159 } 160 </style> 161 </head> 162 <body> 163 <div class="inner-div"> 164 <div class="centered header-container"> 165 <img class="header-bottle" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/cm_bottle_photo.png"> 166 <img class="header-logo" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/hunters_club-mate_fan_club.svg"> 167 <img class="header-bottle" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/cm_bottle_photo.png"> 168 </div> 169 <hr> 170 <div class="centered gaucho-section"> 171 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/gaucho.svg"> 172 <blockquote class="centered">Cheers! And welcome to my online shrine to the celebrated German energy drink, Club-Mate.</blockquote> 173 </div> 174 <div> 175 <h1>Love at First Sip?</h1> 176 <hr> 177 <p> 178 For most, Club-Mate isn't an instant favorite. 179 The drink's unconventional flavor profile, derived from the 180 South American-native <a href="https://en.wikipedia.org/wiki/Yerba_mate">yerba mate</a> plant, can present 181 something of a barrier to entry. 182 </p> 183 <p> 184 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/first_sip.png" class="inline-bottle" style="max-width:110px"> 185 Varying first-taste reviews have compared the drink's earthy 186 essence to hay, herbal tea, and even an ashtray, but, as the drink's official slogan 187 promises, <i>"man gewöhnt sich daran"</i> (you'll get used to it). 188 </p> 189 <p> 190 I happened to get used to it pretty quickly, going through 191 an entire case (24 bottles) in about as many days. 192 Oddly, it tastes almost like cream soda to me now. And with 193 half the sugar and double the caffeine of a Coca-Cola, Club-Mate 194 is a... healthier(?) choice? 195 </p> 196 <p> 197 Probably still not super healthy though. 198 Especially if you're pregnant or breastfeeding: 199 </p> 200 <div class="centered"> 201 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/warning.jpg" style="width:400px; max-width:100%; padding-bottom: 10px;"> 202 </div> 203 <p> 204 I don't think I've ever seen a beverage 205 with a warning label like that. This is some high-test stuff! 206 </p> 207 </div> 208 <div> 209 <h1>The Elusive Hacker Elixer</h1> 210 <hr> 211 <p> 212 Despite the Loscher Brewery's decision not to 213 run advertisements for Club-Mate, it's gained 214 cult status among Berlin's rave and hacker scenes, and, 215 to a lesser extent, the discerning American 216 hacker. 217 </p> 218 <div class="centered"> 219 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/di.jpg"> 220 </div> 221 <center class="image-caption">My friend Di on her way to the club, despite a broken leg.<br>That's the power of Club-Mate.</center> 222 <p> 223 </p> 224 <p> 225 I first heard about the drink while reading the Chaos Communication Congress' <a href="https://fahrplan.events.ccc.de/congress/2007/Fahrplan/attachments/1003_Building%20a%20Hacker%20Space.pdf">Building a Hackerspace</a> presentation, to research techniques we might put into practice at my local hackerspace, <a href="https://hacksburg.org">Hacksburg</a>. 226 </p> 227 <p> 228 One of the document's final recommendations is: 229 </p> 230 <blockquote style="margin-bottom:70px;"> 231 <i>Buy at least one pallet of Club-Mate and sell it in your hackerspace. You will realize the results very soon!</i> 232 </blockquote> 233 <div class="centered"> 234 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/noisebridge_stash.jpg"> 235 </div> 236 <center class="image-caption">The Club-Mate stash at <a href="https://www.noisebridge.net/wiki/Noisebridge">Noisebridge hackerspace</a> in San Francisco</center> 237 <p> 238 So far, I've only been able to convince one other Hacksburg member to try Club-Mate, and... I'm not sure he's interested in giving it a second try. 239 </p> 240 <p>Oh well, more mate for me :-)</p> 241 <div class="centered" style="max-width:100%"> 242 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/matemat.jpg" style="max-height:750px;"> 243 </div> 244 <center class="image-caption"><a href="https://blog.attraktor.org/2012/09/matemat-im-grosformat/">Attraktor</a> in Hamburg, Germany features MateMat, a Club-Mate vending machine. I'm trying to convince Hacksburg to build one of these...</center> 245 </div> 246 <div> 247 <h1>GOTTA CRUSH EM ALL</h1> 248 <hr> 249 <p>Importing regular Club-Mate into the US is a challenge. But importing these less common variants? Unheard of.</p> 250 <p>Someday I hope to try each of them.</p> 251 <div class="subchunk"> 252 <h2>Club-Mate Winter Edition</h2> 253 <p> 254 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_winter_edition.png" class="inline-bottle" style="max-width:90px"> 255 This limited edition Mate takes the original Club-Mate formula and adds "cardamom, cinnamon, star anise and citrus extract"<sup><a href="https://en.wikipedia.org/wiki/Club-Mate">1</a></sup>. 256 </p> 257 <p> 258 One Redditor described it's flavor as gingerbread-like<sup><a href="https://www.reddit.com/r/Soda/comments/qw4dtr/got_the_club_mate_winter_edition_from_germany/">2</a></sup> making this variant number 1 on my list of must-try Mates. If you ever find yourself in Germany, send a bottle my way! 259 </p> 260 </div> 261 <div class="subchunk"> 262 <h2>Club-Mate Cola</h2> 263 <p> 264 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_cola.png" class="inline-bottle" style="max-width:90px"> 265 As the name suggests, it's Club-Mate... plus Cola. 266 </p> 267 <p> 268 I imagine this one tastes like "weird Coca-Cola", but your guess is as good as mine. 269 </p> 270 <p> 271 One Redditor scathingly criticized this variant, claiming "I wouldnt get it again", while a response suggested the original poster was delusional, rebuking "This is the best cola drink out there"<sup><a href="https://www.reddit.com/r/Soda/comments/122pcak/clubmate_cola/">3</a></sup>. 272 </p> 273 </div> 274 <div class="subchunk"> 275 <h2>Club-Mate Beere</h2> 276 <p> 277 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_beere.png" class="inline-bottle" style="max-width:90px"> 278 Hold up, are you <b>21 or older</b>? If not, I probably shouldn't even be talking about this variant, which presumably mixes Club-Mate with straight up beer. 279 </p> 280 <p>What's that? It's just regular Club-Mate infused with with wild berry flavor?</p> 281 <p>Oh, well that's probably ok then.</p> 282 </div> 283 <div class="subchunk"> 284 <h2>Club-Mate Granat</h2> 285 <p> 286 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_granat.png" class="inline-bottle" style="max-width:90px"> 287 It looks like this one mixes Club-Mate with pomegranate juice. 288 </p> 289 <p> 290 Sounds good to me, but why does it look like <a href="https://www.mountaindew.com/product/mtn-dew-code-red">Mountain Dew Code Red</a>? 291 </p> 292 <p> 293 Something about this variant's electric colorway is telling me ingesting it may be hazardous to my health... but I still kinda want to try it. 294 </p> 295 </div> 296 <div class="subchunk"> 297 <h2>Club-Mate Ice‑T</h2> 298 <p> 299 <img src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/club-mate_ice-t.png" class="inline-bottle" style="max-width:90px"> 300 This Mate was created in collaboration with the <a href="https://en.wikipedia.org/wiki/Ice-T">American Hip Hop artist</a> of the same name. 301 </p> 302 <p> 303 No idea what's in it. 304 </p> 305 </div> 306 </div> 307 </div> 308 </body> 309 </html>