RyanEarnshaw

Untitled

Mar 3rd, 2017
90
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.97 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. .landing-page-logo {
  24. position: relative;
  25. display: inline-block;
  26. float: left;
  27. width: 100%;
  28. height: 200px;
  29. background-color: #d9d9d9;
  30. }
  31. .landing-page-logo img {
  32. position: absolute;
  33. display: inline-block;
  34. bottom: 10%;
  35. left: 50%;
  36. transform: translateX(-50%);
  37. max-width: 80%;
  38. max-height: 80%;
  39. }
  40. .innercont {
  41. position: relative;
  42. display: inline-block;
  43. float: left;
  44. padding: 5vh 5vw;
  45. margin-bottom: 400px;
  46. box-sizing: border-box;
  47. background-color: #ffffff;
  48. }
  49.  
  50.  
  51.  
  52.  
  53.  
  54. .innercont .title {
  55. position: relative;
  56. display: inline-block;
  57. float: left;
  58. width: 100%;
  59. margin: 20px 0 20px;
  60. }
  61. .innercont .title h1 {
  62. font-size: 24px;
  63. font-family: sans-serif;
  64. font-weight: 600;
  65. color: #8ec640;
  66. }
  67. .innercont .title:after {
  68. content: '';
  69. position: absolute;
  70. bottom: -10px;
  71. width: 100px;
  72. height: 2px;
  73. background-color: #8ec640;
  74. }
  75. .innercont .body {
  76. position: relative;
  77. display: inline-block;
  78. float: left;
  79. width: 100%;
  80. }
  81. .innercont .body .column {
  82. position: relative;
  83. display: inline-block;
  84. height: 100%;
  85. float: left;
  86. }
  87. .innercont .body .column.c1 { width: 30%; margin-right: 5%; }
  88. .innercont .body .column.c2 { width: 65% }
  89. .innercont .body .column.c1 h2 {
  90. font-weight: bold;
  91. font-size: 16px;
  92. }
  93. .innercont .body h2 {
  94. position: relative;
  95. font-size: 15px;
  96. font-family: sans-serif;
  97. font-weight: 100;
  98. color: #6b6b6b;
  99. margin: 7px 0;
  100. line-height: 25px;
  101. width: 100%;
  102. float: left;
  103. }
  104. .innercont .body h2 a {
  105. font-weight: 600;
  106. color: #8ec640;
  107. text-decoration: none;
  108. }
  109.  
  110. .contact {
  111. position: relative;
  112. display: inline-block;
  113. float: left;
  114. width: 200px;
  115. margin-right: 20px;
  116. }
  117. .contact.manager {
  118. width: auto;
  119. }
  120. .contact img {
  121. position: relative;
  122. display: inline-block;
  123. float: left;
  124. max-width: 125px;
  125. }
  126. .contact .contact-details {
  127. position: relative;
  128. display: inline-block;
  129. float: left;
  130. max-width: 400px;
  131. margin-top: 20px;
  132. }
  133. .contact.manager .contact-details {
  134. margin-top: 0px;
  135. margin-left: 60px;
  136. }
  137. .innercont .body .contact .contact-details h2 {
  138. margin: 0;
  139. }
  140. .innercont .body .contact .contact-details .name { color: #8ec640; font-weight: bold; }
  141. .innercont .body .contact .contact-details .role { color: #8ec640; }
  142. .innercont .body .contact .contact-details .description { margin-top: 5px; }
  143. .innercont .title.account-manager { margin: 80px 0 40px; }
  144. .innercont .title.sales-support-team { margin: 80px 0 40px; }
  145. .innercont .title.customer-services-team { margin: 80px 0 40px; }
  146.  
  147. /* MEDIA QUERIES */
  148.  
  149.  
  150.  
  151. /* ----------------------------------------------------*/
  152. /* Code That Doesnt Change Between Mobile Resolution */
  153. /* ----------------------------------------------------*/
  154. @media only screen and (min-width : 0px) and (max-width : 992px) {
  155. .innercont .body .buttoncontainer .ctabutton.but1 { width: 100%; margin-right: 0; }
  156. .innercont .body .buttoncontainer .ctabutton.but2 { width: 100%; margin-right: 0; }
  157. .innercont .body .buttoncontainer .ctabutton.but3 { width: 100%; margin-right: 0; }
  158.  
  159. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  160. .innercont .body .column.c2 { width: 100% }
  161. }
  162.  
  163.  
  164. /* ----------------------------------------------------*/
  165. /* Custom, iPhone Retina */
  166. /* ----------------------------------------------------*/
  167. @media only screen and (max-width : 320px) {
  168.  
  169. }
  170.  
  171.  
  172. /* ----------------------------------------------------*/
  173. /* Extra Small Devices, Phones */
  174. /* ----------------------------------------------------*/
  175. @media only screen and (min-width : 320px) and (max-width : 480px) {
  176.  
  177. }
  178.  
  179.  
  180. /* ----------------------------------------------------*/
  181. /* Small Devices, Tablets */
  182. /* ----------------------------------------------------*/
  183. @media only screen and (min-width : 480px) and (max-width : 768px) {
  184.  
  185. }
  186.  
  187.  
  188. /* ----------------------------------------------------*/
  189. /* Medium Devices, Desktops */
  190. /* ----------------------------------------------------*/
  191. @media only screen and (min-width : 768px) and (max-width : 992px) {
  192.  
  193. }
  194.  
  195.  
  196. /* ----------------------------------------------------*/
  197. /* Large Devices, Wide Screens */
  198. /* ----------------------------------------------------*/
  199. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  200. .innercont .body .buttoncontainer .ctabutton.but1 { width: 100%; margin-right: 0; }
  201. .innercont .body .buttoncontainer .ctabutton.but2 { width: 100%; margin-right: 0; }
  202. .innercont .body .buttoncontainer .ctabutton.but3 { width: 100%; margin-right: 0; }
  203. }
Advertisement
Add Comment
Please, Sign In to add comment