Advertisement
sasorisbutt

Ice Cream Page - BakaThemes

Jan 4th, 2014
1,012
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.13 KB | None | 0 0
  1. <!--
  2.  
  3. PAGE MADE BY BAKATHEMES OR AKATSUKII @ TUMBLR
  4. Edit/tweak as much as you like but pleeeeaaaase
  5. DO NOT remove the credits, copy and
  6. redistribute the theme as your own.
  7. I will fucking hunt you down if you do.
  8.  
  9. -->
  10.  
  11.  
  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  14.  
  15. <head>
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.  
  21. <script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  22.  
  23. <script src="http://static.tumblr.com/fsavqrf/S8emwz82c/jquery.style-my-tooltips-black.js"></script>
  24.  
  25. <script>
  26. $().ready(function() {
  27. $("[title]").style_my_tooltips({
  28. tip_follows_cursor: "on", //on/off
  29. tip_delay_time: 80 //milliseconds
  30. });
  31. });
  32. </script>
  33.  
  34.  
  35. <style type="text/css">
  36.  
  37. ::-webkit-scrollbar {
  38. width:5px;
  39. height:3px;
  40. background:#111;
  41. }
  42.  
  43. ::-webkit-scrollbar-thumb {
  44. background:#4eb7ff;
  45. }
  46.  
  47. #s-m-t-tooltip {
  48. max-width:200px;
  49. font-family:Calibri;
  50. font-size:8px;
  51. text-transform:uppercase;
  52. letter-spacing:1px;
  53. margin:0 0 0 20px;
  54. padding:3px;
  55. color:#fff;
  56. background:#4eb7ff;
  57. z-index:999999;
  58. }
  59.  
  60. body {
  61. font-family:Calibri;
  62. font-size:8px;
  63. color:#999;
  64. letter-spacing:1px;
  65. text-transform:uppercase;
  66. margin:0;
  67. padding:0;
  68. background:#000;
  69. cursor:default;
  70. }
  71.  
  72. a {
  73. text-decoration:none;
  74. color:#999;
  75. cursor:crosshair;
  76. transition:all 0.5s ease;
  77. -webkit-transition:all 0.5s ease;
  78. -moz-transition:all 0.5s ease;
  79. -o-transition:all 0.5s ease;
  80. -ms-transition:all 0.5s ease;
  81. }
  82.  
  83. a:hover {
  84. color:#ccc;
  85. }
  86.  
  87. #center {
  88. top:120px;
  89. width:800px;
  90. height:518px;
  91. margin:120px auto;
  92. }
  93.  
  94. #right {
  95. float:right;
  96. width:200px;
  97. height:512px;
  98. text-align:right;
  99. border-top:3px double #111;
  100. border-bottom:3px double #111;
  101. transition:all 0.5s ease;
  102. -webkit-transition:all 0.5s ease;
  103. -moz-transition:all 0.5s ease;
  104. -o-transition:all 0.5s ease;
  105. -ms-transition:all 0.5s ease;
  106. overflow:hidden;
  107. }
  108.  
  109. #right:hover {
  110. border-top:3px double #4eb7ff;
  111. border-bottom:3px double #4eb7ff;
  112. transition:all 0.5s ease;
  113. -webkit-transition:all 0.5s ease;
  114. -moz-transition:all 0.5s ease;
  115. -o-transition:all 0.5s ease;
  116. -ms-transition:all 0.5s ease;
  117. }
  118.  
  119. #right img {
  120. width:180px;
  121. padding:12px;
  122. }
  123.  
  124. #right a {
  125. display:block;
  126. margin-right:10px;
  127. padding:8px;
  128. transition:all 0.5s ease;
  129. -webkit-transition:all 0.5s ease;
  130. -moz-transition:all 0.5s ease;
  131. -o-transition:all 0.5s ease;
  132. -ms-transition:all 0.5s ease;
  133. }
  134.  
  135. #right a:hover {
  136. padding-right:80px;
  137. color:#111;
  138. background:#4eb7ff;
  139. text-decoration:underline;
  140. transition:all 0.5s ease;
  141. -webkit-transition:all 0.5s ease;
  142. -moz-transition:all 0.5s ease;
  143. -o-transition:all 0.5s ease;
  144. -ms-transition:all 0.5s ease;
  145. }
  146.  
  147. .left {
  148. float:left;
  149. width:584px;
  150. height:518px;
  151. border-left:3px double #4eb7ff;
  152. }
  153.  
  154. .top {
  155. background:#161616;
  156. padding:10px 20px;
  157. text-align:center;
  158. border-bottom:1px dashed #4eb7ff;
  159. }
  160.  
  161. .top li {
  162. list-style-type:none;
  163. }
  164.  
  165. .top li b {
  166. color:#4eb7ff;
  167. }
  168.  
  169. #desc {
  170. height:420px;
  171. margin-top:20px;
  172. padding:10px;
  173. text-align:center;
  174. overflow-y:auto;
  175. }
  176.  
  177. #message {
  178. display:none;
  179. }
  180.  
  181. #faq {
  182. height:260px;
  183. margin-top:20px;
  184. overflow-y:auto;
  185. }
  186.  
  187. #question {
  188. float:left;
  189. width:280px;
  190. margin-left:5px;
  191. }
  192.  
  193. #question h4 {
  194. padding:10px;
  195. text-align:center;
  196. background:#161616;
  197. }
  198.  
  199. #links {
  200. display:none;
  201. }
  202.  
  203. #link {
  204. height:450px;
  205. overflow-x:hidden;
  206. overflow-y:auto;
  207. }
  208.  
  209. #link table td {
  210. vertical-align:top;
  211. }
  212.  
  213. #links #title table {
  214. margin-left:3px;
  215. border-collapse: separate;
  216. border-spacing: 4px;
  217. }
  218.  
  219. #links #title table td {
  220. width:71px;
  221. padding:10px 20px;
  222. background:#161616;
  223. }
  224.  
  225. #section {
  226. width:111px;
  227. }
  228.  
  229. #section a {
  230. display:block;
  231. width:78px;
  232. height:10px;
  233. margin:0 0 10px 3px;
  234. padding:5px;
  235. text-align:center;
  236. border-bottom:1px solid #111;
  237. transition:all 0.5s ease;
  238. -webkit-transition:all 0.5s ease;
  239. -moz-transition:all 0.5s ease;
  240. -o-transition:all 0.5s ease;
  241. -ms-transition:all 0.5s ease;
  242. overflow:hidden;
  243. white-space:nowrap;
  244. }
  245.  
  246. #section a:hover {
  247. border-bottom:1px solid #4eb7ff;
  248. transition:all 0.5s ease;
  249. -webkit-transition:all 0.5s ease;
  250. -moz-transition:all 0.5s ease;
  251. -o-transition:all 0.5s ease;
  252. -ms-transition:all 0.5s ease;
  253. }
  254.  
  255. #blogroll {
  256. display:none;
  257. width:584px;
  258. }
  259.  
  260. #names {
  261. margin-top:7px;
  262. width:584px;
  263. height:480px;
  264. overflow-x:hidden;
  265. overflow-y:auto;
  266. }
  267.  
  268. #name a {
  269. float:left;
  270. width:78px;
  271. height:10px;
  272. margin:0 0 3px 8px;
  273. padding:5px;
  274. text-align:center;
  275. border-bottom:1px solid #111;
  276. transition:all 0.5s ease;
  277. -webkit-transition:all 0.5s ease;
  278. -moz-transition:all 0.5s ease;
  279. -o-transition:all 0.5s ease;
  280. -ms-transition:all 0.5s ease;
  281. overflow:hidden;
  282. white-space:nowrap;
  283. }
  284.  
  285. #name a:hover {
  286. border-bottom:1px solid #4eb7ff;
  287. transition:all 0.5s ease;
  288. -webkit-transition:all 0.5s ease;
  289. -moz-transition:all 0.5s ease;
  290. -o-transition:all 0.5s ease;
  291. -ms-transition:all 0.5s ease;
  292. }
  293.  
  294. #name:hover #info {
  295. display:table;
  296. }
  297.  
  298. #info {
  299. position:fixed;
  300. display:none;
  301. width:584px;
  302. height:70px;
  303. margin-top:550px;
  304. overflow:hidden;
  305. }
  306.  
  307. #info b {
  308. color:#4eb7ff;
  309. font-weight:none;
  310. }
  311.  
  312. #info img {
  313. float:left;
  314. margin-left:120px;
  315. border:3px solid #4eb7ff;
  316. }
  317.  
  318. #text {
  319. display:table-cell;
  320. width:350px;
  321. color:#999;
  322. vertical-align:middle;
  323. }
  324.  
  325. </style>
  326. </head>
  327.  
  328.  
  329.  
  330. <body>
  331.  
  332.  
  333.  
  334. <div id="center">
  335.  
  336.  
  337.  
  338. <!--------------------------- START OF SIDEBAR --------------------------->
  339.  
  340. <div id="right">
  341. <!-- Sidebar Image Here. Use this tag: <img src=""> -->
  342.  
  343. <a href="/">home</a>
  344. <a href="#" onclick="toggleVisibility('about')">About</a>
  345. <a href="#" onclick="toggleVisibility('message')">Message/FAQ</a>
  346. <a href="#" onclick="toggleVisibility('links')">Links</a>
  347. <a href="#" onclick="toggleVisibility('blogroll')">Blogroll</a>
  348.  
  349. </div>
  350.  
  351. <!---------------------------- END OF SIDEBAR ---------------------------->
  352.  
  353.  
  354.  
  355. <div id="about" class="left">
  356.  
  357.  
  358.  
  359. <!-------------------------- START OF ABOUT PAGE -------------------------->
  360.  
  361. <div class="top"><ul>
  362. <li><b>Name: </b><!-- Your Name Here --></li>
  363. <li><b>Age: </b><!-- Your Age Here --></li>
  364. <li><b>Gender: </b><!-- Male/Female --></li>
  365. <li><b>Location: </b><!-- Your Location Here --></li>
  366. </ul></div>
  367.  
  368. <div id="desc">
  369. <!---------- DESCRIPTION GOES HERE ---------->
  370. </div>
  371.  
  372. <!-------------------------- END OF ABOUT PAGE -------------------------->
  373.  
  374.  
  375.  
  376. </div>
  377.  
  378. <div id="message" class="left">
  379.  
  380. <div class="top"><!-- Ask Page Title Here --></div>
  381.  
  382.  
  383.  
  384.  
  385. <!------------------------- START OF MESSAGE PAGE ------------------------->
  386.  
  387. <p style="margin-top:20px;"><center>
  388.  
  389. <!---------- START OF ASK BOX ---------->
  390. <!---------- PUT YOUR URL INSIDE THE IFRAME TAG ---------->
  391.  
  392. <iframe frameborder="0" height="180" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/yourusernamehere.tumblr.com" width="500px"></iframe>
  393.  
  394. <!---------- END OF ASK BOX ---------->
  395.  
  396. </center></p>
  397.  
  398. <div id="faq">
  399.  
  400. <!---------- START OF FAQ ---------->
  401.  
  402. <div id="question">
  403. <h4><!-- Question here --></h4>
  404. <p><!-- Answer here --></p>
  405. </div>
  406. <div id="question">
  407. <h4><!-- Question here --></h4>
  408. <p><!-- Answer here --></p>
  409. </div>
  410. <div id="question">
  411. <h4><!-- Question here --></h4>
  412. <p><!-- Answer here --></p>
  413. </div>
  414. <div id="question">
  415. <h4><!-- Question here --></h4>
  416. <p><!-- Answer here --></p>
  417. </div>
  418. <div id="question">
  419. <h4><!-- Question here --></h4>
  420. <p><!-- Answer here --></p>
  421. </div>
  422. <div id="question">
  423. <h4><!-- Question here --></h4>
  424. <p><!-- Answer here --></p>
  425. </div>
  426. <div id="question">
  427. <h4><!-- Question here --></h4>
  428. <p><!-- Answer here --></p>
  429. </div>
  430. <div id="question">
  431. <h4><!-- Question here --></h4>
  432. <p><!-- Answer here --></p>
  433. </div>
  434.  
  435. <!---------- END OF FAQ ---------->
  436.  
  437. <!------------------------- END OF MESSAGE PAGE ------------------------->
  438.  
  439.  
  440.  
  441. </div>
  442. </div>
  443.  
  444. <div id="links" class="left">
  445.  
  446.  
  447.  
  448. <!-------------------------- START OF LINKS PAGE -------------------------->
  449.  
  450. <div class="top"><!-- Links Page Title Here --></div>
  451.  
  452. <div id="title"><table>
  453.  
  454. <td><!-- Category 1 Title Here --></td>
  455. <td><!-- Category 2 Title Here --></td>
  456. <td><!-- Category 3 Title Here --></td>
  457. <td><!-- Category 4 Title Here --></td>
  458. <td><!-- Category 5 Title Here --></td>
  459.  
  460. </table></div>
  461.  
  462. <div id="link"><table>
  463.  
  464. <td><div id="section">
  465.  
  466. <!---------- START OF CATEGORY 1 LINKS ---------->
  467.  
  468. <!-- <a> LINK </a> -->
  469. <!-- <a> LINK </a> -->
  470. <!-- <a> LINK </a> -->
  471. <!-- <a> LINK </a> -->
  472. <!-- <a> LINK </a> -->
  473. <!-- <a> LINK </a> -->
  474. <!-- <a> LINK </a> -->
  475. <!-- <a> LINK </a> -->
  476. <!-- <a> LINK </a> -->
  477. <!-- <a> LINK </a> -->
  478. <!-- <a> LINK </a> -->
  479. <!-- <a> LINK </a> -->
  480. <!-- <a> LINK </a> -->
  481.  
  482. </div></td>
  483.  
  484. <!---------- END OF CATEGORY 1 LINKS ---------->
  485.  
  486. <!---------- START OF CATEGORY 2 LINKS ---------->
  487.  
  488. <td><div id="section">
  489.  
  490. <!-- <a> LINK </a> -->
  491. <!-- <a> LINK </a> -->
  492. <!-- <a> LINK </a> -->
  493. <!-- <a> LINK </a> -->
  494. <!-- <a> LINK </a> -->
  495. <!-- <a> LINK </a> -->
  496. <!-- <a> LINK </a> -->
  497. <!-- <a> LINK </a> -->
  498. <!-- <a> LINK </a> -->
  499. <!-- <a> LINK </a> -->
  500. <!-- <a> LINK </a> -->
  501. <!-- <a> LINK </a> -->
  502. <!-- <a> LINK </a> -->
  503.  
  504. </div></td>
  505.  
  506. <!---------- END OF CATEGORY 2 LINKS ---------->
  507.  
  508. <!---------- START OF CATEGORY 3 LINKS ---------->
  509.  
  510. <td><div id="section">
  511.  
  512. <!-- <a> LINK </a> -->
  513. <!-- <a> LINK </a> -->
  514. <!-- <a> LINK </a> -->
  515. <!-- <a> LINK </a> -->
  516. <!-- <a> LINK </a> -->
  517. <!-- <a> LINK </a> -->
  518. <!-- <a> LINK </a> -->
  519. <!-- <a> LINK </a> -->
  520. <!-- <a> LINK </a> -->
  521. <!-- <a> LINK </a> -->
  522. <!-- <a> LINK </a> -->
  523. <!-- <a> LINK </a> -->
  524. <!-- <a> LINK </a> -->
  525.  
  526. </div></td>
  527.  
  528. <!---------- END OF CATEGORY 3 LINKS ---------->
  529.  
  530. <!---------- START OF CATEGORY 4 LINKS ---------->
  531.  
  532. <td><div id="section">
  533.  
  534. <!-- <a> LINK </a> -->
  535. <!-- <a> LINK </a> -->
  536. <!-- <a> LINK </a> -->
  537. <!-- <a> LINK </a> -->
  538. <!-- <a> LINK </a> -->
  539. <!-- <a> LINK </a> -->
  540. <!-- <a> LINK </a> -->
  541. <!-- <a> LINK </a> -->
  542. <!-- <a> LINK </a> -->
  543. <!-- <a> LINK </a> -->
  544. <!-- <a> LINK </a> -->
  545. <!-- <a> LINK </a> -->
  546. <!-- <a> LINK </a> -->
  547.  
  548. </div></td>
  549.  
  550. <!---------- END OF CATEGORY 4 LINKS ---------->
  551.  
  552. <!---------- START OF CATEGORY 5 LINKS ---------->
  553.  
  554. <td><div id="section">
  555.  
  556. <!-- <a> LINK </a> -->
  557. <!-- <a> LINK </a> -->
  558. <!-- <a> LINK </a> -->
  559. <!-- <a> LINK </a> -->
  560. <!-- <a> LINK </a> -->
  561. <!-- <a> LINK </a> -->
  562. <!-- <a> LINK </a> -->
  563. <!-- <a> LINK </a> -->
  564. <!-- <a> LINK </a> -->
  565. <!-- <a> LINK </a> -->
  566. <!-- <a> LINK </a> -->
  567. <!-- <a> LINK </a> -->
  568. <!-- <a> LINK </a> -->
  569.  
  570. </div></td>
  571.  
  572. <!---------- END OF CATEGORY 5 LINKS ---------->
  573.  
  574. </table></div>
  575.  
  576. <!-------------------------- END OF LINKS PAGE -------------------------->
  577.  
  578.  
  579.  
  580. </div>
  581.  
  582. <div id="blogroll" class="left">
  583.  
  584.  
  585.  
  586. <!------------------------ START OF BLOGROLL PAGE ------------------------>
  587.  
  588. <div class="top" style="width:545px;">
  589. <!---- Blogroll Page Title Here ---->
  590. </div>
  591.  
  592. <div id="names">
  593. {block:Following}{block:Followed}
  594.  
  595. <div id="name">
  596.  
  597. <a target="_blank" href="{FollowedURL}">{FollowedName}</a>
  598.  
  599. <div id="info">
  600. <img src="{FollowedPortraitURL-64}">
  601. <div id="text">
  602. Username:<b> {FollowedName} </b><br />
  603. Blog Title:<b> {FollowedTitle} </b>
  604. </div>
  605. </div>
  606.  
  607. </div>
  608.  
  609. {/block:Followed}{/block:Following}
  610. </div>
  611.  
  612. <!------------------------ END OF BLOGROLL PAGE ------------------------>
  613.  
  614.  
  615.  
  616. </div>
  617.  
  618. </div>
  619.  
  620.  
  621.  
  622.  
  623. <script type="text/javascript">
  624. var divs = ["about", "message", "links", "blogroll"];
  625. var visibleDivId = null;
  626.  
  627. function toggleVisibility(divId) {
  628. if(visibleDivId === divId) {
  629. visibleDivId = null;
  630. } else {
  631. visibleDivId = divId;
  632. }
  633.  
  634. hideNonVisibleDivs();
  635. }
  636.  
  637. function hideNonVisibleDivs() {
  638. var i, divId, div;
  639.  
  640. for(i = 0; i < divs.length; i++) {
  641. divId = divs[i];
  642. div = document.getElementById(divId);
  643.  
  644. if(visibleDivId === divId) {
  645. div.style.display = "block";
  646. } else {
  647. div.style.display = "none";
  648. }
  649. }
  650. }
  651. </script>
  652.  
  653.  
  654.  
  655. </body>
  656. </html>
  657.  
  658.  
  659. <!--
  660.  
  661. PAGE MADE BY BAKATHEMES OR AKATSUKII @ TUMBLR
  662. Edit/tweak as much as you like but pleeeeaaaase
  663. DO NOT remove the credits, copy and
  664. redistribute the theme as your own.
  665. I will fucking hunt you down if you do.
  666.  
  667. -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement