API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 9th, 2017
184
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.92 KB | None | 0 0
raw download clone embed print report
  1. </DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <style>
  6. .container {
  7. background: url(bg.jpg) no-repeat;
  8. background-size: contain;
  9. max-width: 960px;
  10. height: 565px;
  11. margin: auto;
  12. }
  13.  
  14. .menu {
  15. position: relative;
  16. height: 30px;
  17. margin-left: auto;
  18. font-family: 'Raleway', sans-serif;
  19. margin-top: 2%;
  20. margin-right: auto;
  21. width: 960px;
  22. }
  23.  
  24. .menu ul {
  25. list-style: none;
  26. padding-left: 0;
  27. }
  28.  
  29. .menu ul li {
  30. float: left;
  31. margin-right: 5%;
  32. cursor: pointer;
  33. }
  34.  
  35. .main .main-roof,
  36. .main .main-wall,
  37. .main .main-trim,
  38. .main .main-wainscot {
  39. fill: none;
  40. stroke-width: 1;
  41. opacity: 0.9;
  42. }
  43. /* control area*/
  44.  
  45. .control-panel {
  46. max-width: 514px;
  47. height: auto;
  48. background-color: #fff;
  49. border: 1px solid;
  50. margin-right: 15px;
  51. float: left;
  52. }
  53.  
  54. .mt20 {
  55. margin-top: 20px;
  56. width: 960px;
  57. }
  58.  
  59. .flex {
  60. position: flex;
  61. }
  62.  
  63. .flex label {
  64. display: inherit;
  65. float: left;
  66. width: 75px;
  67. text-align: right;
  68. padding-right: 7px;
  69. padding-top: 14px;
  70. font-size: 12px;
  71. }
  72.  
  73. .flex>span {
  74. display: inline-flex;
  75. width: 15px;
  76. height: 15px;
  77. margin: 1px;
  78. margin-top: 12px;
  79. cursor: pointer;
  80. box-shadow: 1px 1px 1px #888;
  81. }
  82.  
  83. .color-1 {
  84. background-color: #e3e7e6;
  85. }
  86.  
  87. .color-2 {
  88. background-color: #dfe4dd;
  89. }
  90.  
  91. .color-3 {
  92. background-color: #f9e8ca;
  93. }
  94.  
  95. .color-4 {
  96. background-color: #cfc1a6;
  97. }
  98.  
  99. .color-5 {
  100. background-color: #bc9973;
  101. }
  102.  
  103. .color-6 {
  104. background-color: #4c332c;
  105. }
  106.  
  107. .color-7 {
  108. background-color: #2a2625;
  109. }
  110.  
  111. .color-8 {
  112. background-color: #302923;
  113. }
  114.  
  115. .color-9 {
  116. background-color: #1d5e72;
  117. }
  118.  
  119. .color-10 {
  120. background-color: #013252;
  121. }
  122.  
  123. .color-11 {
  124. background-color: #821818;
  125. }
  126.  
  127. .color-12 {
  128. background-color: #a11212;
  129. }
  130.  
  131. .color-13 {
  132. background-color: #3c1f24;
  133. }
  134.  
  135. .color-14 {
  136. background-color: #918a78;
  137. }
  138.  
  139. .color-15 {
  140. background-color: #7b9a78;
  141. }
  142.  
  143. .color-16 {
  144. background-color: #16352d;
  145. }
  146.  
  147. .color-17 {
  148. background-color: #6d7675;
  149. }
  150.  
  151. .color-18 {
  152. background-color: #323e3c;
  153. }
  154.  
  155. .color-19 {
  156. background-color: #141414;
  157. }
  158.  
  159. .color-20 {
  160. background-color: #29423b;
  161. }
  162.  
  163. .foot-box {
  164. font-family: 'Raleway', sans-serif;
  165. width: 960px;
  166. margin-left: auto;
  167. margin-right: auto;
  168. height: auto;
  169. }
  170. </style>>
  171. </head>
  172.  
  173. <body>
  174. <div class="menu">
  175. <ul>
  176. <li class="menu-email">EMAIL</li>
  177. <li class="menu-print">PRINT</li>
  178. <li class="menu-help">HELP</li>
  179. </ul>
  180. </div>
  181. <div class="container">
  182. <div class="main">
  183. <svg width="100%" height="100%" viewbox="0 0 1200 180 " preserveAspectRatio="none">
  184.  
  185. <polygon class="main-roof" points="115,103 643,93 930,47 372,72"></polygon>
  186.  
  187. <polygon class="main-roof" points="30,120 170,112 649,105 513,118 "></polygon>
  188.  
  189. <polygon class="main-roof" points="610,49 642,57 600,56 576,57"></polygon>
  190.  
  191. <polygon class="main-wainscot" points="972,139 1093.5,137 1094,148 972,150 "></polygon>
  192.  
  193. <polygon class="main-wainscot" points="654,142 822,140 822,152.5 654,156 " ></polygon>
  194.  
  195. <polygon class="main-wainscot" points="620,143 641,143 641,156 620,155.5 "></polygon>
  196.  
  197. <polygon class="main-wainscot" points="524,154 580,154.5 580,143 521,142"></polygon>
  198.  
  199. <polygon class="main-wainscot" points="438,141 505,142 505,153 440,152 "></polygon>
  200.  
  201. <polygon class="main-wainscot" points="361.5,140 425,141 425,151.5 362,150.5"></polygon>
  202.  
  203. <polygon class="main-wainscot" points="288,140 350,140 350,150 288,149.5"></polygon>
  204.  
  205. <polygon class="main-wainscot" points="220,139.5 275,140 275,149 220,148"></polygon>
  206.  
  207. <polygon class="main-wainscot" points="156.7,138 206.5,138 206.5,148 157.7,147"></polygon>
  208.  
  209. <polygon class="main-wall" points="160,112 155,103 605,96 628,98 630,103 622,105"></polygon>
  210.  
  211. <polygon class="main-wall" points="654,142 654,95 915,52 1095,100 1095,138 970,140 970,96 820,94 820,140"></polygon>
  212.  
  213. <polygon class="main-wall" points="632,96 635,98 632,105 640,105 640,96"></polygon>
  214.  
  215. <polygon class="main-wall" points="518,128 515,121 645,109 645,127 615,119.5 540,120"></polygon>
  216.  
  217. <polygon class="main-wall" points="580,57 580,63 640,60 640,57 600 55.5 "></polygon>
  218.  
  219. <polygon class="main-wall" points="157,122 157,138 207,138 208,122 "></polygon>
  220.  
  221. <polygon class="main-wall" points="220,122 275,122 275,140 220,140 220,136 250,136 250,127 220,127"></polygon>
  222.  
  223. <polygon class="main-wall" points="285,122 350,121.5 350,140 287.5,140 287.5,136 310,136 310,127 285,127"></polygon>
  224.  
  225. <polygon class="main-wall" points="360,121.5 425,121 425,141 362,140 362,136 375,136 375,127 360,127"></polygon>
  226.  
  227. <polygon class="main-wall" points="438,121 487,120 490,122 504,123 506,126 495,126 495,138 505,138 505,142 438,141 438,138 458,138 458,125 438,125"></polygon>
  228.  
  229. <polygon class="main-wall" points="523,126 538,120 614,120 640,128 640,143 624,143 623,126 580,126 580,143 520,142 520,138 536,138 536,126 "></polygon>
  230.  
  231. <polygon class="main-wall" points="640,96 652,96 652,105 640,105"></polygon>
  232.  
  233. <polygon class="main-trim" points="33,123 32,120 507,118 507,120"></polygon>
  234.  
  235. <polygon class="main-trim" points="508.5,118.5 508.5,121.5 654,108.5 654,104.5 "></polygon>
  236.  
  237. <polygon class="main-trim" points="119,103 120,104.7 654,95.5 654,93"></polygon>
  238.  
  239. <polygon class="main-trim" points="654,95.5 648,92 928,47 1139,99 1137,100 1110,100 1110,102 1094,103 1094,101.5 1105,101 1105,99.5 1095,99.5 920,53"></polygon>
  240.  
  241. <polygon class="main-trim" points="125,104 135,104 142,106 156,107 158,109 140,107.5"></polygon>
  242.  
  243. <polygon class="main-trim" points="605,96 628,98 630,103 622,105 632,105 635,100 635,98 630,96"></polygon>
  244.  
  245. <polygon class="main-trim" points="653,109 645,109 645,128 640,128 640,156 653,156"></polygon>
  246.  
  247. <polygon class="main-trim" points="31,123 60,123 60,150 49,150 49,126"></polygon>
  248.  
  249. <polygon class="main-trim" points="92,123 105,123 105,151 92,151 "></polygon>
  250.  
  251. <polygon class="main-trim" points="145,122 160,122.5 160,152 145,152"></polygon>
  252.  
  253. <polygon class="main-trim" points="207,122 222,122 222,153.2 207,153.3"></polygon>
  254.  
  255. <polygon class="main-trim" points="273,121.5 287,121.5 287,155 273,155"></polygon>
  256.  
  257. <polygon class="main-trim" points="350,121 360,121 362,156 350,156"></polygon>
  258.  
  259. <polygon class="main-trim" points="425,120.5 440,121 440,158 425,158"></polygon>
  260.  
  261. <polygon class="main-trim" points="486,120 517,120 520,160 505,160 505,123 493,122"></polygon>
  262.  
  263. <polygon class="main-trim" points="641,128 645,127 615,119.5 540,120 615,120"></polygon>
  264.  
  265. <polygon class="main-trim" points="222,127 250,127 250,136 222,136 222,135 245,135 245,128 227,128 227,136 222,136 "></polygon>
  266.  
  267. <polygon class="main-trim" points="287,127 310,127 310,136.5 287,136.5 287,135 305,135 305,128.5 287,128.5"></polygon>
  268.  
  269. <polygon class="main-trim" points="362,136 375,136 375,127 360,127 360,128 371,128 371,135 362,135"></polygon>
  270.  
  271. <polygon class="main-trim" points="506,126 495,126 495,138 505,138 505,137 497,137 497,127 505,127"></polygon>
  272.  
  273. <polygon class="main-trim" points="440,138 458,138 458,125 440,125 440,127 454,127 454,136 440,136"></polygon>
  274.  
  275. <polygon class="main-trim" points="520,138 536,138 536,126 525,126 520,128 530,128 530,136 520,136"></polygon>
  276.  
  277. <polygon class="main-trim" points="623,156 623,126 580,126 580,155 587,155 588,128 610,128 610,156 "></polygon>
  278.  
  279. <polygon class="main-trim" points="970,150 970,96 820,94 821,153 831,152 831,98 962,99 962,150"></polygon>
  280.  
  281. </svg>
  282. </div>
  283.  
  284. <div class="foot-box">
  285. <div class="control-panel">
  286. <div class="control-panel1 flex roof">
  287. <label>ROOF</label>
  288. <span class="button-r-1 color-1"></span>
  289. <span class="button-r-2 color-2"></span>
  290. <span class="button-r-3 color-3"></span>
  291. <span class="button-r-4 color-4"></span>
  292. <span class="button-r-5 color-5"></span>
  293. <span class="button-r-6 color-6"></span>
  294. <span class="button-r-7 color-7"></span>
  295. <span class="button-r-8 color-8"></span>
  296. <span class="button-r-9 color-9"></span>
  297. <span class="button-r-10 color-10"></span>
  298. <span class="button-r-11 color-11"></span>
  299. <span class="button-r-12 color-12"></span>
  300. <span class="button-r-13 color-13"></span>
  301. <span class="button-r-14 color-14"></span>
  302. <span class="button-r-15 color-15"></span>
  303. <span class="button-r-16 color-16"></span>
  304. <span class="button-r-17 color-17"></span>
  305. <span class="button-r-18 color-18"></span>
  306. <span class="button-r-19 color-19"></span>
  307. <span class="button-r-20 color-20"></span>
  308. </div>
  309.  
  310. <div class="control-panel2 flex wall">
  311. <label>WALL</label>
  312. <span class="button-w-1 color-1"></span>
  313. <span class="button-w-2 color-2"></span>
  314. <span class="button-w-3 color-3"></span>
  315. <span class="button-w-4 color-4"></span>
  316. <span class="button-w-5 color-5"></span>
  317. <span class="button-w-6 color-6"></span>
  318. <span class="button-w-7 color-7"></span>
  319. <span class="button-w-8 color-8"></span>
  320. <span class="button-w-9 color-9"></span>
  321. <span class="button-w-10 color-10"></span>
  322. <span class="button-w-11 color-11"></span>
  323. <span class="button-w-12 color-12"></span>
  324. <span class="button-w-13 color-13"></span>
  325. <span class="button-w-14 color-14"></span>
  326. <span class="button-w-15 color-15"></span>
  327. <span class="button-w-16 color-16"></span>
  328. <span class="button-w-17 color-17"></span>
  329. <span class="button-w-18 color-18"></span>
  330. <span class="button-w-19 color-19"></span>
  331. <span class="button-w-20 color-20"></span>
  332. </div>
  333. <div class="control-panel3 flex trim">
  334. <label>TRIM</label>
  335. <span class="button-t-1 color-1"></span>
  336. <span class="button-t-2 color-2"></span>
  337. <span class="button-t-3 color-3"></span>
  338. <span class="button-t-4 color-4"></span>
  339. <span class="button-t-5 color-5"></span>
  340. <span class="button-t-6 color-6"></span>
  341. <span class="button-t-7 color-7"></span>
  342. <span class="button-t-8 color-8"></span>
  343. <span class="button-t-9 color-9"></span>
  344. <span class="button-t-10 color-10"></span>
  345. <span class="button-t-11 color-11"></span>
  346. <span class="button-t-12 color-12"></span>
  347. <span class="button-t-13 color-13"></span>
  348. <span class="button-t-14 color-14"></span>
  349. <span class="button-t-15 color-15"></span>
  350. <span class="button-t-16 color-16"></span>
  351. <span class="button-t-17 color-17"></span>
  352. <span class="button-t-18 color-18"></span>
  353. <span class="button-t-19 color-19"></span>
  354. <span class="button-t-20 color-20"></span>
  355. </div>
  356. <div class="control-panel4 flex wainscot">
  357. <label>WAINSCOT</label>
  358. <span class="button-s-1 color-1"></span>
  359. <span class="button-s-2 color-2"></span>
  360. <span class="button-s-3 color-3"></span>
  361. <span class="button-s-4 color-4"></span>
  362. <span class="button-s-5 color-5"></span>
  363. <span class="button-s-6 color-6"></span>
  364. <span class="button-s-7 color-7"></span>
  365. <span class="button-s-8 color-8"></span>
  366. <span class="button-s-9 color-9"></span>
  367. <span class="button-s-10 color-10"></span>
  368. <span class="button-s-11 color-11"></span>
  369. <span class="button-s-12 color-12"></span>
  370. <span class="button-s-13 color-13"></span>
  371. <span class="button-s-14 color-14"></span>
  372. <span class="button-s-15 color-15"></span>
  373. <span class="button-s-16 color-16"></span>
  374. <span class="button-s-17 color-17"></span>
  375. <span class="button-s-18 color-18"></span>
  376. <span class="button-s-19 color-19"></span>
  377. <span class="button-s-20 color-20"></span>
  378. </div>
  379. </div>
  380.  
  381.  
  382. <div class="text">
  383. <span>The colors shown on this application will not be an exact representation of the colors. Astro Buidings offers due to variations in individual computer monitors. Please contact a local sales representative in your area for a personal color demonstration.</span>
  384. </div>
  385. </div>
  386. </div>
  387. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  388. <script src="script.js"></script>
  389.  
  390. </body>
  391.  
  392. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!