├── .gitignore ├── README.md ├── images ├── cupcake.svg ├── donut.svg ├── favicon.ico ├── logo-cs.svg ├── logo.svg ├── rainbow.svg └── unicorn.svg ├── index.html ├── javascripts └── application.js ├── quiz.html ├── results.html └── stylesheets ├── animation.css └── application.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Animations Quiz, Watch Us Build Version 2 | 3 | *We changed the name of this series to "Watch Us Build," so you may see an occasional reference to its former name ("Soup to Bits") in this repository.* 4 | 5 | A simple quiz application to determine which Sweet Lands character you are. 6 | 7 | ## Setup 8 | 9 | - clone the repo 10 | - open `index.html` in browser of choice 11 | -------------------------------------------------------------------------------- /images/cupcake.svg: -------------------------------------------------------------------------------- 1 | Imported LayersCreated with Sketch. -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeschool/WatchUsBuild-QuizAppWithCSSAnimations/afb03b578fcdd65a3cd2ec2b4b446302ccd772d9/images/favicon.ico -------------------------------------------------------------------------------- /images/logo-cs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 | 38 | 39 | 40 | 41 | 42 | 45 | 46 | 47 | 48 | 49 | 52 | 53 | 54 | 55 | 58 | 59 | 60 | 62 | 63 | 64 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 80 | 81 | 82 | 86 | 88 | 89 | 91 | 92 | 96 | 97 | 101 | 102 | 106 | 108 | 110 | 113 | 116 | 118 | 121 | 125 | 127 | 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 30 | 31 | 32 | 33 | 35 | 37 | 39 | 40 | 42 | 43 | 44 | 45 | 46 | 114 | 115 | 116 | 117 | 118 | 138 | 139 | 140 | 141 | 142 | 159 | 160 | 161 | 162 | 163 | 179 | 180 | 181 | 182 | 183 | 194 | 195 | 196 | 197 | 198 | 218 | 219 | 220 | 221 | 222 | 242 | 243 | 244 | 245 | 246 | 266 | 267 | 268 | 269 | 270 | 291 | 292 | 293 | 295 | 298 | 300 | 302 | 304 | 307 | 309 | 312 | 314 | 317 | 319 | 322 | 323 | 325 | 327 | 328 | 330 | 332 | 333 | 335 | 338 | 340 | 343 | 344 | 345 | 346 | 347 | -------------------------------------------------------------------------------- /images/unicorn.svg: -------------------------------------------------------------------------------- 1 | Imported LayersCreated with Sketch. -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Which Sweet Lands Character Are You? 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | Sweet Lands 15 | 16 | 17 |
18 |

Which Sweet Lands character are you?

19 | 20 |
21 |

22 | Are you ready for a sweet adventure? Our upcoming course, 23 | Adventures in Web Animations, is based around 24 | Sweet Lands — a candy-coated game made up of different lands and 25 | characters, all leading to Frosting Fortress. In preparation for 26 | your sugary journey through the world of web animations, take 27 | this quiz to find out which Sweet Lands character represents you 28 | best! 29 |

30 | 31 |
    32 |
  • 33 | Sparkles 34 |

    Sparkles

    35 |
    • 36 |
  • 37 | Pierre 38 |

    Pierre

    39 |
    • 40 |
  • 41 | Sweetheart 42 |

    Sweetheart

    43 |
    • 44 |
  • 45 | Beau Knut 46 |

    Beau Knut

    47 |
    • 48 |
49 | 50 |
51 | Start Quiz 52 |
53 |
54 | 55 | 56 | Code School 57 | 58 |
59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /javascripts/application.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | $( '.answer-link' ).on( 'click', function( event ) { 3 | event.preventDefault(); 4 | 5 | $( '.answer-link' ).removeClass( 'is-selected' ); 6 | $( this ).addClass( 'is-selected' ); 7 | $('.btn[disabled]').attr('disabled', false); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /quiz.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Which Sweet Lands Character Are You? 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | Sweet Lands 15 | 16 | 17 |
18 |

Which Sweet Lands character are you?

19 | 20 |
21 |
22 |
23 |

What do you value the most?

24 | 30 |
31 | Next Question 32 |
33 |
34 |
35 |
36 | 37 | 38 | Code School 39 | 40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /results.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Which Sweet Lands Character Are You? 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | Sweet Lands 15 | 16 | 17 |
18 |

Which Sweet Lands character are you?

19 | 20 |
21 |
22 |
23 |
24 | Rainbow 25 |
26 |
27 |

28 | You are Pierre the Rainbow! You’re sarcastic, smart, and 29 | always up for an adventure — but you’d prefer to float solo. You may have 30 | your head in the clouds, but your feet are firmly on Lemony Brick Road. 31 | See Pierre in action when you play Adventures in Web Animations 32 | — coming soon! 33 |

34 |
35 |
36 | 42 |
43 |
44 | 45 | 46 | Code School 47 | 48 |
49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /stylesheets/animation.css: -------------------------------------------------------------------------------- 1 | /*Global Animations*/ 2 | @-webkit-keyframes fadeIn { 3 | from { 4 | opacity: 0; 5 | filter: alpha(opacity=0); 6 | visibility: hidden; 7 | } 8 | to { 9 | opacity: 1; 10 | filter: alpha(opacity=100); 11 | visibility: visible; 12 | } 13 | } 14 | @keyframes fadeIn { 15 | from { 16 | opacity: 0; 17 | filter: alpha(opacity=0); 18 | visibility: hidden; 19 | } 20 | to { 21 | opacity: 1; 22 | filter: alpha(opacity=100); 23 | visibility: visible; 24 | } 25 | } 26 | 27 | @-webkit-keyframes slideDown { 28 | from { 29 | -webkit-transform: translateY(-300px); 30 | transform: translateY(-300px); 31 | } 32 | to { 33 | -webkit-transform: translateY(0px); 34 | transform: translateY(0px); 35 | } 36 | } 37 | 38 | @keyframes slideDown { 39 | from { 40 | -webkit-transform: translateY(-300px); 41 | transform: translateY(-300px); 42 | } 43 | to { 44 | -webkit-transform: translateY(0px); 45 | transform: translateY(0px); 46 | } 47 | } 48 | 49 | @-webkit-keyframes slideUp { 50 | from { 51 | -webkit-transform: translateY(100%); 52 | transform: translateY(100%); 53 | } 54 | to { 55 | -webkit-transform: translateY(0px); 56 | transform: translateY(0px); 57 | } 58 | } 59 | 60 | @keyframes slideUp { 61 | from { 62 | -webkit-transform: translateY(100%); 63 | transform: translateY(100%); 64 | } 65 | to { 66 | -webkit-transform: translateY(0px); 67 | transform: translateY(0px); 68 | } 69 | } 70 | 71 | /* Dan Eden Inspired Animations */ 72 | /*https://github.com/daneden/animate.css/blob/master/source/attention_seekers/tada.css*/ 73 | 74 | @-webkit-keyframes zoomIn { 75 | from { 76 | visibility: hidden; 77 | opacity: 0; 78 | filter: alpha(opacity=0); 79 | -webkit-transform: scale3d(.3, .3, .3); 80 | transform: scale3d(.3, .3, .3); 81 | } 82 | 100% { 83 | visibility: visible; 84 | opacity: 1; 85 | filter: alpha(opacity=100); 86 | } 87 | } 88 | 89 | @keyframes zoomIn { 90 | from { 91 | visibility: hidden; 92 | opacity: 0; 93 | filter: alpha(opacity=0); 94 | -webkit-transform: scale3d(.3, .3, .3); 95 | transform: scale3d(.3, .3, .3); 96 | } 97 | 100% { 98 | visibility: visible; 99 | opacity: 1; 100 | filter: alpha(opacity=100); 101 | } 102 | } 103 | 104 | @-webkit-keyframes tada { 105 | 0% { 106 | -webkit-transform: scale3d(1, 1, 1); 107 | transform: scale3d(1, 1, 1); 108 | } 109 | 110 | 10%, 20% { 111 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 112 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 113 | } 114 | 115 | 30%, 50%, 70%, 90% { 116 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 117 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 118 | } 119 | 120 | 40%, 60%, 80% { 121 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 122 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 123 | } 124 | 125 | 100% { 126 | -webkit-transform: scale3d(1, 1, 1); 127 | transform: scale3d(1, 1, 1); 128 | } 129 | } 130 | 131 | @keyframes tada { 132 | 0% { 133 | -webkit-transform: scale3d(1, 1, 1); 134 | transform: scale3d(1, 1, 1); 135 | } 136 | 137 | 10%, 20% { 138 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 139 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 140 | } 141 | 142 | 30%, 50%, 70%, 90% { 143 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 144 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 145 | } 146 | 147 | 40%, 60%, 80% { 148 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 149 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 150 | } 151 | 152 | 100% { 153 | -webkit-transform: scale3d(1, 1, 1); 154 | transform: scale3d(1, 1, 1); 155 | } 156 | } 157 | 158 | /*Logo Animations*/ 159 | 160 | .index .brand--top { 161 | -webkit-animation: fadeIn .5s, slideDown .5s; 162 | animation: fadeIn .5s, slideDown .5s; 163 | } 164 | 165 | .index .main { 166 | -webkit-animation: slideUp .75s; 167 | animation: slideUp .75s; 168 | } 169 | 170 | /*Button Animations*/ 171 | 172 | .btn { 173 | -webkit-transition: all .3s; 174 | transition: all .3s; 175 | } 176 | 177 | /*Quiz Page Animations*/ 178 | 179 | .answer-link { 180 | -webkit-transition: all .5s; 181 | transition: all .5s; 182 | } 183 | 184 | .answer-link.is-selected { 185 | -webkit-transition: -webkit-transform .3s; 186 | transition: transform .3s; 187 | -webkit-transform: scale(1.025); 188 | -ms-transform: scale(1.025); 189 | transform: scale(1.025); 190 | } 191 | 192 | /*Results Page*/ 193 | 194 | .character { 195 | -webkit-animation: fadeIn .5s both, tada 1s; 196 | animation: fadeIn .5s both, tada 1s; 197 | } 198 | 199 | .character-description { 200 | -webkit-animation: fadeIn 1s .5s both; 201 | animation: fadeIn 1s .5s both; 202 | } 203 | 204 | .share { 205 | -webkit-animation: zoomIn .5s 1s both; 206 | animation: zoomIn .5s 1s both; 207 | } 208 | 209 | .brand--bottom { 210 | -webkit-transition: opacity .3s; 211 | transition: opacity .3s; 212 | } 213 | -------------------------------------------------------------------------------- /stylesheets/application.css: -------------------------------------------------------------------------------- 1 | @import 'http://fonts.googleapis.com/css?family=Open+Sans:300,400,700'; 2 | 3 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 4 | 5 | 6 | /** 7 | * 1. Set default font family to sans-serif. 8 | * 2. Prevent iOS and IE text size adjust after device orientation change, 9 | * without disabling user zoom. 10 | */ 11 | 12 | html { 13 | font-family: sans-serif; 14 | /* 1 */ 15 | -ms-text-size-adjust: 100%; 16 | /* 2 */ 17 | -webkit-text-size-adjust: 100%; 18 | /* 2 */ 19 | } 20 | 21 | /** 22 | * Remove default margin. 23 | */ 24 | 25 | body { 26 | margin: 0; 27 | } 28 | 29 | /* HTML5 display definitions 30 | ========================================================================== */ 31 | 32 | 33 | /** 34 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 35 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 36 | * and Firefox. 37 | * Correct `block` display not defined for `main` in IE 11. 38 | */ 39 | 40 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { 41 | display: block; 42 | } 43 | 44 | /** 45 | * 1. Correct `inline-block` display not defined in IE 8/9. 46 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 47 | */ 48 | 49 | audio, canvas, progress, video { 50 | display: inline-block; 51 | /* 1 */ 52 | vertical-align: baseline; 53 | /* 2 */ 54 | } 55 | 56 | /** 57 | * Prevent modern browsers from displaying `audio` without controls. 58 | * Remove excess height in iOS 5 devices. 59 | */ 60 | 61 | audio:not([controls]) { 62 | display: none; 63 | height: 0; 64 | } 65 | 66 | /** 67 | * Address `[hidden]` styling not present in IE 8/9/10. 68 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 69 | */ 70 | 71 | [hidden], template { 72 | display: none; 73 | } 74 | 75 | /* Links 76 | ========================================================================== */ 77 | 78 | 79 | /** 80 | * Remove the gray background color from active links in IE 10. 81 | */ 82 | 83 | a { 84 | background-color: transparent; 85 | } 86 | 87 | /** 88 | * Improve readability of focused elements when they are also in an 89 | * active/hover state. 90 | */ 91 | 92 | a:active, a:hover { 93 | outline: 0; 94 | } 95 | 96 | /* Text-level semantics 97 | ========================================================================== */ 98 | 99 | 100 | /** 101 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 102 | */ 103 | 104 | abbr[title] { 105 | border-bottom: 1px dotted; 106 | } 107 | 108 | /** 109 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 110 | */ 111 | 112 | b, strong { 113 | font-weight: bold; 114 | } 115 | 116 | /** 117 | * Address styling not present in Safari and Chrome. 118 | */ 119 | 120 | dfn { 121 | font-style: italic; 122 | } 123 | 124 | /** 125 | * Address variable `h1` font-size and margin within `section` and `article` 126 | * contexts in Firefox 4+, Safari, and Chrome. 127 | */ 128 | 129 | h1 { 130 | font-size: 2em; 131 | margin: 0.67em 0; 132 | } 133 | 134 | /** 135 | * Address styling not present in IE 8/9. 136 | */ 137 | 138 | mark { 139 | background: #ff0; 140 | color: #000; 141 | } 142 | 143 | /** 144 | * Address inconsistent and variable font size in all browsers. 145 | */ 146 | 147 | small { 148 | font-size: 80%; 149 | } 150 | 151 | /** 152 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 153 | */ 154 | 155 | sub, sup { 156 | font-size: 75%; 157 | line-height: 0; 158 | position: relative; 159 | vertical-align: baseline; 160 | } 161 | sup { 162 | top: -0.5em; 163 | } 164 | sub { 165 | bottom: -0.25em; 166 | } 167 | 168 | /* Embedded content 169 | ========================================================================== */ 170 | 171 | 172 | /** 173 | * Remove border when inside `a` element in IE 8/9/10. 174 | */ 175 | 176 | img { 177 | border: 0; 178 | } 179 | 180 | /** 181 | * Correct overflow not hidden in IE 9/10/11. 182 | */ 183 | 184 | svg:not(:root) { 185 | overflow: hidden; 186 | } 187 | 188 | /* Grouping content 189 | ========================================================================== */ 190 | 191 | 192 | /** 193 | * Address margin not present in IE 8/9 and Safari. 194 | */ 195 | 196 | figure { 197 | margin: 1em 40px; 198 | } 199 | 200 | /** 201 | * Address differences between Firefox and other browsers. 202 | */ 203 | 204 | hr { 205 | box-sizing: content-box; 206 | height: 0; 207 | } 208 | 209 | /** 210 | * Contain overflow in all browsers. 211 | */ 212 | 213 | pre { 214 | overflow: auto; 215 | } 216 | 217 | /** 218 | * Address odd `em`-unit font size rendering in all browsers. 219 | */ 220 | 221 | code, kbd, pre, samp { 222 | font-family: monospace, monospace; 223 | font-size: 1em; 224 | } 225 | 226 | /* Forms 227 | ========================================================================== */ 228 | 229 | 230 | /** 231 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 232 | * styling of `select`, unless a `border` property is set. 233 | */ 234 | 235 | 236 | /** 237 | * 1. Correct color not being inherited. 238 | * Known issue: affects color of disabled elements. 239 | * 2. Correct font properties not being inherited. 240 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 241 | */ 242 | 243 | button, input, optgroup, select, textarea { 244 | color: inherit; 245 | /* 1 */ 246 | font: inherit; 247 | /* 2 */ 248 | margin: 0; 249 | /* 3 */ 250 | } 251 | 252 | /** 253 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 254 | */ 255 | 256 | button { 257 | overflow: visible; 258 | } 259 | 260 | /** 261 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 262 | * All other form control elements do not inherit `text-transform` values. 263 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 264 | * Correct `select` style inheritance in Firefox. 265 | */ 266 | 267 | button, select { 268 | text-transform: none; 269 | } 270 | 271 | /** 272 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 273 | * and `video` controls. 274 | * 2. Correct inability to style clickable `input` types in iOS. 275 | * 3. Improve usability and consistency of cursor style between image-type 276 | * `input` and others. 277 | */ 278 | 279 | button, html input[type="button"], input[type="reset"], input[type="submit"] { 280 | -webkit-appearance: button; 281 | /* 2 */ 282 | cursor: pointer; 283 | /* 3 */ 284 | } 285 | 286 | /** 287 | * Re-set default cursor for disabled elements. 288 | */ 289 | 290 | button[disabled], html input[disabled] { 291 | cursor: default; 292 | } 293 | 294 | /** 295 | * Remove inner padding and border in Firefox 4+. 296 | */ 297 | 298 | button::-moz-focus-inner, input::-moz-focus-inner { 299 | border: 0; 300 | padding: 0; 301 | } 302 | 303 | /** 304 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 305 | * the UA stylesheet. 306 | */ 307 | 308 | input { 309 | line-height: normal; 310 | } 311 | 312 | /** 313 | * It's recommended that you don't attempt to style these elements. 314 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 315 | * 316 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 317 | * 2. Remove excess padding in IE 8/9/10. 318 | */ 319 | 320 | input[type="checkbox"], input[type="radio"] { 321 | box-sizing: border-box; 322 | /* 1 */ 323 | padding: 0; 324 | /* 2 */ 325 | } 326 | 327 | /** 328 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 329 | * `font-size` values of the `input`, it causes the cursor style of the 330 | * decrement button to change from `default` to `text`. 331 | */ 332 | 333 | input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { 334 | height: auto; 335 | } 336 | 337 | /** 338 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 339 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 340 | */ 341 | 342 | input[type="search"] { 343 | -webkit-appearance: textfield; 344 | /* 1 */ 345 | box-sizing: content-box; 346 | /* 2 */ 347 | } 348 | 349 | /** 350 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 351 | * Safari (but not Chrome) clips the cancel button when the search input has 352 | * padding (and `textfield` appearance). 353 | */ 354 | 355 | input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { 356 | -webkit-appearance: none; 357 | } 358 | 359 | /** 360 | * Define consistent border, margin, and padding. 361 | */ 362 | 363 | fieldset { 364 | border: 1px solid #c0c0c0; 365 | margin: 0 2px; 366 | padding: 0.35em 0.625em 0.75em; 367 | } 368 | 369 | /** 370 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 371 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 372 | */ 373 | 374 | legend { 375 | border: 0; 376 | /* 1 */ 377 | padding: 0; 378 | /* 2 */ 379 | } 380 | 381 | /** 382 | * Remove default vertical scrollbar in IE 8/9/10/11. 383 | */ 384 | 385 | textarea { 386 | overflow: auto; 387 | } 388 | 389 | /** 390 | * Don't inherit the `font-weight` (applied by a rule above). 391 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 392 | */ 393 | 394 | optgroup { 395 | font-weight: bold; 396 | } 397 | 398 | /* Tables 399 | ========================================================================== */ 400 | 401 | 402 | /** 403 | * Remove most spacing between table cells. 404 | */ 405 | 406 | table { 407 | border-collapse: collapse; 408 | border-spacing: 0; 409 | } 410 | td, th { 411 | padding: 0; 412 | } 413 | .group::after { 414 | clear: both; 415 | content: ''; 416 | display: table; 417 | } 418 | .mbf { 419 | margin-bottom: 0; 420 | } 421 | .mbm { 422 | margin-bottom: 1.25em; 423 | } 424 | .mbl { 425 | margin-bottom: 2.5em; 426 | } 427 | .tac { 428 | text-align: center; 429 | } 430 | .tci { 431 | color: #fff; 432 | } 433 | .tss { 434 | font-size: 90%; 435 | } 436 | @media screen and (min-width: 768px) { 437 | .mbl--m { 438 | margin-bottom: 2.5em; 439 | } 440 | .tal--m { 441 | text-align: left; 442 | } 443 | } 444 | html { 445 | background: #92539f; 446 | color: #333; 447 | font-family: "Open Sans", Helvetica, Arial, sans-serif; 448 | font-size: 16px; 449 | line-height: 1.5; 450 | } 451 | body { 452 | font-size: 100%; 453 | } 454 | ul, p { 455 | margin-bottom: 1.25em; 456 | margin-top: 0; 457 | } 458 | li { 459 | margin-bottom: 0.625em; 460 | margin-top: 0; 461 | } 462 | h1, .h1, h2, .h2, h3, .h3 { 463 | font-family: "Open Sans", Helvetica, Arial, sans-serif; 464 | font-weight: 700; 465 | line-height: 1.2; 466 | margin-bottom: 0.3125em; 467 | margin-top: 0; 468 | } 469 | h1, .h1 { 470 | font-size: 200%; 471 | font-weight: 300; 472 | margin-bottom: 1.25em; 473 | } 474 | h2, .h2 { 475 | font-size: 125%; 476 | margin-bottom: 0.625em; 477 | } 478 | @media screen and (min-width: 768px) { 479 | h2, .h2 { 480 | font-size: 150%; 481 | } 482 | } 483 | h3, .h3 { 484 | font-size: 110%; 485 | } 486 | @media screen and (min-width: 768px) { 487 | h3, .h3 { 488 | font-size: 125%; 489 | } 490 | } 491 | a { 492 | color: #92539f; 493 | text-decoration: none; 494 | } 495 | a:active, a:focus, a:hover { 496 | color: #73427d; 497 | } 498 | img { 499 | display: block; 500 | max-width: 100%; 501 | } 502 | .has-answer { 503 | list-style-type: none; 504 | margin: 0; 505 | margin-bottom: 1.25em; 506 | padding: 0; 507 | } 508 | .answer { 509 | font-weight: 700; 510 | } 511 | .answer-link { 512 | border: 2px solid #ddd; 513 | border-radius: 6px; 514 | color: #333; 515 | display: block; 516 | font-size: 90%; 517 | padding: 0.625em; 518 | padding-left: 2.5em; 519 | position: relative; 520 | } 521 | @media screen and (min-width: 768px) { 522 | .answer-link { 523 | font-size: 100%; 524 | } 525 | } 526 | .answer-link:active, .answer-link:focus, .answer-link:hover, .answer-link.is-selected { 527 | border-color: #92539f; 528 | color: #333; 529 | } 530 | .answer-link.is-selected::before { 531 | background: #92539f; 532 | color: #333; 533 | } 534 | .answer-link::before { 535 | background: #ddd; 536 | border-radius: 50%; 537 | content: ''; 538 | display: block; 539 | height: 20px; 540 | left: 0.625em; 541 | position: absolute; 542 | top: 50%; 543 | -webkit-transform: translateY(-50%); 544 | transform: translateY(-50%); 545 | width: 20px; 546 | } 547 | .brand { 548 | display: block; 549 | text-align: center; 550 | } 551 | .brand--bottom { 552 | margin-top: 2.5em; 553 | opacity: 0.45; 554 | } 555 | .brand--bottom:active, .brand--bottom:focus, .brand--bottom:hover { 556 | opacity: 1; 557 | } 558 | .brand--top { 559 | margin-bottom: 2.5em; 560 | } 561 | .brand-img { 562 | display: block; 563 | margin: 0 auto; 564 | } 565 | .bucket-content { 566 | display: table-cell; 567 | vertical-align: middle; 568 | width: 10000px; 569 | } 570 | .bucket-media > img { 571 | display: block; 572 | margin-bottom: 1.25em; 573 | max-width: none; 574 | } 575 | @media screen and (min-width: 768px) { 576 | .bucket { 577 | display: table; 578 | } 579 | .bucket-media { 580 | float: left; 581 | margin-bottom: 0; 582 | margin-right: 1.25em; 583 | } 584 | } 585 | .btn { 586 | background: #92539f; 587 | border-bottom: 4px solid rgba(0, 0, 0, 0.1); 588 | border-radius: 40px; 589 | border: 0; 590 | color: #faf6fa; 591 | cursor: pointer; 592 | display: inline-block; 593 | font-weight: bold; 594 | line-height: 3; 595 | overflow: hidden; 596 | padding: 0 2.5em; 597 | position: relative; 598 | } 599 | .btn:active, .btn:focus, .btn:hover { 600 | background: #73427d; 601 | color: #fff; 602 | } 603 | .btn--b { 604 | background: #de3a95; 605 | line-height: 2.5; 606 | } 607 | .btn--b:active, .btn--b:focus, .btn--b:hover { 608 | background: #c4217b; 609 | color: #fff; 610 | } 611 | .btn[disabled] { 612 | opacity: 0.4; 613 | } 614 | .btn[disabled]:active, .btn[disabled]:focus, .btn[disabled]:hover { 615 | background: #92539f; 616 | color: #fff; 617 | } 618 | .card { 619 | padding: 1.25em; 620 | position: relative; 621 | } 622 | @media screen and (min-width: 768px) { 623 | .card { 624 | border-radius: 6px; 625 | } 626 | } 627 | .card--a { 628 | background: #fff; 629 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); 630 | } 631 | .card--b { 632 | border: 2px solid #ddd; 633 | } 634 | .card--l { 635 | padding: 1.25em; 636 | } 637 | @media screen and (min-width: 768px) { 638 | .card--l { 639 | padding: 2.5em; 640 | } 641 | } 642 | .cell { 643 | margin: 2.5em auto 5em; 644 | max-width: 50em; 645 | } 646 | .character { 647 | margin: 0 auto; 648 | } 649 | .character-description { 650 | font-size: 90%; 651 | /*transition: 0.4s 0.6s ease-in-out;*/ 652 | } 653 | .characterList { 654 | list-style-type: none; 655 | margin: 0; 656 | margin-bottom: 1.25em; 657 | padding: 0; 658 | } 659 | .characterList-item { 660 | display: block; 661 | position: relative; 662 | } 663 | .characterList-item:last-child { 664 | padding-right: 0; 665 | } 666 | .characterList-item img { 667 | display: block; 668 | margin: 0 auto 0.625em; 669 | width: 40%; 670 | } 671 | .characterList-item-title { 672 | font-weight: bold; 673 | text-align: center; 674 | text-transform: uppercase; 675 | width: 100%; 676 | } 677 | @media screen and (min-width: 500px) { 678 | .characterList-item img { 679 | width: 50%; 680 | } 681 | } 682 | @media screen and (min-width: 768px) { 683 | .characterList-item { 684 | float: left; 685 | min-height: 210px; 686 | width: 25%; 687 | } 688 | .characterList-item img { 689 | left: 50%; 690 | position: absolute; 691 | top: 0; 692 | -webkit-transform: translateX(-50%); 693 | transform: translateX(-50%); 694 | width: 90%; 695 | } 696 | .characterList-item--unicorn img, .characterList-item--rainbow img { 697 | top: 30px; 698 | } 699 | .characterList-item-title { 700 | bottom: 0; 701 | position: absolute; 702 | } 703 | } 704 | .share { 705 | text-align: center; 706 | } 707 | .share-link { 708 | margin-bottom: 0.625em; 709 | text-align: center; 710 | } 711 | @media screen and (min-width: 768px) { 712 | .share-link { 713 | margin-bottom: 0; 714 | margin-right: 0.625em; 715 | text-align: left; 716 | } 717 | } 718 | .share-link:last-child { 719 | margin-right: 0; 720 | } 721 | .share-msg { 722 | margin-bottom: 1.25em; 723 | } 724 | --------------------------------------------------------------------------------