RyanEarnshaw

Untitled

Feb 23rd, 2017
83
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.07 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: 17px;
  75. font-family: sans-serif;
  76. font-weight: 100;
  77. color: #6b6b6b;
  78. margin: 17px 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. font-weight: 100;
  97. margin-top: 10px;
  98. color: #8ec640;
  99. }
  100. .innercont .body .quote h3 {
  101. font-size: 17px;
  102. font-family: sans-serif;
  103. color: #8ec640;
  104. font-weight: 100;
  105. width: 100%;
  106. margin-top: 10px;
  107. }
  108.  
  109. .innercont .body h2 span {
  110. font-weight: bold;
  111. color: #83c640;
  112. }
  113. .innercont .body .imagetable {
  114. position: relative;
  115. float: left;
  116. max-width: 100%;
  117. max-height: 30px;
  118. border-collapse: collapse;
  119. }
  120. .innercont .body .imagetable img {
  121. position: relative;
  122. top: 0;
  123. max-width: 95%;
  124. max-height: 90%;
  125. }
  126. .innercont .body .imagetable .left { width: 50%; }
  127. .innercont .body .imagetable .left img { left: 0; }
  128. .innercont .body .imagetable .right { width: 50%; }
  129. .innercont .body .imagetable .right img { right: 0; }
  130.  
  131.  
  132.  
  133. .innercont .body .buttoncontainer {
  134. position: relative;
  135. display: inline-block;
  136. float: left;
  137. width: 100%;
  138. padding-top: 50px;
  139. text-align: center;
  140. }
  141. .innercont .body .buttoncontainer .ctabutton {
  142. position: relative;
  143. display: inline-block;
  144. height: 48px;
  145. background-color: #8ec640;
  146. transition: transform 0.5s ease;
  147. }
  148. .innercont .body .buttoncontainer .ctabutton:hover {
  149. transform: translateY(-10px);
  150. }
  151. .ctabutton.but1 { width: 290px; margin-right: 15px; }
  152. .ctabutton.but2 { width: 200px; }
  153. .innercont .body .buttoncontainer .ctabutton h1 {
  154. position: relative;
  155. font-size: 18px;
  156. font-family: sans-serif;
  157. font-weight: 100;
  158. color: #ffffff;
  159. padding: 10px 0px 0px 10px;
  160. line-height: 25px;
  161. width: 100%;
  162. float: left;
  163. text-align: left;
  164. }
  165. .innercont .body .buttoncontainer .ctabutton .icon {
  166. position: absolute;
  167. width: 50px;
  168. height: 100%;
  169. top: 0px;
  170. right: 0px;
  171. background-color: #7aac34;
  172. overflow: hidden;
  173. }
  174. .innercont .body .buttoncontainer .ctabutton:hover .baseicon {
  175. right: 60px;
  176. transition: right 0.1s;
  177. }
  178. .innercont .body .buttoncontainer .ctabutton:hover .arrow {
  179. right: 10px;
  180. transition: right 0.3s;
  181. }
  182. .innercont .body .buttoncontainer .ctabutton .baseicon {
  183. position: absolute;
  184. width: 29px;
  185. height: 29px;
  186. top: 7px;
  187. right: 10px;
  188. transition: right 0.3s;
  189. }
  190. .innercont .body .buttoncontainer .ctabutton .arrow {
  191. position: absolute;
  192. width: 29px;
  193. height: 29px;
  194. top: 7px;
  195. right: -50px;
  196. transition: right 0.1s;
  197. }
Advertisement
Add Comment
Please, Sign In to add comment