RyanEarnshaw

Untitled

Mar 21st, 2017
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.27 KB | None | 0 0
  1. .bodycontainer {
  2. position: relative;
  3. display: inline-block;
  4. margin-top: 140px; /* 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.  
  34.  
  35.  
  36. .innercont .title {
  37. position: relative;
  38. display: inline-block;
  39. float: left;
  40. width: 100%;
  41. margin: 20px 0 20px;
  42. }
  43. .innercont .title h1 {
  44. font-size: 24px;
  45. font-family: sans-serif;
  46. font-weight: 600;
  47. color: #8ec640;
  48. }
  49. .innercont .title:after {
  50. content: '';
  51. position: absolute;
  52. bottom: -10px;
  53. width: 100px;
  54. height: 2px;
  55. background-color: #8ec640;
  56. }
  57. .innercont .body {
  58. position: relative;
  59. display: inline-block;
  60. float: left;
  61. width: 100%;
  62. }
  63. .innercont .body .column {
  64. position: relative;
  65. display: inline-block;
  66. height: 100%;
  67. float: left;
  68. }
  69. .innercont .body .column.c1 { width: 30%; margin-right: 5%; }
  70. .innercont .body .column.c2 { width: 65% }
  71.  
  72. .innercont .body h2 {
  73. position: relative;
  74. font-size: 15px;
  75. font-family: sans-serif;
  76. font-weight: 100;
  77. color: #6b6b6b;
  78. margin: 7px 0;
  79. line-height: 25px;
  80. width: 100%;
  81. float: left;
  82. }
  83. .innercont .body h2 a {
  84. font-weight: 600;
  85. color: #8ec640;
  86. text-decoration: none;
  87. }
  88. .innercont .body .quote {
  89. display: inline-block;
  90. padding: 10px 0px 10px 0px;
  91. border-top: 2px solid #8ec640;
  92. border-bottom: 2px solid #8ec640;
  93. }
  94. .innercont .body .quote h2 {
  95. width: 100%;
  96. line-height: 25px;
  97. font-size: 13px;
  98. font-weight: 100;
  99. margin-top: 10px;
  100. color: #8ec640;
  101. }
  102. .innercont .body .quote h3 {
  103. font-size: 17px;
  104. font-family: sans-serif;
  105. color: #8ec640;
  106. font-weight: 100;
  107. width: 100%;
  108. margin-top: 10px;
  109. }
  110. .innercont .body h2 span {
  111. font-weight: bold;
  112. color: #83c640;
  113. }
  114.  
  115.  
  116. .body .imagetable {
  117. position: relative;
  118. float: left;
  119. width: 100%;
  120. border-collapse: collapse;
  121. }
  122. .body .imagetable img {
  123. position: relative;
  124. left: 50%;
  125. transform: translateX(-50%);
  126. max-width: 90%;
  127. max-height: 90%;
  128. }
  129. .body .imagetable .width50 { width: 50%; }
  130.  
  131.  
  132. .horizontal-text {
  133. position: relative;
  134. display: inline-block;
  135. width: 100%;
  136. float: left;
  137. }
  138. .innercont .body .horizontal-text h2 {
  139. position: relative;
  140. display: inline-block;
  141. font-family: sans-serif;
  142. font-weight: bold;
  143. font-size: 14px;
  144. color: #8ec640;
  145. width: 33%;
  146. float: left;
  147. padding: 10px;
  148. box-sizing: border-box;
  149. text-align: center;
  150. }
  151. .innercont .body .horizontal-text h2:nth-child(1),
  152. .innercont .body .horizontal-text h2:nth-child(2) { border-right: 1px solid #8ec640; }
  153.  
  154.  
  155.  
  156. .innercont .body .contact {
  157. position: relative;
  158. display: inline-block;
  159. float: left;
  160. width: 40%;
  161. min-width: 500px;
  162. margin-top: 40px;
  163. margin-right: 5%;
  164. }
  165. .innercont .body .contact .half {
  166. position: relative;
  167. display: inline-block;
  168. float: left;
  169. width: 50%;
  170. }
  171. .innercont .body .contact .full {
  172. position: relative;
  173. display: inline-block;
  174. float: left;
  175. width: 100%;
  176. padding-left: 50%;
  177. box-sizing: border-box;
  178. }
  179. .innercont .body .contact .person-image {
  180. position: relative;
  181. width: 80%;
  182. max-height: 250px;
  183. }
  184. .innercont .body .contact h1 {
  185. position: relative;
  186. display: inline-block;
  187. float: left;
  188. width: 100%;
  189. color: #8ec640;
  190. font-weight: bold;
  191. font-family: sans-serif;
  192. font-size: 16px;
  193. }
  194. .innercont .body .contact h2 {
  195. position: relative;
  196. display: inline-block;
  197. float: left;
  198. width: 100%;
  199. color: #8ec640;
  200. font-weight: 100;
  201. font-family: sans-serif;
  202. font-size: 16px;
  203. }
  204. .innercont .body .contact h3 {
  205. position: relative;
  206. display: inline-block;
  207. float: left;
  208. width: 100%;
  209. color: #838383;
  210. font-weight: 100;
  211. font-family: sans-serif;
  212. font-size: 14px;
  213. line-height: 20px;
  214. margin-top: 10px;
  215. }
  216. .innercont .body .contact .line {
  217. position: relative;
  218. display: inline-block;
  219. float: left;
  220. width: 100%;
  221. margin-bottom: 10px;
  222. }
  223. .innercont .body .contact .line img {
  224. position: relative;
  225. display: inline-block;
  226. width: 25px;
  227. float: left;
  228. }
  229. .innercont .body .contact .line h1 {
  230. position: relative;
  231. display: inline-block;
  232. float: left;
  233. width: auto;
  234. color: #838383;
  235. font-weight: 100;
  236. font-family: sans-serif;
  237. font-size: 14px;
  238. margin-left: 15px;
  239. transform: translateY(4px);
  240. }
  241. /* MEDIA QUERIES */
  242.  
  243.  
  244.  
  245. /* ----------------------------------------------------*/
  246. /* Code That Doesnt Change Between Mobile Resolution */
  247. /* ----------------------------------------------------*/
  248. @media only screen and (min-width : 0px) and (max-width : 992px) {
  249. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  250. .innercont .body .column.c2 { width: 100% }
  251. }
  252.  
  253.  
  254. /* ----------------------------------------------------*/
  255. /* Custom, iPhone Retina */
  256. /* ----------------------------------------------------*/
  257. @media only screen and (max-width : 320px) {
  258.  
  259. }
  260.  
  261.  
  262. /* ----------------------------------------------------*/
  263. /* Extra Small Devices, Phones */
  264. /* ----------------------------------------------------*/
  265. @media only screen and (min-width : 320px) and (max-width : 480px) {
  266.  
  267. }
  268.  
  269.  
  270. /* ----------------------------------------------------*/
  271. /* Small Devices, Tablets */
  272. /* ----------------------------------------------------*/
  273. @media only screen and (min-width : 480px) and (max-width : 768px) {
  274.  
  275. }
  276.  
  277.  
  278. /* ----------------------------------------------------*/
  279. /* Medium Devices, Desktops */
  280. /* ----------------------------------------------------*/
  281. @media only screen and (min-width : 768px) and (max-width : 992px) {
  282.  
  283. }
  284.  
  285.  
  286. /* ----------------------------------------------------*/
  287. /* Large Devices, Wide Screens */
  288. /* ----------------------------------------------------*/
  289. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  290. .innercont .body .buttoncontainer .ctabutton h1 { width: 70%; }
  291. .innercont .body .buttoncontainer .ctabutton.but3 { height: 70px; width: 100%; margin-right: 0; }
  292. }
Advertisement
Add Comment
Please, Sign In to add comment