coming-soon.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /*========================================
  2. COMING-SOON PAGE STYLE
  3. =========================================*/
  4. .align-items-center {
  5. height: 100vh;
  6. }
  7. .coming-content {
  8. text-align: center;
  9. }
  10. .coming-title {
  11. font-weight: 700;
  12. font-style: italic;
  13. letter-spacing: -0.5px;
  14. text-transform: uppercase;
  15. margin-bottom: 45px;
  16. }
  17. .coming-clock {
  18. margin-bottom: 40px;
  19. padding-bottom: 40px;
  20. border-bottom: 1px solid var(--gray-chalk);
  21. }
  22. .coming-subtitle {
  23. font-weight: 400;
  24. margin-bottom: 30px;
  25. text-transform: uppercase;
  26. }
  27. .coming-form {
  28. display: -webkit-box;
  29. display: -ms-flexbox;
  30. display: flex;
  31. -webkit-box-align: center;
  32. -ms-flex-align: center;
  33. align-items: center;
  34. -webkit-box-pack: center;
  35. -ms-flex-pack: center;
  36. justify-content: center;
  37. margin-bottom: 25px;
  38. }
  39. .coming-form input {
  40. width: 400px;
  41. height: 50px;
  42. padding: 0px 25px;
  43. border-radius: 50px;
  44. background: var(--white);
  45. -webkit-box-shadow: var(--primary-bshadow);
  46. box-shadow: var(--primary-bshadow);
  47. }
  48. .coming-form button {
  49. margin-left: 15px;
  50. }
  51. .coming-form button i {
  52. width: 50px;
  53. height: 50px;
  54. font-size: 22px;
  55. line-height: 50px;
  56. border-radius: 50%;
  57. text-align: center;
  58. display: inline-block;
  59. color: var(--primary);
  60. background: var(--white);
  61. -webkit-box-shadow: var(--primary-bshadow);
  62. box-shadow: var(--primary-bshadow);
  63. transition: all linear .3s;
  64. -webkit-transition: all linear .3s;
  65. -moz-transition: all linear .3s;
  66. -ms-transition: all linear .3s;
  67. -o-transition: all linear .3s;
  68. }
  69. .coming-form button i:hover {
  70. color: var(--white);
  71. background: var(--primary);
  72. }
  73. .coming-social a {
  74. width: 40px;
  75. height: 40px;
  76. font-size: 16px;
  77. line-height: 40px;
  78. border-radius: 50%;
  79. margin: 0px 4px;
  80. text-align: center;
  81. color: var(--primary);
  82. background: var(--white);
  83. text-shadow: var(--primary-tshadow);
  84. -webkit-box-shadow: var(--primary-bshadow);
  85. box-shadow: var(--primary-bshadow);
  86. transition: all linear .3s;
  87. -webkit-transition: all linear .3s;
  88. -moz-transition: all linear .3s;
  89. -ms-transition: all linear .3s;
  90. -o-transition: all linear .3s;
  91. }
  92. .coming-social a:hover {
  93. color: var(--white);
  94. background: var(--primary);
  95. }
  96. @media (max-width: 575px) {
  97. .coming-title {
  98. font-size: 35px;
  99. margin-bottom: 35px;
  100. }
  101. .coming-timer span {
  102. font-size: 25px;
  103. padding: 0px 15px;
  104. }
  105. .coming-timer span small {
  106. font-size: 15px;
  107. }
  108. .coming-form input {
  109. width: 100%;
  110. }
  111. }
  112. @media (max-width: 991px) {
  113. .coming-part {
  114. padding: 50px 0px;
  115. }
  116. .align-items-center {
  117. height: auto;
  118. }
  119. .coming-social {
  120. margin-bottom: 40px;
  121. }
  122. }