├── .gitignore ├── README.md ├── assets ├── css │ └── main.css ├── img │ ├── grid.png │ └── texture.jpg └── js │ ├── html5shiv.js │ └── jquery-1.9.1.min.js ├── index.html └── lessons ├── 00-ems-workshop └── ems-files.zip ├── 01-performance-organization ├── buttons │ ├── assets │ │ ├── css │ │ │ └── buttons.css │ │ └── js │ │ │ └── html5shiv.js │ ├── buttons.html │ └── buttons.zip ├── media-object │ ├── assets │ │ ├── css │ │ │ └── media-object.css │ │ ├── img │ │ │ ├── carolyn.jpg │ │ │ ├── darby.jpg │ │ │ ├── erica.jpg │ │ │ ├── jason.jpg │ │ │ ├── shay.jpg │ │ │ └── tracy.jpg │ │ └── js │ │ │ └── html5shiv.js │ ├── media-object.html │ └── media-object.zip └── navigation │ ├── assets │ ├── css │ │ └── navigation.css │ └── js │ │ └── html5shiv.js │ ├── navigation.html │ └── navigation.zip ├── 03-complex-selectors ├── all.zip ├── assets │ ├── css │ │ └── base.css │ └── js │ │ └── modernizr.js ├── attributes │ ├── assets │ │ ├── css │ │ │ └── attributes.css │ │ └── img │ │ │ ├── SBTB-33.jpg │ │ │ ├── SBTB-CY-1.jpg │ │ │ ├── reward-lock.png │ │ │ └── sprite.png │ └── index.html ├── pseudo-classes │ ├── assets │ │ ├── css │ │ │ └── pseudo.css │ │ └── img │ │ │ ├── SBTB-33.jpg │ │ │ ├── SBTB-CY-1.jpg │ │ │ ├── divider.png │ │ │ ├── reward-lock.png │ │ │ └── sprite.png │ └── index.html ├── relationships │ ├── assets │ │ ├── css │ │ │ └── relationships.css │ │ └── img │ │ │ └── sprite.png │ └── index.html └── targets │ ├── assets │ └── css │ │ └── targets.css │ └── index.html ├── 04-responsive-design ├── all.zip ├── assets │ ├── css │ │ ├── fluid-or-responsive.css │ │ ├── loosen-up.css │ │ ├── reset.css │ │ └── what-does-it-mean.css │ └── img │ │ └── rainbowguy.png ├── fluid-or-responsive.html ├── loosen-up.html └── what-does-it-mean.html └── 07-transforms └── in-class ├── config.rb ├── images └── book.jpg ├── index.html ├── sass └── main.scss ├── scripts └── main.js └── stylesheets └── main.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | advanced-guide-html-css 2 | ======================= 3 | 4 | Exercises for lessons on An Advanced Guide to HTML & CSS. -------------------------------------------------------------------------------- /assets/css/main.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 | body { 27 | line-height: 1; 28 | } 29 | blockquote, q { 30 | quotes: none; 31 | } 32 | blockquote:before, blockquote:after, 33 | q:before, q:after { 34 | content: ''; 35 | content: none; 36 | } 37 | table { 38 | border-collapse: collapse; 39 | border-spacing: 0; 40 | } 41 | 42 | /* 43 | Resetting defaults 44 | */ 45 | 46 | b, strong { 47 | font-weight: bold; 48 | } 49 | i, em { 50 | font-style: italic; 51 | } 52 | sup { 53 | vertical-align: super; 54 | font-size: .85em; 55 | } 56 | 57 | /* 58 | Grid 59 | */ 60 | 61 | .container { 62 | max-width: 700px; 63 | margin: 0 auto; 64 | } 65 | 66 | /* 67 | Clearfix 68 | */ 69 | 70 | .group:before, 71 | .group:after { 72 | content: ""; 73 | display: table; 74 | } 75 | .group:after { 76 | clear: both; 77 | } 78 | .group { 79 | *zoom: 1; 80 | } 81 | 82 | /* 83 | Typography 84 | */ 85 | 86 | /* $serif: 'Droid Serif', Constantia, Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif */ 87 | /* $unicode: 'Source Code Pro', Inconsolata, 'Lucida Console', Terminal, 'Courier New', Courier */ 88 | 89 | body { 90 | background: #fafbfc url("../img/texture.jpg") 0 0 repeat; 91 | color: #555; 92 | font: 14px/20px "Droid Sans", Arial, "Helvetica Neue", "Lucida Grande", sans-serif; 93 | text-shadow: 0 1px 0 #fff 94 | } 95 | p { 96 | margin-bottom: 20px; 97 | } 98 | h1, h2, h3, h4, h5, h6 { 99 | color: #404853; 100 | font-weight: 700; 101 | } 102 | h3, h4, h5 { 103 | margin-bottom: 20px; 104 | } 105 | h1 { 106 | font-size: 26px; 107 | line-height: 40px; 108 | } 109 | h2 { 110 | font-size: 21px; 111 | } 112 | h3, h4 { 113 | font-size: 16px; 114 | } 115 | h6 { 116 | color: #8c9198; 117 | font-size: 12px; 118 | text-transform: uppercase; 119 | } 120 | abbr[title="and"] { 121 | font-family: Baskerville,Palatino,"Book Antiqua",serif; 122 | font-size: .9em; 123 | font-style: italic; 124 | font-weight: normal; 125 | line-height: 1; 126 | } 127 | code { 128 | color: #8c9198; 129 | font-family: "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier; 130 | } 131 | strong { 132 | color: #404853; 133 | } 134 | .text-offset { 135 | color: #8c9198; 136 | } 137 | 138 | /* 139 | Links 140 | */ 141 | 142 | a { 143 | color: #8ec63f; 144 | text-decoration: none; 145 | -webkit-transition: all .15s linear; 146 | -moz-transition: all .15s linear; 147 | -o-transition: all .15s linear; 148 | transition: all .15s linear; 149 | } 150 | a:hover { 151 | color: #f7941d; 152 | } 153 | .link-source { 154 | color: #d0d2d5; 155 | float: right; 156 | font-size: 12px; 157 | } 158 | .link-source a { 159 | color: #8c9198; 160 | } 161 | .link-source a:hover { 162 | color: #f7941d; 163 | } 164 | 165 | /* 166 | Lists 167 | */ 168 | 169 | ol, ul { 170 | margin: 0 0 20px 20px; 171 | } 172 | ul { 173 | list-style: square; 174 | } 175 | li { 176 | margin-bottom: 20px; 177 | } 178 | 179 | /* Nested lists */ 180 | 181 | ol ol, 182 | ol ul, 183 | ul ul, 184 | ul ol { 185 | margin: 20px 0 0 35px; 186 | } 187 | 188 | /* Link lists */ 189 | 190 | .list-links { 191 | color: #d0d2d5; 192 | } 193 | .list-links li { 194 | margin-bottom: 0; 195 | } 196 | 197 | /* Ordered lists */ 198 | 199 | .list-ordered { 200 | list-style: none; 201 | margin-left: 35px; 202 | } 203 | .list-ordered-number { 204 | background: #d0d2d5; 205 | background: rgba(0,0,0,0.13); 206 | -webkit-border-radius: 50%; 207 | -moz-border-radius: 50%; 208 | -ms-border-radius: 50%; 209 | -o-border-radius: 50%; 210 | border-radius: 50%; 211 | -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .06), 0 1px 0 #fff; 212 | -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .06), 0 1px 0 #fff; 213 | box-shadow: inset 0 1px 0 rgba(0, 0, 0, .06), 0 1px 0 #fff; 214 | color: #fff; 215 | float: left; 216 | font: 13px/26px "Droid Serif",Constantia,Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif; 217 | height: 25px; 218 | margin: -3px 0 0 -35px; 219 | text-align: center; 220 | text-shadow: 0 -1px 0 rgba(0, 0, 0, .15); 221 | width: 25px; 222 | } 223 | 224 | /* 225 | Primary header 226 | */ 227 | 228 | .primary-header h1 { 229 | font-weight: bold; 230 | margin: 40px 0; 231 | text-align: center; 232 | } 233 | 234 | /* 235 | Lesson 236 | */ 237 | 238 | .lesson { 239 | border-bottom: 1px solid #d0d2d5; 240 | -webkit-box-shadow: 0 1px 0 #fff; 241 | -moz-box-shadow: 0 1px 0 #fff; 242 | box-shadow: 0 1px 0 #fff; 243 | margin-bottom: 40px; 244 | padding-bottom: 19px; 245 | } 246 | .lesson:last-child { 247 | border-bottom: 0; 248 | -webkit-box-shadow: none; 249 | -moz-box-shadow: none; 250 | box-shadow: none; 251 | } 252 | 253 | /* Heading */ 254 | 255 | .lesson-link { 256 | float: right; 257 | } 258 | .lesson-title { 259 | margin-bottom: 19px; 260 | } 261 | .lesson-title-extended { 262 | margin-bottom: 20px; 263 | } 264 | 265 | /* Layout */ 266 | 267 | .lesson-main { 268 | float: left; 269 | width: 450px; 270 | } 271 | .note { 272 | background: #fff; 273 | border-bottom: 1px solid #e8eae9; 274 | border-top: 2px solid #8c9198; 275 | float: right; 276 | margin-bottom: 19px; 277 | padding: 18px 20px 0 20px; 278 | width: 180px; 279 | } 280 | -------------------------------------------------------------------------------- /assets/img/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/assets/img/grid.png -------------------------------------------------------------------------------- /assets/img/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/assets/img/texture.jpg -------------------------------------------------------------------------------- /assets/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | 6 | 7 | 8 | An Advanced Guide to HTML & CSS Coursework 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 |
27 |

An Advanced Guide to HTML & CSS Coursework

28 |
29 | 30 | 31 | 32 |
33 | 34 |
Lesson 1
35 | View Lesson → 36 |

Performance & Organization

37 | 38 |
39 | 40 |

In-class

41 | 42 | 68 | 69 |

Homework

70 | 71 |
    72 |
  1. 73 | 1 74 | Read this weeks, as well as next weeks, lesson on An Advanced Guide to HTML & CSS 75 |
    2. 76 |
  2. 77 | 2 78 | Create a personal website, including Home, About, and Experiments pages 79 |
      80 |
    • Include a header, global navigation, footer, and at least two columns
      • 81 |
    82 |
    3. 83 |
  3. 84 | 3 85 | Add the appropriate content on the Home and About pages 86 |
      87 |
    • On the Home page introduce visitors to your website and loop in all of your other pages
      • 88 |
    • On the About page briefly describe yourself, perhaps including your resume
      • 89 |
    90 |
    4. 91 |
  4. 92 | 4 93 | On the Experiments page create a set of alert messages, using modular styles based on what was learned from building modular buttons 94 |
      95 |
    • Alert messages should include styles for information, success, warning, and error messages
      • 96 |
    • Inspiration for different alert message styles may be found on Dribbble
      • 97 |
    98 |
    5. 99 |
  5. 100 | 5 101 | Create an account on GitHub and try to install Git on your computer 102 |
    6. 103 |
104 | 105 |
106 | 107 | 114 | 115 |
116 | 117 | 118 | 119 |
120 | 121 |
Lesson 2
122 | View Lesson → 123 |

Detailed Positioning

124 | 125 |
126 | 127 |

Homework

128 | 129 |
    130 |
  1. 131 | 1 132 | Within your website, perhaps on your Home page, create a few different columns of content 133 |
      134 |
    • Contain each row of floats as necessary to prevent other content from collapsing around the columns
      • 135 |
    • For bonus points build a grid system to share column sizes
      • 136 |
    137 |
    2. 138 |
  2. 139 | 2 140 | Add a positioning experiment to the Experiments page including a set of tooltips 141 |
      142 |
    • Absolutely positioning the tooltips as necessary to the related content
      • 143 |
    • Only show the tooltip upon hover or focus of the related content
      • 144 |
    145 |
    3. 146 |
  3. 147 | 3 148 | Push your homework to GitHub for review 149 |
    4. 150 |
  4. 151 | 4 152 | Read next weeks lesson on An Advanced Guide to HTML & CSS 153 |
    5. 154 |
155 | 156 |
157 | 158 | 170 | 171 |
172 | 173 | 174 | 175 |
176 | 177 |
Lesson 3
178 | View Lesson → 179 |

Complex Selectors

180 | 181 |
182 | 183 |

In-class

184 | 185 | 213 | 214 |

Homework

215 | 216 |
    217 |
  1. 218 | 1 219 | Add a Journal page to your website, including a journal entry detailing what you’ve learned thus far 220 |
    2. 221 |
  2. 222 | 2 223 | On each journal entry, text indent the first line of each paragraph, except the first paragraph, as recommended in the Chicago Manual of Style 224 |
    3. 225 |
  3. 226 | 3 227 | Put a “Lock” icon next to any link referencing a secure website beginning with https 228 |
    4. 229 |
  4. 230 | 4 231 | Put a “New Window” icon next to any link referencing an external website 232 |
    5. 233 |
  5. 234 | 5 235 | Push your homework to GitHub for review 236 |
    6. 237 |
  6. 238 | 6 239 | Read next weeks lesson on An Advanced Guide to HTML & CSS 240 |
    7. 241 |
242 | 243 |
244 | 245 | 262 | 263 |
264 | 265 | 266 | 267 |
268 | 269 |
Lesson 4
270 | View Lesson → 271 |

Responsive Web Design

272 | 273 |
274 | 275 |

In-class

276 | 277 | 299 | 300 |

Homework

301 | 302 |
    303 |
  1. 304 | 1 305 | Convert your website into a responsive website, adjusting and reorganizing content as the width of the browser window changes 306 |
      307 |
    • Make use of a flexible layout, media queries, and flexible media where necessary
      • 308 |
    • Reduce fixed length values where possible
      • 309 |
    310 |
    2. 311 |
  2. 312 | 2 313 | Push your homework to GitHub for review 314 |
    3. 315 |
  3. 316 | 3 317 | Read next weeks lesson on An Advanced Guide to HTML & CSS 318 |
    4. 319 |
320 | 321 |
322 | 323 | 335 | 336 |
337 | 338 | 339 | 340 |
341 | 342 |
Lesson 5
343 | View Lesson → 344 |

Preprocessors

345 | 346 |
347 | 348 |

Homework

349 | 350 |
    351 |
  1. 352 | 1 353 | Refractor your website using Haml and Sass 354 |
      355 |
    • Look for areas where variables, mixins, and extends can be used within your stylesheet
      • 356 |
    • For bonus points make use of a mixin library, such as Compass or Bourbon
      • 357 |
    358 |
    2. 359 |
  2. 360 | 2 361 | Push your homework to GitHub for review 362 |
    3. 363 |
  3. 364 | 3 365 | Read next weeks lesson on An Advanced Guide to HTML & CSS 366 |
    4. 367 |
368 | 369 |
370 | 371 |
372 | 373 | 374 | 375 |
376 | 377 |
Lesson 6
378 | View Lesson → 379 |

jQuery

380 | 381 |
382 | 383 |

Homework

384 | 385 |
    386 |
  1. 387 | 1 388 | Add a toggle experiment to the Experiments page that shows and hides content based off a click event, using jQuery to achieve the desired behaviors where necessary 389 |
    2. 390 |
  2. 391 | 2 392 | Refactor your alert messages experiment, adding in a “close” icon 393 |
      394 |
    • Write some jQuery that will fade out and remove the alert message upon clicking the “close” icon
      • 395 |
    396 |
    3. 397 |
  3. 398 | 3 399 | Push your homework to GitHub for review 400 |
    4. 401 |
  4. 402 | 4 403 | Read next weeks lesson on An Advanced Guide to HTML & CSS 404 |
    5. 405 |
406 | 407 |
408 | 409 |
410 | 411 | 412 | 413 |
414 | 415 |
Lesson 7
416 | View Lesson → 417 |

Transforms

418 | 419 |
420 | 421 |

Homework

422 | 423 |
    424 |
  1. 425 | 1 426 | Add a transforms experiment to the Experiments page including a handful of playing cards scattered around face down 427 |
      428 |
    • Use jQuery and transforms to make a card flip over, exposing the face of the card
      • 429 |
    • Added challenge: make the flip look as natural as possible
      • 430 |
    431 |
    2. 432 |
  2. 433 | 2 434 | Push your homework to GitHub for review 435 |
    3. 436 |
  3. 437 | 3 438 | Read next weeks lesson on An Advanced Guide to HTML & CSS 439 |
    4. 440 |
441 | 442 |
443 | 444 |
445 | 446 | 447 | 448 | 449 |
450 | 451 |
Lesson 8
452 | View Lesson → 453 |

Transitions & Animations

454 | 455 |
456 | 457 |

Homework

458 | 459 |
    460 |
  1. 461 | 1 462 | Refactor the tooltips experiment, transitioning the tooltips to slide into position upon the related content being hovered or focused 463 |
    2. 464 |
  2. 465 | 2 466 | Add an animation experiment to the Experiments page including a waiting, or “Loading…”, animation 467 |
      468 |
    • Be creative, animate the hands of a clock, an hour glass, even text
      • 469 |
    470 |
    3. 471 |
  3. 472 | 3 473 | Look for areas where transitions and animations could be used on your website, on the hovering of links or buttons for example 474 |
    4. 475 |
  4. 476 | 4 477 | Push your homework to GitHub for review 478 |
    5. 479 |
  5. 480 | 5 481 | Read next weeks lesson on An Advanced Guide to HTML & CSS 482 |
    6. 483 |
484 | 485 |
486 | 487 |
488 | 489 | 490 | 491 |
492 | 493 |
Lesson 9
494 | View Lesson → 495 |

Feature Support & Polyfills

496 | 497 |
498 | 499 |

Homework

500 | 501 |
    502 |
  1. 503 | 1 504 | Set up Virtual Box, as well as Internet Explorer 6-9 virtual machines 505 |
    2. 506 |
  2. 507 | 2 508 | Include Modernizr within your website 509 |
      510 |
    • Include the HTML5 Shiv within Modernizr
      • 511 |
    • Add in CSS3 fallbacks where deemed necessary
      • 512 |
    • Use the .mq() method for deferring loading of scripts where deemed necessary
      • 513 |
    514 |
    3. 515 |
  3. 516 | 3 517 | Unsure your personal site works in all modern browsers 518 |
    4. 519 |
  4. 520 | 4 521 | Push your homework to GitHub for review 522 |
    5. 523 |
  5. 524 | 5 525 | Read next weeks lesson on An Advanced Guide to HTML & CSS 526 |
    6. 527 |
528 | 529 |
530 | 531 |
532 | 533 | 534 | 535 |
536 | 537 |
Lesson 10
538 | View Lesson → 539 |

Extending Semantics & Accessibility

540 | 541 |
542 | 543 |

Homework

544 | 545 |
    546 |
  1. 547 | 1 548 | Wrap up your personal website, adding in any finishing touches 549 |
    2. 550 |
  2. 551 | 2 552 | Ensure your website is standards compliant by checking your HTML documents and CSS stylesheet using the W3C validation services 553 |
    3. 554 |
  3. 555 | 3 556 | Push your homework to GitHub for review 557 |
    4. 558 |
559 | 560 |
561 | 562 |
563 | 564 |
565 | 566 | 567 | 568 | 569 | 570 |
571 | 572 | 573 | 574 | 575 | 576 | 577 | -------------------------------------------------------------------------------- /lessons/00-ems-workshop/ems-files.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/00-ems-workshop/ems-files.zip -------------------------------------------------------------------------------- /lessons/01-performance-organization/buttons/assets/css/buttons.css: -------------------------------------------------------------------------------- 1 | 2 | /* Buttons 3 | ================================================== */ 4 | 5 | /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ 6 | 7 | /* HTML5 display definitions 8 | ================================================== */ 9 | 10 | article, 11 | aside, 12 | details, 13 | figcaption, 14 | figure, 15 | footer, 16 | header, 17 | hgroup, 18 | main, 19 | nav, 20 | section, 21 | summary { 22 | display: block; 23 | } 24 | 25 | /* Base 26 | ================================================== */ 27 | 28 | html { 29 | color: #555; 30 | font: 14px/20px "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 31 | text-shadow: 0 1px 0 #fff; 32 | } 33 | body { 34 | background: #fafbfc; 35 | margin: 0; 36 | } 37 | 38 | /* Links 39 | ================================================== */ 40 | 41 | a:focus { 42 | outline: thin dotted; 43 | } 44 | a:active, 45 | a:hover { 46 | outline: 0; 47 | } 48 | 49 | /* Typography 50 | ================================================== */ 51 | 52 | h1, h2, h3, h4, h5, h6, p { 53 | margin: 0 0 20px 0; 54 | } 55 | 56 | /* Sizes */ 57 | 58 | h1, 59 | .h-headline { 60 | font-size: 36px; 61 | } 62 | h2, 63 | .h-subheadline { 64 | font-size: 24px; 65 | } 66 | h3, 67 | .h-byline { 68 | font-size: 21px; 69 | } 70 | h4, 71 | .h-standfirst { 72 | font-size: 18px; 73 | } 74 | h5, 75 | .h-related { 76 | font-size: 16px; 77 | } 78 | h6, 79 | .h-promo { 80 | font-size: 14px; 81 | } 82 | 83 | /* Colors */ 84 | 85 | h1, h2, h3, h4 { 86 | color: #404853; 87 | } 88 | h5, h6 { 89 | color: #333; 90 | } 91 | 92 | /* Offsets */ 93 | 94 | b, 95 | strong { 96 | font-weight: bold; 97 | } 98 | .text-subtle { 99 | color: #999; 100 | font-weight: normal; 101 | } 102 | 103 | /* Media 104 | ================================================== */ 105 | 106 | img { 107 | border: 0; 108 | } 109 | figure { 110 | margin: 0; 111 | } 112 | 113 | /* Simple grid 114 | ================================================== */ 115 | 116 | *, 117 | *:after, 118 | *:before { 119 | -webkit-box-sizing: border-box; 120 | -moz-box-sizing: border-box; 121 | box-sizing: border-box; 122 | } 123 | 124 | /* Box offset */ 125 | 126 | .box-offset { 127 | background: #fff; 128 | border: 1px solid #d4d4d4; 129 | -webkit-border-radius: 5px; 130 | -moz-border-radius: 5px; 131 | -ms-border-radius: 5px; 132 | -o-border-radius: 5px; 133 | border-radius: 5px; 134 | } 135 | 136 | /* Container */ 137 | 138 | .container { 139 | margin: 20px auto; 140 | max-width: 940px; 141 | } 142 | 143 | /* Columns */ 144 | 145 | .col-1-3, 146 | .col-2-3 { 147 | float: left; 148 | } 149 | .col-1-3 { 150 | width: 33.33%; 151 | } 152 | .col-2-3 { 153 | width: 66.66%; 154 | } 155 | 156 | /* Surgical classes */ 157 | 158 | .col-gutters { 159 | padding-left: 20px; 160 | padding-right: 20px; 161 | } 162 | .col-baselines { 163 | padding-bottom: 20px; 164 | padding-top: 20px; 165 | } 166 | 167 | /* Margins and paddings */ 168 | 169 | .margin-bottom { 170 | margin-bottom: 20px; 171 | } 172 | .margin-top { 173 | margin-top: 20px; 174 | } 175 | .pad-bottom { 176 | padding-bottom: 20px; 177 | } 178 | .pad-top { 179 | padding-top: 20px; 180 | } 181 | 182 | /* Default style 183 | ================================================== */ 184 | 185 | .btn { 186 | background-color: #006dcc; 187 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #08c), color-stop(100%, #04c)); 188 | background-image: -webkit-linear-gradient(#08c, #04c); 189 | background-image: -moz-linear-gradient(#08c, #04c); 190 | background-image: -o-linear-gradient(#08c, #04c); 191 | background-image: linear-gradient(#08c, #04c); 192 | border-color: #04c #04c #002a80 #04c; 193 | border-width: 1px; 194 | border-style: solid; 195 | -webkit-border-radius: 4px; 196 | -moz-border-radius: 4px; 197 | -ms-border-radius: 4px; 198 | -o-border-radius: 4px; 199 | border-radius: 4px; 200 | -webkit-box-shadow: rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05); 201 | -moz-box-shadow: rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05); 202 | box-shadow: rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05); 203 | color: #fff; 204 | cursor: pointer; 205 | display: inline-block; 206 | font: 14px/20px "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 207 | margin: 0; 208 | padding: 4px 12px; 209 | text-align: center; 210 | text-decoration: none; 211 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 212 | vertical-align: middle; 213 | } 214 | 215 | /* Types 216 | ================================================== */ 217 | 218 | .btn-success { 219 | background-color: #5bb75b; 220 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #51a351)); 221 | background-image: -webkit-linear-gradient(#62c462, #51a351); 222 | background-image: -moz-linear-gradient(#62c462, #51a351); 223 | background-image: -o-linear-gradient(#62c462, #51a351); 224 | background-image: linear-gradient(#62c462, #51a351); 225 | border-color: #51a351 #51a351 #387038 #51a351; 226 | } 227 | .btn-warning { 228 | background-color: #faa732; 229 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #f89406)); 230 | background-image: -webkit-linear-gradient(#fbb450, #f89406); 231 | background-image: -moz-linear-gradient(#fbb450, #f89406); 232 | background-image: -o-linear-gradient(#fbb450, #f89406); 233 | background-image: linear-gradient(#fbb450, #f89406); 234 | border-color: #f89406 #f89406 #ad6704 #f89406; 235 | } 236 | .btn-danger { 237 | background-color: #da4f49; 238 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f)); 239 | background-image: -webkit-linear-gradient(#ee5f5b, #bd362f); 240 | background-image: -moz-linear-gradient(#ee5f5b, #bd362f); 241 | background-image: -o-linear-gradient(#ee5f5b, #bd362f); 242 | background-image: linear-gradient(#ee5f5b, #bd362f); 243 | border-color: #bd362f #bd362f #802420 #bd362f; 244 | } 245 | .btn-boring { 246 | background-color: #f5f5f5; 247 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #e6e6e6)); 248 | background-image: -webkit-linear-gradient(#fff, #e6e6e6); 249 | background-image: -moz-linear-gradient(#fff, #e6e6e6); 250 | background-image: -o-linear-gradient(#fff, #e6e6e6); 251 | background-image: linear-gradient(#fff, #e6e6e6); 252 | border-color: #e6e6e6 #e6e6e6 #bfbfbf #e6e6e6; 253 | color: #333; 254 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 255 | } 256 | 257 | /* Sizes 258 | ================================================== */ 259 | 260 | .btn-large { 261 | -webkit-border-radius: 6px; 262 | -moz-border-radius: 6px; 263 | -ms-border-radius: 6px; 264 | -o-border-radius: 6px; 265 | border-radius: 6px; 266 | font-size: 18px; 267 | padding: 11px 19px; 268 | } 269 | .btn-small { 270 | -webkit-border-radius: 3px; 271 | -moz-border-radius: 3px; 272 | -ms-border-radius: 3px; 273 | -o-border-radius: 3px; 274 | border-radius: 3px; 275 | font-size: 12px; 276 | padding: 2px 10px; 277 | } 278 | .btn-mini { 279 | -webkit-border-radius: 3px; 280 | -moz-border-radius: 3px; 281 | -ms-border-radius: 3px; 282 | -o-border-radius: 3px; 283 | border-radius: 3px; 284 | font-size: 10px; 285 | padding: 0 6px; 286 | } 287 | -------------------------------------------------------------------------------- /lessons/01-performance-organization/buttons/assets/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | 6 | 7 | 8 | Buttons 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 |

Default

25 | 26 | Default 27 | Success 28 | Warning 29 | Danger 30 | Boring 31 | 32 |
33 | 34 |
35 | 36 |
37 | 38 |

Large

39 | 40 | Default 41 | Success 42 | Warning 43 | Danger 44 | Boring 45 | 46 |
47 | 48 |
49 | 50 |

Small

51 | 52 | Default 53 | Success 54 | Warning 55 | Danger 56 | Boring 57 | 58 |
59 | 60 |
61 | 62 |

Mini

63 | 64 | Default 65 | Success 66 | Warning 67 | Danger 68 | Boring 69 | 70 |
71 | 72 |
73 | 74 | 75 |
76 | 77 |
78 | 79 |

Anchor Tags, Default

80 | 81 | Default 82 | Success 83 | Warning 84 | Danger 85 | Boring 86 | 87 |
88 | 89 |
90 | 91 |

Button Tags, Default

92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 |
100 | 101 |
102 | 103 |

Input Tags, Default

104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 |
112 | 113 |
114 | 115 |
116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /lessons/01-performance-organization/buttons/buttons.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/01-performance-organization/buttons/buttons.zip -------------------------------------------------------------------------------- /lessons/01-performance-organization/media-object/assets/css/media-object.css: -------------------------------------------------------------------------------- 1 | 2 | /* Media object 3 | ================================================== */ 4 | 5 | /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ 6 | 7 | /* HTML5 display definitions 8 | ================================================== */ 9 | 10 | article, 11 | aside, 12 | details, 13 | figcaption, 14 | figure, 15 | footer, 16 | header, 17 | hgroup, 18 | main, 19 | nav, 20 | section, 21 | summary { 22 | display: block; 23 | } 24 | 25 | /* Base 26 | ================================================== */ 27 | 28 | html { 29 | color: #555; 30 | font: 14px/20px "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 31 | text-shadow: 0 1px 0 #fff; 32 | } 33 | body { 34 | background: #fafbfc; 35 | margin: 0; 36 | } 37 | 38 | /* Links 39 | ================================================== */ 40 | 41 | a:focus { 42 | outline: thin dotted; 43 | } 44 | a:active, 45 | a:hover { 46 | outline: 0; 47 | } 48 | 49 | /* Typography 50 | ================================================== */ 51 | 52 | h1, h2, h3, h4, h5, h6, p { 53 | margin: 0 0 20px 0; 54 | } 55 | 56 | /* Sizes */ 57 | 58 | h1, 59 | .h-headline { 60 | font-size: 36px; 61 | } 62 | h2, 63 | .h-subheadline { 64 | font-size: 24px; 65 | } 66 | h3, 67 | .h-byline { 68 | font-size: 21px; 69 | } 70 | h4, 71 | .h-standfirst { 72 | font-size: 18px; 73 | } 74 | h5, 75 | .h-related { 76 | font-size: 16px; 77 | } 78 | h6, 79 | .h-promo { 80 | font-size: 14px; 81 | } 82 | 83 | /* Colors */ 84 | 85 | h1, h2, h3, h4 { 86 | color: #404853; 87 | } 88 | h5, h6 { 89 | color: #333; 90 | } 91 | 92 | /* Offsets */ 93 | 94 | b, 95 | strong { 96 | font-weight: bold; 97 | } 98 | .text-subtle { 99 | color: #999; 100 | font-weight: normal; 101 | } 102 | 103 | /* Media 104 | ================================================== */ 105 | 106 | img { 107 | border: 0; 108 | } 109 | figure { 110 | margin: 0; 111 | } 112 | 113 | /* Simple grid 114 | ================================================== */ 115 | 116 | *, 117 | *:after, 118 | *:before { 119 | -webkit-box-sizing: border-box; 120 | -moz-box-sizing: border-box; 121 | box-sizing: border-box; 122 | } 123 | 124 | /* Box offset */ 125 | 126 | .box-offset { 127 | background: #fff; 128 | border: 1px solid #d4d4d4; 129 | -webkit-border-radius: 5px; 130 | -moz-border-radius: 5px; 131 | -ms-border-radius: 5px; 132 | -o-border-radius: 5px; 133 | border-radius: 5px; 134 | } 135 | 136 | /* Container */ 137 | 138 | .container { 139 | margin: 20px auto; 140 | max-width: 940px; 141 | } 142 | 143 | /* Columns */ 144 | 145 | .col-1-3, 146 | .col-2-3 { 147 | float: left; 148 | } 149 | .col-1-3 { 150 | width: 33.33%; 151 | } 152 | .col-2-3 { 153 | width: 66.66%; 154 | } 155 | 156 | /* Surgical classes */ 157 | 158 | .col-gutters { 159 | padding-left: 20px; 160 | padding-right: 20px; 161 | } 162 | .col-baselines { 163 | padding-bottom: 20px; 164 | padding-top: 20px; 165 | } 166 | 167 | /* Margins and paddings */ 168 | 169 | .margin-bottom { 170 | margin-bottom: 20px; 171 | } 172 | .margin-top { 173 | margin-top: 20px; 174 | } 175 | .pad-bottom { 176 | padding-bottom: 20px; 177 | } 178 | .pad-top { 179 | padding-top: 20px; 180 | } 181 | 182 | /* Media styles 183 | ================================================== */ 184 | 185 | /* Default styles */ 186 | 187 | ul { 188 | list-style: none; 189 | margin: 0; 190 | padding: 0; 191 | } 192 | img { 193 | -webkit-border-radius: 5px; 194 | -moz-border-radius: 5px; 195 | -ms-border-radius: 5px; 196 | -o-border-radius: 5px; 197 | border-radius: 5px; 198 | } 199 | 200 | /* Object 201 | ================================================== */ 202 | 203 | .media, 204 | .media-body { 205 | overflow: hidden; 206 | } 207 | .media-primary .media-object, 208 | .media-secondary .media-object-alt { 209 | float: right; 210 | margin: 0 0 20px 20px; 211 | } 212 | .media-primary .media-object-alt, 213 | .media-secondary .media-object { 214 | float: left; 215 | margin: 0 20px 20px 0; 216 | } 217 | .media-object img, 218 | .media-object-alt img { 219 | display: block; 220 | } 221 | .media-count { 222 | color: #999; 223 | float: right; 224 | font-size: 11px; 225 | line-height: 1; 226 | padding: 2px 5px 3px 5px; 227 | } 228 | 229 | /* Primary 230 | ================================================== */ 231 | 232 | .media-primary .media { 233 | border-top: 1px solid #d4d4d4; 234 | } 235 | 236 | /* Secondary 237 | ================================================== */ 238 | 239 | .media-secondary .media-object img, 240 | .media-secondary .media-object-alt img { 241 | width: 40px; 242 | } 243 | -------------------------------------------------------------------------------- /lessons/01-performance-organization/media-object/assets/img/carolyn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/01-performance-organization/media-object/assets/img/carolyn.jpg -------------------------------------------------------------------------------- /lessons/01-performance-organization/media-object/assets/img/darby.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/01-performance-organization/media-object/assets/img/darby.jpg -------------------------------------------------------------------------------- /lessons/01-performance-organization/media-object/assets/img/erica.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/01-performance-organization/media-object/assets/img/erica.jpg -------------------------------------------------------------------------------- /lessons/01-performance-organization/media-object/assets/img/jason.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/01-performance-organization/media-object/assets/img/jason.jpg -------------------------------------------------------------------------------- /lessons/01-performance-organization/media-object/assets/img/shay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/01-performance-organization/media-object/assets/img/shay.jpg -------------------------------------------------------------------------------- /lessons/01-performance-organization/media-object/assets/img/tracy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/01-performance-organization/media-object/assets/img/tracy.jpg -------------------------------------------------------------------------------- /lessons/01-performance-organization/media-object/assets/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | 6 | 7 | 8 | Media Object 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 |

Recent Posts

25 | 26 |
    27 | 28 |
  • 29 | 30 | Shay 31 | 32 |
    33 | 2 34 |
    Shay posted 22 hours ago
    35 |

    Overly specific selectors break the cascade. The true key, and beauty, to CSS is keeping the specificity as low as possible.

    36 |
    37 |
    • 38 | 39 |
  • 40 | 41 | Carolyn 42 | 43 |
    44 |
    Carolyn posted 1 day ago
    45 |

    Trying to figure out accommodations for SXSW Interactive. Anyone have an extra spot where they’re staying? Or looking for a space?

    46 |
    47 |
    • 48 | 49 |
  • 50 | 51 | Jason 52 | 53 |
    54 | 13 55 |
    Jason posted 2 days ago
    56 |

    Gotta address the anxiety forces. A stipend doesn’t address the root of the anxiety. The anxiety is coming from uncertainty, chores, “starting over”, etc.

    57 |
    58 | 59 | Darby 60 | 61 |
    62 |
    Darby posted 1 day ago
    63 |

    An out-of-country student worries about getting a phone to use, figuring out the public transit, getting from the airport to Chicago and finding a place to live.

    64 |
    65 |
    66 |
    67 |
    • 68 | 69 |
  • 70 | 71 | Erica 72 | 73 |
    74 |
    Erica posted 2 days ago
    75 |

    Shout out to Carolyn for her work on The Women Driving Chicago’s Digital Renaissance!

    76 |
    77 |
    • 78 | 79 |
  • 80 | 81 | Tracy 82 | 83 |
    84 | 8 85 |
    Tracy posted 4 days ago
    86 |

    Your first impulse should be to play, we learn faster through play.

    87 |
    88 |
    • 89 | 90 |
91 | 92 |
93 | 94 |
95 | 96 |

Related Posts

97 | 98 |
    99 | 100 |
  • 101 | 102 | Carolyn 103 | 104 |
    105 |
    Carolyn posted 1 day ago
    106 |

    Sign up via Facebook is cool and all, but now it seems like every site wants you to do that before you can tell if it has enough value.

    107 |
    108 |
    • 109 | 110 |
  • 111 | 112 | Jason 113 | 114 |
    115 |
    Jason posted 2 days ago
    116 |

    There’s no reason to oversell here with large promises and fancy words. Overselling is a sign of insecurity, speak confidently.

    117 |
    118 |
    • 119 | 120 |
  • 121 | 122 | Erica 123 | 124 |
    125 |
    Erica posted 2 days ago
    126 |

    Your ability to be creative isn’t defined by your job title. Go build stuff!

    127 |
    128 |
    • 129 | 130 |
  • 131 | 132 | Tracy 133 | 134 |
    135 |
    Tracy posted 4 days ago
    136 |

    Reading “HTML & CSS” by Jon Duckett, which is new gold standard for books to teach complete beginners.

    137 |
    138 |
    • 139 | 140 |
141 | 142 |
143 | 144 | 145 |
146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /lessons/01-performance-organization/media-object/media-object.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/01-performance-organization/media-object/media-object.zip -------------------------------------------------------------------------------- /lessons/01-performance-organization/navigation/assets/css/navigation.css: -------------------------------------------------------------------------------- 1 | 2 | /* Navigation 3 | ================================================== */ 4 | 5 | /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ 6 | 7 | /* HTML5 display definitions 8 | ================================================== */ 9 | 10 | article, 11 | aside, 12 | details, 13 | figcaption, 14 | figure, 15 | footer, 16 | header, 17 | hgroup, 18 | main, 19 | nav, 20 | section, 21 | summary { 22 | display: block; 23 | } 24 | 25 | /* Base 26 | ================================================== */ 27 | 28 | html { 29 | color: #555; 30 | font: 14px/20px "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 31 | text-shadow: 0 1px 0 #fff; 32 | } 33 | body { 34 | background: #fafbfc; 35 | margin: 0; 36 | } 37 | 38 | /* Links 39 | ================================================== */ 40 | 41 | a:focus { 42 | outline: thin dotted; 43 | } 44 | a:active, 45 | a:hover { 46 | outline: 0; 47 | } 48 | 49 | /* Typography 50 | ================================================== */ 51 | 52 | h1, h2, h3, h4, h5, h6, p { 53 | margin: 0 0 20px 0; 54 | } 55 | 56 | /* Sizes */ 57 | 58 | h1, 59 | .h-headline { 60 | font-size: 36px; 61 | } 62 | h2, 63 | .h-subheadline { 64 | font-size: 24px; 65 | } 66 | h3, 67 | .h-byline { 68 | font-size: 21px; 69 | } 70 | h4, 71 | .h-standfirst { 72 | font-size: 18px; 73 | } 74 | h5, 75 | .h-related { 76 | font-size: 16px; 77 | } 78 | h6, 79 | .h-promo { 80 | font-size: 14px; 81 | } 82 | 83 | /* Colors */ 84 | 85 | h1, h2, h3, h4 { 86 | color: #404853; 87 | } 88 | h5, h6 { 89 | color: #333; 90 | } 91 | 92 | /* Offsets */ 93 | 94 | b, 95 | strong { 96 | font-weight: bold; 97 | } 98 | .text-subtle { 99 | color: #999; 100 | font-weight: normal; 101 | } 102 | 103 | /* Media 104 | ================================================== */ 105 | 106 | img { 107 | border: 0; 108 | } 109 | figure { 110 | margin: 0; 111 | } 112 | 113 | /* Simple grid 114 | ================================================== */ 115 | 116 | *, 117 | *:after, 118 | *:before { 119 | -webkit-box-sizing: border-box; 120 | -moz-box-sizing: border-box; 121 | box-sizing: border-box; 122 | } 123 | 124 | /* Box offset */ 125 | 126 | .box-offset { 127 | background: #fff; 128 | border: 1px solid #d4d4d4; 129 | -webkit-border-radius: 5px; 130 | -moz-border-radius: 5px; 131 | -ms-border-radius: 5px; 132 | -o-border-radius: 5px; 133 | border-radius: 5px; 134 | } 135 | 136 | /* Container */ 137 | 138 | .container { 139 | margin: 20px auto; 140 | max-width: 940px; 141 | } 142 | 143 | /* Columns */ 144 | 145 | .col-1-3, 146 | .col-2-3 { 147 | float: left; 148 | } 149 | .col-1-3 { 150 | width: 33.33%; 151 | } 152 | .col-2-3 { 153 | width: 66.66%; 154 | } 155 | 156 | /* Surgical classes */ 157 | 158 | .col-gutters { 159 | padding-left: 20px; 160 | padding-right: 20px; 161 | } 162 | .col-baselines { 163 | padding-bottom: 20px; 164 | padding-top: 20px; 165 | } 166 | 167 | /* Margins and paddings */ 168 | 169 | .margin-bottom { 170 | margin-bottom: 20px; 171 | } 172 | .margin-top { 173 | margin-top: 20px; 174 | } 175 | .pad-bottom { 176 | padding-bottom: 20px; 177 | } 178 | .pad-top { 179 | padding-top: 20px; 180 | } 181 | 182 | /* Clearfix 183 | ================================================== */ 184 | 185 | .nav-tabs:before, 186 | .nav-tabs:after, 187 | .nav-pills:before, 188 | .nav-pills:after { 189 | content: ""; 190 | display: table; 191 | } 192 | .nav-tabs:after, 193 | .nav-pills:after { 194 | clear: both; 195 | } 196 | 197 | /* Default navs 198 | ================================================== */ 199 | 200 | .nav { 201 | list-style: none; 202 | margin: 0; 203 | padding: 0; 204 | } 205 | .nav li { 206 | float: left; 207 | } 208 | .nav a { 209 | color: #8ec63f; 210 | display: block; 211 | margin-right: 2px; 212 | padding: 8px 12px; 213 | text-decoration: none; 214 | } 215 | .nav a:hover, 216 | .nav a:focus { 217 | background-color: #eee; 218 | } 219 | .nav .active a { 220 | cursor: default; 221 | text-shadow: none; 222 | } 223 | 224 | /* Tabs 225 | ================================================== */ 226 | 227 | .nav-tabs { 228 | border-bottom: 1px solid #ddd; 229 | } 230 | .nav-tabs li { 231 | margin-bottom: -1px; 232 | } 233 | .nav-tabs a { 234 | -webkit-border-radius: 5px 5px 0 0; 235 | -moz-border-radius: 5px 5px 0 0; 236 | -ms-border-radius: 5px 5px 0 0; 237 | -o-border-radius: 5px 5px 0 0; 238 | border-radius: 5px 5px 0 0; 239 | border: 1px solid transparent; 240 | } 241 | .nav-tabs a:hover, 242 | .nav-tabs a:focus { 243 | border-bottom-color: #ddd; 244 | } 245 | .nav-tabs .active a { 246 | background-color: #fff; 247 | border: 1px solid #ddd; 248 | border-bottom-color: transparent; 249 | color: #555; 250 | } 251 | 252 | /* Pills 253 | ================================================== */ 254 | 255 | .nav-pills a { 256 | -webkit-border-radius: 5px; 257 | -moz-border-radius: 5px; 258 | -ms-border-radius: 5px; 259 | -o-border-radius: 5px; 260 | border-radius: 5px; 261 | } 262 | .nav-pills .active a { 263 | background-color: #404853; 264 | color: #fff; 265 | } 266 | 267 | /* Stacked 268 | ================================================== */ 269 | 270 | .nav-tabs-stacked li, 271 | .nav-pills-stacked li { 272 | float: none; 273 | } 274 | 275 | /* Tabs */ 276 | 277 | .nav-tabs-stacked { 278 | border: none; 279 | } 280 | .nav-tabs-stacked a { 281 | -webkit-border-radius: 0; 282 | -moz-border-radius: 0; 283 | -ms-border-radius: 0; 284 | -o-border-radius: 0; 285 | border-radius: 0; 286 | border: 1px solid #ddd; 287 | } 288 | .nav-tabs-stacked li:first-child > a { 289 | -moz-border-radius-topleft: 5px; 290 | -webkit-border-top-left-radius: 5px; 291 | border-top-left-radius: 5px; 292 | -moz-border-radius-topright: 5px; 293 | -webkit-border-top-right-radius: 5px; 294 | border-top-right-radius: 5px; 295 | } 296 | .nav-tabs-stacked li:last-child > a { 297 | -moz-border-radius-bottomleft: 5px; 298 | -webkit-border-bottom-left-radius: 5px; 299 | border-bottom-left-radius: 5px; 300 | -moz-border-radius-bottomright: 5px; 301 | -webkit-border-bottom-right-radius: 5px; 302 | border-bottom-right-radius: 5px; 303 | } 304 | 305 | /* Pills */ 306 | 307 | .nav-pills-stacked a { 308 | margin-bottom: 3px; 309 | } 310 | -------------------------------------------------------------------------------- /lessons/01-performance-organization/navigation/assets/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d 2 | 3 | 4 | 5 | 6 | 7 | 8 | Navigation 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 |

Tabs

25 | 26 | 31 | 32 |

Pills

33 | 34 | 39 | 40 |
41 | 42 |
43 | 44 |

Tabs, Stacked

45 | 46 | 51 | 52 |

Pills, Stacked

53 | 54 | 59 | 60 |
61 | 62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /lessons/01-performance-organization/navigation/navigation.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/01-performance-organization/navigation/navigation.zip -------------------------------------------------------------------------------- /lessons/03-complex-selectors/all.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/03-complex-selectors/all.zip -------------------------------------------------------------------------------- /lessons/03-complex-selectors/assets/css/base.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 | vertical-align: baseline; 23 | font: inherit; 24 | font-size: 100%; 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-spacing: 0; 47 | border-collapse: collapse; 48 | } 49 | 50 | strong { 51 | font-weight: bold; 52 | } 53 | 54 | em { 55 | font-style: italic; 56 | } 57 | 58 | strong em, em strong { 59 | font-weight: bold; 60 | font-style: italic; 61 | } 62 | 63 | .group:before, 64 | .group:after { 65 | display: table; 66 | content: ""; 67 | } 68 | .group:after { 69 | clear: both; 70 | } 71 | .group { 72 | zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 73 | } 74 | 75 | /* Base */ 76 | 77 | body { 78 | background: #f5f5f5; 79 | color: #4a4a4a; 80 | font-size: 62.5%; /* Resets 1em to 10px */ 81 | font-family: 'Noticia Text', Georgia, sans-serif; 82 | line-height: 1.4; 83 | -webkit-font-smoothing: antialiased; 84 | -moz-font-smoothing: antialiased; 85 | -ms-font-smoothing: antialiased; 86 | -o-font-smoothing: antialiased; 87 | font-smoothing: antialiased; 88 | } 89 | 90 | .wrap { 91 | margin: 0 auto; 92 | padding: 2.5em; 93 | max-width: 1000px; 94 | width: 95%; 95 | background: #fff; 96 | } 97 | 98 | img { 99 | padding: 3px; 100 | border: 1px solid #eee; 101 | } 102 | 103 | section, article { 104 | margin: 1em 0; 105 | } 106 | 107 | nav { 108 | margin: -2.5em -2.5em 2.5em; 109 | background: #4a4a4a; 110 | text-align: center; 111 | } 112 | 113 | nav a, 114 | nav a:visited { 115 | display: inline-block; 116 | padding: 1em; 117 | color: #fff; 118 | font-size: 1.4em; 119 | } 120 | 121 | nav a:hover { 122 | color: #5dabf4; 123 | } 124 | 125 | nav a:active { 126 | color: #ccc; 127 | } 128 | 129 | .main { 130 | float: left; 131 | width: 70%; 132 | } 133 | 134 | .sidebar { 135 | float: right; 136 | padding-left: 5%; 137 | width: 25%; 138 | } 139 | 140 | /* Typography */ 141 | 142 | h1, h2 { 143 | margin-bottom: 0.5em; 144 | font-weight: 700; 145 | font-family: 'Oswald', 'Helvetica Neue', Helmet, Freesans, sans-serif; 146 | } 147 | 148 | h1 { 149 | text-transform: uppercase; 150 | font-size: 2.4em; 151 | } 152 | 153 | h2 { 154 | font-size: 2.0em; 155 | } 156 | 157 | h3, 158 | h4 { 159 | margin: 2em 0 0.5em; 160 | color: #999; 161 | text-transform: uppercase; 162 | font-weight: 700; 163 | font-size: 1.5em; 164 | font-family: 'Helvetica Neue', Helmet, Freesans, sans-serif; 165 | } 166 | 167 | h4 { 168 | color: #4a4a4a; 169 | } 170 | 171 | ol { 172 | margin: 0 0 0 2em; 173 | list-style-type: decimal; 174 | } 175 | 176 | p, li { 177 | margin-bottom: 0.5em; 178 | font-size: 1.4em; 179 | } 180 | 181 | sup { 182 | position: relative; 183 | top: -5px; 184 | font-size: 0.5em; 185 | line-height: 1; 186 | } 187 | 188 | blockquote { 189 | margin: 1em 0; 190 | padding: 1em; 191 | background: #eee; 192 | text-align: center; 193 | font-style: italic; 194 | font-size: 2em; 195 | } 196 | 197 | a, 198 | a:visited { 199 | color: #1c7ed9; 200 | text-decoration: none; 201 | } 202 | 203 | a:hover { 204 | color: #5dabf4; 205 | } 206 | 207 | a:active { 208 | color: #0c5396; 209 | } 210 | 211 | /* Utilities */ 212 | 213 | .right { 214 | float: right; 215 | margin: 0 0 1em 1em; 216 | } 217 | 218 | .left { 219 | float: left; 220 | margin: 0 1em 1em 0; 221 | } 222 | 223 | .right, left { 224 | display: inline; 225 | } 226 | 227 | /* Forms */ 228 | 229 | label { 230 | display: block; 231 | margin: 1em 0 0.3em; 232 | color: #999; 233 | text-transform: uppercase; 234 | font-weight: bold; 235 | font-size: 1.2em; 236 | font-family: 'Helvetica Neue', Helmet, Freesans, sans-serif; 237 | } 238 | 239 | input { 240 | padding: 5px 20px 5px 5px; 241 | max-width: 90%; 242 | width: 400px; 243 | border: 1px solid #ccc; 244 | -webkit-border-radius: 5px; 245 | -moz-border-radius: 5px; 246 | border-radius: 5px; 247 | -webkit-box-shadow: inset 0 2px 2px #eee; 248 | -moz-box-shadow: inset 0 2px 2px #eee; 249 | box-shadow: inset 0 2px 2px #eee; 250 | font-size: 1.4em; 251 | font-family: 'Helvetica Neue', Helmet, Freesans, sans-serif; 252 | } 253 | 254 | input[type='submit'] { 255 | margin-top: 1em; 256 | padding: 5px 25px; 257 | width: auto; 258 | border: none; 259 | -webkit-border-radius: 1em; 260 | -moz-border-radius: 1em; 261 | border-radius: 1em; 262 | background: #1c7ed9; 263 | -webkit-box-shadow: none; 264 | -moz-box-shadow: none; 265 | box-shadow: none; 266 | color: #fff; 267 | text-transform: uppercase; 268 | font-weight: 700; 269 | cursor: pointer; 270 | } 271 | 272 | input[type='submit']:hover, 273 | input[type='submit']:focus { 274 | background: #5dabf4; 275 | } 276 | 277 | input[type='submit']:active { 278 | position: relative; 279 | top: 1px; 280 | background: #0c5396; 281 | } 282 | -------------------------------------------------------------------------------- /lessons/03-complex-selectors/assets/js/modernizr.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-shiv-cssclasses-teststyles-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function v(a){j.cssText=a}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e});for(var A in m)u(m,A)&&(r=A.toLowerCase(),e[r]=m[A](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)u(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},v(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e.testStyles=s,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Attribute Selectors - The Starter League Advanced HTML & CSS Course 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 30 | 31 |

History

32 | 33 |
34 |

Everything You Wanted to Know About Saved By The Bell But Were Too Afraid To Ask

35 |

Saved by the Bell, the original series, debuted on NBC on August 20, 1989 in primetime. Saved by the Bell aired twice in primetime (once on August 20, and once later) before settling into its Saturday morning timeslot starting on September 9, 1989. Saved by the Bell played out most of its existence within the reworked plot definitions mentioned above in NBC’s Saturday morning line-up. For Grades 9 through 12 (1989–93), the show followed the adventures of Zack, Screech, Kelly, Slater, Jessie and Lisa in Bayside High, and in some other settings such as at the Mailbu Sands Beach Club, in Palm Springs and in Hawaii. For specifics on the episodes of Good Morning, Miss Bliss or Saved by the Bell, see the Episode Guides on this site.

36 |

SBTB-33 Also during the Grade 12 season of Saved by the Bell, the Saved by the Bell-Hawaiian Style TV movie was aired on November 27, 1992 in primetime on NBC. It was rerun again in primetime on August 31, 1993 on NBC in the run up to the primetime premiere of Saved By The Bell: The College Years. See Episode Guide for more on the Saved By The Bell: Hawaiian Style.

37 |

But something happened when Grade 12 rolled around. By this time, the show was very popular. But something needed to be done now that the show had reached the end of high school. The graduation episode had been filmed, and even a Saved By The Bell TV movie set in Hawaii had been filmed after that (though chronologically, it actually appears to be set in time after the Grade 11 season and before the Grade 12 season, and obviously it aired during the regular Grade 12 season). But the question was, what to do with the show now?

38 |

Another problem came when Tiffani-Amber Thiessen (Kelly Kapowski) and Elizabeth Berkley (Jessica Spano) decided that they wanted to move on and leave the show half-way through the Grade 12 season. This led to the introduction of a new character named Tori Scott. See the “Tori Era”.

39 |

Saved by the Bell (and its spinoffs) were sitcoms produced by NBC Productions, Inc. Saved by the Bell first began its run on the Disney Cable Channel as Good Morning Miss Bliss. After 13 episodes on Disney, the show changed its name to Saved by the Bell and moved to NBC as part of NBC’s Saturday morning T-NBC line up in the fall of 1989. “The Original Series” ended its last first-run season in 1993, and it is now syndicated on local stations and the cable stations TBS and WGN.

40 |

SBTB-CY-1 Saved by the Bell spun-off two shows. Saved By The Bell: The College Years (See SBTB: The College Years) and Saved By The Bell: The New Class (See SBTB:The New Class)

41 |

Saved by the Bell: The College Years, the primetime sequel to Saved by the Bell, which followed the continuing adventures of Zack Morris, Samuel “Screech” Powers, A.C. Slater, and Kelly Kapowski in college at California University. The College Years originally aired on NBC on Tuesday nights in the 1993-94 season, but was cancelled after one season and is now in syndication.

42 |

Saved by the Bell: The New Class, the Saturday morning spin-off of Saved by the Bell, also began its run in the fall of 1993. When “The New Class” was renewed for the 1995-96 season, with major cast changes (the third in 3 seasons!). Saved By The Bell: The New Class completed its seventh (and last) season in the 1999-2000 season.

43 |

NOTE: There were rumors that Engel and co. were working on a couple of different “new” versions of Saved by the Bell for the season after The New Class left the air (which would have been the ’00–’01 TV season). But it looks like they never got of the ground. So, for now, an original, new incarnation of Saved by the Bell doesn’t look to hit the airwaves any time soon. Stay tuned…

44 |

Saved by the Bell was a Peter Engel Production, and was Produced by either Marica Govons or Franco Bario. Its Exectuive in Charge of Production was William Phillips (for the first 3 seasons), or Gary Considine (from the Grade 11 season of Saved By The Bell throughout the end of the series). It was created by Sam Bobrick.

45 |
46 | 47 |

More Resources

48 | 58 | 59 |

Get News & Alerts

60 |
61 |
62 | 63 | 64 | 65 | 66 |
67 | 68 |
69 | 70 |
71 | 72 | -------------------------------------------------------------------------------- /lessons/03-complex-selectors/pseudo-classes/assets/css/pseudo.css: -------------------------------------------------------------------------------- 1 | /* Section Dividers */ 2 | 3 | section:before { 4 | display: block; 5 | margin: 3em 0; 6 | content: url(../img/divider.png); 7 | text-align: center; 8 | } 9 | 10 | section:first-of-type:before { 11 | display: none; 12 | content: ''; 13 | } 14 | 15 | /* Series Background */ 16 | 17 | .wikipedia p { 18 | margin-bottom: 0.25em; 19 | text-indent: 3em; 20 | } 21 | 22 | p:first-of-type { 23 | text-indent: 0; 24 | font-size: 1.8em; 25 | } 26 | 27 | p:first-of-type:first-letter { 28 | float: left; 29 | margin-right: 1px; 30 | font-size: 4em; 31 | line-height: 0.65em; 32 | } 33 | 34 | a.arrow { 35 | display: inline-block; 36 | margin: 1em 0; 37 | color: #fff; 38 | } 39 | 40 | .arrow, 41 | .arrow:visited { 42 | position: relative; 43 | padding: 0.5em 1.25em 0.5em 2.5em; 44 | background: #1c7ed9; 45 | } 46 | 47 | .arrow:hover { 48 | background: #5dabf4; 49 | } 50 | 51 | .arrow:active { 52 | background: #0c5396; 53 | } 54 | 55 | .arrow:before, 56 | .arrow:after { 57 | position: absolute; 58 | top: 0; 59 | padding: 0; 60 | width: 0; 61 | height: 0; 62 | border: 1.25em solid transparent; 63 | content: ''; 64 | } 65 | 66 | .arrow:before { 67 | left: 0; 68 | border-left: 1.25em solid #fff; 69 | } 70 | 71 | .arrow:after { 72 | right: -2.4em; 73 | border-left: 1.25em solid #1c7ed9; 74 | } 75 | 76 | .arrow:hover:after { 77 | border-left: 1.25em solid #5dabf4; 78 | } 79 | 80 | .arrow:active:after { 81 | right: -2.4em; 82 | border-left: 1.25em solid #0c5396; 83 | } 84 | 85 | /* Episode Guide */ 86 | 87 | table { 88 | width: 100%; 89 | } 90 | 91 | td,th { 92 | padding: 8px; 93 | vertical-align: middle; 94 | text-align: center; 95 | font-size: 1.4em; 96 | } 97 | 98 | th { 99 | background: #4a4a4a; 100 | color: #fff; 101 | font-weight: 700; 102 | } 103 | 104 | td.name { 105 | text-align: left; 106 | } 107 | 108 | th:first-child { 109 | -webkit-border-top-left-radius: 5px; 110 | border-top-left-radius: 5px; 111 | -moz-border-radius-topleft: 5px; 112 | } 113 | 114 | th:last-child { 115 | -webkit-border-top-right-radius: 5px; 116 | border-top-right-radius: 5px; 117 | -moz-border-radius-topright: 5px; 118 | } 119 | 120 | tbody tr:nth-child(even) { 121 | background: #eee; 122 | } 123 | 124 | /* Gallery */ 125 | 126 | .gallery img { 127 | padding: 0; 128 | max-width: 100%; 129 | border: 0; 130 | } 131 | 132 | .gallery li { 133 | float: left; 134 | margin: 0 0 2.5% 2.5%; 135 | width: 18%; 136 | } 137 | 138 | .gallery li:nth-child(5n+1) { 139 | clear: left; 140 | margin-left: 0; 141 | } 142 | 143 | /* Forms */ 144 | 145 | input[name*='name'] { 146 | background: transparent url(../img/sprite.png) no-repeat; 147 | background-position: 99% -123px; 148 | } 149 | 150 | input[type='email'] { 151 | background: transparent url(../img/sprite.png) no-repeat; 152 | background-position: 99% -99px; 153 | } 154 | 155 | input:focus { 156 | background-color: #ffc; 157 | } -------------------------------------------------------------------------------- /lessons/03-complex-selectors/pseudo-classes/assets/img/SBTB-33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/03-complex-selectors/pseudo-classes/assets/img/SBTB-33.jpg -------------------------------------------------------------------------------- /lessons/03-complex-selectors/pseudo-classes/assets/img/SBTB-CY-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/03-complex-selectors/pseudo-classes/assets/img/SBTB-CY-1.jpg -------------------------------------------------------------------------------- /lessons/03-complex-selectors/pseudo-classes/assets/img/divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/03-complex-selectors/pseudo-classes/assets/img/divider.png -------------------------------------------------------------------------------- /lessons/03-complex-selectors/pseudo-classes/assets/img/reward-lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/03-complex-selectors/pseudo-classes/assets/img/reward-lock.png -------------------------------------------------------------------------------- /lessons/03-complex-selectors/pseudo-classes/assets/img/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/03-complex-selectors/pseudo-classes/assets/img/sprite.png -------------------------------------------------------------------------------- /lessons/03-complex-selectors/pseudo-classes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Pseudo Elements and Selectors - The Starter League Advanced HTML & CSS Course 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 30 | 31 |
32 |
33 |

Series Background

34 |

Saved by the Bell is an American television sitcom that aired from 1989 to 1993. The series first season aired on The Disney Channel as Good Morning, Miss Bliss, and was renamed Saved by the Bell when it began airing on NBC for its second season. The title "Saved by the Bell" is an idiom for when a student, unprepared to answer a question, is "saved" at the end of class by the school bell ringing.

35 |

The show follows the exploits of a group of friends and their principal, and although the series primarily showcases light-hearted comedic situations, it occasionally touches on serious social issues, such as drug use, driving under the influence, homelessness, divorce, death, and environmental issues. This made Saved by the Bell a precursor to more recent shows (such as Beverly Hills, 90210, Dawson's Creek, and The O.C.) that introduce young audiences to critical moral dilemmas.

36 |

Saved by the Bell stars Mark-Paul Gosselaar, Dustin Diamond, Lark Voorhies, Dennis Haskins, Tiffani-Amber Thiessen, Elizabeth Berkley, and Mario Lopez.[1]

37 |

Saved by the Bell was named one of the "20 Best School Shows of All Time" by AOL TV (no ranking).[2] The show's popularity spawned two spin-off series to follow: Saved by the Bell: The College Years (1993–1994), a primetime series that follows several of the original characters to college, and Saved by the Bell: The New Class (1993–2000), a Saturday morning series that follows a new group of students at Bayside High School.[3] The series also spawned two TV movies and a short-lived comic book series. Saved by the Bell also aired in Australia on Channel Seven, and from 1990 until 2004 on Nickelodeon. Today, reruns air in local syndication and on MTV2.

38 | Read The Full Article 39 |
40 |
41 | 42 |
43 |

Broadcast History

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 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 |
Season# of Eps.Series NameNetworkBroadcast Dates
114Good Morning, Miss BlissDisneyJuly 11, 1987 – March 18, 1989
216Saved By The BellNBCAugust 20, 1989 – December 16, 1989
318Saved By The BellNBCSeptember 8, 1990 – December 23, 1990
426Saved By The BellNBCSeptember 14, 1991 – December 21, 1991
54Saved By The Bell: Hawaiian StyleNBCNovember 27, 1992
626Saved By The BellNBCSeptember 12, 1992 – May 22, 1993
719Saved By The Bell: The College YearsNBCMay 22, 1993 – February 8, 1994
84Saved By The Bell: Wedding in Las VegasNBCOctober 7, 1994
913Saved By The Bell: The New ClassNBCSeptember 11, 1993 – December 4, 1993
1026Saved By The Bell: The New ClassNBCSeptember 10, 1994 – December 31, 1994
1126Saved By The Bell: The New ClassNBCSeptember 9, 1995 – December 9, 1995
1226Saved By The Bell: The New ClassNBCSeptember 7, 1996 – December 14, 1996
1326Saved By The Bell: The New ClassNBCSeptember 13, 1997 – December 6, 1997
1413Saved By The Bell: The New ClassNBCSeptember 12, 1998 – December 5, 1998
1513Saved By The Bell: The New ClassNBCSeptember 11, 1999 – January 8, 2000
162 | 163 |
164 | 165 |
166 |

I Bet You Jessie Spano Loved Cats

167 |
    168 |
    • 169 |
    • 170 |
    • 171 |
    • 172 |
    • 173 |
    • 174 |
    • 175 |
    • 176 |
    • 177 |
    • 178 |
    • 179 |
    • 180 |
    • 181 |
    • 182 |
183 |
184 | 185 | 197 |
198 | 199 | -------------------------------------------------------------------------------- /lessons/03-complex-selectors/relationships/assets/css/relationships.css: -------------------------------------------------------------------------------- 1 | /* Sibling and Child Selectors */ 2 | 3 | h2 + h3 { 4 | margin-top: 0; 5 | } 6 | 7 | blockquote > p { 8 | margin: 0.25em 0; 9 | font-size: 1em; 10 | } 11 | 12 | header + p { 13 | margin-bottom: 1em; 14 | font-size: 1.7em; 15 | } 16 | 17 | /* Other Page Styles */ 18 | 19 | article { 20 | margin: 0; 21 | padding: 2em 0; 22 | border-top: 1px solid #eee; 23 | } 24 | 25 | aside section { 26 | margin-bottom: 3em; 27 | border-top: 1px solid #eee; 28 | } 29 | 30 | aside section:first-child { 31 | border-top: 0; 32 | } 33 | 34 | .social li { 35 | display: inline-block; 36 | margin-right: 0.25em; 37 | } 38 | 39 | .social li a { 40 | display: block; 41 | overflow: hidden; 42 | width: 16px; 43 | height: 16px; 44 | background: transparent url(../img/sprite.png) no-repeat; 45 | text-indent: -9999px; 46 | } 47 | 48 | .social a[href*='twitter'] { 49 | background-position: left -20px; 50 | } 51 | 52 | .social a[href*='facebook'] { 53 | background-position: left -40px; 54 | } 55 | 56 | .social a[href*='youtube'] { 57 | background-position: left -60px; 58 | } -------------------------------------------------------------------------------- /lessons/03-complex-selectors/relationships/assets/img/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/03-complex-selectors/relationships/assets/img/sprite.png -------------------------------------------------------------------------------- /lessons/03-complex-selectors/relationships/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Relationship Selectors - The Starter League Advanced HTML & CSS Course 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 29 | 30 |

Saved By The Blog

31 | 32 |
33 |
34 |
35 |

That One Time Saved By The Bell Left Me Speechless

36 |

By Mike Gibson

37 |
38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus, ante a semper rutrum, nulla lacus aliquet sem, id lacinia purus augue eu massa. Integer imperdiet urna a nibh sagittis posuere. Nam scelerisque enim non ante tempus quis scelerisque nulla elementum. Fusce molestie scelerisque lectus in sagittis. Suspendisse rhoncus nisl vel quam placerat vulputate. In quis velit at enim vulputate placerat. Etiam tortor mi, pretium eu volutpat non, ornare a risus. Sed hendrerit consequat eros, dapibus convallis orci laoreet vel. Vestibulum nec turpis non mauris congue cursus quis at sapien.

39 |

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas urna mi, adipiscing non mollis et, sagittis et risus. Suspendisse luctus purus non lacus suscipit non gravida nunc hendrerit. Nullam sed auctor turpis. Nam et tortor vitae sem convallis lobortis eget quis orci. Maecenas aliquam lobortis leo ut dictum. Quisque sollicitudin, velit sit amet adipiscing ullamcorper, turpis ante ullamcorper massa, sit amet laoreet justo diam nec sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc et lorem lacus, eu blandit mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin, metus a pellentesque tempus, nulla purus tempor odio, at viverra ligula augue at magna. Sed iaculis velit eget turpis ultricies bibendum. Nam sed turpis at diam sagittis ullamcorper. Praesent pretium augue quis nisl adipiscing in pellentesque turpis rutrum. Sed vulputate malesuada nunc quis scelerisque. Aenean ullamcorper nulla vitae purus tempor ut adipiscing magna tempor.

40 |

I Was, Like…

41 |

Proin feugiat vehicula dui, et porttitor lectus commodo et. Nunc vel risus dui, vel tempus urna. Vestibulum augue dui, fringilla eget volutpat id, tempus ac velit. Duis et justo eu ligula gravida venenatis ut at velit. Proin est tortor, vehicula eget ultrices sed, commodo in sem. Nullam eu velit eu orci dictum varius. Praesent viverra nulla ut metus interdum in sodales ipsum consectetur. Nulla id lacus sed turpis dapibus feugiat sit amet vitae dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam eu libero eros, non tempor augue. Donec congue est vitae dolor sollicitudin sed interdum diam scelerisque. Quisque pulvinar, sem sit amet rhoncus faucibus, risus mi ullamcorper dolor, nec scelerisque odio lectus in dui. Vivamus nec eros id massa dapibus pulvinar. Nunc non metus augue. Praesent nec arcu a tortor gravida condimentum.

42 |

As my televisions screen faded to commercial I slowly picked my jaw up off the floor.

43 |

Donec turpis arcu, tempus non consectetur ut, pulvinar ut urna. Phasellus sit amet sapien vitae nulla pellentesque malesuada. Vivamus eu nisl nulla. Cras tincidunt mi sit amet quam dapibus pretium. Sed et nisi est. In id dignissim turpis. Praesent et diam ante, et iaculis odio. Ut id turpis risus. Mauris gravida, sapien sed pellentesque volutpat, leo est accumsan ipsum, non feugiat libero neque et elit.

44 |

Vestibulum dapibus ultrices sem, vitae euismod dui vulputate ut. Vivamus gravida viverra velit vel ultrices. Suspendisse eget quam id felis tempus rutrum sed nec diam. Nullam a ipsum a massa pretium luctus eu at ligula. In quis lectus neque. Fusce id pretium enim. Cras orci nunc, convallis eu dapibus quis, eleifend eu lorem. Proin sed velit elit. Nulla eget nulla eget arcu tincidunt aliquet at sit amet erat. Integer id sapien justo. Quisque id augue arcu, eget euismod massa. Nulla ac metus non enim venenatis fermentum non in purus. Morbi at nulla arcu, vel blandit nisl. Cras cursus neque sit amet lorem interdum pellentesque. Ut at quam orci.

45 |

When The Bell Rang

46 |

Phasellus tortor dolor, gravida ac tincidunt ac, ultricies ut lectus. Nam eu leo orci, sit amet malesuada sapien. Etiam venenatis, lectus a euismod mattis, ipsum ante condimentum tortor, non semper massa mi eu arcu. Aliquam suscipit nunc sed urna fringilla eu consequat eros iaculis. Nam egestas neque ut mauris feugiat consectetur. Maecenas interdum, lacus eu venenatis molestie, mi elit elementum massa, a consequat eros nisi vitae eros. Mauris eget sagittis nibh. Integer interdum, sem a tristique rutrum, justo nunc auctor risus, non pellentesque nisi nisi sit amet est.

47 |

Sed a felis vel nisl tristique feugiat id vitae massa. Sed dapibus congue elit adipiscing adipiscing. Nunc porttitor, diam quis accumsan eleifend, purus eros vehicula mauris, eget pellentesque velit lorem vitae justo. Suspendisse eu eros sit amet dolor sodales rhoncus. Pellentesque arcu quam, mollis id volutpat a, eleifend quis tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Fusce adipiscing ultrices pulvinar. Fusce tellus urna, posuere at vehicula eu, pulvinar non enim. Nunc eu tellus justo, eu convallis erat. Curabitur mi nunc, adipiscing id sodales vel, ullamcorper sit amet nibh. Cras hendrerit augue quis magna fermentum quis adipiscing purus euismod.

48 |
49 |
50 | 51 | 77 | 78 |
79 | 80 | -------------------------------------------------------------------------------- /lessons/03-complex-selectors/targets/assets/css/targets.css: -------------------------------------------------------------------------------- 1 | #questions { 2 | margin-bottom: 6em; 3 | max-width: 700px; 4 | } 5 | 6 | article { 7 | margin: 0; 8 | padding: 2em 1em; 9 | border-top: 1px solid #eee; 10 | } 11 | 12 | article:target { 13 | background: #eee; 14 | } -------------------------------------------------------------------------------- /lessons/03-complex-selectors/targets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Target Selectors - The Starter League Advanced HTML & CSS Course 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 29 | 30 |

Frequently Asked Questions

31 |
    32 |
  1. 33 | Why did the Saved By The Bell gang live in Indiana in junior high, and then turn up in the same school with only a different name and a few different characters in California? 34 |
    2. 35 |
  2. 36 | Where can I find lyrics to the songs that Zack Attack (The Gang’s band) sang on the show? Is there anywhere to find sound files for them? 37 |
    3. 38 |
  3. 39 | Did the Saved By The Bell cast really sing those songs on the show and soundtrack? If not, who did sing them? 40 |
    4. 41 |
  4. 42 | While we’re on the subject of Saved By The Bell music, what is that song they play at Zack and Kelly’s wedding? Do you know the title or who sings it? 43 |
    5. 44 |
45 | 46 |
47 |

Why did the Saved By The Bell gang live in Indiana in junior high, and then turn up in the same school with only a different name and a few different characters in California?

48 |

There isn’t a solid explanation for that except that Saved By The Bell went through a lot of changes between junior high and middle school, including its move from Disney to NBC.

49 | Back To The Questions ↑ 50 |
51 | 52 | 57 | 58 |
59 |

Did the Saved By The Bell cast really sing those songs on the show and soundtrack? If not, who did sing them?

60 |

The Saved By The Bell cast did not sing those songs themselves, they were lip synching to audio recordings. I not quite sure who actually performed the songs in the show, nor do I know anyone who does. The actual singers are not credited on the show's credits or soundtrack.

61 | Back To The Questions ↑ 62 |
63 | 64 |
65 |

While we’re on the subject of Saved By The Bell music, what is that song they play at Zack and Kelly’s wedding? Do you know the title or who sings it?

66 |

That is one of Saved By The Bells biggest mysteries, and by far the most frequently asked question. Unfortunately, I don't know the title of the song, nor do I have any clue who performed this song either. Like the other Saved By The Bell songs, it is not listed in the credits. I have searched and asked around and nobody, and I do mean nobody seems to know the answer to this question. And if somebody does, there not talking.

67 | Back To The Questions ↑ 68 |
69 | 70 |
71 | 72 | -------------------------------------------------------------------------------- /lessons/04-responsive-design/all.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/04-responsive-design/all.zip -------------------------------------------------------------------------------- /lessons/04-responsive-design/assets/css/fluid-or-responsive.css: -------------------------------------------------------------------------------- 1 | /* Base Styles */ 2 | 3 | body { 4 | background: #eee; 5 | color: #444; 6 | font-size: 62.5%; 7 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 8 | line-height: 1.2; 9 | } 10 | 11 | .container { 12 | margin: 50px auto; 13 | max-width: 1000px; 14 | width: 90%; 15 | background: #fff; 16 | } 17 | 18 | .question { 19 | position: relative; 20 | padding: 20px; 21 | } 22 | 23 | h1 { 24 | margin: 0 0 0.75em; 25 | text-align: center; 26 | font-weight: bold; 27 | font-size: 3.2em; 28 | } 29 | 30 | p { 31 | margin-bottom: 0.5em; 32 | font-size: 1.8em; 33 | font-family: 'Hoefler Text', Cambria, Georgia, 'Times New Roman', serif; 34 | line-height: 1.5; 35 | } 36 | 37 | .kitties { 38 | margin-bottom: 1em; 39 | } 40 | 41 | .kitties:after { 42 | display: table; 43 | clear: both; 44 | content: ""; 45 | } 46 | 47 | .kitties li { 48 | display: inline; 49 | float: left; 50 | } 51 | 52 | /* Second Question Styles */ 53 | 54 | #second { 55 | margin: 0 auto; 56 | width: 300px; 57 | } 58 | 59 | .look.kitties li { 60 | margin: 1.25%; 61 | width: 47.5%; 62 | } 63 | 64 | /* Third Question Styles */ 65 | 66 | .more.kitties li { 67 | margin: 1.5%; 68 | width: 30.333333333333%; 69 | } 70 | 71 | /* Answers */ 72 | 73 | #first:after { 74 | content: 'Fluid'; 75 | } 76 | 77 | #second:after { 78 | content: 'Responsive'; 79 | } 80 | 81 | #third:after { 82 | content: 'What is Fluid and Responsive?'; 83 | } 84 | 85 | #first:after, 86 | #second:after, 87 | #third:after { 88 | position: absolute; 89 | top: 0; 90 | right: 0; 91 | bottom: 0; 92 | left: 0; 93 | display: none; 94 | padding-top: 50px; 95 | background: rgba(0,0,0,0.75); 96 | color: #fff; 97 | text-align: center; 98 | text-transform: uppercase; 99 | font-weight: bold; 100 | font-size: 4em; 101 | } 102 | 103 | #first:hover:after, 104 | #second:hover:after, 105 | #third:hover:after { 106 | display: block; 107 | } 108 | 109 | /* Media Queries */ 110 | 111 | @media (min-width: 600px) { 112 | #second { 113 | width: 450px; 114 | } 115 | .look.kitties li { 116 | margin: 1.5%; 117 | width: 30.333333333333%; 118 | } 119 | .more.kitties li { 120 | margin: .75%; 121 | width: 18.5%; 122 | } 123 | } 124 | 125 | @media (min-width: 900px) { 126 | #second { 127 | width: 780px; 128 | } 129 | .look.kitties li { 130 | margin: 1.25%; 131 | width: 22.5%; 132 | } 133 | #first:after, 134 | #second:after, 135 | #third:after { 136 | font-size: 6em; 137 | } 138 | } 139 | 140 | @media (max-width: 750px) { 141 | #third { 142 | font-size: 0.75em; 143 | } 144 | } -------------------------------------------------------------------------------- /lessons/04-responsive-design/assets/css/loosen-up.css: -------------------------------------------------------------------------------- 1 | /* Base Styles */ 2 | 3 | body { 4 | background: #eee; 5 | color: #444; 6 | font-size: 62.5%; 7 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 8 | line-height: 1.2; 9 | } 10 | 11 | .container { 12 | margin: 50px auto; 13 | width: 1000px; 14 | background: #fff; 15 | } 16 | 17 | section { 18 | position: relative; 19 | padding: 20px; 20 | } 21 | 22 | h1 { 23 | margin: 0 0 0.75em; 24 | text-align: center; 25 | font-weight: bold; 26 | font-size: 3.2em; 27 | } 28 | 29 | p { 30 | margin-bottom: 0.5em; 31 | font-size: 1.8em; 32 | font-family: 'Hoefler Text', Cambria, Georgia, 'Times New Roman', serif; 33 | line-height: 1.5; 34 | } 35 | 36 | .kitties { 37 | margin-bottom: 1em; 38 | } 39 | 40 | .kitties:after { 41 | display: table; 42 | clear: both; 43 | content: ""; 44 | } 45 | 46 | .kitties li { 47 | display: inline; 48 | float: left; 49 | margin: 10px; 50 | width: 220px; 51 | } -------------------------------------------------------------------------------- /lessons/04-responsive-design/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css 2011-08-12T17:28 UTC á http://github.com/necolas/normalize.css */ 2 | 3 | 4 | /* Tweaked combination of html5doctor.com Reset Stylesheet v1.6.1, MeyerWeb v2.0b1 Reset, Yahoo YUI Reset & Sonspring Formalize Form Reset, Normalize CSS 5 | Last Updated: 2010-09-17 6 | Authors: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark 7 | Eric Meyer - http://meyerweb.com/ Twitter: @meyerweb 8 | Nathan Smith - http://sonspring.com/ Twitter: @nathansmith 9 | Mike Gibson - http://lovehasnologic.com/ Twitter: @lovehasnologic 10 | Nicolas Gallagher and Jonathan Neal - http://nicolasgallagher.com/ & http://twitter.com/jon_neal */ 11 | 12 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; } 13 | audio:not([controls]) { display: none; } 14 | [hidden] { display: none; } 15 | 16 | body { line-height: 1; } 17 | h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } 18 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 19 | ul { list-style: none; } 20 | nav ul, nav ol { list-style: none; list-style-image: none; } 21 | blockquote, q { quotes: none; } 22 | blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 23 | address,caption,cite,code,dfn,th,var { font-style: normal; font-weight: normal; } 24 | a { font-size: 100%; vertical-align: baseline; background: transparent; } 25 | a:hover, a:active {outline: none;} 26 | img, object, embed {max-width: 100%; height: auto !important; border: 0;} 27 | svg:not(:root) { overflow: hidden; } 28 | 29 | ins { background-color: #ff9; color: #000; text-decoration: none; } 30 | mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } 31 | del { text-decoration: line-through; } 32 | abbr { cursor: help; } 33 | abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } 34 | table { border-collapse: collapse; border-spacing: 0; font-size: inherit; font: 100%; } 35 | th { font-weight: bold; vertical-align: bottom; } 36 | td { font-weight: normal; } 37 | hr { display: block; height: 1px; border:0; border-top: 1px solid #ccc; margin: 1em 0; padding:0; } 38 | input, select { vertical-align:middle; } 39 | 40 | em, i { font-style: italic; } 41 | strong, b { font-weight: bold; } 42 | em > strong, strong > em { font-weight: bold; font-style: italic; } 43 | 44 | small { font-size: 85%; } 45 | td, td img { vertical-align: top; } 46 | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 47 | sup { top: -0.5em; } 48 | sub { bottom: -0.25em; } 49 | 50 | pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } 51 | pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } 52 | textarea { overflow: auto; } 53 | .clickble, label, input[type=button], input[type=submit], button { cursor: pointer; } 54 | input[type="radio"] { vertical-align: text-bottom; } 55 | input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } 56 | select, input, textarea { font: 99% sans-serif; } 57 | button { width: auto; overflow: visible; } 58 | button, input, select, textarea { margin: 0; } 59 | html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } -------------------------------------------------------------------------------- /lessons/04-responsive-design/assets/css/what-does-it-mean.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | padding: 50px; 7 | background-color: gray; 8 | font-size: 62.5%; 9 | } 10 | 11 | h1 { 12 | color: #fff; 13 | text-align: center; 14 | text-transform: uppercase; 15 | font-weight: bold; 16 | font-size: 4em; 17 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 18 | } 19 | 20 | @media (min-width: 400px) { 21 | body { 22 | background-color: red; 23 | background-image: url('../img/rainbowguy.png'); 24 | background-size: cover; 25 | background-repeat: no-repeat; 26 | } 27 | } 28 | 29 | @media (min-width: 600px) { 30 | body { 31 | background-color: orange; 32 | } 33 | h1 { 34 | font-size: 5em; 35 | } 36 | } 37 | 38 | @media (min-width: 800px) { 39 | body { 40 | background-color: yellow; 41 | } 42 | } 43 | 44 | @media (min-width: 1000px) { 45 | body { 46 | background-color: green; 47 | } 48 | h1 { 49 | font-size: 7em; 50 | } 51 | } 52 | 53 | @media (min-width: 1200px) { 54 | body { 55 | background-color: blue; 56 | } 57 | } 58 | 59 | @media (min-width: 1400px) { 60 | body { 61 | background-color: purple; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /lessons/04-responsive-design/assets/img/rainbowguy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/04-responsive-design/assets/img/rainbowguy.png -------------------------------------------------------------------------------- /lessons/04-responsive-design/fluid-or-responsive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Is It Fluid Or Responsive? 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Is this container Fluid or Responsive?

15 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

16 |
17 |
18 | 19 |
20 |
21 |

What about this container? Fluid or Responsive?

22 |
    23 |
    • 24 |
    • 25 |
    • 26 |
    • 27 |
    • 28 |
    • 29 |
    • 30 |
    • 31 |
32 |
33 |
34 | 35 |
36 |
37 |

Final Jeopardy Time. This container represents an approach to building websites.

38 |
    39 |
    • 40 |
    • 41 |
    • 42 |
    • 43 |
    • 44 |
45 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

46 |
47 |
48 | 49 | -------------------------------------------------------------------------------- /lessons/04-responsive-design/loosen-up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hey, Loosen Up A Bit 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Things are looking a bit stiff here

15 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

16 |
    17 |
    • 18 |
    • 19 |
    • 20 |
    • 21 |
    • 22 |
    • 23 |
    • 24 |
    • 25 |
26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /lessons/04-responsive-design/what-does-it-mean.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | What Does It Mean? 6 | 7 | 8 | 9 | 10 | 11 |

I don’t know what it means

12 | 13 | -------------------------------------------------------------------------------- /lessons/07-transforms/in-class/config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | require 'compass-normalize' 3 | 4 | # Set this to the root of your project when deployed: 5 | http_path = "/" 6 | css_dir = "stylesheets" 7 | sass_dir = "sass" 8 | images_dir = "images" 9 | javascripts_dir = "javascripts" 10 | 11 | # You can select your preferred output style here (can be overridden via the command line): 12 | # output_style = :expanded or :nested or :compact or :compressed 13 | 14 | # To enable relative paths to assets via compass helper functions. Uncomment: 15 | # relative_assets = true 16 | 17 | # To disable debugging comments that display the original location of your selectors. Uncomment: 18 | # line_comments = false 19 | 20 | 21 | # If you prefer the indented syntax, you might want to regenerate this 22 | # project again passing --syntax sass, or you can uncomment this: 23 | # preferred_syntax = :sass 24 | # and then run: 25 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 26 | -------------------------------------------------------------------------------- /lessons/07-transforms/in-class/images/book.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shayhowe/advanced-guide-html-css/96693d7d3b2447199ae8c409777b81e77a27eca6/lessons/07-transforms/in-class/images/book.jpg -------------------------------------------------------------------------------- /lessons/07-transforms/in-class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Transform 5 | 6 | 7 | 8 | 9 |
10 |

CSS Transforms

11 |
12 | 13 |
14 |

2D Transforms

15 | 16 |
17 | Scale 18 |
19 | 20 |
21 | Skew 22 |
23 | 24 |
25 | Translate 26 |
27 | 28 |
29 | Rotate 30 |
31 | 32 |
33 |
    34 |
  1. 1
    2. 35 |
  2. 2
    3. 36 |
  3. 3
    4. 37 |
  4. 4
    5. 38 |
  5. 5
    6. 39 |
  6. 6
    7. 40 |
  7. 7
    8. 41 |
  8. 8
    9. 42 |
  9. 9
    10. 43 |
44 |
45 |
46 | 47 |
48 |

3D Transforms

49 | 50 |
51 |
52 | Rotate 53 |
54 |
55 | Rotate 56 |
57 |
58 | Rotate 59 |
60 |
61 | 62 | 63 | 64 |
65 |
66 |
Front
67 |
Back
68 |
Left
69 |
Right
70 |
Top
71 |
Bottom
72 |
73 |
74 | 75 |
76 | 77 |
78 |
79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /lessons/07-transforms/in-class/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import "compass"; 2 | @import "normalize"; 3 | 4 | .container { 5 | width: 920px; 6 | padding: 0 20px; 7 | margin: 0 auto 40px auto; 8 | @include pie-clearfix; 9 | } 10 | 11 | .box { 12 | $side: 100px; 13 | width: $side; 14 | height: $side; 15 | background: orange; 16 | text-align: center; 17 | line-height: $side; 18 | margin: 40px 0; 19 | font-weight: bold; 20 | 21 | &#scale { 22 | -ms-transform: scale(1.3); 23 | -o-transform: scale(1.3); 24 | -moz-transform: scale(1.3); 25 | -webkit-transform: scale(1.3) ; 26 | transform: scale(1.3); 27 | @include transform(scale(1.3)); 28 | } 29 | 30 | &#skew { 31 | -webkit-transform: skew(10deg) ; 32 | } 33 | 34 | &#translate { 35 | -webkit-transform: translateX(20px) ; 36 | } 37 | 38 | &#rotate { 39 | -webkit-transform-origin: top left; 40 | -webkit-transform: rotate(10deg); 41 | } 42 | } 43 | 44 | #three-dimensions { 45 | .rotate-3d-all { 46 | width: 100px; 47 | -webkit-perspective: 100px; 48 | margin-bottom: 120px; 49 | 50 | .rotate-3d { 51 | -webkit-transform: rotateX(10deg) translateZ(20px); 52 | } 53 | } 54 | } 55 | 56 | input[type=range] { 57 | margin-bottom: 100px; 58 | } 59 | 60 | .cube-container { 61 | $sideWidth: 200px; 62 | width: $sideWidth; 63 | height: $sideWidth; 64 | margin-bottom: 120px; 65 | -webkit-perspective: 2000px; 66 | 67 | .cube { 68 | width: $sideWidth; 69 | height: $sideWidth; 70 | -webkit-transform-style: preserve-3d; 71 | -webkit-transform: rotate3d(1, 1, 0, 45deg); 72 | 73 | .side { 74 | position: absolute; 75 | width: $sideWidth; 76 | height: $sideWidth; 77 | line-height: $sideWidth; 78 | font-weight: bold; 79 | font-size: 48px; 80 | text-align: center; 81 | @include opacity(0.8); 82 | 83 | &.front { background: red; -webkit-transform: rotateX(0deg) translateZ(100px); } 84 | &.back { background: orange; -webkit-transform: rotateX(180deg) translateZ(100px); } 85 | &.left { background: yellow; -webkit-transform: rotateY(90deg) translateZ(100px); } 86 | &.right { background: green; -webkit-transform: rotateY(-90deg) translateZ(100px); } 87 | &.top { background: blue; -webkit-transform: rotateX(90deg) translateZ(100px); } 88 | &.bottom { background: purple; -webkit-transform: rotateX(-90deg) translateZ(100px); } 89 | } 90 | } 91 | } 92 | 93 | .keypad { 94 | ol { 95 | width: 180px; 96 | padding: 0; 97 | list-style: none; 98 | color: white; 99 | text-align: center; 100 | font-weight: bold; 101 | font-family: Helvetica, sans-serif; 102 | text-shadow: 0 -1px 2px #333; 103 | } 104 | 105 | li { 106 | float: left; 107 | width: 50px; 108 | height: 50px; 109 | margin: 0 10px 10px 0; 110 | line-height: 50px; 111 | cursor: pointer; 112 | @include background-image(linear-gradient(#ccc, #666)); 113 | @include border-radius(8px); 114 | @include box-shadow(1px 1px 3px #666); 115 | 116 | &:hover { 117 | @include background-image(linear-gradient(#999, #333)); 118 | } 119 | 120 | &:active { 121 | background: green; 122 | -webkit-transform: scale(1.2); 123 | } 124 | } 125 | } 126 | 127 | .book { 128 | $side: 200px; 129 | position: relative; 130 | width: $side; 131 | -webkit-perspective: 1000px; 132 | -webkit-transform-style: preserve-3d; 133 | -webkit-transform: rotateY(-20deg); 134 | 135 | img { max-width: 100%; } 136 | 137 | &:before, 138 | &:after { 139 | position: absolute; 140 | content: ""; 141 | top: 0; 142 | height: 100%; 143 | z-index: -1; 144 | } 145 | 146 | /* Side Panel */ 147 | &:before { 148 | width: $side * .15; 149 | background-color: #EFEFEF; 150 | box-shadow: inset 0px 0px 5px #aaa; 151 | -webkit-transform-origin: left center; 152 | -webkit-transform: rotateY(90deg) translateZ($side) scaleY(.96); 153 | } 154 | 155 | /* Back Panel */ 156 | &:after { 157 | width: 100%; 158 | background-color: #5a2d18; 159 | box-shadow: 5px 5px 20px #333; 160 | -webkit-transform: translate3d(0, 0, $side * -.25); 161 | } 162 | } 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /lessons/07-transforms/in-class/scripts/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | var cube = $(".cube"); 3 | 4 | $("input[type=range]").change(function () { 5 | var degrees = $(this).val(); 6 | 7 | cube.css("-webkit-transform", "rotate3d(1, 1, 0," + degrees + "deg)"); 8 | }); 9 | }); -------------------------------------------------------------------------------- /lessons/07-transforms/in-class/stylesheets/main.css: -------------------------------------------------------------------------------- 1 | /* normalize.css v1.1.0 | MIT License | git.io/normalize */ 2 | /* normalize.css v1.1.0 | HTML5 Display Definitions | MIT License | git.io/normalize */ 3 | /* line 20, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_html5.scss */ 4 | article, 5 | aside, 6 | details, 7 | figcaption, 8 | figure, 9 | footer, 10 | header, 11 | hgroup, 12 | main, 13 | nav, 14 | section, 15 | summary { 16 | display: block; 17 | } 18 | 19 | /* line 28, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_html5.scss */ 20 | audio, 21 | canvas, 22 | video { 23 | display: inline-block; 24 | *display: inline; 25 | *zoom: 1; 26 | } 27 | 28 | /* line 39, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_html5.scss */ 29 | audio:not([controls]) { 30 | display: none; 31 | height: 0; 32 | } 33 | 34 | /* line 46, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_html5.scss */ 35 | [hidden] { 36 | display: none; 37 | } 38 | 39 | /* normalize.css v1.1.0 | Base | MIT License | git.io/normalize */ 40 | /* line 13, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_base.scss */ 41 | html { 42 | font-size: 100%; 43 | font-family: sans-serif; 44 | -webkit-text-size-adjust: 100%; 45 | -ms-text-size-adjust: 100%; 46 | } 47 | 48 | /* line 30, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_base.scss */ 49 | html, 50 | button, 51 | input, 52 | select, 53 | textarea { 54 | font-family: sans-serif; 55 | } 56 | 57 | /* line 37, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_base.scss */ 58 | body { 59 | margin: 0; 60 | } 61 | 62 | /* normalize.css v1.1.0 | Links | MIT License | git.io/normalize */ 63 | /* line 9, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_links.scss */ 64 | a:focus { 65 | outline: thin dotted; 66 | } 67 | 68 | /* line 16, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_links.scss */ 69 | a:active, 70 | a:hover { 71 | outline: 0; 72 | } 73 | 74 | /* normalize.css v1.1.0 | Typography | MIT License | git.io/normalize */ 75 | /* line 13, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 76 | h1 { 77 | font-size: 2em; 78 | margin: 0.67em 0; 79 | } 80 | 81 | /* line 19, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 82 | h2 { 83 | font-size: 1.5em; 84 | margin: 0.83em 0; 85 | } 86 | 87 | /* line 24, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 88 | h3 { 89 | font-size: 1.17em; 90 | margin: 1em 0; 91 | } 92 | 93 | /* line 29, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 94 | h4 { 95 | font-size: 1em; 96 | margin: 1.33em 0; 97 | } 98 | 99 | /* line 34, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 100 | h5 { 101 | font-size: 0.83em; 102 | margin: 1.67em 0; 103 | } 104 | 105 | /* line 39, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 106 | h6 { 107 | font-size: 0.67em; 108 | margin: 2.33em 0; 109 | } 110 | 111 | /* line 47, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 112 | abbr[title] { 113 | border-bottom: 1px dotted; 114 | } 115 | 116 | /* line 54, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /* line 59, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 123 | blockquote { 124 | margin: 1em 40px; 125 | } 126 | 127 | /* line 66, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 128 | dfn { 129 | font-style: italic; 130 | } 131 | 132 | /* line 73, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 133 | hr { 134 | -moz-box-sizing: content-box; 135 | box-sizing: content-box; 136 | height: 0; 137 | } 138 | 139 | /* line 81, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 140 | mark { 141 | background: #ff0; 142 | color: #000; 143 | } 144 | 145 | /* line 90, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 146 | p, 147 | pre { 148 | margin: 1em 0; 149 | } 150 | 151 | /* line 100, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 152 | code, 153 | kbd, 154 | pre, 155 | samp { 156 | font-family: monospace, serif; 157 | _font-family: 'courier new', monospace; 158 | font-size: 1em; 159 | } 160 | 161 | /* line 110, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 162 | pre { 163 | white-space: pre; 164 | white-space: pre-wrap; 165 | word-wrap: break-word; 166 | } 167 | 168 | /* line 118, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 169 | q { 170 | quotes: "\201C" "\201D" "\2018" "\2019"; 171 | } 172 | 173 | /* line 127, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 174 | q { 175 | quotes: none; 176 | } 177 | 178 | /* line 132, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 179 | q:before, 180 | q:after { 181 | content: ''; 182 | content: none; 183 | } 184 | 185 | /* line 140, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 186 | small { 187 | font-size: 80%; 188 | } 189 | 190 | /* line 147, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 191 | sub, 192 | sup { 193 | font-size: 75%; 194 | line-height: 0; 195 | position: relative; 196 | vertical-align: baseline; 197 | } 198 | 199 | /* line 154, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 200 | sup { 201 | top: -0.5em; 202 | } 203 | 204 | /* line 158, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_typography.scss */ 205 | sub { 206 | bottom: -0.25em; 207 | } 208 | 209 | /* line 11, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_lists.scss */ 210 | dl, 211 | menu, 212 | ol, 213 | ul { 214 | margin: 1em 0; 215 | } 216 | 217 | /* line 15, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_lists.scss */ 218 | dd { 219 | margin: 0 0 0 40px; 220 | } 221 | 222 | /* line 23, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_lists.scss */ 223 | menu, 224 | ol, 225 | ul { 226 | padding: 0 0 0 40px; 227 | } 228 | 229 | /* line 30, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_lists.scss */ 230 | nav ul, 231 | nav ol { 232 | list-style: none; 233 | list-style-image: none; 234 | } 235 | 236 | /* normalize.css v1.1.0 | Embedded Content | MIT License | git.io/normalize */ 237 | /* line 9, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_embeds.scss */ 238 | img { 239 | border: 0; 240 | -ms-interpolation-mode: bicubic; 241 | } 242 | 243 | /* line 18, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_embeds.scss */ 244 | svg:not(:root) { 245 | overflow: hidden; 246 | } 247 | 248 | /* normalize.css v1.1.0 | Figures | MIT License | git.io/normalize */ 249 | /* line 9, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_figures.scss */ 250 | figure { 251 | margin: 0; 252 | } 253 | 254 | /* normalize.css v1.1.0 | Forms | MIT License | git.io/normalize */ 255 | /* line 10, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 256 | form { 257 | margin: 0; 258 | } 259 | 260 | /* line 17, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 261 | fieldset { 262 | border: 1px solid #c0c0c0; 263 | margin: 0 2px; 264 | padding: 0.35em 0.625em 0.75em; 265 | } 266 | 267 | /* line 30, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 268 | legend { 269 | border: 0; 270 | padding: 0; 271 | white-space: normal; 272 | *margin-left: -7px; 273 | } 274 | 275 | /* line 49, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 276 | button, 277 | input, 278 | select, 279 | textarea { 280 | font-family: inherit; 281 | font-size: 100%; 282 | margin: 0; 283 | vertical-align: baseline; 284 | *vertical-align: middle; 285 | } 286 | 287 | /* line 63, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 288 | button, 289 | input { 290 | line-height: normal; 291 | } 292 | 293 | /* line 73, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 294 | button, 295 | select { 296 | text-transform: none; 297 | } 298 | 299 | /* line 90, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 300 | button, 301 | html input[type="button"], 302 | input[type="reset"], 303 | input[type="submit"] { 304 | -webkit-appearance: button; 305 | cursor: pointer; 306 | *overflow: visible; 307 | } 308 | 309 | /* line 101, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 310 | button[disabled], 311 | html input[disabled] { 312 | cursor: default; 313 | } 314 | 315 | /* line 113, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 316 | input[type="checkbox"], 317 | input[type="radio"] { 318 | box-sizing: border-box; 319 | padding: 0; 320 | *height: 13px; 321 | *width: 13px; 322 | } 323 | 324 | /* line 126, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 325 | input[type="search"] { 326 | -webkit-appearance: textfield; 327 | -moz-box-sizing: content-box; 328 | -webkit-box-sizing: content-box; 329 | box-sizing: content-box; 330 | } 331 | 332 | /* line 137, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 333 | input[type="search"]::-webkit-search-cancel-button, 334 | input[type="search"]::-webkit-search-decoration { 335 | -webkit-appearance: none; 336 | } 337 | 338 | /* line 144, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 339 | button::-moz-focus-inner, 340 | input::-moz-focus-inner { 341 | border: 0; 342 | padding: 0; 343 | } 344 | 345 | /* line 152, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_forms.scss */ 346 | textarea { 347 | overflow: auto; 348 | vertical-align: top; 349 | } 350 | 351 | /* normalize.css v1.1.0 | Tables | MIT License | git.io/normalize */ 352 | /* line 9, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-normalize-1.4.3/stylesheets/normalize/_tables.scss */ 353 | table { 354 | border-collapse: collapse; 355 | border-spacing: 0; 356 | } 357 | 358 | /* line 4, ../sass/main.scss */ 359 | .container { 360 | width: 920px; 361 | padding: 0 20px; 362 | margin: 0 auto 40px auto; 363 | *zoom: 1; 364 | } 365 | /* line 38, ../../../.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ 366 | .container:after { 367 | content: ""; 368 | display: table; 369 | clear: both; 370 | } 371 | 372 | /* line 11, ../sass/main.scss */ 373 | .box { 374 | width: 100px; 375 | height: 100px; 376 | background: orange; 377 | text-align: center; 378 | line-height: 100px; 379 | margin: 40px 0; 380 | font-weight: bold; 381 | } 382 | /* line 21, ../sass/main.scss */ 383 | .box#scale { 384 | -ms-transform: scale(1.3); 385 | -o-transform: scale(1.3); 386 | -moz-transform: scale(1.3); 387 | -webkit-transform: scale(1.3); 388 | transform: scale(1.3); 389 | -webkit-transform: scale(1.3); 390 | -moz-transform: scale(1.3); 391 | -ms-transform: scale(1.3); 392 | -o-transform: scale(1.3); 393 | transform: scale(1.3); 394 | } 395 | /* line 30, ../sass/main.scss */ 396 | .box#skew { 397 | -webkit-transform: skew(10deg); 398 | } 399 | /* line 34, ../sass/main.scss */ 400 | .box#translate { 401 | -webkit-transform: translateX(20px); 402 | } 403 | /* line 38, ../sass/main.scss */ 404 | .box#rotate { 405 | -webkit-transform-origin: top left; 406 | -webkit-transform: rotate(10deg); 407 | } 408 | 409 | /* line 45, ../sass/main.scss */ 410 | #three-dimensions .rotate-3d-all { 411 | width: 100px; 412 | -webkit-perspective: 100px; 413 | margin-bottom: 120px; 414 | } 415 | /* line 50, ../sass/main.scss */ 416 | #three-dimensions .rotate-3d-all .rotate-3d { 417 | -webkit-transform: rotateX(10deg) translateZ(20px); 418 | } 419 | 420 | /* line 56, ../sass/main.scss */ 421 | input[type=range] { 422 | margin-bottom: 100px; 423 | } 424 | 425 | /* line 60, ../sass/main.scss */ 426 | .cube-container { 427 | width: 200px; 428 | height: 200px; 429 | margin-bottom: 120px; 430 | -webkit-perspective: 2000px; 431 | } 432 | /* line 67, ../sass/main.scss */ 433 | .cube-container .cube { 434 | width: 200px; 435 | height: 200px; 436 | -webkit-transform-style: preserve-3d; 437 | -webkit-transform: rotate3d(1, 1, 0, 45deg); 438 | } 439 | /* line 73, ../sass/main.scss */ 440 | .cube-container .cube .side { 441 | position: absolute; 442 | width: 200px; 443 | height: 200px; 444 | line-height: 200px; 445 | font-weight: bold; 446 | font-size: 48px; 447 | text-align: center; 448 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 449 | opacity: 0.8; 450 | } 451 | /* line 83, ../sass/main.scss */ 452 | .cube-container .cube .side.front { 453 | background: red; 454 | -webkit-transform: rotateX(0deg) translateZ(100px); 455 | } 456 | /* line 84, ../sass/main.scss */ 457 | .cube-container .cube .side.back { 458 | background: orange; 459 | -webkit-transform: rotateX(180deg) translateZ(100px); 460 | } 461 | /* line 85, ../sass/main.scss */ 462 | .cube-container .cube .side.left { 463 | background: yellow; 464 | -webkit-transform: rotateY(90deg) translateZ(100px); 465 | } 466 | /* line 86, ../sass/main.scss */ 467 | .cube-container .cube .side.right { 468 | background: green; 469 | -webkit-transform: rotateY(-90deg) translateZ(100px); 470 | } 471 | /* line 87, ../sass/main.scss */ 472 | .cube-container .cube .side.top { 473 | background: blue; 474 | -webkit-transform: rotateX(90deg) translateZ(100px); 475 | } 476 | /* line 88, ../sass/main.scss */ 477 | .cube-container .cube .side.bottom { 478 | background: purple; 479 | -webkit-transform: rotateX(-90deg) translateZ(100px); 480 | } 481 | 482 | /* line 94, ../sass/main.scss */ 483 | .keypad ol { 484 | width: 180px; 485 | padding: 0; 486 | list-style: none; 487 | color: white; 488 | text-align: center; 489 | font-weight: bold; 490 | font-family: Helvetica, sans-serif; 491 | text-shadow: 0 -1px 2px #333; 492 | } 493 | /* line 105, ../sass/main.scss */ 494 | .keypad li { 495 | float: left; 496 | width: 50px; 497 | height: 50px; 498 | margin: 0 10px 10px 0; 499 | line-height: 50px; 500 | cursor: pointer; 501 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #666666)); 502 | background-image: -webkit-linear-gradient(#cccccc, #666666); 503 | background-image: -moz-linear-gradient(#cccccc, #666666); 504 | background-image: -o-linear-gradient(#cccccc, #666666); 505 | background-image: linear-gradient(#cccccc, #666666); 506 | -webkit-border-radius: 8px; 507 | -moz-border-radius: 8px; 508 | -ms-border-radius: 8px; 509 | -o-border-radius: 8px; 510 | border-radius: 8px; 511 | -webkit-box-shadow: 1px 1px 3px #666666; 512 | -moz-box-shadow: 1px 1px 3px #666666; 513 | box-shadow: 1px 1px 3px #666666; 514 | } 515 | /* line 116, ../sass/main.scss */ 516 | .keypad li:hover { 517 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #333333)); 518 | background-image: -webkit-linear-gradient(#999999, #333333); 519 | background-image: -moz-linear-gradient(#999999, #333333); 520 | background-image: -o-linear-gradient(#999999, #333333); 521 | background-image: linear-gradient(#999999, #333333); 522 | } 523 | /* line 120, ../sass/main.scss */ 524 | .keypad li:active { 525 | background: green; 526 | -webkit-transform: scale(1.2); 527 | } 528 | 529 | /* line 127, ../sass/main.scss */ 530 | .book { 531 | position: relative; 532 | width: 200px; 533 | -webkit-perspective: 1000px; 534 | -webkit-transform-style: preserve-3d; 535 | -webkit-transform: rotateY(-20deg); 536 | /* Side Panel */ 537 | /* Back Panel */ 538 | } 539 | /* line 135, ../sass/main.scss */ 540 | .book img { 541 | max-width: 100%; 542 | } 543 | /* line 138, ../sass/main.scss */ 544 | .book:before, .book:after { 545 | position: absolute; 546 | content: ""; 547 | top: 0; 548 | height: 100%; 549 | z-index: -1; 550 | } 551 | /* line 147, ../sass/main.scss */ 552 | .book:before { 553 | width: 30px; 554 | background-color: #EFEFEF; 555 | box-shadow: inset 0px 0px 5px #aaa; 556 | -webkit-transform-origin: left center; 557 | -webkit-transform: rotateY(90deg) translateZ(200px) scaleY(0.96); 558 | } 559 | /* line 156, ../sass/main.scss */ 560 | .book:after { 561 | width: 100%; 562 | background-color: #5a2d18; 563 | box-shadow: 5px 5px 20px #333; 564 | -webkit-transform: translate3d(0, 0, -50px); 565 | } 566 | --------------------------------------------------------------------------------