RyanEarnshaw

Untitled

Apr 5th, 2017
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.89 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 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: -16px;
  53. width: 0px;
  54. height: 2px;
  55. background-color: #8ec640;
  56. animation: underline_animation 1s 0.5s 1 normal forwards;
  57. -o-animation: underline_animation 1s 0.5s 1 normal forwards;
  58. -moz-animation: underline_animation 1s 0.5s 1 normal forwards;
  59. -webkit-animation: underline_animation 1s 0.5s 1 normal forwards;
  60. }
  61. @keyframes underline_animation {
  62. 0% { width: 0px; }
  63. 100% { width: 100px; }
  64. }
  65. @-webkit-keyframes underline_animation {
  66. 0% { width: 0px; }
  67. 100% { width: 100px; }
  68. }
  69. @-moz-keyframes underline_animation {
  70. 0% { width: 0px; }
  71. 100% { width: 100px; }
  72. }
  73. @-o-keyframes underline_animation {
  74. 0% { width: 0px; }
  75. 100% { width: 100px; }
  76. }
  77. .innercont .body {
  78. position: relative;
  79. display: inline-block;
  80. float: left;
  81. width: 100%;
  82. }
  83. .innercont .body .column {
  84. position: relative;
  85. display: inline-block;
  86. height: 100%;
  87. float: left;
  88. }
  89. .innercont .body .column.c1 { width: 30%; margin-right: 5%; }
  90. .innercont .body .column.c2 { width: 65% }
  91.  
  92. .innercont .body h2 {
  93. position: relative;
  94. font-size: 15px;
  95. font-family: sans-serif;
  96. font-weight: 100;
  97. color: #6b6b6b;
  98. margin: 7px 0;
  99. line-height: 25px;
  100. width: 100%;
  101. float: left;
  102. }
  103. .innercont .body .column.c1 h2 {
  104. font-weight: bold;
  105. }
  106. .innercont .body h2 a {
  107. font-weight: 600;
  108. color: #8ec640;
  109. text-decoration: none;
  110. }
  111. .innercont .body .quote {
  112. display: inline-block;
  113. padding: 10px 0px 10px 0px;
  114. border-top: 2px solid #8ec640;
  115. border-bottom: 2px solid #8ec640;
  116. }
  117. .innercont .body .quote h2 {
  118. width: 100%;
  119. line-height: 25px;
  120. font-size: 13px;
  121. font-weight: 100;
  122. margin-top: 10px;
  123. color: #8ec640;
  124. }
  125. .innercont .body .quote h3 {
  126. font-size: 17px;
  127. font-family: sans-serif;
  128. color: #8ec640;
  129. font-weight: 100;
  130. width: 100%;
  131. margin-top: 10px;
  132. }
  133. .innercont .body h2 span {
  134. font-weight: bold;
  135. color: #83c640;
  136. }
  137.  
  138.  
  139. .body .imagetable {
  140. position: relative;
  141. float: left;
  142. width: 100%;
  143. border-collapse: collapse;
  144. background-color: #e2e2e2;
  145. border:1px solid #d5d5d5;
  146. border-radius: 5px;
  147. }
  148. .body .imagetable img {
  149. position: relative;
  150. left: 50%;
  151. transform: translateX(-50%);
  152. max-width: 30%;
  153. margin: 20px 0;
  154. max-height: 40%;
  155. }
  156. .body .imagetable .width25 { width: 25%; }
  157. .body .imagetable .width25:nth-last-child(1) { padding-right: 10px; }
  158.  
  159.  
  160.  
  161.  
  162. /* MEDIA QUERIES */
  163.  
  164.  
  165.  
  166. /* ----------------------------------------------------*/
  167. /* Code That Doesnt Change Between Mobile Resolution */
  168. /* ----------------------------------------------------*/
  169. @media only screen and (min-width : 0px) and (max-width : 992px) {
  170. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  171. .innercont .body .column.c2 { width: 100% }
  172. }
  173.  
  174.  
  175. /* ----------------------------------------------------*/
  176. /* Custom, iPhone Retina */
  177. /* ----------------------------------------------------*/
  178. @media only screen and (max-width : 320px) {
  179.  
  180. }
  181.  
  182.  
  183. /* ----------------------------------------------------*/
  184. /* Extra Small Devices, Phones */
  185. /* ----------------------------------------------------*/
  186. @media only screen and (min-width : 320px) and (max-width : 480px) {
  187.  
  188. }
  189.  
  190.  
  191. /* ----------------------------------------------------*/
  192. /* Small Devices, Tablets */
  193. /* ----------------------------------------------------*/
  194. @media only screen and (min-width : 480px) and (max-width : 768px) {
  195.  
  196. }
  197.  
  198.  
  199. /* ----------------------------------------------------*/
  200. /* Medium Devices, Desktops */
  201. /* ----------------------------------------------------*/
  202. @media only screen and (min-width : 768px) and (max-width : 992px) {
  203.  
  204. }
  205.  
  206.  
  207. /* ----------------------------------------------------*/
  208. /* Large Devices, Wide Screens */
  209. /* ----------------------------------------------------*/
  210. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  211. .innercont .body .buttoncontainer .ctabutton h1 { width: 70%; }
  212. .innercont .body .buttoncontainer .ctabutton.but3 { height: 70px; width: 100%; margin-right: 0; }
  213. }
Advertisement
Add Comment
Please, Sign In to add comment