To keep my basic under construction landing page safe.

style.css 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. font-size: 100%;
  6. font: inherit;
  7. vertical-align: baseline;
  8. }
  9. /* HTML5 display-role reset for older browsers */
  10. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
  11. body { line-height: 1 }
  12. ol, ul { list-style: none }
  13. blockquote, q { quotes: none }
  14. blockquote:before, blockquote:after, q:before, q:after {
  15. content: '';
  16. content: none;
  17. }
  18. table {
  19. border-collapse: collapse;
  20. border-spacing: 0;
  21. }
  22. html, body { height: 100% }
  23. body {
  24. font-family: 'Open Sans', sans-serif;
  25. overflow-x: hidden;
  26. background-color: lightgrey;
  27. }
  28. :focus { outline: 0 }
  29. .rocket {
  30. float: right;
  31. padding-right: 0;
  32. width: 50%;
  33. box-sizing: border-box;
  34. text-align: center;
  35. }
  36. @-webkit-keyframes thumb {
  37. 0% { -webkit-transform: scale(1) }
  38. 50% { -webkit-transform: scale(0.9) }
  39. 100% { -webkit-transform: scale(1) }
  40. }
  41. .rocket img:hover {
  42. webkit-animation-name: thumb;
  43. -webkit-animation-duration: 200ms;
  44. -webkit-transform-origin: 50% 50%;
  45. -webkit-animation-iteration-count: 2;
  46. -webkit-animation-timing-function: linear;
  47. }
  48. .launchpad {
  49. overflow: visible;
  50. }
  51. .launchpad img {
  52. margin-top: -7em;
  53. display: block;
  54. }
  55. body {
  56. margin: 0;
  57. padding: 0;
  58. font-family: 'Exo 2', sans-serif;
  59. text-transform: uppercase;
  60. color: #5c5c5c;
  61. background-image: url(bgpattern.png);
  62. }
  63. ol, ul {
  64. list-style: none;
  65. margin-left: 0;
  66. }
  67. h1 {
  68. font-weight: 700;
  69. font-size: 2rem;
  70. margin: 1em 0;
  71. color: #ff0000;
  72. text-decoration: none;
  73. }
  74. .page {
  75. width: 1002px;
  76. position: relative;
  77. margin: 0 auto;
  78. }
  79. #block-text { margin-top: 5em }
  80. #block {
  81. height: 100%;
  82. display: block;
  83. min-height: 180px;
  84. max-width: 500px;
  85. float: left;
  86. }
  87. p { margin: 0 }
  88. .text {
  89. display: block;
  90. font-size: 24px;
  91. padding-top: 10px;
  92. font-weight: 600;
  93. line-height: 1.2;
  94. margin-bottom: 40px;
  95. }
  96. #footer_area {
  97. width: 100%;
  98. clear: both;
  99. padding-right: 30px;
  100. text-align: right;
  101. }
  102. .footer1 {
  103. background: url('fbg.png') repeat;
  104. min-height: 85px;
  105. }
  106. .footer2 {
  107. background: url('fbg2.png') repeat;
  108. height: 34px;
  109. }
  110. .text a {
  111. color: #333333;
  112. text-decoration: none;
  113. }
  114. #footer a { padding: 2px }
  115. .text a:hover { color: #FE6514 }
  116. .finish-mss { font-size: 24px }
  117. .footer-copyright { color: white; padding-top: 10px; }
  118. .footer-copyright a { color: greenyellow; }
  119. .footer-copyright a:hover { color: #922C01 }
  120. /*-----------------------------------------[ 996 ]-------------------------------------*/
  121. @media screen and (max-width:996px) {
  122. .page { width: 95% }
  123. .launchpad { width: 100%; }
  124. .block { width: 550px }
  125. }
  126. @media screen and (min-width:996px) {
  127. .rocket {
  128. padding-top: 56px;
  129. padding-right: 80px;
  130. }
  131. }
  132. /*-----------------------------------------[ 768 ]-------------------------------------*/
  133. @media screen and (max-width:768px) {
  134. #block {
  135. display: block;
  136. overflow: hidden;
  137. max-height: 220px;
  138. width: 100%;
  139. float: none;
  140. margin: 0 auto 1.6em auto;
  141. }
  142. .rocket {
  143. width: 100%;
  144. max-width: 100%;
  145. padding-top: -150px !important;
  146. padding-left: 60px;
  147. }
  148. #block-text {
  149. margin-bottom: 7.8em;
  150. margin-top: 30px;
  151. }
  152. .block { width: 500px }
  153. .footer { display: none; }
  154. }
  155. /*-----------------------------------------[ 480 ]-------------------------------------*/
  156. @media screen and (max-width:480px) {
  157. .text { font-size: 20px }
  158. #block-text {
  159. margin: 4em 0 !important;
  160. padding: 0 0 3em;
  161. }
  162. /*-----------------------------------------[ 320 ]-------------------------------------*/
  163. @media screen and (max-width:320px) {
  164. #block-text { margin: 3em 0!important }
  165. .text { font-size: 170% }
  166. }