inside.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Awesomeness inside!</title>
  6. <style type="text/css">
  7. body {
  8. background-color: #2f3242;
  9. }
  10. a {
  11. text-decoration: none;
  12. color: #FFFFFF;
  13. }
  14. svg {
  15. position: absolute;
  16. top: 50%;
  17. left: 50%;
  18. margin-top: -250px;
  19. margin-left: -400px;
  20. }
  21. .message-box {
  22. height: 200px;
  23. width: 380px;
  24. position: absolute;
  25. top: 50%;
  26. left: 50%;
  27. margin-top: -100px;
  28. margin-left: 50px;
  29. color: #fff;
  30. font-family: sans-serif;
  31. font-weight: 300;
  32. }
  33. .message-box h1 {
  34. font-size: 60px;
  35. line-height: 46px;
  36. margin-bottom: 40px;
  37. }
  38. .buttons-con .action-link-wrap {
  39. margin-top: 40px;
  40. }
  41. .buttons-con .action-link-wrap a {
  42. background: #68c950;
  43. padding: 8px 25px;
  44. border-radius: 4px;
  45. color: #fff;
  46. font-weight: bold;
  47. font-size: 14px;
  48. transition: all 0.3s linear;
  49. cursor: pointer;
  50. text-decoration: none;
  51. margin-right: 10px;
  52. }
  53. .buttons-con .action-link-wrap a:hover {
  54. background: #5a5c6c;
  55. color: #fff;
  56. }
  57. #Polygon-1,
  58. #Polygon-2,
  59. #Polygon-3,
  60. #Polygon-4,
  61. #Polygon-4,
  62. #Polygon-5 {
  63. animation: float 1s infinite ease-in-out alternate;
  64. }
  65. #Polygon-2 {
  66. animation-delay: 0.2s;
  67. }
  68. #Polygon-3 {
  69. animation-delay: 0.4s;
  70. }
  71. #Polygon-4 {
  72. animation-delay: 0.6s;
  73. }
  74. #Polygon-5 {
  75. animation-delay: 0.8s;
  76. }
  77. @keyframes float {
  78. 100% {
  79. transform: translateY(20px);
  80. }
  81. }
  82. @media (max-width: 450px) {
  83. svg {
  84. position: absolute;
  85. top: 50%;
  86. left: 50%;
  87. margin-top: -250px;
  88. margin-left: -190px;
  89. }
  90. .message-box {
  91. top: 50%;
  92. left: 50%;
  93. margin-top: -100px;
  94. margin-left: -190px;
  95. text-align: center;
  96. }
  97. }
  98. </style>
  99. </head>
  100. <body>
  101. <svg width="380px" height="500px" viewBox="0 0 837 1045" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  102. <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
  103. <path d="M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z" id="Polygon-1" stroke="#007FB2" stroke-width="6" sketch:type="MSShapeGroup"></path>
  104. <path d="M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z" id="Polygon-2" stroke="#EF4A5B" stroke-width="6" sketch:type="MSShapeGroup"></path>
  105. <path d="M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z" id="Polygon-3" stroke="#795D9C" stroke-width="6" sketch:type="MSShapeGroup"></path>
  106. <path d="M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z" id="Polygon-4" stroke="#F2773F" stroke-width="6" sketch:type="MSShapeGroup"></path>
  107. <path d="M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z" id="Polygon-5" stroke="#36B455" stroke-width="6" sketch:type="MSShapeGroup"></path>
  108. </g>
  109. </svg>
  110. <div class="message-box">
  111. <h1><a href="billing/">Ubilling</a></h1>
  112. <p>The path to awesomeness</p>
  113. <div class="buttons-con">
  114. <div class="action-link-wrap">
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </body>
  120. </html>