API tools faq
paste
Advertisement
b0rn-to-be-wild

- Page 10. All in one page IV, vol.2 (dark) -

b0rn-to-be-wild
Jul 21st, 2014
817
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.83 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. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!----
  5.  
  6. © borntobewildthemes.tumblr.com | PAGE 10. "All in one IV" vol.2 (dark)
  7.  
  8.  
  9. + Please do not redistribute this theme or remove credits.
  10. + You are allowed to make changes as long as you keep our credits.
  11. + If you have any questions or concerns, just contact us.
  12. + Thanks for using our page! We hope that you enjoy it!
  13.  
  14. ---->
  15.  
  16. <html>
  17.  
  18. <head>
  19.  
  20. <!--- Change the title of the page here --->
  21.  
  22. <title>{title}</title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <!--- Google fonts --->
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  29.  
  30. <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
  31.  
  32. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  33.  
  34.  
  35. <style type="text/css">
  36.  
  37. /* -------- BASICS ------- */
  38.  
  39. body {
  40. background: #52575b;
  41. margin:0;
  42. width:100%;
  43. height:100%;
  44. font-family: 'Open Sans', sans-serif;
  45. font-size:12px;
  46. overflow:hidden;
  47. background-image: url('');
  48.  
  49. }
  50.  
  51. /* Links */
  52.  
  53. a {
  54. color:#ddd;
  55. text-decoration:none;
  56. outline:none;
  57. -webkit-transition: all 0.5s ease-in-out;
  58. -moz-transition: all 0.5s ease-in-out;
  59. -o-transition: all 0.5s ease-in-out;
  60. }
  61.  
  62. a:hover {
  63. color:#eee;
  64. -webkit-transition: all 0.5s ease-in-out;
  65. -moz-transition: all 0.5s ease-in-out;
  66. -o-transition: all 0.5s ease-in-out;
  67. }
  68.  
  69. a img {
  70. width:35px;
  71. height:35px;
  72. margin:4px;
  73. border:2px #e9deef ridge;
  74. border-radius:0px;
  75. padding:4px;
  76. opacity:0.7;
  77. }
  78.  
  79. a img:hover {
  80. opacity:1;
  81. border-radius:0px;
  82. }
  83.  
  84. /* Bold */
  85.  
  86. b, strong {color:#E9DEEF;}
  87.  
  88. /* Titles */
  89.  
  90. h1 {
  91. margin:-20px;
  92. margin-bottom:15px;
  93. text-align:center;
  94. font-size:20px;
  95. height:40px;
  96. line-height:40px;
  97. color:#eee;
  98. background:#3E4347;
  99. border-bottom:1px solid #222;
  100. font-family: 'Cinzel', cursive;
  101. }
  102.  
  103. /* Tumblr controls */
  104.  
  105. .iframe-controls--desktop {
  106. top:18px!important;
  107. right:10px!important;
  108. opacity:.9!important;
  109. position:fixed!important;
  110. white-space:nowrap!important;
  111. filter: invert(1);
  112. -webkit-filter: invert(1);
  113. -moz-filter: invert(1);
  114. -o-filter: invert(1);
  115. -ms-filter: invert(1);
  116. z-index:1000000 !important;
  117. }
  118.  
  119. /*-- HEADER --*/
  120.  
  121. #header{
  122. position:fixed;
  123. left:0;
  124. top:0;
  125. width:100%;
  126. height:60px;
  127. background:#31363A;
  128. border-bottom:1px solid #222;
  129. }
  130.  
  131. /* Blog title */
  132.  
  133. #blogtitle{
  134. position:absolute;
  135. margin-top:0;
  136. margin-left:0;
  137. font-family: 'Cinzel', cursive;
  138. font-size:25px;
  139. text-align:center;
  140. line-height:40px;
  141. color:#eee;
  142. background:#3E4347;
  143. width:350px;
  144. height:40px;
  145. padding:10px;
  146. border-right:1px solid #222;
  147. }
  148.  
  149. /* Main links */
  150.  
  151. #links{
  152. position:absolute;
  153. margin-top:0px;
  154. margin-left:390px;
  155. height:60px;
  156. min-width:400px;
  157. }
  158.  
  159. #links a{
  160. color:#eee;
  161. display:inline-block;
  162. margin:5px;
  163. padding:5px;
  164. line-height:40px;
  165. font-family:Exo;
  166. font-size:15px;
  167. text-decoration:none;
  168. }
  169.  
  170. #links a:hover{
  171. color:#777;
  172. border-bottom:1px solid #000;
  173. }
  174.  
  175. /*--------- CONTAINER --------*/
  176.  
  177. #container{
  178. position:absolute;
  179. width:1004px;
  180. top:50%;
  181. left:50%;
  182. height:440px;
  183. -webkit-transform: translateX(-50%) translateY(-50%);
  184. -moz-transform: translateX(-50%) translateY(-50%);
  185. -ms-transform: translateX(-50%) translateY(-50%);
  186. transform: translateX(-50%) translateY(-50%);
  187. }
  188.  
  189. .box{
  190. overflow-y:auto;
  191. overflow-x:hidden;
  192. height:300px;
  193. padding-right:10px;
  194. }
  195.  
  196. /* Titles */
  197.  
  198. #title1 {
  199. position:absolute;
  200. font-size:30px;
  201. text-align:center;
  202. line-height:60px;
  203. margin-top:0px;
  204. margin-left:0px;
  205. color:#471431;
  206. width:240px;
  207. height:430px;
  208. line-height:820px;
  209. padding:5px;
  210. background-size:cover;
  211. background:rgba(255,255,255, 1);
  212. background:url('http://i65.tinypic.com/b5i3o2.jpg');
  213. border:1px solid #222;
  214. font-family:Cinzel;
  215. cursor:pointer;
  216. overflow:hidden;
  217. }
  218.  
  219. #title2 {
  220. position:absolute;
  221. font-size:30px;
  222. text-align:center;
  223. line-height:60px;
  224. margin-top:0px;
  225. margin-left:251px;
  226. color:#471431;
  227. width:240px;
  228. height:430px;
  229. line-height:820px;
  230. padding:5px;
  231. background-size:cover;
  232. background:rgba(255,255,255, 1);
  233. background:url('http://i66.tinypic.com/v8cugp.jpg');
  234. border:1px solid #222;
  235. font-family:Cinzel;
  236. cursor:pointer;
  237. overflow:hidden;
  238. }
  239.  
  240. #title3 {
  241. position:absolute;
  242. font-size:30px;
  243. text-align:center;
  244. line-height:60px;
  245. margin-top:0px;
  246. margin-left:502px;
  247. color:#471431;
  248. width:240px;
  249. height:430px;
  250. line-height:820px;
  251. padding:5px;
  252. background-size:cover;
  253. background:rgba(255,255,255, 1);
  254. background:url('http://i68.tinypic.com/35lcjuv.jpg');
  255. border:1px solid #222;
  256. font-family:Cinzel;
  257. cursor:pointer;
  258. overflow:hidden;
  259. }
  260.  
  261. #title4 {
  262. position:absolute;
  263. font-size:30px;
  264. text-align:center;
  265. line-height:60px;
  266. margin-top:0px;
  267. margin-left:753px;
  268. color:#471431;
  269. width:240px;
  270. height:430px;
  271. line-height:820px;
  272. padding:5px;
  273. background-size:cover;
  274. background:rgba(255,255,255, 1);
  275. background:url('http://i65.tinypic.com/ozgg7.jpg');
  276. border:1px solid #222;
  277. font-family:Cinzel;
  278. cursor:pointer;
  279. overflow:hidden;
  280. }
  281.  
  282. #title1:hover, #title2:hover, #title3:hover, #title4:hover{
  283. color:#777;
  284. -webkit-transition: all 0.7s ease-in-out;
  285. -moz-transition: all 0.7s ease-in-out;
  286. -o-transition: all 0.7s ease-in-out;
  287. }
  288.  
  289. /* About */
  290.  
  291. #about{
  292. position:absolute;
  293. margin-top:30px;
  294. left:50%;
  295. -webkit-transform: translateX(-50%);
  296. -moz-transform: translateX(-50%);
  297. -ms-transform: translateX(-50%);
  298. transform: translateX(-50%);
  299. width: 430px;
  300. height:325px;
  301. padding:20px;
  302. overflow:hidden;
  303. font-family:Open Sans;
  304. font-size:12px;
  305. text-align:right;
  306. line-height:20px;
  307. color:#eee;
  308. background:#52575b;
  309. border:1px solid #222;
  310. z-index:100;
  311. display:none;
  312. }
  313.  
  314. /* Avatar */
  315.  
  316. #avatar {
  317. float:left;
  318. margin:5px;
  319. margin-left:0px;
  320. margin-right:10px;
  321. width:45px;
  322. height:45px;
  323. border:3px double #e9deef;
  324. display:none;
  325. }
  326.  
  327. /* FAQ */
  328.  
  329. #faq{
  330. position:absolute;
  331. margin-top:30px;
  332. left:50%;
  333. -webkit-transform: translateX(-50%);
  334. -moz-transform: translateX(-50%);
  335. -ms-transform: translateX(-50%);
  336. transform: translateX(-50%);
  337. width: 430px;
  338. height:325px;
  339. padding:20px;
  340. overflow:hidden;
  341. font-family:Open Sans;
  342. font-size:12px;
  343. text-align:left;
  344. line-height:18px;
  345. background: #52575b;
  346. border:1px solid #222;
  347. z-index:1000;
  348. display:none;
  349. }
  350.  
  351. .question{
  352. margin-bottom:5px;
  353. padding:5px;
  354. color:#eee;
  355. background:#31363A;
  356. }
  357.  
  358. .answer{
  359. text-align:right;
  360. color:#eee;
  361. padding-bottom:5px;
  362. border-bottom:1px solid #e9deef;
  363. }
  364.  
  365. /* TAGS */
  366.  
  367. #tags{
  368. position:absolute;
  369. margin-top:30px;
  370. left:50%;
  371. -webkit-transform: translateX(-50%);
  372. -moz-transform: translateX(-50%);
  373. -ms-transform: translateX(-50%);
  374. transform: translateX(-50%);
  375. width: 430px;
  376. height:325px;
  377. padding:20px;
  378. overflow:hidden;
  379. font-family:Open Sans;
  380. font-size:12px;
  381. text-align:left;
  382. line-height:18px;
  383. background: #52575b;
  384. border:1px solid #222;
  385. z-index:10000;
  386. display:none;
  387. }
  388.  
  389. #taglinks{
  390. position:absolute;
  391. width:125px;
  392. padding-top:5px;
  393. margin-top:-120px;
  394. margin-left:-125px;
  395. margin-bottom:10px;
  396. }
  397.  
  398. #taglinks a{
  399. display:block;
  400. width:100%;
  401. margin-top:-6px;
  402. color:#eee;
  403. font-size:11px;
  404. padding:2px 0px;
  405. text-align:center;
  406. letter-spacing:1px;
  407. margin-bottom:5px;
  408. text-decoration:none;
  409. border:1px solid #222;
  410. background:#31363A;
  411. }
  412.  
  413. #taglinks a:hover {
  414. color:#777;
  415. background:#3E4347;
  416. }
  417.  
  418. /* BLOGROLL */
  419.  
  420. #blogroll{
  421. position:absolute;
  422. margin-top:30px;
  423. left:50%;
  424. -webkit-transform: translateX(-50%);
  425. -moz-transform: translateX(-50%);
  426. -ms-transform: translateX(-50%);
  427. transform: translateX(-50%);
  428. width: 430px;
  429. height:325px;
  430. padding:20px;
  431. overflow:hidden;
  432. font-family:Open Sans;
  433. font-size:12px;
  434. text-align:left;
  435. line-height:18px;
  436. background: #52575b;
  437. border:1px solid #222;
  438. z-index:10000;
  439. display:none;
  440. }
  441.  
  442. #blogroll a img{
  443. display:inline;
  444. padding:0;
  445. width:40px;
  446. height:40px;
  447. border:3px double #e9deef;
  448. }
  449.  
  450. #blogroll a img:hover{
  451. border:3px solid #e9deef;
  452. }
  453.  
  454. /* Close buttons */
  455.  
  456. #close1, #close2, #close3, #close4{
  457. position:absolute;
  458. margin-left:410px;
  459. top:0px;
  460. width:30px;
  461. height:30px;
  462. padding:5px;
  463. text-align:center;
  464. background:#31363A;
  465. border-left:1px solid #222;
  466. cursor:pointer;
  467. }
  468.  
  469. #close1 i, #close2 i, #close3 i, #close4 i{
  470. font-size:20px;
  471. color:#eee;
  472. padding:5px;
  473. }
  474.  
  475. #close1 i:hover, #close2 i:hover, #close3 i:hover, #close4 i:hover{
  476. color:#777;
  477. }
  478.  
  479. /* Credits */
  480.  
  481. #credits {
  482. position:fixed;
  483. right:5px;
  484. top:63px;
  485. z-index:100000;
  486. }
  487.  
  488. #credits img{
  489. border:1px solid #222;
  490. }
  491.  
  492. {CustomCSS}
  493.  
  494. </style>
  495.  
  496. </head>
  497.  
  498. <!--Scripts-->
  499.  
  500. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  501.  
  502. <script>
  503. $(document).ready(function(){
  504. $("#title1").click(function(){
  505. $("#about").toggle(500);
  506. });
  507. });
  508.  
  509. $(document).ready(function(){
  510. $("#close1").click(function(){
  511. $("#about").toggle(500);
  512. });
  513. });
  514.  
  515. $(document).ready(function(){
  516. $("#title2").click(function(){
  517. $("#faq").toggle(500);
  518. });
  519. });
  520.  
  521. $(document).ready(function(){
  522. $("#close2").click(function(){
  523. $("#faq").toggle(500);
  524. });
  525. });
  526.  
  527. $(document).ready(function(){
  528. $("#title3").click(function(){
  529. $("#tags").toggle(500);
  530. });
  531. });
  532.  
  533. $(document).ready(function(){
  534. $("#close3").click(function(){
  535. $("#tags").toggle(500);
  536. });
  537. });
  538.  
  539. $(document).ready(function(){
  540. $("#title4").click(function(){
  541. $("#blogroll").toggle(500);
  542. });
  543. });
  544.  
  545. $(document).ready(function(){
  546. $("#close4").click(function(){
  547. $("#blogroll").toggle(500);
  548. });
  549. });
  550.  
  551. </script>
  552.  
  553. <!--Slim scroll by Piotr Rochala-->
  554.  
  555. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  556.  
  557. <script type="text/javascript" src="libs/jquery.slimscroll.min.js"></script>
  558.  
  559. <script type="text/javascript" src="http://static.tumblr.com/6dvmes1/THpo7bkqg/jquery.slimscroll.js"></script>
  560.  
  561. <script type="text/javascript" src="http://static.tumblr.com/6dvmes1/3Dao7bkzr/jquery.slimscroll.min.js"></script>
  562.  
  563. <script type="text/javascript">
  564. $(function(){
  565. $('.box').slimScroll({
  566. height: '300px',
  567. color: '#616459'
  568. });
  569. });
  570.  
  571. </script>
  572.  
  573. <meta charset="utf-8">
  574. <title>{Title}</title>
  575. <link rel="shortcut icon" href="{Favicon}">
  576. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  577.  
  578. </head>
  579.  
  580. <body>
  581.  
  582. <div id="header">
  583.  
  584. <div id="blogtitle">Your title goes here</div>
  585.  
  586. <div id="links">
  587. <a href="/">HOME</a>
  588. <a href="/ask">ASK</a>
  589. <a href="/submit">SUBMIT</a>
  590. <a href="/archive">ARCHIVE</a>
  591. </div>
  592.  
  593. </div>
  594. <!--End header-->
  595.  
  596. <div id="container">
  597.  
  598. <center>
  599.  
  600. <div id="title1">About</div>
  601.  
  602. <div id="title2">F.A.Q.</div>
  603.  
  604. <div id="title3">Tags</div>
  605.  
  606. <div id="title4">Blogroll</div>
  607.  
  608. <div id="about">
  609.  
  610. <h1>About me</h1>
  611.  
  612. <div id="close1"><i class="fa fa-times" aria-hidden="true"></i></div>
  613.  
  614. <div class="box">
  615.  
  616. <!-- AVATAR -->
  617. <img src="https://i1.sndcdn.com/artworks-000035030724-7an6mz-t500x500.jpg" id="avatar" />
  618.  
  619. <div align="justify">
  620.  
  621. <!-- CHANGE DESCRIPTION -->
  622.  
  623. Lorem ipsum dolor sit amet, malis impetus fabellas ne sit, vel quaestio democritum te. Cu scaevola ocurreret per, sed at <u>possit</u> mollis. Iudicabit sadipscing appellantur at <b>vim</b>. <br><br>
  624.  
  625. Te mea nobis vidisse. Ne assum <b>ancillae</b> vel, cibo facete persequeris vix at. Ius te doming audire, quo error soluta efficiendi ei. Ex iudico aeterno laboramus sea, solet perfecto mediocrem at sed.<br><br>
  626.  
  627. Tantas <b>invidunt</b> ea nec, aliquip vocibus <u>principes</u> eos et. Tota propriae quaestio no sit, suavitate liberavisse id nec, ea atqui invenire euripidis eam. Viris decore intellegat duo ut, eu cum aliquip laboramus. Usu postea quaerendum ne, pri at scripta disputando accommodare. Ne rebum falli ornatus ius, omnes ullamcorper ut duo.
  628.  
  629. </div>
  630. <!--End justify-->
  631.  
  632. </div>
  633. <!--End box-->
  634.  
  635. </div>
  636. <!--End about-->
  637.  
  638. <div id="faq">
  639.  
  640. <h1>Frequently Asked Questions</h1>
  641.  
  642. <div id="close2"><i class="fa fa-times" aria-hidden="true"></i></div>
  643.  
  644. <div class="box">
  645.  
  646. <div class="question"> Q: QUESTION </div>
  647. <div class="answer"> Answer </div> <br>
  648.  
  649. <div class="question"> Q: QUESTION </div>
  650. <div class="answer"> Answer </div> <br>
  651.  
  652. <div class="question"> Q: QUESTION </div>
  653. <div class="answer"> Answer </div> <br>
  654.  
  655. <div class="question"> Q: QUESTION </div>
  656. <div class="answer"> Answer </div> <br>
  657.  
  658. </div>
  659. <!--End box-->
  660.  
  661. </div>
  662. <!--End faq-->
  663.  
  664. <div id="tags">
  665. <h1>Tags masterlist</h1>
  666.  
  667. <div id="close3"><i class="fa fa-times" aria-hidden="true"></i></div>
  668.  
  669. <div class="box">
  670.  
  671. <table id="all" border="0" cellpadding="13" cellspacing="118">
  672.  
  673. <td>
  674. <div id="taglinks">
  675.  
  676. <a href="/">#tag</a>
  677.  
  678. <a href="/">#tag</a>
  679.  
  680. <a href="/">#tag</a>
  681.  
  682. <a href="/">#tag</a>
  683.  
  684. <a href="/">#tag</a>
  685.  
  686. </div>
  687. </td>
  688.  
  689. <td>
  690. <div id="taglinks">
  691.  
  692. <a href="/">#tag</a>
  693.  
  694. <a href="/">#tag</a>
  695.  
  696. <a href="/">#tag</a>
  697.  
  698. <a href="/">#tag</a>
  699.  
  700. <a href="/">#tag</a>
  701.  
  702. </div>
  703. </td>
  704.  
  705. <td>
  706. <div id="taglinks">
  707.  
  708. <a href="/">#tag</a>
  709.  
  710. <a href="/">#tag</a>
  711.  
  712. <a href="/">#tag</a>
  713.  
  714. <a href="/">#tag</a>
  715.  
  716. <a href="/">#tag</a>
  717.  
  718. </div>
  719. </td>
  720.  
  721. <tr>
  722.  
  723. <td>
  724. <div id="taglinks">
  725.  
  726. <a href="/">#tag</a>
  727.  
  728. <a href="/">#tag</a>
  729.  
  730. <a href="/">#tag</a>
  731.  
  732. <a href="/">#tag</a>
  733.  
  734. <a href="/">#tag</a>
  735.  
  736. </div>
  737. </td>
  738.  
  739. <td>
  740. <div id="taglinks">
  741.  
  742. <a href="/">#tag</a>
  743.  
  744. <a href="/">#tag</a>
  745.  
  746. <a href="/">#tag</a>
  747.  
  748. <a href="/">#tag</a>
  749.  
  750. <a href="/">#tag</a>
  751.  
  752. </div>
  753. </td>
  754.  
  755. <td>
  756. <div id="taglinks">
  757.  
  758. <a href="/">#tag</a>
  759.  
  760. <a href="/">#tag</a>
  761.  
  762. <a href="/">#tag</a>
  763.  
  764. <a href="/">#tag</a>
  765.  
  766. <a href="/">#tag</a>
  767.  
  768. </div>
  769. </td>
  770.  
  771. </table>
  772.  
  773. </div>
  774. <!--End box-->
  775.  
  776. </div>
  777. <!--End tags-->
  778.  
  779. <div id="blogroll">
  780.  
  781. <h1>Blogs I follow</h1>
  782.  
  783. <div id="close4"><i class="fa fa-times" aria-hidden="true"></i></div>
  784.  
  785. <div class="box">
  786.  
  787. {block:Following}
  788. {block:Followed}
  789. <a href="{FollowedURL}">
  790. <img src="{FollowedPortraitURL-128}" title="{FollowedName}"></a>
  791. {/block:Followed}
  792. {/block:Following}
  793.  
  794. </div>
  795. <!--End box-->
  796.  
  797. </div>
  798. <!--End blogroll-->
  799.  
  800. </div>
  801. <!--End container-->
  802.  
  803. <!--Credit (do not remove-->
  804.  
  805. <a href="http://borntobewildthemes.tumblr.com" title="All in one page IV by borntobewildthemes"><div id="credits"><img src="http://i57.tinypic.com/301g6eg.jpg"></div></a>
  806.  
  807. </body>
  808.  
  809. </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!