RyanEarnshaw

Untitled

Mar 3rd, 2017
85
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.33 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.  
  90. .innercont .body h2 {
  91. position: relative;
  92. font-size: 15px;
  93. font-family: sans-serif;
  94. font-weight: 100;
  95. color: #6b6b6b;
  96. margin: 7px 0;
  97. line-height: 25px;
  98. width: 100%;
  99. float: left;
  100. }
  101. .innercont .body h2 a {
  102. font-weight: 600;
  103. color: #8ec640;
  104. text-decoration: none;
  105. }
  106.  
  107. .contact {
  108. position: relative;
  109. display: inline-block;
  110. float: left;
  111. width: 200px;
  112. margin-right: 20px;
  113. }
  114. .contact.manager {
  115. width: auto;
  116. }
  117. .contact img {
  118. position: relative;
  119. display: inline-block;
  120. float: left;
  121. max-width: 200px;
  122. }
  123. .contact .contact-details {
  124. position: relative;
  125. display: inline-block;
  126. float: left;
  127. }
  128. .innercont .body .contact .contact-details h2 {
  129. margin: 0;
  130. }
  131. /* MEDIA QUERIES */
  132.  
  133.  
  134.  
  135. /* ----------------------------------------------------*/
  136. /* Code That Doesnt Change Between Mobile Resolution */
  137. /* ----------------------------------------------------*/
  138. @media only screen and (min-width : 0px) and (max-width : 992px) {
  139. .innercont .body .buttoncontainer .ctabutton.but1 { width: 100%; margin-right: 0; }
  140. .innercont .body .buttoncontainer .ctabutton.but2 { width: 100%; margin-right: 0; }
  141. .innercont .body .buttoncontainer .ctabutton.but3 { width: 100%; margin-right: 0; }
  142.  
  143. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  144. .innercont .body .column.c2 { width: 100% }
  145. }
  146.  
  147.  
  148. /* ----------------------------------------------------*/
  149. /* Custom, iPhone Retina */
  150. /* ----------------------------------------------------*/
  151. @media only screen and (max-width : 320px) {
  152.  
  153. }
  154.  
  155.  
  156. /* ----------------------------------------------------*/
  157. /* Extra Small Devices, Phones */
  158. /* ----------------------------------------------------*/
  159. @media only screen and (min-width : 320px) and (max-width : 480px) {
  160.  
  161. }
  162.  
  163.  
  164. /* ----------------------------------------------------*/
  165. /* Small Devices, Tablets */
  166. /* ----------------------------------------------------*/
  167. @media only screen and (min-width : 480px) and (max-width : 768px) {
  168.  
  169. }
  170.  
  171.  
  172. /* ----------------------------------------------------*/
  173. /* Medium Devices, Desktops */
  174. /* ----------------------------------------------------*/
  175. @media only screen and (min-width : 768px) and (max-width : 992px) {
  176.  
  177. }
  178.  
  179.  
  180. /* ----------------------------------------------------*/
  181. /* Large Devices, Wide Screens */
  182. /* ----------------------------------------------------*/
  183. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  184. .innercont .body .buttoncontainer .ctabutton.but1 { width: 100%; margin-right: 0; }
  185. .innercont .body .buttoncontainer .ctabutton.but2 { width: 100%; margin-right: 0; }
  186. .innercont .body .buttoncontainer .ctabutton.but3 { width: 100%; margin-right: 0; }
  187. }
Advertisement
Add Comment
Please, Sign In to add comment