RyanEarnshaw

Untitled

Apr 21st, 2017
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.40 KB | None | 0 0
  1. .bodycontainer {
  2. position: relative;
  3. display: inline-block;
  4. margin-top: 80px; /* size of header */
  5. margin-left: 20%; /* size of side-nav */
  6. padding-bottom: 200px;
  7. background-color: #ffffff;
  8. float: left;
  9. width: 80%;
  10. }
  11. .headerimage {
  12. position: absolute;
  13. display: inline-block;
  14. width: 100%;
  15. height: 220px;
  16. top: 0;
  17. left: 0;
  18. }
  19. .headerimage img {
  20. width: 100%;
  21. height: 100%;
  22. }
  23. .innercont {
  24. position: relative;
  25. display: inline-block;
  26. float: left;
  27. padding: 5vh 5vw;
  28. box-sizing: border-box;
  29. background-color: #ffffff;
  30. }
  31.  
  32.  
  33. .innercont .title {
  34. position: relative;
  35. display: inline-block;
  36. float: left;
  37. width: 100%;
  38. margin: 20px 0 20px;
  39. }
  40. .innercont .title h1 {
  41. font-size: 40px;
  42. font-family: 'Work Sans';
  43. font-weight: 100;
  44. color: #8ec640;
  45. }
  46. .innercont .title:after {
  47. content: '';
  48. position: absolute;
  49. bottom: -16px;
  50. width: 0px;
  51. height: 2px;
  52. background-color: #8ec640;
  53. animation: underline_animation 1s 0.5s 1 normal forwards;
  54. -o-animation: underline_animation 1s 0.5s 1 normal forwards;
  55. -moz-animation: underline_animation 1s 0.5s 1 normal forwards;
  56. -webkit-animation: underline_animation 1s 0.5s 1 normal forwards;
  57. }
  58. @keyframes underline_animation {
  59. 0% { width: 0px; }
  60. 100% { width: 100px; }
  61. }
  62. @-webkit-keyframes underline_animation {
  63. 0% { width: 0px; }
  64. 100% { width: 100px; }
  65. }
  66. @-moz-keyframes underline_animation {
  67. 0% { width: 0px; }
  68. 100% { width: 100px; }
  69. }
  70. @-o-keyframes underline_animation {
  71. 0% { width: 0px; }
  72. 100% { width: 100px; }
  73. }
  74. .innercont .body {
  75. position: relative;
  76. display: inline-block;
  77. float: left;
  78. width: 100%;
  79. }
  80. .innercont .body .column {
  81. position: relative;
  82. display: inline-block;
  83. height: 100%;
  84. float: left;
  85. }
  86. .innercont .body .column.c1 { width: 30%; margin-right: 5%; }
  87. .innercont .body .column.c2 { width: 65% }
  88.  
  89. .innercont .body h2 {
  90. position: relative;
  91. font-size: 15px;
  92. font-family: sans-serif;
  93. font-weight: 100;
  94. color: #6b6b6b;
  95. margin: 7px 0;
  96. line-height: 25px;
  97. width: 100%;
  98. float: left;
  99. }
  100. .innercont .body h2 a {
  101. font-weight: 600;
  102. color: #8ec640;
  103. text-decoration: none;
  104. }
  105. .innercont .body h2 span {
  106. font-weight: bold;
  107. color: #83c640;
  108. }
  109.  
  110. .email-modal {
  111. position: fixed;
  112. display: inline-block;
  113. top: -100px;
  114. left: 50%;
  115. transform: translateX(-50%);
  116. width: 100%;
  117. max-width: 600px;
  118. padding: 10px 0 12px;
  119. box-sizing: border-box;
  120. z-index: 100;
  121. border-radius: 5px;
  122. animation: email_animation 5s 0.5s 1 normal forwards;
  123. }
  124. @keyframes email_animation {
  125. 0% { top: -100px; }
  126. 20% { top: 30px; }
  127. 80% { top: 30px; }
  128. 100% { top: -100px; }
  129. }
  130. .email-modal.email-successful { background-color: #8ec640; }
  131. .email-modal.email-unsuccessful { background-color: #e04040; }
  132. .email-modal h1 {
  133. position: relative;
  134. display: inline-block;
  135. width: 100%;
  136. color: #000000;
  137. font-family: sans-serif;
  138. font-weight: bolf;
  139. font-size: 12px;
  140. text-align: center;
  141. }
  142.  
  143.  
  144. .innercont .body .form {
  145. position: relative;
  146. display: inline-block;
  147. width: 100%;
  148. float: left;
  149. margin-top: 10px;
  150. }
  151. .innercont .body .form form {
  152. position: relative;
  153. display: inline-block;
  154. float: left;
  155. width: 80%;
  156. }
  157. .innercont .body .form input,
  158. .innercont .body .form select {
  159. color: #8ec640;
  160. font-size: 13px;
  161. border: none;
  162. padding: 13px 5px;
  163. margin: 3px 0;
  164. background-color: #dfdfdf;
  165. border-radius: 2px;
  166. font-family: arial;
  167. box-sizing: border-box;
  168. }
  169. .innercont .body .form input:focus,
  170. .innercont .body .form input:valid {
  171. box-shadow: none;
  172. outline: none;
  173. background-position: 0 0;
  174. }
  175. .innercont .body .form .inname { width: 49%;float: left;}
  176. .innercont .body .form .inemail { width: 49%; float: right; }
  177. .innercont .body .form .inphone { width: 49%; float: left; }
  178. .innercont .body .form .incompany { width: 49%; float: right; }
  179. .innercont .body .form .inline1 { width: 49%; float: left; }
  180. .innercont .body .form .inline2 { width: 49%; float: right; }
  181. .innercont .body .form .inpostcode { width: 49%; float: left; }
  182. .innercont .body .form .indropdown { width: 49%; float: right; -webkit-appearance: none; }
  183.  
  184. .innercont .body .form .buttoncontainer {
  185. position: relative;
  186. display: inline-block;
  187. width: 100%;
  188. text-align: center;
  189. }
  190. .innercont .body .form .insubmit {
  191. font-size: 14px;
  192. float: left;
  193. padding: 15px 40px;
  194. font-family: 'Raleway';
  195. margin-top: 10px;
  196. border: 2px solid #8ec640;
  197. background-color: #8ec640;
  198. color: #ffffff;
  199. width: 100%;
  200. max-width: 200px;
  201. cursor: pointer;
  202. transition: all 0.2s ease;
  203. -webkit-appearance: none;
  204. }
  205. .innercont .body .form .insubmit:hover {
  206. background-color: #ffffff;
  207. color: #8ec640;
  208. }
  209.  
  210.  
  211.  
  212. /* ----------------------------------------------------*/
  213. /* Code That Doesnt Change Between Mobile Resolution */
  214. /* ----------------------------------------------------*/
  215. @media only screen and (min-width : 0px) and (max-width : 992px) {
  216. .innercont { margin: 0; width: 100%; }
  217. .innercont
  218. .innercont .title h2 { text-align: center; }
  219. .innercont .body .form h1 { text-align: center; }
  220. .innercont .body .form form { width: 100%; }
  221. }
  222.  
  223.  
  224. /* ----------------------------------------------------*/
  225. /* Custom, iPhone Retina */
  226. /* ----------------------------------------------------*/
  227. @media only screen and (max-width : 320px) {
  228. .innercont .body .form .inname { width: 100%; float: left; }
  229. .innercont .body .form .inemail { width: 100%; float: left; }
  230. .innercont .body .form .inphone { width: 100%; float: left; }
  231. .innercont .body .form .incompany { width: 100%; float: left; }
  232. .innercont .body .form .inline1 { width: 100%; float: left; }
  233. .innercont .body .form .inline2 { width: 100%; float: left; }
  234. .innercont .body .form .inpostcode { width: 100%; float: left; }
  235. .innercont .body .form .indropdown { width: 100%; float: left; }
  236. }
  237.  
  238.  
  239. /* ----------------------------------------------------*/
  240. /* Extra Small Devices, Phones */
  241. /* ----------------------------------------------------*/
  242. @media only screen and (min-width : 320px) and (max-width : 480px) {
  243. .innercont .body .form .inname { width: 100%; float: left; }
  244. .innercont .body .form .inemail { width: 100%; float: left; }
  245. .innercont .body .form .inphone { width: 100%; float: left; }
  246. .innercont .body .form .incompany { width: 100%; float: left; }
  247. .innercont .body .form .inline1 { width: 100%; float: left; }
  248. .innercont .body .form .inline2 { width: 100%; float: left; }
  249. .innercont .body .form .inpostcode { width: 100%; float: left; }
  250. .innercont .body .form .indropdown { width: 100%; float: left; }
  251. }
  252.  
  253.  
  254. /* ----------------------------------------------------*/
  255. /* Small Devices, Tablets */
  256. /* ----------------------------------------------------*/
  257. @media only screen and (min-width : 480px) and (max-width : 768px) {
  258.  
  259. }
  260.  
  261.  
  262. /* ----------------------------------------------------*/
  263. /* Medium Devices, Desktops */
  264. /* ----------------------------------------------------*/
  265. @media only screen and (min-width : 768px) and (max-width : 992px) {
  266.  
  267. }
  268.  
  269.  
  270. /* ----------------------------------------------------*/
  271. /* Large Devices, Wide Screens */
  272. /* ----------------------------------------------------*/
  273. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  274.  
  275. }
Advertisement
Add Comment
Please, Sign In to add comment