API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Apr 5th, 2017
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.13 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. .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: #dfdfdf;
  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. .innercont .title {
  51. position: relative;
  52. display: inline-block;
  53. float: left;
  54. width: 100%;
  55. margin: 20px 0 20px;
  56. }
  57. .innercont .title.login,
  58. .innercont .title.your-account-team,
  59. .innercont .title.request-a-catalogue {
  60. padding-top: 20px;
  61. margin: 40px 0 20px;
  62. border-top: 2px solid #d3d3d3;
  63. }
  64. .innercont .title.account-manager:after,
  65. .innercont .title.sales-support-team:after,
  66. .innercont .title.customer-services-team:after {
  67. display: none;
  68. }
  69.  
  70.  
  71. .innercont .title h1 {
  72. font-size: 24px;
  73. font-family: sans-serif;
  74. font-weight: 600;
  75. color: #8ec640;
  76. }
  77. .innercont .title:after {
  78. content: '';
  79. position: absolute;
  80. bottom: -10px;
  81. width: 100px;
  82. height: 2px;
  83. background-color: #8ec640;
  84. }
  85. .innercont .body {
  86. position: relative;
  87. display: inline-block;
  88. float: left;
  89. width: 100%;
  90. margin-bottom: 100px;
  91. }
  92. .innercont .body .column {
  93. position: relative;
  94. display: inline-block;
  95. height: 100%;
  96. float: left;
  97. }
  98. .innercont .body .column.c1 { width: 30%; margin-right: 5%; }
  99. .innercont .body .column.c2 { width: 65%; padding: 0 150px; box-sizing: border-box; }
  100. .innercont .body .column.c1 h2 {
  101. font-weight: bold;
  102. font-size: 16px;
  103. }
  104. .innercont .body .body {
  105. margin-bottom: 0px;
  106. }
  107. .innercont .body h2 {
  108. position: relative;
  109. font-size: 15px;
  110. font-family: sans-serif;
  111. font-weight: 100;
  112. color: #6b6b6b;
  113. margin: 7px 0;
  114. line-height: 25px;
  115. width: 100%;
  116. float: left;
  117. }
  118. .innercont .body h2 a {
  119. font-weight: 600;
  120. color: #8ec640;
  121. text-decoration: none;
  122. }
  123.  
  124. .innercont .body .contact-details {
  125. position: relative;
  126. display: inline-block;
  127. margin: 20px 0;
  128. }
  129. .innercont .body .contact-details h2 {
  130. position: relative;
  131. display: inline-block;
  132. width: 100%;
  133. color: #595959;
  134. font-weight: 100;
  135. line-height: 10px;
  136. }
  137. .innercont .body .contact-details .name {
  138. color: #8ec640;
  139. }
  140.  
  141.  
  142. .email-modal {
  143. position: fixed;
  144. display: inline-block;
  145. top: -100px;
  146. left: 50%;
  147. transform: translateX(-50%);
  148. width: 100%;
  149. max-width: 600px;
  150. padding: 10px 0 12px;
  151. box-sizing: border-box;
  152. z-index: 100;
  153. border-radius: 5px;
  154. animation: email_animation 5s 0.5s 1 normal forwards;
  155. }
  156. @keyframes email_animation {
  157. 0% { top: -100px; }
  158. 20% { top: 30px; }
  159. 80% { top: 30px; }
  160. 100% { top: -100px; }
  161. }
  162. .email-modal.email-successful { background-color: #8ec640; }
  163. .email-modal.email-unsuccessful { background-color: #e04040; }
  164. .email-modal h1 {
  165. position: relative;
  166. display: inline-block;
  167. width: 100%;
  168. color: #000000;
  169. font-family: sans-serif;
  170. font-weight: bolf;
  171. font-size: 12px;
  172. text-align: center;
  173. }
  174.  
  175.  
  176.  
  177. /* section - login */
  178.  
  179. .download {
  180. position: relative;
  181. display: inline-block;
  182. width: 100%;
  183. height: 60px;
  184. background: #dddddd;
  185. border: 1px solid #bebebe;;
  186. }
  187. .download a {
  188. position: relative;
  189. display: inline-block;
  190. width: 100%;
  191. height: 100%;
  192. color: #000000;
  193. text-decoration: none;
  194. }
  195. .download img {
  196. position: relative;
  197. display: inline-block;
  198. width: 40px;
  199. height: 40px;
  200. margin: 10px 10px;
  201. float: left;
  202. }
  203. .download h1 {
  204. position: relative;
  205. display: inline-block;
  206. top: 50%;
  207. transform: translateY(-50%);
  208. font-weight: 100;
  209. font-family: sans-serif;
  210. font-size: 17px;
  211. float: left;
  212. }
  213.  
  214.  
  215. /* section - account team */
  216.  
  217. .body .contact {
  218. position: relative;
  219. display: inline-block;
  220. float: none;
  221. width: 230px;
  222. margin: 20px 20px 20px 0;
  223. background-color: #e1e1e1;
  224. border: 1px solid #c8c8c8;
  225. padding: 20px;
  226. text-align: center;
  227. }
  228. .body .contact.manager {
  229. width: auto;
  230. text-align: left;
  231. }
  232. .body .contact.manager .contact-details{
  233. padding-left: 140px;
  234. }
  235. .body .contact img {
  236. position: relative;
  237. display: inline-block;
  238. float: auto;
  239. max-width: 125px;
  240. }
  241. .body .contact.manager img {
  242. position: absolute;
  243. }
  244. .body .contact .contact-details {
  245. position: relative;
  246. display: inline-block;
  247. float: left;
  248. max-width: 100%;
  249. margin-top: 20px;
  250. }
  251.  
  252. .innercont .body .contact .contact-details h2 {
  253. position: relative;
  254. display: inline-block;
  255. margin: 0;
  256. line-height: 20px;
  257. width: 100%;
  258. }
  259. .innercont .body .contact .contact-details .name { color: #8ec640; font-weight: bold; }
  260. .innercont .body .contact .contact-details .role {color: #595959;font-weight: 100;}
  261. .innercont .body .contact .contact-details .description { margin-top: 5px; }
  262. .innercont .title.account-manager { margin: 0; }
  263. .innercont .title.sales-support-team { margin: 0; }
  264. .innercont .title.customer-services-team { margin: 0; }
  265. .innercont .title.account-manager h1 { font-size: 20px; font-weight: 100; }
  266. .innercont .title.sales-support-team h1 { font-size: 20px; font-weight: 100; }
  267. .innercont .title.customer-services-team h1 { font-size: 20px; font-weight: 100; }
  268.  
  269.  
  270.  
  271.  
  272. /* section - request a catalogue */
  273.  
  274.  
  275. .body .form {
  276. position: relative;
  277. display: inline-block;
  278. float: left;
  279. width: 100%;
  280. background-color: #e3e3e3;
  281. border: 1px solid #c9c9c9;
  282. box-sizing: border-box;
  283. }
  284. .body .form form {
  285. position: relative;
  286. display: inline-block;
  287. width: 90%;
  288. padding: 0 5% 20px 5%;
  289. }
  290. .body .form h1 {
  291. position: relative;
  292. display: inline-block;
  293. width: 100%;
  294. font-size: 26px;
  295. font-family: sans-serif;
  296. font-weight: bold;
  297. color: #8ec640;
  298. text-align: left;
  299. margin: 20px 0;
  300. padding: 0 5%;
  301. }
  302. .body .form input,
  303. .body .form select {
  304. color: #8ec640;
  305. font-size: 13px;
  306. border: none;
  307. padding: 13px 5px;
  308. margin: 3px 0;
  309. background-color: #ffffff;
  310. border-radius: 2px;
  311. font-family: arial;
  312. box-sizing: border-box;
  313. border: 1px solid #c9c9c9;
  314. }
  315. .body .form input:focus,
  316. .body .form input:valid {
  317. box-shadow: none;
  318. outline: none;
  319. background-position: 0 0;
  320. border: 1px solid #c9c9c9;
  321. }
  322. .body .form .inname { width: 100%; float: left; }
  323. .body .form .injobtitle { width: 49%; float: left; }
  324. .body .form .incompany { width: 49%; float: right; }
  325. .body .form .inemail { width: 49%; float: left; }
  326. .body .form .inphone { width: 49%; float: right; }
  327. .body .form .inaddress { width: 100%; float: left; }
  328. .body .form .indropdown { width: 100%; float: left; -webkit-appearance: none; }
  329.  
  330. .body .form .buttoncontainer {
  331. position: relative;
  332. display: inline-block;
  333. width: 100%;
  334. }
  335. .body .form .insubmit {
  336. font-size: 14px;
  337. float: left;
  338. padding: 15px 40px;
  339. font-family: 'Raleway';
  340. margin-top: 10px;
  341. border: 2px solid #8ec640;
  342. background-color: #8ec640;
  343. color: #ffffff;
  344. width: 100%;
  345. cursor: pointer;
  346. transition: all 0.2s ease;
  347. -webkit-appearance: none;
  348. }
  349. .body .form .insubmit:hover {
  350. background-color: #ffffff;
  351. color: #8ec640;
  352. }
  353. .innercont .body .column.c1 .contact-details h2 {
  354. font-weight: 100;
  355. }
  356.  
  357. /* MEDIA QUERIES */
  358.  
  359.  
  360.  
  361. /* ----------------------------------------------------*/
  362. /* Code That Doesnt Change Between Mobile Resolution */
  363. /* ----------------------------------------------------*/
  364. @media only screen and (min-width : 0px) and (max-width : 992px) {
  365. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  366. .innercont .body .column.c2 { width: 100%; padding: 0; }
  367. }
  368.  
  369.  
  370. /* ----------------------------------------------------*/
  371. /* Custom, iPhone Retina */
  372. /* ----------------------------------------------------*/
  373. @media only screen and (max-width : 320px) {
  374. .body .form .injobtitle { width: 100%; float: left; }
  375. .body .form .incompany { width: 100%; float: left; }
  376. .body .form .inemail { width: 100%; float: left; }
  377. .body .form .inphone { width: 100%; float: left; }
  378. .body .contact.manager .contact-details { margin-left: 0; margin-top: 0; }
  379. }
  380.  
  381.  
  382. /* ----------------------------------------------------*/
  383. /* Extra Small Devices, Phones */
  384. /* ----------------------------------------------------*/
  385. @media only screen and (min-width : 320px) and (max-width : 480px) {
  386. .body .form .injobtitle { width: 100%; float: left; }
  387. .body .form .incompany { width: 100%; float: left; }
  388. .body .form .inemail { width: 100%; float: left; }
  389. .body .form .inphone { width: 100%; float: left; }
  390. .body .contact {
  391. position: relative;
  392. display: inline-block;
  393. float: none;
  394. width: 80%;
  395. box-sizing: border-box;
  396. margin: 20px 0px 20px 0;
  397. background-color: #e1e1e1;
  398. border: 1px solid #c8c8c8;
  399. padding: 20px 20px 0px 20px;
  400. text-align: center;
  401. }
  402. .body .contact.manager .contact-details { margin-left: 0; margin-top: 0; }
  403. }
  404.  
  405.  
  406. /* ----------------------------------------------------*/
  407. /* Small Devices, Tablets */
  408. /* ----------------------------------------------------*/
  409. @media only screen and (min-width : 480px) and (max-width : 768px) {
  410. .body .contact.manager .contact-details { margin-left: 0; margin-top: 0; }
  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. }
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!