hf-counter.css 907 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. 
  2. .countdown-container {
  3. display: flex;
  4. width: 100%;
  5. max-width: 70%;
  6. justify-content: space-between;
  7. }
  8. .days-container,
  9. .hours-container,
  10. .minutes-container,
  11. .seconds-container {
  12. display: flex;
  13. flex-direction: column;
  14. align-items: center;
  15. justify-content: center;
  16. background-color: rgba(0,0,0,0.1);
  17. border: 5px solid rgba(255,255,255,0.3);
  18. width: 140px;
  19. height: 140px;
  20. border-radius: 99px;
  21. }
  22. .days,
  23. .hours,
  24. .minutes,
  25. .seconds {
  26. font-size: 2.5em;
  27. margin: 10px 0;
  28. }
  29. .days-label,
  30. .hours-label,
  31. .minutes-label,
  32. .seconds-label {
  33. text-transform: uppercase;
  34. margin-bottom: 5px;
  35. }
  36. @media (max-width: 800px) {
  37. .countdown-container {
  38. max-width: 90%;
  39. }
  40. .days-container,
  41. .hours-container,
  42. .minutes-container,
  43. .seconds-container {
  44. font-size: 0.8em;
  45. width: 100px;
  46. height: 100px;
  47. }
  48. }