API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 23rd, 2017
57
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.39 KB | None | 0 0
raw download clone embed print report
  1. <!-- Website {Name Of The Website}.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <!-- you can change the language if you'd prefer to work with a different language -->
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta name="robots" content="all">
  8. <meta name="language" content="Nederlands">
  9. <meta name="author" content="Daniel Klous en Thijmen van der Avoort">
  10. <meta name="description" content="Een project">
  11. <meta name="keywords" content="SuperShop">
  12. <meta name="copyright" content="© copyright - all time">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14. <link rel="shortcut icon" href="https://i.imgur.com/Vh6yXyt.png">
  15. <title>Supershop</title>
  16. <base href="http://www.google.com">
  17. <script>
  18. function startTime() {
  19. var today = new Date();
  20. var h = today.getHours();
  21. var m = today.getMinutes();
  22. var s = today.getSeconds();
  23. m = checkTime(m);
  24. s = checkTime(s);
  25. document.getElementById('txt').innerHTML =
  26. h + ":" + m + ":" + s;
  27. var t = setTimeout(startTime, 500);
  28. }
  29. function checkTime(i) {
  30. if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
  31. return i;
  32. }
  33. </script>
  34. <style>
  35.  
  36. body {
  37. width:100%;
  38. height:100%;
  39. padding:0;
  40. margin:0;
  41. background: #FFFFFF;
  42. background: -moz-radial-gradient(center, #FFFFFF 0%, #EBEBEB 100%, #FFFFFF 100%);
  43. background: -webkit-radial-gradient(center, #FFFFFF 0%, #EBEBEB 100%, #FFFFFF 100%);
  44. background: -o-radial-gradient(center, #FFFFFF 0%, #EBEBEB 100%, #FFFFFF 100%);
  45. background: radial-gradient(ellipse at center, #FFFFFF 0%, #EBEBEB 100%, #FFFFFF 100%);
  46. overflow-x: hidden;
  47. }
  48. /* http://htmlcheatsheet.com/css/ */
  49.  
  50. /* This wrapper is like bubbleplastic around a vase that falls when compressed... */
  51. /* Some engines compress metadata and this will cause some stuff to be ignored :/ so the wrapper wraps those problems up! */
  52. #wrapper {
  53. width: 100%;
  54. height: 100%;
  55. margin: 0%;
  56. padding: 0%;
  57. overflow-x: hidden;
  58. }
  59.  
  60. #animationone {
  61. width: 600%;
  62. line-height:100%;
  63. position:fixed;
  64. top:5.8%;
  65. left:0%;
  66. margin: 0%;
  67. padding: 0%;
  68. }
  69.  
  70. #animationonetext {
  71. position:inherit;
  72. top:10%;
  73. left:0%;
  74. color: black;
  75. /* When you adjust this percentage below, also adjust the percentage of the animation at 100% of the animation left, so the animation will end just outside of the screen, values must match, though the left property requires a minus (-) in front of it without brake. */
  76. width: 300%;
  77. height: 16px;
  78. animation-name: movingtextone;
  79. animation-duration: 60s;
  80. animation-iteration-count: infinite;
  81. margin: 0%;
  82. padding: 0%;
  83. font-family: "Arial Black", Gadget, sans-serif;
  84. letter-spacing: 2px;
  85. word-spacing: 2px;
  86. font-weight: bold;
  87. text-decoration: none;
  88. font-style: normal;
  89. font-variant: small-caps;
  90. font-size: 100%;
  91. text-transform: lowercase;
  92. text-align: left;
  93. -webkit-text-stroke-width: 1px;
  94. -webkit-text-stroke-color: white;
  95. }
  96.  
  97. #header {
  98. background-color: #1A1A1A;
  99. opacity: 0.7;
  100. padding: 0%;
  101. margin:0%;
  102. width: 100%;
  103. height: 8.7%;
  104. position: fixed;
  105. -moz-box-shadow: 0px 0px 43px 40px #E2E2E2;
  106. -webkit-box-shadow: 0px 0px 43px 40px #E2E2E2;
  107. -o-box-shadow: 0px 0px 43px 40px #E2E2E2;
  108. box-shadow: 0px 0px 43px 40px #E2E2E2;
  109. }
  110.  
  111. nav ul {
  112. position: fixed;
  113. left: 30%;
  114. top: 2%;
  115. display: inline-block;
  116. }
  117.  
  118. nav a:hover {
  119. background: rgba(128,18,14,0.7);
  120. padding-top: 0%;
  121. padding-bottom: 10%;
  122. transform: perspective(-1px) translateZ(0);
  123. -moz-transition-property: color;
  124. -webkit-transition-property: color;
  125. -o-transition-property: color;
  126. transition-property: color;
  127. -moz-transition-duration: 0.3s;
  128. -webkit-transition-duration: 0.3s;
  129. -o-transition-duration: 0.3s;
  130. transition-duration: 0.3s;
  131. }
  132.  
  133. nav li {
  134. display: inline-block;
  135. margin-right: 25;
  136. }
  137.  
  138.  
  139. nav a {
  140. font-family: Georgia, serif;
  141. text-transform: uppercase;
  142. font-size: 90%;
  143. color: white;
  144. position: relative;
  145. bottom: 20%;
  146. font-weight: bold;
  147. letter-spacing: 2px;
  148. word-spacing: 0px;
  149. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  150. font-style: normal;
  151. }
  152.  
  153. #supershop-white {
  154. width:30%;
  155. }
  156. header img{
  157. position: relative;
  158. top: 12px;
  159. }
  160.  
  161. #line0-below-animated-text {
  162. background-color: #1A1A1A;
  163. opacity: 0.9;
  164. width: 100%;
  165. height: 0.8px;
  166. text-align: center;
  167. line-height:100px;
  168. position:fixed;
  169. top:8.8%;
  170. left:0px;
  171. -moz-box-shadow: 0px 6px 36px 5px #000000;
  172. -webkit-box-shadow: 0px 6px 36px 5px #000000;
  173. -o-box-shadow: 0px 6px 36px 5px #000000;
  174. box-shadow: 0px 6px 36px 5px #000000;
  175. }
  176.  
  177. #line1-below-animated-text {
  178. background-color: #1A1A1A;
  179. opacity: 0.9;
  180. width: 100%;
  181. height: 0.8px;
  182. text-align: center;
  183. line-height:100px;
  184. position:fixed;
  185. top:9%;
  186. left:0px;
  187. }
  188.  
  189. #line2-below-animated-text {
  190. background-color: #1A1A1A;
  191. opacity: 0.9;
  192. width: 100%;
  193. height: 1px;
  194. text-align: center;
  195. line-height:100px;
  196. position:fixed;
  197. top:9.2%;
  198. left:0px;
  199. }
  200.  
  201. #line3-below-animated-text {
  202. background-color: #1A1A1A;
  203. opacity: 0.9;
  204. width: 100%;
  205. height: 1px;
  206. text-align: center;
  207. line-height:100px;
  208. position:fixed;
  209. top:12%;
  210. left:0px;
  211. }
  212.  
  213. #line4-below-animated-text {
  214. background-color: #1A1A1A;
  215. opacity: 0.9;
  216. width: 100%;
  217. height: 1px;
  218. text-align: center;
  219. line-height:100px;
  220. position:fixed;
  221. top:12.2%;
  222. left:0px;
  223. }
  224.  
  225. #line5-below-animated-text {
  226. background-color: #1A1A1A;
  227. opacity: 0.9;
  228. width: 100%;
  229. height: 1px;
  230. text-align: center;
  231. line-height:100px;
  232. position:fixed;
  233. top:12.4%;
  234. left:0px;
  235. -moz-box-shadow: 0px -6px 36px 3px #000000;
  236. -webkit-box-shadow: 0px -6px 36px 3px #000000;
  237. -o-box-shadow: 0px -6px 36px 3px #000000;
  238. box-shadow: 0px -6px 36px 3px #000000;
  239. }
  240.  
  241. @keyframes movingtextone{
  242. 0% {left: 100%; transition-translateX(-100%); animation-timing-function: linear;}
  243. 100% {left: -300%; transition-translateX(100%); animation-timing-function: linear;}
  244. }
  245.  
  246. #txt {
  247. position: inherit;
  248. top:1.8%;
  249. left:90%;
  250. color: white;
  251. font-family: Arial;
  252. font-size: 18px;
  253. font-weight: bold;
  254. background-color: rgba(199,199,199,0.4);
  255. border-radius: 10%;
  256. }
  257.  
  258. #displaywrapper {
  259. position: absolute;
  260. top: 14.5%;
  261. left: -20%;
  262. width: 100%;
  263. }
  264.  
  265. /* SUPPORT FOR 8K DISPLAYS!!! */
  266. @media screen and (max-width:7680px) {
  267.  
  268. #displaywrapper {
  269. position: absolute;
  270. top: 14.5%;
  271. left: -20%;
  272. width: 100%;
  273. display: none;
  274. }
  275.  
  276. #animationplaceholderbar {
  277. width: 600%;
  278. line-height:100%;
  279. position:fixed;
  280. top:5.8%;
  281. left:0%;
  282. margin: 0%;
  283. padding: 0%;
  284. display: none;
  285. }
  286.  
  287. #placeholder {
  288. position:inherit;
  289. top:9.8%;
  290. left:10%;
  291. right:10%;
  292. color: rgba(255,255,255,1.0);
  293. height: 800px;
  294. margin: 0%;
  295. padding: 0%;
  296. font-family: "Arial Black", Gadget, sans-serif;
  297. letter-spacing: 2px;
  298. word-spacing: 2px;
  299. font-weight: bold;
  300. text-decoration: none;
  301. font-style: normal;
  302. font-variant: small-caps;
  303. font-size: 130%;
  304. text-transform: uppercase;
  305. text-align: center;
  306. -webkit-text-stroke-width: 0px;
  307. -webkit-text-stroke-color: rgba(255,0,0,1.0);
  308. display: none;
  309. }
  310.  
  311. nav ul {
  312. position: fixed;
  313. left: 30%;
  314. display: inline-block;
  315. }
  316.  
  317. nav a:hover {
  318. background: rgba(128,18,14,0.7);
  319. padding-top: 5%;
  320. padding-bottom: 8%;
  321. transform: perspective(-1px) translateZ(0);
  322. -moz-transition-property: color;
  323. -webkit-transition-property: color;
  324. -o-transition-property: color;
  325. transition-property: color;
  326. -moz-transition-duration: 0.3s;
  327. -webkit-transition-duration: 0.3s;
  328. -o-transition-duration: 0.3s;
  329. transition-duration: 0.3s;
  330. }
  331.  
  332. nav li {
  333. display: inline-block;
  334. margin-right: auto;
  335. }
  336.  
  337. nav a {
  338. font-family: Georgia, serif;
  339. text-transform: uppercase;
  340. font-size: 500%;
  341. color: white;
  342. position: relative;
  343. bottom: 20%;
  344. font-weight: bold;
  345. letter-spacing: 2px;
  346. word-spacing: 0px;
  347. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  348. font-style: normal;
  349. }
  350.  
  351. #line0-below-animated-text {
  352. background-color: #1A1A1A;
  353. opacity: 0.9;
  354. width: 100%;
  355. height: 0.8px;
  356. text-align: center;
  357. line-height:100px;
  358. position:fixed;
  359. top:8.9%;
  360. left:0px;
  361. -moz-box-shadow: 0px 6px 36px 5px #000000;
  362. -webkit-box-shadow: 0px 6px 36px 5px #000000;
  363. -o-box-shadow: 0px 6px 36px 5px #000000;
  364. box-shadow: 0px 6px 36px 5px #000000;
  365. }
  366.  
  367. #line1-below-animated-text {
  368. background-color: #1A1A1A;
  369. opacity: 0.9;
  370. width: 100%;
  371. height: 0.8px;
  372. text-align: center;
  373. line-height:100px;
  374. position:fixed;
  375. top:9.1%;
  376. left:0px;
  377. }
  378.  
  379. #line2-below-animated-text {
  380. background-color: #1A1A1A;
  381. opacity: 0.9;
  382. width: 100%;
  383. height: 1px;
  384. text-align: center;
  385. line-height:100px;
  386. position:fixed;
  387. top:9.3%;
  388. left:0px;
  389. }
  390.  
  391. #line3-below-animated-text {
  392. background-color: #1A1A1A;
  393. opacity: 0.9;
  394. width: 100%;
  395. height: 1px;
  396. text-align: center;
  397. line-height:100px;
  398. position:fixed;
  399. top:12%;
  400. left:0px;
  401. }
  402.  
  403. #line4-below-animated-text {
  404. background-color: #1A1A1A;
  405. opacity: 0.9;
  406. width: 100%;
  407. height: 1px;
  408. text-align: center;
  409. line-height:100px;
  410. position:fixed;
  411. top:12.2%;
  412. left:0px;
  413. }
  414.  
  415. #line5-below-animated-text {
  416. background-color: #1A1A1A;
  417. opacity: 0.9;
  418. width: 100%;
  419. height: 1px;
  420. text-align: center;
  421. line-height:100px;
  422. position:fixed;
  423. top:12.4%;
  424. left:0px;
  425. -moz-box-shadow: 0px -90px 15px 90px rgba(0,0,0,0.30);
  426. -webkit-box-shadow: 0px -90px 15px 90px rgba(0,0,0,0.30);
  427. -o-box-shadow: 0px -90px 15px 90px rgba(0,0,0,0.30);
  428. box-shadow: 0px -70px 15px 70px rgba(0,0,0,0.30);
  429. }
  430.  
  431. #txt {
  432. font-size: 124px;
  433. }
  434.  
  435. #eightkbar {
  436. width: 600%;
  437. line-height:100%;
  438. position:fixed;
  439. top:5.8%;
  440. left:0%;
  441. margin: 0%;
  442. padding: 0%;
  443. }
  444.  
  445. #eightk {
  446. position:inherit;
  447. top:15%;
  448. left:97%;
  449. color: rgba(255,0,0,0.5);
  450. height: 800px;
  451. margin: 0%;
  452. padding: 0%;
  453. font-family: "Arial Black", Gadget, sans-serif;
  454. letter-spacing: 2px;
  455. word-spacing: 2px;
  456. font-weight: bold;
  457. text-decoration: none;
  458. font-style: normal;
  459. font-variant: small-caps;
  460. font-size: 800%;
  461. text-transform: uppercase;
  462. text-align: right;
  463. -webkit-text-stroke-width: 0px;
  464. -webkit-text-stroke-color: rgba(255,0,0,0.0);
  465. }
  466.  
  467. #animationone {
  468. width: 600%;
  469. line-height:100%;
  470. position:fixed;
  471. top:5.8%;
  472. left:0%;
  473. margin: 0%;
  474. padding: 0%;
  475. }
  476.  
  477. #animationonetext {
  478. position:inherit;
  479. top:10.2%;
  480. left:0%;
  481. color: rgba(255,255,255,0.9);
  482. /* When you adjust this percentage below, also adjust the percentage of the animation at 100% of the animation left, so the animation will end just outside of the screen, values must match, though the left property requires a minus (-) in front of it without brake. */
  483. width: 300%;
  484. height: 16px;
  485. animation-name: movingtextone;
  486. animation-duration: 60s;
  487. animation-iteration-count: infinite;
  488. margin: 0%;
  489. padding: 0%;
  490. font-family: "Arial Black", Gadget, sans-serif;
  491. letter-spacing: 2px;
  492. word-spacing: 2px;
  493. font-weight: bold;
  494. text-decoration: none;
  495. font-style: normal;
  496. font-variant: small-caps;
  497. font-size: 760%;
  498. text-transform: lowercase;
  499. text-align: left;
  500. -webkit-text-stroke-width: 8px;
  501. -webkit-text-stroke-color: rgba(255,0,0,0.0);
  502. }
  503.  
  504. #animationreplacementheader {
  505. position:inherit;
  506. top:9%;
  507. left:0%;
  508. color: rgba(255,255,255,1.0);
  509. width: 100%;
  510. height: 16px;
  511. margin: 0%;
  512. padding: 0%;
  513. font-family: "Arial Black", Gadget, sans-serif;
  514. letter-spacing: 2px;
  515. word-spacing: 2px;
  516. font-weight: bold;
  517. text-decoration: none;
  518. font-style: normal;
  519. font-variant: small-caps;
  520. font-size: 100%;
  521. text-transform: lowercase;
  522. text-align: center;
  523. -webkit-text-stroke-width: 1px;
  524. -webkit-text-stroke-color: rgba(255,255,255,0.0);
  525. display: none;
  526. }
  527. }
  528.  
  529. /* below a resolution that is just above 6K, making us able to remove the 8K stamp under the time dispay */
  530. @media screen and (max-width:5762px) {
  531. #eightk {
  532. display: none;
  533. }
  534. }
  535.  
  536. /* SUPPORT FOR 6K DISPLAYS!! */
  537. @media screen and (max-width:5760px) {
  538.  
  539. #line1-below-animated-text {
  540. background-color: #1A1A1A;
  541. opacity: 0.9;
  542. width: 100%;
  543. height: 0.8px;
  544. text-align: center;
  545. line-height:100px;
  546. position:fixed;
  547. top:9.1%;
  548. left:0px;
  549. }
  550.  
  551. #line2-below-animated-text {
  552. background-color: #1A1A1A;
  553. opacity: 0.9;
  554. width: 100%;
  555. height: 1px;
  556. text-align: center;
  557. line-height:100px;
  558. position:fixed;
  559. top:9.3%;
  560. left:0px;
  561. }
  562.  
  563. #line3-below-animated-text {
  564. background-color: #1A1A1A;
  565. opacity: 0.9;
  566. width: 100%;
  567. height: 1px;
  568. text-align: center;
  569. line-height:100px;
  570. position:fixed;
  571. top:12%;
  572. left:0px;
  573. }
  574.  
  575. #line4-below-animated-text {
  576. background-color: #1A1A1A;
  577. opacity: 0.9;
  578. width: 100%;
  579. height: 1px;
  580. text-align: center;
  581. line-height:100px;
  582. position:fixed;
  583. top:12.2%;
  584. left:0px;
  585. }
  586.  
  587. #line5-below-animated-text {
  588. background-color: #1A1A1A;
  589. opacity: 0.9;
  590. width: 100%;
  591. height: 1px;
  592. text-align: center;
  593. line-height:100px;
  594. position:fixed;
  595. top:12.4%;
  596. left:0px;
  597. -moz-box-shadow: 0px -90px 15px 90px rgba(0,0,0,0.30);
  598. -webkit-box-shadow: 0px -90px 15px 90px rgba(0,0,0,0.30);
  599. -o-box-shadow: 0px -90px 15px 90px rgba(0,0,0,0.30);
  600. box-shadow: 0px -40px 15px 45px rgba(0,0,0,0.30);
  601. }
  602.  
  603. #sixkbar {
  604. width: 600%;
  605. line-height:100%;
  606. position:fixed;
  607. top:5.8%;
  608. left:0%;
  609. margin: 0%;
  610. padding: 0%;
  611. }
  612.  
  613. #sixk {
  614. position:inherit;
  615. top:15%;
  616. left:97%;
  617. color: rgba(255,0,0,0.5);
  618. height: 800px;
  619. margin: 0%;
  620. padding: 0%;
  621. font-family: "Arial Black", Gadget, sans-serif;
  622. letter-spacing: 2px;
  623. word-spacing: 2px;
  624. font-weight: bold;
  625. text-decoration: none;
  626. font-style: normal;
  627. font-variant: small-caps;
  628. font-size: 575%;
  629. text-transform: uppercase;
  630. text-align: right;
  631. -webkit-text-stroke-width: 0px;
  632. -webkit-text-stroke-color: rgba(255,0,0,0.0);
  633. }
  634.  
  635. #txt {
  636. font-size: 100px;
  637. }
  638.  
  639. #animationone {
  640. width: 600%;
  641. line-height:100%;
  642. position:fixed;
  643. top:5.8%;
  644. left:0%;
  645. margin: 0%;
  646. padding: 0%;
  647. }
  648.  
  649. #animationonetext {
  650. position:inherit;
  651. top:10.2%;
  652. left:0%;
  653. color: rgba(255,255,255,0.9);
  654. /* When you adjust this percentage below, also adjust the percentage of the animation at 100% of the animation left, so the animation will end just outside of the screen, values must match, though the left property requires a minus (-) in front of it without brake. */
  655. width: 300%;
  656. height: 16px;
  657. animation-name: movingtextone;
  658. animation-duration: 60s;
  659. animation-iteration-count: infinite;
  660. margin: 0%;
  661. padding: 0%;
  662. font-family: "Arial Black", Gadget, sans-serif;
  663. letter-spacing: 2px;
  664. word-spacing: 2px;
  665. font-weight: bold;
  666. text-decoration: none;
  667. font-style: normal;
  668. font-variant: small-caps;
  669. font-size: 390%;
  670. text-transform: lowercase;
  671. text-align: left;
  672. -webkit-text-stroke-width: 8px;
  673. -webkit-text-stroke-color: rgba(255,0,0,0.0);
  674. }
  675.  
  676. nav ul {
  677. position: fixed;
  678. left: 30%;
  679. display: inline-block;
  680. }
  681.  
  682. nav a:hover {
  683. background: rgba(128,18,14,0.7);
  684. padding-top: 5%;
  685. padding-bottom: 8%;
  686. transform: perspective(-1px) translateZ(0);
  687. -moz-transition-property: color;
  688. -webkit-transition-property: color;
  689. -o-transition-property: color;
  690. transition-property: color;
  691. -moz-transition-duration: 0.3s;
  692. -webkit-transition-duration: 0.3s;
  693. -o-transition-duration: 0.3s;
  694. transition-duration: 0.3s;
  695. }
  696.  
  697. nav li {
  698. display: inline-block;
  699. margin-right: auto;
  700. }
  701.  
  702.  
  703. nav a {
  704. font-family: Georgia, serif;
  705. text-transform: uppercase;
  706. font-size: 375%;
  707. color: white;
  708. position: relative;
  709. bottom: 20%;
  710. font-weight: bold;
  711. letter-spacing: 2px;
  712. word-spacing: 0px;
  713. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  714. font-style: normal;
  715. }
  716. }
  717.  
  718. /* below a resolution that is just above 4K, making us able to remove the 2K stamp under the time dispay */
  719. @media screen and (max-width:3842px) {
  720. #sixk {
  721. display: none
  722. }
  723. }
  724.  
  725. /* SUPPORT FOR 4K DISPLAYS! */
  726. @media screen and (max-width:3840px) {
  727.  
  728. #displaywrapper {
  729. position: absolute;
  730. top: 14.5%;
  731. left: -30%;
  732. width: 100%;
  733. display: block;
  734. }
  735.  
  736. nav ul {
  737. position: fixed;
  738. left: 30%;
  739. display: inline-block;
  740. }
  741.  
  742. nav a:hover {
  743. background: rgba(128,18,14,0.7);
  744. padding-top: 5%;
  745. padding-bottom: 8%;
  746. transform: perspective(-1px) translateZ(0);
  747. -moz-transition-property: color;
  748. -webkit-transition-property: color;
  749. -o-transition-property: color;
  750. transition-property: color;
  751. -moz-transition-duration: 0.3s;
  752. -webkit-transition-duration: 0.3s;
  753. -o-transition-duration: 0.3s;
  754. transition-duration: 0.3s;
  755. }
  756.  
  757. nav li {
  758. display: inline-block;
  759. margin-right: auto;
  760. }
  761.  
  762.  
  763. nav a {
  764. font-family: Georgia, serif;
  765. text-transform: uppercase;
  766. font-size: 250%;
  767. color: white;
  768. position: relative;
  769. bottom: 20%;
  770. font-weight: bold;
  771. letter-spacing: 2px;
  772. word-spacing: 0px;
  773. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  774. font-style: normal;
  775. }
  776.  
  777. #line0-below-animated-text {
  778. background-color: #1A1A1A;
  779. opacity: 0.9;
  780. width: 100%;
  781. height: 0.8px;
  782. text-align: center;
  783. line-height:100px;
  784. position:fixed;
  785. top:8.9%;
  786. left:0px;
  787. -moz-box-shadow: 0px 6px 36px 5px #000000;
  788. -webkit-box-shadow: 0px 6px 36px 5px #000000;
  789. -o-box-shadow: 0px 6px 36px 5px #000000;
  790. box-shadow: 0px 6px 36px 5px #000000;
  791. }
  792.  
  793. #line1-below-animated-text {
  794. background-color: #1A1A1A;
  795. opacity: 0.9;
  796. width: 100%;
  797. height: 0.8px;
  798. text-align: center;
  799. line-height:100px;
  800. position:fixed;
  801. top:9.1%;
  802. left:0px;
  803. }
  804.  
  805. #line2-below-animated-text {
  806. background-color: #1A1A1A;
  807. opacity: 0.9;
  808. width: 100%;
  809. height: 1px;
  810. text-align: center;
  811. line-height:100px;
  812. position:fixed;
  813. top:9.3%;
  814. left:0px;
  815. }
  816.  
  817. #line3-below-animated-text {
  818. background-color: #1A1A1A;
  819. opacity: 0.9;
  820. width: 100%;
  821. height: 1px;
  822. text-align: center;
  823. line-height:100px;
  824. position:fixed;
  825. top:12%;
  826. left:0px;
  827. }
  828.  
  829. #line4-below-animated-text {
  830. background-color: #1A1A1A;
  831. opacity: 0.9;
  832. width: 100%;
  833. height: 1px;
  834. text-align: center;
  835. line-height:100px;
  836. position:fixed;
  837. top:12.2%;
  838. left:0px;
  839. }
  840.  
  841. #line5-below-animated-text {
  842. background-color: #1A1A1A;
  843. opacity: 0.9;
  844. width: 100%;
  845. height: 1px;
  846. text-align: center;
  847. line-height:100px;
  848. position:fixed;
  849. top:12.4%;
  850. left:0px;
  851. -moz-box-shadow: 0px -40px 15px 45px rgba(0,0,0,0.30);
  852. -webkit-box-shadow: 0px -40px 15px 45px rgba(0,0,0,0.30);
  853. -o-box-shadow: 0px -40px 15px 45px rgba(0,0,0,0.30);
  854. box-shadow: 0px -40px 15px 45px rgba(0,0,0,0.30);
  855. }
  856.  
  857. #txt {
  858. font-size: 72px;
  859. }
  860.  
  861. #fourkbar {
  862. width: 600%;
  863. line-height:100%;
  864. position:fixed;
  865. top:5.8%;
  866. left:0%;
  867. margin: 0%;
  868. padding: 0%;
  869. }
  870.  
  871. #fourk {
  872. position:inherit;
  873. top:15%;
  874. left:97%;
  875. color: rgba(255,0,0,0.5);
  876. height: 800px;
  877. margin: 0%;
  878. padding: 0%;
  879. font-family: "Arial Black", Gadget, sans-serif;
  880. letter-spacing: 2px;
  881. word-spacing: 2px;
  882. font-weight: bold;
  883. text-decoration: none;
  884. font-style: normal;
  885. font-variant: small-caps;
  886. font-size: 390%;
  887. text-transform: uppercase;
  888. text-align: right;
  889. -webkit-text-stroke-width: 0px;
  890. -webkit-text-stroke-color: rgba(255,0,0,0.0);
  891. }
  892.  
  893. #animationone {
  894. width: 600%;
  895. line-height:100%;
  896. position:fixed;
  897. top:5.8%;
  898. left:0%;
  899. margin: 0%;
  900. padding: 0%;
  901. }
  902.  
  903. #animationonetext {
  904. position:inherit;
  905. top:10%;
  906. left:0%;
  907. color: rgba(255,255,255,0.9);
  908. /* When you adjust this percentage below, also adjust the percentage of the animation at 100% of the animation left, so the animation will end just outside of the screen, values must match, though the left property requires a minus (-) in front of it without brake. */
  909. width: 300%;
  910. height: 16px;
  911. animation-name: movingtextone;
  912. animation-duration: 60s;
  913. animation-iteration-count: infinite;
  914. margin: 0%;
  915. padding: 0%;
  916. font-family: "Arial Black", Gadget, sans-serif;
  917. letter-spacing: 2px;
  918. word-spacing: 2px;
  919. font-weight: bold;
  920. text-decoration: none;
  921. font-style: normal;
  922. font-variant: small-caps;
  923. font-size: 390%;
  924. text-transform: lowercase;
  925. text-align: left;
  926. -webkit-text-stroke-width: 4px;
  927. -webkit-text-stroke-color: rgba(255,0,0,0.0);
  928. }
  929. }
  930.  
  931. /* below a resolution that is just above 2K, making us able to remove the 4K stamp under the time dispay */
  932. @media screen and (max-width:2562px) {
  933.  
  934. #fourk {
  935. display: none
  936. }
  937. #animationone {
  938. width: 600%;
  939. line-height:100%;
  940. position:fixed;
  941. top:5.8%;
  942. left:0%;
  943. margin: 0%;
  944. padding: 0%;
  945. }
  946.  
  947. #animationonetext {
  948. position:inherit;
  949. top:10%;
  950. left:0%;
  951. color: rgba(255,255,255,0.9);
  952. /* When you adjust this percentage below, also adjust the percentage of the animation at 100% of the animation left, so the animation will end just outside of the screen, values must match, though the left property requires a minus (-) in front of it without brake. */
  953. width: 300%;
  954. height: 16px;
  955. animation-name: movingtextone;
  956. animation-duration: 60s;
  957. animation-iteration-count: infinite;
  958. margin: 0%;
  959. padding: 0%;
  960. font-family: "Arial Black", Gadget, sans-serif;
  961. letter-spacing: 2px;
  962. word-spacing: 2px;
  963. font-weight: bold;
  964. text-decoration: none;
  965. font-style: normal;
  966. font-variant: small-caps;
  967. font-size: 195%;
  968. text-transform: lowercase;
  969. text-align: left;
  970. -webkit-text-stroke-width: 2px;
  971. -webkit-text-stroke-color: rgba(255,0,0,0.0);
  972. }
  973. }
  974.  
  975. /* SUPPORT FOR 2K DISPLAYS */
  976. @media screen and (max-width:2560px) {
  977.  
  978. #displaywrapper {
  979. position: absolute;
  980. top: 14.5%;
  981. left: -24%;
  982. width: 100%;
  983. }
  984. nav ul {
  985. margin: 0;
  986. padding 0;
  987. position: fixed;
  988. left: 30%;
  989. display: inline-block;
  990. }
  991.  
  992. nav a:hover {
  993. background: rgba(128,18,14,0.7);
  994. padding-top: 5%;
  995. padding-bottom: 8%;
  996. transform: perspective(-1px) translateZ(0);
  997. -moz-transition-property: color;
  998. -webkit-transition-property: color;
  999. -o-transition-property: color;
  1000. transition-property: color;
  1001. -moz-transition-duration: 0.3s;
  1002. -webkit-transition-duration: 0.3s;
  1003. -o-transition-duration: 0.3s;
  1004. transition-duration: 0.3s;
  1005. }
  1006.  
  1007. nav li {
  1008. display: inline-block;
  1009. margin-right: auto;
  1010. }
  1011.  
  1012.  
  1013. nav a {
  1014. font-family: Georgia, serif;
  1015. text-transform: uppercase;
  1016. font-size: 170%;
  1017. color: white;
  1018. position: relative;
  1019. bottom: 20%;
  1020. font-weight: bold;
  1021. letter-spacing: 2px;
  1022. word-spacing: 0px;
  1023. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  1024. font-style: normal;
  1025. }
  1026.  
  1027. #line0-below-animated-text {
  1028. background-color: #1A1A1A;
  1029. opacity: 0.9;
  1030. width: 100%;
  1031. height: 0.8px;
  1032. text-align: center;
  1033. line-height:100px;
  1034. position:fixed;
  1035. top:8.9%;
  1036. left:0px;
  1037. -moz-box-shadow: 0px 6px 36px 5px #000000;
  1038. -webkit-box-shadow: 0px 6px 36px 5px #000000;
  1039. -o-box-shadow: 0px 6px 36px 5px #000000;
  1040. box-shadow: 0px 6px 36px 5px #000000;
  1041. }
  1042.  
  1043. #line1-below-animated-text {
  1044. background-color: #1A1A1A;
  1045. opacity: 0.9;
  1046. width: 100%;
  1047. height: 0.8px;
  1048. text-align: center;
  1049. line-height:100px;
  1050. position:fixed;
  1051. top:9.1%;
  1052. left:0px;
  1053. }
  1054.  
  1055. #line2-below-animated-text {
  1056. background-color: #1A1A1A;
  1057. opacity: 0.9;
  1058. width: 100%;
  1059. height: 1px;
  1060. text-align: center;
  1061. line-height:100px;
  1062. position:fixed;
  1063. top:9.3%;
  1064. left:0px;
  1065. }
  1066.  
  1067. #line3-below-animated-text {
  1068. background-color: #1A1A1A;
  1069. opacity: 0.9;
  1070. width: 100%;
  1071. height: 1px;
  1072. text-align: center;
  1073. line-height:100px;
  1074. position:fixed;
  1075. top:12%;
  1076. left:0px;
  1077. }
  1078.  
  1079. #line4-below-animated-text {
  1080. background-color: #1A1A1A;
  1081. opacity: 0.9;
  1082. width: 100%;
  1083. height: 1px;
  1084. text-align: center;
  1085. line-height:100px;
  1086. position:fixed;
  1087. top:12.2%;
  1088. left:0px;
  1089. }
  1090.  
  1091. #line5-below-animated-text {
  1092. background-color: #1A1A1A;
  1093. opacity: 0.9;
  1094. width: 100%;
  1095. height: 1px;
  1096. text-align: center;
  1097. line-height:100px;
  1098. position:fixed;
  1099. top:12.4%;
  1100. left:0px;
  1101. -moz-box-shadow: 0px -28px 15px 28px rgba(0,0,0,0.30);
  1102. -webkit-box-shadow: 0px -28px 15px 28px rgba(0,0,0,0.30);
  1103. -o-box-shadow: 0px -28px 15px 28px rgba(0,0,0,0.30);
  1104. box-shadow: 0px -28px 15px 28px rgba(0,0,0,0.30);
  1105. }
  1106.  
  1107. #txt {
  1108. font-size: 36px;
  1109. }
  1110.  
  1111. #twokbar {
  1112. width: 600%;
  1113. line-height:100%;
  1114. position:fixed;
  1115. top:5.8%;
  1116. left:0%;
  1117. margin: 0%;
  1118. padding: 0%;
  1119. }
  1120.  
  1121. #twok {
  1122. position:inherit;
  1123. top:15%;
  1124. left:97%;
  1125. color: rgba(255,0,0,0.5);
  1126. height: 800px;
  1127. margin: 0%;
  1128. padding: 0%;
  1129. font-family: "Arial Black", Gadget, sans-serif;
  1130. letter-spacing: 2px;
  1131. word-spacing: 2px;
  1132. font-weight: bold;
  1133. text-decoration: none;
  1134. font-style: normal;
  1135. font-variant: small-caps;
  1136. font-size: 200%;
  1137. text-transform: uppercase;
  1138. text-align: right;
  1139. -webkit-text-stroke-width: 0px;
  1140. -webkit-text-stroke-color: rgba(255,0,0,0.0);
  1141. }
  1142.  
  1143. #animationone {
  1144. width: 600%;
  1145. line-height:100%;
  1146. position:fixed;
  1147. top:5.8%;
  1148. left:0%;
  1149. margin: 0%;
  1150. padding: 0%;
  1151. }
  1152.  
  1153. #animationonetext {
  1154. position:inherit;
  1155. top:9.8%;
  1156. left:0%;
  1157. color: rgba(255,255,255,0.9);
  1158. /* When you adjust this percentage below, also adjust the percentage of the animation at 100% of the animation left, so the animation will end just outside of the screen, values must match, though the left property requires a minus (-) in front of it without brake. */
  1159. width: 300%;
  1160. height: 16px;
  1161. animation-name: movingtextone;
  1162. animation-duration: 60s;
  1163. animation-iteration-count: infinite;
  1164. margin: 0%;
  1165. padding: 0%;
  1166. font-family: "Arial Black", Gadget, sans-serif;
  1167. letter-spacing: 2px;
  1168. word-spacing: 2px;
  1169. font-weight: bold;
  1170. text-decoration: none;
  1171. font-style: normal;
  1172. font-variant: small-caps;
  1173. font-size: 195%;
  1174. text-transform: lowercase;
  1175. text-align: left;
  1176. -webkit-text-stroke-width: 2px;
  1177. -webkit-text-stroke-color: rgba(255,0,0,0.0);
  1178. }
  1179. }
  1180.  
  1181. /* below a resolution that is just under 2K, making us able to remove the 2K stamp under the time dispay */
  1182. @media screen and (max-width:1922px) {
  1183.  
  1184. #twok {
  1185. display: none
  1186. }
  1187. }
  1188.  
  1189. /* SUPPORT FOR 1K, FHD DISPLAYS */
  1190. @media screen and (max-width:1920px) {
  1191. nav ul {
  1192. margin: 0;
  1193. padding 0;
  1194. position: fixed;
  1195. left: 30%;
  1196. display: inline-block;
  1197. }
  1198.  
  1199. nav a:hover {
  1200. background: rgba(128,18,14,0.7);
  1201. padding-top: 5%;
  1202. padding-bottom: 8%;
  1203. transform: perspective(-1px) translateZ(0);
  1204. -moz-transition-property: color;
  1205. -webkit-transition-property: color;
  1206. -o-transition-property: color;
  1207. transition-property: color;
  1208. -moz-transition-duration: 0.3s;
  1209. -webkit-transition-duration: 0.3s;
  1210. -o-transition-duration: 0.3s;
  1211. transition-duration: 0.3s;
  1212. }
  1213.  
  1214. nav li {
  1215. display: inline-block;
  1216. margin-right: 25;
  1217. }
  1218.  
  1219.  
  1220. nav a {
  1221. font-family: Georgia, serif;
  1222. text-transform: uppercase;
  1223. font-size: 140%;
  1224. color: white;
  1225. position: relative;
  1226. bottom: 20%;
  1227. font-weight: bold;
  1228. letter-spacing: 2px;
  1229. word-spacing: 0px;
  1230. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  1231. font-style: normal;
  1232. }
  1233.  
  1234. #txt {
  1235. font-size: 22px;
  1236. }
  1237.  
  1238. #animationone {
  1239. width: 600%;
  1240. line-height:100%;
  1241. position:fixed;
  1242. top:5.8%;
  1243. left:0%;
  1244. margin: 0%;
  1245. padding: 0%;
  1246. }
  1247.  
  1248. #animationonetext {
  1249. position:inherit;
  1250. top:9.8%;
  1251. left:0%;
  1252. color: rgba(255,255,255,0.9);
  1253. /* When you adjust this percentage below, also adjust the percentage of the animation at 100% of the animation left, so the animation will end just outside of the screen, values must match, though the left property requires a minus (-) in front of it without brake. */
  1254. width: 300%;
  1255. height: 16px;
  1256. animation-name: movingtextone;
  1257. animation-duration: 60s;
  1258. animation-iteration-count: infinite;
  1259. margin: 0%;
  1260. padding: 0%;
  1261. font-family: "Arial Black", Gadget, sans-serif;
  1262. letter-spacing: 2px;
  1263. word-spacing: 2px;
  1264. font-weight: bold;
  1265. text-decoration: none;
  1266. font-style: normal;
  1267. font-variant: small-caps;
  1268. font-size: 145%;
  1269. text-transform: lowercase;
  1270. text-align: left;
  1271. -webkit-text-stroke-width: 0px;
  1272. -webkit-text-stroke-color: white;
  1273. }
  1274. }
  1275.  
  1276. @media screen and (max-width:1868px) {
  1277.  
  1278. #displaywrapper {
  1279. position: absolute;
  1280. top: 14.5%;
  1281. left: -17.5%;
  1282. width: 100%;
  1283. }
  1284.  
  1285. }
  1286.  
  1287. @media screen and (max-width:1500px) {
  1288.  
  1289. #displaywrapper {
  1290. position: absolute;
  1291. top: 14.5%;
  1292. left: -9%;
  1293. width: 100%;
  1294. }
  1295.  
  1296. nav ul {
  1297. margin: 0;
  1298. padding 0;
  1299. position: fixed;
  1300. left: 30%;
  1301. display: inline-block;
  1302. }
  1303.  
  1304. nav a:hover {
  1305. background: rgba(128,18,14,0.7);
  1306. padding-top: 5%;
  1307. padding-bottom: 8%;
  1308. transform: perspective(-1px) translateZ(0);
  1309. -moz-transition-property: color;
  1310. -webkit-transition-property: color;
  1311. -o-transition-property: color;
  1312. transition-property: color;
  1313. -moz-transition-duration: 0.3s;
  1314. -webkit-transition-duration: 0.3s;
  1315. -o-transition-duration: 0.3s;
  1316. transition-duration: 0.3s;
  1317. }
  1318.  
  1319. nav li {
  1320. display: inline-block;
  1321. margin-right: 25;
  1322. }
  1323.  
  1324.  
  1325. nav a {
  1326. font-family: Georgia, serif;
  1327. text-transform: uppercase;
  1328. font-size: 140%;
  1329. color: white;
  1330. position: relative;
  1331. bottom: 20%;
  1332. font-weight: bold;
  1333. letter-spacing: 2px;
  1334. word-spacing: 0px;
  1335. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  1336. font-style: normal;
  1337. }
  1338.  
  1339. }
  1340.  
  1341. @media screen and (max-width:1200px) {
  1342.  
  1343. #displaywrapper {
  1344. position: absolute;
  1345. top: 14.5%;
  1346. left: -1.5%;
  1347. width: 100%;
  1348. }
  1349.  
  1350. nav ul {
  1351. margin: 0;
  1352. padding 0;
  1353. position: fixed;
  1354. left: 30%;
  1355. display: inline-block;
  1356. }
  1357.  
  1358. nav a:hover {
  1359. background: rgba(128,18,14,0.7);
  1360. padding-top: 5%;
  1361. padding-bottom: 8%;
  1362. transform: perspective(-1px) translateZ(0);
  1363. -moz-transition-property: color;
  1364. -webkit-transition-property: color;
  1365. -o-transition-property: color;
  1366. transition-property: color;
  1367. -moz-transition-duration: 0.3s;
  1368. -webkit-transition-duration: 0.3s;
  1369. -o-transition-duration: 0.3s;
  1370. transition-duration: 0.3s;
  1371. }
  1372.  
  1373. nav li {
  1374. display: inline-block;
  1375. margin-right: 25;
  1376. }
  1377.  
  1378.  
  1379. nav a {
  1380. font-family: Georgia, serif;
  1381. text-transform: uppercase;
  1382. font-size: 120%;
  1383. color: white;
  1384. position: relative;
  1385. bottom: 20%;
  1386. font-weight: bold;
  1387. letter-spacing: 2px;
  1388. word-spacing: 0px;
  1389. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  1390. font-style: normal;
  1391. }
  1392.  
  1393. #txt {
  1394. font-size: 22px;
  1395. }
  1396.  
  1397. #animationone {
  1398. width: 600%;
  1399. line-height:100%;
  1400. position:fixed;
  1401. top:5.8%;
  1402. left:0%;
  1403. margin: 0%;
  1404. padding: 0%;
  1405. }
  1406.  
  1407. #animationonetext {
  1408. position:inherit;
  1409. top:9.8%;
  1410. left:0%;
  1411. color: rgba(255,255,255,0.9);
  1412. /* When you adjust this percentage below, also adjust the percentage of the animation at 100% of the animation left, so the animation will end just outside of the screen, values must match, though the left property requires a minus (-) in front of it without brake. */
  1413. width: 300%;
  1414. height: 16px;
  1415. animation-name: movingtextone;
  1416. animation-duration: 60s;
  1417. animation-iteration-count: infinite;
  1418. margin: 0%;
  1419. padding: 0%;
  1420. font-family: "Arial Black", Gadget, sans-serif;
  1421. letter-spacing: 2px;
  1422. word-spacing: 2px;
  1423. font-weight: bold;
  1424. text-decoration: none;
  1425. font-style: normal;
  1426. font-variant: small-caps;
  1427. font-size: 120%;
  1428. text-transform: lowercase;
  1429. text-align: left;
  1430. -webkit-text-stroke-width: 0px;
  1431. -webkit-text-stroke-color: white;
  1432. }
  1433. }
  1434.  
  1435. @media screen and (max-width:1006px) {
  1436.  
  1437. #displaywrapper {
  1438. position: absolute;
  1439. top: 14.5%;
  1440. left: 0%;
  1441. width: 100%;
  1442. }
  1443.  
  1444. nav ul {
  1445. margin: 0;
  1446. padding 0;
  1447. position: fixed;
  1448. left: 30%;
  1449. display: inline-block;
  1450. }
  1451.  
  1452. nav a:hover {
  1453. background: rgba(128,18,14,0.7);
  1454. padding-top: 5%;
  1455. padding-bottom: 8%;
  1456. transform: perspective(-1px) translateZ(0);
  1457. -moz-transition-property: color;
  1458. -webkit-transition-property: color;
  1459. -o-transition-property: color;
  1460. transition-property: color;
  1461. -moz-transition-duration: 0.3s;
  1462. -webkit-transition-duration: 0.3s;
  1463. -o-transition-duration: 0.3s;
  1464. transition-duration: 0.3s;
  1465. }
  1466.  
  1467. nav li {
  1468. display: inline-block;
  1469. margin-right: 25;
  1470. }
  1471.  
  1472.  
  1473. nav a {
  1474. font-family: Georgia, serif;
  1475. text-transform: uppercase;
  1476. font-size: 100%;
  1477. color: white;
  1478. position: relative;
  1479. bottom: 20%;
  1480. font-weight: bold;
  1481. letter-spacing: 2px;
  1482. word-spacing: 0px;
  1483. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  1484. font-style: normal;
  1485. }
  1486.  
  1487. #animationplaceholderbar {
  1488. width: 600%;
  1489. line-height:100%;
  1490. position:fixed;
  1491. top:5.8%;
  1492. left:0%;
  1493. margin: 0%;
  1494. padding: 0%;
  1495. display: inline;
  1496. }
  1497.  
  1498. #placeholder {
  1499. position:inherit;
  1500. top:9.8%;
  1501. left:10%;
  1502. right:10%;
  1503. color: rgba(255,255,255,1.0);
  1504. height: 800px;
  1505. margin: 0%;
  1506. padding: 0%;
  1507. font-family: "Arial Black", Gadget, sans-serif;
  1508. letter-spacing: 2px;
  1509. word-spacing: 2px;
  1510. font-weight: bold;
  1511. text-decoration: none;
  1512. font-style: normal;
  1513. font-variant: small-caps;
  1514. font-size: 130%;
  1515. text-transform: uppercase;
  1516. text-align: center;
  1517. -webkit-text-stroke-width: 0px;
  1518. -webkit-text-stroke-color: rgba(255,0,0,1.0);
  1519. display: inline;
  1520. }
  1521.  
  1522. #txt {
  1523. font-size: 22px;
  1524. }
  1525.  
  1526. #animationone {
  1527. width: 600%;
  1528. line-height:100%;
  1529. position:fixed;
  1530. top:5.8%;
  1531. left:0%;
  1532. margin: 0%;
  1533. padding: 0%;
  1534. }
  1535.  
  1536. #animationonetext {
  1537. position:inherit;
  1538. top:9.8%;
  1539. left:0%;
  1540. color: rgba(255,255,255,0.9);
  1541. /* When you adjust this percentage below, also adjust the percentage of the animation at 100% of the animation left, so the animation will end just outside of the screen, values must match, though the left property requires a minus (-) in front of it without brake. */
  1542. width: 300%;
  1543. height: 16px;
  1544. animation-name: movingtextone;
  1545. animation-duration: 60s;
  1546. animation-iteration-count: infinite;
  1547. margin: 0%;
  1548. padding: 0%;
  1549. font-family: "Arial Black", Gadget, sans-serif;
  1550. letter-spacing: 2px;
  1551. word-spacing: 2px;
  1552. font-weight: bold;
  1553. text-decoration: none;
  1554. font-style: normal;
  1555. font-variant: small-caps;
  1556. font-size: 95%;
  1557. text-transform: lowercase;
  1558. text-align: left;
  1559. -webkit-text-stroke-width: 0px;
  1560. -webkit-text-stroke-color: white;
  1561. display: none;
  1562. }
  1563. }
  1564.  
  1565. @media screen and (max-width:859px) {
  1566.  
  1567. #txt {
  1568. position: inherit;
  1569. top:1.4%;
  1570. left:85%;
  1571. font-size: 18px;
  1572. }
  1573.  
  1574. #animationone {
  1575. width: 600%;
  1576. line-height:100%;
  1577. position:fixed;
  1578. top:5.8%;
  1579. left:0%;
  1580. margin: 0%;
  1581. padding: 0%;
  1582. }
  1583.  
  1584. #animationonetext { /* Now disabling the animation, please do not adjust values down below. */
  1585. position:inherit;
  1586. top:10%;
  1587. left:0%;
  1588. color: rgba(255,255,255,0.0);
  1589. /* When you adjust this percentage below, also adjust the percentage of the animation at 100% of the animation left, so the animation will end just outside of the screen, values must match, though the left property requires a minus (-) in front of it without brake. */
  1590. width: 300%;
  1591. height: 16px;
  1592. animation-name: movingtextonedisabled;
  1593. animation-duration: 60s;
  1594. animation-iteration-count: infinite;
  1595. margin: 0%;
  1596. padding: 0%;
  1597. font-family: "Arial Black", Gadget, sans-serif;
  1598. letter-spacing: 2px;
  1599. word-spacing: 2px;
  1600. font-weight: bold;
  1601. text-decoration: none;
  1602. font-style: normal;
  1603. font-variant: small-caps;
  1604. font-size: 100%;
  1605. text-transform: lowercase;
  1606. text-align: left;
  1607. -webkit-text-stroke-width: 1px;
  1608. -webkit-text-stroke-color: rgba(255,255,255,0.0);
  1609. }
  1610.  
  1611. #animationplaceholderbar {
  1612. width: 600%;
  1613. line-height:100%;
  1614. position:fixed;
  1615. top:5.8%;
  1616. left:0%;
  1617. margin: 0%;
  1618. padding: 0%;
  1619. }
  1620.  
  1621. #placeholder {
  1622. position:inherit;
  1623. top:9.8%;
  1624. left:10%;
  1625. right:10%;
  1626. color: rgba(255,255,255,1.0);
  1627. height: 800px;
  1628. margin: 0%;
  1629. padding: 0%;
  1630. font-family: "Arial Black", Gadget, sans-serif;
  1631. letter-spacing: 2px;
  1632. word-spacing: 2px;
  1633. font-weight: bold;
  1634. text-decoration: none;
  1635. font-style: normal;
  1636. font-variant: small-caps;
  1637. font-size: 130%;
  1638. text-transform: uppercase;
  1639. text-align: center;
  1640. -webkit-text-stroke-width: 0px;
  1641. -webkit-text-stroke-color: rgba(255,0,0,1.0);
  1642. }
  1643. }
  1644.  
  1645. @media screen and (max-width:499px) {
  1646.  
  1647. #displaywrapper {
  1648. position: absolute;
  1649. top: 16.5%;
  1650. left: 0%;
  1651. width: 100%;
  1652. }
  1653.  
  1654. nav ul {
  1655. margin: 0;
  1656. padding 0;
  1657. position: fixed;
  1658. left: 30%;
  1659. display: inline-block;
  1660. }
  1661.  
  1662. nav a:hover {
  1663. background: rgba(128,18,14,0.7);
  1664. padding-top: 5%;
  1665. padding-bottom: 8%;
  1666. transform: perspective(-1px) translateZ(0);
  1667. -moz-transition-property: color;
  1668. -webkit-transition-property: color;
  1669. -o-transition-property: color;
  1670. transition-property: color;
  1671. -moz-transition-duration: 0.3s;
  1672. -webkit-transition-duration: 0.3s;
  1673. -o-transition-duration: 0.3s;
  1674. transition-duration: 0.3s;
  1675. }
  1676.  
  1677. nav li {
  1678. display: inline-block;
  1679. margin-right: auto;
  1680. }
  1681.  
  1682.  
  1683. nav a {
  1684. font-family: Georgia, serif;
  1685. text-transform: uppercase;
  1686. font-size: 80%;
  1687. color: white;
  1688. position: relative;
  1689. bottom: 20%;
  1690. font-weight: bold;
  1691. letter-spacing: 2px;
  1692. word-spacing: 0px;
  1693. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  1694. font-style: normal;
  1695. }
  1696.  
  1697. #txt {
  1698. position: inherit;
  1699. top:0.5%;
  1700. left:82%;
  1701. font-size: 14px;
  1702. }
  1703. }
  1704.  
  1705. @media screen and (max-width:399px) {
  1706.  
  1707. #displaywrapper {
  1708. position: absolute;
  1709. top: 23%;
  1710. left: 0%;
  1711. width: 100%;
  1712. }
  1713.  
  1714. nav ul {
  1715. margin: 0;
  1716. padding 0;
  1717. position: fixed;
  1718. left: 30%;
  1719. display: inline-block;
  1720. }
  1721.  
  1722. nav a:hover {
  1723. background: rgba(128,18,14,0.7);
  1724. padding-top: 5%;
  1725. padding-bottom: 8%;
  1726. transform: perspective(-1px) translateZ(0);
  1727. -moz-transition-property: color;
  1728. -webkit-transition-property: color;
  1729. -o-transition-property: color;
  1730. transition-property: color;
  1731. -moz-transition-duration: 0.3s;
  1732. -webkit-transition-duration: 0.3s;
  1733. -o-transition-duration: 0.3s;
  1734. transition-duration: 0.3s;
  1735. }
  1736.  
  1737. nav li {
  1738. display: inline-block;
  1739. margin-right: auto;
  1740. }
  1741.  
  1742.  
  1743. nav a {
  1744. font-family: Georgia, serif;
  1745. text-transform: uppercase;
  1746. font-size: 60%;
  1747. color: white;
  1748. position: relative;
  1749. bottom: 20%;
  1750. font-weight: bold;
  1751. letter-spacing: 2px;
  1752. word-spacing: 0px;
  1753. text-decoration: underline solid rgba(255, 255, 255, 1.0);
  1754. font-style: normal;
  1755. }
  1756.  
  1757. #txt {
  1758. position: inherit;
  1759. top:0.8%;
  1760. left:80%;
  1761. font-size: 11px;
  1762. }
  1763. }
  1764. </style>
  1765. </head>
  1766. <body onload="startTime()">
  1767. <div id="wrapper">
  1768. <!-- <script>alert("Thank you for visiting Supershop!")</script> -->
  1769. <section>
  1770. <div id="displaywrapper">
  1771. <script src='https://cdn.html5maker.com/embed.js?id=13661f24758476c7a06f99cf711e22d2c4eee593aa3b&responsive=1&width=940&height=400&h5mTag=html5maker'></script></div>
  1772.  
  1773. <img id="pen" src="https://i.imgur.com/xUUpklU.jpg" style="position:absolute;left:400px;top:50000px;width:100px;height:100px;">
  1774. <img id="pen" src="https://i.imgur.com/xUUpklU.jpg" style="position:absolute;left:400px;top:5000px;width:100px;height:100px;">
  1775.  
  1776. </section>
  1777.  
  1778.  
  1779.  
  1780. <header>
  1781. <div id="header">
  1782.  
  1783. <img src="https://i.imgur.com/z8wOYf1.png" id="supershop-white">
  1784.  
  1785. <nav>
  1786. <ul>
  1787. <li><a href="index.html">&nbsp;&nbsp;Home&nbsp;&nbsp;</a></li>
  1788. <li><a href="shop.html">&nbsp;&nbsp;Shop&nbsp;&nbsp;</a></li>
  1789. <li><a href="about.html">&nbsp;&nbsp;About Us&nbsp;&nbsp;</a></li>
  1790. <li><a href="contact.html">&nbsp;&nbsp;Contact&nbsp;&nbsp;</a></li>
  1791. </ul>
  1792. </nav>
  1793. <div id="txt"></div>
  1794. <div id="eightkbar"><div id="eightk">8K</div></div>
  1795. <div id="sixkbar"><div id="sixk">6K</div></div>
  1796. <div id="fourkbar"><div id="fourk">4K</div></div>
  1797. <div id="twokbar"><div id="twok">2K</div></div>
  1798. </div>
  1799.  
  1800. <!--- These lines below from 0 to 5 are being displayed in the header, surrounding the moving text.
  1801. Although it looks like the code is working right, the placement of the lines may fluctuate in lower resolutions, and off screen ratios. -->
  1802. <div id="line0-below-animated-text"></div>
  1803. <div id="line1-below-animated-text"></div>
  1804. <div id="line2-below-animated-text"></div>
  1805. <div id="line3-below-animated-text"></div>
  1806. <div id="line4-below-animated-text"></div>
  1807. <div id="line5-below-animated-text"></div>
  1808. <!--- For break inbetween centences use the fallowing code between the double quotes: "&nbsp;&nbsp;&nbsp;<strong>-</strong>&nbsp;&nbsp;&nbsp;" -->
  1809. <div id="animationone"><div id="animationonetext">/////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Welcome to the supershop!&nbsp;&nbsp;&nbsp;<strong>-</strong>&nbsp;&nbsp;&nbsp;This is a place where you can buy awesome stuff for awesome prices.&nbsp;&nbsp;&nbsp;<strong>-</strong>&nbsp;&nbsp;&nbsp;The website is planned to go live in January first, 2018. Delays may occur with the launch of SuperShop.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/////</div></div>
  1810. <div id="animationplaceholderbar"><div id="placeholder">Welcome to supershop!</div></div>
  1811.  
  1812.  
  1813. </header>
  1814. <footer>
  1815.  
  1816. </footer>
  1817. </div>
  1818. </body>
  1819. </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!