Créé dans le cadre du projet de fin d'année de la promo 2018 de CIR2 de l'ISEN Brest/Rennes, le Burger Quizz est une adaptation numérique du jeu télévisé éponyme, plus précisément d'une épreuve spécifique de ce jeu : le "Sel ou Poivre".

game.css 1.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. @keyframes timebar
  2. {
  3. 0%{width: 100%;background-color: #57cc6b;}
  4. 30%{background-color: #57cc6b;}
  5. 40%{background-color: #e3a55c;}
  6. 60%{background-color: #e3a55c;}
  7. 70%{background-color: #cc5757;}
  8. 100%{width: 0;background-color: #cc5757;}
  9. }
  10. div
  11. {
  12. height: 20px;
  13. display: block;
  14. margin: auto;
  15. animation: timebar 5s infinite linear;
  16. }
  17. #navbar li.current:last-child #score {
  18. display:inline;
  19. padding-top:17px;
  20. padding-left:30px;
  21. padding-right:30px;
  22. padding-bottom:18px;
  23. background: #ffab19;
  24. }
  25. #game input[type="submit"]#play {
  26. border:none;
  27. background-color:#09b22b;
  28. color:white;
  29. padding:20px;
  30. font-size:170%;
  31. cursor:pointer;
  32. }
  33. #game {
  34. text-align:center;
  35. }
  36. div#category {
  37. font-size:170%;
  38. font-family:'Lato';
  39. font-weight:300;
  40. margin-top:20px;
  41. }
  42. p#question {
  43. font-size:120%;
  44. }
  45. ul#answers {
  46. padding-left:0px;
  47. }
  48. ul#answers li {
  49. display:inline-block;
  50. background: #b087ff;
  51. width:16%;
  52. padding:20px;
  53. padding-top:38px;
  54. height:42px;
  55. font-size:110%;
  56. color:white;
  57. font-weight:bold;
  58. margin-right:20px;
  59. line-height: 20px;
  60. vertical-align: middle;
  61. cursor: pointer;
  62. }
  63. ul#answers li.good-answer {
  64. background: #57cc6b;
  65. }
  66. ul#answers li.wrong-answer {
  67. background: #cc5757;
  68. }
  69. h2#score {
  70. margin-top: 100px;
  71. font-size:220%;
  72. margin-bottom:10px;
  73. }
  74. p#registerScore, p#conDenied {
  75. width: 40%;
  76. margin: auto;
  77. }
  78. p.success {
  79. padding-top: 30px;
  80. background:#57cc6b;
  81. padding-bottom: 30px;
  82. }
  83. p.error {
  84. padding-top: 30px;
  85. background:#cc5757;
  86. padding-bottom: 30px;
  87. color:white;
  88. }
  89. p#conDenied {
  90. margin-top:70px;
  91. }
  92. @media all and (max-width: 799px) {
  93. ul#answers li {
  94. display:block;
  95. margin:auto;
  96. margin-bottom:10px;
  97. width:80%;
  98. padding-top:15px;
  99. height: 20px;
  100. }
  101. }
  102. @media all and (min-width: 800px) {
  103. ul#answers li:last-child {
  104. margin-right:0px;
  105. }
  106. }