style.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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. }