index.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>Oboo Smart Clock</title>
  6. <style type="text/css">
  7. body {
  8. margin: 0;
  9. padding: 0;
  10. font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  11. }
  12. .container {
  13. width: 100%;
  14. height: 100vh;
  15. display: flex;
  16. align-items: center;
  17. justify-content: space-between;
  18. flex-direction: column;
  19. min-height: 680px;
  20. }
  21. .logo {
  22. margin-top: 40px;
  23. width: 200px;
  24. height: 200px;
  25. position: relative;
  26. border: 4em solid transparent;
  27. border-radius: 50%;
  28. background: white;
  29. background-clip: padding-box;
  30. /*padding: 10px;*/
  31. }
  32. .logo::after {
  33. position: absolute;
  34. top: -4em; bottom: -4em;
  35. left: -4em; right: -4em;
  36. content: '';
  37. z-index: -1;
  38. border-radius: 50%;
  39. background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  40. background-size: 400% 400%;
  41. -webkit-animation: Gradient 10s ease infinite;
  42. -moz-animation: Gradient 10s ease infinite;
  43. animation: Gradient 10s ease infinite;
  44. }
  45. @-webkit-keyframes Gradient {
  46. 0% {
  47. background-position: 0% 50%
  48. }
  49. 50% {
  50. background-position: 100% 50%
  51. }
  52. 100% {
  53. background-position: 0% 50%
  54. }
  55. }
  56. @-moz-keyframes Gradient {
  57. 0% {
  58. background-position: 0% 50%
  59. }
  60. 50% {
  61. background-position: 100% 50%
  62. }
  63. 100% {
  64. background-position: 0% 50%
  65. }
  66. }
  67. @keyframes Gradient {
  68. 0% {
  69. background-position: 0% 50%
  70. }
  71. 50% {
  72. background-position: 100% 50%
  73. }
  74. 100% {
  75. background-position: 0% 50%
  76. }
  77. }
  78. .message {
  79. margin-top: 40px;
  80. color: #667189;
  81. text-align: center;
  82. font-size: 20px;
  83. line-height: 1.5;
  84. }
  85. .btn {
  86. color: white;
  87. background-color: #23A6D5;
  88. padding: 15px;
  89. font-size: 16px;
  90. /*height: 80px;*/
  91. border-radius: 30px;
  92. text-decoration: none;
  93. margin-top: 40px;
  94. }
  95. .foot {
  96. margin-bottom: 20px;
  97. }
  98. .foot a{
  99. font-size: 12px;
  100. text-decoration: none;
  101. color: #667189;
  102. margin-left: 30px;
  103. }
  104. .browser.icon {
  105. color: #000;
  106. position: absolute;
  107. margin-left: 2px;
  108. margin-top: 2px;
  109. width: 15px;
  110. height: 15px;
  111. border-radius: 50%;
  112. border: solid 1px currentColor;
  113. }
  114. .browser.icon:before {
  115. content: '';
  116. position: absolute;
  117. left: 1px;
  118. top: 1px;
  119. width: 11px;
  120. height: 11px;
  121. border-radius: 85% 15%;
  122. -webkit-transform: rotate(-45deg);
  123. transform: rotate(-45deg);
  124. border: solid 1px currentColor;
  125. }
  126. .browser.icon:after {
  127. content: '';
  128. position: absolute;
  129. top: 7px;
  130. width: 15px;
  131. height: 1px;
  132. background-color: currentColor;
  133. }
  134. </style>
  135. </head>
  136. <body>
  137. <div class="container">
  138. <div class="logo"></div>
  139. <div class="message">
  140. <p><strong>Welcome to your Oboo Smart Clock</strong>
  141. <br>
  142. <br>
  143. <br>
  144. <a class="btn" href="https://getoboo.com/getstarted">Get Started</a>
  145. <br>
  146. <br>
  147. <br>
  148. </p>
  149. </div>
  150. <div class="foot">
  151. <a href="https://getoboo.com"><div class="browser icon"></div> GetOboo.com</a>
  152. </div>
  153. </div>
  154. </body>
  155. </html>