site.css 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. @import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,600);
  2. * {
  3. box-sizing: border-box;
  4. }
  5. html, body {
  6. margin: 0;
  7. padding: 0;
  8. height: 100%;
  9. font-family: 'Open Sans';
  10. }
  11. body {
  12. opacity: 0;
  13. transition: all 1s linear;
  14. }
  15. .divider {
  16. height: 150px;
  17. width: 2px;
  18. background-color: #C0C9CE;
  19. position: relative;
  20. top: 50%;
  21. float: left;
  22. transform: translateY(-50%);
  23. }
  24. #background-stats-1 {
  25. background-color: #2196f3;
  26. }
  27. #background-stats-2 {
  28. background-color: #00cbca;
  29. }
  30. #content-container {
  31. z-index: 2;
  32. position: relative;
  33. margin: 0 auto;
  34. display: table;
  35. padding: 10px;
  36. max-width: 940px;
  37. height: 100%;
  38. }
  39. #content-container-center {
  40. display: table-cell;
  41. text-align: center;
  42. vertical-align: middle;
  43. }
  44. #result {
  45. z-index: 3;
  46. position: absolute;
  47. bottom: 40px;
  48. right: 20px;
  49. color: #fff;
  50. opacity: 0.5;
  51. font-size: 45px;
  52. font-weight: 600;
  53. }
  54. #choice {
  55. transition: all 300ms linear;
  56. line-height: 1.3em;
  57. background: #fff;
  58. box-shadow: 10px 0 0 #fff, -10px 0 0 #fff;
  59. vertical-align: middle;
  60. font-size: 40px;
  61. font-weight: 600;
  62. width: 450px;
  63. height: 200px;
  64. }
  65. #choice a {
  66. text-decoration: none;
  67. }
  68. #choice a:hover, #choice a:focus {
  69. outline: 0;
  70. text-decoration: underline;
  71. }
  72. #choice .choice {
  73. width: 49%;
  74. position: relative;
  75. top: 50%;
  76. transform: translateY(-50%);
  77. text-align: left;
  78. padding-left: 50px;
  79. }
  80. #choice .choice .label {
  81. text-transform: uppercase;
  82. }
  83. #choice .choice.dogs {
  84. color: #00cbca;
  85. float: right;
  86. }
  87. #choice .choice.cats {
  88. color: #2196f3;
  89. float: left;
  90. }
  91. #background-stats {
  92. z-index: 1;
  93. height: 100%;
  94. width: 100%;
  95. position: absolute;
  96. }
  97. #background-stats div {
  98. transition: width 400ms ease-in-out;
  99. display: inline-block;
  100. margin-bottom: -4px;
  101. width: 50%;
  102. height: 100%;
  103. }