style.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /*
  2. darkblue : #176785;
  3. bluegreen : #499989;
  4. lightgreen: #BED194;
  5. milk : #FFD7AC;
  6. red : #FF534E;
  7. */
  8. html {
  9. }
  10. .container {
  11. width: 100%;
  12. height : 100%;
  13. text-align: center;
  14. display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  15. display: -moz-box; /* Firefox 17- */
  16. display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  17. display: -moz-flex; /* Firefox 18+ */
  18. display: -ms-flexbox; /* IE 10 */
  19. display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  20. justify-content: center;
  21. align-items: center;
  22. flex-direction: column;
  23. background-color: #1B2030;
  24. position: absolute;
  25. top: 0;
  26. bottom: 0;
  27. left: 0;
  28. right: 0;
  29. }
  30. .logo-container{
  31. background-color: white;
  32. }
  33. .hidden_img{
  34. width: 0px;
  35. height: 0px;
  36. visibility: hidden;
  37. }
  38. .progress-num {
  39. font-family: sans-serif;
  40. font-size: 150px;
  41. color:#24293a;
  42. margin-bottom: 0;
  43. }
  44. .hidden{
  45. visibility: hidden;
  46. }
  47. .logo{
  48. width:69px;
  49. height: 77px;
  50. margin-top: -12vh;
  51. margin-bottom: 12vh;
  52. opacity: 0;
  53. -webkit-animation: fadeIn 1s linear 0s forwards, flash 3s linear 1s infinite;
  54. animation: fadeIn 1s linear 0s forwards, flash 3s linear 1s infinite;
  55. }
  56. .sample-pb {
  57. width: 60%;
  58. }
  59. .number-pb .number-pb-shown{
  60. transition: all ease 0.3s;
  61. }