API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Apr 12th, 2017
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.46 KB | None | 0 0
raw download clone embed print report
  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. .innercont {
  12. position: relative;
  13. display: inline-block;
  14. float: left;
  15. padding: 5vh 5vw 5vh 5vw;
  16. box-sizing: border-box;
  17. background-color: #ffffff;
  18. }
  19.  
  20. .innercont .title {
  21. position: relative;
  22. display: inline-block;
  23. float: left;
  24. width: 100%;
  25. margin: 20px 0 40px;
  26. }
  27. .innercont .title h1 {
  28. font-size: 40px;
  29. font-family: 'Work Sans';
  30. font-weight: 100;
  31. color: #8ec640;
  32. }
  33. .innercont .title:after {
  34. content: '';
  35. position: absolute;
  36. bottom: -16px;
  37. width: 0px;
  38. height: 2px;
  39. background-color: #8ec640;
  40. animation: underline_animation 1s 0.5s 1 normal forwards;
  41. -o-animation: underline_animation 1s 0.5s 1 normal forwards;
  42. -moz-animation: underline_animation 1s 0.5s 1 normal forwards;
  43. -webkit-animation: underline_animation 1s 0.5s 1 normal forwards;
  44. }
  45. @keyframes underline_animation {
  46. 0% { width: 0px; }
  47. 100% { width: 100px; }
  48. }
  49. @-webkit-keyframes underline_animation {
  50. 0% { width: 0px; }
  51. 100% { width: 100px; }
  52. }
  53. @-moz-keyframes underline_animation {
  54. 0% { width: 0px; }
  55. 100% { width: 100px; }
  56. }
  57. @-o-keyframes underline_animation {
  58. 0% { width: 0px; }
  59. 100% { width: 100px; }
  60. }
  61. .innercont .body {
  62. position: relative;
  63. display: inline-block;
  64. float: left;
  65. width: 100%;
  66. }
  67. .innercont .body .column {
  68. position: relative;
  69. display: inline-block;
  70. height: 100%;
  71. float: left;
  72. }
  73. .innercont .body .column.c1 { width: 30%; margin-right: 5%; }
  74. .innercont .body .column.c2 { width: 65% }
  75. .innercont .body .column.c3 { width: 100% }
  76.  
  77. .innercont .body h2 {
  78. position: relative;
  79. font-size: 15px;
  80. font-family: 'Work Sans';
  81. font-weight: 100;
  82. color: #6b6b6b;
  83. margin: 7px 0;
  84. line-height: 25px;
  85. width: 100%;
  86. float: left;
  87. }
  88. .innercont .body .column.c1 h2 {
  89. font-weight: bold;
  90. }
  91. .innercont .body h2 span {
  92. font-size: 24px;
  93. font-family: 'Raleway';
  94. font-weight: 200;
  95. color: #83c640;
  96. }
  97.  
  98. .innercont .body .quote {
  99. position: relative;
  100. display: inline-block;
  101. padding: 10px 0px 10px 0px;
  102. width: 100%;
  103. }
  104. .innercont .body .quote h2 {
  105. position: relative;
  106. display: inline-block;
  107. width: 100%;
  108. line-height: 25px;
  109. font-family: 'Work Sans';
  110. font-size: 23px;
  111. font-weight: 300;
  112. margin-top: 10px;
  113. color: #000000;
  114. text-align: center;
  115. }
  116. .innercont .body .grey-container {
  117. position: relative;
  118. display: inline-block;
  119. width: 100%;
  120. padding: 30px 5vw;
  121. margin-left: -5vw;
  122. background-color: #e3e3e3;
  123. }
  124.  
  125.  
  126. .image-1 {
  127. position: relative;
  128. display: inline-block;
  129. width: 100%;
  130. }
  131. .image-2 {
  132. position: relative;
  133. display: inline-block;
  134. width: 100%;
  135. }
  136. .image-3 {
  137. position: relative;
  138. display: inline-block;
  139. width: 30%;
  140. }
  141. .container-2 {
  142. position: relative;
  143. display: inline-block;
  144. width: 100%;
  145. }
  146. .innercont .body .container-2 h2 {
  147. width: 70%;
  148. float: left;
  149. text-align: left;
  150. padding: 30px 30px 30px 0px;
  151. box-sizing: border-box;
  152. }
  153. .innercont .body .container-3 .large-text {
  154. position: relative;
  155. display: inline-block;
  156. font-size: 38px;
  157. font-family: 'Work Sans';
  158. font-weight: 100;
  159. color: #6b6b6b;
  160. width: 30%;
  161. padding-right: 5%;
  162. box-sizing: border-box;
  163. float: left;
  164. text-align: left;
  165. }
  166. .innercont .body .container-3 .large-text span {
  167. color: #8ec640;
  168. }
  169. .innercont .body .container-3 h2 {
  170. position: relative;
  171. display: inline-block;
  172. width: 70%;
  173. float: right;
  174. text-align: left;
  175. }
  176. .innercont .body .container-3 .title-one {
  177. font-weight: 400;
  178. font-size: 24px;
  179. margin-bottom: 20px;
  180. }
  181. .container-3 .divider {
  182. position: relative;
  183. display: inline-block;
  184. height: 2px;
  185. width: 80%;
  186. margin: 30px 10%;
  187. background-color: #ffffff;
  188. }
  189. .container-3 .questions {
  190. position: relative;
  191. display: inline-block;
  192. width: 50%;
  193. float: left;
  194. }
  195. .innercont .body .container-3 .questions h2 {
  196. width: 100%;
  197. float: left;
  198. margin: 20px 0;
  199. }
  200. .innercont .body .container-3 .questions .title-one {
  201. color: #8ec640;
  202. }
  203. .container-3 .benefits {
  204. position: relative;
  205. display: inline-block;
  206. width: 50%;
  207. float: left;
  208. }
  209. .innercont .body .container-3 .benefits .title-one {
  210. width: 100%;
  211. color: #8ec640;
  212. }
  213. .innercont .body .container-3 .benefit {
  214. position: relative;
  215. display: inline-block;
  216. width: 100%;
  217. height: 80px;
  218. float: left;
  219. }
  220. .innercont .body .container-3 .benefit img {
  221. position: relative;
  222. display: inline-block;
  223. height: 80px;
  224. float: left;
  225. transform: translateY(-15px);
  226. }
  227. .innercont .body .container-3 .benefit h1 {
  228. position: relative;
  229. display: inline-block;
  230. text-align: left;
  231. float: left;
  232. color: #f47d31;
  233. font-weight: bold;
  234. }
  235. .innercont .body .container-3 .benefit h2 {
  236. position: relative;
  237. display: inline-block;
  238. text-align: left;
  239. float: left;
  240. margin: 0;
  241. }
  242.  
  243. .innercont .body .icon-title {
  244. font-size: 30px;
  245. margin: 60px 0 30px;
  246. line-height: 36px;
  247. }
  248. .icons {
  249. position: relative;
  250. display: inline-block;
  251. width: 100%;
  252. float: left;
  253. margin: 40px 0;
  254. }
  255. .icons .icon {
  256. position: relative;
  257. display: inline-block;
  258. width: 25%;
  259. float: left;
  260. padding: 0 20px;
  261. box-sizing: border-box;
  262. }
  263. .icons .icon img {
  264. position: relative;
  265. display: inline-block;
  266. width: 100%;
  267. float: left;
  268. }
  269. .icons .icon h3 {
  270. position: relative;
  271. display: inline-block;
  272. position: relative;
  273. font-size: 17px;
  274. font-family: 'Work Sans';
  275. font-weight: 100;
  276. width: 100%;
  277. float: left;
  278. text-align: center;
  279. }
  280.  
  281. .be-smart {
  282. position: relative;
  283. display: inline-block;
  284. width: 100%;
  285. margin-top: 40px;
  286. }
  287. .innercont .body .be-smart h1 {
  288. position: relative;
  289. display: inline-block;
  290. width: 25%;
  291. font-size: 37px;
  292. font-family: 'Work Sans';
  293. font-weight: 100;
  294. float: left;
  295. text-align: center;
  296. }
  297. .innercont .body .be-smart h1 span {
  298. color: #8ec640;
  299. }
  300. .innercont .body .be-smart h2 {
  301. position: relative;
  302. display: inline-block;
  303. width: 75%;
  304. float: left;
  305. text-align: left;
  306. }
  307. /* MEDIA QUERIES */
  308.  
  309.  
  310.  
  311. /* ----------------------------------------------------*/
  312. /* Code That Doesnt Change Between Mobile Resolution */
  313. /* ----------------------------------------------------*/
  314. @media only screen and (min-width : 0px) and (max-width : 992px) {
  315. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  316. .innercont .body .column.c2 { width: 100% }
  317. .container-3 .questions {
  318. width: 100%
  319. }
  320. .container-3 .benefits {
  321. width: 100%;
  322. text-align: center;
  323. }
  324. .innercont .body .container-3 .benefit {
  325. height: auto;
  326. width: 33%;
  327. }
  328. .innercont .body .container-3 .benefit img {
  329. float: none;
  330. }
  331. .innercont .body .container-3 .benefit h1 { width: 100%; text-align: center; }
  332. .innercont .body .container-3 .benefit h2 { width: 100%; text-align: center; }
  333. .innercont .body .container-3 .questions h2 {
  334. text-align: center;
  335. }
  336. .innercont .body .container-3 .title-one {
  337. text-align: center;
  338. margin: 40px 0;
  339. }
  340. }
  341.  
  342.  
  343. /* ----------------------------------------------------*/
  344. /* Custom, iPhone Retina */
  345. /* ----------------------------------------------------*/
  346. @media only screen and (max-width : 320px) {
  347.  
  348. }
  349.  
  350.  
  351. /* ----------------------------------------------------*/
  352. /* Extra Small Devices, Phones */
  353. /* ----------------------------------------------------*/
  354. @media only screen and (min-width : 320px) and (max-width : 480px) {
  355. .icons .icon {
  356. width: 100%;
  357. padding: 30px 0;
  358. border: 1px solid #cacaca;
  359. }
  360. .innercont .body .be-smart h1 {
  361. width: 100%;
  362. }
  363. .innercont .body .be-smart h2 {
  364. width: 100%;
  365. }
  366. .innercont .body .container-3 .benefit {
  367. height: auto;
  368. width: 100%;
  369. margin: 10px 0;
  370. padding: 10px 0;;
  371. background-color: #ffffff;
  372. border: 1px solid #d1d1d1;
  373. }
  374. .innercont .body .container-3 .large-text {
  375. width: 100%;
  376. text-align: center;
  377. }
  378. .innercont .body .container-3 h2 {
  379. width: 100%;
  380. }
  381. .image-3 {
  382. display: none;
  383. }
  384. .innercont .body .container-2 h2 {
  385. width: 100%;
  386. padding: 30px 0px;
  387. }
  388. }
  389.  
  390.  
  391. /* ----------------------------------------------------*/
  392. /* Small Devices, Tablets */
  393. /* ----------------------------------------------------*/
  394. @media only screen and (min-width : 480px) and (max-width : 768px) {
  395. .icons .icon {
  396. width: 50%;
  397. margin: 20px 0;
  398. } .innercont .body .container-3 .large-text {
  399. width: 100%;
  400. text-align: center;
  401. }
  402. .innercont .body .container-3 h2 {
  403. width: 100%;
  404. }
  405. .image-3 {
  406. display: none;
  407. }
  408. .innercont .body .container-2 h2 {
  409. width: 100%;
  410. }
  411. }
  412.  
  413.  
  414. /* ----------------------------------------------------*/
  415. /* Medium Devices, Desktops */
  416. /* ----------------------------------------------------*/
  417. @media only screen and (min-width : 768px) and (max-width : 992px) {
  418.  
  419. }
  420.  
  421.  
  422. /* ----------------------------------------------------*/
  423. /* Large Devices, Wide Screens */
  424. /* ----------------------------------------------------*/
  425. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  426.  
  427. }
  428.  
  429.  
  430.  
  431. /* ----------------------------------------------------*/
  432. /* SPECIAL */
  433. /* ----------------------------------------------------*/
  434. @media only screen and (min-width : 1200px) and (max-width : 1550px) {
  435.  
  436. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!