├── .gitignore ├── README.md ├── css ├── component.css ├── demo.css ├── icons.css └── normalize.css ├── favicon.ico ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt └── linearicons │ ├── linearicons.eot │ ├── linearicons.svg │ ├── linearicons.ttf │ ├── linearicons.woff │ └── linearicons.woff2 ├── img ├── blackboard.jpg ├── line.png ├── mouse.svg ├── related │ ├── ArrowNavigationEffects.png │ └── CheckoutConcepts.png ├── stamp.png └── waves.svg └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Inspiration for Pricing Tables 2 | 3 | A couple of styles and inspiration for responsive, flexbox-based HTML pricing tables. 4 | 5 | [Article on Codrops](http://tympanus.net/codrops/?p=25536) 6 | 7 | [Demo](http://tympanus.net/Development/PricingTablesInspiration/) 8 | 9 | ## License 10 | 11 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 12 | 13 | Read more here: [License](http://tympanus.net/codrops/licensing/) 14 | 15 | ## Credits 16 | 17 | [Linearicons](https://linearicons.com/free) 18 | 19 | ## Misc 20 | 21 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) 22 | 23 | [© Codrops 2015](http://www.codrops.com) 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | /* Common styles */ 2 | 3 | .pricing { 4 | display: -webkit-flex; 5 | display: flex; 6 | -webkit-flex-wrap: wrap; 7 | flex-wrap: wrap; 8 | -webkit-justify-content: center; 9 | justify-content: center; 10 | width: 100%; 11 | margin: 0 auto 3em; 12 | } 13 | 14 | .pricing__item { 15 | position: relative; 16 | display: -webkit-flex; 17 | display: flex; 18 | -webkit-flex-direction: column; 19 | flex-direction: column; 20 | -webkit-align-items: stretch; 21 | align-items: stretch; 22 | text-align: center; 23 | -webkit-flex: 0 1 330px; 24 | flex: 0 1 330px; 25 | } 26 | 27 | .pricing__feature-list { 28 | text-align: left; 29 | } 30 | 31 | .pricing__action { 32 | color: inherit; 33 | border: none; 34 | background: none; 35 | } 36 | 37 | .pricing__action:focus { 38 | outline: none; 39 | } 40 | 41 | /* Individual styles */ 42 | 43 | /* Sonam */ 44 | .pricing--sonam .pricing__item { 45 | margin: 1em; 46 | padding: 2em; 47 | cursor: default; 48 | border-radius: 10px; 49 | background: #1F1F1F; 50 | box-shadow: 0 5px 20px rgba(0,0,0,0.05), 0 15px 30px -10px rgba(0,0,0,0.3); 51 | -webkit-transition: background 0.3s; 52 | transition: background 0.3s; 53 | } 54 | 55 | .pricing--sonam .pricing__item:hover { 56 | background: #141315; 57 | } 58 | 59 | .pricing--sonam .pricing__title { 60 | font-size: 2em; 61 | width: 100%; 62 | margin: 0 0 0.25em; 63 | padding: 0 0 0.5em; 64 | border-bottom: 3px solid rgb(27, 26, 28); 65 | } 66 | 67 | .pricing--sonam .pricing__price { 68 | color: #E06060; 69 | font-size: 1.75em; 70 | padding: 1em 0 0.75em; 71 | } 72 | 73 | .pricing--sonam .pricing__sentence { 74 | font-weight: bold; 75 | } 76 | 77 | .pricing--sonam .pricing__feature-list { 78 | margin: 0; 79 | padding: 1em 1.25em 2em; 80 | } 81 | 82 | .pricing--sonam .pricing__action { 83 | font-weight: bold; 84 | margin-top: auto; 85 | padding: 0.75em 2em; 86 | border-radius: 5px; 87 | background: #E06060; 88 | -webkit-transition: background 0.3s; 89 | transition: background 0.3s; 90 | } 91 | 92 | .pricing--sonam .pricing__action:hover, 93 | .pricing--sonam .pricing__action:focus { 94 | background: #BD3C3C; 95 | } 96 | 97 | /* Jinpa */ 98 | .pricing--jinpa .pricing__item { 99 | font-family: 'Sahitya', serif; 100 | margin: 1.5em 0; 101 | padding: 2em; 102 | cursor: default; 103 | color: #fff; 104 | border: 1px solid #CBFFC8; 105 | -webkit-transition: background-color 0.6s, color 0.3s; 106 | transition: background-color 0.6s, color 0.3s; 107 | } 108 | 109 | .pricing--jinpa .pricing__item:nth-child(2) { 110 | border-right: none; 111 | border-left: none; 112 | } 113 | 114 | .pricing--jinpa .pricing__item:hover { 115 | color: #444; 116 | background: #CBFFC8; 117 | } 118 | 119 | .pricing--jinpa .pricing__title { 120 | font-size: 2em; 121 | width: 100%; 122 | margin: 0; 123 | padding: 0; 124 | } 125 | 126 | .pricing--jinpa .pricing__price { 127 | font-size: 1.45em; 128 | font-weight: bold; 129 | line-height: 95px; 130 | width: 100px; 131 | height: 100px; 132 | margin: 1.15em auto 1em; 133 | border-radius: 50%; 134 | background: #ea716e; 135 | -webkit-transition: color 0.3s, background 0.3s; 136 | transition: color 0.3s, background 0.3s; 137 | } 138 | 139 | .pricing--jinpa .pricing__item:first-child .pricing__price { 140 | background: #eac36e; 141 | } 142 | 143 | .pricing--jinpa .pricing__item:nth-child(2) .pricing__price { 144 | background: #eaa36e; 145 | } 146 | 147 | .pricing--jinpa .pricing__item:hover .pricing__price { 148 | color: #fff; 149 | background: #82C57E; 150 | } 151 | 152 | .pricing--jinpa .pricing__sentence { 153 | font-weight: bold; 154 | } 155 | 156 | .pricing--jinpa .pricing__feature-list { 157 | margin: 0; 158 | padding: 1em 1em 2em 1em; 159 | list-style: none; 160 | text-align: center; 161 | } 162 | 163 | .pricing--jinpa .pricing__action { 164 | font-weight: bold; 165 | margin-top: auto; 166 | padding: 0.75em 2em; 167 | opacity: 0; 168 | color: #fff; 169 | background: #82C57E; 170 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 171 | transition: transform 0.3s, opacity 0.3s; 172 | -webkit-transform: translate3d(0, -15px, 0); 173 | transform: translate3d(0, -15px, 0); 174 | } 175 | 176 | .pricing--jinpa .pricing__item:hover .pricing__action { 177 | opacity: 1; 178 | -webkit-transform: translate3d(0, 0, 0); 179 | transform: translate3d(0, 0, 0); 180 | } 181 | 182 | .pricing--jinpa .pricing__action:hover, 183 | .pricing--jinpa .pricing__action:focus { 184 | background: #6EA76B; 185 | } 186 | 187 | @media screen and (max-width: 60em) { 188 | .pricing--jinpa .pricing__item { 189 | max-width: none; 190 | width: 90%; 191 | flex: none; 192 | } 193 | .pricing--jinpa .pricing__item:nth-child(2) { 194 | border: 1px solid #fff; 195 | } 196 | } 197 | 198 | /* Tenzin */ 199 | .pricing--tenzin .pricing__item { 200 | margin: 1em; 201 | padding: 2em 2.5em; 202 | text-align: left; 203 | color: #262b38; 204 | background: #EEF0F3; 205 | border-top: 3px solid #EEF0F3; 206 | -webkit-transition: border-color 0.3s; 207 | transition: border-color 0.3s; 208 | } 209 | 210 | .pricing--tenzin .pricing__item:hover { 211 | border-color: #3e62e0; 212 | } 213 | 214 | .pricing--tenzin .pricing__title { 215 | font-size: 1em; 216 | margin: 0 0 1em; 217 | } 218 | 219 | .pricing--tenzin .pricing__price { 220 | font-size: 2em; 221 | font-weight: bold; 222 | padding: 0.5em 0 0.75em; 223 | border-top: 3px solid rgba(139, 144, 157, 0.18); 224 | } 225 | 226 | .pricing--tenzin .pricing__currency { 227 | font-size: 0.5em; 228 | vertical-align: super; 229 | } 230 | 231 | .pricing--tenzin .pricing__sentence { 232 | font-weight: bold; 233 | padding: 0 0 0.5em; 234 | color: #9CA0A9; 235 | border-bottom: 3px solid rgba(139, 144, 157, 0.18); 236 | } 237 | 238 | .pricing--tenzin .pricing__feature-list { 239 | font-size: 0.85em; 240 | font-style: italic; 241 | margin: 0; 242 | padding: 0.25em 0 2.5em; 243 | list-style: none; 244 | text-align: right; 245 | color: #8b909d; 246 | } 247 | 248 | .pricing--tenzin .pricing__action { 249 | font-weight: bold; 250 | margin-top: auto; 251 | padding: 1em 2em; 252 | color: #fff; 253 | border-radius: 30px; 254 | background: #3e62e0; 255 | -webkit-transition: background-color 0.3s; 256 | transition: background-color 0.3s; 257 | } 258 | 259 | .pricing--tenzin .pricing__action:hover, 260 | .pricing--tenzin .pricing__action:focus { 261 | background-color: #3b5ac5; 262 | } 263 | 264 | /* Yama */ 265 | .pricing--yama .pricing__item { 266 | margin: 1em; 267 | padding: 0 0 2em; 268 | color: #fff; 269 | background: #1e1c20; 270 | } 271 | 272 | .pricing--yama .pricing__title { 273 | font-family: 'Playfair Display', serif; 274 | font-size: 2.35em; 275 | font-weight: 900; 276 | line-height: 1; 277 | width: 290px; 278 | margin: 0 auto; 279 | padding: 1em 1em 0em; 280 | } 281 | 282 | .pricing__amp { 283 | padding: 0.15em 0 0.1em; 284 | color: #0f0e0f; 285 | } 286 | 287 | .pricing--yama .pricing__sentence { 288 | margin-bottom: 2em; 289 | color: #555357; 290 | } 291 | 292 | .pricing--yama .pricing__price { 293 | font-size: 2em; 294 | font-weight: bold; 295 | position: relative; 296 | z-index: 10; 297 | overflow: hidden; 298 | padding: 0.75em; 299 | cursor: default; 300 | color: #ef7d46; 301 | background: #1a181b; 302 | -webkit-transition: color 0.3s; 303 | transition: color 0.3s; 304 | } 305 | 306 | .pricing--yama .pricing__item:hover .pricing__price { 307 | color: #fff; 308 | } 309 | 310 | .pricing--yama .pricing__price::before { 311 | content: ''; 312 | position: absolute; 313 | z-index: -1; 314 | top: 0; 315 | left: 0; 316 | width: 100%; 317 | height: 100%; 318 | pointer-events: none; 319 | background: #141315; 320 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 321 | transition: transform 0.3s, opacity 0.3s; 322 | -webkit-transform: translate3d(-150%,0,0) skewX(40deg); 323 | transform: translate3d(-150%,0,0) skewX(40deg); 324 | } 325 | 326 | .pricing--yama .pricing__item:hover .pricing__price::before { 327 | opacity: 1; 328 | -webkit-transform: translate3d(0,0,0) skewX(0deg); 329 | transform: translate3d(0,0,0) skewX(0deg); 330 | } 331 | 332 | .pricing--yama .pricing__period { 333 | font-size: 0.5em; 334 | font-weight: normal; 335 | display: block; 336 | color: #2a272c; 337 | } 338 | 339 | .pricing--yama .pricing__feature-list { 340 | margin: 0; 341 | padding: 2em 1em; 342 | list-style: none; 343 | text-align: center; 344 | color: #6a6563; 345 | } 346 | 347 | .pricing--yama .pricing__action { 348 | font-weight: bold; 349 | margin: 0 2em; 350 | padding: 1em 2em; 351 | border-radius: 4px; 352 | background: #ef7d46; 353 | -webkit-transition: background-color 0.3s, color 0.3s; 354 | transition: background-color 0.3s, color 0.3s; 355 | } 356 | 357 | .pricing--yama .pricing__action:hover, 358 | .pricing--yama .pricing__action:focus { 359 | color: #ef7d46; 360 | background: #fff; 361 | } 362 | 363 | /* Rabten */ 364 | .pricing--rabten .pricing__item { 365 | font-family: 'Roboto', sans-serif; 366 | padding: 2em 4em; 367 | cursor: default; 368 | color: #262b38; 369 | max-width: 320px; 370 | } 371 | 372 | .pricing--rabten .pricing__item:nth-child(2) { 373 | border-right: 1px solid rgba(139, 144, 157, 0.18); 374 | border-left: 1px solid rgba(139, 144, 157, 0.18); 375 | } 376 | 377 | .pricing--rabten .pricing__title { 378 | font-size: 1em; 379 | margin: 1.5em 0 0; 380 | } 381 | 382 | .pricing--rabten .icon { 383 | font-size: 2.5em; 384 | color: #8b909d; 385 | -webkit-transition: color 0.3s; 386 | transition: color 0.3s; 387 | } 388 | 389 | .pricing--rabten .pricing__item:hover .icon { 390 | color: #E03E3E; 391 | } 392 | 393 | .pricing--rabten .pricing__price { 394 | font-size: 2em; 395 | font-weight: bold; 396 | margin: 0.5em 0 0.75em; 397 | overflow: hidden; 398 | } 399 | 400 | .pricing--rabten .pricing__currency { 401 | font-size: 0.5em; 402 | vertical-align: super; 403 | } 404 | 405 | .pricing--rabten .pricing__period { 406 | font-size: 0.35em; 407 | color: #8b909d; 408 | } 409 | 410 | .pricing--rabten .pricing__anim { 411 | display: inline-block; 412 | position: relative; 413 | } 414 | 415 | .pricing--rabten .pricing__item:hover .pricing__anim { 416 | -webkit-animation: moveUp 0.4s forwards; 417 | animation: moveUp 0.4s forwards; 418 | -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 419 | animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 420 | } 421 | 422 | .pricing--rabten .pricing__item:hover .pricing__anim--2 { 423 | -webkit-animation-delay: 0.05s; 424 | animation-delay: 0.05s; 425 | } 426 | 427 | @-webkit-keyframes moveUp { 428 | 50% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } 429 | 51% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } 430 | 52% { opacity: 1; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } 431 | 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 432 | } 433 | 434 | @keyframes moveUp { 435 | 50% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } 436 | 51% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } 437 | 52% { opacity: 1; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } 438 | 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 439 | } 440 | 441 | .pricing--rabten .pricing__sentence { 442 | font-weight: bold; 443 | margin: 0 0 1em 0; 444 | padding: 0 0 0.5em; 445 | color: #8b909d; 446 | } 447 | 448 | .pricing--rabten .pricing__feature-list { 449 | font-size: 0.85em; 450 | margin: 0; 451 | padding: 0.25em 0 2.5em; 452 | list-style: none; 453 | text-align: center; 454 | color: #8b909d; 455 | } 456 | 457 | .pricing--rabten .pricing__action { 458 | font-weight: bold; 459 | margin-top: auto; 460 | padding: 1em 2em; 461 | color: #fff; 462 | border-radius: 30px; 463 | background: #E03E3E; 464 | -webkit-transition: background-color 0.3s; 465 | transition: background-color 0.3s; 466 | } 467 | 468 | .pricing--rabten .pricing__action:hover, 469 | .pricing--rabten .pricing__action:focus { 470 | background-color: #C53737; 471 | } 472 | 473 | @media screen and (max-width: 60em) { 474 | .pricing--rabten .pricing__item { 475 | max-width: none; 476 | width: 90%; 477 | flex: none; 478 | border: none !important; 479 | opacity: 1 !important; 480 | } 481 | } 482 | 483 | /* Pema */ 484 | .pricing--pema .pricing__item { 485 | font-family: 'Alegreya Sans', sans-serif; 486 | padding: 2em 3em; 487 | margin: 1em; 488 | color: #262b38; 489 | background: #fff; 490 | cursor: default; 491 | overflow: hidden; 492 | box-shadow: 0 0 15px rgba(0,0,0,0.05); 493 | } 494 | 495 | @media screen and (min-width: 66.250em) { 496 | .pricing--pema .pricing__item { 497 | margin: 1.5em 0; 498 | } 499 | .pricing--pema .pricing__item--featured { 500 | z-index: 10; 501 | margin: 0; 502 | font-size: 1.15em; 503 | } 504 | } 505 | 506 | .pricing--pema .pricing__title { 507 | font-size: 2em; 508 | margin: 0.5em 0 0; 509 | color: #1d211f; 510 | } 511 | 512 | .pricing--pema .icon { 513 | display: inline-block; 514 | min-width: 2em; 515 | color: #8A9790; 516 | vertical-align: middle; 517 | } 518 | 519 | .pricing--pema .pricing__price { 520 | font-size: 5em; 521 | font-weight: 800; 522 | color: #6ed19c; 523 | position: relative; 524 | z-index: 100; 525 | } 526 | 527 | .pricing--pema .pricing__currency { 528 | font-size: 0.5em; 529 | vertical-align: super; 530 | } 531 | 532 | .pricing--pema .pricing__period { 533 | font-size: 0.25em; 534 | display: inline-block; 535 | padding: 0 0 0 0.5em; 536 | color: #CEDED6; 537 | } 538 | 539 | .pricing--pema .pricing__sentence { 540 | font-weight: bold; 541 | margin: 0 0 1em 0; 542 | padding: 0 0 0.5em; 543 | color: #6ed19c; 544 | } 545 | 546 | .pricing--pema .pricing__feature-list { 547 | font-size: 0.95em; 548 | margin: 0; 549 | padding: 1.5em 0.5em 2.5em; 550 | list-style: none; 551 | } 552 | 553 | .pricing--pema .pricing__feature { 554 | padding: 0.15em 0; 555 | } 556 | 557 | .pricing--pema .pricing__action { 558 | font-weight: bold; 559 | margin-top: auto; 560 | padding: 1em 2em; 561 | color: #fff; 562 | border-radius: 5px; 563 | background: #6ed19c; 564 | -webkit-transition: background-color 0.3s; 565 | transition: background-color 0.3s; 566 | } 567 | 568 | .pricing--pema .pricing__action:hover, 569 | .pricing--pema .pricing__action:focus { 570 | background-color: #4F5F56; 571 | } 572 | 573 | /* karma */ 574 | .pricing--karma .pricing__item { 575 | margin: 1em; 576 | color: #382628; 577 | background: #fff; 578 | cursor: default; 579 | text-transform: uppercase; 580 | letter-spacing: 4px; 581 | border: 2px solid #382628; 582 | border-radius: 5px; 583 | } 584 | 585 | .pricing--karma .pricing__title { 586 | font-size: 1em; 587 | font-weight: 700; 588 | margin: 0.5em 0 0; 589 | padding: 1em; 590 | border-bottom: 2px solid #382628; 591 | } 592 | 593 | .pricing--karma .icon { 594 | display: inline-block; 595 | min-width: 2em; 596 | } 597 | 598 | .pricing--karma .pricing__price { 599 | font-size: 3em; 600 | padding: 0.5em 0 0 0; 601 | margin: 1em; 602 | font-weight: bold; 603 | border: 2px solid #382628; 604 | position: relative; 605 | z-index: 100; 606 | } 607 | 608 | .pricing--karma .pricing__item--featured .pricing__price::after { 609 | background: url(../img/stamp.png); 610 | background-size: cover; 611 | content: ''; 612 | position: absolute; 613 | top: -30px; 614 | right: -20px; 615 | width: 100px; 616 | height: 100px; 617 | pointer-events: none; 618 | } 619 | 620 | .pricing--karma .pricing__currency { 621 | font-size: 0.5em; 622 | vertical-align: super; 623 | } 624 | 625 | .pricing--karma .pricing__period { 626 | font-size: 0.25em; 627 | display: block; 628 | padding: 1em; 629 | margin-top: 1.25em; 630 | border-top: 2px solid #382628; 631 | } 632 | 633 | .pricing--karma .pricing__sentence { 634 | margin: 0 0 1em 0; 635 | padding: 1em; 636 | font-size: 0.85em; 637 | border-bottom: 2px solid #382628; 638 | } 639 | 640 | .pricing--karma .pricing__feature-list { 641 | font-size: 0.85em; 642 | margin: 0; 643 | letter-spacing: 0; 644 | padding: 0 1em 2.5em 4em; 645 | list-style-type: square; 646 | } 647 | 648 | .pricing--karma .pricing__action { 649 | font-weight: bold; 650 | flex: none; 651 | margin: auto 1em 1em; 652 | padding: 1.25em 2em; 653 | color: #fff; 654 | background: #382628; 655 | letter-spacing: 2px; 656 | border-radius: 5px; 657 | border: 2px solid #382628; 658 | font-size: 0.95em; 659 | text-transform: uppercase; 660 | -webkit-transition: background-color 0.3s, color 0.3s; 661 | transition: background-color 0.3s, color 0.3s; 662 | } 663 | 664 | .pricing--karma .pricing__action:hover, 665 | .pricing--karma .pricing__action:focus { 666 | background-color: #ffdbd5; 667 | color: #382628; 668 | } 669 | 670 | /* norbu */ 671 | .pricing--norbu .pricing__item { 672 | margin: 1em; 673 | color: #fff; 674 | cursor: default; 675 | font-family: 'Myriad Pro', Arial, sans-serif; 676 | border: 1px solid rgba(255,255,255,0.4); 677 | background: rgba(255,255,255,0.08); 678 | border-radius: 10px; 679 | -webkit-transition: border-color 0.3s, background 0.3s; 680 | transition: border-color 0.3s, background 0.3s; 681 | } 682 | 683 | .pricing--norbu .pricing__item:hover { 684 | border: 1px solid rgba(255,255,255,1); 685 | background: rgba(255,255,255,0.18); 686 | } 687 | 688 | .pricing--norbu .pricing__title { 689 | font-size: 2em; 690 | font-weight: 400; 691 | margin: 0.5em 0; 692 | padding: 1em; 693 | position: relative; 694 | } 695 | 696 | .pricing--norbu .pricing__title::after { 697 | content: ''; 698 | position: absolute; 699 | width: 20%; 700 | height: 1px; 701 | background: #fff; 702 | left: 40%; 703 | bottom: 0; 704 | } 705 | 706 | .pricing--norbu .icon { 707 | display: inline-block; 708 | min-width: 2em; 709 | } 710 | 711 | .pricing--norbu .pricing__price { 712 | font-size: 3.5em; 713 | padding: 0.5em 0 0 0; 714 | font-weight: 400; 715 | position: relative; 716 | z-index: 100; 717 | } 718 | 719 | .pricing--norbu .pricing__currency { 720 | font-size: 0.5em; 721 | vertical-align: super; 722 | } 723 | 724 | .pricing--norbu .pricing__period { 725 | font-size: 0.25em; 726 | display: block; 727 | padding: 1em; 728 | } 729 | 730 | .pricing--norbu .pricing__sentence { 731 | padding: 1em 2em; 732 | font-size: 1em; 733 | margin: 0 auto 1em; 734 | } 735 | 736 | .pricing--norbu .pricing__feature-list { 737 | font-size: 1.15em; 738 | margin: 0 2em; 739 | letter-spacing: 0; 740 | padding: 2em 0; 741 | list-style: none; 742 | } 743 | 744 | .pricing--norbu .pricing__feature { 745 | line-height: 1.4; 746 | } 747 | 748 | .pricing--norbu .pricing__feature::before { 749 | content: "\e87a"; 750 | font-family: 'linearicons'; 751 | display: inline-block; 752 | vertical-align: middle; 753 | padding: 0 0.75em 0 0; 754 | } 755 | 756 | .pricing--norbu .pricing__action { 757 | font-weight: bold; 758 | flex: none; 759 | margin: auto 1em 1em; 760 | padding: 1.25em 2em; 761 | color: #4aa8e4; 762 | background: rgba(255,255,255,0.7); 763 | border-radius: 5px; 764 | -webkit-transition: background 0.3s; 765 | transition: background 0.3s; 766 | } 767 | 768 | .pricing--norbu .pricing__action:hover, 769 | .pricing--norbu .pricing__action:focus { 770 | background: #fff; 771 | } 772 | 773 | /* Dawa */ 774 | .pricing--dawa .pricing__item { 775 | padding: 0 2em; 776 | } 777 | 778 | .pricing--dawa .pricing__title { 779 | font-weight: bold; 780 | font-size: 1.8em; 781 | padding: 0 0 0.5em; 782 | background: url(../img/line.png) no-repeat 50% 100%; 783 | } 784 | 785 | .pricing--dawa .pricing__price { 786 | font-size: 3.75em; 787 | line-height: 1; 788 | margin: 1em 0 0.65em; 789 | font-family: 'Homemade Apple', cursive; 790 | } 791 | 792 | .pricing--dawa .pricing__period { 793 | font-size: 0.25em; 794 | display: block; 795 | } 796 | 797 | .pricing--dawa .pricing__sentence { 798 | font-family: 'Homemade Apple', cursive; 799 | margin: 0; 800 | } 801 | 802 | .pricing--dawa .pricing__feature-list { 803 | margin: 0 0 1.5em; 804 | padding: 1em; 805 | list-style: none; 806 | text-align: center; 807 | } 808 | 809 | .pricing--dawa .pricing__action { 810 | border-radius: 30px; 811 | font-size: 1.5em; 812 | padding: 0.5em 1.5em; 813 | font-family: 'Homemade Apple', cursive; 814 | -webkit-transition: color 0.3s; 815 | transition: color 0.3s; 816 | } 817 | 818 | .pricing--dawa .pricing__action:hover, 819 | .pricing--dawa .pricing__action:focus { 820 | color: #fffa5c; 821 | } 822 | 823 | @media screen and (max-width: 40em) { 824 | .pricing--dawa .pricing__item { 825 | border: 1px solid rgba(255,255,255,0.6); 826 | margin: 1em; 827 | } 828 | } 829 | 830 | /* Yonten */ 831 | .pricing--yonten .pricing__item { 832 | font-family: 'PT Sans', sans-serif; 833 | padding: 2em 4em; 834 | cursor: default; 835 | color: #fff; 836 | margin: 1em; 837 | border: 1px solid #5c6552; 838 | max-width: 320px; 839 | } 840 | 841 | @media screen and (min-width: 66.250em) { 842 | .pricing--yonten .pricing__item { 843 | margin: 0; 844 | } 845 | .pricing--yonten .pricing__item:nth-child(2) { 846 | border-right: none; 847 | border-left: none; 848 | } 849 | } 850 | 851 | .pricing--yonten .pricing__item:hover { 852 | z-index: 100; 853 | } 854 | 855 | .pricing--yonten .pricing__item:hover::after { 856 | content: ''; 857 | pointer-events: none; 858 | position: absolute; 859 | top: -5px; 860 | left: -5px; 861 | width: 100%; 862 | height: 100%; 863 | box-sizing: content-box; 864 | border: 5px solid #8bc34a; 865 | } 866 | 867 | .pricing--yonten .pricing__title { 868 | font-size: 1.5em; 869 | margin: 0 0 0.5em 0; 870 | padding: 0 0 0.5em; 871 | } 872 | 873 | .pricing--yonten .icon { 874 | font-size: 3em; 875 | margin: 0 0 0.5em 0; 876 | color: #85c34a; 877 | } 878 | 879 | .pricing--yonten .pricing__price { 880 | font-size: 2em; 881 | margin: 0 0 0.5em 0; 882 | font-weight: bold; 883 | color: #85c34a; 884 | } 885 | 886 | .pricing--yonten .pricing__currency { 887 | font-size: 0.5em; 888 | vertical-align: super; 889 | } 890 | 891 | .pricing--yonten .pricing__period { 892 | font-size: 0.35em; 893 | padding: 0 0 0 0.5em; 894 | color: #646D5B; 895 | } 896 | 897 | .pricing--yonten .pricing__feature-list { 898 | margin: 0; 899 | padding: 0.25em 0 8em; 900 | list-style: none; 901 | text-align: center; 902 | color: #81867D; 903 | } 904 | 905 | .pricing--yonten .pricing__feature { 906 | padding: 0.25em; 907 | } 908 | 909 | .pricing--yonten .pricing__action { 910 | font-weight: bold; 911 | margin-top: auto; 912 | padding: 1em 2em; 913 | border-radius: 40px; 914 | background: #85c34a; 915 | color: ; 916 | -webkit-transition: background-color 0.3s, color 0.3s; 917 | transition: background-color 0.3s, color 0.3s; 918 | } 919 | 920 | .pricing--yonten .pricing__action:hover, 921 | .pricing--yonten .pricing__action:focus { 922 | color: #85c34a; 923 | background: #fff; 924 | } 925 | 926 | /* tashi */ 927 | .pricing--tashi .pricing__item { 928 | font-family: 'Roboto Condensed', sans-serif; 929 | margin: 0.5em; 930 | padding: 2em 2.5em; 931 | text-align: left; 932 | color: #fff; 933 | background: #262c37; 934 | } 935 | 936 | .pricing--tashi .pricing__title { 937 | font-size: 2em; 938 | font-weight: 300; 939 | margin: 0 0 0.15em; 940 | color: #E25A77; 941 | } 942 | 943 | .pricing--tashi .pricing__item:nth-child(2) .pricing__title { 944 | color: #E25ABC; 945 | } 946 | 947 | .pricing--tashi .pricing__item:nth-child(3) .pricing__title { 948 | color: #7E5AE2; 949 | } 950 | 951 | .pricing--tashi .pricing__price { 952 | font-size: 3em; 953 | font-weight: 300; 954 | padding: 0.85em 0; 955 | } 956 | 957 | .pricing--tashi .pricing__currency { 958 | font-size: 0.65em; 959 | vertical-align: super; 960 | color: #394150; 961 | } 962 | 963 | .pricing--tashi .pricing__period { 964 | font-size: 0.35em; 965 | padding: 0 0 0 0.5em; 966 | color: #535965; 967 | } 968 | 969 | .pricing--tashi .pricing__sentence { 970 | padding: 0 0 0.5em; 971 | margin: 0; 972 | color: #535965; 973 | } 974 | 975 | .pricing--tashi .pricing__feature-list { 976 | font-size: 0.95em; 977 | margin: 0; 978 | padding: 0 0 2.5em; 979 | list-style: none; 980 | color: #757983; 981 | } 982 | 983 | .pricing--tashi .pricing__feature { 984 | position: relative; 985 | display: block; 986 | padding: 0 0 0 20px; 987 | line-height: 1.5; 988 | } 989 | 990 | .pricing--tashi .pricing__feature::before { 991 | content: ''; 992 | position: absolute; 993 | width: 10px; 994 | height: 2px; 995 | background: #1F242D; 996 | left: 0; 997 | top: 50%; 998 | margin: -2px 0 0 0; 999 | } 1000 | 1001 | .pricing--tashi .pricing__action { 1002 | -webkit-align-self: flex-end; 1003 | align-self: flex-end; 1004 | margin-top: auto; 1005 | font-size: 1.55em; 1006 | width: 60px; 1007 | height: 60px; 1008 | line-height: 60px; 1009 | color: #fff; 1010 | border-radius: 30px; 1011 | background: #E25A77; 1012 | -webkit-transition: background-color 0.3s, color 0.3s; 1013 | transition: background-color 0.3s, color 0.3s; 1014 | } 1015 | 1016 | .pricing--tashi .pricing__item:nth-child(2) .pricing__action { 1017 | background: #E25ABC; 1018 | } 1019 | 1020 | .pricing--tashi .pricing__item:nth-child(3) .pricing__action { 1021 | background: #7E5AE2; 1022 | } 1023 | 1024 | .pricing--tashi .pricing__action:hover, 1025 | .pricing--tashi .pricing__action:focus { 1026 | background: #1A1F28 !important; 1027 | } 1028 | 1029 | /* palden */ 1030 | .pricing--palden .pricing__item { 1031 | font-family: "Nunito", sans-serif; 1032 | cursor: default; 1033 | color: #84697c; 1034 | background: #fff; 1035 | box-shadow: 0 0 10px rgba(46, 59, 125, 0.23); 1036 | border-radius: 20px 20px 10px 10px; 1037 | margin: 1em; 1038 | } 1039 | 1040 | @media screen and (min-width: 66.250em) { 1041 | .pricing--palden .pricing__item { 1042 | margin: 1em -0.5em; 1043 | } 1044 | .pricing--palden .pricing__item--featured { 1045 | margin: 0; 1046 | z-index: 10; 1047 | box-shadow: 0 0 20px rgba(46, 59, 125, 0.23); 1048 | } 1049 | } 1050 | 1051 | .pricing--palden .pricing__deco { 1052 | border-radius: 10px 10px 0 0; 1053 | background: #7a90ff; 1054 | padding: 4em 0 9em; 1055 | position: relative; 1056 | } 1057 | 1058 | .pricing--palden .pricing__deco-img { 1059 | position: absolute; 1060 | bottom: 0; 1061 | left: 0; 1062 | width: 100%; 1063 | height: 160px; 1064 | } 1065 | 1066 | .pricing--palden .pricing__item--featured .pricing__deco { 1067 | padding: 5em 0 8.885em 0; 1068 | } 1069 | 1070 | .pricing--palden .pricing__title { 1071 | font-size: 0.75em; 1072 | margin: 0; 1073 | text-transform: uppercase; 1074 | letter-spacing: 5px; 1075 | color: #ffd5bd; 1076 | } 1077 | 1078 | .pricing--palden .deco-layer { 1079 | -webkit-transition: -webkit-transform 0.5s; 1080 | transition: transform 0.5s; 1081 | } 1082 | 1083 | .pricing--palden .pricing__item:hover .deco-layer--1 { 1084 | -webkit-transform: translate3d(15px,0,0); 1085 | transform: translate3d(15px,0,0); 1086 | } 1087 | 1088 | .pricing--palden .pricing__item:hover .deco-layer--2 { 1089 | -webkit-transform: translate3d(-15px,0,0); 1090 | transform: translate3d(-15px,0,0); 1091 | } 1092 | 1093 | .pricing--palden .icon { 1094 | font-size: 2.5em; 1095 | } 1096 | 1097 | .pricing--palden .pricing__price { 1098 | font-size: 5em; 1099 | font-weight: bold; 1100 | padding: 0; 1101 | color: #fff; 1102 | margin: 0 0 0.25em 0; 1103 | line-height: 0.75; 1104 | } 1105 | 1106 | .pricing--palden .pricing__currency { 1107 | font-size: 0.15em; 1108 | vertical-align: top; 1109 | color: rgba(0,0,0,0.4); 1110 | } 1111 | 1112 | .pricing--palden .pricing__period { 1113 | font-size: 0.15em; 1114 | padding: 0 0 0 0.5em; 1115 | color: rgba(0,0,0,0.4); 1116 | font-style: italic; 1117 | } 1118 | 1119 | .pricing--palden .pricing__sentence { 1120 | font-weight: bold; 1121 | margin: 0 0 1em 0; 1122 | padding: 0 0 0.5em; 1123 | } 1124 | 1125 | .pricing--palden .pricing__feature-list { 1126 | margin: 0; 1127 | padding: 0.25em 0 2.5em; 1128 | list-style: none; 1129 | text-align: center; 1130 | } 1131 | 1132 | .pricing--palden .pricing__feature { 1133 | padding: 1em 0; 1134 | } 1135 | 1136 | .pricing--palden .pricing__action { 1137 | font-weight: bold; 1138 | margin: auto 3em 2em 3em; 1139 | padding: 1em 2em; 1140 | color: #fff; 1141 | border-radius: 30px; 1142 | background: #ffae7e; 1143 | -webkit-transition: background-color 0.3s; 1144 | transition: background-color 0.3s; 1145 | } 1146 | 1147 | .pricing--palden .pricing__action:hover, 1148 | .pricing--palden .pricing__action:focus { 1149 | background-color: #f38747; 1150 | } -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-weight: normal; 3 | font-style: normal; 4 | font-family: 'codropsicons'; 5 | src:url('../fonts/codropsicons/codropsicons.eot'); 6 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 7 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 8 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 9 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 10 | } 11 | 12 | *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 13 | .clearfix:before, .clearfix:after {display: table; content: ''; } 14 | .clearfix:after { clear: both; } 15 | 16 | body { 17 | font-family: "Avenir Next", Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; 18 | color: #444; 19 | background: #fff; 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | } 23 | 24 | a { 25 | outline: none; 26 | color: #63f8d3; 27 | text-decoration: none; 28 | } 29 | 30 | a:hover, a:focus { 31 | color: #57d8b8; 32 | } 33 | 34 | .hidden { 35 | position: absolute; 36 | overflow: hidden; 37 | width: 0; 38 | height: 0; 39 | pointer-events: none; 40 | } 41 | 42 | /* Content */ 43 | .content { 44 | padding: 3em 0; 45 | } 46 | 47 | .intro { 48 | padding: 1em; 49 | max-width: 1000px; 50 | text-align: center; 51 | font-size: 2em; 52 | } 53 | 54 | .codrops-header, 55 | .pricing-section { 56 | min-height: 100vh; 57 | display: -webkit-flex; 58 | display: flex; 59 | -webkit-flex-direction: column; 60 | flex-direction: column; 61 | -webkit-justify-content: center; 62 | justify-content: center; 63 | -webkit-align-items: center; 64 | align-items: center; 65 | } 66 | 67 | .pricing-section { 68 | padding: 2em 0 8em; 69 | min-height: 100vh; 70 | position: relative; 71 | } 72 | 73 | .pricing-section__title { 74 | font-size: 1.4em; 75 | font-weight: 700; 76 | margin: 3em 0 5em; 77 | flex: none; 78 | } 79 | 80 | .pricing-section a { 81 | color: #333; 82 | } 83 | 84 | .pricing-section a:hover, 85 | .pricing-section a:focus { 86 | color: #000; 87 | } 88 | 89 | /* Header */ 90 | .codrops-header { 91 | padding: 2em 1em 4em; 92 | color: #fff; 93 | height: 100vh; 94 | min-height: 500px; 95 | text-align: center; 96 | background: #2C292F url(../img/mouse.svg) no-repeat left 50% bottom 40px; 97 | } 98 | 99 | .codrops-header h1 { 100 | margin: 0.5em 0 0; 101 | letter-spacing: -1px; 102 | font-size: 4em; 103 | line-height: 1; 104 | } 105 | 106 | .codrops-header h1 span { 107 | font-weight: normal; 108 | display: block; 109 | margin: 0.5em 0; 110 | font-size: 50%; 111 | letter-spacing: 0; 112 | color: #d2d5d4; 113 | } 114 | 115 | /* Top Navigation Style */ 116 | .codrops-links { 117 | position: relative; 118 | display: inline-block; 119 | text-align: center; 120 | white-space: nowrap; 121 | } 122 | 123 | .codrops-links::after { 124 | position: absolute; 125 | top: 0; 126 | left: 50%; 127 | width: 1px; 128 | height: 100%; 129 | background: rgba(255,255,255,0.2); 130 | content: ''; 131 | -webkit-transform: rotate3d(0,0,1,22.5deg); 132 | transform: rotate3d(0,0,1,22.5deg); 133 | } 134 | 135 | .codrops-icon { 136 | display: inline-block; 137 | margin: 0.5em; 138 | padding: 0em 0; 139 | width: 1.5em; 140 | text-decoration: none; 141 | } 142 | 143 | .codrops-icon span { 144 | display: none; 145 | } 146 | 147 | .codrops-icon:before { 148 | margin: 0 5px; 149 | text-transform: none; 150 | font-weight: normal; 151 | font-style: normal; 152 | font-variant: normal; 153 | font-family: 'codropsicons'; 154 | line-height: 1; 155 | speak: none; 156 | -webkit-font-smoothing: antialiased; 157 | } 158 | 159 | .codrops-icon--drop:before { 160 | content: "\e001"; 161 | } 162 | 163 | .codrops-icon--prev:before { 164 | content: "\e004"; 165 | } 166 | 167 | /* Demo links */ 168 | .codrops-demos { 169 | margin: 2em 0 0; 170 | } 171 | 172 | .codrops-demos a { 173 | display: inline-block; 174 | margin: 0 0.5em; 175 | } 176 | 177 | .codrops-demos a.current-demo { 178 | color: #333; 179 | } 180 | 181 | .bg-1 { 182 | background: #1B1A1C; 183 | background-size: cover; 184 | color: #fff; 185 | } 186 | 187 | .bg-2 { 188 | background: #333 url(../img/blackboard.jpg) no-repeat center center; 189 | background-size: cover; 190 | color: #fff; 191 | } 192 | 193 | .bg-3 { 194 | color: #fff; 195 | background: #A2E29E; 196 | } 197 | 198 | .bg-4 { 199 | background: #30353c; 200 | color: #4e5154; 201 | } 202 | 203 | .bg-5 { 204 | background: #514B48; 205 | color: #7D746F; 206 | } 207 | 208 | .bg-6 { 209 | background: #1d211f; 210 | color: #6ed19f; 211 | } 212 | 213 | .bg-7 { 214 | color: #C3E9F5; 215 | background: linear-gradient(45deg, #7e67e5, #02cbdf); 216 | } 217 | 218 | .bg-8 { 219 | background: #383e4c; 220 | color: #fff; 221 | } 222 | 223 | .bg-9 { 224 | background: #efb7b7; 225 | color: #382628; 226 | } 227 | 228 | .bg-10 { 229 | color: #eaebed; 230 | } 231 | 232 | .bg-11 { 233 | background: #f7faf9; 234 | } 235 | 236 | .bg-12 { 237 | background: #647df9; 238 | color: #7a90ff; 239 | } 240 | 241 | .bg-12 p { 242 | color: #fff; 243 | text-align: center; 244 | } 245 | 246 | .bg-12 a { 247 | color: #fff; 248 | font-weight: bold; 249 | } 250 | 251 | .bg-12 a:hover, 252 | .bg-12 a:focus { 253 | color: rgba(0,0,0,0.3); 254 | } 255 | 256 | /* Related demos */ 257 | .content--related { 258 | text-align: center; 259 | font-weight: bold; 260 | padding: 10em 1em; 261 | background: #2C292F; 262 | } 263 | 264 | .media-item { 265 | display: inline-block; 266 | padding: 1em; 267 | vertical-align: top; 268 | -webkit-transition: color 0.3s; 269 | transition: color 0.3s; 270 | } 271 | 272 | .media-item__img { 273 | max-width: 100%; 274 | opacity: 0.6; 275 | -webkit-transition: opacity 0.3s; 276 | transition: opacity 0.3s; 277 | } 278 | 279 | .media-item:hover .media-item__img, 280 | .media-item:focus .media-item__img { 281 | opacity: 1; 282 | } 283 | 284 | .media-item__title { 285 | margin: 0; 286 | padding: 0.5em; 287 | font-size: 1em; 288 | } 289 | 290 | @media screen and (max-width: 50em) { 291 | .codrops-header { 292 | padding: 3em 10% 4em; 293 | } 294 | } 295 | 296 | @media screen and (max-width: 40em) { 297 | .codrops-header h1 { 298 | font-size: 2.8em; 299 | } 300 | } 301 | -------------------------------------------------------------------------------- /css/icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'linearicons'; 3 | src:url('../fonts/linearicons/linearicons.eot?56qtge'); 4 | src:url('../fonts/linearicons/linearicons.eot?56qtge#iefix') format('embedded-opentype'), 5 | url('../fonts/linearicons/linearicons.woff2?56qtge') format('woff2'), 6 | url('../fonts/linearicons/linearicons.ttf?56qtge') format('truetype'), 7 | url('../fonts/linearicons/linearicons.woff?56qtge') format('woff'), 8 | url('../fonts/linearicons/linearicons.svg?56qtge#linearicons') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | .icon { 14 | font-family: 'linearicons'; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .icon--home::before { 27 | content: "\e800"; 28 | } 29 | .icon--apartment::before { 30 | content: "\e801"; 31 | } 32 | .icon--pencil::before { 33 | content: "\e802"; 34 | } 35 | .icon--magic-wand::before { 36 | content: "\e803"; 37 | } 38 | .icon--drop::before { 39 | content: "\e804"; 40 | } 41 | .icon--lighter::before { 42 | content: "\e805"; 43 | } 44 | .icon--poop::before { 45 | content: "\e806"; 46 | } 47 | .icon--sun::before { 48 | content: "\e807"; 49 | } 50 | .icon--moon::before { 51 | content: "\e808"; 52 | } 53 | .icon--cloud::before { 54 | content: "\e809"; 55 | } 56 | .icon--cloud-upload::before { 57 | content: "\e80a"; 58 | } 59 | .icon--cloud-download::before { 60 | content: "\e80b"; 61 | } 62 | .icon--cloud-sync::before { 63 | content: "\e80c"; 64 | } 65 | .icon--cloud-check::before { 66 | content: "\e80d"; 67 | } 68 | .icon--database::before { 69 | content: "\e80e"; 70 | } 71 | .icon--lock::before { 72 | content: "\e80f"; 73 | } 74 | .icon--cog::before { 75 | content: "\e810"; 76 | } 77 | .icon--trash::before { 78 | content: "\e811"; 79 | } 80 | .icon--dice::before { 81 | content: "\e812"; 82 | } 83 | .icon--heart::before { 84 | content: "\e813"; 85 | } 86 | .icon--star::before { 87 | content: "\e814"; 88 | } 89 | .icon--star-half::before { 90 | content: "\e815"; 91 | } 92 | .icon--star-empty::before { 93 | content: "\e816"; 94 | } 95 | .icon--flag::before { 96 | content: "\e817"; 97 | } 98 | .icon--envelope::before { 99 | content: "\e818"; 100 | } 101 | .icon--paperclip::before { 102 | content: "\e819"; 103 | } 104 | .icon--inbox::before { 105 | content: "\e81a"; 106 | } 107 | .icon--eye::before { 108 | content: "\e81b"; 109 | } 110 | .icon--printer::before { 111 | content: "\e81c"; 112 | } 113 | .icon--file-empty::before { 114 | content: "\e81d"; 115 | } 116 | .icon--file-add::before { 117 | content: "\e81e"; 118 | } 119 | .icon--enter::before { 120 | content: "\e81f"; 121 | } 122 | .icon--exit::before { 123 | content: "\e820"; 124 | } 125 | .icon--graduation-hat::before { 126 | content: "\e821"; 127 | } 128 | .icon--license::before { 129 | content: "\e822"; 130 | } 131 | .icon--music-note::before { 132 | content: "\e823"; 133 | } 134 | .icon--film-play::before { 135 | content: "\e824"; 136 | } 137 | .icon--camera-video::before { 138 | content: "\e825"; 139 | } 140 | .icon--camera::before { 141 | content: "\e826"; 142 | } 143 | .icon--picture::before { 144 | content: "\e827"; 145 | } 146 | .icon--book::before { 147 | content: "\e828"; 148 | } 149 | .icon--bookmark::before { 150 | content: "\e829"; 151 | } 152 | .icon--user::before { 153 | content: "\e82a"; 154 | } 155 | .icon--users::before { 156 | content: "\e82b"; 157 | } 158 | .icon--shirt::before { 159 | content: "\e82c"; 160 | } 161 | .icon--store::before { 162 | content: "\e82d"; 163 | } 164 | .icon--cart::before { 165 | content: "\e82e"; 166 | } 167 | .icon--tag::before { 168 | content: "\e82f"; 169 | } 170 | .icon--phone-handset::before { 171 | content: "\e830"; 172 | } 173 | .icon--phone::before { 174 | content: "\e831"; 175 | } 176 | .icon--pushpin::before { 177 | content: "\e832"; 178 | } 179 | .icon--map-marker::before { 180 | content: "\e833"; 181 | } 182 | .icon--map::before { 183 | content: "\e834"; 184 | } 185 | .icon--location::before { 186 | content: "\e835"; 187 | } 188 | .icon--calendar-full::before { 189 | content: "\e836"; 190 | } 191 | .icon--keyboard::before { 192 | content: "\e837"; 193 | } 194 | .icon--spell-check::before { 195 | content: "\e838"; 196 | } 197 | .icon--screen::before { 198 | content: "\e839"; 199 | } 200 | .icon--smartphone::before { 201 | content: "\e83a"; 202 | } 203 | .icon--tablet::before { 204 | content: "\e83b"; 205 | } 206 | .icon--laptop::before { 207 | content: "\e83c"; 208 | } 209 | .icon--laptop-phone::before { 210 | content: "\e83d"; 211 | } 212 | .icon--power-switch::before { 213 | content: "\e83e"; 214 | } 215 | .icon--bubble::before { 216 | content: "\e83f"; 217 | } 218 | .icon--heart-pulse::before { 219 | content: "\e840"; 220 | } 221 | .icon--construction::before { 222 | content: "\e841"; 223 | } 224 | .icon--pie-chart::before { 225 | content: "\e842"; 226 | } 227 | .icon--chart-bars::before { 228 | content: "\e843"; 229 | } 230 | .icon--gift::before { 231 | content: "\e844"; 232 | } 233 | .icon--diamond::before { 234 | content: "\e845"; 235 | } 236 | .icon--linearicons::before { 237 | content: "\e846"; 238 | } 239 | .icon--dinner::before { 240 | content: "\e847"; 241 | } 242 | .icon--coffee-cup::before { 243 | content: "\e848"; 244 | } 245 | .icon--leaf::before { 246 | content: "\e849"; 247 | } 248 | .icon--paw::before { 249 | content: "\e84a"; 250 | } 251 | .icon--rocket::before { 252 | content: "\e84b"; 253 | } 254 | .icon--briefcase::before { 255 | content: "\e84c"; 256 | } 257 | .icon--bus::before { 258 | content: "\e84d"; 259 | } 260 | .icon--car::before { 261 | content: "\e84e"; 262 | } 263 | .icon--train::before { 264 | content: "\e84f"; 265 | } 266 | .icon--bicycle::before { 267 | content: "\e850"; 268 | } 269 | .icon--wheelchair::before { 270 | content: "\e851"; 271 | } 272 | .icon--select::before { 273 | content: "\e852"; 274 | } 275 | .icon--earth::before { 276 | content: "\e853"; 277 | } 278 | .icon--smile::before { 279 | content: "\e854"; 280 | } 281 | .icon--sad::before { 282 | content: "\e855"; 283 | } 284 | .icon--neutral::before { 285 | content: "\e856"; 286 | } 287 | .icon--mustache::before { 288 | content: "\e857"; 289 | } 290 | .icon--alarm::before { 291 | content: "\e858"; 292 | } 293 | .icon--bullhorn::before { 294 | content: "\e859"; 295 | } 296 | .icon--volume-high::before { 297 | content: "\e85a"; 298 | } 299 | .icon--volume-medium::before { 300 | content: "\e85b"; 301 | } 302 | .icon--volume-low::before { 303 | content: "\e85c"; 304 | } 305 | .icon--volume::before { 306 | content: "\e85d"; 307 | } 308 | .icon--mic::before { 309 | content: "\e85e"; 310 | } 311 | .icon--hourglass::before { 312 | content: "\e85f"; 313 | } 314 | .icon--undo::before { 315 | content: "\e860"; 316 | } 317 | .icon--redo::before { 318 | content: "\e861"; 319 | } 320 | .icon--sync::before { 321 | content: "\e862"; 322 | } 323 | .icon--history::before { 324 | content: "\e863"; 325 | } 326 | .icon--clock::before { 327 | content: "\e864"; 328 | } 329 | .icon--download::before { 330 | content: "\e865"; 331 | } 332 | .icon--upload::before { 333 | content: "\e866"; 334 | } 335 | .icon--enter-down::before { 336 | content: "\e867"; 337 | } 338 | .icon--exit-up::before { 339 | content: "\e868"; 340 | } 341 | .icon--bug::before { 342 | content: "\e869"; 343 | } 344 | .icon--code::before { 345 | content: "\e86a"; 346 | } 347 | .icon--link::before { 348 | content: "\e86b"; 349 | } 350 | .icon--unlink::before { 351 | content: "\e86c"; 352 | } 353 | .icon--thumbs-up::before { 354 | content: "\e86d"; 355 | } 356 | .icon--thumbs-down::before { 357 | content: "\e86e"; 358 | } 359 | .icon--magnifier::before { 360 | content: "\e86f"; 361 | } 362 | .icon--cross::before { 363 | content: "\e870"; 364 | } 365 | .icon--menu::before { 366 | content: "\e871"; 367 | } 368 | .icon--list::before { 369 | content: "\e872"; 370 | } 371 | .icon--chevron-up::before { 372 | content: "\e873"; 373 | } 374 | .icon--chevron-down::before { 375 | content: "\e874"; 376 | } 377 | .icon--chevron-left::before { 378 | content: "\e875"; 379 | } 380 | .icon--chevron-right::before { 381 | content: "\e876"; 382 | } 383 | .icon--arrow-up::before { 384 | content: "\e877"; 385 | } 386 | .icon--arrow-down::before { 387 | content: "\e878"; 388 | } 389 | .icon--arrow-left::before { 390 | content: "\e879"; 391 | } 392 | .icon--arrow-right::before { 393 | content: "\e87a"; 394 | } 395 | .icon--move::before { 396 | content: "\e87b"; 397 | } 398 | .icon--warning::before { 399 | content: "\e87c"; 400 | } 401 | .icon--question-circle::before { 402 | content: "\e87d"; 403 | } 404 | .icon--menu-circle::before { 405 | content: "\e87e"; 406 | } 407 | .icon--checkmark-circle::before { 408 | content: "\e87f"; 409 | } 410 | .icon--cross-circle::before { 411 | content: "\e880"; 412 | } 413 | .icon--plus-circle::before { 414 | content: "\e881"; 415 | } 416 | .icon--circle-minus::before { 417 | content: "\e882"; 418 | } 419 | .icon--arrow-up-circle::before { 420 | content: "\e883"; 421 | } 422 | .icon--arrow-down-circle::before { 423 | content: "\e884"; 424 | } 425 | .icon--arrow-left-circle::before { 426 | content: "\e885"; 427 | } 428 | .icon--arrow-right-circle::before { 429 | content: "\e886"; 430 | } 431 | .icon--chevron-up-circle::before { 432 | content: "\e887"; 433 | } 434 | .icon--chevron-down-circle::before { 435 | content: "\e888"; 436 | } 437 | .icon--chevron-left-circle::before { 438 | content: "\e889"; 439 | } 440 | .icon--chevron-right-circle::before { 441 | content: "\e88a"; 442 | } 443 | .icon--crop::before { 444 | content: "\e88b"; 445 | } 446 | .icon--frame-expand::before { 447 | content: "\e88c"; 448 | } 449 | .icon--frame-contract::before { 450 | content: "\e88d"; 451 | } 452 | .icon--layers::before { 453 | content: "\e88e"; 454 | } 455 | .icon--funnel::before { 456 | content: "\e88f"; 457 | } 458 | .icon--text-format::before { 459 | content: "\e890"; 460 | } 461 | .icon--text-format-remove::before { 462 | content: "\e891"; 463 | } 464 | .icon--text-size::before { 465 | content: "\e892"; 466 | } 467 | .icon--bold::before { 468 | content: "\e893"; 469 | } 470 | .icon--italic::before { 471 | content: "\e894"; 472 | } 473 | .icon--underline::before { 474 | content: "\e895"; 475 | } 476 | .icon--strikethrough::before { 477 | content: "\e896"; 478 | } 479 | .icon--highlight::before { 480 | content: "\e897"; 481 | } 482 | .icon--text-align-left::before { 483 | content: "\e898"; 484 | } 485 | .icon--text-align-center::before { 486 | content: "\e899"; 487 | } 488 | .icon--text-align-right::before { 489 | content: "\e89a"; 490 | } 491 | .icon--text-align-justify::before { 492 | content: "\e89b"; 493 | } 494 | .icon--line-spacing::before { 495 | content: "\e89c"; 496 | } 497 | .icon--indent-increase::before { 498 | content: "\e89d"; 499 | } 500 | .icon--indent-decrease::before { 501 | content: "\e89e"; 502 | } 503 | .icon--pilcrow::before { 504 | content: "\e89f"; 505 | } 506 | .icon--direction-ltr::before { 507 | content: "\e8a0"; 508 | } 509 | .icon--direction-rtl::before { 510 | content: "\e8a1"; 511 | } 512 | .icon--page-break::before { 513 | content: "\e8a2"; 514 | } 515 | .icon--sort-alpha-asc::before { 516 | content: "\e8a3"; 517 | } 518 | .icon--sort-amount-asc::before { 519 | content: "\e8a4"; 520 | } 521 | .icon--hand::before { 522 | content: "\e8a5"; 523 | } 524 | .icon--pointer-up::before { 525 | content: "\e8a6"; 526 | } 527 | .icon--pointer-right::before { 528 | content: "\e8a7"; 529 | } 530 | .icon--pointer-down::before { 531 | content: "\e8a8"; 532 | } 533 | .icon--pointer-left::before { 534 | content: "\e8a9"; 535 | } 536 | 537 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/favicon.ico -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/linearicons/linearicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/fonts/linearicons/linearicons.eot -------------------------------------------------------------------------------- /fonts/linearicons/linearicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/fonts/linearicons/linearicons.ttf -------------------------------------------------------------------------------- /fonts/linearicons/linearicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/fonts/linearicons/linearicons.woff -------------------------------------------------------------------------------- /fonts/linearicons/linearicons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/fonts/linearicons/linearicons.woff2 -------------------------------------------------------------------------------- /img/blackboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/img/blackboard.jpg -------------------------------------------------------------------------------- /img/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/img/line.png -------------------------------------------------------------------------------- /img/mouse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /img/related/ArrowNavigationEffects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/img/related/ArrowNavigationEffects.png -------------------------------------------------------------------------------- /img/related/CheckoutConcepts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/img/related/CheckoutConcepts.png -------------------------------------------------------------------------------- /img/stamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/PricingTablesInspiration/fe2e466036732bbaaa396141a74ab187eae8e573/img/stamp.png -------------------------------------------------------------------------------- /img/waves.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12 | 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Inspiration for Pricing Tables | Codrops 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 28 | 29 | 30 | 31 |
32 |
33 |
34 | Previous Demo 35 | Back to the Codrops article 36 |
37 |

Inspiration for Pricing Tables

38 |
39 |
40 |

Pricing tables are an essential component on websites where digital services are offered. While there seems to be a common pattern, there are infinite styling possibilities. 41 |
42 |
Let's explore some today.

43 |
44 |
45 |

Sonam

46 |
47 |
48 |

Startup

49 |
$9.90
50 |

Small business solution

51 |
    52 |
  • Unlimited calls
    • 53 |
  • Free hosting
    • 54 |
  • 40MB of storage space
    • 55 |
56 | 57 |
58 |
59 |

Standard

60 |
$29,90
61 |

Medium business solution

62 |
    63 |
  • Unlimited calls
    • 64 |
  • Free hosting
    • 65 |
  • 10 hours of support
    • 66 |
  • Social media integration
    • 67 |
  • 1GB of storage space
    • 68 |
69 | 70 |
71 |
72 |

Professional

73 |
$59,90
74 |

Gigantic business solution

75 |
    76 |
  • Unlimited calls
    • 77 |
  • Free hosting
    • 78 |
  • Unlimited hours of support
    • 79 |
  • Social media integration
    • 80 |
  • Anaylitcs integration
    • 81 |
  • Unlimited storage space
    • 82 |
83 | 84 |
85 |
86 |
87 |
88 |

Jinpa

89 |
90 |
91 |

Startup

92 |
$9.90
93 |

Small business solution

94 |
    95 |
  • Unlimited calls
    • 96 |
  • Free hosting
    • 97 |
  • 40MB of storage space
    • 98 |
99 | 100 |
101 |
102 |

Medium

103 |
$29,90
104 |

Medium business solution

105 |
    106 |
  • Unlimited calls
    • 107 |
  • Free hosting
    • 108 |
  • 10 hours of support
    • 109 |
  • Social media integration
    • 110 |
  • 1GB of storage space
    • 111 |
112 | 113 |
114 |
115 |

Large

116 |
$59,90
117 |

Gigantic business solution

118 |
    119 |
  • Unlimited calls
    • 120 |
  • Free hosting
    • 121 |
  • Unlimited hours of support
    • 122 |
  • Social media integration
    • 123 |
  • Anaylitcs integration
    • 124 |
  • Unlimited storage space
    • 125 |
126 | 127 |
128 |
129 |
130 |
131 |

Tenzin

132 |
133 |
134 |

Freelancer

135 |
$9.90
136 |

Perfect for single freelancers who work by themselves

137 |
    138 |
  • Support forum
    • 139 |
  • Free hosting
    • 140 |
  • 40MB of storage space
    • 141 |
142 | 143 |
144 |
145 |

Small business

146 |
$29,90
147 |

Suitable for small businesses with up to 5 employees

148 |
    149 |
  • Unlimited calls
    • 150 |
  • Free hosting
    • 151 |
  • 10 hours of support
    • 152 |
  • Social media integration
    • 153 |
  • 1GB of storage space
    • 154 |
155 | 156 |
157 |
158 |

Larger business

159 |
$59,90
160 |

Great for large businesses with more than 5 employees

161 |
    162 |
  • Unlimited calls
    • 163 |
  • Free hosting
    • 164 |
  • Unlimited hours of support
    • 165 |
  • Social media integration
    • 166 |
  • Anaylitcs integration
    • 167 |
  • Unlimited storage space
    • 168 |
169 | 170 |
171 |
172 |
173 |
174 |

Yama

175 |
176 |
177 |

Cafés & Nightclubs

178 |

Perfect for a café or bar

179 |
$199/month
180 |
    181 |
  • Up to 5 employees
    • 182 |
  • Support at $25/hour
    • 183 |
  • Small social media package
    • 184 |
185 | 186 |
187 |
188 |

Diners & Restaurants

189 |

Great for restaurant owners

190 |
$350/month
191 |
    192 |
  • Up to 15 employees
    • 193 |
  • Free support
    • 194 |
  • Full social media package
    • 195 |
196 | 197 |
198 |
199 |

BBs & Pensions

200 |

Suitable for BBs and Pensions

201 |
$899/month
202 |
    203 |
  • Unlimited employees
    • 204 |
  • Free support
    • 205 |
  • Full social media package
    • 206 |
207 | 208 |
209 |
210 |
211 |
212 |

Rabten

213 |
214 |
215 |
216 |

Individuals

217 |

Single user license

218 |
219 | 220 | $9 221 | 222 | 223 | per year 224 | 225 |
226 |
    227 |
  • 1 GB of space
    • 228 |
  • Support at $25/hour
    • 229 |
  • Small social media package
    • 230 |
231 | 232 |
233 |
234 |
235 |

Small Team

236 |

Up to 5 users

237 |
238 | 239 | $79 240 | 241 | 242 | per year 243 | 244 |
245 |
    246 |
  • 5 GB of space
    • 247 |
  • Free support
    • 248 |
  • Full social media package
    • 249 |
250 | 251 |
252 |
253 |
254 |

Organization

255 |

Unlimited users

256 |
257 | 258 | $499 259 | 260 | 261 | per year 262 | 263 |
264 |
    265 |
  • Unlimited space
    • 266 |
  • Free support
    • 267 |
  • Full social media package
    • 268 |
269 | 270 |
271 |
272 |
273 |
274 |

Pema

275 |
276 |
277 |

Basic

278 |

For freelancers

279 |
$19/ month
280 |
    281 |
  • 10 presentations/month
    • 282 |
  • Support at $25/hour
    • 283 |
  • 1 campaign/month
    • 284 |
285 | 286 |
287 |
288 |

Standard

289 |

For medium sized teams

290 |
$29/ month
291 |
    292 |
  • 50 presentations/month
    • 293 |
  • 5 hours of free support
    • 294 |
  • 10 campaigns/month
    • 295 |
296 | 297 |
298 |
299 |

Enterprise

300 |

For large companies

301 |
$79/ month
302 |
    303 |
  • Unlimited presentations
    • 304 |
  • Unlimited support
    • 305 |
  • Unlimited campaigns
    • 306 |
307 | 308 |
309 |
310 |
311 |
312 |

Karma

313 |
314 |
315 |

Basic

316 |

For freelancers

317 |
$19/ month
318 |
    319 |
  • 1 GB of space
    • 320 |
  • Support at $25/hour
    • 321 |
  • Small social media package
    • 322 |
323 | 324 |
325 |
326 |

Standard

327 |

For medium sized teams

328 |
$29/ month
329 |
    330 |
  • 5 GB of space
    • 331 |
  • Free support
    • 332 |
  • Full social media package
    • 333 |
334 | 335 |
336 |
337 |

Enterprise

338 |

For large companies

339 |
$79/ month
340 |
    341 |
  • Unlimited space
    • 342 |
  • Free support
    • 343 |
  • Full social media package
    • 344 |
345 | 346 |
347 |
348 |

Inspired by Frank Body

349 |

Vintage vector designed by Vilmosv - Freepik.com

350 |
351 |
352 |

Norbu

353 |
354 |
355 |

Beginner Savers

356 |

For people who are starting out in the water saving business

357 |
$19/ month
358 |
    359 |
  • Free water saving e-book
    • 360 |
  • Free access to forums
    • 361 |
  • Beginners tips
    • 362 |
363 | 364 |
365 |
366 |

Advanced Savers

367 |

For experienced water savers who'd like to push their limits

368 |
$29/ month
369 |
    370 |
  • Free water saving e-book
    • 371 |
  • Free access to forums
    • 372 |
  • Advanced saving tips
    • 373 |
374 | 375 |
376 |
377 |

Pro Savers

378 |

For all the professionals who'd like to educate others, too

379 |
$79/ month
380 |
    381 |
  • Access to all books
    • 382 |
  • Unlimited board topics
    • 383 |
  • Beginners tips
    • 384 |
385 | 386 |
387 |
388 |
389 |
390 |

Dawa

391 |
392 |
393 |

Amateur

394 |

For complete newbies

395 |
$9/ month
396 |
    397 |
  • 2 free lessons
    • 398 |
  • Free forum access
    • 399 |
  • Crowd coaching
    • 400 |
401 | 402 |
403 |
404 |

Student

405 |

For the aspiring chefs

406 |
$29/ month
407 |
    408 |
  • 10 free lessons
    • 409 |
  • Free forum access
    • 410 |
  • Private coach
    • 411 |
412 | 413 |
414 |
415 |

Chef

416 |

For professional chefs

417 |
$79/ month
418 |
    419 |
  • Unlimited free lessons
    • 420 |
  • Free forum access
    • 421 |
  • Private coaches
    • 422 |
423 | 424 |
425 |
426 |
427 |
428 |

Yonten

429 |
430 |
431 |
432 |

Beginner

433 |
$9/ month
434 |
    435 |
  • 1 GB of space
    • 436 |
  • Unlimited traffic
    • 437 |
  • Forum access
    • 438 |
  • Support at $25/hour
    • 439 |
440 | 441 |
442 |
443 |
444 |

Advanced

445 |
$259/ year
446 |
    447 |
  • 5 GB of space
    • 448 |
  • Unlimited traffic
    • 449 |
  • Forum access
    • 450 |
  • Support at $5/hour
    • 451 |
452 | 453 |
454 |
455 |
456 |

Professional

457 |
$699/ year
458 |
    459 |
  • 20 GB of space
    • 460 |
  • Unlimited traffic
    • 461 |
  • Forum access
    • 462 |
  • Free support
    • 463 |
464 | 465 |
466 |
467 |
468 |
469 |

Tashi

470 |
471 |
472 |

Startup

473 |

Perfect for small startups that have less than 10 team members

474 |
$19/ month
475 |
    476 |
  • 1 GB of space
    • 477 |
  • Support at $25/hour
    • 478 |
  • Small social media package
    • 479 |
480 | 481 |
482 |
483 |

Medium

484 |

Suitable for medium-sized businesses with up to 30 employees

485 |
$199/ month
486 |
    487 |
  • 5 GB of space
    • 488 |
  • Support at $5/hour
    • 489 |
  • Medium social media package
    • 490 |
491 | 492 |
493 |
494 |

Pro

495 |

For any large corporation with an unlimited number of members

496 |
$499/ month
497 |
    498 |
  • Unlimited space
    • 499 |
  • 20 hours of free support
    • 500 |
  • Full social media package
    • 501 |
502 | 503 |
504 |
505 |
506 |
507 |

Palden

508 |
509 |
510 |
511 | 512 | 514 | 516 | 518 | 520 | 521 |
$29/ mo
522 |

Freelance

523 |
524 |
    525 |
  • 1 GB of space
    • 526 |
  • Support at $25/hour
    • 527 |
  • Limited cloud access
    • 528 |
529 | 530 |
531 |
532 |
533 | 534 | 536 | 538 | 540 | 542 | 543 |
$59/ mo
544 |

Business

545 |
546 |
    547 |
  • 5 GB of space
    • 548 |
  • Support at $5/hour
    • 549 |
  • Full cloud access
    • 550 |
551 | 552 |
553 |
554 |
555 | 556 | 558 | 560 | 562 | 564 | 565 |
$99/ mo
566 |

Enterprise

567 |
568 |
    569 |
  • 10 GB of space
    • 570 |
  • Support at $5/hour
    • 571 |
  • Full cloud access
    • 572 |
573 | 574 |
575 |
576 |

Based on Daily Design 007 - Pricing Table by Mackenzie Child

577 |
578 | 579 |
580 |

If you enjoyed this demo you might also like:

581 | 582 | 583 |

Checkout Concepts

584 | 585 | 586 | 587 |

Arrow Navigation Styles

588 | 589 |
590 |
591 | 592 | 593 | 594 | 595 | --------------------------------------------------------------------------------