API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 9th, 2017
128
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.42 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: auto;
  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.  
  172. </head>
  173.  
  174. <body>
  175.  
  176. <div class="menu">
  177. <ul>
  178. <li class="menu-email">EMAIL</li>
  179. <li class="menu-print">PRINT</li>
  180. <li class="menu-help">HELP</li>
  181. </ul>
  182. </div>
  183. <div class="container">
  184. <div class="main">
  185.  
  186. <svg width="100%" height="100%" viewbox="0 0 600 340 " preserveAspectRatio="none">
  187. <polygon class="main-roof" points="160,70 439,112 560,168 282,147"></polygon>
  188.  
  189. <polygon class="main-roof" points="290,212 357,180 367,208"></polygon>
  190.  
  191. <polygon class="main-roof" points="361,180 498,208 372,208"></polygon>
  192.  
  193. <polygon class="main-wall" points="76,261 77,170 160,75 281,150 285,160 281,163 282,270 207,267 207,163 126,172 126,263"></polygon>
  194.  
  195. <polygon class="main-wall" points="293,152 548,170 550,235 509,235 508.5,221 492,221 492,235 480,235 479,213 490,213 491,211 496,209 498,208 361,176 290,209 289,159"></polygon>
  196.  
  197. <polygon class="main-wall" points="550,235 509,235 509,243 492,243 492,235 480,235 480,253 550,245"></polygon>
  198.  
  199. <polygon class="main-wall" points="473,213 428,213 430,258 474,254"></polygon>
  200.  
  201. <polygon class="main-wall" points="422,213 370,214 372,240 375,240 375,226 400,226 400,240 422,240"></polygon>
  202.  
  203. <polygon class="main-wall" points="422,240 423,259 372,264 372,240 375,240 376,255 400,253 400,240"></polygon>
  204.  
  205. <polygon class="main-wall" points="365,216 367,263.5 341,265.5 341,228 320,230 321,268 293,270 293,216"></polygon>
  206.  
  207. <polygon class="main-trim" points="64,173 66,176 150,80 150,75 "></polygon>
  208.  
  209. <polygon class="main-trim" points="160,75 160,70 288,149 288,152"></polygon>
  210.  
  211. <polygon class="main-trim" points="288,148 288,152 560,170 560,168"></polygon>
  212.  
  213. <polygon class="main-trim" points="290,209 290,212 357,180 367,208 372,208 361,180 498,208 361,176"></polygon>
  214.  
  215. <polygon class="main-trim" points="290,209 367,208 498,208 498,209 498,210 497,211 491,214 480,214 482,290 475,290 475,214 429,214 431,299 425,299 424,214 373,214 375,310 367,310 364,215 291,216"></polygon>
  216.  
  217. <polygon class="main-trim" points="281,150 285,160 281,165 281,300 293,300 290,163 293,152"></polygon>
  218.  
  219. <polygon class="main-trim" points="207,294 207,163 126,172 126,287 130,287 130,176 203,169 203,294"></polygon>
  220.  
  221. <polygon class="main-trim" points="75,170 74,282 77,282 77,170"></polygon>
  222.  
  223. <polygon class="main-trim" points="548,170 549,170 553,265 551,265"></polygon>
  224.  
  225. <polygon class="main-wainscot" points="77,282 77,261 125,263 125,287 "></polygon>
  226.  
  227. <polygon class="main-wainscot" points="207,266 207,295 282,301 282,270"></polygon>
  228.  
  229. <polygon class="main-wainscot" points="293,270 293,300 322,297 321,268"></polygon>
  230.  
  231. <polygon class="main-wainscot" points="342,266 342,294 366,290 366,264"></polygon>
  232.  
  233. <polygon class="main-wainscot" points="374,264 375,290 423,283 423,259"></polygon>
  234.  
  235. <polygon class="main-wainscot" points="430,258 431,282 475,277 474,254"></polygon>
  236.  
  237. <polygon class="main-wainscot" points="481,253 482,276 551,265 550,245"></polygon>
  238. </svg>
  239.  
  240. </div>
  241.  
  242. </div>
  243.  
  244.  
  245. <div class="foot-box">
  246. <div class="control-panel">
  247. <div class="control-panel1 flex roof">
  248. <label>ROOF</label>
  249. <span class="button-r-1 color-1"></span>
  250. <span class="button-r-2 color-2"></span>
  251. <span class="button-r-3 color-3"></span>
  252. <span class="button-r-4 color-4"></span>
  253. <span class="button-r-5 color-5"></span>
  254. <span class="button-r-6 color-6"></span>
  255. <span class="button-r-7 color-7"></span>
  256. <span class="button-r-8 color-8"></span>
  257. <span class="button-r-9 color-9"></span>
  258. <span class="button-r-10 color-10"></span>
  259. <span class="button-r-11 color-11"></span>
  260. <span class="button-r-12 color-12"></span>
  261. <span class="button-r-13 color-13"></span>
  262. <span class="button-r-14 color-14"></span>
  263. <span class="button-r-15 color-15"></span>
  264. <span class="button-r-16 color-16"></span>
  265. <span class="button-r-17 color-17"></span>
  266. <span class="button-r-18 color-18"></span>
  267. <span class="button-r-19 color-19"></span>
  268. <span class="button-r-20 color-20"></span>
  269. </div>
  270.  
  271. <div class="control-panel2 flex wall">
  272. <label>WALL</label>
  273. <span class="button-w-1 color-1"></span>
  274. <span class="button-w-2 color-2"></span>
  275. <span class="button-w-3 color-3"></span>
  276. <span class="button-w-4 color-4"></span>
  277. <span class="button-w-5 color-5"></span>
  278. <span class="button-w-6 color-6"></span>
  279. <span class="button-w-7 color-7"></span>
  280. <span class="button-w-8 color-8"></span>
  281. <span class="button-w-9 color-9"></span>
  282. <span class="button-w-10 color-10"></span>
  283. <span class="button-w-11 color-11"></span>
  284. <span class="button-w-12 color-12"></span>
  285. <span class="button-w-13 color-13"></span>
  286. <span class="button-w-14 color-14"></span>
  287. <span class="button-w-15 color-15"></span>
  288. <span class="button-w-16 color-16"></span>
  289. <span class="button-w-17 color-17"></span>
  290. <span class="button-w-18 color-18"></span>
  291. <span class="button-w-19 color-19"></span>
  292. <span class="button-w-20 color-20"></span>
  293. </div>
  294. <div class="control-panel3 flex trim">
  295. <label>TRIM</label>
  296. <span class="button-t-1 color-1"></span>
  297. <span class="button-t-2 color-2"></span>
  298. <span class="button-t-3 color-3"></span>
  299. <span class="button-t-4 color-4"></span>
  300. <span class="button-t-5 color-5"></span>
  301. <span class="button-t-6 color-6"></span>
  302. <span class="button-t-7 color-7"></span>
  303. <span class="button-t-8 color-8"></span>
  304. <span class="button-t-9 color-9"></span>
  305. <span class="button-t-10 color-10"></span>
  306. <span class="button-t-11 color-11"></span>
  307. <span class="button-t-12 color-12"></span>
  308. <span class="button-t-13 color-13"></span>
  309. <span class="button-t-14 color-14"></span>
  310. <span class="button-t-15 color-15"></span>
  311. <span class="button-t-16 color-16"></span>
  312. <span class="button-t-17 color-17"></span>
  313. <span class="button-t-18 color-18"></span>
  314. <span class="button-t-19 color-19"></span>
  315. <span class="button-t-20 color-20"></span>
  316. </div>
  317. <div class="control-panel4 flex wainscot">
  318. <label>WAINSCOT</label>
  319. <span class="button-s-1 color-1"></span>
  320. <span class="button-s-2 color-2"></span>
  321. <span class="button-s-3 color-3"></span>
  322. <span class="button-s-4 color-4"></span>
  323. <span class="button-s-5 color-5"></span>
  324. <span class="button-s-6 color-6"></span>
  325. <span class="button-s-7 color-7"></span>
  326. <span class="button-s-8 color-8"></span>
  327. <span class="button-s-9 color-9"></span>
  328. <span class="button-s-10 color-10"></span>
  329. <span class="button-s-11 color-11"></span>
  330. <span class="button-s-12 color-12"></span>
  331. <span class="button-s-13 color-13"></span>
  332. <span class="button-s-14 color-14"></span>
  333. <span class="button-s-15 color-15"></span>
  334. <span class="button-s-16 color-16"></span>
  335. <span class="button-s-17 color-17"></span>
  336. <span class="button-s-18 color-18"></span>
  337. <span class="button-s-19 color-19"></span>
  338. <span class="button-s-20 color-20"></span>
  339. </div>
  340. </div>
  341.  
  342.  
  343. <div class="text">
  344. <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>
  345. </div>
  346. </div>
  347.  
  348. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  349. <script src="script.js"></script>
  350. </body>
  351.  
  352. </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!