API tools faq
paste
Advertisement
Guest User

Updated HTML/CSS

a guest
Jul 3rd, 2019
368
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.17 KB | None | 0 0
raw download clone embed print report
  1. CSS
  2.  
  3. html,
  4. body {
  5. width: 100%;
  6. height: 100%;
  7. margin: 10px;
  8. padding: 0px;
  9. overflow-x: hidden;
  10. }
  11.  
  12. body {
  13. margin: 0;
  14. padding: 0;
  15. }
  16.  
  17. :root {
  18. --web-view-ids: Home_Page;
  19. }
  20.  
  21. #Home_Page * {
  22. margin: 0;
  23. padding: 0;
  24. }
  25.  
  26. #Home_Page {
  27. position: absolute;
  28. box-sizing: border-box;
  29. background: #E5E5E5;
  30. width: 1366px;
  31. height: 1536px;
  32. background-color: rgba(255, 255, 255, 1);
  33. overflow: hidden;
  34. margin: 0;
  35. padding: 0;
  36. background-position: center;
  37. vertical-align: middle;
  38. --web-view-name: Home Page;
  39. --web-view-id: Home_Page;
  40. --web-show-scale-controls: true;
  41. --web-refresh-for-changes: true;
  42. --web-enable-deep-linking: true;
  43. }
  44.  
  45. #Background {
  46. filter: blur(50px);
  47. fill: url(#Background_A0_Rectangle_2_pattern);
  48. }
  49.  
  50. .Background {
  51. position: absolute;
  52. overflow: visible;
  53. width: 1366px;
  54. height: 912px;
  55. left: 0px;
  56. top: -144px;
  57. }
  58.  
  59. #Categories {
  60. position: absolute;
  61. width: 195.667px;
  62. height: 439.129px;
  63. left: 30.916px;
  64. top: 294.791px;
  65. overflow: visible;
  66. }
  67.  
  68. #Box {
  69. position: absolute;
  70. width: 195.667px;
  71. height: 439.129px;
  72. left: 0px;
  73. top: 0px;
  74. overflow: visible;
  75. }
  76.  
  77. #Cube_Categories {
  78. fill: rgba(255, 255, 255, 1);
  79. stroke: rgb(112, 112, 112);
  80. stroke-width: 1px;
  81. stroke-linejoin: miter;
  82. stroke-linecap: butt;
  83. stroke-miterlimit: 4;
  84. shape-rendering: auto;
  85. }
  86.  
  87. .Cube_Categories {
  88. position: absolute;
  89. overflow: visible;
  90. width: 195.343px;
  91. height: 439.129px;
  92. left: 0px;
  93. top: 0px;
  94. }
  95.  
  96. #Line {
  97. fill: transparent;
  98. stroke: rgb(112, 112, 112);
  99. stroke-width: 1px;
  100. stroke-linejoin: miter;
  101. stroke-linecap: butt;
  102. stroke-miterlimit: 4;
  103. shape-rendering: auto;
  104. }
  105.  
  106. .Line {
  107. overflow: visible;
  108. position: absolute;
  109. top: 26.284px;
  110. left: 0.324px;
  111. width: 195.343px;
  112. height: 1px;
  113. }
  114.  
  115. #Cubes {
  116. position: absolute;
  117. left: 76.58px;
  118. top: 3.894px;
  119. overflow: visible;
  120. width: 40px;
  121. white-space: nowrap;
  122. text-align: left;
  123. font-family: MS UI Gothic;
  124. font-style: normal;
  125. font-weight: normal;
  126. font-size: 15px;
  127. color: rgba(0, 0, 0, 1);
  128. }
  129.  
  130. #Cubes_A0_Group_3 {
  131. position: absolute;
  132. width: 138px;
  133. height: 379.228px;
  134. left: 19.185px;
  135. top: 41.824px;
  136. overflow: visible;
  137. }
  138.  
  139. #ID2x2 {
  140. position: absolute;
  141. left: 65.309px;
  142. top: 0px;
  143. overflow: visible;
  144. width: 28px;
  145. white-space: nowrap;
  146. text-align: left;
  147. font-family: Unispace;
  148. font-style: normal;
  149. font-weight: bold;
  150. font-size: 15px;
  151. color: rgba(20, 146, 230, 1);
  152. }
  153.  
  154. #ID3x3 {
  155. position: absolute;
  156. left: 65.309px;
  157. top: 34.373px;
  158. overflow: visible;
  159. width: 28px;
  160. white-space: nowrap;
  161. text-align: left;
  162. font-family: Unispace;
  163. font-style: normal;
  164. font-weight: bold;
  165. font-size: 15px;
  166. color: rgba(20, 146, 230, 1);
  167. }
  168.  
  169. #ID4x4 {
  170. position: absolute;
  171. left: 65.309px;
  172. top: 80.273px;
  173. overflow: visible;
  174. width: 28px;
  175. white-space: nowrap;
  176. text-align: left;
  177. font-family: Unispace;
  178. font-style: normal;
  179. font-weight: bold;
  180. font-size: 15px;
  181. color: rgba(20, 146, 230, 1);
  182. }
  183.  
  184. #ID5x5 {
  185. position: absolute;
  186. left: 65.309px;
  187. top: 120.409px;
  188. overflow: visible;
  189. width: 28px;
  190. white-space: nowrap;
  191. text-align: left;
  192. font-family: Unispace;
  193. font-style: normal;
  194. font-weight: bold;
  195. font-size: 15px;
  196. color: rgba(20, 146, 230, 1);
  197. }
  198.  
  199. #ID6x6 {
  200. position: absolute;
  201. left: 65.309px;
  202. top: 160.546px;
  203. overflow: visible;
  204. width: 28px;
  205. white-space: nowrap;
  206. text-align: left;
  207. font-family: Unispace;
  208. font-style: normal;
  209. font-weight: bold;
  210. font-size: 15px;
  211. color: rgba(20, 146, 230, 1);
  212. }
  213.  
  214. #ID7x7 {
  215. position: absolute;
  216. left: 65.309px;
  217. top: 200.682px;
  218. overflow: visible;
  219. width: 28px;
  220. white-space: nowrap;
  221. text-align: left;
  222. font-family: Unispace;
  223. font-style: normal;
  224. font-weight: bold;
  225. font-size: 15px;
  226. color: rgba(20, 146, 230, 1);
  227. }
  228.  
  229. #Pyraminx {
  230. position: absolute;
  231. left: 36.665px;
  232. top: 240.819px;
  233. overflow: visible;
  234. width: 75px;
  235. white-space: nowrap;
  236. text-align: center;
  237. font-family: Unispace;
  238. font-style: normal;
  239. font-weight: bold;
  240. font-size: 15px;
  241. color: rgba(20, 146, 230, 1);
  242. }
  243.  
  244. #Megaminx {
  245. position: absolute;
  246. left: 36.665px;
  247. top: 280.955px;
  248. overflow: visible;
  249. width: 75px;
  250. white-space: nowrap;
  251. text-align: center;
  252. font-family: Unispace;
  253. font-style: normal;
  254. font-weight: bold;
  255. font-size: 15px;
  256. color: rgba(20, 146, 230, 1);
  257. }
  258.  
  259. #Skewb {
  260. position: absolute;
  261. left: 52.132px;
  262. top: 326.855px;
  263. overflow: visible;
  264. width: 47px;
  265. white-space: nowrap;
  266. text-align: center;
  267. font-family: Unispace;
  268. font-style: normal;
  269. font-weight: bold;
  270. font-size: 15px;
  271. color: rgba(20, 146, 230, 1);
  272. }
  273.  
  274. #Mirror_Cube_3x3 {
  275. position: absolute;
  276. left: 0px;
  277. top: 361.228px;
  278. overflow: visible;
  279. width: 139px;
  280. white-space: nowrap;
  281. text-align: center;
  282. font-family: Unispace;
  283. font-style: normal;
  284. font-weight: bold;
  285. font-size: 15px;
  286. color: rgba(20, 146, 230, 1);
  287. }
  288.  
  289. #Bar {
  290. position: absolute;
  291. width: 1366px;
  292. height: 61px;
  293. left: 0px;
  294. top: 0px;
  295. overflow: visible;
  296. }
  297.  
  298. #Bar_A0_Rectangle_4 {
  299. filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
  300. fill: rgba(0, 0, 0, 1);
  301. stroke: rgb(112, 112, 112);
  302. stroke-width: 1px;
  303. stroke-linejoin: miter;
  304. stroke-linecap: butt;
  305. stroke-miterlimit: 4;
  306. shape-rendering: auto;
  307. }
  308.  
  309. .Bar_A0_Rectangle_4 {
  310. position: absolute;
  311. overflow: visible;
  312. width: 1384px;
  313. height: 79px;
  314. left: 0px;
  315. top: 0px;
  316. }
  317.  
  318. #Side_Elements {
  319. position: absolute;
  320. width: 473px;
  321. height: 44px;
  322. left: 874px;
  323. top: 17px;
  324. overflow: visible;
  325. }
  326.  
  327. #Info {
  328. position: absolute;
  329. left: 0px;
  330. top: 0px;
  331. overflow: visible;
  332. width: 35px;
  333. white-space: nowrap;
  334. text-align: left;
  335. font-family: Sonika PERSONAL USE;
  336. font-style: normal;
  337. font-weight: normal;
  338. font-size: 20px;
  339. color: rgba(255, 255, 255, 1);
  340. }
  341.  
  342. #Recommended_Cubes {
  343. position: absolute;
  344. left: 151px;
  345. top: 0px;
  346. overflow: visible;
  347. width: 218px;
  348. white-space: nowrap;
  349. text-align: left;
  350. font-family: Sonika PERSONAL USE;
  351. font-style: normal;
  352. font-weight: normal;
  353. font-size: 20px;
  354. color: rgba(255, 255, 255, 1);
  355. }
  356.  
  357. #Cubes_ {
  358. position: absolute;
  359. left: 60px;
  360. top: 0px;
  361. overflow: visible;
  362. width: 66px;
  363. white-space: nowrap;
  364. text-align: left;
  365. font-family: Sonika PERSONAL USE;
  366. font-style: normal;
  367. font-weight: normal;
  368. font-size: 20px;
  369. color: rgba(255, 255, 255, 1);
  370. }
  371.  
  372. #Contact {
  373. position: absolute;
  374. left: 394px;
  375. top: 0px;
  376. overflow: visible;
  377. width: 80px;
  378. white-space: nowrap;
  379. text-align: left;
  380. font-family: Sonika PERSONAL USE;
  381. font-style: normal;
  382. font-weight: normal;
  383. font-size: 20px;
  384. color: rgba(255, 255, 255, 1);
  385. }
  386.  
  387. #Universal_Cubing {
  388. position: absolute;
  389. left: 27px;
  390. top: 9px;
  391. overflow: visible;
  392. width: 181px;
  393. white-space: nowrap;
  394. text-align: left;
  395. font-family: Simplifica;
  396. font-style: normal;
  397. font-weight: normal;
  398. font-size: 40px;
  399. color: rgba(255, 255, 255, 1);
  400. }
  401.  
  402. #Logo {
  403. filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
  404. fill: url(#Logo_A0_Rectangle_6_pattern);
  405. }
  406.  
  407. .Logo {
  408. position: absolute;
  409. overflow: visible;
  410. width: 358px;
  411. height: 210px;
  412. left: -53px;
  413. top: 72px;
  414. }
  415.  
  416. #WIP {
  417. filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.161));
  418. position: absolute;
  419. left: 620px;
  420. top: 72px;
  421. overflow: visible;
  422. width: 128px;
  423. white-space: nowrap;
  424. text-align: left;
  425. font-family: Simplifica;
  426. font-style: normal;
  427. font-weight: normal;
  428. font-size: 100px;
  429. color: rgba(42, 0, 255, 1);
  430. letter-spacing: 1px;
  431. }
  432.  
  433. #Home_Bar {
  434. position: absolute;
  435. width: 1303.324px;
  436. height: 37px;
  437. left: 31px;
  438. top: 235px;
  439. overflow: visible;
  440. }
  441.  
  442. #Seperation_Home_Bar {
  443. fill: rgba(238, 238, 238, 1);
  444. stroke: rgb(112, 112, 112);
  445. stroke-width: 1px;
  446. stroke-linejoin: miter;
  447. stroke-linecap: butt;
  448. stroke-miterlimit: 4;
  449. shape-rendering: auto;
  450. }
  451.  
  452. .Seperation_Home_Bar {
  453. position: absolute;
  454. overflow: visible;
  455. width: 1303.324px;
  456. height: 37px;
  457. left: 0px;
  458. top: 0px;
  459. }
  460.  
  461. #shutterstock_654663997 {
  462. fill: url(#shutterstock_654663997_A0_Ellipse_2_pattern);
  463. stroke: rgb(112, 112, 112);
  464. stroke-width: 1px;
  465. stroke-linejoin: miter;
  466. stroke-linecap: butt;
  467. stroke-miterlimit: 4;
  468. shape-rendering: auto;
  469. }
  470.  
  471. .shutterstock_654663997 {
  472. position: absolute;
  473. overflow: visible;
  474. width: 25px;
  475. height: 25px;
  476. left: 12px;
  477. top: 6px;
  478. }
  479.  
  480. #Box_A0_Group_7 {
  481. position: absolute;
  482. width: 956.009px;
  483. height: 120px;
  484. left: 379px;
  485. top: 295.033px;
  486. overflow: visible;
  487. }
  488.  
  489. #Rectangle_1 {
  490. filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
  491. fill: rgba(0, 136, 255, 0.251);
  492. stroke: rgb(112, 112, 112);
  493. stroke-width: 1px;
  494. stroke-linejoin: miter;
  495. stroke-linecap: butt;
  496. stroke-miterlimit: 4;
  497. shape-rendering: auto;
  498. }
  499.  
  500. .Rectangle_1 {
  501. position: absolute;
  502. overflow: visible;
  503. width: 974.009px;
  504. height: 138px;
  505. left: 0px;
  506. top: 0px;
  507. }
  508.  
  509. #This_Website_is_a_work_in_prog {
  510. filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
  511. position: absolute;
  512. left: 140.991px;
  513. top: 7px;
  514. overflow: hidden;
  515. width: 675.028px;
  516. height: 113px;
  517. text-align: center;
  518. font-family: Simplifica;
  519. font-style: normal;
  520. font-weight: normal;
  521. font-size: 50px;
  522. color: rgba(0, 0, 0, 1);
  523. }
  524.  
  525. #Back___2 {
  526. filter: blur(6px);
  527. fill: url(#Back___2_A0_Rectangle_10_pattern);
  528. }
  529.  
  530. .Back___2 {
  531. position: absolute;
  532. overflow: visible;
  533. width: 1401px;
  534. height: 804px;
  535. left: 0px;
  536. top: 768px;
  537. }
  538.  
  539. #Art {
  540. filter: blur(0px);
  541. fill: url(#Art_A0_Path_2_pattern);
  542. }
  543.  
  544. .Art {
  545. transform: matrix(1, 0, 0, 1, 0, 0);
  546. overflow: visible;
  547. position: absolute;
  548. top: 330.143px;
  549. left: 379px;
  550. width: 956.009px;
  551. height: 537.714px;
  552. }
  553.  
  554. #Get_to_Know__ {
  555. position: absolute;
  556. width: 777px;
  557. height: 82px;
  558. left: 295px;
  559. top: 862px;
  560. overflow: visible;
  561. }
  562.  
  563. #Rectangle_2 {
  564. fill: rgba(0, 8, 255, 0.412);
  565. stroke: rgb(0, 7, 255);
  566. stroke-width: 3px;
  567. stroke-linejoin: miter;
  568. stroke-linecap: butt;
  569. stroke-miterlimit: 4;
  570. shape-rendering: auto;
  571. }
  572.  
  573. .Rectangle_2 {
  574. position: absolute;
  575. overflow: visible;
  576. width: 777px;
  577. height: 82px;
  578. left: 0px;
  579. top: 0px;
  580. }
  581.  
  582. #Get_to_Know_Your_Cube {
  583. position: absolute;
  584. left: 30px;
  585. top: 23px;
  586. overflow: visible;
  587. width: 719px;
  588. white-space: nowrap;
  589. text-align: center;
  590. font-family: GRACETIANS;
  591. font-style: normal;
  592. font-weight: normal;
  593. font-size: 50px;
  594. color: rgba(255, 255, 255, 1);
  595. }
  596.  
  597. #We_have_a_short_guide_to_get_y {
  598. filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
  599. position: absolute;
  600. left: 295px;
  601. top: 1050px;
  602. overflow: hidden;
  603. width: 778px;
  604. height: 340px;
  605. text-align: center;
  606. font-family: Insaniburger with Cheese;
  607. font-style: normal;
  608. font-weight: normal;
  609. font-size: 50px;
  610. color: rgba(255, 255, 255, 1);
  611. }
  612.  
  613. HTML
  614.  
  615. <!DOCTYPE html>
  616. <html>
  617. <head>
  618. <meta charset="utf-8"/>
  619. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  620. <title>Homepage</title>
  621. <link rel="stylesheet" type="text/css" id="applicationStylesheet" href="homepage_main.css"/>
  622. <script id="applicationScript" type="text/javascript" src="Home_Page.js"></script>
  623. </head>
  624. <body>
  625. <div id="Home_Page">
  626. <svg class="Background">
  627. <pattern elementId="Background_A0_Rectangle_2" id="Background_A0_Rectangle_2_pattern" x="0" y="0" width="100%" height="100%">
  628. <image x="0" y="0" width="100%" height="100%" href="Background_A0_Rectangle_2_pattern.png" xlink:href="Background_A0_Rectangle_2_pattern.png"></image>
  629. </pattern>
  630. <rect id="Background" rx="0" ry="0" x="0" y="0" width="1366" height="912">
  631. </rect>
  632. </svg>
  633. <div id="Categories">
  634. <div id="Box">
  635. <svg class="Cube_Categories">
  636. <rect id="Cube_Categories" rx="9" ry="9" x="0" y="0" width="195.343" height="439.129">
  637. </rect>
  638. </svg>
  639. <svg class="Line">
  640. <path id="Line" d="M 0 0 L 195.3429260253906 0">
  641. </path>
  642. </svg>
  643. <div id="Cubes">
  644. <span>Cubes</span>
  645. </div>
  646. </div>
  647. <div id="Cubes_A0_Group_3">
  648. <div id="ID2x2">
  649. <span>2x2</span>
  650. </div>
  651. <div id="ID3x3">
  652. <span>3x3</span>
  653. </div>
  654. <div id="ID4x4">
  655. <span>4x4</span>
  656. </div>
  657. <div id="ID5x5">
  658. <span>5x5</span>
  659. </div>
  660. <div id="ID6x6">
  661. <span>6x6</span>
  662. </div>
  663. <div id="ID7x7">
  664. <span>7x7</span>
  665. </div>
  666. <div id="Pyraminx">
  667. <span>Pyraminx</span>
  668. </div>
  669. <div id="Megaminx">
  670. <span>Megaminx</span>
  671. </div>
  672. <div id="Skewb">
  673. <span>Skewb</span>
  674. </div>
  675. <div id="Mirror_Cube_3x3">
  676. <span>Mirror Cube 3x3</span>
  677. </div>
  678. </div>
  679. </div>
  680. <div id="Bar">
  681. <svg class="Bar_A0_Rectangle_4">
  682. <rect id="Bar_A0_Rectangle_4" rx="0" ry="0" x="0" y="0" width="1366" height="61">
  683. </rect>
  684. </svg>
  685. <div id="Side_Elements">
  686. <div id="Info">
  687. <span>Info</span>
  688. </div>
  689. <div id="Recommended_Cubes">
  690. <span>Recommended Cubes</span>
  691. </div>
  692. <div id="Cubes_">
  693. <span>Cubes</span><br>
  694. </div>
  695. <div id="Contact">
  696. <span>Contact</span>
  697. </div>
  698. </div>
  699. <div id="Universal_Cubing">
  700. <span>Universal Cubing</span>
  701. </div>
  702. </div>
  703. <svg class="Logo">
  704. <pattern elementId="Logo_A0_Rectangle_6" id="Logo_A0_Rectangle_6_pattern" x="0" y="0" width="100%" height="100%">
  705. <image x="0" y="0" width="100%" height="100%" href="Logo_A0_Rectangle_6_pattern.png" xlink:href="Logo_A0_Rectangle_6_pattern.png"></image>
  706. </pattern>
  707. <rect id="Logo" rx="0" ry="0" x="0" y="0" width="340" height="192">
  708. </rect>
  709. </svg>
  710. <div id="WIP">
  711. <span>WIP</span>
  712. </div>
  713. <div id="Home_Bar">
  714. <svg class="Seperation_Home_Bar">
  715. <rect id="Seperation_Home_Bar" rx="6" ry="6" x="0" y="0" width="1303.324" height="37">
  716. </rect>
  717. </svg>
  718. <svg class="shutterstock_654663997">
  719. <pattern elementId="shutterstock_654663997_A0_Ellipse_2" id="shutterstock_654663997_A0_Ellipse_2_pattern" x="0" y="0" width="100%" height="100%">
  720. <image x="0" y="0" width="100%" height="100%" href="shutterstock_654663997_A0_Ellipse_2_pattern.png" xlink:href="shutterstock_654663997_A0_Ellipse_2_pattern.png"></image>
  721. </pattern>
  722. <ellipse id="shutterstock_654663997" rx="12.5" ry="12.5" cx="12.5" cy="12.5">
  723. </ellipse>
  724. </svg>
  725. </div>
  726. <div id="Box_A0_Group_7">
  727. <svg class="Rectangle_1">
  728. <rect id="Rectangle_1" rx="13" ry="13" x="0" y="0" width="956.009" height="120">
  729. </rect>
  730. </svg>
  731. <div id="This_Website_is_a_work_in_prog">
  732. <span>This Website is a work in progress ( WIP ). It doesn't have all the features it is intended to have. <br/>It will be updated from time to time until it's development has finished.</span><br><span style="font-family:Malgun Gothic;font-style:normal;font-weight:normal;"> </span>
  733. </div>
  734. </div>
  735. <svg class="Back___2">
  736. <pattern elementId="Back___2_A0_Rectangle_10" id="Back___2_A0_Rectangle_10_pattern" x="0" y="0" width="100%" height="100%">
  737. <image x="0" y="0" width="100%" height="100%" href="Back___2_A0_Rectangle_10_pattern.png" xlink:href="Back___2_A0_Rectangle_10_pattern.png"></image>
  738. </pattern>
  739. <rect id="Back___2" rx="0" ry="0" x="0" y="0" width="1365" height="768">
  740. </rect>
  741. </svg>
  742. <svg class="Art" viewBox="0 0 956.009 537.714">
  743. <pattern elementId="Art_A0_Path_2" id="Art_A0_Path_2_pattern" x="0" y="0" width="100%" height="100%">
  744. <image x="0" y="0" width="100%" height="100%" href="Art_A0_Path_2_pattern.png" xlink:href="Art_A0_Path_2_pattern.png"></image>
  745. </pattern>
  746. <path id="Art" d="M 0 0 L 956.0093994140625 0 C 956.0093994140625 0 956.0093994140625 136.8272857666016 956.0093994140625 271.2558898925781 C 956.0093994140625 405.6845092773438 956.0093994140625 537.7144775390625 956.0093994140625 537.7144775390625 L 0 537.7144775390625 L 0 0 Z">
  747. </path>
  748. </svg>
  749. <div id="Get_to_Know__">
  750. <svg class="Rectangle_2">
  751. <rect id="Rectangle_2" rx="31" ry="31" x="0" y="0" width="777" height="82">
  752. </rect>
  753. </svg>
  754. <div id="Get_to_Know_Your_Cube">
  755. <span>Get to Know Your Cube</span>
  756. </div>
  757. </div>
  758. <div id="We_have_a_short_guide_to_get_y">
  759. <span>We have a short guide to get you adapted to your new cube.<br/>It guides you to what lube you should use to when and how to give it a thorough clean and even how to magnetize it.</span>
  760. </div>
  761. </div>
  762.  
  763.  
  764. <div id="ViewScaleSlider">
  765.  
  766. <input id="ViewScaleSliderInput" type="range" value="100" min="5" max="400" step="1" oninput="application.sliderChangeHandler(event)" onchange="application.sliderChangeHandler(event)"></input>
  767.  
  768. <style>
  769. #ViewScaleSlider {
  770. box-sizing: border-box;
  771. position: absolute;
  772. position: fixed;
  773. top: 20px;
  774. right: 20px;
  775. }
  776. #ViewScaleSliderInput {
  777. box-sizing: border-box;
  778. margin: 0px;
  779. padding: 3px;
  780. position: relative;
  781. background-color: rgba(0, 0, 0, 0.5);
  782. border: 12px solid rgba(0, 0, 0, 0);
  783. border-radius: 12px;
  784. }
  785. input[type="range"]::-ms-fill-lower,
  786. input[type="range"]::-ms-fill-upper {
  787. background: transparent;
  788. }
  789. input[type="range"]::-ms-track {
  790. border-radius: 8px;
  791. height: 7px;
  792. border: 1px solid #bdc3c7;
  793. background-color: #fff;
  794. }
  795. input[type="range"]::-ms-thumb {
  796. background-color: #ecf0f1;
  797. border: 1px solid #bdc3c7;
  798. width: 16px;
  799. height: 16px;
  800. border-radius: 8px;
  801. cursor: pointer;
  802. }
  803.  
  804. .NoScriptSliderGroup {
  805. position: fixed;
  806. min-width: 20px;
  807. min-height: 10px;
  808. overflow: visible;
  809. text-align: left;
  810. padding: 4px;
  811. padding-left: 16px;
  812. padding-right: 16px;
  813. font-family: Arial, sans-serif, Helvetica, Georgia;
  814. font-size: 12px;
  815. font-weight: bold;
  816. left: 20px;
  817. bottom: 20px;
  818. background-color: rgba(0,0,0,.5);
  819. border-radius: 12px;
  820. color:rgb(235, 235, 235);
  821. transition: all 2s linear;
  822. }
  823.  
  824. .PageRefreshedClass {
  825. position: fixed;
  826. min-width: 20px;
  827. min-height: 10px;
  828. padding: 4px;
  829. padding-left: 16px;
  830. padding-right: 16px;
  831. font-family: Arial, sans-serif, Helvetica, Georgia;
  832. font-size: 12px;
  833. font-weight: bold;
  834. left: 20px;
  835. top: 20px;
  836. background-color: rgba(0,0,0,.5);
  837. border-radius: 12px;
  838. color:rgb(235, 235, 235);
  839. transition: all 2s linear;
  840. }
  841. </style>
  842.  
  843. <noscript>
  844. <div class="NoScriptSliderGroup"><span>JavaScript must be enabled to use some features on this page</span>
  845. </div>
  846. </noscript>
  847. </div>
  848.  
  849. </body>
  850. </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!