hf-main.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. .hf-top-img {
  2. text-align: center;
  3. }
  4. .hf-top-img img {
  5. text-align: center;
  6. max-width: 500px;
  7. margin-top: 20px;
  8. }
  9. .hf-travel-voca-content {
  10. margin-bottom: 350px !important;
  11. }
  12. .flash-center {
  13. text-align: center;
  14. }
  15. .flash-center-100-width {
  16. width: 100% !important;
  17. }
  18. .hf-testing-countdown {
  19. display: inline-block;
  20. width: 34px;
  21. height: 34px;
  22. text-align: center;
  23. margin: auto 0px auto auto;
  24. position: absolute;
  25. right: 20px;
  26. top: -20px;
  27. z-index: 40;
  28. }
  29. .hf-testing-body-cover {
  30. /* padding: 30px 0px; */
  31. margin: auto;
  32. width: 100%;
  33. /* min-height: calc(430px + 30px + 30px); */
  34. position: relative;
  35. height: 50px;
  36. width: 50px;
  37. }
  38. .hf-testing-body {
  39. display: flex;
  40. overflow-x: hidden;
  41. overflow-y: auto;
  42. /* height: calc(100vh - 80px); */
  43. /* max-height: calc(430px + 70px + 70px); */
  44. padding: 0px 15px;
  45. }
  46. .hf-testing-container {
  47. position: absolute;
  48. right: 0;
  49. }
  50. .hf-nutrition-row {
  51. height: 580px;
  52. }
  53. .hf-nutrition-box {
  54. height: 45px;
  55. text-align: initial;
  56. margin: auto;
  57. padding-top: 5px;
  58. }
  59. .hf-nutrition-box .box {
  60. width: 90%;
  61. background: lightgray;
  62. border: 0px;
  63. height: 30px;
  64. padding: 0 10px;
  65. }
  66. .hf-nutrition-container {
  67. width: 70%;
  68. margin: auto;
  69. border: 1px solid lightgray;
  70. border-radius: 10px
  71. }
  72. .hf-nutrition-title h4 {
  73. font-weight: 700;
  74. text-align: initial;
  75. }
  76. .hf-butrition-button {
  77. border: 2px solid var(--color-main-blue-light);
  78. background: var(--color-main-blue-light);
  79. color: white;
  80. font-size: 20px;
  81. margin-top: 25px;
  82. border-radius: 10px;
  83. padding: 5px 20px;
  84. }
  85. .hf-butrition-button:hover {
  86. background: lightgray;
  87. color: black;
  88. border: 2px solid lightgray;
  89. }
  90. .hf-row {
  91. padding: 20px;
  92. margin: 30px;
  93. }
  94. .height-number {
  95. height: 800px !important;
  96. }
  97. .red-box {
  98. border: 1px solid red !important;
  99. }
  100. @media (max-width: 767px) {
  101. .hf-travel-voca-content {
  102. margin-bottom: 50px !important;
  103. }
  104. .hf-top-img img {
  105. max-width: 320px;
  106. margin-top: 20px;
  107. margin-left: 0px;
  108. }
  109. .hf-testing-countdown {
  110. right: 0px;
  111. top: -28px;
  112. }
  113. .hf-nutrition-row {
  114. height: 850px;
  115. }
  116. .hf-nutrition-container {
  117. width: 100%;
  118. margin: auto;
  119. border: 1px solid lightgray;
  120. border-radius: 10px
  121. }
  122. .hf-nutrition-box .box {
  123. width: 100%;
  124. }
  125. .hf-row {
  126. padding: 20px;
  127. margin: 0px;
  128. }
  129. .hf-butrition-button {
  130. margin-top: 125px;
  131. }
  132. }