style.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. html, body {
  2. margin: 0px;
  3. padding: 0px;
  4. font-family: 'Open Sans', sans-serif;
  5. }
  6. a {
  7. color: black;
  8. text-decoration: none;
  9. }
  10. a:hover {
  11. text-decoration: underline;
  12. color: auto;
  13. }
  14. .float-right {
  15. float: right;
  16. }
  17. .shirt-row {
  18. /*height: 160px;*/
  19. width: 768px;
  20. margin: auto;
  21. padding-top: 10px;
  22. /*padding-bottom: 10px;*/
  23. }
  24. .shirt-row img {
  25. width: 192px;
  26. margin: 0px;
  27. padding: 0px;
  28. }
  29. #body-main {
  30. padding-bottom: 65px;
  31. margin-bottom: -65px;
  32. min-height: 100%;
  33. min-width: 768px;
  34. }
  35. #topbar {
  36. width: 100%;
  37. height: 65px;
  38. }
  39. #topbar-info {
  40. padding-top:25px;
  41. padding-right: 35px;
  42. }
  43. #main-banner {
  44. width: 100%;
  45. height: 300px;
  46. background-color: #0B3B51;
  47. }
  48. #centered-banner {
  49. width: 768px;
  50. margin: auto;
  51. }
  52. #shirt-logo {
  53. float: left;
  54. width: 394px;
  55. text-align: center;
  56. margin-top: -50px;
  57. }
  58. #banner-text {
  59. float: left;
  60. }
  61. #banner-text h1 {
  62. text-align: center;
  63. font-size: 72px;
  64. margin: 0px;
  65. padding: 0px;
  66. color: white;
  67. font-family: 'Oswald', sans-serif;
  68. white-space: nowrap;
  69. font-weight: normal;
  70. text-shadow: 2px 2px #000000;
  71. }
  72. #banner-text h2 {
  73. text-align: center;
  74. font-size: 24px;
  75. margin: 0px;
  76. padding: 0px;
  77. color: white;
  78. font-family: 'Lemonada', cursive;
  79. font-weight: normal;
  80. white-space: nowrap;
  81. text-shadow: 2px 2px #000000;
  82. }
  83. #section-1 {
  84. clear: both;
  85. width: 738px;
  86. margin: auto;
  87. padding-top: 1px;
  88. padding-left: 15px;
  89. padding-right: 15px;
  90. }
  91. #section-1 h1 {
  92. text-align: center;
  93. }
  94. #section-1 p {
  95. text-align: center;
  96. }
  97. #order-instructions p {
  98. font-size: 18px;
  99. }
  100. #section-2 {
  101. background-color: gray;
  102. }
  103. #shirt-row-1 {
  104. background-color: #0B3B51;
  105. }
  106. #shirt-row-2 {
  107. background-color: #081832;
  108. }
  109. #shirt-row-3 {
  110. background-color: #356D7C;
  111. }
  112. #section-3 {
  113. width: 768px;
  114. height: 325px;
  115. padding-top: 10px;
  116. margin: auto;
  117. }
  118. #booth-picture {
  119. float: left;
  120. width: 400px;
  121. text-align: center;
  122. }
  123. #contact-info {
  124. float: left;
  125. padding-left: 50px;
  126. font-size: 18px;
  127. font-weight: bold;
  128. }
  129. #contact-info img {
  130. width: 32px;
  131. vertical-align: middle;
  132. }
  133. #footer {
  134. background-color: #0B3B51;
  135. height: 65px;
  136. }
  137. #footer p {
  138. clear: both;
  139. font-size: 18px;
  140. text-align: center;
  141. color: white;
  142. padding-top: 25px;
  143. font-family: 'Lemonada', cursive;
  144. font-weight: normal;
  145. text-shadow: 2px 2px #000000;
  146. }
  147. @media only screen and (max-width: 767px) {
  148. #body-main {
  149. padding-bottom: auto;
  150. margin-bottom: auto;
  151. min-height: auto;
  152. min-width: auto;
  153. }
  154. #topbar {
  155. display: none;
  156. height: 50px;
  157. font-size: 14px;
  158. }
  159. #topbar-info {
  160. padding: 5px;
  161. float: right;
  162. }
  163. #shirt-logo {
  164. width: 197px;
  165. margin-top: -25px;
  166. display: none;
  167. }
  168. #shirt-logo img {
  169. width: 197px;
  170. }
  171. #centered-banner {
  172. width: 100%;
  173. margin: auto;
  174. }
  175. #banner-text {
  176. width: 100%;
  177. margin: auto;
  178. text-align: center;
  179. }
  180. #banner-text h1 {
  181. font-size: 38px;
  182. }
  183. #banner-text h2 {
  184. font-size: 16px;
  185. }
  186. #main-banner {
  187. height: 150px;
  188. }
  189. #section-1 {
  190. width: 75%;
  191. }
  192. .shirt-row {
  193. height: auto;
  194. width: auto;
  195. margin: auto;
  196. text-align: center;
  197. }
  198. .shirt-row img {
  199. width: 60%;
  200. margin: auto;
  201. padding: auto;
  202. }
  203. #section-3 {
  204. width: 75%;
  205. height: auto;
  206. }
  207. #booth-picture {
  208. width: 100%;
  209. }
  210. #booth-picture img{
  211. float: none;
  212. margin: auto;
  213. width: 100%;
  214. }
  215. #contact-info {
  216. float: none;
  217. text-align: center;
  218. padding: 0px;
  219. padding-left: 0px;
  220. margin: auto;
  221. font-size: 18px;
  222. }
  223. #footer {
  224. height: auto;
  225. }
  226. }