RyanEarnshaw

Untitled

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