templates/frontend/default/entryRequirements.html.twig line 1

Open in your IDE?
  1. <style>
  2. #entryRequirements{
  3. margin-bottom: 4vw
  4. }
  5. #entryRequirements .success{
  6. background-image:url('{{ asset('images/entry_bg_success.png') }}');
  7. background-size: 100%;
  8. background-position: top;
  9. background-repeat: no-repeat;
  10. background-color: transparent;
  11. width: 95%;
  12. height: 75vw;
  13. position: relative;
  14. margin: auto;
  15. display: none;
  16. }
  17. #entryRequirements .fail{
  18. background-image:url('{{ asset('images/entry_bg_fail.png') }}');
  19. background-size: 100%;
  20. background-position: top;
  21. background-repeat: no-repeat;
  22. background-color: transparent;
  23. width: 95%;
  24. height: 90vw;
  25. position: relative;
  26. margin: auto;
  27. }
  28. #entryRequirements .userPhone {
  29. position: relative;
  30. display: flex;
  31. justify-content: center;
  32. margin-bottom: 5vw;
  33. }
  34. #entryRequirements .success .userPhone {
  35. top: 62.5vw;
  36. left: 13vw
  37. }
  38. #entryRequirements .fail .userPhone {
  39. top: 66.5vw;
  40. left: 13vw
  41. }
  42. #entryRequirements .userPhone span{
  43. font-size: 3.5vw;
  44. color: #333333;
  45. }
  46. #entryRequirements .userStatus{
  47. position: relative;
  48. top: 60vw;
  49. }
  50. #entryRequirements .validUser{
  51. position: relative;
  52. color:#00FFDE;
  53. bottom: 18vw;
  54. font-size: 3vw
  55. }
  56. #entryRequirements .userStatus img {
  57. width: 30%;
  58. }
  59. #entryRequirements .userStatusApplication {
  60. margin-top: 11vw;
  61. }
  63. @media only screen and (min-width: 700px) {
  64. #entryRequirements .success .userPhone{
  65. top: 47vw;
  66. left: 10vw;
  67. }
  68. #entryRequirements .userPhone span{
  69. font-size: 2.5vw;
  70. font-family: 'Noto Sans CJK TC';
  71. font-weight: bold;
  72. }
  73. #entryRequirements .validUser{
  74. bottom: 12vw;
  75. font-size: 2.5vw;
  76. font-family: 'Noto Sans CJK TC';
  77. }
  78. #entryRequirements .success{
  79. height: 55vw;
  80. }
  81. #entryRequirements .fail{
  82. height: 68vw;
  83. }
  84. #entryRequirements .fail .userPhone{
  85. top: 50vw;
  86. left: 10vw;
  87. }
  88. #entryRequirements .userStatus {
  89. top:42vw
  90. }
  91. }
  92. @media only screen and (min-width: 1024px) {
  93. #entryRequirements .success .userPhone{
  94. top: 46.5vw;
  95. left: 10vw;
  96. }
  97. #entryRequirements .fail .userPhone{
  98. top: 49.5vw;
  99. left: 10vw;
  100. }
  101. }
  102. </style>
  104. <div id="entryRequirements">
  105. <div class="success">
  106. <div class="userPhone">
  107. <span></span>
  108. </div>
  109. <div class="userStatus">
  110. <div class="validUser"></div>
  111. </div>
  112. </div>
  113. <div class="fail">
  114. <div class="userPhone">
  115. <span></span>
  116. </div>
  117. <div class="userStatus">
  118. <div class="userStatusApplication">
  119. <a href="{{ applicationPage }}">
  120. <img src="{{ asset('images/login_btn.png')}}"/>
  121. </a>
  122. </div>
  123. </div>
  124. </div>
  125. </div>