RyanEarnshaw

Untitled

Apr 7th, 2017
79
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.25 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. .innercont .body .column.c3 { width: 100%; text-align: center; }
  95.  
  96. .innercont .body h2 {
  97. position: relative;
  98. font-size: 17px;
  99. font-family: 'Work Sans';
  100. font-weight: 100;
  101. color: #6b6b6b;
  102. margin: 7px 0;
  103. line-height: 25px;
  104. width: 100%;
  105. float: left;
  106. }
  107. .innercont .body .column.c1 h2 {
  108. font-size: 21px;
  109. }
  110. .innercont .body h2 a {
  111. font-weight: 600;
  112. color: #8ec640;
  113. text-decoration: none;
  114. }
  115. .innercont .body .quote {
  116. display: inline-block;
  117. padding: 10px 0px 10px 0px;
  118. }
  119. .innercont .body .quote h2 {
  120. width: 100%;
  121. line-height: 25px;
  122. font-family: 'Work Sans';
  123. font-size: 23px;
  124. font-weight: 300;
  125. margin-top: 10px;
  126. color: #000000;
  127. }
  128. .innercont .body .bullet{
  129. margin: 0;
  130. }
  131. .innercont .body h2 span {
  132. font-weight: 400;
  133. font-size: 24px;
  134. }
  135.  
  136.  
  137. .icon-container {
  138. position: relative;
  139. display: inline-block;
  140. float: left;
  141. width: 100%;
  142. margin: 20px 0;
  143. }
  144. .icon-container .icon {
  145. position: relative;
  146. display: inline-block;
  147. float: left;
  148. width: 16.5%;
  149. padding: 0 2%;
  150. box-sizing: border-box;
  151. }
  152. .icon-container .icon img {
  153. position: relative;
  154. display: inline-block;
  155. float: left;
  156. width: 100%;
  157. }
  158. .icon-container .icon h1 {
  159. position: relative;
  160. display: inline-block;
  161. float: left;
  162. width: 100%;
  163. font-family: sans-serif;
  164. font-weight: 100;
  165. font-size: 12px;
  166. text-align: center;
  167. color: #F47D31;
  168. }
  169. .body .imagetable {
  170. position: relative;
  171. float: left;
  172. width: 100%;
  173. border-collapse: collapse;
  174. }
  175. .body .imagetable img {
  176. position: relative;
  177. left: 50%;
  178. transform: translateX(-50%);
  179. max-width: 90%;
  180. max-height: 90%;
  181. }
  182. /* MEDIA QUERIES */
  183.  
  184.  
  185.  
  186. /* ----------------------------------------------------*/
  187. /* Code That Doesnt Change Between Mobile Resolution */
  188. /* ----------------------------------------------------*/
  189. @media only screen and (min-width : 0px) and (max-width : 992px) {
  190. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  191. .innercont .body .column.c2 { width: 100% }
  192. }
  193.  
  194.  
  195. /* ----------------------------------------------------*/
  196. /* Custom, iPhone Retina */
  197. /* ----------------------------------------------------*/
  198. @media only screen and (max-width : 320px) {
  199.  
  200. }
  201.  
  202.  
  203. /* ----------------------------------------------------*/
  204. /* Extra Small Devices, Phones */
  205. /* ----------------------------------------------------*/
  206. @media only screen and (min-width : 320px) and (max-width : 480px) {
  207.  
  208. }
  209.  
  210.  
  211. /* ----------------------------------------------------*/
  212. /* Small Devices, Tablets */
  213. /* ----------------------------------------------------*/
  214. @media only screen and (min-width : 480px) and (max-width : 768px) {
  215.  
  216. }
  217.  
  218.  
  219. /* ----------------------------------------------------*/
  220. /* Medium Devices, Desktops */
  221. /* ----------------------------------------------------*/
  222. @media only screen and (min-width : 768px) and (max-width : 992px) {
  223.  
  224. }
  225.  
  226.  
  227. /* ----------------------------------------------------*/
  228. /* Large Devices, Wide Screens */
  229. /* ----------------------------------------------------*/
  230. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  231. .innercont .body .buttoncontainer .ctabutton h1 { width: 70%; }
  232. .innercont .body .buttoncontainer .ctabutton.but3 { height: 70px; width: 100%; margin-right: 0; }
  233. }
Advertisement
Add Comment
Please, Sign In to add comment