├── Procfile ├── .gitignore ├── public ├── images │ ├── fix-logotype.png │ ├── wood-grain.jpg │ ├── social │ │ ├── twitter.png │ │ ├── facebook.png │ │ ├── instagram.png │ │ ├── facebook.svg │ │ ├── twitter.svg │ │ └── instagram.svg │ ├── 071715_Heroku_9883-.jpg │ ├── kits │ │ ├── 071715_Heroku_3346-.jpg │ │ ├── 071715_Heroku_3385-.jpg │ │ ├── 071715_Heroku_3338-Edit-.jpg │ │ ├── 071715_Heroku_3353-Edit-.jpg │ │ └── 071715_Heroku_3376-Edit-.jpg │ └── products │ │ ├── 071715_Heroku_3302.jpg │ │ ├── 071715_Heroku_3209-.jpg │ │ ├── 071715_Heroku_3263-.jpg │ │ └── 071715_Heroku_3270-.jpg ├── reset.css ├── index.html └── main.css ├── README.markdown ├── app.json ├── package.json ├── index.js └── LICENSE /Procfile: -------------------------------------------------------------------------------- 1 | web: npm start 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.log 3 | -------------------------------------------------------------------------------- /public/images/fix-logotype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/fix-logotype.png -------------------------------------------------------------------------------- /public/images/wood-grain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/wood-grain.jpg -------------------------------------------------------------------------------- /public/images/social/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/social/twitter.png -------------------------------------------------------------------------------- /public/images/social/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/social/facebook.png -------------------------------------------------------------------------------- /public/images/social/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/social/instagram.png -------------------------------------------------------------------------------- /public/images/071715_Heroku_9883-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/071715_Heroku_9883-.jpg -------------------------------------------------------------------------------- /public/images/kits/071715_Heroku_3346-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/kits/071715_Heroku_3346-.jpg -------------------------------------------------------------------------------- /public/images/kits/071715_Heroku_3385-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/kits/071715_Heroku_3385-.jpg -------------------------------------------------------------------------------- /public/images/products/071715_Heroku_3302.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/products/071715_Heroku_3302.jpg -------------------------------------------------------------------------------- /public/images/kits/071715_Heroku_3338-Edit-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/kits/071715_Heroku_3338-Edit-.jpg -------------------------------------------------------------------------------- /public/images/kits/071715_Heroku_3353-Edit-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/kits/071715_Heroku_3353-Edit-.jpg -------------------------------------------------------------------------------- /public/images/kits/071715_Heroku_3376-Edit-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/kits/071715_Heroku_3376-Edit-.jpg -------------------------------------------------------------------------------- /public/images/products/071715_Heroku_3209-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/products/071715_Heroku_3209-.jpg -------------------------------------------------------------------------------- /public/images/products/071715_Heroku_3263-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/products/071715_Heroku_3263-.jpg -------------------------------------------------------------------------------- /public/images/products/071715_Heroku_3270-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyric/quick-fix/master/public/images/products/071715_Heroku_3270-.jpg -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | Quick Fix 2 | ========= 3 | 4 | [![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy?template=https://github.com/heroku/quick-fix) 5 | 6 | Static version of the [FIX eCommerce](https://heroku.github.io/fix) home page. Great for demonstrating [Github flow with Heroku](https://devcenter.heroku.com/articles/github-integration). 7 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Quick FIX", 3 | "description": "Static home page of FIX eCommerce storefront", 4 | "keywords": [ 5 | "node", 6 | "javascript" 7 | ], 8 | "website": "https://heroku.github.io/fix", 9 | "repository": "https://github.com/lyric/quick-fix.git", 10 | "env": {}, 11 | "addons": [], 12 | "image": "heroku/nodejs" 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quick-fix", 3 | "version": "1.0.0", 4 | "description": "FIX eCommerce home page optimized for deployment workflow demos", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node index.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "engines": { 11 | "node": "0.12.2" 12 | }, 13 | "author": "mars@heroku.com", 14 | "license": "ISC", 15 | "dependencies": { 16 | "express": "4.13.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | var PORT = process.env.PORT || 3000; 5 | 6 | app.use(function(req, res, next) { 7 | res.setHeader('Strict-Transport-Security', 'max-age=31536000'); 8 | res.setHeader('Content-Security-Policy', "script-src 'self'"); 9 | res.setHeader('X-Frame-Options', 'SAMEORIGIN'); 10 | res.setHeader('X-Xss-Protection', '1; mode=block'); 11 | res.setHeader('X-Content-Type-Options', 'nosniff'); 12 | next(); 13 | }); 14 | 15 | app.use(express.static('public')); 16 | 17 | var server = app.listen(PORT, function () { 18 | var host = server.address().address; 19 | var port = server.address().port; 20 | 21 | console.log('quickfix listening at http://%s:%s', host, port); 22 | }); 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © Heroku 2015 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 20 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 21 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 22 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /public/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* https://css-tricks.com/box-sizing/ 51 | Universal Box Sizing with Inheritance 52 | */ 53 | html { 54 | box-sizing: border-box; 55 | } 56 | *, *:before, *:after { 57 | box-sizing: inherit; 58 | } 59 | -------------------------------------------------------------------------------- /public/images/social/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | facebook 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /public/images/social/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | twitter 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /public/images/social/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | instagram 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FIX, curated coffee components 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 | 20 |
21 | Don's Coffee Kits are great!! 22 |
23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 | Browse Kits 31 | Browse Products 32 |
33 |
34 | 35 |
36 |
37 | 38 |

Curated Coffee Components

39 | 40 | 66 | 67 |
68 |
69 | 70 |

Complete Brewing Kits

71 | 72 | 104 | 105 |
106 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /public/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Source Sans Pro', sans-serif; 3 | font-weight: 300; 4 | box-sizing: border-box; 5 | } 6 | 7 | h1, h2, h3, h4, h5, h6 { 8 | font-weight: 200; 9 | } 10 | 11 | h1 { 12 | color: #939393; 13 | font-weight: 300; 14 | font-size: 1rem; 15 | letter-spacing: 0.2rem; 16 | text-transform: uppercase; 17 | text-align: center; 18 | padding: 30px 0; 19 | } 20 | @media (min-width: 500px) { 21 | h1 { 22 | font-size: 1.6rem; 23 | letter-spacing: 0.4rem; 24 | } 25 | } 26 | @media (min-width: 900px) { 27 | h1 { 28 | font-weight: 200; 29 | font-size: 2.2rem; 30 | letter-spacing: 0.6rem; 31 | } 32 | } 33 | 34 | header { 35 | color: white; 36 | 37 | height: 250px; 38 | padding: 40px 20px 20px 20px; 39 | background-repeat: no-repeat; 40 | background-position: center left 58%; 41 | background-image: url(images/071715_Heroku_9883-.jpg); 42 | -webkit-background-size: cover; 43 | -moz-background-size: cover; 44 | -o-background-size: cover; 45 | background-size: cover; 46 | } 47 | header .logo { 48 | width: 86px; 49 | } 50 | header .logo-text { 51 | text-transform: uppercase; 52 | font-size: 8px; 53 | font-weight: 600; 54 | letter-spacing: 1.8px; 55 | } 56 | @media (min-width: 500px) { 57 | header .logo { 58 | width: 100px; 59 | } 60 | header .logo-text { 61 | font-size: 10px; 62 | letter-spacing: 2px; 63 | } 64 | } 65 | @media (min-width: 500px) and (min-height: 500px) { 66 | header { 67 | height: 300px; 68 | padding: 50px 20px; 69 | } 70 | } 71 | @media (min-width: 900px) { 72 | header { 73 | height: 500px; 74 | padding: 100px 20px 50px 20px; 75 | } 76 | header .logo { 77 | width: 200px; 78 | margin-bottom: 10px; 79 | } 80 | header .logo-text { 81 | font-size: 14px; 82 | font-weight: 600; 83 | letter-spacing: 6.5px; 84 | } 85 | } 86 | @media (min-width: 1200px) and (min-height: 1000px) { 87 | header { 88 | height: 800px; 89 | padding: 200px 20px 100px 20px; 90 | } 91 | header .logo { 92 | width: 300px; 93 | margin-bottom: 20px; 94 | } 95 | header .logo-text { 96 | font-size: 18px; 97 | letter-spacing: 11px; 98 | } 99 | } 100 | 101 | .masthead-elements-row-1, 102 | .masthead-elements-row-2 { 103 | height: 50%; 104 | display: -webkit-box; 105 | display: -moz-box; 106 | display: -ms-flexbox; 107 | display: -webkit-flex; 108 | display: flex; 109 | -webkit-flex-wrap: nowrap; 110 | flex-wrap: nowrap; 111 | -webkit-justify-content: space-between; 112 | justify-content: space-between; 113 | } 114 | 115 | .masthead-elements-row-2 { 116 | -webkit-align-items: flex-end; 117 | align-items: flex-end; 118 | } 119 | 120 | .masthead-elements-row-1 > div, 121 | .masthead-elements-row-2 > div { 122 | /* border: 1px dashed red; */ 123 | -webkit-box-flex: 1 1 0; 124 | -moz-box-flex: 1 1 0; 125 | -webkit-flex: 1 1 0; 126 | -ms-flex: 1 1 0; 127 | flex: 1 1 0; 128 | } 129 | 130 | .element-left { 131 | 132 | } 133 | .element-middle { 134 | text-align: center; 135 | } 136 | .element-right { 137 | text-align: right; 138 | } 139 | 140 | .textured-section { 141 | background-color: rgb(161,109,59); 142 | background-image: url(images/wood-grain.jpg); 143 | background-position: left top; 144 | } 145 | .textured-section h1 { 146 | font-weight: 600; 147 | color: rgb(247,220,172); 148 | } 149 | @media (min-width: 500px) { 150 | .textured-section h1 { 151 | font-weight: 300; 152 | } 153 | } 154 | 155 | button, html input[type="button"], input[type="reset"], input[type="submit"] { 156 | -webkit-appearance: button; 157 | cursor: pointer; 158 | } 159 | input, button, select, textarea { 160 | font-family: inherit; 161 | font-size: inherit; 162 | line-height: inherit; 163 | } 164 | .btn { 165 | display: inline-block; 166 | margin-bottom: 0; 167 | font-weight: normal; 168 | text-align: center; 169 | vertical-align: middle; 170 | -ms-touch-action: manipulation; 171 | touch-action: manipulation; 172 | cursor: pointer; 173 | background-image: none; 174 | border: 1px solid transparent; 175 | white-space: nowrap; 176 | padding: 6px 12px; 177 | font-size: 14px; 178 | line-height: 1.42857143; 179 | border-radius: 4px; 180 | -webkit-user-select: none; 181 | -moz-user-select: none; 182 | -ms-user-select: none; 183 | user-select: none; 184 | } 185 | a.btn { 186 | text-decoration: none; 187 | } 188 | .btn + .btn { 189 | margin-left: 10px; 190 | } 191 | .btn-default { 192 | color: #333; 193 | background-color: #fff; 194 | border-color: #fff; 195 | } 196 | .btn-trans { 197 | color: #333; 198 | background-color: rgba(255,255,255,0.4); 199 | border-color: #fff; 200 | } 201 | .btn-hot { 202 | color: #ff3300; 203 | background-color: #fff; 204 | border-color: #ff3300; 205 | } 206 | 207 | .products { 208 | display: -webkit-box; 209 | display: -moz-box; 210 | display: -ms-flexbox; 211 | display: -webkit-flex; 212 | display: flex; 213 | -webkit-flex-wrap: wrap; 214 | flex-wrap: wrap; 215 | -webkit-justify-content: center; 216 | justify-content: center; 217 | } 218 | .products > * { 219 | /* border: 1px dashed red; */ 220 | width: 250px; 221 | -webkit-box-flex: 0 0 auto; 222 | -moz-box-flex: 0 0 auto; 223 | -webkit-flex: 0 0 auto; 224 | -ms-flex: 0 0 auto; 225 | flex: 0 0 auto; 226 | 227 | background-color: #fff; 228 | border-radius: 4px; 229 | text-align: center; 230 | padding: 4px 4px 20px 4px; 231 | margin-bottom: 20px; 232 | margin-left: 10px; 233 | margin-right: 10px; 234 | } 235 | .product-image { 236 | width: 100%; 237 | } 238 | .product-name { 239 | font-weight: 300; 240 | height: 2em; 241 | } 242 | .product-price { 243 | font-weight: 300; 244 | height: 1.5em; 245 | } 246 | .product-button { 247 | font-weight: 300; 248 | } 249 | @media (min-width: 800px) { 250 | .products > * { 251 | width: 350px; 252 | } 253 | } 254 | @media (min-width: 1100px) { 255 | .products > * { 256 | width: 250px; 257 | } 258 | } 259 | @media (min-width: 1700px) { 260 | .products > * { 261 | width: 400px; 262 | } 263 | .products > li { 264 | } 265 | } 266 | 267 | .kits { 268 | display: -webkit-box; 269 | display: -moz-box; 270 | display: -ms-flexbox; 271 | display: -webkit-flex; 272 | display: flex; 273 | -webkit-flex-wrap: wrap; 274 | flex-wrap: wrap; 275 | -webkit-justify-content: center; 276 | justify-content: center; 277 | } 278 | .kits > * { 279 | /* border: 1px dashed red; */ 280 | width: 300px; 281 | -webkit-box-flex: 0 0 auto; 282 | -moz-box-flex: 0 0 auto; 283 | -webkit-flex: 0 0 auto; 284 | -ms-flex: 0 0 auto; 285 | flex: 0 0 auto; 286 | 287 | background-color: #fff; 288 | border-radius: 4px; 289 | text-align: center; 290 | margin-left: 10px; 291 | margin-right: 10px; 292 | } 293 | .kit-image { 294 | width: 100%; 295 | } 296 | .kit-name { 297 | font-weight: 300; 298 | height: 2em; 299 | } 300 | .kit-price { 301 | font-weight: 300; 302 | height: 1.5em; 303 | } 304 | .kit-button { 305 | font-weight: 300; 306 | } 307 | @media (min-width: 400px) { 308 | .kits > * { 309 | width: 180px; 310 | } 311 | } 312 | @media (min-width: 800px) { 313 | .kits > * { 314 | width: 300px; 315 | } 316 | } 317 | @media (min-width: 1100px) { 318 | .kits > * { 319 | width: 200px; 320 | } 321 | } 322 | @media (min-width: 1700px) { 323 | .kits > * { 324 | width: 300px; 325 | } 326 | .kits > li { 327 | } 328 | } 329 | 330 | footer { 331 | color: #fff; 332 | background-color: #000; 333 | margin-top: 30px; 334 | 335 | display: -webkit-box; 336 | display: -moz-box; 337 | display: -ms-flexbox; 338 | display: -webkit-flex; 339 | display: flex; 340 | -webkit-flex-wrap: nowrap; 341 | flex-wrap: nowrap; 342 | -webkit-flex-direction: column; 343 | flex-direction: column; 344 | -webkit-justify-content: flex-start; 345 | justify-content: flex-start; 346 | -webkit-align-content: stretch; 347 | align-content: stretch; 348 | } 349 | footer a { 350 | color: #fff; 351 | text-decoration: none; 352 | } 353 | .trailer-logo { 354 | text-align: center; 355 | padding: 30px 0 20px 0; 356 | line-height: 1rem; 357 | } 358 | .trailer-logo .logo { 359 | width: 86px; 360 | } 361 | .trailer-logo .logo-text { 362 | text-transform: uppercase; 363 | font-size: 8px; 364 | font-weight: 600; 365 | letter-spacing: 1.8px; 366 | } 367 | .trailer-links { 368 | background-color: #222; 369 | padding: 30px 0 20px 0; 370 | 371 | -webkit-box-flex: 0 0 auto; 372 | -moz-box-flex: 0 0 auto; 373 | -webkit-flex: 0 0 auto; 374 | -ms-flex: 0 0 auto; 375 | flex: 0 0 auto; 376 | 377 | display: -webkit-box; 378 | display: -moz-box; 379 | display: -ms-flexbox; 380 | display: -webkit-flex; 381 | display: flex; 382 | -webkit-flex-wrap: nowrap; 383 | flex-wrap: nowrap; 384 | -webkit-flex-direction: column; 385 | flex-direction: column; 386 | -webkit-justify-content: space-around; 387 | justify-content: space-around; 388 | -webkit-align-content: stretch; 389 | align-content: stretch; 390 | } 391 | .internal-links { 392 | text-align: center; 393 | margin-bottom: 30px; 394 | font-size: 1rem; 395 | line-height: 1.8rem; 396 | } 397 | .social-links { 398 | font-size: 0.7rem; 399 | 400 | display: -webkit-box; 401 | display: -moz-box; 402 | display: -ms-flexbox; 403 | display: -webkit-flex; 404 | display: flex; 405 | -webkit-flex-wrap: nowrap; 406 | flex-wrap: nowrap; 407 | -webkit-flex-direction: row; 408 | flex-direction: row; 409 | -webkit-justify-content: center; 410 | justify-content: center; 411 | -webkit-align-content: stretch; 412 | align-content: stretch; 413 | } 414 | .social-links > * { 415 | width: 100px; 416 | text-align: center; 417 | line-height: 1rem; 418 | margin: 0 10px; 419 | -webkit-box-flex: 0 0 auto; 420 | -moz-box-flex: 0 0 auto; 421 | -webkit-flex: 0 0 auto; 422 | -ms-flex: 0 0 auto; 423 | flex: 0 0 auto; 424 | } 425 | .social-logo { 426 | width: 48px; 427 | } 428 | .social-verb, 429 | .social-name { 430 | display: block; 431 | } 432 | .social-verb { 433 | color: #999; 434 | } 435 | .social-name { 436 | text-transform: uppercase; 437 | letter-spacing: 0.3rem; 438 | } 439 | @media (min-width: 800px) { 440 | footer { 441 | -webkit-flex-direction: row; 442 | flex-direction: row; 443 | } 444 | .trailer-logo { 445 | width: 25%; 446 | } 447 | .trailer-links { 448 | width: 75%; 449 | 450 | -webkit-flex-direction: row; 451 | flex-direction: row; 452 | } 453 | .internal-links { 454 | text-align: left; 455 | } 456 | } 457 | --------------------------------------------------------------------------------