API tools faq
paste
lyonlyke

Holy Bible

lyonlyke
Oct 4th, 2018
230
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>KJV BIBLE ~ COVER</title>
  5.  
  6.  
  7. <!-- for-mobile-apps -->
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  10.  
  11. <!-- //for-mobile-apps -->
  12. <style>
  13.  
  14. body {margin:0;}
  15.  
  16. #canvass {
  17. position:absolute;
  18. display:block;
  19. height:100%;width:100%;
  20.  
  21. background:#00FEFE;
  22. background:-moz-linear-gradient(top, #00FEFE 0%, #008383 100%);
  23. background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #00FEFE), color-stop(100%, #008383));
  24. background:-webkit-linear-gradient(top, #00FEFE 0%, #008383 100%);
  25. background:-o-linear-gradient(top, #00FEFE 0%, #008383 100%);
  26. background:-ms-linear-gradient(top, #00FEFE 0%, #008383 100%);
  27. background:linear-gradient(to bottom, #00FEFE 0%, #008383 100%);
  28. /*filter:progid:DXImageTransform.Mic.social_icrosoft.gradient(startColorstr='#00FEFE', endColorstr='#008383', GradientType=0);*/
  29. margin:0;
  30. z-index:-1;
  31. }
  32.  
  33. a {text-decoration:none;}
  34.  
  35. #holder{
  36. display:block;
  37. width:285px;
  38. margin:10% auto;
  39. text-align:center;
  40.  
  41. }
  42.  
  43.  
  44. #scripture {
  45. display:none;
  46. width:285px;
  47. height:424px;
  48. background-color:#FFF;
  49. padding:0 10px;
  50. box-shadow:1px 1px 3px #000;
  51. }
  52.  
  53. #scripture p {
  54. text-align:justify;
  55. line-height:14px;
  56. margin-bottom:1px;
  57. font-size:12px;
  58. color:#000;
  59. letter-spacing:1px;
  60. }
  61. #scripture h1 {
  62. text-align:center;
  63. margin:0;
  64. font-family: 'Times New Roman', Times, Serif;
  65. font-size:14;
  66. font-weight:100;
  67. color:#FFDEAD;
  68. text-shadow: 1px 1px #C96;
  69. letter-spacing:2px;
  70.  
  71. }
  72.  
  73. #scripture hr {
  74. margin:0 2px;
  75. border-color:cyan;
  76. }
  77. #scripture p strong {color:teal;}
  78.  
  79.  
  80.  
  81.  
  82. #cover{
  83. display:block;
  84. position:absolute;
  85. display:inline:block;
  86. box-sizing:border-box;
  87. width:252px;
  88. height:424px;
  89. background-color:#111;
  90. border-radius:2px;
  91. float:left;
  92. z-index:-1;
  93. }
  94.  
  95.  
  96. svg#leather {
  97. position:absolute;
  98. display:block;
  99. stroke-width:0.2;
  100. stroke:#333;
  101. fill:transparent;
  102. margin:0 auto;
  103. z-index:-1;
  104. }
  105.  
  106.  
  107.  
  108.  
  109. #fringe {
  110. posittion:relative;
  111. display:inline-block;
  112. margin:4px 0 0 0;
  113. width:29px;
  114. height:408px;
  115. background-color:#FFDEAD;
  116. border-right:4px solid #272526;
  117. border-top:4px solid #383838;
  118. border-bottom:4px solid #343233;
  119. border-radius:2px;
  120. float:right;
  121.  
  122. }
  123.  
  124.  
  125.  
  126. #titles {
  127. positon:absolute;
  128. display:inline-block;
  129. box-sizing:border-box;
  130. margin:0 auto;
  131. width:210px;
  132. height:380px;
  133. margin-top:20px;
  134. padding-top:20px;
  135. z-index:3;
  136.  
  137.  
  138. }
  139.  
  140.  
  141.  
  142.  
  143.  
  144. #cross {
  145. display:block;
  146. position:relative;
  147. margin:0 auto;
  148. top:15px;
  149.  
  150. }
  151.  
  152. a#kross:hover #cross {fill:#FE8046;}
  153. a#kross:active #cross {fill:cyan;}
  154.  
  155. #titles:hover #cross {fill:#EB8;}
  156.  
  157.  
  158. .btn {
  159. position:relative;
  160. display:block;
  161. margin:40px auto;
  162. width:80px;
  163. text-align:center;
  164. background-color:#008080;
  165. border:1px solid #008080;
  166. border-radius:3px;
  167. padding:4px 0;
  168. color:#FFF;
  169. font-family: 'Arial', Helvetica, Sans-Serif;
  170. font-size:16px;
  171. font-weight:300;
  172. text-decoration:none;
  173. top:0px;
  174. letter-spacing:2px;
  175. box-shadow:0px 0px 2px 2px cyan;
  176. }
  177.  
  178. .btn:hover {color:cyan;}
  179. .btn:active {
  180. box-shadow:0px 0px 3px 3px cyan, 0px 0px 2px 2px lime;
  181. color:#FFF;}
  182.  
  183. button#john {margin:6px auto 0 auto;}
  184.  
  185.  
  186. #titles h1,
  187. #titles h2,
  188. #titles h3,
  189. #titles h4 {
  190. margin:0;
  191. font-family: 'Times New Roman', Times, Serif;
  192. font-size:30px;
  193. font-weight:lighter;
  194. color:#FFDEAD;
  195. text-align:center;
  196. letter-spacing:3px;
  197. text-shadow:
  198. -0.5px 0px 1px #EB8,
  199. 0px 0.5px 1px #EB8,
  200. 0.5px 0px 1px #EB8,
  201. 0px -0.5px 1px #EB8;
  202. }
  203.  
  204.  
  205.  
  206. #titles:hover h1,
  207. #titles:hover h2,
  208. #titles:hover h3,
  209. #titles:hover h4 {
  210. text-shadow:
  211. -1px 0px 5px #FE8046,
  212. 0 1px 5px #FE8046,
  213. 1px 0px 5px #FE8046,
  214. 0 -1px 5px #FE8046;
  215. }
  216.  
  217. #titles h2 {font-size:28px;}
  218. #titles h3{font-size:18px;letter-spacing:2px;}
  219. #titles h4{font-size:20px;letter-spacing:2px;}
  220.  
  221.  
  222. svg {fill:transparent;}
  223.  
  224. #outlyne {
  225. position:absolute;
  226. display:block;
  227.  
  228. width:220px;
  229. height:390px;
  230. top:16px;
  231. left:16px;
  232.  
  233. stroke:#FFDEAD;
  234. stroke-width: 0.2;
  235. stroke-dasharray: 1000;
  236. stroke-dashoffset: 1000;
  237. animation-name: draw;
  238. animation-duration:41s;
  239. animation-fill-mode:forwards;
  240. animation-iteration-count:1;
  241. animation-timing-function:linear;
  242.  
  243. }
  244.  
  245. @keyframes draw {
  246. to {
  247. stroke-dashoffset:0;
  248. }
  249. }
  250.  
  251.  
  252. #cross {
  253. position:relative;
  254. display:block;
  255. margin:20px auto;
  256. width:60px;
  257.  
  258.  
  259. stroke:#FFDEAD;
  260. stroke-width: 3;
  261. stroke-dasharray: 1000;
  262. stroke-dashoffset: 1000;
  263. animation-name: draw;
  264. animation-duration:10s;
  265. animation-fill-mode:forwards;
  266. animation-iteration-count:1;
  267. animation-timing-function:linear;
  268.  
  269. -webkit-animation:draw 10s infinite linear;
  270.  
  271. }
  272.  
  273. @keyframes draw {
  274. to {
  275. stroke-dashoffset:0;
  276. }
  277. }
  278.  
  279. .lines {
  280. position:relative;
  281. display:inline-block;
  282. margin:0 0 0 1px;
  283. padding:0;
  284. width:1px;
  285. height:100%;
  286. border-left:1px solid #EB8;
  287. border-right:1px solid #EB8;
  288. float:left;
  289. }
  290.  
  291.  
  292. #cubes {
  293. position:absolute;
  294. background-color:cyan;
  295. width:100%;
  296. height:100%;
  297. margin:0;
  298. z-index:-1;
  299. }
  300.  
  301.  
  302. @media screen and ( -ms-high-contrast: active), ( -ms-high-contrast:none){#cubes {display:none;}}
  303.  
  304. @media all and ( -ms-high-contrast: none), ( -ms-high-contrast:active){#cubes {display:none}}
  305.  
  306.  
  307.  
  308. .right-shade {fill:#139D9D;}
  309. .left-shade {fill:#0B6565;}
  310.  
  311.  
  312.  
  313. </style>
  314.  
  315. <script>
  316.  
  317.  
  318. function setFill(){
  319. document.getElementById('cross').style.setProperty('fill','#EB8');
  320. }
  321.  
  322. function openBook(){
  323.  
  324. var divs = new Array ('cover','titles','fringe');
  325.  
  326. for(i = 0; i < divs.length;i++){
  327. var diiv = divs[i];
  328.  
  329. document.getElementById(diiv).style.setProperty('display','none');
  330. }
  331.  
  332. document.getElementById('scripture').style.setProperty('display','block');
  333.  
  334. }
  335. </script>
  336.  
  337.  
  338. </head>
  339. <body onload="setTimeout(setFill,5700)">
  340.  
  341. <div id="canvass">
  342.  
  343. <div id="cubes">
  344. <svg width="100%" height="100%">
  345. <pattern id="pattern-cubes" x="0" y="32" patternUnits="userSpaceOnUse" width="62" height="100" viewBox="0 0 10 16">
  346. <g id="cube">
  347. <path class="left-shade" d="M0 0l5 3v5l-5 -3z" />
  348. <path class="right-shade" d="M10 0l-5 3v5l5 -3" />
  349. </g>
  350. <use x="5" y="8" xlink:href="#cube" />
  351. <use x="-5" y="8" xlink:href="#cube" />
  352. </pattern>
  353. <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-cubes)" />
  354. </svg>
  355. </div>
  356.  
  357.  
  358.  
  359.  
  360.  
  361.  
  362.  
  363.  
  364.  
  365.  
  366. <div id="holder">
  367. <div id="scripture">
  368. <h1>John</h1>
  369. <hr>
  370. <p><strong>16</strong> For God so loved the world, that he gave his only begotten Son, that whosoever believeth in him should not perish, but have everlasting life.</p>
  371.  
  372. <p><strong>17</strong> For God sent not his Son into the world to condemn the world; but that the world through him might be saved.</p>
  373. <p><strong>18</strong> He that believeth on him is not condemned: but he that believeth not is condemned already, because he hath not believed in the name of the only begotten Son of God.</p>
  374. <p><strong>19</strong> And this is the condemnation, that light is come into the world, and men loved darkness rather than light, because their deeds were evil.</p>
  375. <p><strong>20</strong> For every one that doeth evil hateth the light, neither cometh to the light, lest his deeds should be reproved.</p>
  376. <p><strong>21</strong> But he that doeth truth cometh to the light, that his deeds may be made manifest, that they are wrought in God.</p>
  377.  
  378. <button class="btn" id="john" onclick="window.location.reload(false)">BACK</button>
  379.  
  380. </div>
  381.  
  382. <div id="cover">
  383.  
  384. <svg id="leather" width="100%" height="100%">
  385. <pattern id="texture" x="0" y="10" patternUnits="userSpaceOnUse" width="10" height="10" viewBox="0 0 10 10">
  386.  
  387. <polyline points="5,0 8,2 10,2.5 8,4 5,5 2,6 0,7.5 3,8.5 5,10 8,9 10,7.5 8,7 5,5 3,3.5 0,2.5 3,1.5 5,0">
  388.  
  389.  
  390. </pattern>
  391. <rect x="0" y="0" width="100%" height="100%" fill="url(#texture)" />
  392. </svg>
  393.  
  394.  
  395.  
  396.  
  397.  
  398.  
  399.  
  400.  
  401.  
  402. <svg id="outlyne" viewBox="0 0 25 44">
  403. <polyline id="outlyne" points="0,0 25,0 25,44 0,44 0,0">
  404. </polyline>
  405. </svg>
  406.  
  407. <div id="titles">
  408.  
  409. <h1>HOLY</h1>
  410. <h2>BIBLE</h2>
  411.  
  412. <a id="kross" href="#">
  413. <svg id="cross" viewBox="0 0 105 185">
  414. <polyline id="cross" points="53,0 55,3 55,50 102,50 105,53 102,55 55,55 55,182 53,185 50,182 50,55 3,55 0,53 3,50 50,50 50,3 53,0">
  415. </polyline>
  416. </svg>
  417. </a>
  418.  
  419.  
  420. <button class="btn" onclick="openBook()">OPEN</button>
  421.  
  422.  
  423. <h3>King James</h3>
  424. <h4>Version</h4>
  425. </div>
  426.  
  427. </div>
  428.  
  429.  
  430. <div id="fringe">
  431. <div class="lines"></div>
  432. <div class="lines"></div>
  433. <div class="lines"></div>
  434. <div class="lines"></div>
  435. <div class="lines"></div>
  436. <div class="lines"></div>
  437. <div class="lines"></div>
  438. </div>
  439.  
  440.  
  441.  
  442. </div>
  443. </div>
  444. </body>
  445. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!