RyanEarnshaw

Untitled

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