API tools faq
paste
Advertisement
booksinvolved

all in one page 1

booksinvolved
Jun 4th, 2014
336
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.91 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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <!--- theme by jasnahdavar--->
  6.  
  7. <head>
  8.  
  9.  
  10.  
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  14. <link href='http://fonts.googleapis.com/css?family=Fenix' rel='stylesheet' type='text/css'>
  15.  
  16. <link href='http://fonts.googleapis.com/css?family=Fondamento' rel='stylesheet' type='text/css'>
  17.  
  18.  
  19. <script type="text/javascript">
  20. function unhide(divID) {
  21. var item = document.getElementById(divID);
  22. if (item) {
  23. item.className=(item.className=='hidden')?'unhidden':'unhidden';
  24. }
  25. }
  26. </script>
  27.  
  28. <script type="text/javascript">
  29. function hide(divID) {
  30. var item = document.getElementById(divID);
  31. if (item) {
  32. item.className=(item.className=='unhidden')?'hidden':'hidden';
  33. }
  34. }
  35. </script>
  36.  
  37.  
  38. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
  39. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js" type="text/javascript"></script>
  40. <script type="text/javascript">// <![CDATA[
  41. (function($){
  42.  
  43. $(document).ready(function(){
  44.  
  45. $("a[title]").style_my_tooltips({
  46.  
  47. tip_follows_cursor:true,
  48.  
  49. tip_delay_time:30,
  50.  
  51. tip_fade_speed:300,
  52.  
  53. attribute:"title"
  54.  
  55. });
  56.  
  57. });
  58.  
  59. })(jQuery);
  60. // ]]></script>
  61.  
  62.  
  63.  
  64.  
  65. <style type="text/css">
  66.  
  67.  
  68.  
  69. ::-webkit-scrollbar-thumb:vertical {
  70. background-color:#86c5da; /*scrollbar's slider color*/
  71. height:100px;
  72.  
  73.  
  74. }
  75.  
  76.  
  77. ::-webkit-scrollbar-thumb:horizontal {
  78. background-color:#86c5da; /*scrollbar's slider color*/
  79. height:100px !important;
  80. }
  81.  
  82. ::-webkit-scrollbar {
  83. height:10px;
  84. width:7px; /*width of slider*/
  85. background-color:#cfcfcf; /*scrollbar's main color*/
  86. }
  87.  
  88. body{
  89. background:#9be5e3; /* BACKGROUND COLOR */
  90.  
  91. font-size:12px;
  92. color:#000;
  93. font-family:helvetica;
  94. }
  95.  
  96.  
  97.  
  98. a:link, a:active, a:visited {
  99. color:#660033; /*LINK COLOR*/
  100. -webkit-transition:0.6s ease-out;
  101. -moz-transition:0.6s ease-out;
  102. transition:0.6s ease-out;
  103. text-decoration:none;
  104. }
  105.  
  106. a:hover {
  107. color:#ff0000; /*LINK HOVER COLOR*/
  108. transition:0.6s;
  109. -webkit-transition:0.6s;
  110. -moz-transition:0.6s;
  111.  
  112. }
  113.  
  114.  
  115. .hidden {
  116. display: none;
  117. }
  118.  
  119. .unhidden {
  120. display: block;
  121. }
  122.  
  123. /*----------------- TOOLTIP -----------------*/
  124. #s-m-t-tooltip{
  125. font-size:10px;
  126. position:absolute;
  127. margin-top: 15px;
  128. margin-left:15px;
  129. letter-spacing:1px;
  130. z-index:9999;
  131. background:white;
  132. color:#000;
  133. text-transform:lowercase;
  134. padding:2px 3px 2px 3px;
  135. -webkit-transition:all 0.3s;
  136. -moz-transition:all 0.3s;
  137. -ms-transition:all 0.3s;
  138. -o-transition:all 0.3s;
  139. transition:all 0.3s;
  140. border:2px dotted #ff6699;
  141. }
  142.  
  143.  
  144. /*---------TOP NAV---------------*/
  145. #navborder {
  146. left:0px;
  147. top:73px;
  148. width:100%;
  149. border-bottom:2px solid black; /* top border color */
  150. position:fixed;
  151. }
  152.  
  153. #nav1 {
  154. position:fixed;
  155. left:400px;
  156. width:50px;
  157. height:35px;
  158. border-radius:50px;
  159. -webkit-border-radius:50px;
  160. -moz-border-radius:50px;
  161. background:#083467; /* 1st navlink color
  162. ! To change color for ALL the circle links press CTRL + F and search #084367 . replace with whatever hex code you want */
  163. top:50px;
  164. color:transparent;
  165. padding-top:15px;
  166. text-align:center;
  167. font-size:10px;
  168. text-transform:uppercase;
  169.  
  170. }
  171.  
  172.  
  173.  
  174. #nav2 {
  175. position:fixed;
  176. left:500px;
  177. width:50px;
  178. height:35px;
  179. border-radius:50px;
  180. -webkit-border-radius:50px;
  181. -moz-border-radius:50px;
  182. background:#083467;
  183. top:50px;
  184. color:transparent;
  185. text-align:Center;
  186. padding-top:15px;
  187. font-size:10px;
  188. text-transform:uppercase;
  189.  
  190. }
  191.  
  192. #nav3 {
  193. position:fixed;
  194. left:600px;
  195. width:50px;
  196. height:35px;
  197. border-radius:50px;
  198. -webkit-border-radius:50px;
  199. -moz-border-radius:50px;
  200. background:#083467;
  201. top:50px;
  202. color:transparent;
  203. text-align:Center;
  204. padding-top:15px;
  205. font-size:10px;
  206. text-transform:uppercase;
  207. }
  208.  
  209. #nav1:hover {
  210. color:#000;
  211. background:#9be5e3;
  212. -webkit-transition:0.6s ease-out;
  213. -moz-transition:0.6s ease-out;
  214. transition:0.6s ease-out;
  215.  
  216. }#nav2:hover {
  217. color:#000;
  218. background:#9be5e3;
  219. -webkit-transition:0.6s ease-out;
  220. -moz-transition:0.6s ease-out;
  221. transition:0.6s ease-out;
  222.  
  223. }#nav3:hover {
  224. color:#000;
  225. background:#9be5e3;
  226. -webkit-transition:0.6s ease-out;
  227. -moz-transition:0.6s ease-out;
  228. transition:0.6s ease-out;
  229.  
  230. }
  231.  
  232. /*------------ SIDEBAR-----------*/
  233. #border {
  234. left:123px;
  235. top:0px;
  236. position:fixed;
  237. height:100%;
  238. border-right:2px solid black; /* left border color*/
  239. }
  240.  
  241.  
  242.  
  243. #tab1 {
  244. position:fixed;
  245. left:100px;
  246. top:200px;
  247. width:50px;
  248. height:35px;
  249. border-radius:50px;
  250. -webkit-border-radius:50px;
  251. -moz-border-radius:50px;
  252. background:#083467;
  253. color:transparent;
  254. padding-top:15px;
  255. text-align:center;
  256. font-size:10px;
  257. text-transform:uppercase;
  258. }
  259.  
  260. #tab2 {
  261. position:fixed;
  262. left:100px;
  263. top:300px;
  264. width:50px;
  265. height:35px;
  266. border-radius:50px;
  267. -webkit-border-radius:50px;
  268. -moz-border-radius:50px;
  269. background:#083467;
  270. color:transparent;
  271. padding-top:15px;
  272. text-align:center;
  273. font-size:10px;
  274. text-transform:uppercase;
  275. }
  276.  
  277. #tab3 {
  278. position:fixed;
  279. left:100px;
  280. top:400px;
  281. width:50px;
  282. height:35px;
  283. border-radius:50px;
  284. -webkit-border-radius:50px;
  285. -moz-border-radius:50px;
  286. background:#083467;
  287. color:transparent;
  288. padding-top:15px;
  289. text-align:center;
  290. font-size:10px;
  291. text-transform:uppercase;
  292. }
  293.  
  294. #tab1:hover {
  295. color:#000;
  296. background:#9be5e3;
  297. -webkit-transition:0.6s ease-out;
  298. -moz-transition:0.6s ease-out;
  299. transition:0.6s ease-out;
  300.  
  301. }
  302. #tab2:hover {
  303. color:#000;
  304. background:#9be5e3;
  305. -webkit-transition:0.6s ease-out;
  306. -moz-transition:0.6s ease-out;
  307. transition:0.6s ease-out;
  308.  
  309. }
  310. #tab3:hover {
  311. color:#000;
  312. background:#9be5e3;
  313. -webkit-transition:0.6s ease-out;
  314. -moz-transition:0.6s ease-out;
  315. transition:0.6s ease-out;
  316.  
  317. }
  318.  
  319. /*------ containers (don't edit) --------*/
  320. #cont1 {
  321. position:fixed;
  322. left:200px;
  323. width:650px;
  324. height:450px;
  325. top:150px;
  326.  
  327.  
  328. }
  329.  
  330. #cont2 {
  331. position:fixed;
  332. left:200px;
  333. width:650px;
  334. height:450px;
  335. top:100px;
  336. overflow:auto;
  337. }
  338.  
  339. #cont3 {
  340. position:fixed;
  341. left:200px;
  342. width:650px;
  343. overflow:auto;
  344. height:450px;
  345. top:100px;
  346. }
  347.  
  348. /*-------- first container-------*/
  349.  
  350. .aboutimg {
  351. height:350px;
  352. margin-top:20px;
  353. position:fixed;
  354. border-bottom:1px solid white;
  355. }
  356.  
  357. .aboutimg img {
  358. width:200px;
  359. max-height:350px;
  360. }
  361.  
  362. .about {
  363. border:1px dotted #000; /* about box border color */
  364. width:380px;
  365. position:fixed;
  366. margin-left:250px;
  367. background:#eeeeee; /* about box bg color */
  368. opacity:100;
  369. overflow:auto;
  370. padding:10px;
  371. margin-top:25px;
  372. height:380px;
  373. line-height:150%;
  374.  
  375. }
  376.  
  377. .atitle {
  378. position:fixed;
  379. margin-left:250px;
  380. width:400px;
  381. text-align:center;
  382. text-transform:uppercase;
  383. font-size:20px;
  384. }
  385.  
  386. .links {
  387. position:fixed;
  388. width:200px;
  389. height:25px;
  390. margin-top:375px;
  391. text-align:Center;
  392. }
  393.  
  394. .links a {
  395. color:#000; /* links under the image color */
  396. text-transform:lowercase;
  397. font-weight:bold;
  398. font-size:10px;
  399. display:inline-block;
  400. margin-left:10px;
  401. }
  402.  
  403. .links a:hover {
  404. border-left:10px solid #083467;
  405. }
  406.  
  407. /*-------- tags ----------*/
  408.  
  409. .tagbox {
  410. width:300px;
  411. height:200px;
  412.  
  413. display:inline-block;
  414. margin-left:15px;
  415. margin-top:20px;
  416. }
  417.  
  418. .tagtitle {
  419. font-size:16px;
  420. text-transform:lowercase;
  421. border-bottom:1px solid #eee;
  422. font-weight:bold;
  423. text-align:left;
  424. height:20px;
  425. }
  426.  
  427. .tags {
  428. font-family:helvetica;
  429. font-style:italic;
  430. width:300px;
  431. height:180px;
  432. border-right:1px dotted #000;
  433. overflow:auto;
  434. font-size:11px;
  435.  
  436. }
  437.  
  438. .tags a {
  439. display:inline-block;
  440. width:270px;
  441. padding:2px 5px 2px 5px;
  442. margin-top:5px;
  443.  
  444. }
  445.  
  446. .tags a:hover {
  447. background:#083467; /* tag hover bg color */
  448. color:#9be5e3; /* tag hover color */
  449. }
  450.  
  451. /*--------- blogroll-------*/
  452. .blogroll {
  453. margin-top:40px;
  454. padding:5px;
  455. }
  456.  
  457. .blogroll img {
  458. opacity: 0.8;
  459. padding:10px;
  460. border-radius:50px;
  461. -webkit-border-radius:50px;
  462. -moz-border-radius:50px;
  463.  
  464. -webkit-transition:0.6s;
  465. -moz-transition:0.6s;
  466. transition:0.6s;
  467. }
  468.  
  469. .blogroll img:hover {
  470. opacity:1;
  471. transition:0.6s;
  472. -webkit-transition:0.6s;
  473. -moz-transition:0.6s;
  474. }
  475.  
  476.  
  477. </style>
  478. </head>
  479. <body>
  480.  
  481. <!------ sidebar----->
  482. <div id="navborder"></div>
  483.  
  484. <a href="/"><div id="nav1">home</div></a>
  485. <a href="/ask"><div id="nav2">ask</div></a>
  486. <a href="http://jasnahdavar.tumblr.com"><div id="nav3">credit</div></a>
  487. <!------- do not remove credit------>
  488. <div id="border"></div>
  489. <a href="javascript:unhide('cont1');hide('cont2');hide('cont3');"> <div id="tab1">about</div></a>
  490. <a href="javascript:unhide('cont2');hide('cont1');hide('cont3');"><div id="tab2">tags</div></a>
  491. <a href="javascript:unhide('cont3');hide('cont2');hide('cont1');"> <div id="tab3">blogroll</div></a>
  492.  
  493. <!------ container 1---->
  494. <div id="cont1" class="unhidden">
  495. <div class="links"> <!--------- links under the image --------->
  496.  
  497. <a href="URL">link</a><!--- add/remove as many as you like ----->
  498.  
  499. <a href="URL">link</a>
  500.  
  501. <a href="URL">link</a>
  502.  
  503. <a href="URL">link</a>
  504.  
  505. </div>
  506. <div class="aboutimg">
  507. <img src="https://31.media.tumblr.com/5ed293b10bce8b738957eb5d0d6ff3d0/tumblr_inline_n6n458jnSs1s9tfpw.jpg">
  508.  
  509. <!--------- IMAGE WILL AUTOMTICALLY RESIZE TO 200PX WIDE. NO TALLER THAN 350PX ---->
  510. </div>
  511. <div class="atitle">about</div>
  512. <div class="about">
  513. <!----------------- write your about me here ------------------------->
  514. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  515. <br>
  516. <!------------- about me ends ------------------->
  517.  
  518.  
  519. </div>
  520.  
  521. </div>
  522.  
  523. <!-------- container 2-->
  524. <div id="cont2" class="hidden">
  525. <!------------ first tag box---------------->
  526. <div class="tagbox">
  527. <div class="tagtitle">
  528. TAG BOX TITLE
  529. </div>
  530. <div class="tags">
  531. <a href="/tagged/">tag</a>
  532. <a href="/tagged/">tag</a>
  533. <a href="/tagged/">tag</a>
  534. <a href="/tagged/">tag</a>
  535. <!------- add as many tags as you want ------->
  536.  
  537. </div>
  538. </div>
  539.  
  540. <!------------- second tag box ---------------->
  541. <div class="tagbox">
  542. <div class="tagtitle">TAG BOX TITLE </div>
  543. <div class="tags">
  544. <a href="/tagged/">tag</a>
  545. <a href="/tagged/">tag</a>
  546. <a href="/tagged/">tag</a>
  547. <a href="/tagged/">tag</a>
  548. </div>
  549. </div>
  550.  
  551. <!----------- to add more tag boxes copy this code
  552. <div class="tagbox">
  553. <div class="tagtitle">TAG TITLE</div>
  554. <div class="tags">
  555. <a href="/tagged/">tag</a>
  556. </div>
  557. </div>
  558. -------------------------------------->
  559. <!------------ paste in the space below--------------------->
  560.  
  561.  
  562. <!-------------- do not paste anything below this ----------->
  563. </div>
  564.  
  565. <!------- container 3-->
  566. <div id="cont3" class="hidden">
  567. <div class="blogroll">{block:Following}{block:Followed}<a target='_blank' href='{followedURL}' title="{followedtitle}"><img border='0' src='{FollowedPortraitURL-48}' alt="{FollowedTitle}"/> &nbsp;{/block:Followed}{/block:Following}</div>
  568. </div>
  569.  
  570. </body>
  571. </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!