style.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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. position: absolute;
  46. bottom: 40px;
  47. right: 20px;
  48. color: #fff;
  49. opacity: 0.5;
  50. font-size: 45px;
  51. font-weight: 600;
  52. }
  53. #choice{
  54. transition: all 300ms linear;
  55. line-height:1.3em;
  56. background:#fff;
  57. box-shadow: 10px 0 0 #fff, -10px 0 0 #fff;
  58. vertical-align:middle;
  59. font-size:40px;
  60. font-weight: 600;
  61. width: 450px;
  62. height: 200px;
  63. }
  64. #choice a{
  65. text-decoration:none;
  66. }
  67. #choice a:hover, #choice a:focus{
  68. outline:0;
  69. text-decoration:underline;
  70. }
  71. #choice .choice{
  72. width: 49%;
  73. position: relative;
  74. top: 50%;
  75. transform: translateY(-50%);
  76. text-align: left;
  77. padding-left: 50px;
  78. }
  79. #choice .choice .label{
  80. text-transform: uppercase;
  81. }
  82. #choice .choice.dogs{
  83. color: #00cbca;
  84. float: right;
  85. }
  86. #choice .choice.cats{
  87. color: #2196f3;
  88. float: left;
  89. }
  90. #background-stats{
  91. z-index:1;
  92. height:100%;
  93. width:100%;
  94. position:absolute;
  95. }
  96. #background-stats div{
  97. transition: width 400ms ease-in-out;
  98. display:inline-block;
  99. margin-bottom:-4px;
  100. width:50%;
  101. height:100%;
  102. }