API tools faq
paste
jbtthemes

Page 01: beastly

jbtthemes
Jul 25th, 2016
525
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!-- THEME MADE BY BREQ --
  4.  
  5. @justiceofbreq-t.tumblr.com
  6. --------------------------
  7. Page 01: beastly --
  8. --------------------------
  9. TERMS OF USAGE:
  10. - DO NOT REMOVE THE CREDIT
  11. - DO NOT REDISTRIBUTE
  12. - DO NOT CLAIM AS YOUR OWN
  13. - DO NOT USE AS A BASE
  14. -------------------------->
  15.  
  16. <html xmlns="http://www.w3.org/1999/xhtml">
  17. <head>
  18. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  19. <!-- enter browser title here, it can be different or you can leave it the same --><title>{title}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. </head>
  24.  
  25. <!-- scripts -->
  26.  
  27. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  28.  
  29. <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
  30.  
  31. <link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
  32.  
  33. <link href='https://fonts.googleapis.com/css?family=Meddon' rel='stylesheet' type='text/css'>
  34.  
  35. <script>
  36.  
  37. (function($){
  38.  
  39. $(document).ready(function(){
  40.  
  41. $("a[title]").style_my_tooltips({
  42.  
  43. tip_follows_cursor:true,
  44.  
  45. tip_delay_time:90,
  46.  
  47. tip_fade_speed:600,
  48.  
  49. attribute:"title"
  50.  
  51. });
  52.  
  53. });
  54.  
  55. })(jQuery);
  56.  
  57. </script>
  58.  
  59. <script type="text/javascript"
  60. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  61. <script>
  62. $(document).ready(function() {
  63. //
  64. $('a.poplight[href^=#]').click(function() {
  65. var popID = $(this).attr('rel'); //Get Popup Name
  66. var popURL = $(this).attr('href'); //Get Popup href to define size
  67. var query= popURL.split('?');
  68. var dim= query[1].split('&');
  69. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  70. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  71. var popMargTop = ($('#' + popID).height() + 80) / 2;
  72. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  73. //Apply Margin to Popup
  74. $('#' + popID).css({
  75. 'margin-top' : -popMargTop,
  76. 'margin-left' : -popMargLeft
  77. });
  78. $('body').append('<div id="fade"></div>');
  79. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  80. return false;
  81. });
  82. $('a.close, #fade').live('click', function() {
  83. $('#fade , .popup_block').fadeOut(function() {
  84. $('#fade, a.close').remove(); //fade them both out
  85. });
  86. return false;
  87. });
  88. });
  89. </script>
  90.  
  91. <!--you can customize colors where it says "background-color", "color" or "font color". You can use hex codes (ex. #fff to get solid white) or rgba codes (ex. rgba(0, 0, 0, .4) to get black at .4 opacity) -->
  92.  
  93. <!--for images, just place your url where it says "IMAGE URL HERE" -->
  94.  
  95. <style>
  96.  
  97. /*customize scrollbar */
  98.  
  99. ::-webkit-scrollbar {
  100. width: 1px;
  101. height: 1px;
  102. }
  103. ::-webkit-scrollbar-button {
  104. width: 0px;
  105. height: 0px;
  106. }
  107. ::-webkit-scrollbar-thumb {
  108. background: transparent;
  109. border: 0px none #ffffff;
  110. border-radius: 50px;
  111. }
  112. ::-webkit-scrollbar-thumb:hover {
  113. background: #5f9ea0;
  114. }
  115. ::-webkit-scrollbar-thumb:active {
  116. background: #000033;
  117. }
  118. ::-webkit-scrollbar-track {
  119. background: transparent;
  120. border: 0px none #ffffff;
  121. border-radius: 50px;
  122. }
  123. ::-webkit-scrollbar-track:hover {
  124. background: #000;
  125. }
  126. ::-webkit-scrollbar-track:active {
  127. background: #333333;
  128. }
  129. ::-webkit-scrollbar-corner {
  130. background: transparent;
  131. }
  132.  
  133. body {
  134. background-color:#000;/*change background color here*/
  135. background-image:url('IMAGE URL HERE'); /* ignore that the image doesn't look like it covers the screen, it will once you exit out of the editor */
  136. background-position:top left;
  137. background-size:cover;
  138. background-repeat:no-repeat;
  139. padding:0px;
  140. margin:0px;
  141. font-family: garamond;/*change body font family here */
  142. font-size:11px;/*change body font size here */
  143. color:#eee;/*change body font color here */
  144. }
  145.  
  146. /*style italics */
  147. i, em {
  148. color:#ffffcc;
  149. }
  150.  
  151. /*style bold */
  152. b {
  153. color:#823826;
  154. text-transform:uppercase;
  155. }
  156.  
  157. /*style list type which goes between <ul></ul>*/
  158. ul {
  159. list-style-type:lower-roman;
  160. }
  161.  
  162. /*style links */
  163. a {
  164. color:#336699;/*body link color */
  165. text-decoration:none;
  166. -webkit-transition: all 0.5s ease-in-out;
  167. -moz-transition: all 0.5s ease-in-out;
  168. -o-transition: all 0.5s ease-in-out;
  169. transition: all 0.5s ease-in-out;
  170. }
  171.  
  172. a:hover {
  173. color:#33ffcc;/*body link hover color */
  174. }
  175.  
  176. /*style blockquotes */
  177. blockquote {
  178. border-left:5px solid #fff;
  179. padding-left:5px;
  180. }
  181.  
  182. /*customize header*/
  183.  
  184. header {
  185. display:block;
  186. background-color:transparent; /*customize header bg*/
  187. text-align:center;
  188. height:100px;
  189. margin-top:105px;
  190. margin-left:400px;
  191. width:590px;
  192. }
  193.  
  194. /*customize title */
  195.  
  196. .title {
  197. display:inline-block;
  198. font-family: 'Meddon', cursive;/*change title font here */
  199. color:#000033; /*customize title color */
  200. font-size:40px;/*change title font size here */
  201. margin-top:10px;
  202. text-shadow:0px 3px 5px #a9a9a9; /*customize text shadow */
  203. }
  204.  
  205. /* style nav links + container */
  206. menu {
  207. background:#1d2b33;/*change menu bar color here*/
  208. margin-left:400px;
  209. margin-top:379px;
  210. width:590px;
  211. padding:5px;
  212. text-align:center;
  213. font-size:11px;/*change nav link font size here */
  214. font-weight:700;
  215. border-bottom-left-radius:5px;
  216. border-bottom-right-radius:5px;
  217. }
  218.  
  219. /*if using font-awesome icons, change color of link text here, otherwise ignore this*/
  220. menu i {
  221. color:#823826;
  222. }
  223. menu a {
  224. color:#823826;/*change color of link text here*/
  225. margin:5px;
  226. -webkit-transition: all 0.5s ease-in-out;
  227. -moz-transition: all 0.5s ease-in-out;
  228. -o-transition: all 0.5s ease-in-out;
  229. transition: all 0.5s ease-in-out;
  230. }
  231.  
  232. menu a:hover {
  233. background:#a9a9a9;/*change color of link hover bg here*/
  234. color:#f0f8ff;/*change color of link hover text here*/
  235. margin:0px;
  236. padding:5px;
  237. padding-left:20px;
  238. padding-right:20px;
  239. }
  240.  
  241. /*tooltip styling*/
  242. #s-m-t-tooltip {
  243. max-width:300px;
  244. border-radius: 0px; /* you can add in a border radius here for curved corners if you like */
  245. padding:1px; /* space around the text */
  246. margin:5px 10px 5px 0px; /* positioning of your hover info in relation to the link */
  247. color:{color:body}; /* text color */
  248. font-family: 'Raleway', sans-serif;
  249. font-size:10px; /* font size of your hover info */
  250. background:transparent; /* change the background color of your hover info */
  251. z-index:99999;}
  252.  
  253. /*main character image - the one on the right */
  254. #sidebar {
  255. position:absolute;
  256. background-image:url('IMAGE URL HERE');/*make sure height is 390px*/
  257. background-size:cover;
  258. background-position:left;
  259. background-repeat:no-repeat;
  260. text-align:center;
  261. width:250px;
  262. height:389px;
  263. top:10px;
  264. right:15px;
  265. overflow:hidden;
  266. }
  267.  
  268. /*icon that shows on hover */
  269. #portrait {
  270. width:100px;
  271. height:100px;
  272. margin-top:20px;
  273. margin-right:auto;
  274. margin-left:auto;
  275. border-radius:50%;
  276. border:1px solid rgba(169,169,169,.7);
  277. opacity:0;
  278. -webkit-transition: all 0.7s ease;
  279. -moz-transition: all 0.7s ease;
  280. -o-transition: all 0.7s ease;
  281. }
  282.  
  283. #portrait img {
  284. position:relative;
  285. width:90px;
  286. height:90px;
  287. border-radius:50%;
  288. margin-top:5px;
  289. margin-right:auto;
  290. margin-left:auto;
  291.  
  292. }
  293.  
  294. #sidebar:hover #portrait {
  295. opacity:1;
  296. -webkit-transition: all 0.7s ease;
  297. -moz-transition: all 0.7s ease;
  298. -o-transition: all 0.7s ease;
  299. }
  300.  
  301. /*description that shows on hover, called "profile" */
  302.  
  303. #profile {
  304. position:relative;
  305. background:transparent;
  306. padding:5px;
  307. text-align:left;
  308. font size: 10px;/*change profile font size here */
  309. width:150px;
  310. height:200px;
  311. margin-top:10px;
  312. margin-right:auto;
  313. margin-left:auto;
  314. opacity:0;
  315. border-top:1px solid rgba(169,169,169,.7);
  316. -webkit-transition: all 0.7s ease;
  317. -moz-transition: all 0.7s ease;
  318. -o-transition: all 0.7s ease;
  319. }
  320.  
  321. #profile b {
  322. color:rgba(169,169,169,.7);/*change profile bold font color here */
  323. text-transform:uppercase;
  324. }
  325.  
  326. #sidebar:hover #profile {
  327. opacity:1;
  328. -webkit-transition: all 0.7s ease;
  329. -moz-transition: all 0.7s ease;
  330. -o-transition: all 0.7s ease;
  331. }
  332.  
  333. /*entire container styling*/
  334.  
  335. #container1 {
  336. position:absolute;
  337. left:400px;
  338. height:410px;
  339. width:600px;
  340. top:175px;
  341. background:#171f23;/*change entire container background color here */
  342. }
  343.  
  344. /* description container */
  345.  
  346. #container {
  347. position:absolute;
  348. margin-top:10px;
  349. margin-left:10px;
  350. margin-right:10px;
  351. right:275px;
  352. width:300px;
  353. background:#1d2b33;/*change description background here */
  354.  
  355. }
  356.  
  357. /* blog's description style */
  358. .description {
  359. padding:10px;
  360. display:block;
  361. width:280px;
  362. height:330px;
  363. text-align:center;
  364. background:transparent;
  365. color:#eee;/*change description font color here */
  366. font-size:11px;/*change description font size here */
  367. overflow:scroll;
  368. margin-right:auto;
  369. margin-left:auto;
  370. margin-bottom:10px;
  371. }
  372.  
  373. /* title and header styling */
  374. h2 {
  375. font-family: 'Satisfy', cursive;/*change description title font family here */
  376. font-size:20px;/*change description title font size here */
  377. font-weight:700;
  378. margin:0px 0px 10px 0px;
  379. color:#5f9ea0;/*change description title font color here */
  380. text-align:center;
  381. text-transform:lowercase;
  382. }
  383.  
  384. /*customize your verses container*/
  385.  
  386. #vcontainer {
  387. position:absolute;
  388. top:10px;
  389. right:600px;
  390. width:150px;
  391. max-height:360px;
  392. padding-bottom:10px;
  393. overflow:scroll;
  394. background:transparent;
  395. }
  396.  
  397. /*VERSE ICONS*/
  398. /*start of verse1 copy from here*/
  399.  
  400. #vimage1 {
  401. display:block;
  402. width:110px;
  403. height:110px;
  404. margin-top:10px;
  405. margin-right:auto;
  406. margin-left:auto;
  407. border-radius:50%;
  408. background:#171f23;/*customize background color*/
  409. border:1px solid #171f23; /*customize verse image outer border*/
  410. }
  411.  
  412. #vimage1 img {
  413. position:relative;
  414. top:5px;
  415. margin-left:5px;
  416. border-radius:50%;
  417. width:100px;
  418. height:100px;
  419. opacity:.5;/*customize image opacity from 0 to 1*/
  420. -webkit-transition: all 0.7s ease;
  421. -moz-transition: all 0.7s ease;
  422. -o-transition: all 0.7s ease;
  423. }
  424.  
  425. #vimage1 img:hover {
  426. opacity:1;
  427. -webkit-transition: all 0.7s ease;
  428. -moz-transition: all 0.7s ease;
  429. -o-transition: all 0.7s ease;
  430. }
  431.  
  432. /*end copy here*/
  433.  
  434. /*start of verse2 copy from here*/
  435.  
  436. #vimage2 {
  437. position:relative;
  438. display:block;
  439. width:110px;
  440. height:110px;
  441. margin-top:10px;
  442. margin-right:auto;
  443. margin-left:auto;
  444. border-radius:50%;/*delete this if you want square images*/
  445. background:#171f23;/*customize background color*/
  446. border:1px solid #171f23; /*customize verse image outer border*/
  447.  
  448. }
  449.  
  450. #vimage2 img {
  451. position:relative;
  452. top:5px;
  453. margin-left:5px;
  454. border-radius:50%;/*delete this if you want square images*/
  455. width:100px;
  456. height:100px;
  457. opacity:.5;/*customize image opacity from 0 to 1*/
  458. -webkit-transition: all 0.7s ease;
  459. -moz-transition: all 0.7s ease;
  460. -o-transition: all 0.7s ease;
  461. }
  462.  
  463. #vimage2 img:hover {
  464. opacity:1;
  465. -webkit-transition: all 0.7s ease;
  466. -moz-transition: all 0.7s ease;
  467. -o-transition: all 0.7s ease;
  468. }
  469.  
  470. /*end copy here*/
  471.  
  472. /*start of verse3 copy from here*/
  473.  
  474. #vimage3 {
  475. position:relative;
  476. display:block;
  477. width:110px;
  478. height:110px;
  479. margin-top:10px;
  480. margin-right:auto;
  481. margin-left:auto;
  482. border-radius:50%;/*delete this if you want square images*/
  483. background:#171f23;/*customize background color*/
  484. border:1px solid #171f23; /*customize verse image outer border*/
  485. }
  486.  
  487. #vimage3 img {
  488. position:relative;
  489. top:5px;
  490. margin-left:5px;
  491. border-radius:50%;/*delete this if you want square images*/
  492. width:100px;
  493. height:100px;
  494. opacity:.5;/*customize image opacity from 0 to 1*/
  495. -webkit-transition: all 0.7s ease;
  496. -moz-transition: all 0.7s ease;
  497. -o-transition: all 0.7s ease;
  498. }
  499.  
  500. #vimage3 img:hover {
  501. opacity:1;
  502. -webkit-transition: all 0.7s ease;
  503. -moz-transition: all 0.7s ease;
  504. -o-transition: all 0.7s ease;
  505. }
  506.  
  507. /*end copy here*/
  508.  
  509. /*start of verse4 copy from here*/
  510.  
  511. #vimage4 {
  512. position:relative;
  513. display:block;
  514. width:110px;
  515. height:110px;
  516. margin-top:10px;
  517. margin-right:auto;
  518. margin-left:auto;
  519. border-radius:50%;/*delete this if you want square images*/
  520. background:#171f23;/*customize background color*/
  521. border:1px solid #171f23; /*customize verse image outer border*/
  522. }
  523.  
  524. #vimage4 img {
  525. position:relative;
  526. top:5px;
  527. margin-left:5px;
  528. border-radius:50%;/*delete this if you want square images*/
  529. width:100px;
  530. height:100px;
  531. opacity:.5;/*customize image opacity from 0 to 1*/
  532. -webkit-transition: all 0.7s ease;
  533. -moz-transition: all 0.7s ease;
  534. -o-transition: all 0.7s ease;
  535. }
  536.  
  537. #vimage4 img:hover {
  538. opacity:1;
  539. -webkit-transition: all 0.7s ease;
  540. -moz-transition: all 0.7s ease;
  541. -o-transition: all 0.7s ease;
  542. }
  543.  
  544. /*end copy here*/
  545.  
  546. /*start of verse5 copy from here*/
  547.  
  548. #vimage5 {
  549. position:relative;
  550. display:block;
  551. width:110px;
  552. height:110px;
  553. margin-top:10px;
  554. margin-right:auto;
  555. margin-left:auto;
  556. border-radius:50%;/*delete this if you want square images*/
  557. background:#171f23;/*customize background color*/
  558. border:1px solid #171f23; /*customize verse image outer border*/
  559. }
  560.  
  561. #vimage5 img {
  562. position:relative;
  563. top:5px;
  564. margin-left:5px;
  565. border-radius:50%;/*delete this if you want square images*/
  566. width:100px;
  567. height:100px;
  568. opacity:.5;/*customize image opacity from 0 to 1*/
  569. -webkit-transition: all 0.7s ease;
  570. -moz-transition: all 0.7s ease;
  571. -o-transition: all 0.7s ease;
  572. }
  573.  
  574. #vimage5 img:hover {
  575. opacity:1;
  576. -webkit-transition: all 0.7s ease;
  577. -moz-transition: all 0.7s ease;
  578. -o-transition: all 0.7s ease;
  579. }
  580.  
  581. /*end copy here*/
  582.  
  583. /*if you want more verses, just copy paste from "start here" to "end copy here" and make sure to change all "vimage5" to "vimage6", "vimage7", etc.*/
  584.  
  585. /*customize popups*/
  586.  
  587. .popup_block{
  588. display:none;
  589. background:#000;/*change popup background color here*/
  590. padding:20px;
  591. float:left;
  592. position:fixed;
  593. top:50%;
  594. left:50%;
  595. overflow:scroll;
  596. z-index: 99999;
  597. }
  598.  
  599. *html #fade {position: absolute;}
  600. *html .popup_block {position: absolute;}
  601. #fade {
  602. display:none;
  603. position:fixed;
  604. left:0px;
  605. top:0px;
  606. width:100%;
  607. height:100%;
  608. z-index:9999;
  609. background:#000; /* change to #fff for solid white */
  610. opacity:0.5; /* change to opacity:1; */
  611. }
  612.  
  613. /* footer quote style */
  614.  
  615. footer {
  616. background:rgba(169,169,169,.7);/*change quote background color here*/
  617. font-family: 'Allura', cursive;/*change quote font family here*/
  618. font-size:15px;/*change quote font size here*/
  619. padding:5px;
  620. text-align:center;
  621. color:#003366;/*change quote font color here*/
  622. display:block;
  623. width:290px;
  624. margin:0px;
  625. }
  626.  
  627. </style>
  628. <body>
  629.  
  630. <!-- header -->
  631. <header>
  632. <center> <!--instert character name below -->
  633. <div class="title">Character Name</div>
  634. </center>
  635. </header>
  636.  
  637. <!-- nav links -->
  638.  
  639. <!--these are set up using font-awesome icons. if you want text instead of icons, replace from <i class... to </i> with the link title -->
  640. <menu>
  641. <a href="/" title="home"><i class="fa fa-dot-circle-o" aria-hidden="true"></i></a>
  642. <a href="/ask" title="ask"><i class="fa fa-dot-circle-o" aria-hidden="true"></i></a>
  643. <a href="/archive" title="archive"><i class="fa fa-dot-circle-o" aria-hidden="true"></i></a>
  644. <a href="/mobile" title="mobile"><i class="fa fa-dot-circle-o" aria-hidden="true"></i></a>
  645.  
  646. <!-- for more links, copy from "block:iflink1" to "/block:iflink1" including the parentheses and remember to change "iflink4" to "iflink5" or "iflink6" etc. so the order lines up with your links -->
  647.  
  648. <!-- if using font-awesome icons, copy paste this link into your browser: http://fontawesome.io/icons/ and follow instructions to get the code and put in where it says "FF ICON OR LINK TITLE"-->
  649.  
  650. <!-- tooltips, change title="title" for each link to suit your fancy. this is the text that shows up when you hover over a link -->
  651.  
  652. {block:iflink1}<a href="/" title="title">FF ICON OR LINK TITLE</a>{/block:iflink1}
  653. {block:iflink2}<a href="/" title="title">FF ICON OR LINK TITLE</a>{/block:iflink2}
  654. {block:iflink3}<a href="/" title="title">FF ICON OR LINK TITLE</a></a>{/block:iflink3}
  655. {block:iflink4}<a href="/" title="title">FF ICON OR LINK TITLE</a>{/block:iflink4}
  656.  
  657. <!-- DON'T REMOVE the link below, it's my credit! -->
  658. <a href="http://www.justiceofbreq-t.tumblr.com/"><i class="fa fa-cog" aria-hidden="true"></i></a>
  659. <!--really important, don't remove! Follow the rules please! -->
  660.  
  661. </menu>
  662.  
  663. <div id="container1">
  664. <div id="sidebar">
  665. <!--portrait icon on the right, put image url where it says IMAGE URL HERE -->
  666. <div id="portrait"><img src="IMAGE URL HERE"></div>
  667. <!--description on the left, called "profile", that shows on hover -->
  668. <div id="profile">
  669. CONTENT
  670. CONTENT
  671. CONTENT
  672. </div></div>
  673. <!--end left description, called "profile" -->
  674.  
  675. <!--verses -->
  676. <div id="vcontainer">
  677. <!--remember the containers are set to 100x100 max so just keep the same ratio in your image sizes and you should be good (i.e. 50x50, 200x200, etc) -->
  678.  
  679. <!-- if you want more verses, copy from "start copy here" to "end copy here" AND put image urls where it says IMAGE URL HERE.
  680. NOTE:
  681. 1. remember to change "vimage5" to "vimage6", "vimage7" etc. so the order lines up with your css div id above
  682. 2. remember to change rel="box5" to rel="box6" or rel="box7" etc. so the order lines up with your box content below-->
  683.  
  684. <!-- start copy here -->
  685. <div id="vimage1"><a href="#?w=600" rel="box1" class="poplight"><img src="IMAGE URL HERE"></a></div>
  686. <!-- end copy here -->
  687. <!-- start copy here -->
  688. <div id="vimage2"><a href="#?w=600" rel="box2" class="poplight"><img src="IMAGE URL HERE"></a></div>
  689. <!-- end copy here -->
  690. <!-- start copy here -->
  691. <div id="vimage3"><a href="#?w=600" rel="box3" class="poplight"><img src="IMAGE URL HERE"></a></div>
  692. <!-- end copy here -->
  693. <!-- start copy here -->
  694. <div id="vimage4"><a href="#?w=600" rel="box4" class="poplight"><img src="IMAGE URL HERE"></a></div>
  695. <!-- end copy here -->
  696. <!-- start copy here -->
  697. <div id="vimage5"><a href="#?w=600" rel="box5" class="poplight"><img src="IMAGE URL HERE"></a></div>
  698. <!-- end copy here -->
  699. </div>
  700.  
  701. <!-- content container -->
  702. <div id="container">
  703.  
  704. <!-- character description, in the center, this scrolls so don't worry about writing too much -->
  705. <div class="description">
  706. <h2>ABOUT</h2><!--you can change the title here -->
  707. <p>CONTENT CONTENT CONTENT</p>
  708. </div>
  709.  
  710. <!-- posts container ends -->
  711.  
  712. <!-- footer -->
  713. <footer><!-- put your quote here. leave the quotation marks if you want the big ones like in the preview -->
  714. ❝ Quotey puh-totey. Words that make a quote.❞
  715. </footer>
  716. </div>
  717. </body>
  718.  
  719. <!-- verse info -->
  720.  
  721. <!-- NOTE: if you want more verses, don't forget to change <div id="box5" to <div id="box6" or <div id="box7" etc. so it lines up with the order of your verse image links -->
  722.  
  723. <!--copy from here, this is the beginning of the popup for verse 1 -->
  724. <div id="box1" class="popup_block">
  725. <h2>VERSE TITLE</h2><!-- put the title of your verse here -->
  726.  
  727. <!-- begin content here --><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>
  728. <!-- here is an example of bullet lists -->
  729. <ul>
  730. <li>Lorem ipsum dolor sit amet.</li>
  731. <li>Consectetuer adipiscing elit.</li>
  732. <li>Nam at tortor quis ipsum tempor aliquet.</li>
  733. </ul>
  734. <!-- more content -->
  735. <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.</p>
  736. <!-- example of blockquote -->
  737. <blockquote>Donec placerat mauris commodo dolor. Nulla tincidunt. Nulla vitae augue.</blockquote>
  738. <!-- more content -->
  739. <p>Suspendisse ac pede. Cras tincidunt pretium felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porttitor mi id felis. Maecenas nec augue. Praesent a quam pretium leo congue accumsan.</p>
  740.  
  741. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>
  742. </div>
  743.  
  744. </div></div></div></div></div></div></div></div></div></div>
  745. <!--end copy here -->
  746.  
  747. <!--copy from here, this is the beginning of the popup for verse 2 -->
  748. <div id="box2" class="popup_block">
  749. <h2>VERSE TITLE</h2>
  750. CONTENT
  751. CONTENT
  752. CONTENT
  753. </div>
  754.  
  755. </div></div></div></div></div></div></div></div></div></div>
  756. <!--end copy here -->
  757.  
  758. <!--copy from here, this is the beginning of the popup for verse 3 -->
  759. <div id="box3" class="popup_block">
  760. <h2>VERSE TITLE</h2>
  761. CONTENT
  762. CONTENT
  763. CONTENT
  764. </div>
  765.  
  766. </div></div></div></div></div></div></div></div></div></div>
  767. <!--end copy here -->
  768.  
  769. <!--copy from here, this is the beginning of the popup for verse 4 -->
  770. <div id="box4" class="popup_block">
  771. <h2>VERSE TITLE</h2>
  772. CONTENT
  773. CONTENT
  774. CONTENT
  775. </div>
  776.  
  777. </div></div></div></div></div></div></div></div></div></div>
  778. <!--end copy here -->
  779.  
  780. <!--copy from here, this is the beginning of the popup for verse 5 -->
  781. <div id="box5" class="popup_block">
  782. <h2>VERSE TITLE</h2>
  783. CONTENT
  784. CONTENT
  785. CONTENT
  786. </div>
  787.  
  788. </div></div></div></div></div></div></div></div></div></div>
  789. <!--end copy here -->
  790. </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!